:root {
  --bg: #eef0e8;
  --bg-strong: #d9ded2;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: #ffffff;
  --panel-dark: #101815;
  --panel-dark-soft: #18241f;
  --line: #d3d9cf;
  --line-strong: #bfc9c3;
  --ink: #17201b;
  --muted: #677067;
  --muted-strong: #4c5752;
  --accent: #b86f38;
  --accent-soft: #f2dfc9;
  --teal: #246e68;
  --teal-soft: #d5ece8;
  --rose: #9a4857;
  --rose-soft: #f0dbe0;
  --gold: #c99a45;
  --obsidian: #0d1411;
  --shadow-lg: 0 26px 70px rgba(24, 35, 30, 0.13);
  --shadow-md: 0 14px 34px rgba(24, 35, 30, 0.1);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --transition: 220ms cubic-bezier(.2,.8,.2,1);
  --font: "SF Pro Display", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  background:
    radial-gradient(circle at 12% 8%, rgba(36, 110, 104, 0.2), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(184, 111, 56, 0.24), transparent 24%),
    radial-gradient(circle at 50% 120%, rgba(201, 154, 69, 0.16), transparent 36%),
    linear-gradient(135deg, #faf9f2 0%, var(--bg) 42%, var(--bg-strong) 100%);
  color: var(--ink);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 24, 21, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 21, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
  z-index: -1;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: none;
  cursor: pointer;
  background: none;
}

#app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity var(--transition), transform var(--transition);
}

#app.is-authenticated {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 440px);
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 10% 16%, rgba(184, 111, 56, 0.22), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(36, 110, 104, 0.24), transparent 32%),
    linear-gradient(135deg, #f7f4ea 0%, #e7ebe2 48%, #d9ded2 100%);
  transition: opacity var(--transition), visibility var(--transition);
}

.login-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-art {
  position: relative;
  overflow: hidden;
  min-height: min(680px, 82vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 5vw, 58px);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(13, 20, 17, 0.95), rgba(25, 43, 35, 0.94)),
    var(--panel-dark);
  color: #f7fbf8;
  box-shadow: 0 34px 90px rgba(18, 26, 22, 0.26);
}

.login-art::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
}

.login-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.85;
}

.orb-one {
  top: 10%;
  right: 10%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(184, 111, 56, 0.56), transparent 68%);
}

.orb-two {
  left: 8%;
  bottom: 12%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(36, 110, 104, 0.46), transparent 70%);
}

.login-art h1 {
  position: relative;
  max-width: 760px;
  margin: 0 0 18px;
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.login-art p {
  position: relative;
  max-width: 720px;
  margin: 0;
  color: rgba(247, 251, 248, 0.74);
  font-size: 17px;
  line-height: 1.8;
}

.login-feature-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.login-feature-grid span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 251, 248, 0.88);
  font-size: 13px;
  font-weight: 800;
}

.login-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 249, 242, 0.78)),
    var(--panel-strong);
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand span,
.login-card p {
  color: var(--muted);
}

.login-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.login-card p {
  margin: 0;
  line-height: 1.65;
}

.login-field {
  display: grid;
  gap: 8px;
}

.login-field span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-field input {
  min-height: 50px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
}

.login-field input:focus {
  outline: none;
  border-color: rgba(36, 110, 104, 0.5);
  box-shadow: 0 0 0 4px rgba(36, 110, 104, 0.12);
}

.login-error {
  min-height: 20px;
  color: var(--rose);
  font-size: 13px;
  font-weight: 700;
}

.login-submit,
.login-demo {
  width: 100%;
}

.login-note {
  text-align: center;
  font-size: 12px;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62)),
    rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.24), transparent 26%),
    linear-gradient(135deg, #18231e, #293a33);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.user-badge strong,
.user-badge small {
  display: block;
  white-space: nowrap;
}

.user-badge strong {
  font-size: 13px;
}

.user-badge small {
  color: var(--muted);
  font-size: 11px;
}

.sidebar {
  padding: 16px 10px 16px 16px;
  background: transparent;
  min-width: 0;
}

.sidebar-shell {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: calc(100vh - 32px);
  padding: 18px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(184, 111, 56, 0.22), transparent 26%),
    radial-gradient(circle at 80% 12%, rgba(36, 110, 104, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(11, 17, 15, 0.98), rgba(21, 31, 27, 0.98)),
    var(--panel-dark);
  color: #f1f5f2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 70px rgba(12, 18, 16, 0.28);
}

.sidebar-shell::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.sidebar-kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(241, 245, 242, 0.52);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(135deg, var(--accent), #d79d62 60%, #f0d4b2);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 40px rgba(184, 111, 56, 0.32);
}

.brand strong,
.sidebar-foot strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.brand span,
.sidebar-foot span,
.sidebar-foot p {
  color: rgba(241, 245, 242, 0.72);
  font-size: 12px;
}

.sidebar-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  color: rgba(241, 245, 242, 0.78);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent);
  transition: opacity var(--transition);
}

.nav-item:hover {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item:hover::before {
  opacity: 1;
}

.nav-item.active {
  background:
    linear-gradient(135deg, rgba(184, 111, 56, 0.24), rgba(36, 110, 104, 0.22)),
    rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 30px rgba(0,0,0,.18);
}

.sub-nav-item {
  width: 100%;
  margin-left: 0;
  min-height: auto;
  padding-block: 12px;
  font-size: inherit;
  opacity: 1;
}

.nav-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05)),
    rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sidebar-foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 20px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  background:
    linear-gradient(180deg, rgba(250, 249, 242, 0.92), rgba(250, 249, 242, 0.7)),
    rgba(250, 249, 242, 0.72);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(29, 37, 33, 0.08);
  min-width: 0;
}

.topbar-copy {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.topbar h1,
.page-hero h2 {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  word-break: break-word;
}

.topbar p:last-child,
.page-hero p:last-child {
  margin: 0;
  max-width: 840px;
  color: var(--muted);
  line-height: 1.65;
  word-break: break-word;
}

.topbar-actions,
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 8px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.58)),
    rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 12px 32px rgba(24, 35, 30, 0.06);
}

#app.sessions-view-active .topbar {
  display: none;
}

#app.sessions-view-active .view[data-view-panel="sessions"] .page-scroll {
  height: 100vh;
}

.ghost-btn,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.ghost-btn {
  border: 1px solid rgba(23, 32, 27, 0.1);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.ghost-btn:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.ghost-btn.small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.primary-btn.small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.prompt-toolbar .prompt-asset-action {
  border-color: rgba(173, 206, 204, 0.34);
  background: rgba(163, 193, 191, 0.075);
  color: rgba(224, 237, 235, 0.78);
}

.prompt-toolbar .prompt-asset-action:hover {
  border-color: rgba(173, 206, 204, 0.56);
  background: rgba(163, 193, 191, 0.13);
  color: #f1f8f7;
}

.primary-btn {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(135deg, #17211d, #24332c 68%, #2b3f36);
  color: #fff;
  box-shadow: 0 18px 44px rgba(16, 24, 21, 0.18);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(16, 24, 21, 0.24);
}

.primary-btn:disabled,
.ghost-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.mark-reviewed-btn:disabled {
  cursor: default;
}

.view {
  display: none;
  flex: 1;
  min-height: 0;
}

.view.active {
  display: block;
}

.page-scroll {
  height: calc(100vh - 126px);
  overflow: auto;
  padding: 26px 34px 34px;
  min-width: 0;
}

.workbench-grid {
  display: grid;
  grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  height: calc(100vh - 126px);
  overflow: hidden;
  padding: 26px 34px 34px;
  min-width: 0;
}

.session-dock {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(139, 180, 157, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(16, 24, 21, 0.96), rgba(24, 36, 31, 0.94)),
    var(--panel-dark);
  color: #edf5ec;
  box-shadow: 0 18px 44px rgba(13, 20, 17, 0.24);
}

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

.session-dock-head strong {
  display: block;
  margin-top: 3px;
  color: #f6f0de;
  font-size: 15px;
  font-weight: 760;
}

.session-dock-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(237, 245, 236, 0.66);
  font-size: 12px;
  white-space: nowrap;
}

.session-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.session-card {
  flex: 0 0 236px;
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(237, 245, 236, 0.12);
  border-radius: 12px;
  background: rgba(237, 245, 236, 0.075);
  color: #edf5ec;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.session-card:hover,
.session-card:focus-visible,
.session-card.active {
  border-color: rgba(151, 212, 180, 0.52);
  background: rgba(237, 245, 236, 0.12);
  transform: translateY(-1px);
}

.session-card:focus-visible {
  outline: 2px solid rgba(126, 228, 223, 0.42);
  outline-offset: 2px;
}

.session-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.session-card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff8e8;
  font-size: 13px;
  font-weight: 760;
}

.session-rename-input {
  min-width: 0;
  width: min(420px, 100%);
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255, 170, 80, 0.48);
  border-radius: 6px;
  outline: none;
  background: rgba(3, 10, 14, 0.96);
  color: #f4faf8;
  font: inherit;
  font-size: 13px;
}

.session-mode-pill {
  justify-self: start;
  width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(126, 228, 223, 0.18);
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.08);
  color: rgba(207, 243, 239, 0.86);
  font-size: 11px;
  font-weight: 720;
}

.session-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(237, 245, 236, 0.62);
  font-size: 11px;
}

.session-card-idea {
  min-height: 31px;
  color: rgba(237, 245, 236, 0.78);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.session-status-pill {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(237, 245, 236, 0.11);
  color: #dbeee0;
  font-size: 11px;
  font-weight: 760;
}

.session-card[data-status="running"] .session-status-pill {
  background: rgba(70, 154, 201, 0.18);
  color: #aee3ff;
}

.session-card[data-status="queued"] .session-status-pill {
  background: rgba(201, 154, 69, 0.18);
  color: #f5d89b;
}

.session-card[data-status="success"] .session-status-pill {
  background: rgba(92, 165, 118, 0.2);
  color: #bff0cd;
}

.session-card[data-status="failed"] .session-status-pill,
.session-card[data-status="needs_review"] .session-status-pill {
  background: rgba(208, 91, 84, 0.18);
  color: #ffb6ad;
}

.session-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 2px;
}

.session-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(126, 228, 223, 0.2);
  border-radius: 999px;
  background: rgba(4, 14, 18, 0.72);
  color: rgba(225, 247, 243, 0.9);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}

.session-action-btn:hover {
  border-color: rgba(255, 170, 80, 0.42);
  background: rgba(12, 26, 27, 0.95);
  color: #fff8e8;
  transform: translateY(-1px);
}

.session-action-btn.danger {
  border-color: rgba(255, 120, 105, 0.25);
  color: #ffc6bd;
}

.session-action-btn.danger:hover {
  border-color: rgba(255, 120, 105, 0.54);
  background: rgba(44, 14, 13, 0.82);
  color: #fff0ec;
}

.workbench-grid > *,
.field,
.preset-picker {
  min-width: 0;
}

.panel,
.page-hero,
.schema-card,
.library-card,
.template-card,
.agent-map-card,
.band-card,
.api-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.7)),
    var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.panel {
  padding: 24px;
  min-height: 0;
  animation: panelIn 420ms var(--transition) both;
}

.setup-panel,
.trace-panel,
.output-panel,
.studio-column {
  display: flex;
  flex-direction: column;
}

.setup-panel {
  overflow: auto;
}

.trace-panel {
  overflow: hidden;
}

.studio-column {
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.output-panel {
  gap: 18px;
  overflow: hidden;
}

.output-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.72fr);
  gap: 18px;
  min-height: 0;
  flex: 1;
}

.result-main,
.insight-rail {
  min-width: 0;
  min-height: 0;
}

.result-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

.insight-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

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

.result-head {
  margin-bottom: 0;
}

.result-subtitle,
.trace-caption,
.prompt-caption {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.panel-head h2 {
  margin: 0;
  font-size: 22px;
}

.status-dot,
.quality-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status-dot.idle {
  background: #f2f4f3;
  color: var(--muted-strong);
}

.status-dot.live,
.quality-badge {
  background: var(--teal-soft);
  color: var(--teal);
}

.quality-badge.warn {
  background: var(--accent-soft);
  color: var(--accent);
}

.quality-badge.empty {
  background: #f2f4f3;
  color: var(--muted-strong);
}

.field {
  display: block;
  margin-bottom: 18px;
}

.field-label,
.summary-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.idea-input,
.duration-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

.idea-input {
  min-height: 156px;
  resize: vertical;
  padding: 16px 18px;
  line-height: 1.7;
}

.idea-input:focus,
.duration-row input:focus {
  outline: none;
  border-color: rgba(47, 127, 120, 0.55);
  box-shadow: 0 0 0 4px rgba(47, 127, 120, 0.12);
}

.field-hint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.upload-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  transition: border-color var(--transition), background var(--transition);
}

.upload-box:hover {
  border-color: var(--teal);
  background: rgba(214, 238, 235, 0.52);
}

.upload-box input {
  display: none;
}

.upload-box span {
  font-weight: 700;
}

.upload-box small {
  color: var(--muted);
}

.reference-preview {
  margin-top: 10px;
  min-height: 104px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.reference-preview.empty {
  display: grid;
  place-items: center;
}

.reference-placeholder {
  color: var(--muted);
  font-size: 13px;
}

.reference-preview img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
}

.reference-meta {
  padding: 12px 14px 14px;
}

.reference-meta strong {
  display: block;
  margin-bottom: 4px;
}

.reference-meta span {
  color: var(--muted);
  font-size: 12px;
}

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

.segment,
.chip,
.mini-chip,
.template-tag,
.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted-strong);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.segment:hover,
.chip:hover,
.mini-chip:hover,
.template-tag:hover,
.tag-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 127, 120, 0.4);
}

.segment.active,
.chip.active,
.mini-chip.active {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: rgba(47, 127, 120, 0.36);
}

.duration-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.duration-row input {
  max-width: 108px;
  min-height: 42px;
  padding: 0 14px;
}

.chip-wrap,
.preset-inline,
.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-picker {
  position: relative;
}

.preset-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 14px 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(36, 110, 104, 0.2);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(213, 236, 232, .58));
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(24, 35, 30, 0.07);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.preset-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(36, 110, 104, 0.42);
  box-shadow: var(--shadow-md);
}

.preset-toggle span {
  font-weight: 800;
}

.preset-toggle small {
  color: var(--muted);
}

.preset-toggle::after {
  content: "⌄";
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--panel-dark);
  color: #fff;
  transition: transform var(--transition);
}

.preset-picker:has(.preset-rail.open) .preset-toggle::after {
  transform: rotate(180deg);
}

.preset-rail {
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.preset-rail.open {
  display: flex;
  animation: revealRail 220ms var(--transition);
}

.preset-slide {
  flex: 0 0 184px;
  display: grid;
  gap: 8px;
  scroll-snap-align: start;
  min-height: 84px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(184, 111, 56, 0.16), transparent 48%),
    linear-gradient(180deg, #fff, rgba(250, 249, 242, 0.82));
  text-align: left;
  color: var(--ink);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.preset-slide:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 111, 56, 0.34);
  box-shadow: var(--shadow-md);
}

.preset-slide strong {
  font-size: 14px;
}

.preset-slide span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@keyframes revealRail {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chip,
.mini-chip,
.template-tag,
.tag-pill {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.mini-chip {
  background: rgba(255, 255, 255, 0.62);
}

.note-card,
.summary-card,
.prompt-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  padding: 16px;
}

.note-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.note-card p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.agent-trace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 2px 4px 2px 2px;
}

.trace-card {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 249, 247, 0.76)),
    rgba(255, 255, 255, 0.72);
  padding: 16px 16px 16px 18px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.trace-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.08);
}

.trace-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.trace-card[data-status="running"] {
  border-color: rgba(47, 127, 120, 0.4);
  transform: translateX(2px);
}

.trace-card[data-status="running"]::before {
  background: linear-gradient(180deg, var(--teal), #8fcdc7);
}

.trace-card[data-status="done"] {
  border-color: rgba(188, 111, 46, 0.3);
}

.trace-card[data-status="done"]::before {
  background: linear-gradient(180deg, var(--accent), #edbf8e);
}

.trace-card[data-status="idle"] .trace-status {
  background: #eef1ef;
  color: var(--muted-strong);
}

.trace-card[data-status="running"] .trace-status {
  background: var(--teal-soft);
  color: var(--teal);
}

.trace-card[data-status="done"] .trace-status {
  background: var(--accent-soft);
  color: var(--accent);
}

.trace-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.trace-top h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

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

.trace-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.trace-body {
  color: var(--muted-strong);
  line-height: 1.65;
  font-size: 13px;
}

.trace-body p {
  margin: 0;
}

.trace-body ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.trace-body li + li {
  margin-top: 4px;
}

.stage-output-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.stage-output-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(214, 238, 235, 0.7);
}

.stage-compact-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(23, 32, 27, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(214, 238, 235, 0.42)),
    rgba(255, 255, 255, 0.72);
}

.stage-compact-preview pre,
.preview-content {
  width: 100%;
  margin: 0;
  overflow: auto;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.stage-compact-preview pre {
  max-height: 136px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(24, 33, 29, 0.92);
  color: #edf4f0;
  font-size: 12px;
}

.stage-compact-preview .ghost-btn {
  justify-self: start;
  background: #fff;
}

.trace-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.trace-inline-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(214, 238, 235, 0.52);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.summary-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.summary-card {
  min-height: 92px;
  padding-bottom: 12px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 248, 244, 0.76)),
    rgba(255, 255, 255, 0.72);
}

.tag-pill {
  background: rgba(255, 255, 255, 0.85);
}

.prompt-card {
  background: var(--panel-strong);
}

.prompt-primary {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246, 248, 246, .94)),
    rgba(255, 255, 255, 0.92);
}

.empty-inline {
  color: var(--muted);
  font-size: 13px;
}

.prompt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
  font-weight: 700;
}

.prompt-head > div:first-child {
  min-width: 0;
}

.prompt-head span {
  display: block;
}

.prompt-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.prompt-export-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 38px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(214, 238, 235, 0.42), rgba(255, 255, 255, 0.7)),
    rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(36, 110, 104, 0.14);
}

.export-status,
.export-meta-text {
  font-size: 12px;
  font-weight: 800;
}

.export-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.08);
  color: var(--muted-strong);
}

.export-status.good {
  background: var(--teal-soft);
  color: var(--teal);
}

.export-status.warn {
  background: var(--accent-soft);
  color: var(--accent);
}

.export-meta-text {
  color: var(--muted-strong);
}

.prompt-body,
.review-summary,
.api-preview {
  min-height: 126px;
  padding: 16px;
  border-radius: 14px;
  background: #1d2622;
  color: #eef4f0;
  line-height: 1.75;
  white-space: pre-wrap;
}

.prompt-body {
  flex: 1;
  min-height: 380px;
  max-height: min(58vh, 760px);
  overflow: auto;
  font-size: 13px;
  line-height: 1.82;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.first-frame-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(47, 127, 120, 0.13), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 248, 0.86));
}

.first-frame-prompt {
  min-height: 0;
  max-height: none;
  aspect-ratio: 1;
}

.first-frame-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.first-frame-pane {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  min-width: 0;
}

.first-frame-pane-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.first-frame-pane-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.first-frame-image-head {
  flex-wrap: wrap;
}

.first-frame-size-control,
.first-frame-size-selector {
  display: flex;
  align-items: center;
}

.first-frame-size-control {
  gap: 8px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
}

.first-frame-size-selector {
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  border-radius: 7px;
  background: rgba(22, 32, 28, 0.05);
}

.first-frame-size-selector button {
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted-strong);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.first-frame-size-selector button:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}

.first-frame-size-selector button:active:not(:disabled) {
  transform: translateY(1px);
}

.first-frame-size-selector button:focus-visible {
  outline: 2px solid rgba(47, 127, 120, 0.52);
  outline-offset: 1px;
}

.first-frame-size-selector button.active {
  background: #1d2622;
  color: #f4fffd;
  box-shadow: 0 3px 10px rgba(10, 20, 17, 0.16);
}

.review-summary {
  background: #f8faf8;
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 118px;
}

.review-dimension-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.review-dimension-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(248, 250, 248, 0.92);
}

.review-dimension-top,
.field-card-top,
.rubric-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.review-dimension-top strong {
  font-size: 14px;
}

.review-dimension-top span {
  font-size: 12px;
  color: var(--muted-strong);
}

.review-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(47, 127, 120, 0.12);
  overflow: hidden;
  margin-bottom: 10px;
}

.review-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #6fb5af);
}

.review-dimension-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.api-preview {
  overflow: auto;
}

.muted {
  color: var(--muted);
}

.page-hero {
  padding: 28px;
  margin-bottom: 18px;
}

.section-intro {
  margin: 24px 0 14px;
}

.section-intro h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.section-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.template-grid,
.library-grid,
.agent-map-grid,
.band-grid,
.api-grid,
.field-schema-grid,
.lifecycle-grid,
.admin-view-grid,
.rubric-grid {
  display: grid;
  gap: 16px;
}

.schema-grid > *,
.template-grid > *,
.library-grid > *,
.agent-map-grid > *,
.band-grid > *,
.api-grid > *,
.field-schema-grid > *,
.lifecycle-grid > *,
.admin-view-grid > *,
.rubric-grid > * {
  min-width: 0;
}

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

.library-grid,
.agent-map-grid,
.band-grid,
.api-grid,
.field-schema-grid,
.lifecycle-grid,
.admin-view-grid,
.rubric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-card,
.library-card,
.agent-map-card,
.band-card,
.api-card,
.field-card,
.lifecycle-card,
.admin-card,
.rubric-card {
  padding: 20px;
}

.template-card h3,
.library-card h3,
.agent-map-card h3,
.band-card h3,
.api-card h3,
.field-card h3,
.lifecycle-card h3,
.admin-card h3,
.rubric-card h3,
.schema-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.template-card p,
.library-card p,
.agent-map-card p,
.band-card p,
.api-card p,
.field-card p,
.lifecycle-card p,
.admin-card p,
.rubric-card p,
.schema-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.template-meta,
.library-meta,
.api-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.template-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.template-footer span {
  color: var(--muted);
  font-size: 12px;
}

.asset-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.asset-kpi-strip div {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 223, 204, 0.58)),
    radial-gradient(circle at top right, rgba(47, 127, 120, 0.18), transparent 44%);
  box-shadow: var(--shadow-md);
}

.asset-kpi-strip div::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 18px solid rgba(188, 111, 46, 0.1);
}

.asset-kpi-strip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.asset-kpi-strip span {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

.asset-management-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(244, 248, 246, 0.7)),
    radial-gradient(circle at top left, rgba(36, 110, 104, 0.14), transparent 34%);
  box-shadow: var(--shadow-lg);
}

.asset-filter-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.asset-filter-row.compact {
  align-items: flex-start;
}

.asset-filter-row h3 {
  margin: 0;
  font-size: 20px;
}

.asset-filter-group {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.asset-filter-group.scrollable {
  justify-content: flex-start;
  flex-wrap: nowrap;
  max-width: 68%;
  overflow-x: auto;
  padding-bottom: 4px;
  overscroll-behavior-x: contain;
}

.asset-filter-chip,
.asset-category-card {
  color: var(--ink);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.asset-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
  white-space: nowrap;
}

.asset-filter-chip .chip-label {
  min-width: max-content;
  height: auto;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.asset-filter-chip span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.08);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.asset-filter-chip:hover,
.asset-category-card:hover {
  transform: translateY(-2px);
  border-color: rgba(36, 110, 104, 0.36);
  box-shadow: var(--shadow-md);
}

.asset-filter-chip.active {
  border-color: rgba(36, 110, 104, 0.38);
  background: var(--teal-soft);
  color: var(--teal);
}

.asset-filter-chip.active span {
  background: rgba(36, 110, 104, 0.14);
  color: var(--teal);
}

.asset-category-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.asset-category-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%, rgba(184, 111, 56, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.72);
  text-align: left;
}

.asset-category-card.active {
  border-color: rgba(184, 111, 56, 0.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(184, 111, 56, 0.2), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(242, 223, 201, .58));
}

.asset-category-card .category-name,
.asset-category-card .category-count,
.asset-category-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-category-card .category-name {
  font-size: 15px;
  font-weight: 800;
}

.asset-category-card .category-count {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.asset-category-card small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.asset-list-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  padding: 4px 2px 0;
}

.asset-list-head h3 {
  margin: 0;
  font-size: 20px;
}

.asset-list-head p:last-child {
  margin: 0;
  max-width: 680px;
  color: var(--muted);
  line-height: 1.6;
}

.asset-board {
  display: grid;
  gap: 12px;
}

.asset-row-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(220px, 0.25fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 246, 0.76)),
    radial-gradient(circle at 8% 12%, rgba(47, 127, 120, 0.12), transparent 24%);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.asset-row-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 127, 120, 0.28);
  box-shadow: 0 18px 42px rgba(24, 35, 30, 0.11);
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* Local delivery lifecycle controls. The exit action is intentionally quiet:
   it belongs to the shell, not to the creative workflow itself. */
.sidebar-exit-area {
  margin-top: auto;
  padding: 8px;
  border: 1px solid rgba(229, 112, 101, 0.16);
  background: rgba(55, 22, 24, 0.24);
  box-shadow: none;
}

.sidebar-exit-button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: rgba(249, 222, 218, 0.82);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.sidebar-exit-button:hover,
.sidebar-exit-button:focus-visible {
  border-color: rgba(229, 112, 101, 0.36);
  background: rgba(229, 112, 101, 0.12);
  color: #fff4f1;
  outline: none;
}

.sidebar-exit-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.sidebar-exit-button.is-shutting-down .sidebar-exit-icon {
  animation: exitButtonPulse 900ms ease-in-out infinite;
}

.sidebar-exit-icon {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(229, 112, 101, 0.34);
  border-radius: 9px;
  color: #f1a49d;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.sidebar-exit-button strong,
.sidebar-exit-button small {
  display: block;
}

.sidebar-exit-button strong {
  color: inherit;
  font-size: 12px;
}

.sidebar-exit-button small {
  margin-top: 2px;
  color: rgba(237, 203, 200, 0.54);
  font-size: 10px;
}

.shutdown-screen[hidden] {
  display: none !important;
}

.shutdown-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(126, 228, 223, 0.12), transparent 34%),
    #071014;
  color: #eef8f7;
}

.shutdown-screen-panel {
  width: min(460px, 100%);
  padding: 42px 38px;
  border: 1px solid rgba(126, 228, 223, 0.2);
  border-radius: 22px;
  background: rgba(11, 22, 25, 0.9);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}

.shutdown-screen-mark {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  place-items: center;
  border: 1px solid rgba(126, 228, 223, 0.4);
  border-radius: 50%;
  background: rgba(126, 228, 223, 0.12);
  color: #a6eee8;
  font-size: 25px;
}

.shutdown-screen-panel h1 {
  margin: 8px 0 10px;
  font-size: clamp(24px, 4vw, 34px);
}

.shutdown-screen-panel p:not(.eyebrow) {
  margin: 0 0 24px;
  color: rgba(222, 241, 239, 0.66);
  line-height: 1.7;
}

body.service-shutdown #app,
body.service-shutdown .startup-splash {
  display: none !important;
}

@keyframes exitButtonPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1120px) {
  .sidebar-exit-area {
    padding: 6px;
  }
}

.asset-rank {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 82px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(23, 32, 27, 0.94), rgba(33, 48, 42, 0.9)),
    var(--panel-dark);
  color: #f6efe8;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.asset-main {
  min-width: 0;
  padding: 2px 0;
}

.asset-main h3 {
  margin: 4px 0 6px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

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

.asset-title-row .eyebrow {
  margin: 0;
}

.asset-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.asset-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(237, 241, 239, 0.78);
  border: 1px solid var(--line);
}

.asset-metric {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.asset-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.asset-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-side > span {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-side > strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.asset-side small {
  color: var(--muted);
  font-size: 12px;
}

.asset-side .ghost-btn {
  align-self: flex-start;
  background: #fff;
}

.asset-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 9px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}

.asset-status-badge.pending_review {
  background: var(--accent-soft);
  color: var(--accent);
}

.asset-status-badge.reviewed {
  background: var(--teal-soft);
  color: var(--teal);
}

.asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.asset-actions .ghost-btn,
.asset-actions .primary-btn {
  align-self: auto;
}

.empty-state {
  display: grid;
  gap: 8px;
  min-height: 180px;
  place-items: center;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.empty-state strong {
  font-size: 18px;
}

.empty-state span {
  color: var(--muted);
  font-size: 13px;
}

.schema-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  margin-bottom: 18px;
  min-width: 0;
}

.schema-card {
  min-width: 0;
  padding: 20px;
}

.schema-code {
  max-width: 100%;
  margin: 14px 0 0;
  padding: 16px;
  border-radius: 16px;
  background: #18211d;
  color: #edf4f0;
  overflow: auto;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.library-asset-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
}

.library-card-topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.asset-rank.mini {
  align-self: start;
  width: 40px;
  min-height: 40px;
  border-radius: 14px;
  font-size: 12px;
}

.library-card-topline h3 {
  margin-bottom: 0;
}

.library-summary,
.library-scaffold p,
.library-template-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.library-summary {
  -webkit-line-clamp: 2;
}

.library-scaffold p {
  -webkit-line-clamp: 2;
}

.library-template-preview {
  padding: 12px;
  border-radius: 14px;
  background: rgba(24, 33, 29, 0.08);
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.65;
  -webkit-line-clamp: 3;
}

.library-meta.compact {
  margin: 2px 0;
}

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

.library-facts div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(237, 241, 239, 0.72);
  border: 1px solid var(--line);
}

.library-facts span,
.library-facts strong {
  display: block;
}

.library-facts span {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.library-facts strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-scaffold strong {
  margin: 0 0 6px;
}

.library-shot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.library-shot-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  color: var(--muted-strong);
  font-size: 12px;
}

.library-card strong,
.agent-map-card strong,
.api-card strong,
.field-card strong,
.lifecycle-card strong,
.admin-card strong,
.rubric-card strong {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 13px;
}

.library-card ul,
.agent-map-card ul,
.api-card ul,
.admin-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted-strong);
  line-height: 1.6;
}

.field-card,
.lifecycle-card,
.admin-card,
.rubric-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.field-card-top .tag-pill,
.rubric-top .tag-pill {
  flex: 0 0 auto;
}

.workflow-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.workflow-board div {
  padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
}

.workflow-board strong {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--teal-soft);
  color: var(--teal);
}

.workflow-board span {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.workflow-board p {
  margin: 0;
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #1d2622;
  color: #f4f8f5;
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.toast.success {
  background: #1f433e;
}

body.modal-open {
  overflow: hidden;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 24px;
}

.confirm-modal.active {
  display: grid;
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 4, 7, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.confirm-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(126, 228, 223, 0.12), transparent 42%),
    rgba(5, 12, 17, 0.98);
  color: rgba(238, 251, 249, 0.94);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
}

.confirm-copy {
  padding: 26px 26px 22px;
}

.confirm-copy .eyebrow {
  margin: 0 0 10px;
  color: rgba(143, 241, 235, 0.72);
}

.confirm-copy h2 {
  margin: 0;
  color: #f4fffd;
  font-size: 22px;
  line-height: 1.25;
}

.confirm-copy > p:last-child {
  margin: 14px 0 0;
  color: rgba(222, 235, 232, 0.72);
  line-height: 1.75;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 20px;
  border-top: 1px solid rgba(126, 228, 223, 0.12);
}

@media (max-width: 560px) {
  .confirm-actions {
    flex-direction: column-reverse;
  }

  .confirm-actions .ghost-btn,
  .confirm-actions .primary-btn {
    width: 100%;
  }
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  padding: 28px;
}

.preview-modal.active {
  display: grid;
  place-items: center;
}

.preview-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(188, 111, 46, 0.22), transparent 26%),
    rgba(14, 20, 17, 0.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.preview-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: min(90vh, 900px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(250, 252, 250, 0.98), rgba(237, 241, 239, 0.96)),
    var(--panel-strong);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.preview-head h2 {
  margin: 0;
  font-size: 22px;
}

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

.preview-content {
  flex: 1;
  min-height: 0;
  padding: 22px;
  background:
    linear-gradient(180deg, #18211d, #101713),
    #18211d;
  color: #f0f6f2;
  font-size: 13px;
}

.view[data-view-panel="workbench"] {
  padding: 26px 34px 38px;
}

.coming-soon-panel {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(42px, 8vw, 96px);
  border: 1px solid rgba(23, 32, 27, .1);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 18%, rgba(36, 110, 104, .18), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(242, 239, 226, .72));
  box-shadow: var(--shadow-lg);
}

.coming-soon-panel > * {
  position: relative;
  z-index: 1;
}

.coming-soon-panel h3 {
  margin: 10px 0 12px;
  font-size: clamp(34px, 6vw, 78px);
  line-height: .95;
  letter-spacing: -0.055em;
}

.coming-soon-panel p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted-strong);
  line-height: 1.8;
}

.coming-soon-orb {
  position: absolute;
  width: min(420px, 58vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 38%, rgba(255,255,255,.95), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(201, 154, 69, .5), rgba(36, 110, 104, .16) 56%, transparent 70%);
  filter: blur(.2px);
  opacity: .72;
}

.workbench-grid {
  grid-template-columns: 1fr;
  gap: 22px;
  height: auto;
  min-height: calc(100vh - 190px);
  padding: 0;
  overflow: visible;
  align-items: start;
}

.setup-panel {
  order: 0;
  position: static;
  display: flex;
  flex-direction: column;
  max-height: none;
  padding: 28px;
  border-radius: 30px;
  overflow: visible;
}

.setup-panel > .panel-head,
.setup-panel > .note-card {
  grid-column: 1 / -1;
}

.setup-panel > .field,
.setup-panel > .action-row {
  margin-bottom: 0;
}

.setup-panel > .field:has(#idea-input) {
  grid-column: 1 / 2;
  grid-row: 2 / span 3;
}

.setup-panel > .field:has(#duration-mode) {
  grid-column: 2 / 3;
  grid-row: 2;
}

.setup-panel > .field:has(#shot-mode) {
  grid-column: 2 / 3;
  grid-row: 3;
}

.setup-panel > .field:has(#reference-input) {
  grid-column: 3 / 4;
  grid-row: 2 / span 2;
}

.setup-panel > .field:has(#style-chips) {
  grid-column: 2 / 4;
  grid-row: 4;
}

.setup-panel > .field:has(#quick-presets) {
  grid-column: 1 / 3;
  grid-row: 5;
}

.setup-panel > .action-row {
  grid-column: 3 / 4;
  grid-row: 5;
  justify-content: flex-end;
  align-self: end;
}

.setup-panel > .note-card {
  grid-row: 6;
}

.setup-panel .idea-input {
  min-height: 220px;
}

.setup-panel .reference-preview {
  min-height: 188px;
}

.setup-panel::-webkit-scrollbar,
.prompt-body::-webkit-scrollbar,
.review-summary::-webkit-scrollbar,
.api-preview::-webkit-scrollbar,
.page-scroll::-webkit-scrollbar,
.agent-trace::-webkit-scrollbar,
.history-snippet::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.setup-panel::-webkit-scrollbar-thumb,
.prompt-body::-webkit-scrollbar-thumb,
.review-summary::-webkit-scrollbar-thumb,
.api-preview::-webkit-scrollbar-thumb,
.page-scroll::-webkit-scrollbar-thumb,
.agent-trace::-webkit-scrollbar-thumb,
.history-snippet::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.16);
}

.studio-column {
  display: contents;
}

.output-panel,
.trace-panel {
  overflow: visible;
  padding: 28px;
  border-radius: 32px;
}

.trace-panel {
  order: 2;
}

.output-panel {
  order: 3;
}

.output-panel {
  background:
    radial-gradient(circle at top right, rgba(36, 110, 104, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(184, 111, 56, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246, 248, 246, .84)),
    var(--panel);
}

.trace-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(184, 111, 56, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248, 250, 248, .82)),
    var(--panel);
}

.output-stage-premium {
  grid-template-columns: 1fr;
  gap: 18px;
}

.output-overview,
.support-grid {
  display: grid;
  gap: 16px;
}

.output-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-card,
.support-card,
.history-card,
.history-empty {
  min-width: 0;
  border-radius: 22px;
  border: 1px solid rgba(20, 27, 23, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(248, 250, 248, .78)),
    rgba(255,255,255,.72);
  box-shadow: 0 18px 42px rgba(24, 35, 30, 0.08);
}

.overview-card {
  padding: 18px;
  min-height: 138px;
}

.overview-card-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.overview-card-head strong,
.notice-copy strong {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.premium-pill-row {
  gap: 10px;
}

.premium-pill-row .tag-pill {
  min-height: 36px;
  padding: 0 14px;
  border-color: rgba(23, 32, 27, 0.08);
  background: rgba(255,255,255,.86);
  color: var(--ink);
}

.notice-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.notice-copy {
  display: grid;
  gap: 6px;
}

.notice-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.notice-card .ghost-btn {
  flex: 0 0 auto;
  background: rgba(255,255,255,.88);
}

.notice-card.neutral {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(243, 246, 244, .82)),
    rgba(255,255,255,.8);
}

.notice-card.good {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(213, 236, 232, .66)),
    rgba(255,255,255,.82);
}

.notice-card.info {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(242, 223, 201, .68)),
    rgba(255,255,255,.82);
}

.notice-card.warn {
  background:
    linear-gradient(135deg, rgba(255,250,244,.96), rgba(242, 223, 201, .82)),
    rgba(255,255,255,.82);
  border-color: rgba(184, 111, 56, 0.16);
}

.notice-card.error {
  background:
    linear-gradient(135deg, rgba(255,245,247,.96), rgba(240, 219, 224, .84)),
    rgba(255,255,255,.82);
  border-color: rgba(154, 72, 87, 0.18);
}

.prompt-stage-card {
  padding: 22px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(36, 110, 104, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(247, 249, 247, .92));
  box-shadow: 0 22px 56px rgba(24, 35, 30, 0.09);
}

.prompt-stage-card .prompt-head {
  margin-bottom: 14px;
}

.prompt-stage-card .prompt-head span {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.prompt-stage-card .prompt-toolbar {
  align-self: flex-start;
}

.prompt-caption {
  max-width: 720px;
}

.prompt-export-meta {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(213, 236, 232, 0.34), rgba(255,255,255,.76)),
    rgba(255,255,255,.76);
}

.prompt-body {
  min-height: 520px;
  max-height: none;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(36, 110, 104, 0.14), transparent 24%),
    linear-gradient(180deg, #111916, #0c1311 72%);
  color: #edf4f0;
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.9;
}

.status-dot,
.quality-badge,
.trace-status,
.history-badge,
.export-status {
  white-space: nowrap;
  flex-shrink: 0;
}

.status-dot,
.quality-badge {
  min-width: 74px;
}

.trace-status {
  min-width: 64px;
  justify-content: center;
}

.support-grid {
  grid-template-columns: 1.08fr 0.96fr 0.96fr;
}

.support-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 228px;
  padding: 18px;
}

.prompt-head.compact {
  margin-bottom: 0;
}

.support-card .review-summary,
.support-card .review-dimension-board {
  flex: 1;
  min-height: 0;
}

.support-card .review-summary {
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(247, 249, 247, .84)),
    rgba(255,255,255,.78);
}

.support-card .review-dimension-board {
  overflow: auto;
}

.agent-trace {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 26px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 22px 6px 2px;
}

.trace-card {
  flex: 0 0 210px;
  min-height: 188px;
  padding: 16px 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

.trace-card[data-has-next="true"]::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 228, 223, 0.18), rgba(126, 228, 223, 0.5), rgba(126, 228, 223, 0.18));
}

.trace-top {
  margin-bottom: 0;
}

.trace-top h3 {
  font-size: 16px;
}

.trace-top p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trace-body {
  display: grid;
  gap: 10px;
}

.trace-primary {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.trace-mini-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trace-inline-tags {
  margin-top: 0;
}

.trace-inline-tags span {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

.trace-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(23, 32, 27, 0.08);
}

.trace-step-index {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.08);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
}

.history-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 18px 0;
}

.error-log-panel {
  margin: 18px 0;
  padding: 22px 0 18px;
  border-top: 1px solid rgba(154, 72, 87, 0.18);
  border-bottom: 1px solid rgba(23, 32, 27, 0.1);
}

.error-log-head,
.error-log-meta,
.error-log-row-actions,
.error-log-actions {
  display: flex;
  align-items: center;
}

.error-log-head {
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
}

.error-log-head h2 {
  margin: 6px 0 8px;
  font-size: 28px;
}

.error-log-head p:last-child {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.65;
}

.error-log-actions,
.error-log-row-actions {
  gap: 10px;
}

.error-log-actions > span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.error-log-list {
  display: grid;
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid rgba(23, 32, 27, 0.08);
}

.error-log-row {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(300px, 1.6fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(23, 32, 27, 0.08);
}

.error-log-meta {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.error-log-meta strong {
  color: #8c4050;
  font-size: 13px;
}

.error-log-meta span,
.error-log-meta code {
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-log-row > p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.error-log-empty {
  margin: 0;
  padding: 18px 0 4px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .error-log-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .error-log-actions {
    flex-wrap: wrap;
  }

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

.history-toolbar > div:first-child {
  min-width: 0;
}

.history-toolbar h3 {
  margin: 6px 0 8px;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.history-toolbar p:last-child {
  line-height: 1.65;
}

.history-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.log-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.history-card,
.history-empty {
  padding: 22px;
}

.history-card.good {
  border-color: rgba(36, 110, 104, 0.12);
}

.history-card.info,
.history-card.warn {
  border-color: rgba(184, 111, 56, 0.14);
}

.history-card.error {
  border-color: rgba(154, 72, 87, 0.16);
}

.history-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.history-card-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.history-card-time {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.history-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.history-badge.good {
  background: var(--teal-soft);
  color: var(--teal);
}

.history-badge.info {
  background: rgba(242, 223, 201, 0.78);
  color: var(--accent);
}

.history-badge.warn {
  background: rgba(255, 235, 215, 0.92);
  color: var(--accent);
}

.history-badge.error {
  background: rgba(240, 219, 224, 0.92);
  color: var(--rose);
}

.history-idea {
  margin: 0 0 14px;
  color: var(--muted-strong);
  line-height: 1.72;
}

.history-card-meta,
.history-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-card-meta {
  margin-bottom: 12px;
}

.history-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(23, 32, 27, 0.08);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.history-style-row {
  margin-bottom: 14px;
}

.history-diagnostics {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(23, 32, 27, 0.06);
}

.history-diagnostics p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.history-snippet {
  margin: 0;
  min-height: 178px;
  max-height: 220px;
  overflow: auto;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at top right, rgba(36, 110, 104, 0.12), transparent 26%),
    linear-gradient(180deg, #121a17, #0d1310);
  color: #edf4f0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Monaco", "Courier New", monospace;
  line-height: 1.8;
  font-size: 12px;
}

.history-card-foot {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.history-card-foot small,
.history-empty p {
  color: var(--muted);
  line-height: 1.6;
}

.history-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-empty {
  display: grid;
  gap: 10px;
  place-items: start;
}

.history-empty strong {
  font-size: 20px;
}

@media (max-width: 1440px) {
  .library-grid,
  .agent-map-grid,
  .band-grid,
  .api-grid,
  .field-schema-grid,
  .lifecycle-grid,
  .admin-view-grid,
  .rubric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .output-overview,
  .support-grid,
  .history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-trace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .workbench-grid {
    grid-template-columns: 330px minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }

  .output-stage {
    grid-template-columns: 1fr;
  }

  .studio-column {
    min-height: auto;
  }

  .asset-row-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .asset-side {
    grid-column: 2;
  }
}

/* The app sidebar leaves the output column much narrower than the viewport.
   Collapse its internal three-column boards before text starts stacking vertically. */
@media (min-width: 1360px) and (max-width: 1700px) {
  #app[data-active-view="workbench"] .output-panel {
    padding: 18px !important;
  }

  #app[data-active-view="workbench"] .output-overview,
  #app[data-active-view="workbench"] .support-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  #app[data-active-view="workbench"] .overview-card,
  #app[data-active-view="workbench"] .support-card {
    min-height: 0;
  }
}

/* Workbench operations pass: compact task management and explicit runtime states. */
.task-session-page {
  width: min(1440px, 100%);
  margin: 0 auto;
  gap: 14px;
  padding: 24px clamp(20px, 3vw, 42px) 42px;
}

.task-session-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 2px 18px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.13);
}

.task-session-heading {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-width: 0;
}

.task-session-heading .eyebrow {
  margin: 0 0 5px;
  color: rgba(255, 170, 80, 0.82);
}

.task-session-heading h2 {
  margin: 0;
  color: #f5fbf9;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 0.95;
}

.task-session-heading p:not(.eyebrow) {
  margin: 7px 0 0;
  color: rgba(208, 228, 226, 0.66);
  font-size: 13px;
}

.task-session-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.new-task-menu-wrap {
  position: relative;
}

.new-task-trigger {
  min-height: 40px;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 170, 80, 0.48) !important;
  background: linear-gradient(145deg, #f1a04e, #b9d67c) !important;
  color: #12201d !important;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(242, 153, 65, 0.12) !important;
}

.new-task-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 130;
  width: 286px;
  padding: 7px;
  border: 1px solid rgba(126, 228, 223, 0.18);
  border-radius: 10px;
  background: rgba(5, 14, 18, 0.98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
}

.new-task-menu[hidden] {
  display: none;
}

.new-task-menu button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #eef9f7;
  text-align: left;
  cursor: pointer;
}

.new-task-menu button:hover,
.new-task-menu button:focus-visible {
  background: rgba(126, 228, 223, 0.1);
  outline: none;
}

.new-task-menu button span {
  color: rgba(208, 228, 226, 0.62);
  font-size: 11px;
}

.task-session-board {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.task-session-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 12px;
}

.session-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}

.session-filter-bar button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(205, 225, 223, 0.66);
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.session-filter-bar button span {
  min-width: 19px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(230, 242, 240, 0.7);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.session-filter-bar button:hover,
.session-filter-bar button.active {
  background: rgba(255, 170, 80, 0.11);
  color: #ffd4a4;
}

.session-active-summary {
  min-width: 0;
  color: rgba(205, 225, 223, 0.54);
  font-size: 11px;
  text-align: right;
}

.session-active-summary strong {
  display: block;
  max-width: 320px;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(241, 249, 247, 0.88);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-session-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
  overflow: visible;
}

.task-session-list .session-card.session-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(260px, 1.4fr) minmax(250px, 0.8fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding: 15px 16px;
  border: 1px solid rgba(126, 228, 223, 0.11);
  border-radius: 10px;
  background: rgba(5, 14, 18, 0.72);
  box-shadow: none;
  transform: none;
}

.task-session-list .session-card.session-row::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}

.task-session-list .session-card.session-row:hover,
.task-session-list .session-card.session-row:focus-visible {
  border-color: rgba(126, 228, 223, 0.28);
  background: rgba(8, 20, 24, 0.9);
  transform: translateY(-1px);
}

.task-session-list .session-card.session-row.active {
  border-color: rgba(255, 170, 80, 0.38);
  background: linear-gradient(90deg, rgba(255, 170, 80, 0.08), transparent 34%), rgba(7, 17, 20, 0.88);
}

.task-session-list .session-card.session-row.active::before {
  background: #e89a46;
}

.session-index {
  color: rgba(153, 191, 188, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.session-card-main,
.session-progress-block {
  display: grid;
  min-width: 0;
}

.session-card-main {
  gap: 7px;
}

.session-card-top {
  justify-content: flex-start;
}

.session-card-title {
  max-width: min(520px, 70vw);
  color: #f2f9f7;
  font-size: 14px;
  font-weight: 700;
}

.session-status-pill {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 10px;
}

.session-card-idea {
  min-height: 0;
  -webkit-line-clamp: 1;
  color: rgba(204, 224, 222, 0.67);
  line-height: 1.4;
}

.session-card-meta {
  justify-content: flex-start;
  gap: 12px;
  color: rgba(173, 201, 198, 0.46);
  font-variant-numeric: tabular-nums;
}

.session-progress-block {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
}

.session-progress-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.session-progress-copy strong {
  overflow: hidden;
  color: rgba(233, 245, 242, 0.9);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-progress-copy small {
  overflow: hidden;
  color: rgba(174, 204, 201, 0.52);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-progress-track {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(126, 228, 223, 0.1);
}

.session-progress-track i {
  display: block;
  width: var(--task-progress);
  height: 100%;
  background: #6ccfc9;
  transition: width 260ms ease;
}

.session-progress-value {
  align-self: center;
  color: rgba(218, 237, 234, 0.68);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.session-card[data-status="success"] .session-progress-track i {
  background: #84c895;
}

.session-card[data-status="needs_review"] .session-progress-track i,
.session-card[data-status="failed"] .session-progress-track i {
  background: #d56f63;
}

.session-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 0;
}

.session-open-btn,
.session-overflow summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid rgba(126, 228, 223, 0.19);
  border-radius: 7px;
  background: rgba(126, 228, 223, 0.07);
  color: rgba(230, 246, 243, 0.86);
  cursor: pointer;
}

.session-open-btn {
  padding: 0 11px;
  font-size: 11px;
}

.session-open-btn:hover,
.session-overflow summary:hover {
  border-color: rgba(255, 170, 80, 0.38);
  background: rgba(255, 170, 80, 0.1);
  color: #ffd7aa;
}

.session-overflow {
  position: relative;
}

.session-overflow summary {
  width: 34px;
  list-style: none;
  font-weight: 800;
}

.session-overflow summary::-webkit-details-marker {
  display: none;
}

.session-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  display: grid;
  width: 142px;
  padding: 6px;
  border: 1px solid rgba(126, 228, 223, 0.16);
  border-radius: 8px;
  background: rgba(4, 12, 16, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.session-overflow-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(230, 244, 242, 0.8);
  text-align: left;
  cursor: pointer;
}

.session-overflow-menu button:hover {
  background: rgba(126, 228, 223, 0.09);
}

.session-overflow-menu button.danger {
  color: #f1a49b;
}

.session-overflow-menu button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.session-empty-state {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 220px;
  border: 1px dashed rgba(126, 228, 223, 0.14);
  border-radius: 10px;
  color: rgba(205, 227, 224, 0.58);
  text-align: center;
}

.session-empty-state[hidden] {
  display: none;
}

.session-empty-state strong {
  color: rgba(239, 248, 246, 0.84);
}

.workbench-task-context {
  display: none;
}

#app[data-active-view="workbench"] .topbar {
  min-height: 88px;
  padding: 14px 22px;
  border-radius: 16px;
}

#app[data-active-view="workbench"] .topbar-copy .eyebrow {
  margin-bottom: 4px;
  font-size: 9px;
}

#app[data-active-view="workbench"] .topbar-copy h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
}

#app[data-active-view="workbench"] .topbar-copy > p:last-child {
  display: none;
}

#app[data-active-view="workbench"] .topbar-actions {
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app[data-active-view="workbench"] .workbench-task-context {
  display: grid;
  grid-template-columns: 32px minmax(120px, 220px) minmax(80px, 120px);
  align-items: center;
  gap: 6px 10px;
  margin-right: auto;
  min-width: 320px;
}

.task-context-back {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(126, 228, 223, 0.18);
  border-radius: 7px;
  background: rgba(126, 228, 223, 0.06);
  color: #dff4f1;
  cursor: pointer;
}

.task-context-copy {
  display: grid;
  min-width: 0;
}

.task-context-copy span {
  color: #70d5ce;
  font-size: 9px;
}

.task-context-copy strong {
  overflow: hidden;
  color: rgba(241, 249, 247, 0.9);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-context-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(126, 228, 223, 0.12);
}

.task-context-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: #72d7d0;
  transition: width 260ms ease;
}

.workbench-task-context small {
  grid-column: 2 / -1;
  overflow: hidden;
  color: rgba(188, 214, 211, 0.52);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reactor-core-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px !important;
}

.reactor-core-status > div:first-child {
  display: grid;
  gap: 2px;
}

.reactor-core-status small {
  color: rgba(177, 208, 204, 0.54);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.reactor-progress-track {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(126, 228, 223, 0.12);
}

.reactor-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #72d7d0;
  box-shadow: 0 0 14px rgba(114, 215, 208, 0.42);
  transition: width 260ms ease;
}

.composer-card.is-run-locked .idea-input,
.composer-card.is-run-locked .composer-meta-trigger,
.composer-card.is-run-locked .segment {
  cursor: not-allowed;
}

.composer-card.is-run-locked .idea-input {
  border-color: rgba(114, 215, 208, 0.24);
  background: rgba(9, 20, 23, 0.92);
}

.composer-card.composer-studio .composer-style-tray.open,
.composer-card.composer-studio .composer-reference-tray.open {
  z-index: 140 !important;
}

.composer-card:has(.composer-style-tray.open, .composer-reference-tray.open) .reactor-flow-map {
  pointer-events: none;
}

.composer-card:has(.composer-style-tray.open, .composer-reference-tray.open) .composer-tray.open,
.composer-card:has(.composer-style-tray.open, .composer-reference-tray.open) .composer-tray.open * {
  pointer-events: auto;
}

@media (min-width: 1360px) {
  #app[data-active-view="workbench"] .view[data-view-panel="workbench"] {
    padding: 16px 18px 30px;
  }

  #app[data-active-view="workbench"] .workbench-grid {
    grid-template-columns: minmax(680px, 1.15fr) minmax(400px, 0.85fr) !important;
    grid-template-rows: auto !important;
    gap: 16px;
    align-items: start;
  }

  #app[data-active-view="workbench"] .setup-panel,
  #app[data-active-view="workbench"] .output-panel {
    grid-row: 1 !important;
  }

  #app[data-active-view="workbench"] .setup-panel {
    padding: 16px !important;
  }

  #app[data-active-view="workbench"] .reactor-flow-map {
    grid-template-columns: 82px minmax(420px, 1fr) 82px !important;
    min-height: 650px;
    --flow-node: 60px;
    --flow-gap: 14px;
  }

  #app[data-active-view="workbench"] .reactor-flow-map .reactor-node strong {
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .task-session-toolbar,
  .task-session-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-session-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .task-session-actions {
    width: 100%;
    justify-content: space-between;
  }

  .task-session-list .session-card.session-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .session-progress-block {
    grid-column: 2 / -1;
  }

  .session-card-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .session-active-summary {
    text-align: left;
  }
}

/* Keep an expanded task action menu above every following task row. */
.task-session-list {
  position: relative;
  overflow: visible !important;
}

.task-session-list .session-card.session-row {
  z-index: 0;
  overflow: visible;
}

.task-session-list .session-card.session-row:has(.session-overflow[open]) {
  z-index: 300;
}

.session-overflow[open] {
  z-index: 310;
}

.session-overflow[open] .session-overflow-menu {
  z-index: 320;
}

/* Compact reference-image strip above the main prompt input. */
.composer-reference-strip {
  position: relative;
  z-index: 12;
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
}

.composer-reference-strip .reference-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 2px;
  overflow-x: auto;
  overflow-y: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
}

.composer-reference-strip .reference-preview.empty {
  display: none !important;
}

.composer-reference-strip .reference-thumb {
  position: relative;
  z-index: 1;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: visible;
}

.composer-reference-strip .reference-thumb-main {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.24);
  border-radius: 7px;
  background: rgba(3, 9, 12, 0.82);
  cursor: pointer;
}

.composer-reference-strip .reference-thumb-main:hover,
.composer-reference-strip .reference-thumb-main:focus-visible {
  border-color: rgba(255, 170, 80, 0.68);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 170, 80, 0.12);
}

.composer-reference-strip .reference-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.composer-reference-strip .reference-thumb-main span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(1, 6, 8, 0.82);
  color: #f4fffd;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.composer-reference-strip .reference-thumb-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 14;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(8, 15, 18, 0.96);
  color: rgba(244, 255, 253, 0.9);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.composer-reference-strip .reference-thumb-remove:hover {
  border-color: rgba(229, 112, 101, 0.68);
  background: rgba(92, 28, 28, 0.96);
  color: #fff;
}

/* Collapsible secondary navigation under "更多信息". */
.nav-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.nav-group-toggle {
  width: 100%;
}

.nav-group-chevron {
  margin-left: auto;
  color: rgba(213, 232, 230, 0.52);
  font-size: 16px;
  line-height: 1;
  transition: transform 180ms ease, color 180ms ease;
}

.nav-group.open .nav-group-chevron {
  transform: rotate(180deg);
  color: rgba(255, 194, 119, 0.9);
}

.nav-submenu {
  position: relative;
  display: grid;
  gap: 6px;
  margin-left: 20px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid rgba(126, 228, 223, 0.14);
}

.nav-submenu[hidden] {
  display: none !important;
}

.nav-subitem {
  width: 100%;
  min-height: 42px;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  font-size: 12px;
}

.nav-subitem .nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 8px;
}

#app.sidebar-collapsed .nav-group-chevron,
#app.sidebar-collapsed .nav-submenu {
  display: none !important;
}

@media (max-width: 1120px) {
  .nav-group {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }

  .nav-group-toggle {
    width: auto;
  }

  .nav-submenu {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    border-left: 0;
  }

  .nav-subitem {
    width: auto;
    min-height: 0;
    padding: 10px;
  }
}

/* Per-task automatic first-frame generation control. */
.reactor-core .composer-launcher-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.composer-auto-frame-control {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 2px 10px;
  min-width: 0;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(4, 9, 12, 0.58);
  color: rgba(231, 248, 246, 0.82);
  cursor: pointer;
}

.composer-auto-frame-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.composer-toggle-track {
  grid-row: 1 / 3;
  align-self: center;
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid rgba(126, 228, 223, 0.2);
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.08);
  transition: background 180ms ease, border-color 180ms ease;
}

.composer-toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(215, 232, 229, 0.72);
  transition: transform 180ms ease, background 180ms ease;
}

.composer-auto-frame-control input:checked + .composer-toggle-track {
  border-color: rgba(255, 184, 98, 0.62);
  background: linear-gradient(90deg, rgba(255, 170, 80, 0.78), rgba(174, 220, 118, 0.72));
}

.composer-auto-frame-control input:checked + .composer-toggle-track i {
  transform: translateX(16px);
  background: rgba(4, 12, 14, 0.9);
}

.composer-auto-frame-control input:focus-visible + .composer-toggle-track {
  outline: 2px solid rgba(126, 228, 223, 0.38);
  outline-offset: 2px;
}

.composer-toggle-copy {
  display: contents;
}

.composer-toggle-copy strong,
.composer-toggle-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-toggle-copy strong {
  color: #f2fbfa;
  font-size: 14px;
}

.composer-toggle-copy small {
  color: rgba(213, 232, 230, 0.58);
  font-size: 11px;
}

.composer-card.is-run-locked .composer-auto-frame-control {
  opacity: 0.56;
  cursor: not-allowed;
}

.composer-first-frame-prompt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 238px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 111, 56, 0.16);
  border-radius: 14px;
  background: rgba(255, 250, 242, 0.82);
  cursor: pointer;
}

.composer-first-frame-prompt-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #b86f38;
  flex: 0 0 auto;
}

.composer-first-frame-prompt-copy {
  display: grid;
  gap: 2px;
}

.composer-first-frame-prompt-copy strong {
  color: var(--ink, #18201c);
  font-size: 12px;
  line-height: 1.2;
}

.composer-first-frame-prompt-copy small {
  color: var(--muted-strong, #6c746e);
  font-size: 10px;
  line-height: 1.25;
}

.composer-first-frame-size-control {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(4, 9, 12, 0.58);
}

.composer-first-frame-size-control > span {
  color: rgba(213, 232, 230, 0.58);
  font-size: 11px;
  font-weight: 700;
}

.composer-first-frame-size-control .first-frame-size-selector {
  width: 100%;
  border-color: rgba(126, 228, 223, 0.14);
  background: rgba(126, 228, 223, 0.06);
}

.composer-first-frame-size-control .first-frame-size-selector button {
  flex: 1 1 0;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  color: rgba(213, 232, 230, 0.64);
}

.composer-first-frame-size-control .first-frame-size-selector button:hover:not(:disabled) {
  color: #f2fbfa;
  background: rgba(126, 228, 223, 0.1);
}

.composer-first-frame-size-control .first-frame-size-selector button.active {
  background: rgba(255, 184, 98, 0.16);
  color: #f4fffd;
  box-shadow: inset 0 0 0 1px rgba(255, 184, 98, 0.28);
}

.composer-card.is-run-locked .composer-first-frame-size-control {
  opacity: 0.56;
}

.first-frame-image-panel {
  display: grid;
  gap: 10px;
  margin: 0;
}

.first-frame-image-panel[hidden] {
  display: none !important;
}

.first-frame-image-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.15);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 22%, rgba(126, 228, 223, 0.09), transparent 36%),
    rgba(2, 7, 10, 0.84);
  color: inherit;
  cursor: zoom-in;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.first-frame-image-stage:not(:disabled):hover,
.first-frame-image-stage:not(:disabled):focus-visible {
  border-color: rgba(126, 228, 223, 0.48);
  box-shadow: 0 0 0 3px rgba(126, 228, 223, 0.08);
  outline: none;
}

.first-frame-image-stage:disabled {
  cursor: default;
}

.first-frame-image-stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020608;
}

.first-frame-image-stage img[hidden],
.first-frame-image-status[hidden] {
  display: none !important;
}

.first-frame-image-status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: rgba(213, 232, 230, 0.68);
  text-align: center;
}

.first-frame-image-status strong {
  color: rgba(238, 251, 249, 0.82);
  font-size: 13px;
}

.first-frame-image-status small {
  color: rgba(213, 232, 230, 0.46);
  font-size: 11px;
}

.first-frame-status-mark {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(126, 228, 223, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(126, 228, 223, 0.25) 49% 52%, transparent 53%),
    rgba(126, 228, 223, 0.05);
}

.first-frame-image-status.is-loading::after {
  content: "";
  position: absolute;
  inset: -70% -45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 38%, rgba(126, 228, 223, 0.12) 50%, transparent 62%);
  animation: first-frame-shimmer 1.45s ease-in-out infinite;
}

.first-frame-image-status.is-loading .first-frame-status-mark {
  border-color: rgba(255, 177, 88, 0.5);
  animation: first-frame-pulse 1.1s ease-in-out infinite;
}

.first-frame-image-status.is-error {
  color: #f1a49b;
}

.first-frame-image-status.is-warning {
  color: #f3c878;
}

.first-frame-image-panel figcaption,
.first-frame-image-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.first-frame-image-panel figcaption {
  justify-content: space-between;
  color: rgba(213, 232, 230, 0.68);
  font-size: 12px;
}

@keyframes first-frame-shimmer {
  from { transform: translateX(-46%); }
  to { transform: translateX(46%); }
}

@keyframes first-frame-pulse {
  50% { transform: scale(0.92); opacity: 0.58; }
}

@media (max-width: 700px) {
  .reactor-core .composer-launcher-row {
    grid-template-columns: 1fr;
  }

  .first-frame-image-panel figcaption {
    align-items: flex-start;
    flex-direction: column;
  }

  .first-frame-workspace {
    grid-template-columns: 1fr;
  }

  .first-frame-prompt {
    min-height: 320px;
    aspect-ratio: auto;
  }
}

/* Model service console v2 */
.setup-service-scroll {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 1480px;
  padding: 18px 24px 26px;
}

.model-console-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 9px 10px 9px 16px;
  border: 1px solid rgba(126, 228, 223, 0.13);
  border-radius: 14px;
  background: rgba(7, 17, 21, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.model-console-context span,
.model-console-context strong {
  display: block;
}

.model-console-context span {
  color: rgba(210, 229, 226, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.model-console-context strong {
  margin-top: 3px;
  color: rgba(242, 250, 248, 0.9);
  font-size: 14px;
  font-weight: 600;
}

.model-console-toolbar .setup-overall-state {
  min-width: 150px;
  padding: 8px 11px;
  border: 0;
  background: rgba(126, 228, 223, 0.055);
  box-shadow: none;
}

.model-console-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.model-console-actions .ghost-btn,
.model-console-actions .primary-btn {
  min-height: 36px;
  padding-inline: 13px;
  border-radius: 8px;
  font-size: 11px;
}

.model-console-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.11);
  border-radius: 14px;
  background: rgba(5, 13, 17, 0.72);
}

.model-console-summary article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 70px;
  padding: 12px 16px;
  border-right: 1px solid rgba(126, 228, 223, 0.09);
}

.model-console-summary article:last-child {
  border-right: 0;
}

.model-console-summary span {
  color: rgba(216, 233, 229, 0.52);
  font-size: 10px;
}

.model-console-summary strong {
  color: #eef8f6;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.model-console-summary small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: rgba(216, 233, 229, 0.35);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-console-tabs {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(126, 228, 223, 0.1);
  border-radius: 11px;
  background: rgba(4, 11, 15, 0.7);
}

.model-console-tabs button {
  min-height: 32px;
  padding: 0 15px;
  border-radius: 7px;
  color: rgba(220, 235, 231, 0.5);
  font-size: 11px;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.model-console-tabs button:hover {
  color: rgba(242, 250, 248, 0.86);
  background: rgba(126, 228, 223, 0.055);
}

.model-console-tabs button:active {
  transform: translateY(1px);
}

.model-console-tabs button[aria-current="page"] {
  color: #10201e;
  background: #b9d8cf;
}

.setup-service-scroll[data-console-tab="overview"] > [data-console-panel]:not([data-console-panel="overview"]),
.setup-service-scroll[data-console-tab="providers"] > [data-console-panel]:not([data-console-panel="providers"]),
.setup-service-scroll[data-console-tab="models"] > [data-console-panel]:not([data-console-panel="models"]),
.setup-service-scroll[data-console-tab="routes"] > [data-console-panel]:not([data-console-panel="routes"]),
.setup-service-scroll[data-console-tab="tests"] > [data-console-panel]:not([data-console-panel="tests"]) {
  display: none !important;
}

.setup-service-scroll[data-console-tab="providers"] {
  grid-template-columns: 236px minmax(0, 1fr);
}

.setup-service-scroll[data-console-tab="providers"] > .model-console-toolbar,
.setup-service-scroll[data-console-tab="providers"] > .model-console-summary,
.setup-service-scroll[data-console-tab="providers"] > .model-console-tabs {
  grid-column: 1 / -1;
}

.model-provider-sidebar {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.11);
  border-radius: 14px;
  background: rgba(5, 13, 17, 0.72);
}

.model-provider-sidebar-head {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.09);
}

.model-provider-sidebar-head strong {
  color: rgba(242, 250, 248, 0.84);
  font-size: 12px;
}

.model-provider-sidebar-head span {
  color: rgba(216, 233, 229, 0.42);
  font-size: 9px;
}

.model-provider-list {
  display: grid;
  gap: 3px;
  padding: 6px;
}

.model-provider-list button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(231, 242, 239, 0.72);
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.model-provider-list button:hover {
  background: rgba(126, 228, 223, 0.045);
}

.model-provider-list button:active {
  transform: scale(0.985);
}

.model-provider-list button.is-selected {
  border-color: rgba(185, 216, 207, 0.24);
  background: rgba(185, 216, 207, 0.105);
}

.model-provider-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: rgba(126, 228, 223, 0.08);
  color: rgba(166, 224, 215, 0.8);
  font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.model-provider-list button > span:nth-child(2) {
  min-width: 0;
}

.model-provider-list strong,
.model-provider-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-provider-list strong {
  font-size: 11px;
  font-weight: 600;
}

.model-provider-list small {
  margin-top: 3px;
  color: rgba(216, 233, 229, 0.36);
  font-size: 8px;
}

.model-provider-list em {
  color: rgba(216, 233, 229, 0.4);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.model-provider-list button[data-state="available"] em {
  color: #89d8cf;
}

.model-provider-list button[data-state="pending"] em {
  color: #dcbf77;
}

.setup-service-scroll[data-console-tab="providers"] .setup-provider-band {
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  border-radius: 14px;
  background: rgba(6, 15, 19, 0.78);
  box-shadow: none;
}

.setup-service-scroll[data-console-tab="providers"] .setup-provider-band:not(.is-selected) {
  display: none !important;
}

.setup-service-scroll[data-console-tab="providers"] .provider-guide {
  display: none;
}

.setup-service-scroll[data-console-tab="providers"] .provider-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px 20px;
  background: transparent;
}

.setup-service-scroll[data-console-tab="providers"] .provider-config-head,
.setup-service-scroll[data-console-tab="providers"] .provider-actions,
.setup-service-scroll[data-console-tab="providers"] .provider-test-result,
.setup-service-scroll[data-console-tab="providers"] .image-config-grid,
.setup-service-scroll[data-console-tab="providers"] .video-config-pair {
  grid-column: 1 / -1;
}

.setup-service-scroll[data-console-tab="providers"] .provider-config-head {
  min-height: 42px;
  padding-bottom: 11px;
}

.setup-service-scroll[data-console-tab="providers"] .provider-config-head h3 {
  font-size: 15px;
}

.setup-service-scroll[data-console-tab="providers"] .setup-field {
  gap: 6px;
}

.setup-service-scroll[data-console-tab="providers"] .setup-field input,
.setup-service-scroll[data-console-tab="providers"] .setup-field select,
.setup-service-scroll[data-console-tab="providers"] .video-provider-switch select {
  min-height: 38px;
  border-radius: 7px;
}

.setup-service-scroll[data-console-tab="providers"] .provider-actions {
  margin-top: 2px;
}

.setup-service-scroll[data-console-tab="providers"] .provider-actions button {
  min-height: 36px;
  border-radius: 7px;
  font-size: 10px;
}

.setup-integrity-strip {
  min-height: 52px;
  border-radius: 12px;
}

.setup-integrity-strip > div {
  min-height: 50px;
  padding-inline: 15px;
}

.model-service-map {
  gap: 8px;
}

.model-service-map article {
  padding: 12px;
  border-radius: 12px;
}

.model-service-map article > span {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.model-catalog-panel,
.model-routes-panel,
.model-test-history-panel {
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.11);
  border-radius: 14px;
  background: rgba(5, 13, 17, 0.72);
}

.model-catalog-panel > header,
.model-routes-panel > header,
.model-test-history-panel > header {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.09);
}

.model-catalog-panel header span,
.model-catalog-panel header strong,
.model-routes-panel header span,
.model-routes-panel header strong,
.model-test-history-panel header span,
.model-test-history-panel header strong {
  display: block;
}

.model-catalog-panel header span,
.model-routes-panel header span,
.model-test-history-panel header span {
  color: rgba(216, 233, 229, 0.38);
  font-size: 9px;
}

.model-catalog-panel header strong,
.model-routes-panel header strong,
.model-test-history-panel header strong {
  margin-top: 3px;
  color: rgba(242, 250, 248, 0.86);
  font-size: 13px;
}

.model-routes-panel > header p {
  max-width: 620px;
  margin: 0;
  color: rgba(216, 233, 229, 0.4);
  font-size: 9px;
  line-height: 1.55;
  text-align: right;
}

.model-catalog-filters {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.model-catalog-filters button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: rgba(216, 233, 229, 0.44);
  font-size: 9px;
}

.model-catalog-filters button[aria-pressed="true"] {
  color: #10201e;
  background: #b9d8cf;
}

.model-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.model-catalog-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(126, 228, 223, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.022);
}

.model-catalog-grid article[data-configured="true"] {
  border-color: rgba(126, 228, 223, 0.2);
  background: rgba(38, 96, 89, 0.1);
}

.model-catalog-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.model-catalog-card-head span,
.model-catalog-card-head em {
  color: rgba(216, 233, 229, 0.4);
  font-size: 8px;
  font-style: normal;
}

.model-catalog-grid article > strong,
.model-catalog-grid article > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-catalog-grid article > strong {
  color: rgba(242, 250, 248, 0.9);
  font-size: 13px;
}

.model-catalog-grid article > small {
  margin-top: 4px;
  color: rgba(216, 233, 229, 0.34);
  font-size: 8px;
}

.model-catalog-grid article > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 13px;
}

.model-catalog-grid article > div:last-child span {
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(126, 228, 223, 0.055);
  color: rgba(190, 225, 218, 0.58);
  font-size: 7px;
}

.model-route-list {
  display: grid;
  gap: 0;
}

.model-route-list article {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(260px, 1.2fr) minmax(130px, 0.55fr) 68px;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.075);
}

.model-route-list article:last-child {
  border-bottom: 0;
}

.model-route-copy span,
.model-route-copy strong,
.model-route-copy small,
.model-route-result em,
.model-route-result small {
  display: block;
}

.model-route-copy span {
  color: rgba(216, 233, 229, 0.32);
  font: 700 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
}

.model-route-copy strong {
  margin-top: 4px;
  color: rgba(242, 250, 248, 0.86);
  font-size: 12px;
}

.model-route-copy small,
.model-route-result small {
  margin-top: 3px;
  color: rgba(216, 233, 229, 0.34);
  font-size: 8px;
}

.model-route-list label span {
  display: block;
  margin-bottom: 5px;
  color: rgba(216, 233, 229, 0.4);
  font-size: 8px;
}

.model-route-list select {
  width: 100%;
  min-height: 34px;
  padding-inline: 9px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 6px;
  color: rgba(238, 248, 245, 0.8);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
}

.model-route-result em {
  color: #dcbf77;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.model-route-list article[data-state="available"] .model-route-result em {
  color: #89d8cf;
}

.model-route-list article > button {
  min-height: 32px;
  border: 1px solid rgba(185, 216, 207, 0.18);
  border-radius: 6px;
  color: rgba(231, 242, 239, 0.7);
  background: rgba(185, 216, 207, 0.07);
  font-size: 9px;
}

.model-route-list article > button:disabled {
  opacity: 0.38;
}

.setup-bulk-test {
  border-radius: 14px;
}

/* 快速开始只暴露文本输入；其余创作参数由模型自动判断，媒体生成保持关闭。 */
#app.quick-start-entry-active .composer-launcher-row,
#app[data-creation-entry="quick-start"] .composer-launcher-row,
#app.quick-start-entry-active .composer-reference-strip,
#app[data-creation-entry="quick-start"] .composer-reference-strip,
#app[data-creation-entry="quick-start"] .composer-inline-control,
#app[data-creation-entry="quick-start"] .composer-meta-readout,
#app[data-creation-entry="quick-start"] .composer-first-frame-size-control,
#app.quick-start-entry-active .composer-bottom-left,
#app[data-creation-entry="quick-start"] .composer-bottom-left,
#app[data-creation-entry="quick-start"] .composer-style-tray,
#app[data-creation-entry="quick-start"] #style-chips,
#app[data-creation-entry="quick-start"] .style-chips,
#app[data-creation-entry="quick-start"] .fast-flow-node[data-fast-stage="image"],
#app[data-creation-entry="quick-start"] #media-production-card {
  display: none;
}

/* Reference images can be added by drag-and-drop without changing the
   existing file-picker workflow. */
[data-reference-drop-bound="true"] {
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

[data-reference-drop-bound="true"].is-dragging {
  border-color: var(--accent, #d7a96b) !important;
  background-color: color-mix(in srgb, var(--accent, #d7a96b) 10%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d7a96b) 24%, transparent);
}

@media (max-width: 820px) {
  .setup-service-scroll {
    padding: 14px;
  }
}

/* Final authority for the Extreme Creation visual rail. */
#app[data-creation-mode="fast"] .reactor-flow-map {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "core" "main" "review" !important;
}

#app[data-creation-mode="fast"] .flow-rail-main {
  display: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-rail {
  grid-area: main !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.6vw, 28px);
  align-items: start;
  min-height: 0;
  padding: 20px clamp(8px, 1.4vw, 22px) 12px;
  overflow: visible;
  border: 0;
  background: transparent;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 78px auto auto;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 134px;
  padding: 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(239, 220, 173, 0.72);
  text-align: center;
  box-shadow: none;
}

#app[data-creation-mode="fast"] .fast-flow-node::before,
#app[data-creation-mode="fast"] .fast-flow-node::after {
  content: none;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(224, 171, 61, 0.52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 245, 192, 0.22), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(146, 91, 19, 0.72), rgba(15, 12, 8, 0.98) 74%);
  color: #f8d982;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 204, 0.2),
    inset 0 -8px 18px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(211, 156, 43, 0.055),
    0 12px 24px rgba(0, 0, 0, 0.26);
}

#app[data-creation-mode="fast"] .fast-flow-node strong,
#app[data-creation-mode="fast"] .fast-flow-node small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .fast-flow-node strong {
  color: rgba(255, 244, 211, 0.94);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 850;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .fast-flow-node small {
  color: rgba(221, 202, 159, 0.55);
  font-size: 10px;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .reactor-flow-map .review-console {
  grid-area: review !important;
  display: grid !important;
  width: 100%;
}

#app[data-creation-mode="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 8px;
  width: 100%;
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(116px, 1fr)) !important;
    overflow-x: auto;
  }
}

@media (max-width: 700px) {
  #app[data-creation-mode="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 104px) !important;
    overflow-x: auto;
  }
}

/*
 * Canonical Extreme Creation rail (must remain last):
 * the legacy shared-workbench rules above still target the same classes.
 * Keep this one scoped override as the final visual authority so the
 * six-stage gilded rail and the ten-dimension review row cannot regress.
 */
#app[data-creation-mode="fast"] .reactor-flow-map {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "core" "main" "review" !important;
  gap: 18px;
}

#app[data-creation-mode="fast"] .flow-rail-main {
  display: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-rail {
  grid-area: main !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.6vw, 28px);
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: 20px clamp(8px, 1.4vw, 22px) 12px;
  overflow: visible;
  border: 0;
  background: transparent;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 78px auto auto;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 134px;
  padding: 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(239, 220, 173, 0.72);
  text-align: center;
  box-shadow: none;
}

#app[data-creation-mode="fast"] .fast-flow-node::before,
#app[data-creation-mode="fast"] .fast-flow-node::after {
  content: none;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(224, 171, 61, 0.52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 245, 192, 0.22), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(146, 91, 19, 0.72), rgba(15, 12, 8, 0.98) 74%);
  color: #f8d982;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 204, 0.2),
    inset 0 -8px 18px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(211, 156, 43, 0.055),
    0 12px 24px rgba(0, 0, 0, 0.26);
}

#app[data-creation-mode="fast"] .fast-flow-node strong,
#app[data-creation-mode="fast"] .fast-flow-node small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .fast-flow-node strong {
  color: rgba(255, 244, 211, 0.94);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 850;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .fast-flow-node small {
  color: rgba(221, 202, 159, 0.55);
  font-size: 10px;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .reactor-flow-map .review-console {
  grid-area: review !important;
  display: grid !important;
  width: 100%;
}

#app[data-creation-mode="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 8px;
  width: 100%;
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(116px, 1fr)) !important;
    overflow-x: auto;
  }
}

@media (max-width: 700px) {
  #app[data-creation-mode="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 104px) !important;
    overflow-x: auto;
  }
}

/*
 * Fast mode visual system — consolidated gold rail.
 * This block intentionally changes presentation only. Existing data attributes,
 * status rendering, click handlers, and review detail behavior remain intact.
 */
#app[data-creation-mode="fast"] .reactor-flow-map {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "core"
    "main"
    "review" !important;
  align-items: stretch;
  gap: 18px;
  min-height: 0;
  padding: 6px 0 12px;
}

#app[data-creation-mode="fast"] .reactor-flow-map::before {
  inset: 8% 3% 6%;
  background:
    radial-gradient(circle at 50% 34%, rgba(226, 174, 63, 0.13), transparent 42%),
    linear-gradient(90deg, transparent, rgba(226, 174, 63, 0.045), transparent);
  opacity: 0.9;
}

#app[data-creation-mode="fast"] .fast-flow-rail {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 28px);
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: 20px clamp(8px, 1.4vw, 22px) 12px;
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
}

#app[data-creation-mode="fast"] .fast-flow-rail::before {
  left: 7.5%;
  right: 7.5%;
  top: calc(20px + 39px);
  height: 2px;
  z-index: 0;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(105, 67, 17, 0.2),
    rgba(195, 133, 35, 0.62) 18%,
    rgba(255, 233, 156, 0.94) 50%,
    rgba(195, 133, 35, 0.62) 82%,
    rgba(105, 67, 17, 0.2)
  );
  box-shadow: 0 0 9px rgba(225, 169, 55, 0.28), 0 0 24px rgba(225, 169, 55, 0.1);
}

#app[data-creation-mode="fast"] .fast-flow-rail::after {
  left: 7.5%;
  top: calc(20px + 39px);
  width: 76px;
  height: 5px;
  z-index: 1;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 225, 128, 0.55), #fff8d5 72%, transparent);
  filter: drop-shadow(0 0 7px rgba(255, 215, 105, 0.9));
  animation: fastRailGoldPulse 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 78px auto auto;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 134px;
  padding: 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(239, 220, 173, 0.72);
  text-align: center;
  box-shadow: none;
}

#app[data-creation-mode="fast"] .fast-flow-node::before,
#app[data-creation-mode="fast"] .fast-flow-node::after {
  content: none;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(224, 171, 61, 0.52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 245, 192, 0.22), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(146, 91, 19, 0.72), rgba(15, 12, 8, 0.98) 74%);
  background-color: rgba(15, 12, 8, 0.98);
  color: #f8d982;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 204, 0.2),
    inset 0 -8px 18px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(211, 156, 43, 0.055),
    0 12px 24px rgba(0, 0, 0, 0.26);
  transition: transform 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

#app[data-creation-mode="fast"] .fast-flow-node > span::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 230, 145, 0.18);
  border-radius: 50%;
}

#app[data-creation-mode="fast"] .fast-flow-node strong {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 244, 211, 0.94);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .fast-flow-node small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(221, 202, 159, 0.55);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover,
#app[data-creation-mode="fast"] .fast-flow-node:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover > span,
#app[data-creation-mode="fast"] .fast-flow-node:focus-visible > span {
  border-color: rgba(255, 235, 158, 0.95);
  color: #fff4c7;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 204, 0.28),
    0 0 0 7px rgba(232, 175, 58, 0.09),
    0 0 28px rgba(232, 175, 58, 0.38);
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: rgba(255, 230, 139, 0.98);
  color: #fff8dc;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 248, 204, 0.34), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(180, 118, 24, 0.94), rgba(36, 24, 7, 0.98) 74%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 204, 0.32),
    0 0 0 8px rgba(231, 174, 58, 0.1),
    0 0 32px rgba(231, 174, 58, 0.5);
  animation: fastGoldNodePulse 1.55s ease-in-out infinite;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="done"] > span {
  border-color: rgba(255, 225, 124, 0.88);
  color: #fff5c9;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 249, 214, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(181, 126, 31, 0.96), rgba(66, 42, 8, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 222, 0.28),
    0 0 0 5px rgba(224, 169, 55, 0.08),
    0 0 22px rgba(224, 169, 55, 0.3);
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="done"] strong {
  color: #fff3c8;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="error"] > span {
  border-color: rgba(255, 132, 116, 0.88);
  color: #ffe4dc;
  background: radial-gradient(circle at 50% 54%, rgba(116, 40, 28, 0.94), rgba(28, 12, 10, 0.98) 74%);
  box-shadow: 0 0 0 5px rgba(255, 112, 94, 0.08), 0 0 22px rgba(255, 112, 94, 0.26);
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="skipped"] {
  opacity: 0.48;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-warning="true"] > span {
  border-color: rgba(255, 193, 76, 0.96);
  box-shadow: 0 0 0 6px rgba(255, 177, 44, 0.08), 0 0 24px rgba(255, 177, 44, 0.28);
}

#app[data-creation-mode="fast"] .reactor-flow-map .review-console {
  grid-area: review;
  display: grid !important;
  align-self: stretch;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 16px clamp(10px, 1.3vw, 20px) 14px;
  border: 1px solid rgba(219, 165, 53, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(39, 28, 12, 0.74), rgba(9, 13, 15, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(232, 175, 57, 0.12), transparent 48%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 173, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.22);
}

#app[data-creation-mode="fast"] .review-console-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(219, 165, 53, 0.16);
}

#app[data-creation-mode="fast"] .review-console-head span {
  color: rgba(238, 193, 92, 0.72);
  font-size: 10px;
  letter-spacing: 0.12em;
}

#app[data-creation-mode="fast"] .review-console-head strong {
  color: rgba(255, 244, 211, 0.96);
  font-size: 16px;
}

#app[data-creation-mode="fast"] .review-skill-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

#app[data-creation-mode="fast"] .review-skill-chip {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 9px 6px;
  border: 1px solid rgba(219, 165, 53, 0.19);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(66, 43, 10, 0.42), rgba(8, 13, 15, 0.88));
  color: rgba(244, 230, 194, 0.84);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 239, 183, 0.06);
}

#app[data-creation-mode="fast"] .review-skill-chip:hover,
#app[data-creation-mode="fast"] .review-skill-chip:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(246, 205, 112, 0.72);
  color: #fff5d4;
  outline: none;
  box-shadow: 0 0 18px rgba(228, 172, 55, 0.17);
}

#app[data-creation-mode="fast"] .review-skill-chip span {
  color: rgba(239, 188, 78, 0.86);
  font-size: 9px;
  letter-spacing: 0.08em;
}

#app[data-creation-mode="fast"] .review-skill-chip strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .review-skill-chip small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(222, 201, 157, 0.54);
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"] {
  border-color: rgba(255, 222, 131, 0.84);
  background: linear-gradient(145deg, rgba(125, 81, 16, 0.8), rgba(23, 16, 6, 0.94));
  box-shadow: 0 0 0 3px rgba(230, 172, 54, 0.08), 0 0 22px rgba(230, 172, 54, 0.26);
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="done"] {
  border-color: rgba(221, 172, 66, 0.48);
  background: linear-gradient(145deg, rgba(76, 49, 11, 0.72), rgba(8, 13, 15, 0.9));
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="error"] {
  border-color: rgba(255, 132, 116, 0.7);
  background: linear-gradient(145deg, rgba(78, 28, 23, 0.72), rgba(20, 11, 11, 0.92));
}

#app[data-creation-mode="fast"] .review-console-foot {
  margin: 0;
  color: rgba(222, 201, 157, 0.48);
  font-size: 10px;
  text-align: right;
}

@keyframes fastGoldNodePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.14); }
}

@media (max-width: 1279px) {
  #app[data-creation-mode="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, minmax(104px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  #app[data-creation-mode="fast"] .review-skill-chip {
    min-width: 104px;
  }
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(116px, 1fr));
    overflow-x: auto;
    padding-inline: 6px;
    scrollbar-width: thin;
  }

  #app[data-creation-mode="fast"] .fast-flow-rail::before,
  #app[data-creation-mode="fast"] .fast-flow-rail::after {
    left: 44px;
    right: 44px;
  }
}

@media (max-width: 700px) {
  #app[data-creation-mode="fast"] .review-console-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #app[data-creation-mode="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 104px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-creation-mode="fast"] .fast-flow-rail::after,
  #app[data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
    animation: none !important;
  }
}

/* 快速开始只保留文本输入、运行控制与视频提示词输出；
   共享工作台中的创作模式链路节点不在此入口展示。 */
#app[data-creation-entry="quick-start"] .fast-flow-rail,
#app[data-creation-entry="quick-start"] .flow-rail-main,
#app[data-creation-entry="quick-start"] .flow-rail-review,
#app[data-creation-entry="quick-start"] .review-console,
#app[data-creation-entry="quick-start"] .reactor-node {
  display: none !important;
}

/* Quick start is a text-only entry point. Keep this contract last so legacy
   expanded-tray rules cannot re-open style or media controls. */
#app[data-creation-entry="quick-start"] .composer-style-tray,
#app[data-creation-entry="quick-start"] #style-chips,
#app[data-creation-entry="quick-start"] .composer-launcher-row,
#app[data-creation-entry="quick-start"] .composer-reference-strip,
#app[data-creation-entry="quick-start"] .workbench-task-context,
#app[data-creation-entry="quick-start"] #jump-to-output,
#app[data-creation-entry="quick-start"] #jump-to-logs,
#app[data-creation-entry="quick-start"] #generation-banner,
#app[data-creation-entry="quick-start"] .workbench-action-strip,
#app[data-creation-entry="quick-start"] #jump-to-output-footer,
#app[data-creation-entry="quick-start"] #jump-to-logs-footer,
#app[data-creation-entry="quick-start"] .composer-bottom-left,
#app[data-creation-entry="quick-start"] .composer-inline-control,
#app[data-creation-entry="quick-start"] .composer-meta-readout,
#app[data-creation-entry="quick-start"] .composer-first-frame-size-control,
#app[data-creation-entry="quick-start"] .fast-flow-node[data-fast-stage="image"],
#app[data-creation-entry="quick-start"] #media-production-card {
  display: none !important;
}

/* Final quick-start visibility contract: this override comes after legacy
   workbench density rules that use !important. */
#app[data-creation-entry="quick-start"] .composer-launcher-row,
#app[data-creation-entry="quick-start"] .composer-reference-strip,
#app[data-creation-entry="quick-start"] .composer-bottom-left,
#app[data-creation-entry="quick-start"] .composer-style-tray,
#app[data-creation-entry="quick-start"] #style-chips,
#app.quick-start-entry-active .composer-inline-control,
#app[data-creation-entry="quick-start"] .composer-inline-control,
#app.quick-start-entry-active .composer-meta-readout,
#app[data-creation-entry="quick-start"] .composer-meta-readout,
#app.quick-start-entry-active .composer-first-frame-size-control,
#app[data-creation-entry="quick-start"] .composer-first-frame-size-control,
#app.quick-start-entry-active .style-chips,
#app[data-creation-entry="quick-start"] .style-chips,
#app[data-creation-entry="quick-start"] .fast-flow-node[data-fast-stage="image"],
#app[data-creation-entry="quick-start"] #media-production-card {
  display: none !important;
}

/* Desktop navigation is anchored to the viewport for every product view.
   Sticky belongs to the full sidebar, not its viewport-height inner panel. */
@media (min-width: 1121px) {
  #app {
    --app-sidebar-width: 248px;
  }

  #app.sidebar-collapsed {
    --app-sidebar-width: 88px;
  }

  #app > .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    z-index: 20;
    width: var(--app-sidebar-width);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #app > .sidebar > .sidebar-shell {
    position: relative;
    top: 0;
  }

  #app > .shell {
    grid-column: 2;
  }
}

/* Image service capabilities: one provider, two independently verified routes. */
#app[data-active-view="setup"] .image-capability-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#app[data-active-view="setup"] .image-capability-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(221, 186, 111, 0.16);
  border-radius: 10px;
  background: rgba(7, 16, 18, 0.72);
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease;
}

#app[data-active-view="setup"] .image-capability-card[data-status="testing"] {
  border-color: rgba(216, 183, 119, 0.42);
  background: rgba(20, 23, 18, 0.86);
}

#app[data-active-view="setup"] .image-capability-card[data-status="testing"]::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d8b777, transparent);
  content: "";
  transform: translateX(-100%);
  animation: image-capability-progress 1.4s ease-in-out infinite;
}

#app[data-active-view="setup"] .image-capability-card > header,
#app[data-active-view="setup"] .image-capability-card > header > div {
  display: flex;
  align-items: center;
}

#app[data-active-view="setup"] .image-capability-card > header {
  justify-content: space-between;
  gap: 12px;
}

#app[data-active-view="setup"] .image-capability-card > header > div {
  gap: 8px;
}

#app[data-active-view="setup"] .image-capability-card > header span {
  color: rgba(226, 196, 133, 0.54);
  font: 700 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

#app[data-active-view="setup"] .image-capability-card > header strong {
  color: #f3f7f5;
  font-size: 13px;
}

#app[data-active-view="setup"] .image-capability-card > header em {
  padding: 4px 6px;
  border: 1px solid rgba(207, 224, 224, 0.12);
  border-radius: 4px;
  color: rgba(218, 233, 231, 0.62);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

#app[data-active-view="setup"] .image-capability-card > header em[data-status="verified"] {
  border-color: rgba(126, 228, 223, 0.24);
  background: rgba(126, 228, 223, 0.1);
  color: #9ee9e4;
}

#app[data-active-view="setup"] .image-capability-card > header em[data-status="failed"] {
  border-color: rgba(229, 161, 173, 0.28);
  background: rgba(154, 72, 87, 0.12);
  color: #e5a1ad;
}

#app[data-active-view="setup"] .image-capability-card > header em[data-status="testing"] {
  border-color: rgba(216, 183, 119, 0.28);
  background: rgba(216, 183, 119, 0.1);
  color: #e0c188;
}

#app[data-active-view="setup"] .image-capability-card > p {
  min-height: 30px;
  margin: 0;
  color: rgba(216, 233, 229, 0.55);
  font-size: 10px;
  line-height: 1.45;
}

#app[data-active-view="setup"] .image-capability-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#app[data-active-view="setup"] .image-reference-limits .setup-field {
  position: relative;
}

#app[data-active-view="setup"] .image-reference-limits .setup-field > small {
  position: absolute;
  right: 9px;
  bottom: 8px;
  color: rgba(216, 233, 229, 0.4);
  font: 700 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  pointer-events: none;
}

#app[data-active-view="setup"] .image-reference-limits input {
  padding-right: 34px;
}

#app[data-active-view="setup"] .image-reference-retry {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: rgba(216, 233, 229, 0.62);
  font-size: 10px;
  line-height: 1.4;
}

#app[data-active-view="setup"] .image-reference-retry input {
  width: 14px;
  height: 14px;
  accent-color: #d8b777;
}

#app[data-active-view="setup"] .image-capability-test-btn {
  width: fit-content;
  min-width: 96px;
  min-height: 32px;
  padding-inline: 12px;
  font-size: 10px;
  white-space: nowrap;
}

#app[data-active-view="setup"] .image-capability-card[data-status="testing"] .image-capability-test-btn {
  cursor: wait;
  border-color: rgba(216, 183, 119, 0.34);
  color: #e0c188;
  opacity: 1;
}

#app[data-active-view="setup"] .image-capability-result {
  display: block;
  min-height: 30px;
  max-height: 72px;
  overflow: auto;
  color: rgba(207, 224, 224, 0.5);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#app[data-active-view="setup"] .image-capability-result[data-status="verified"] {
  color: #9ee9e4;
}

#app[data-active-view="setup"] .image-capability-result[data-status="failed"],
#app[data-active-view="setup"] .image-capability-result[data-status="error"] {
  color: #e5a1ad;
}

#app[data-active-view="setup"] .image-capability-result[data-status="testing"] {
  color: #e0c188;
}

@keyframes image-capability-progress {
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 980px) {
  #app[data-active-view="setup"] .image-capability-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-active-view="setup"] .image-capability-card[data-status="testing"]::after {
    animation: none;
    transform: none;
  }
}

/* Project-based run logs. Errors live inside their project and run detail. */
#app[data-active-view="logs"] .project-log-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px 24px 20px;
  overflow: hidden;
}

.project-log-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(560px, 1.8fr) auto;
  align-items: end;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(155, 191, 185, 0.14);
  border-radius: 14px;
  background: rgba(8, 18, 21, 0.88);
}

.project-log-summary {
  min-width: 0;
}

.project-log-summary .eyebrow {
  margin: 0 0 4px;
  color: rgba(222, 198, 119, 0.72);
  font-size: 9px;
}

.project-log-summary h2 {
  margin: 0;
  color: #f2f5f2;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.project-log-summary > p:last-child {
  max-width: 520px;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(211, 223, 219, 0.48);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-log-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.45fr) repeat(3, minmax(106px, 0.75fr));
  gap: 8px;
}

.project-log-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-log-filters label > span {
  color: rgba(213, 225, 221, 0.5);
  font-size: 9px;
}

.project-log-filters input,
.project-log-filters select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(155, 191, 185, 0.15);
  border-radius: 9px;
  color: rgba(236, 242, 240, 0.88);
  background: rgba(3, 12, 14, 0.72);
  font-size: 11px;
}

.project-log-filters input:focus-visible,
.project-log-filters select:focus-visible {
  border-color: rgba(222, 198, 119, 0.68);
  outline: 2px solid rgba(222, 198, 119, 0.16);
  outline-offset: 1px;
}

.project-log-more {
  position: relative;
  align-self: end;
}

.project-log-more > summary {
  display: grid;
  place-items: center;
  min-width: 70px;
  min-height: 38px;
  border: 1px solid rgba(155, 191, 185, 0.18);
  border-radius: 9px;
  color: rgba(229, 237, 234, 0.75);
  background: rgba(155, 191, 185, 0.055);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.project-log-more > summary::-webkit-details-marker {
  display: none;
}

.project-log-more[open] > summary {
  border-color: rgba(222, 198, 119, 0.38);
  color: #efe4b6;
}

.project-log-more > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: 240px;
  padding: 12px;
  border: 1px solid rgba(155, 191, 185, 0.16);
  border-radius: 12px;
  background: #0b1719;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.project-log-more > div > span {
  color: #e6ece9;
  font-size: 12px;
  font-weight: 650;
}

.project-log-more > div > p {
  margin: 0 0 3px;
  color: rgba(210, 222, 218, 0.5);
  font-size: 10px;
  line-height: 1.5;
}

.project-log-more > div button {
  min-height: 34px;
  text-align: left;
}

.project-log-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 1px 2px 12px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(149, 194, 187, 0.18) transparent;
}

.project-log-selection-bar[hidden] {
  display: none !important;
}

.project-log-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 7px 10px 7px 14px;
  border: 1px solid rgba(222, 198, 119, 0.2);
  border-radius: 10px;
  background: rgba(222, 198, 119, 0.055);
}

.project-log-selection-bar strong {
  color: rgba(238, 232, 205, 0.78);
  font-size: 11px;
}

.project-log-selection-bar > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-log-card {
  position: relative;
  min-width: 0;
  height: 176px;
  border: 1px solid rgba(155, 191, 185, 0.13);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(9, 20, 23, 0.9);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.project-log-card.is-selected {
  border-color: rgba(222, 198, 119, 0.62);
  background: rgba(28, 29, 23, 0.96);
  box-shadow: inset 0 0 0 1px rgba(222, 198, 119, 0.12);
}

.project-log-card-check,
.project-log-card-delete {
  position: absolute;
  z-index: 3;
}

.project-log-card-check {
  top: 17px;
  left: 17px;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(222, 198, 119, 0.3);
  border-radius: 7px;
  color: #eee4b9;
  background: rgba(4, 11, 12, 0.88);
  font-size: 9px;
  cursor: pointer;
}

.project-log-card-check input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #d8c073;
}

.project-log-grid.is-selecting .project-log-card-check {
  display: flex;
}

.project-log-card-delete {
  right: 11px;
  bottom: 9px;
  padding: 4px 6px;
  color: rgba(224, 139, 130, 0.62);
  font-size: 9px;
  transition: color 160ms ease, background 160ms ease;
}

.project-log-card-delete:hover,
.project-log-card-delete:focus-visible {
  color: #efaaa2;
  background: rgba(216, 105, 93, 0.08);
}

.project-log-grid.is-selecting .project-log-card-delete {
  display: none;
}

.project-log-card:hover {
  border-color: rgba(222, 198, 119, 0.28);
  background: rgba(11, 24, 27, 0.96);
  transform: translateY(-1px);
}

.project-log-card-open {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 11px 12px;
  width: 100%;
  height: 100%;
  padding: 11px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.project-log-card-open:focus-visible {
  outline: 2px solid rgba(222, 198, 119, 0.78);
  outline-offset: -3px;
}

.project-log-card figure {
  position: relative;
  grid-row: 1 / -1;
  width: 94px;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 22%, rgba(222, 198, 119, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(79, 126, 119, 0.32), rgba(4, 12, 14, 0.9));
}

.project-log-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-log-card figure > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(245, 238, 205, 0.78);
  font-family: var(--display-font, sans-serif);
  font-size: 28px;
  font-weight: 750;
}

.project-log-card figure em {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(239, 244, 242, 0.82);
  background: rgba(3, 10, 12, 0.78);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-style: normal;
}

.project-log-card[data-tone="error"] figure em {
  color: #f0aaa2;
}

.project-log-card[data-tone="warning"] figure em {
  color: #e6cf84;
}

.project-log-card-copy {
  min-width: 0;
}

.project-log-card-copy > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(209, 222, 217, 0.46);
  font-size: 9px;
}

.project-log-card-copy h3 {
  margin: 8px 0 5px;
  overflow: hidden;
  color: #eef2ef;
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-log-card-copy > p {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  color: rgba(211, 222, 218, 0.58);
  font-size: 10px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-log-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.project-log-card-meta span {
  max-width: 108px;
  padding: 3px 6px;
  border-radius: 5px;
  overflow: hidden;
  color: rgba(205, 220, 215, 0.55);
  background: rgba(154, 193, 186, 0.06);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-log-card-meta .has-errors {
  color: #e3a39b;
  background: rgba(216, 105, 93, 0.09);
}

.project-log-card-open > strong {
  grid-column: 2;
  align-self: end;
  justify-self: start;
  color: rgba(222, 198, 119, 0.72);
  font-size: 10px;
  font-weight: 600;
  text-align: left;
}

.project-log-grid > .history-empty {
  grid-column: 1 / -1;
  min-height: 180px;
}

.project-log-detail-shell[hidden] {
  display: none !important;
}

.project-log-detail-shell {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  justify-content: flex-end;
}

.project-log-detail-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 7, 9, 0.68);
  backdrop-filter: blur(4px);
  cursor: default;
}

.project-log-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(860px, 76vw);
  height: 100%;
  border-left: 1px solid rgba(166, 201, 195, 0.17);
  background: #081416;
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.36);
}

.project-log-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid rgba(155, 191, 185, 0.12);
}

.project-log-detail > header .eyebrow {
  margin: 0 0 4px;
  color: rgba(222, 198, 119, 0.7);
  font-size: 9px;
}

.project-log-detail > header h2 {
  margin: 0;
  color: #f2f5f2;
  font-size: 22px;
}

.project-log-detail > header p:last-child {
  margin: 6px 0 0;
  color: rgba(208, 221, 216, 0.5);
  font-size: 10px;
}

.project-log-detail-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 18px 22px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(149, 194, 187, 0.18) transparent;
}

.project-run-list,
.project-level-errors {
  display: grid;
  gap: 8px;
}

.project-run-list-head,
.project-level-errors > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.project-run-list-head h3,
.project-level-errors h3 {
  margin: 0;
  color: rgba(235, 241, 238, 0.9);
  font-size: 13px;
}

.project-run-list-head span,
.project-level-errors > div:first-child span {
  color: rgba(204, 219, 214, 0.45);
  font-size: 10px;
}

.project-run-card {
  border: 1px solid rgba(155, 191, 185, 0.13);
  border-radius: 11px;
  overflow: hidden;
  background: rgba(12, 25, 27, 0.74);
}

.project-run-card > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.project-run-card > summary::-webkit-details-marker {
  display: none;
}

.project-run-card[open] > summary {
  border-bottom: 1px solid rgba(155, 191, 185, 0.1);
  background: rgba(155, 191, 185, 0.035);
}

.project-run-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #d8c37d;
  background: rgba(222, 198, 119, 0.09);
  font-family: var(--mono-font, monospace);
  font-size: 10px;
}

.project-run-card > summary > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.project-run-card > summary strong {
  color: rgba(235, 241, 238, 0.88);
  font-size: 12px;
}

.project-run-card > summary small,
.project-run-card > summary em {
  color: rgba(206, 219, 214, 0.46);
  font-size: 9px;
  font-style: normal;
}

.project-run-body {
  display: grid;
  gap: 12px;
  padding: 13px;
}

.project-run-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.project-run-facts > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  color: rgba(201, 216, 211, 0.45);
  background: rgba(151, 188, 181, 0.045);
  font-size: 9px;
}

.project-run-facts strong,
.project-run-facts code {
  max-width: 70%;
  overflow: hidden;
  color: rgba(228, 236, 233, 0.72);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-run-errors {
  display: grid;
  gap: 7px;
}

.project-run-errors h4,
.project-run-output h4 {
  margin: 0;
  color: rgba(231, 238, 235, 0.82);
  font-size: 11px;
}

.project-log-error-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  padding: 10px;
  border: 1px solid rgba(220, 117, 105, 0.18);
  border-radius: 9px;
  background: rgba(126, 45, 37, 0.08);
}

.project-log-error-event > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.project-log-error-event > div:first-child span,
.project-log-error-event code {
  color: rgba(223, 177, 169, 0.56);
  font-size: 8px;
}

.project-log-error-event > div:first-child strong {
  color: #e4aaa2;
  font-size: 10px;
}

.project-log-error-event > p {
  grid-column: 1;
  margin: 0;
  color: rgba(235, 216, 212, 0.72);
  font-size: 10px;
  line-height: 1.55;
}

.project-log-error-facts {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.project-log-error-facts span {
  padding: 3px 5px;
  border-radius: 5px;
  color: rgba(232, 181, 172, 0.68);
  background: rgba(216, 105, 93, 0.07);
  font-size: 8px;
}

.project-log-error-event > .project-log-error-file {
  grid-column: 1;
  color: rgba(222, 184, 177, 0.52);
  font-size: 8px;
}

.project-log-error-file code {
  overflow-wrap: anywhere;
  color: rgba(235, 207, 201, 0.7);
}

.project-log-error-event > details {
  grid-column: 1;
  color: rgba(227, 185, 177, 0.65);
  font-size: 9px;
}

.project-log-error-event > details summary {
  cursor: pointer;
}

.project-log-error-event > details pre {
  max-height: 120px;
  margin: 7px 0 0;
  padding: 8px;
  border-radius: 7px;
  overflow: auto;
  color: rgba(236, 214, 210, 0.68);
  background: rgba(4, 9, 10, 0.48);
  font-family: var(--mono-font, monospace);
  font-size: 8px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.project-log-error-event > div:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-run-output {
  display: grid;
  gap: 7px;
}

.project-run-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.project-run-output.is-video {
  grid-column: 1 / -1;
}

.project-run-output > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.project-run-output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-run-output-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.project-run-local-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.project-run-local-actions button {
  min-height: 28px;
  padding-inline: 9px;
  white-space: nowrap;
}

.project-run-output > div span {
  color: rgba(202, 216, 211, 0.42);
  font-size: 9px;
}

.project-run-output pre {
  height: 132px;
  max-height: 132px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(155, 191, 185, 0.1);
  border-radius: 9px;
  overflow: auto;
  color: rgba(222, 231, 228, 0.7);
  background: rgba(3, 11, 13, 0.62);
  font-family: var(--body-font, sans-serif);
  font-size: 10px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.project-run-output.is-video pre {
  height: 168px;
  max-height: 168px;
}

.project-run-actions {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(155, 191, 185, 0.09);
}

.project-run-actions h4 {
  margin: 0;
  color: rgba(207, 221, 216, 0.46);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.project-run-action-strip {
  display: flex;
  align-items: end;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(155, 191, 185, 0.09);
  border-radius: 10px;
  background: rgba(151, 188, 181, 0.028);
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 228, 223, 0.2) transparent;
}

.project-run-action-group {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  padding-right: 12px;
}

.project-run-action-group:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: 1px;
  background: rgba(155, 191, 185, 0.1);
}

.project-run-action-group > span {
  color: rgba(229, 237, 234, 0.78);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.project-run-action-group > div {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.project-run-action-group.is-reuse > span {
  color: rgba(222, 198, 119, 0.74);
}

.project-run-action-strip::-webkit-scrollbar {
  height: 5px;
}

.project-run-action-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.18);
}

.project-run-actions button {
  min-height: 34px;
  white-space: nowrap;
}

.project-log-empty-copy {
  margin: 0;
  padding: 22px;
  border: 1px dashed rgba(155, 191, 185, 0.14);
  border-radius: 10px;
  color: rgba(208, 221, 216, 0.5);
  font-size: 11px;
  text-align: center;
}

body.project-log-detail-open {
  overflow: hidden;
}

@media (max-width: 1120px) {
  .project-log-toolbar {
    grid-template-columns: 1fr auto;
  }

  .project-log-filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .project-log-more {
    grid-column: 2;
    grid-row: 1;
  }

  .project-log-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #app[data-active-view="logs"] .project-log-page {
    display: block;
    padding: 12px;
    overflow-y: auto;
  }

  .project-log-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: 10px;
    padding: 13px;
  }

  .project-log-summary > p:last-child {
    white-space: normal;
  }

  .project-log-filters {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-log-search {
    grid-column: 1 / -1;
  }

  .project-log-more {
    align-self: start;
  }

  .project-log-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .project-log-card {
    height: 168px;
  }

  .project-log-detail {
    width: 100%;
  }

  .project-log-detail > header,
  .project-log-detail-body {
    padding-inline: 14px;
  }

  .project-run-card > summary {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .project-run-card > summary > em {
    grid-column: 2 / -1;
  }

  .project-run-facts {
    grid-template-columns: 1fr;
  }

  .project-log-error-event {
    grid-template-columns: 1fr;
  }

  .project-log-error-event > div:last-child,
  .project-log-error-event > p {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-log-card {
    transition: none;
  }
}

/* Model service: compact function list + focused configuration panel. */
#app[data-active-view="setup"] .setup-service-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  max-width: 1480px;
  padding: 14px 24px 20px;
}

.model-service-commandbar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(155, 191, 185, 0.13);
  border-radius: 14px;
  background: rgba(8, 18, 21, 0.84);
}

.model-service-commandbar .setup-overall-state {
  min-width: 190px;
  padding: 0;
  border: 0;
  background: transparent;
}

.model-service-command-status {
  min-width: 0;
  color: rgba(220, 229, 226, 0.56);
  font-size: 12px;
  text-align: right;
}

.model-service-command-status span:empty {
  display: none;
}

.model-service-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-service-command-actions button {
  min-height: 40px;
  padding-inline: 15px;
  white-space: nowrap;
}

.model-service-command-actions #setup-test-all-btn {
  border-color: rgba(222, 198, 119, 0.66);
  color: #18170f;
  background: #dec677;
  box-shadow: none;
}

.model-service-workspace {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  flex: 1;
  gap: 12px;
  min-height: 0;
}

.model-service-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  padding: 8px;
  border: 1px solid rgba(155, 191, 185, 0.13);
  border-radius: 14px;
  background: rgba(7, 16, 19, 0.9);
}

.model-service-nav-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 66px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(232, 238, 236, 0.84);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.model-service-nav-item:hover {
  border-color: rgba(137, 214, 205, 0.14);
  background: rgba(128, 191, 184, 0.055);
}

.model-service-nav-item:focus-visible {
  outline: 2px solid rgba(222, 198, 119, 0.82);
  outline-offset: 2px;
}

.model-service-nav-item.is-active {
  border-color: rgba(222, 198, 119, 0.28);
  color: #f5f1df;
  background: rgba(222, 198, 119, 0.095);
}

.model-service-nav-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgba(208, 222, 218, 0.6);
  background: rgba(132, 185, 178, 0.09);
  font-family: var(--mono-font, monospace);
  font-size: 10px;
  font-weight: 700;
}

.model-service-nav-item.is-active .model-service-nav-index {
  color: #dec677;
  background: rgba(222, 198, 119, 0.12);
}

.model-service-nav-item > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.model-service-nav-item strong,
.model-service-nav-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-service-nav-item strong {
  font-size: 13px;
  font-weight: 650;
}

.model-service-nav-item small {
  color: rgba(203, 216, 212, 0.48);
  font-size: 11px;
}

.model-service-nav-item em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(206, 217, 213, 0.52);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.model-service-nav-item em::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(169, 184, 180, 0.35);
  content: "";
}

.model-service-nav-item em[data-status="available"] {
  color: #96d5c7;
}

.model-service-nav-item em[data-status="available"]::before {
  background: #79c8b5;
  box-shadow: 0 0 0 3px rgba(121, 200, 181, 0.09);
}

.model-service-nav-item em[data-status="pending"] {
  color: #d8c37d;
}

.model-service-nav-item em[data-status="pending"]::before {
  background: #d8c37d;
}

.model-service-nav-item em[data-status="partial"] {
  color: #d8c37d;
}

.model-service-nav-item em[data-status="partial"]::before {
  background: #d8c37d;
}

.model-service-nav-item em[data-status="error"] {
  color: #e3968e;
}

.model-service-nav-item em[data-status="error"]::before {
  background: #e07d74;
}

.model-service-nav-note {
  margin: auto 4px 2px;
  padding: 12px 9px 5px;
  border-top: 1px solid rgba(150, 184, 179, 0.1);
  color: rgba(200, 213, 209, 0.44);
  font-size: 11px;
  line-height: 1.55;
}

.model-service-nav-note strong {
  display: block;
  margin-bottom: 3px;
  color: rgba(228, 215, 165, 0.78);
  font-size: 11px;
}

.model-service-detail-stack {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(149, 194, 187, 0.18) transparent;
}

.model-service-detail-stack > .setup-provider-band[hidden] {
  display: none !important;
}

#app[data-active-view="setup"] .model-service-detail-stack > .setup-provider-band {
  display: block;
  min-height: 100%;
  margin: 0;
  border: 1px solid rgba(155, 191, 185, 0.13);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 22, 24, 0.88);
}

#app[data-active-view="setup"] .provider-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  min-height: 0;
  padding: 16px 18px 14px;
  border: 0;
  border-bottom: 1px solid rgba(155, 191, 185, 0.11);
  background: rgba(113, 167, 160, 0.035);
}

#app[data-active-view="setup"] .provider-guide .provider-number {
  display: none;
}

#app[data-active-view="setup"] .provider-guide .eyebrow,
#app[data-active-view="setup"] .provider-guide h3,
#app[data-active-view="setup"] .provider-guide .provider-summary {
  grid-column: 1;
}

#app[data-active-view="setup"] .provider-guide .eyebrow {
  margin: 0;
  color: rgba(222, 198, 119, 0.7);
  font-size: 10px;
}

#app[data-active-view="setup"] .provider-guide h3 {
  margin: 1px 0 0;
  font-size: 22px;
  line-height: 1.1;
}

#app[data-active-view="setup"] .provider-guide .provider-summary {
  max-width: 760px;
  margin: 3px 0 0;
  color: rgba(218, 228, 225, 0.62);
  font-size: 12px;
  line-height: 1.5;
}

#app[data-active-view="setup"] .provider-model-scope {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 170px;
  align-self: start;
  padding: 8px 10px;
  border: 1px solid rgba(155, 191, 185, 0.11);
  border-radius: 9px;
  background: rgba(5, 13, 15, 0.42);
}

#app[data-active-view="setup"] .provider-capability-list {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  min-width: 236px;
  align-self: start;
  gap: 6px;
}

#app[data-active-view="setup"] .provider-capability-list span {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(155, 191, 185, 0.11);
  border-radius: 8px;
  color: rgba(220, 229, 226, 0.7);
  background: rgba(5, 13, 15, 0.42);
  font-size: 10px;
  white-space: nowrap;
}

#app[data-active-view="setup"] .provider-capability-list b {
  color: rgba(228, 215, 165, 0.88);
  font-weight: 700;
}

#app[data-active-view="setup"] .provider-external-link {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  min-height: 28px;
  margin: 0;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
}

#app[data-active-view="setup"] .provider-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px 14px;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px 18px;
  border: 0;
  background: transparent;
}

#app[data-active-view="setup"] .provider-config-head,
#app[data-active-view="setup"] .model-family-picker,
#app[data-active-view="setup"] .provider-actions,
#app[data-active-view="setup"] .provider-test-result,
#app[data-active-view="setup"] .image-config-grid,
#app[data-active-view="setup"] .video-config-pair,
#app[data-active-view="setup"] .video-advanced-config {
  grid-column: 1 / -1;
}

#app[data-active-view="setup"] .model-family-picker {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(320px, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(155, 191, 185, 0.1);
  border-radius: 10px;
  background: rgba(4, 13, 15, 0.34);
}

#app[data-active-view="setup"] .model-family-picker > div:first-child {
  display: grid;
  gap: 3px;
}

#app[data-active-view="setup"] .model-family-picker > div:first-child span {
  color: rgba(232, 238, 236, 0.82);
  font-size: 11px;
  font-weight: 700;
}

#app[data-active-view="setup"] .model-family-picker > div:first-child small {
  color: rgba(200, 214, 210, 0.46);
  font-size: 10px;
}

#app[data-active-view="setup"] .model-family-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#app[data-active-view="setup"] [data-model-family-picker="vision"] .model-family-options {
  grid-template-columns: minmax(0, 1fr);
}

#app[data-active-view="setup"] .model-family-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid rgba(151, 187, 181, 0.12);
  border-radius: 8px;
  color: rgba(221, 231, 227, 0.68);
  background: rgba(133, 181, 174, 0.035);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

#app[data-active-view="setup"] .model-family-options button:hover {
  border-color: rgba(222, 198, 119, 0.3);
}

#app[data-active-view="setup"] .model-family-options button[aria-pressed="true"] {
  border-color: rgba(222, 198, 119, 0.48);
  color: #f4eccf;
  background: rgba(222, 198, 119, 0.1);
}

#app[data-active-view="setup"] .model-family-options button:focus-visible {
  outline: 2px solid rgba(222, 198, 119, 0.82);
  outline-offset: 2px;
}

#app[data-active-view="setup"] .model-family-options strong,
#app[data-active-view="setup"] .model-family-options small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-active-view="setup"] .model-family-options strong {
  font-size: 11px;
}

#app[data-active-view="setup"] .model-family-options small {
  color: rgba(202, 216, 212, 0.46);
  font-size: 9px;
}

#app[data-active-view="setup"] .image-channel-config > .image-model-card-grid,
#app[data-active-view="setup"] .image-channel-config > .image-channel-workspace,
#app[data-active-view="setup"] .image-channel-config > .image-channel-form,
#app[data-active-view="setup"] .image-channel-config > .image-channel-actions {
  grid-column: 1 / -1;
}

.image-model-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-model-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  min-height: 82px;
  padding: 14px 15px;
  border: 1px solid rgba(151, 187, 181, 0.13);
  border-radius: 11px;
  color: rgba(232, 238, 236, 0.86);
  background: rgba(4, 13, 15, 0.38);
  text-align: left;
  cursor: pointer;
}

.image-model-card:hover,
.image-model-card.is-selected {
  border-color: rgba(222, 198, 119, 0.42);
  background: rgba(222, 198, 119, 0.075);
}

.image-model-card span {
  align-self: end;
  font-family: var(--mono-font, monospace);
  font-size: 15px;
  font-weight: 750;
}

.image-model-card small {
  grid-column: 1;
  color: rgba(203, 216, 212, 0.5);
  font-size: 10px;
}

.image-model-card em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(204, 217, 213, 0.58);
  background: rgba(149, 184, 178, 0.08);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.image-model-card em[data-status="active"] {
  color: #9ed8ca;
  background: rgba(84, 174, 153, 0.13);
}

.image-channel-workspace {
  overflow: hidden;
  border: 1px solid rgba(151, 187, 181, 0.12);
  border-radius: 11px;
  background: rgba(4, 13, 15, 0.3);
}

.image-channel-head,
.image-channel-form > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(151, 187, 181, 0.1);
}

.image-channel-head small,
.image-channel-form > header small {
  color: rgba(201, 215, 211, 0.45);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.image-channel-head h4,
.image-channel-form > header h4 {
  margin: 2px 0 0;
  color: #eef2eb;
  font-size: 13px;
}

.image-channel-list {
  display: grid;
  gap: 1px;
  background: rgba(151, 187, 181, 0.08);
}

.image-channel-card {
  background: rgba(8, 19, 21, 0.96);
}

.image-channel-card.is-enabled {
  background: rgba(17, 37, 36, 0.98);
}

.image-channel-summary {
  display: grid;
  grid-template-columns: 8px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px 12px;
}

.image-channel-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(167, 184, 180, 0.34);
}

.image-channel-card.is-enabled .image-channel-indicator {
  background: #79c8b5;
  box-shadow: 0 0 0 4px rgba(121, 200, 181, 0.1);
}

.image-channel-summary > div:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.image-channel-summary strong,
.image-channel-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-channel-summary strong {
  color: rgba(235, 240, 237, 0.9);
  font-size: 12px;
}

.image-channel-summary small,
.image-channel-summary > em {
  color: rgba(200, 214, 210, 0.48);
  font-size: 10px;
  font-style: normal;
}

.image-channel-card.is-enabled .image-channel-summary > em {
  color: #91d2c3;
}

.image-channel-buttons {
  display: flex;
  gap: 6px;
}

.image-channel-buttons button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
  white-space: nowrap;
}

.image-channel-details {
  padding: 0 13px 13px 32px;
}

.image-channel-details[hidden],
.image-channel-form[hidden] {
  display: none !important;
}

.image-channel-details dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(151, 187, 181, 0.08);
}

.image-channel-details dl > div {
  min-width: 0;
  padding: 8px 9px;
  background: rgba(4, 13, 15, 0.62);
}

.image-channel-details dt {
  color: rgba(200, 214, 210, 0.42);
  font-size: 9px;
}

.image-channel-details dd {
  overflow: hidden;
  margin: 3px 0 0;
  color: rgba(231, 237, 234, 0.76);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-channel-details p {
  margin: 8px 0 0;
  color: rgba(205, 218, 214, 0.52);
  font-size: 10px;
}

.image-channel-empty {
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 92px;
  color: rgba(202, 215, 211, 0.46);
  font-size: 10px;
}

.image-channel-empty strong {
  color: rgba(232, 238, 236, 0.72);
  font-size: 12px;
}

.image-channel-form {
  overflow: hidden;
  border: 1px solid rgba(222, 198, 119, 0.22);
  border-radius: 11px;
  background: rgba(222, 198, 119, 0.035);
}

.image-channel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 12px 13px;
}

.image-channel-form > .primary-btn {
  margin: 0 13px 13px;
}

.image-channel-actions {
  flex-wrap: nowrap;
}

@media (max-width: 980px) {
  .image-channel-summary {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }

  .image-channel-buttons {
    grid-column: 2 / -1;
  }

  .image-channel-details dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#app[data-active-view="setup"] .provider-config-head {
  min-height: 42px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(155, 191, 185, 0.1);
}

#app[data-active-view="setup"] .provider-config-head h3 {
  font-size: 15px;
}

#app[data-active-view="setup"] .setup-field {
  gap: 6px;
  margin: 0;
}

#app[data-active-view="setup"] .setup-field:has(input[type="password"]) {
  grid-column: 1 / -1;
}

#app[data-active-view="setup"] .setup-field > span {
  color: rgba(221, 229, 227, 0.66);
  font-size: 11px;
}

#app[data-active-view="setup"] .setup-field input,
#app[data-active-view="setup"] .setup-field select,
#app[data-active-view="setup"] .video-provider-switch select {
  min-height: 40px;
  border-radius: 9px;
  background: rgba(3, 12, 14, 0.6);
}

#app[data-active-view="setup"] .setup-field small {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.45;
}

#app[data-active-view="setup"] .image-config-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 12px;
}

#app[data-active-view="setup"] .provider-actions {
  justify-content: flex-end;
  min-height: 42px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(155, 191, 185, 0.1);
}

#app[data-active-view="setup"] .provider-actions .text-danger-btn {
  order: -1;
  margin-right: auto;
}

#app[data-active-view="setup"] .provider-actions button {
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

#app[data-active-view="setup"] .topbar-copy > .eyebrow {
  display: none;
}

#app[data-active-view="setup"] .provider-actions .primary-btn {
  border-color: rgba(222, 198, 119, 0.64);
  color: #18170f;
  background: #dec677;
  box-shadow: none;
}

#app[data-active-view="setup"] .provider-test-result {
  min-height: 18px;
  margin: -5px 0 0;
  font-size: 11px;
}

#app[data-active-view="setup"] .video-advanced-config {
  border-radius: 10px;
}

@media (min-width: 821px) {
  #app[data-active-view="setup"] .setup-service-scroll {
    overflow: hidden;
  }
}

@media (max-width: 820px) {
  #app[data-active-view="setup"] .setup-service-scroll {
    display: block;
    padding: 12px;
    overflow: auto;
  }

  .model-service-commandbar {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 10px;
  }

  .model-service-command-status {
    display: none;
  }

  .model-service-command-actions {
    grid-column: 1 / -1;
  }

  .model-service-command-actions button {
    flex: 1;
  }

  .model-service-workspace {
    display: block;
  }

  .model-service-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  .model-service-nav-item {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 58px;
  }

  .model-service-nav-item em {
    grid-column: 2;
  }

  .model-service-nav-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px;
  }

  .model-service-detail-stack {
    overflow: visible;
  }

  #app[data-active-view="setup"] .provider-guide {
    display: block;
    padding: 15px;
  }

  #app[data-active-view="setup"] .provider-model-scope,
  #app[data-active-view="setup"] .provider-capability-list,
  #app[data-active-view="setup"] .provider-external-link {
    display: inline-flex;
    margin-top: 10px;
    margin-right: 8px;
  }

  #app[data-active-view="setup"] .provider-capability-list {
    display: grid;
    width: 100%;
    margin-right: 0;
  }

  #app[data-active-view="setup"] .provider-config {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  #app[data-active-view="setup"] .provider-config > *,
  #app[data-active-view="setup"] .setup-field:has(input[type="password"]) {
    grid-column: 1;
  }

  #app[data-active-view="setup"] .model-family-picker {
    grid-template-columns: 1fr;
  }

  #app[data-active-view="setup"] .image-config-grid,
  #app[data-active-view="setup"] .video-config-pair {
    grid-template-columns: 1fr;
  }

  #app[data-active-view="setup"] .image-channel-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .project-run-output-grid {
    grid-template-columns: 1fr;
  }

  .project-run-output.is-video {
    grid-column: 1;
  }

  .project-run-actions {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .model-service-nav-item {
    transition: none;
  }
}

.video-advanced-config {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
}

.video-advanced-config summary {
  min-height: 38px;
  padding: 11px 13px;
  cursor: pointer;
  color: rgba(225, 239, 235, 0.62);
  font-size: 10px;
  font-weight: 600;
  list-style-position: inside;
}

.video-advanced-config[open] summary {
  border-bottom: 1px solid rgba(126, 228, 223, 0.08);
}

.video-advanced-config-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.video-field-map {
  display: grid;
  gap: 8px;
}

.video-field-map > strong {
  color: rgba(216, 233, 229, 0.46);
  font-size: 9px;
}

.video-field-map > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.video-field-map label {
  display: grid;
  gap: 4px;
}

.video-field-map label span {
  color: rgba(216, 233, 229, 0.34);
  font-size: 8px;
}

.video-field-map input {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(126, 228, 223, 0.11);
  border-radius: 6px;
  color: rgba(238, 248, 245, 0.78);
  background: rgba(4, 11, 15, 0.66);
  font: 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

@media (max-width: 820px) {
  .video-field-map > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.model-test-history {
  display: grid;
}

.model-test-history article {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(120px, 0.6fr) 80px 110px minmax(240px, 1.5fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.075);
}

.model-test-history article:last-child {
  border-bottom: 0;
}

.model-test-history span,
.model-test-history strong,
.model-test-history em,
.model-test-history time,
.model-test-history p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-test-history span,
.model-test-history strong {
  color: rgba(235, 245, 242, 0.72);
  font-size: 9px;
}

.model-test-history em {
  color: #dcbf77;
  font-size: 8px;
  font-style: normal;
}

.model-test-history time,
.model-test-history p {
  color: rgba(216, 233, 229, 0.34);
  font-size: 8px;
}

.model-console-empty,
.model-bulk-empty {
  margin: 0;
  padding: 22px;
  color: rgba(216, 233, 229, 0.38);
  font-size: 10px;
}

.image-template-local-tools {
  display: flex;
  max-width: 620px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.image-template-local-tools code {
  overflow: hidden;
  max-width: 48ch;
  color: rgba(224, 198, 139, 0.66);
  font: 8px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-template-local-tools .text-btn {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 6px;
  font-size: 8px;
}

.model-console-tabs button:focus-visible,
.model-provider-list button:focus-visible,
.model-catalog-filters button:focus-visible,
.model-route-list select:focus-visible,
.model-route-list button:focus-visible {
  outline: 2px solid rgba(185, 216, 207, 0.86);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .model-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-route-list article {
    grid-template-columns: minmax(180px, 0.75fr) minmax(240px, 1.25fr) 110px 64px;
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .setup-service-scroll {
    padding: 14px;
  }

  .model-console-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .model-console-actions {
    grid-column: 1 / -1;
  }

  .model-console-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-console-summary article:nth-child(2) {
    border-right: 0;
  }

  .model-console-summary article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(126, 228, 223, 0.09);
  }

  .model-console-tabs {
    overflow-x: auto;
  }

  .model-console-tabs button {
    flex: 0 0 auto;
  }

  .setup-service-scroll[data-console-tab="providers"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .setup-service-scroll[data-console-tab="providers"] > .model-console-toolbar,
  .setup-service-scroll[data-console-tab="providers"] > .model-console-summary,
  .setup-service-scroll[data-console-tab="providers"] > .model-console-tabs,
  .setup-service-scroll[data-console-tab="providers"] .model-provider-sidebar,
  .setup-service-scroll[data-console-tab="providers"] .setup-provider-band {
    grid-column: 1;
  }

  .model-provider-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-route-list article,
  .model-test-history article {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 14px;
  }

  .model-routes-panel > header,
  .model-catalog-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .model-routes-panel > header p {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .model-console-toolbar,
  .model-console-summary,
  .model-catalog-grid,
  .model-provider-list,
  .setup-service-scroll[data-console-tab="providers"] .provider-config,
  .image-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .model-console-toolbar .setup-overall-state,
  .model-console-actions {
    grid-column: 1;
  }

  .model-console-actions {
    flex-wrap: wrap;
  }

  .model-console-summary article,
  .model-console-summary article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(126, 228, 223, 0.09);
  }

  .model-console-summary article:last-child {
    border-bottom: 0;
  }

  .setup-service-scroll[data-console-tab="providers"] .provider-config > * {
    grid-column: 1;
  }
}

/* Function-led model service setup. The registry remains in the data layer;
   this page only exposes the four model groups people actually configure. */
.setup-service-scroll {
  gap: 12px;
  max-width: 1320px;
  padding: 16px 22px 28px;
}

.model-function-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.11);
  border-radius: 12px;
  background: rgba(5, 13, 17, 0.72);
}

.model-function-overview article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 10px 13px;
  border-right: 1px solid rgba(126, 228, 223, 0.09);
}

.model-function-overview article:last-child {
  border-right: 0;
}

.model-function-overview article > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  background: rgba(126, 228, 223, 0.08);
  color: rgba(153, 220, 212, 0.78);
  font: 700 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.model-function-overview strong,
.model-function-overview small {
  display: block;
}

.model-function-overview strong {
  color: rgba(241, 249, 247, 0.88);
  font-size: 12px;
}

.model-function-overview small,
.model-function-overview em {
  color: rgba(216, 233, 229, 0.42);
  font-size: 9px;
  font-style: normal;
}

.model-function-overview em {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-service-scroll .setup-bulk-test {
  min-height: 68px;
  grid-template-columns: minmax(200px, 0.7fr) auto minmax(360px, 1.3fr);
  gap: 14px;
  padding: 10px 14px;
  border-radius: 12px;
}

.setup-service-scroll .setup-bulk-test-copy h3 {
  margin-top: 2px;
  font-size: 14px;
}

.setup-service-scroll .setup-bulk-test-copy p:last-child {
  margin-top: 3px;
  font-size: 9px;
}

.setup-service-scroll .setup-bulk-test-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-service-scroll .setup-provider-band {
  grid-template-columns: 235px minmax(0, 1fr);
  border-radius: 12px;
  box-shadow: none;
}

.setup-service-scroll .provider-guide {
  padding: 22px 20px;
}

.setup-service-scroll .provider-number {
  top: 14px;
  right: 17px;
  font-size: 42px;
}

.setup-service-scroll .provider-guide h3 {
  margin: 5px 0 8px;
  font-size: 21px;
}

.setup-service-scroll .provider-summary {
  font-size: 12px;
  line-height: 1.6;
}

.provider-model-scope {
  display: grid;
  gap: 4px;
  margin: 18px 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.provider-model-scope span {
  color: rgba(224, 237, 234, 0.45);
  font-size: 9px;
}

.provider-model-scope strong {
  color: rgba(242, 248, 246, 0.86);
  font-size: 11px;
  line-height: 1.5;
}

.setup-service-scroll .provider-external-link {
  min-height: 34px;
  padding-inline: 11px;
  font-size: 10px;
}

.setup-service-scroll .provider-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 11px 14px;
  padding: 18px 20px 20px;
}

.setup-service-scroll .provider-config-head,
.setup-service-scroll .provider-actions,
.setup-service-scroll .provider-test-result,
.setup-service-scroll .image-config-grid,
.setup-service-scroll .video-config-pair,
.setup-service-scroll .video-advanced-config {
  grid-column: 1 / -1;
}

.setup-service-scroll .provider-config-head {
  padding-bottom: 10px;
}

.setup-service-scroll .provider-config-head h3 {
  font-size: 16px;
}

.setup-service-scroll .setup-field {
  gap: 5px;
}

.setup-service-scroll .setup-field input,
.setup-service-scroll .setup-field select,
.setup-service-scroll .video-provider-switch select {
  height: 38px;
  min-height: 38px;
  border-radius: 7px;
  font-size: 11px;
}

.setup-service-scroll .setup-field small {
  font-size: 9px;
  line-height: 1.45;
}

.setup-service-scroll .provider-actions {
  min-height: 36px;
}

.setup-service-scroll .provider-actions .primary-btn,
.setup-service-scroll .provider-actions .ghost-btn,
.setup-service-scroll .provider-actions .text-danger-btn {
  min-height: 36px;
  font-size: 10px;
}

@media (max-width: 1050px) {
  .model-function-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-function-overview article:nth-child(2) {
    border-right: 0;
  }

  .model-function-overview article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(126, 228, 223, 0.09);
  }

  .setup-service-scroll .setup-bulk-test {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setup-service-scroll .setup-bulk-test-items {
    grid-column: 1 / -1;
  }

  .setup-service-scroll .setup-provider-band {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .setup-service-scroll .setup-provider-band,
  .setup-service-scroll .provider-config,
  .model-function-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .model-function-overview article,
  .model-function-overview article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(126, 228, 223, 0.09);
  }

  .model-function-overview article:last-child {
    border-bottom: 0;
  }

  .setup-service-scroll .provider-config > * {
    grid-column: 1;
  }
}

/* ==========================================================================
   Dr.Prompt landing v3 — monochrome, editorial, section-led.
   Purple marks creative intelligence; red marks execution. Everything else
   stays neutral so the product, not decoration, carries the page.
   ========================================================================== */
:root {
  --dp-black: #09090b;
  --dp-ink: #f4f4f1;
  --dp-muted: #9a9a9d;
  --dp-dim: #66666b;
  --dp-line: rgba(244, 244, 241, .16);
  --dp-purple: #9b7bff;
  --dp-red: #f05b67;
}

#app[data-active-view="home"] {
  background: var(--dp-black);
  color: var(--dp-ink);
}

#app[data-active-view="home"] .home-view {
  min-height: 100dvh;
  background: var(--dp-black);
  color: var(--dp-ink);
}

#app[data-active-view="home"] .home-shell {
  width: min(1440px, 100%);
  padding: 0 clamp(22px, 5vw, 76px) 26px;
}

#app[data-active-view="home"] .home-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 74px;
  margin: 0 calc(clamp(22px, 5vw, 76px) * -1);
  padding: 0 clamp(22px, 5vw, 76px);
  border-bottom: 1px solid var(--dp-line);
  background: rgba(9, 9, 11, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

#app[data-active-view="home"] .home-brand { color: var(--dp-ink); }
#app[data-active-view="home"] .home-brand-mark { border-radius: 7px; background: var(--dp-ink); color: var(--dp-black); }
#app[data-active-view="home"] .home-nav-links { display: flex; gap: clamp(14px, 2.8vw, 38px); margin-left: auto; margin-right: clamp(18px, 3vw, 48px); }
#app[data-active-view="home"] .home-nav-links a { color: var(--dp-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: color 180ms ease; }
#app[data-active-view="home"] .home-nav-links a:hover { color: var(--dp-ink); }
#app[data-active-view="home"] .home-nav-actions { gap: 18px; }
#app[data-active-view="home"] .home-text-link { color: var(--dp-muted); }
#app[data-active-view="home"] .home-credit-btn,
#app[data-active-view="home"] .home-primary-btn { background: var(--dp-ink); color: var(--dp-black); }
#app[data-active-view="home"] .home-credit-btn { min-height: 36px; }

#app[data-active-view="home"] .home-sections { display: block; }
#app[data-active-view="home"] .home-section { min-height: min(820px, calc(100dvh - 74px)); padding: clamp(80px, 11vw, 164px) 0; scroll-margin-top: 74px; }
#app[data-active-view="home"] .home-hero { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 8vw, 132px); align-items: center; padding-top: clamp(76px, 10vw, 148px); }
#app[data-active-view="home"] .home-hero-copy { max-width: 570px; }
#app[data-active-view="home"] .home-kicker { margin-bottom: 26px; color: var(--dp-muted); font-size: 10px; letter-spacing: .18em; }
#app[data-active-view="home"] .home-kicker-purple { color: var(--dp-purple); }
#app[data-active-view="home"] .home-kicker-red { color: var(--dp-red); }
#app[data-active-view="home"] .home-hero h1 { max-width: 600px; font-size: clamp(54px, 7.3vw, 108px); line-height: .92; letter-spacing: -.085em; }
#app[data-active-view="home"] .home-hero h1 em { color: var(--dp-purple); font-style: normal; }
#app[data-active-view="home"] .home-hero-subtitle { margin: 24px 0 0; color: var(--dp-ink); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.04em; }
#app[data-active-view="home"] .home-lede { max-width: 420px; margin-top: 18px; color: var(--dp-muted); font-size: 15px; line-height: 1.7; }
#app[data-active-view="home"] .home-primary-btn { min-height: 44px; margin-top: 28px; padding: 0 19px; border-radius: 4px; }
#app[data-active-view="home"] .home-primary-btn span { color: var(--dp-red); }

#app[data-active-view="home"] .home-demo-window { border: 1px solid var(--dp-line); border-radius: 3px; background: #111114; box-shadow: 0 26px 80px rgba(0,0,0,.4); transform: none; }
#app[data-active-view="home"] .home-demo-chrome { min-height: 38px; border-bottom-color: var(--dp-line); color: var(--dp-dim); }
#app[data-active-view="home"] .home-demo-live { color: var(--dp-red); }
#app[data-active-view="home"] .home-demo-canvas { min-height: clamp(360px, 40vw, 560px); background: radial-gradient(circle at 60% 46%, rgba(155,123,255,.2), transparent 27%), linear-gradient(145deg, #1c1b25, #0f0f12 64%); }
#app[data-active-view="home"] .home-demo-grid { opacity: .12; }
#app[data-active-view="home"] .home-demo-scan { background: linear-gradient(90deg, transparent, rgba(240,91,103,.85), transparent); box-shadow: 0 0 18px rgba(240,91,103,.4); }
#app[data-active-view="home"] .home-demo-copy span { color: var(--dp-purple); }
#app[data-active-view="home"] .home-demo-prompt-card { border-color: var(--dp-line); border-radius: 3px; background: rgba(9,9,11,.82); box-shadow: none; }
#app[data-active-view="home"] .home-demo-progress i { background: var(--dp-red); }
#app[data-active-view="home"] .home-demo-stage span { color: var(--dp-purple); }
#app[data-active-view="home"] .home-demo-caption { color: var(--dp-dim); }
#app[data-active-view="home"] .home-demo-caption span:last-child { color: var(--dp-red); }

#app[data-active-view="home"] .home-entry-nav { grid-column: 1 / -1; border-color: var(--dp-line); }
#app[data-active-view="home"] .home-entry { min-height: 106px; border-right-color: var(--dp-line); color: var(--dp-ink); }
#app[data-active-view="home"] .home-entry > span { color: var(--dp-dim); }
#app[data-active-view="home"] .home-entry small { color: var(--dp-muted); }
#app[data-active-view="home"] .home-entry b { color: var(--dp-red); }
#app[data-active-view="home"] .home-entry:hover strong { color: var(--dp-purple); }

#app[data-active-view="home"] .home-feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(44px, 10vw, 160px); align-items: center; border-top: 1px solid var(--dp-line); }
#app[data-active-view="home"] .home-feature-copy { max-width: 510px; }
#app[data-active-view="home"] .home-feature h2 { margin: 0; max-width: 560px; font-size: clamp(42px, 6vw, 84px); line-height: .96; letter-spacing: -.075em; }
#app[data-active-view="home"] .home-feature-copy > p:not(.home-kicker) { max-width: 430px; margin: 24px 0 0; color: var(--dp-muted); font-size: 16px; line-height: 1.7; }
#app[data-active-view="home"] .home-quick-compose { padding: 26px 0 0; border-top: 1px solid var(--dp-line); }
#app[data-active-view="home"] .home-quick-compose label { display: block; margin-bottom: 14px; color: var(--dp-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
#app[data-active-view="home"] .home-quick-compose textarea { width: 100%; min-height: 190px; resize: vertical; border: 0; border-bottom: 1px solid var(--dp-line); outline: 0; background: transparent; color: var(--dp-ink); font-size: clamp(19px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -.04em; }
#app[data-active-view="home"] .home-quick-compose textarea::placeholder { color: var(--dp-dim); }
#app[data-active-view="home"] .home-quick-compose textarea:focus { border-bottom-color: var(--dp-purple); }
#app[data-active-view="home"] .home-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#app[data-active-view="home"] .home-compose-foot span { color: var(--dp-dim); font-size: 12px; }
#app[data-active-view="home"] .home-outline-btn { min-height: 44px; margin-top: 28px; padding: 0 17px; border: 1px solid var(--dp-line); border-radius: 4px; color: var(--dp-ink); }
#app[data-active-view="home"] .home-outline-btn:hover { border-color: var(--dp-purple); color: var(--dp-purple); }

#app[data-active-view="home"] .home-engine-map { position: relative; padding: 46px 0 0; }
#app[data-active-view="home"] .home-engine-line { position: absolute; top: 69px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, var(--dp-purple), var(--dp-line) 48%, var(--dp-red)); }
#app[data-active-view="home"] .home-engine-node { position: relative; display: inline-flex; width: 16.1%; min-height: 132px; margin-right: 2.3%; flex-direction: column; justify-content: flex-end; gap: 7px; color: var(--dp-ink); }
#app[data-active-view="home"] .home-engine-node:last-of-type { margin-right: 0; }
#app[data-active-view="home"] .home-engine-node::before { content: ""; position: absolute; top: 18px; left: 0; width: 10px; height: 10px; border: 2px solid var(--dp-ink); border-radius: 50%; background: var(--dp-black); }
#app[data-active-view="home"] .home-engine-node.is-purple::before { border-color: var(--dp-purple); box-shadow: 0 0 0 5px rgba(155,123,255,.12); }
#app[data-active-view="home"] .home-engine-node.is-red::before { border-color: var(--dp-red); box-shadow: 0 0 0 5px rgba(240,91,103,.12); }
#app[data-active-view="home"] .home-engine-node span { color: var(--dp-dim); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
#app[data-active-view="home"] .home-engine-node b { font-size: 15px; }
#app[data-active-view="home"] .home-engine-node small { color: var(--dp-muted); font-size: 11px; }
#app[data-active-view="home"] .home-engine-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 54px; color: var(--dp-muted); font-size: 10px; letter-spacing: .12em; }
#app[data-active-view="home"] .home-engine-foot span::before { content: "＋"; margin-right: 7px; color: var(--dp-purple); }

#app[data-active-view="home"] .home-library-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--dp-line); border-bottom: 1px solid var(--dp-line); }
#app[data-active-view="home"] .home-library-wall span { padding: 20px 0; border-bottom: 1px solid var(--dp-line); color: var(--dp-muted); font-size: 11px; letter-spacing: .11em; }
#app[data-active-view="home"] .home-library-wall span:nth-child(3n+2), #app[data-active-view="home"] .home-library-wall span:nth-child(3n+3) { padding-left: 18px; border-left: 1px solid var(--dp-line); }
#app[data-active-view="home"] .home-library-wall strong { margin-top: 28px; font-size: clamp(100px, 17vw, 230px); line-height: .8; letter-spacing: -.1em; }
#app[data-active-view="home"] .home-library-wall strong span { display: inline; padding: 0; border: 0; color: var(--dp-red); font-size: .35em; vertical-align: top; }
#app[data-active-view="home"] .home-library-wall small { align-self: end; padding: 0 0 10px 24px; border-left: 1px solid var(--dp-line); color: var(--dp-muted); font-size: 12px; line-height: 1.5; }

#app[data-active-view="home"] .home-footer { border-top: 1px solid var(--dp-line); color: var(--dp-dim); }
#app[data-active-view="home"] .home-footer span:first-child { color: var(--dp-ink); }
#app[data-active-view="home"] .home-reveal { animation: dp-home-reveal 700ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes dp-home-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
  #app[data-active-view="home"] .home-nav-links { display: none; }
  #app[data-active-view="home"] .home-hero,
  #app[data-active-view="home"] .home-feature { grid-template-columns: 1fr; gap: 54px; }
  #app[data-active-view="home"] .home-section { min-height: auto; padding: 88px 0; }
  #app[data-active-view="home"] .home-hero { padding-top: 76px; }
  #app[data-active-view="home"] .home-engine-node { width: 31%; margin-bottom: 28px; }
  #app[data-active-view="home"] .home-engine-line { display: none; }
}
@media (max-width: 520px) {
  #app[data-active-view="home"] .home-nav { min-height: 64px; }
  #app[data-active-view="home"] .home-nav-actions { gap: 10px; }
  #app[data-active-view="home"] .home-credit-btn { padding: 0 11px; font-size: 11px; }
  #app[data-active-view="home"] .home-hero h1 { font-size: clamp(48px, 15vw, 72px); }
  #app[data-active-view="home"] .home-demo-canvas { min-height: 330px; }
  #app[data-active-view="home"] .home-demo-prompt-card { width: 58%; }
  #app[data-active-view="home"] .home-entry-nav { grid-template-columns: repeat(2, 1fr); }
  #app[data-active-view="home"] .home-entry { min-height: 110px; padding-left: 0; }
  #app[data-active-view="home"] .home-entry:not(:first-child) { padding-left: 14px; }
  #app[data-active-view="home"] .home-compose-foot { align-items: flex-start; flex-direction: column; }
  #app[data-active-view="home"] .home-compose-foot .home-primary-btn { margin-top: 8px; }
  #app[data-active-view="home"] .home-engine-node { width: 46%; }
  #app[data-active-view="home"] .home-library-wall { grid-template-columns: repeat(2, 1fr); }
  #app[data-active-view="home"] .home-library-wall span:nth-child(3n+2), #app[data-active-view="home"] .home-library-wall span:nth-child(3n+3) { padding-left: 0; border-left: 0; }
  #app[data-active-view="home"] .home-library-wall span:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--dp-line); }
  #app[data-active-view="home"] .home-library-wall strong { grid-column: 1 / -1; margin-top: 42px; font-size: 130px; }
  #app[data-active-view="home"] .home-library-wall small { grid-column: 1 / -1; padding: 18px 0 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { #app[data-active-view="home"] .home-reveal { animation: none; } }

/* Final palette and overflow guard. Keep functional DOM/contracts intact while
   removing the legacy teal/gold/green treatment from the overseas surface. */
:root {
  --ui-bg: #f2f2f0;
  --ui-surface: #ffffff;
  --ui-surface-muted: #e9e9e7;
  --ui-ink: #101014;
  --ui-ink-soft: #55555b;
  --ui-ink-muted: #77777e;
  --ui-line: rgba(16, 16, 20, .16);
  --ui-night: #0b0b0e;
  --ui-night-soft: #17171c;
  --ui-accent: #7658e8;
  --ui-accent-soft: rgba(118, 88, 232, .16);
  --ui-star: #9b7bff;
  --ui-star-soft: rgba(155, 123, 255, .16);
  --ui-success: #7658e8;
  --ui-warning: #d94b5b;
  --ui-danger: #d94b5b;
  --ui-shadow: 0 16px 42px rgba(16, 16, 20, .08);
  --ui-shadow-soft: 0 8px 24px rgba(16, 16, 20, .055);
}

body { background: var(--ui-bg); color: var(--ui-ink); }
body::before { background-image: linear-gradient(rgba(16,16,20,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,20,.018) 1px, transparent 1px); }

#app[data-active-view="home"] .home-shell,
#app[data-active-view="home"] .home-section,
#app[data-active-view="home"] .home-hero-copy,
#app[data-active-view="home"] .home-feature-copy { min-width: 0; }
#app[data-active-view="home"] .home-entry-nav { background: transparent; }
#app[data-active-view="home"] .home-entry { background: transparent; }

#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel {
  border-color: #2b2b32;
  background: #0d0d10;
  color: #f4f4f1;
  box-shadow: none;
}

#app:not([data-active-view="home"]) .composer-card .idea-input,
#app:not([data-active-view="home"]) .composer-card textarea,
#app:not([data-active-view="home"]) .composer-card input,
#app:not([data-active-view="home"]) .output-panel textarea {
  border-color: #303038;
  background: #111115;
  color: #f4f4f1;
}

#app:not([data-active-view="home"]) .composer-card .idea-input::placeholder,
#app:not([data-active-view="home"]) .composer-card textarea::placeholder { color: #818188; }
#app:not([data-active-view="home"]) .composer-card .composer-first-frame-prompt-toggle,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector button,
#app:not([data-active-view="home"]) .composer-card .composer-meta-trigger,
#app:not([data-active-view="home"]) .composer-card .composer-launcher,
#app:not([data-active-view="home"]) .composer-card .composer-reference-strip {
  border-color: #303038;
  background: #151519;
  color: #dedee2;
}
#app:not([data-active-view="home"]) .composer-card .composer-send-btn,
#app:not([data-active-view="home"]) .composer-card #run-demo-btn {
  background: var(--ui-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(118,88,232,.14);
}
#app:not([data-active-view="home"]) .composer-card .composer-send-btn:hover,
#app:not([data-active-view="home"]) .composer-card #run-demo-btn:hover { background: #8d73f2; }
#app:not([data-active-view="home"]) .output-panel h2,
#app:not([data-active-view="home"]) .output-panel h3,
#app:not([data-active-view="home"]) .output-panel strong,
#app:not([data-active-view="home"]) .output-panel .panel-head,
#app:not([data-active-view="home"]) .output-panel .prompt-head { color: #f4f4f1; }
#app:not([data-active-view="home"]) .output-panel p,
#app:not([data-active-view="home"]) .output-panel small,
#app:not([data-active-view="home"]) .output-panel .output-meta,
#app:not([data-active-view="home"]) .output-panel .output-status { color: #9a9a9d; }
#app:not([data-active-view="home"]) .output-panel .ghost-btn,
#app:not([data-active-view="home"]) .output-panel .secondary-btn,
#app:not([data-active-view="home"]) .output-panel .copy-btn {
  border-color: #36363e;
  background: #17171c;
  color: #d8d8dd;
}
#app:not([data-active-view="home"]) .output-panel .ghost-btn:hover,
#app:not([data-active-view="home"]) .output-panel .secondary-btn:hover,
#app:not([data-active-view="home"]) .output-panel .copy-btn:hover { border-color: var(--ui-accent); color: #fff; }

/* Styles: one category per row; the category label gets its own full-width line. */
.composer-style-tray .generic-style-groups {
  display: grid !important;
  grid-template-columns: 1fr !important;
  column-count: initial !important;
  column-gap: 0 !important;
  gap: 8px !important;
  width: 100% !important;
}

.composer-style-tray .generic-style-group {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 10px !important;
  margin: 0 !important;
  break-inside: auto !important;
}

.composer-style-tray .generic-style-group-head {
  min-width: 0 !important;
  width: 100% !important;
  justify-self: start !important;
}

.composer-style-tray .generic-style-row {
  min-width: 0 !important;
}

.composer-style-tray .style-recommendation-option.chip {
  min-height: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  white-space: nowrap !important;
}

.composer-style-tray .style-recommendation-option > span {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.composer-style-tray .style-recommendation-option strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.composer-style-tray .style-recommendation-option em {
  flex: 0 0 auto !important;
}

@media (max-width: 780px) {
  .composer-style-tray .generic-style-group {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* Keep imaging-mode detail rows consistent with General Styles. */
.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  row-gap: 10px !important;
}

.composer-style-tray .style-column-head {
  width: 100% !important;
  justify-self: start !important;
}

.composer-style-tray .style-column > .style-chip-row,
.composer-style-tray .style-column > .generic-style-groups {
  width: 100% !important;
}

/* Final cascade lock for the overseas release. This block intentionally sits
   at EOF so legacy cockpit rules cannot reintroduce gold, cyan, or light-mode
   surfaces after the functional UI has rendered. */
#app:not([data-active-view="home"]) {
  --accent: #7658e8;
  --accent-soft: rgba(118, 88, 232, .16);
  --gold: #7658e8;
  --gold-soft: rgba(118, 88, 232, .14);
  --teal: #9b7bff;
  --teal-soft: rgba(155, 123, 255, .14);
  --reactor-accent: #7658e8;
  --reactor-accent-soft: rgba(118, 88, 232, .15);
}

#app:not([data-active-view="home"]),
#app:not([data-active-view="home"]) > .shell,
#app:not([data-active-view="home"]) .view {
  min-width: 0;
  max-width: 100%;
  background: #09090b;
  color: #f4f4f1;
}

#app:not([data-active-view="home"]) .reactor-shell,
#app:not([data-active-view="home"]) .reactor-flow-map,
#app:not([data-active-view="home"]) .reactor-core,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel {
  min-width: 0;
  max-width: 100%;
  border-color: #292930 !important;
  background: #0d0d10 !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .reactor-flow-map::before,
#app:not([data-active-view="home"]) .reactor-flow-map::after,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-halo,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-ring,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-scanline {
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .reactor-core-top,
#app:not([data-active-view="home"]) .composer-stage,
#app:not([data-active-view="home"]) .composer-bottombar,
#app:not([data-active-view="home"]) .reactor-core-status {
  border-color: #292930 !important;
  background: transparent !important;
}

/* The six-node Creative Engine path stays visible, but uses the product's
   monochrome, purple-selected, red-warning state language. */
#app[data-creation-mode="fast"] .fast-flow-rail {
  min-width: 0;
  max-width: 100%;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: rgba(118, 88, 232, .5) transparent;
}

#app[data-creation-mode="fast"] .fast-flow-rail::before,
#app[data-creation-mode="fast"] .fast-flow-rail::after {
  background: rgba(118, 88, 232, .5) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: #b8b8c0 !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node::before,
#app[data-creation-mode="fast"] .fast-flow-node::after {
  content: none !important;
  animation: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  border-color: rgba(118, 88, 232, .58) !important;
  background: #17151d !important;
  background-image: none !important;
  color: #c4b9ff !important;
  box-shadow: 0 0 0 4px rgba(118, 88, 232, .08) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node strong,
#app[data-creation-mode="fast"] .fast-flow-node small {
  color: inherit !important;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover,
#app[data-creation-mode="fast"] .fast-flow-node[data-status="running"],
#app[data-creation-mode="fast"] .fast-flow-node[data-status="done"] {
  color: #f4f4f1 !important;
}

#app[data-creation-mode="fast"] .fast-flow-node:hover > span,
#app[data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: #7658e8 !important;
  background: #241b38 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(118, 88, 232, .14) !important;
}

#app[data-creation-mode="fast"] .fast-flow-node[data-status="error"] > span {
  border-color: rgba(217, 75, 91, .78) !important;
  background: #241317 !important;
  color: #ffd9de !important;
  box-shadow: 0 0 0 4px rgba(217, 75, 91, .1) !important;
}

#app[data-creation-mode="fast"] .review-console,
#app[data-creation-mode="fast"] .review-skill-chip {
  border-color: #303038 !important;
  background: #111115 !important;
  background-image: none !important;
  color: #b8b8c0 !important;
  box-shadow: none !important;
}

#app[data-creation-mode="fast"] .review-console[data-status="running"],
#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"] {
  border-color: rgba(118, 88, 232, .62) !important;
  background: #17151d !important;
  color: #f4f4f1 !important;
  box-shadow: 0 0 0 1px rgba(118, 88, 232, .12) !important;
  animation: none !important;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"]::after {
  content: none !important;
  animation: none !important;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="running"] small::before {
  background: #9b7bff !important;
  box-shadow: 0 0 8px rgba(155, 123, 255, .7) !important;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-status="error"] {
  border-color: rgba(217, 75, 91, .68) !important;
  background: #241317 !important;
  color: #ffd9de !important;
}

/* Quick Start owns the compact style control; Creative Engine keeps the
   detailed launcher and its full disclosure panel. */
#app[data-creation-mode="fast"] .quick-start-style-dock {
  display: none !important;
}

#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"] {
  border-color: #3a354b !important;
  background: #17151d !important;
  color: #ded9ff !important;
}

#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"]:hover,
#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"]:focus-visible {
  border-color: #7658e8 !important;
  background: #1e192b !important;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-head,
#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
  min-width: 0;
  max-width: 100%;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
  overflow-x: visible !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
  white-space: normal !important;
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    display: flex !important;
    gap: 10px;
    padding: 14px 12px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: stretch;
  }

  #app[data-creation-mode="fast"] .fast-flow-node {
    flex: 0 0 132px;
    grid-template-rows: 48px auto auto !important;
    min-height: 112px;
  }

  #app[data-creation-mode="fast"] .fast-flow-node > span {
    width: 48px !important;
    height: 48px !important;
    font-size: 11px;
  }

  #app[data-creation-mode="fast"] .review-skill-grid {
    display: flex !important;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding-bottom: 5px;
    overscroll-behavior-x: contain;
  }

  #app[data-creation-mode="fast"] .review-skill-chip {
    flex: 0 0 124px;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Prompt Library rows stay dense; the editor remains the place for full text. */
#app:not([data-active-view="home"]) .template-choice-grid {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#app:not([data-active-view="home"]) .template-choice-card {
  min-width: 0;
  min-height: 0;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid #2b2b32 !important;
  border-radius: 5px !important;
  background: #111115 !important;
  background-image: none !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .template-choice-card:hover,
#app:not([data-active-view="home"]) .template-choice-card.active {
  border-color: rgba(118, 88, 232, .72) !important;
  background: #17151d !important;
  box-shadow: none !important;
}

#app:not([data-active-view="home"]) .template-choice-body {
  min-height: 0 !important;
}

#app:not([data-active-view="home"]) .template-choice-body h3 {
  margin-bottom: 5px !important;
  color: #f4f4f1 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

#app:not([data-active-view="home"]) .template-choice-body p {
  color: #9a9a9d !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
}

#app:not([data-active-view="home"]) .template-choice-facts {
  border-color: #292930 !important;
  background: #292930 !important;
}

#app:not([data-active-view="home"]) .template-choice-facts > span {
  padding: 7px 8px !important;
  background: #151519 !important;
  color: #d8d8dd !important;
  font-size: 10px !important;
}

#app:not([data-active-view="home"]) .template-choice-facts small,
#app:not([data-active-view="home"]) .template-choice-card .template-tag {
  color: #9a9a9d !important;
  font-size: 9px !important;
}

#app:not([data-active-view="home"]) .template-choice-card .template-meta {
  display: flex;
  min-height: 20px;
  gap: 4px;
  overflow: hidden;
}

#app:not([data-active-view="home"]) .template-choice-card .template-tag {
  max-width: 33%;
  overflow: hidden;
  border-color: #303038 !important;
  background: #17171c !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .template-choice-actions {
  gap: 6px !important;
}

#app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
#app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
  min-height: 30px !important;
  padding-inline: 8px !important;
  font-size: 10px !important;
}

@media (min-width: 1181px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app:not([data-active-view="home"]) .template-choice-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
  #app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
    width: 100%;
  }
}

/* Run History is a readable text log, with no image-like status tiles. */
#app[data-active-view="logs"] .project-log-toolbar,
#app[data-active-view="logs"] .project-log-selection-bar,
#app[data-active-view="logs"] .project-log-card,
#app[data-active-view="logs"] .project-log-empty-copy {
  border-color: #292930 !important;
  background: #111115 !important;
  background-image: none !important;
  color: #f4f4f1 !important;
  box-shadow: none !important;
}

#app[data-active-view="logs"] .project-log-toolbar h2,
#app[data-active-view="logs"] .project-log-toolbar p,
#app[data-active-view="logs"] .project-log-toolbar label,
#app[data-active-view="logs"] .project-log-toolbar label > span,
#app[data-active-view="logs"] .project-log-toolbar .eyebrow,
#app[data-active-view="logs"] .project-log-summary,
#app[data-active-view="logs"] .project-log-card-copy h3,
#app[data-active-view="logs"] .project-log-empty-copy strong {
  color: #f4f4f1 !important;
}

#app[data-active-view="logs"] .project-log-toolbar p:last-child,
#app[data-active-view="logs"] .project-log-card-copy > div:first-child,
#app[data-active-view="logs"] .project-log-card-copy p,
#app[data-active-view="logs"] .project-log-card-meta,
#app[data-active-view="logs"] .project-log-empty-copy {
  color: #9a9a9d !important;
}

#app[data-active-view="logs"] .project-log-card {
  border-left: 0 !important;
  border-right: 0 !important;
}

#app[data-active-view="logs"] .project-log-card-open:hover {
  background: #17171c !important;
}

#app[data-active-view="logs"] .project-log-status-mark,
#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border: 1px solid #303038 !important;
  background: #17171c !important;
  color: #b8b8c0 !important;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border-color: rgba(217, 75, 91, .5) !important;
  color: #ffb9c1 !important;
}

#app[data-active-view="logs"] .project-log-card-open > strong {
  color: #9b7bff !important;
}

@media (max-width: 640px) {
  #app[data-active-view="logs"] .project-log-page {
    padding-inline: 14px;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    min-height: 92px;
    padding-block: 14px;
  }
}

/* Release polish: keep the existing workflow DOM and states, but remove the
   legacy gold/cyan cockpit treatment from the overseas web surface. The
   workflow remains intentionally visible; only its visual language changes. */
#app:not([data-active-view="home"]) {
  --accent: #7658e8;
  --accent-soft: rgba(118, 88, 232, .16);
  --gold: #7658e8;
  --gold-soft: rgba(118, 88, 232, .14);
  --teal: #9b7bff;
  --teal-soft: rgba(155, 123, 255, .14);
  --reactor-accent: #7658e8;
  --reactor-accent-soft: rgba(118, 88, 232, .15);
}

#app:not([data-active-view="home"]) .reactor-shell,
#app:not([data-active-view="home"]) .reactor-flow-map,
#app:not([data-active-view="home"]) .reactor-core,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel {
  border-color: #292930;
  background: #0d0d10;
  box-shadow: none;
}

#app:not([data-active-view="home"]) .reactor-flow-map {
  background: #0d0d10;
  background-image: none;
  isolation: isolate;
}

#app:not([data-active-view="home"]) .reactor-flow-map::before,
#app:not([data-active-view="home"]) .reactor-flow-map::after,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-halo,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-ring,
#app:not([data-active-view="home"]) .reactor-flow-map .reactor-scanline {
  opacity: 0;
  box-shadow: none;
  background-image: none;
}

#app:not([data-active-view="home"]) .reactor-core {
  border-color: #303038;
  background: #0f0f13;
}

#app:not([data-active-view="home"]) .reactor-core-top,
#app:not([data-active-view="home"]) .composer-stage,
#app:not([data-active-view="home"]) .composer-bottombar,
#app:not([data-active-view="home"]) .reactor-core-status {
  border-color: #292930;
  background: transparent;
}

#app:not([data-active-view="home"]) .reactor-node,
#app:not([data-active-view="home"]) .fast-flow-node,
#app:not([data-active-view="home"]) .review-skill-chip {
  border-color: #303038;
  background: #151519;
  color: #b8b8c0;
  box-shadow: none;
}

#app:not([data-active-view="home"]) .reactor-node:not(:disabled):hover,
#app:not([data-active-view="home"]) .fast-flow-node:hover,
#app:not([data-active-view="home"]) .review-skill-chip:not(:disabled):hover,
#app:not([data-active-view="home"]) .reactor-node[data-status="running"],
#app:not([data-active-view="home"]) .fast-flow-node[data-status="running"],
#app:not([data-active-view="home"]) .review-skill-chip[data-status="running"] {
  border-color: rgba(118, 88, 232, .78);
  background: #1a1724;
  color: #f4f4f1;
  box-shadow: 0 0 0 2px rgba(118, 88, 232, .12);
}

#app:not([data-active-view="home"]) .reactor-node[data-status="done"],
#app:not([data-active-view="home"]) .fast-flow-node[data-status="done"],
#app:not([data-active-view="home"]) .review-skill-chip[data-status="done"] {
  border-color: rgba(118, 88, 232, .48);
  background: #17151d;
  color: #d8d1ff;
}

#app:not([data-active-view="home"]) .reactor-node[data-status="error"],
#app:not([data-active-view="home"]) .fast-flow-node[data-status="error"],
#app:not([data-active-view="home"]) .review-skill-chip[data-status="error"] {
  border-color: rgba(217, 75, 91, .7);
  background: #241317;
  color: #ffd9de;
}

#app:not([data-active-view="home"]) .reactor-node span,
#app:not([data-active-view="home"]) .fast-flow-node > span,
#app:not([data-active-view="home"]) .review-skill-chip > span {
  color: #9b7bff;
}

#app:not([data-active-view="home"]) .fast-flow-node strong,
#app:not([data-active-view="home"]) .fast-flow-node small,
#app:not([data-active-view="home"]) .review-skill-chip strong,
#app:not([data-active-view="home"]) .review-skill-chip small {
  color: inherit;
}

#app:not([data-active-view="home"]) .flow-line,
#app:not([data-active-view="home"]) .flow-bead,
#app:not([data-active-view="home"]) .fast-flow-rail::before,
#app:not([data-active-view="home"]) .fast-flow-rail::after {
  stroke: rgba(118, 88, 232, .5);
  background: rgba(118, 88, 232, .5);
  box-shadow: none;
}

#app:not([data-active-view="home"]) .fast-flow-node::before,
#app:not([data-active-view="home"]) .fast-flow-node::after,
#app:not([data-active-view="home"]) .review-skill-chip[data-status="running"]::after {
  content: none;
  animation: none;
}

#app:not([data-active-view="home"]) .review-console[data-status="running"] {
  border-color: rgba(118, 88, 232, .5) !important;
  box-shadow: 0 0 0 1px rgba(118, 88, 232, .12) !important;
  animation: none;
}

#app:not([data-active-view="home"]) .review-skill-chip[data-status="running"] small::before {
  background: #9b7bff;
  box-shadow: 0 0 8px rgba(155, 123, 255, .72);
}

/* The compact style dock is the single inline style entry point. Creative
   Engine keeps its detailed Style tray launcher above the editor, while the
   duplicate dock is hidden outside Quick Start. */
#app[data-creation-mode="fast"] .quick-start-style-dock {
  display: none !important;
}

#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"] {
  border-color: #3a354b;
  background: #17151d;
  color: #ded9ff;
}

#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"]:hover,
#app:not([data-active-view="home"]) .composer-launcher[data-composer-panel="styles"]:focus-visible {
  border-color: var(--ui-accent);
  background: #1e192b;
}

/* Keep the node rail inside the page on narrow screens. It is the only
   horizontal scroller; the document itself must never become wider than the
   viewport. */
#app:not([data-active-view="home"]),
#app:not([data-active-view="home"]) > .shell,
#app:not([data-active-view="home"]) .view,
#app:not([data-active-view="home"]) .workbench-grid,
#app:not([data-active-view="home"]) .setup-panel,
#app:not([data-active-view="home"]) .composer-shell,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel {
  min-width: 0;
  max-width: 100%;
}

#app[data-creation-mode="fast"] .fast-flow-rail,
#app[data-creation-mode="fast"] .review-skill-grid {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(118, 88, 232, .5) transparent;
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    display: flex !important;
    gap: 10px;
    padding: 14px 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
  }

  #app[data-creation-mode="fast"] .fast-flow-node {
    flex: 0 0 132px;
    grid-template-rows: 48px auto auto;
    min-height: 112px;
  }

  #app[data-creation-mode="fast"] .fast-flow-node > span {
    width: 48px;
    height: 48px;
    font-size: 11px;
  }

  #app[data-creation-mode="fast"] .review-skill-grid {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  #app[data-creation-mode="fast"] .review-skill-chip {
    flex: 0 0 124px;
  }
}

/* Output actions wrap into a second line on mobile instead of forcing the
   prompt card wider than the viewport. */
#app:not([data-active-view="home"]) .prompt-stage-card .prompt-head,
#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
  min-width: 0;
  max-width: 100%;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
  overflow-x: visible;
  flex-wrap: wrap;
  white-space: normal;
}

#app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
  white-space: normal;
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  #app:not([data-active-view="home"]) .prompt-stage-card .prompt-toolbar .small {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Prompt Library: keep metadata useful without making every template a tall
   dashboard card. The full prompt remains available in the editor. */
#app:not([data-active-view="home"]) .template-choice-card {
  align-content: start;
  min-height: 0;
}

#app:not([data-active-view="home"]) .template-choice-body {
  min-height: 0;
}

#app:not([data-active-view="home"]) .template-choice-facts {
  min-height: 0;
}

@media (min-width: 1181px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #app:not([data-active-view="home"]) .template-choice-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  #app:not([data-active-view="home"]) .template-choice-body h3 {
    font-size: 14px;
  }

  #app:not([data-active-view="home"]) .template-choice-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app:not([data-active-view="home"]) .template-choice-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
  #app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
    width: 100%;
  }
}

/* Run History is a text log in this release: no thumbnail-like status tiles,
   and no light surfaces inside the dark workspace. */
#app[data-active-view="logs"] .project-log-toolbar,
#app[data-active-view="logs"] .project-log-selection-bar,
#app[data-active-view="logs"] .project-log-card,
#app[data-active-view="logs"] .project-log-empty-copy {
  border-color: #292930;
  background: #111115;
  color: #f4f4f1;
  box-shadow: none;
}

#app[data-active-view="logs"] .project-log-card {
  border-left: 0;
  border-right: 0;
}

#app[data-active-view="logs"] .project-log-card-open:hover {
  background: #17171c;
}

#app[data-active-view="logs"] .project-log-status-mark,
#app[data-active-view="logs"] .project-log-status-mark[data-tone="good"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border: 1px solid #303038;
  background: #17171c;
  color: #b8b8c0;
}

#app[data-active-view="logs"] .project-log-status-mark[data-tone="warning"],
#app[data-active-view="logs"] .project-log-status-mark[data-tone="error"] {
  border-color: rgba(217, 75, 91, .5);
  color: #ffb9c1;
}

#app[data-active-view="logs"] .project-log-card-copy > div:first-child,
#app[data-active-view="logs"] .project-log-card-meta,
#app[data-active-view="logs"] .project-log-card-copy p {
  color: #9a9a9d;
}

#app[data-active-view="logs"] .project-log-card-copy h3 {
  color: #f4f4f1;
}

#app[data-active-view="logs"] .project-log-card-open > strong {
  color: #9b7bff;
}

@media (max-width: 640px) {
  #app[data-active-view="logs"] .project-log-page {
    padding-inline: 14px;
  }

  #app[data-active-view="logs"] .project-log-card-open {
    min-height: 92px;
    padding-block: 14px;
  }
}

/* End-of-file contrast lock for the visible creation controls. */
#app:not([data-active-view="home"]) .quick-start-wheel-trigger { border-color: #3a3a43 !important; background: #151519 !important; color: #f4f4f1 !important; box-shadow: none !important; }
#app:not([data-active-view="home"]) .quick-start-wheel-trigger:hover,
#app:not([data-active-view="home"]) .quick-start-style-dock.is-open .quick-start-wheel-trigger { border-color: var(--ui-accent) !important; background: #19171f !important; color: #ffffff !important; box-shadow: 0 0 0 3px rgba(118,88,232,.12) !important; }
#app:not([data-active-view="home"]) .quick-start-wheel-trigger small { color: #9a9a9d !important; }
#app:not([data-active-view="home"]) .quick-start-wheel-orbit { border-color: rgba(155,123,255,.44) !important; }
#app:not([data-active-view="home"]) .quick-start-wheel-orbit i { background: var(--ui-accent) !important; box-shadow: 0 0 8px rgba(155,123,255,.66) !important; }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle { opacity: 1; border-color: #303038; background: #151519; color: #f4f4f1; }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle input { accent-color: var(--ui-accent); }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy strong { color: #f4f4f1 !important; }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy small,
#app:not([data-active-view="home"]) .composer-first-frame-size-control > span { color: #9a9a9d !important; }
#app:not([data-active-view="home"]) .composer-first-frame-size-control { border-color: #303038; background: #151519; }
#app:not([data-active-view="home"]) .first-frame-size-selector button.active,
#app:not([data-active-view="home"]) .first-frame-size-selector button[aria-checked="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: #ffffff; }
#app:not([data-active-view="home"]) .primary-btn,
#app:not([data-active-view="home"]) .composer-send-btn { border-color: var(--ui-accent); background: var(--ui-accent); color: #ffffff; }
#app:not([data-active-view="home"]) .primary-btn:hover,
#app:not([data-active-view="home"]) .composer-send-btn:hover { background: #8d73f2; color: #ffffff; }

/* Remove the last legacy gold/cyan treatments from the visible creation
   controls. These selectors preserve the existing interaction surfaces. */
#app:not([data-active-view="home"]) .quick-start-wheel-trigger {
  border-color: #3a3a43;
  background: #151519;
  color: #f4f4f1;
  box-shadow: none;
}
#app:not([data-active-view="home"]) .quick-start-wheel-trigger:hover,
#app:not([data-active-view="home"]) .quick-start-style-dock.is-open .quick-start-wheel-trigger {
  border-color: var(--ui-accent);
  background: #19171f;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(118,88,232,.12);
}
#app:not([data-active-view="home"]) .quick-start-wheel-trigger small { color: #9a9a9d; }
#app:not([data-active-view="home"]) .quick-start-wheel-orbit { border-color: rgba(155,123,255,.44); }
#app:not([data-active-view="home"]) .quick-start-wheel-orbit i { background: var(--ui-accent); box-shadow: 0 0 8px rgba(155,123,255,.66); }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle {
  opacity: 1;
  border-color: #303038;
  background: #151519;
  color: #f4f4f1;
}
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle input { accent-color: var(--ui-accent); }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy strong { color: #f4f4f1; }
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy small,
#app:not([data-active-view="home"]) .composer-first-frame-size-control > span { color: #9a9a9d; }
#app:not([data-active-view="home"]) .composer-first-frame-size-control {
  border-color: #303038;
  background: #151519;
}
#app:not([data-active-view="home"]) .first-frame-size-selector button.active,
#app:not([data-active-view="home"]) .first-frame-size-selector button[aria-checked="true"] {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #ffffff;
}
#app:not([data-active-view="home"]) .primary-btn,
#app:not([data-active-view="home"]) .composer-send-btn {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #ffffff;
}
#app:not([data-active-view="home"]) .primary-btn:hover,
#app:not([data-active-view="home"]) .composer-send-btn:hover { background: #8d73f2; color: #ffffff; }

@media (max-width: 520px) {
  #app[data-active-view="home"] .home-view { overflow-x: clip; }
  #app[data-active-view="home"] .home-hero,
  #app[data-active-view="home"] .home-feature,
  #app[data-active-view="home"] .home-hero-copy,
  #app[data-active-view="home"] .home-lede,
  #app[data-active-view="home"] .home-demo-wrap { width: 100%; max-width: 100%; }
  #app[data-active-view="home"] .home-hero h1 { width: 100%; max-width: 100%; font-size: clamp(44px, 13vw, 58px); overflow-wrap: normal; word-break: normal; }
  #app[data-active-view="home"] .home-hero h1 em { display: block; }
  #app[data-active-view="home"] .home-lede { overflow-wrap: anywhere; text-wrap: wrap; }
  #app[data-active-view="home"] .home-hero-copy { width: 100%; }
  #app[data-active-view="home"] .home-nav-actions { min-width: 0; gap: 8px; }
  #app[data-active-view="home"] .home-credit-btn { padding-inline: 9px; font-size: 10px; }
}

/* Functional workspaces use the same restrained dark stage as the landing
   page. Existing panels, nodes, and feature controls remain in place. */
body { background: #09090b; }
#app:not([data-active-view="home"]),
#app:not([data-active-view="home"]) > .shell,
#app:not([data-active-view="home"]) .view { background: #09090b; color: #f4f4f1; }
#app:not([data-active-view="home"]) > .sidebar > .sidebar-shell,
#app:not([data-active-view="home"]) .topbar { background: rgba(9,9,11,.94); color: #f4f4f1; border-color: #2b2b32; box-shadow: none; }
#app:not([data-active-view="home"]) .topbar h1,
#app:not([data-active-view="home"]) .topbar .eyebrow { color: #f4f4f1; }
#app:not([data-active-view="home"]) .topbar p:last-child,
#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child { color: #9a9a9d; }
#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .page-hero,
#app:not([data-active-view="home"]) .schema-card,
#app:not([data-active-view="home"]) .library-card,
#app:not([data-active-view="home"]) .template-card,
#app:not([data-active-view="home"]) .agent-map-card,
#app:not([data-active-view="home"]) .band-card,
#app:not([data-active-view="home"]) .api-card,
#app:not([data-active-view="home"]) .project-log-toolbar,
#app:not([data-active-view="home"]) .task-session-board { border-color: #2b2b32; background: #111115; color: #f4f4f1; box-shadow: none; }
#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) textarea,
#app:not([data-active-view="home"]) select { border-color: #303038; background: #111115; color: #f4f4f1; }
#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder { color: #818188; }
#app:not([data-active-view="home"]) > .sidebar .brand strong,
#app:not([data-active-view="home"]) > .sidebar .brand span,
#app:not([data-active-view="home"]) > .sidebar .nav-item,
#app:not([data-active-view="home"]) > .sidebar .sidebar-exit-button { color: #dedee2; }
#app:not([data-active-view="home"]) > .sidebar .brand span,
#app:not([data-active-view="home"]) > .sidebar .sidebar-exit-button { color: #77777e !important; }
#app:not([data-active-view="home"]) > .sidebar .brand strong,
#app:not([data-active-view="home"]) > .sidebar .nav-item { color: #dedee2 !important; }
#app:not([data-active-view="home"]) > .sidebar .nav-item:hover { background: #17171c !important; color: #ffffff !important; }
#app:not([data-active-view="home"]) > .sidebar .nav-item.active { background: #7658e8 !important; border-color: #7658e8 !important; color: #ffffff !important; }

@media (min-width: 761px) and (max-width: 1120px) {
  #app > .sidebar {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  #app > .sidebar > .sidebar-shell {
    position: relative;
    top: auto;
    height: auto;
    min-height: 64px;
    max-height: none;
    grid-template-rows: auto;
    padding: 10px 20px;
  }

  #app > .sidebar .sidebar-nav {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }

  #app:not([data-active-view="home"]) .topbar {
    min-height: 86px;
    margin-top: 10px;
    padding: 18px 20px 16px;
  }
}

/* Product-facing template library and live review states. */
.view[data-view-panel="templates"] .template-use-workspace {
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  margin: 0 0 24px;
  padding: 18px 0 26px;
  border: 0;
  border-bottom: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.view[data-view-panel="templates"] .template-use-copy {
  align-content: center;
  gap: 12px;
}

.view[data-view-panel="templates"] .template-use-copy h3 {
  max-width: 10ch;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: 0;
}

.view[data-view-panel="templates"] .template-use-copy p:not(.eyebrow) {
  max-width: 34rem;
  line-height: 1.65;
}

.view[data-view-panel="templates"] .template-use-editor-card {
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
}

.view[data-view-panel="templates"] .template-editor {
  min-height: 330px;
  border-radius: 6px;
}

.template-library-toolbar {
  display: grid;
  gap: 14px;
  padding: 4px 0 18px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.12);
}

.template-library-heading,
.template-results-head,
.template-choice-topline,
.template-choice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.template-library-heading h3 {
  margin: 2px 0 0;
  color: #f4fffd;
  font-size: 22px;
  letter-spacing: 0;
}

.template-library-heading > span,
.template-results-head span {
  color: rgba(213, 232, 230, 0.66);
  font-size: 12px;
  font-weight: 700;
}

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

.template-search-field {
  position: relative;
  min-width: 0;
}

.template-search-field .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.template-search-field input,
.template-filter-select-field select {
  width: 100%;
  border: 1px solid rgba(126, 228, 223, 0.17);
  border-radius: 6px;
  background: rgba(3, 10, 14, 0.74);
  color: #f4fffd;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.template-search-field input {
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
}

.template-search-field input::placeholder {
  color: rgba(213, 232, 230, 0.48);
}

.template-search-field input:focus,
.template-filter-select-field select:focus {
  border-color: rgba(255, 170, 80, 0.58);
  background: rgba(5, 14, 18, 0.94);
  box-shadow: 0 0 0 3px rgba(255, 170, 80, 0.11);
}

.template-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(126, 228, 223, 0.18);
  border-radius: 6px;
  background: rgba(8, 20, 25, 0.84);
  color: rgba(238, 251, 249, 0.86);
  font-weight: 800;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.template-filter-toggle span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 50%;
  background: rgba(255, 170, 80, 0.18);
  color: #ffe3bd;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.template-filter-toggle:hover,
.template-filter-toggle.active {
  border-color: rgba(255, 170, 80, 0.5);
  background: rgba(44, 31, 17, 0.72);
  color: #fff8e8;
}

.template-filter-toggle:active,
.template-primary-tab:active,
.template-filter-option:active,
.template-active-token:active {
  transform: translateY(1px);
}

.template-primary-filter {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.template-primary-tab {
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 6px;
  background: rgba(5, 14, 18, 0.6);
  color: rgba(213, 232, 230, 0.72);
  font-size: 12px;
  font-weight: 800;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.template-primary-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-primary-tab small {
  flex: 0 0 auto;
  color: rgba(213, 232, 230, 0.48);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.template-primary-tab:hover {
  border-color: rgba(126, 228, 223, 0.3);
  background: rgba(11, 29, 34, 0.82);
  color: #f4fffd;
}

.template-primary-tab.active {
  border-color: rgba(255, 170, 80, 0.5);
  background: linear-gradient(145deg, rgba(55, 37, 17, 0.72), rgba(8, 27, 28, 0.9));
  color: #fff8e8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.template-primary-tab.active small {
  color: rgba(255, 227, 189, 0.76);
}

.template-filter-panel {
  padding: 14px;
  border-top: 1px solid rgba(126, 228, 223, 0.12);
  border-bottom: 1px solid rgba(126, 228, 223, 0.12);
  background: rgba(3, 10, 14, 0.52);
  animation: templateFilterPanelIn 180ms ease both;
}

@keyframes templateFilterPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.template-filter-panel-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) repeat(2, minmax(0, 1.2fr));
  gap: 16px 20px;
  align-items: start;
}

.template-filter-select-field,
.template-filter-set {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.template-filter-select-field > span,
.template-filter-set > span {
  color: rgba(213, 232, 230, 0.56);
  font-size: 11px;
  font-weight: 800;
}

.template-filter-select-field select {
  height: 38px;
  padding: 0 34px 0 11px;
  font-size: 12px;
}

.template-filter-set > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-filter-option {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 5px;
  background: rgba(8, 20, 25, 0.72);
  color: rgba(213, 232, 230, 0.68);
  font-size: 12px;
  font-weight: 750;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.template-filter-option:hover {
  border-color: rgba(126, 228, 223, 0.3);
  color: #f4fffd;
}

.template-filter-option.active {
  border-color: rgba(255, 170, 80, 0.46);
  background: rgba(55, 37, 17, 0.66);
  color: #ffe3bd;
}

.template-active-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.template-active-label {
  margin-right: 2px;
  color: rgba(213, 232, 230, 0.48);
  font-size: 11px;
  font-weight: 800;
}

.template-active-token {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(255, 170, 80, 0.28);
  border-radius: 5px;
  background: rgba(55, 37, 17, 0.42);
  color: rgba(255, 227, 189, 0.88);
  font-size: 11px;
  font-weight: 800;
}

.template-active-token span {
  color: rgba(255, 227, 189, 0.56);
  font-size: 14px;
}

.template-clear-all {
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: rgba(143, 241, 235, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.template-clear-all:hover {
  color: #bffbf7;
}

.template-primary-tab:focus-visible,
.template-filter-toggle:focus-visible,
.template-filter-option:focus-visible,
.template-active-token:focus-visible,
.template-clear-all:focus-visible {
  outline: 2px solid rgba(255, 170, 80, 0.78);
  outline-offset: 2px;
}

.template-results-head {
  padding: 18px 2px 10px;
}

.template-results-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.template-results-head strong {
  color: #f4fffd;
  font-size: 17px;
}

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

.template-choice-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(126, 228, 223, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(3, 8, 12, 0.76);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.template-choice-card:hover,
.template-choice-card.active {
  transform: translateY(-2px);
  border-color: rgba(255, 170, 80, 0.42);
  background:
    linear-gradient(160deg, rgba(255, 170, 80, 0.09), rgba(126, 228, 223, 0.035)),
    rgba(4, 11, 15, 0.88);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.template-choice-index,
.template-choice-category {
  color: rgba(213, 232, 230, 0.62);
  font-size: 11px;
  font-weight: 800;
}

.template-choice-index {
  font-variant-numeric: tabular-nums;
}

.template-choice-category {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-choice-body {
  min-height: 96px;
}

.template-choice-body h3 {
  margin: 0 0 8px;
  color: #f4fffd;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
}

.template-choice-body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(213, 232, 230, 0.72);
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.template-choice-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.1);
  border-radius: 6px;
  background: rgba(126, 228, 223, 0.1);
}

.template-choice-facts > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  overflow: hidden;
  background: rgba(4, 10, 14, 0.92);
  color: rgba(238, 251, 249, 0.88);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-choice-facts small {
  color: rgba(213, 232, 230, 0.5);
  font-size: 10px;
  font-weight: 700;
}

.template-choice-card .template-meta {
  min-height: 28px;
  margin: 0;
}

.template-choice-actions {
  justify-content: flex-end;
  margin-top: auto;
}

.review-skill-chip[data-status="running"] {
  position: relative;
  overflow: hidden;
  animation: reviewSkillBreathing 1.25s ease-in-out infinite;
}

.review-skill-chip[data-status="running"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.13) 48%, transparent 80%);
  transform: translateX(-120%);
  animation: reviewSkillSweep 1.35s ease-in-out infinite;
}

.review-skill-chip[data-status="running"] small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(187, 255, 249, 0.92);
}

.review-skill-chip[data-status="running"] small::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8ff1eb;
  box-shadow: 0 0 9px rgba(143, 241, 235, 0.9);
}

.review-skill-chip[data-status="done"] small {
  color: rgba(190, 235, 219, 0.72);
}

@keyframes reviewSkillBreathing {
  0%, 100% { box-shadow: inset 3px 0 0 rgba(143, 241, 235, 0.76), 0 0 0 rgba(126, 228, 223, 0); }
  50% { box-shadow: inset 3px 0 0 rgba(143, 241, 235, 1), 0 0 20px rgba(126, 228, 223, 0.2); }
}

@keyframes reviewSkillSweep {
  0% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

@media (max-width: 980px) {
  .view[data-view-panel="templates"] .template-use-workspace {
    grid-template-columns: 1fr;
  }

  .view[data-view-panel="templates"] .template-use-copy h3 {
    max-width: none;
  }

  .template-choice-grid {
    grid-template-columns: 1fr;
  }

  .template-primary-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .template-filter-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .template-library-heading,
  .template-results-head > div,
  .template-choice-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-choice-facts {
    grid-template-columns: 1fr;
  }

  .template-choice-actions {
    width: 100%;
  }

  .template-choice-actions .ghost-btn,
  .template-choice-actions .primary-btn {
    width: 100%;
  }

  .template-filter-controls {
    grid-template-columns: 1fr;
  }

  .template-filter-toggle {
    width: 100%;
  }

  .template-primary-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-filter-panel {
    padding: 12px 0;
  }

  .template-filter-panel-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .template-filter-set > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-filter-option {
    width: 100%;
  }
}

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: 24px;
}

.image-preview-modal.active {
  display: grid;
  place-items: center;
}

.image-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 4, 7, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.image-preview-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(94vw, 1680px);
  height: min(92vh, 1180px);
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.2);
  border-radius: 8px;
  background: #020608;
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.68);
}

.image-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.14);
  background: rgba(8, 16, 20, 0.96);
}

.image-preview-head .eyebrow,
.image-preview-head h2 {
  margin: 0;
}

.image-preview-head .eyebrow {
  color: rgba(143, 241, 235, 0.66);
  font-size: 10px;
}

.image-preview-head h2 {
  color: #f4fffd;
  font-size: 17px;
}

.image-preview-canvas {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 18px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.025) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.025) 75%),
    #010405;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}

.image-preview-canvas img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

@media (max-width: 700px) {
  .image-preview-modal {
    padding: 10px;
  }

  .image-preview-dialog {
    width: 100%;
    height: 94dvh;
  }
}

/* Desktop sidebar owns its scroll track; the page and brand header stay fixed. */
@media (min-width: 1121px) {
  .sidebar-shell {
    height: calc(100dvh - 32px);
    min-height: 0;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 6px;
    padding-bottom: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 228, 223, 0.32) rgba(126, 228, 223, 0.055);
  }

  .sidebar-nav > .nav-item,
  .sidebar-nav > .nav-group {
    flex: 0 0 auto;
  }

  .sidebar-nav::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar-nav::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(126, 228, 223, 0.055);
  }

  .sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 170, 80, 0.58), rgba(126, 228, 223, 0.38));
  }

  .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 181, 102, 0.78), rgba(126, 228, 223, 0.56));
  }
}

@media (max-width: 1120px) {
  .sidebar-shell {
    height: auto;
  }

  .sidebar-nav {
    flex: none;
    padding-right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 700px) {
  .task-session-page {
    padding: 18px 14px 30px;
  }

  .task-session-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .new-task-menu-wrap,
  .new-task-trigger {
    width: 100%;
  }

  .new-task-menu {
    right: auto;
    left: 0;
    width: 100%;
  }

  .task-session-list .session-card.session-row {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
  }

  .session-progress-block,
  .session-card-actions {
    grid-column: 2;
  }

  .session-card-actions {
    grid-row: auto;
    justify-content: flex-start;
  }

  #app[data-active-view="workbench"] .workbench-task-context {
    min-width: 0;
    grid-template-columns: 32px minmax(100px, 1fr);
  }

  .task-context-progress,
  .workbench-task-context small {
    display: none;
  }
}

@media (max-width: 1120px) {
  .login-screen {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .login-art {
    min-height: 420px;
  }

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

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-bottom: 18px;
    overflow: hidden;
    width: 100%;
  }

  .sidebar-shell {
    position: relative;
    top: auto;
    min-height: auto;
    border-radius: 0 0 26px 26px;
  }

  .sidebar-nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    padding-bottom: 4px;
    width: 100%;
    min-width: 0;
  }

  .nav-item {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .sidebar-foot {
    display: none;
  }

  .topbar {
    padding: 22px 20px 18px;
  }

  .topbar > div {
    min-width: 0;
  }

  .shell {
    width: 100%;
  }

  .workbench-grid,
  .page-scroll {
    padding: 20px;
  }

  .workbench-grid {
    height: auto;
    overflow: visible;
  }

  .studio-column {
    gap: 16px;
  }

  .template-grid,
  .schema-grid,
  .library-grid,
  .agent-map-grid,
  .band-grid,
  .api-grid,
  .field-schema-grid,
  .lifecycle-grid,
  .admin-view-grid,
  .rubric-grid,
  .workflow-board {
    grid-template-columns: 1fr;
  }

  .asset-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-filter-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .asset-filter-group,
  .asset-filter-group.scrollable {
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
  }

  .asset-category-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .login-screen {
    padding: 14px;
  }

  .login-art {
    min-height: 360px;
    padding: 24px;
    border-radius: 24px;
  }

  .login-art h1 {
    font-size: 36px;
  }

  .login-card {
    padding: 22px;
    border-radius: 24px;
  }

  .user-badge {
    order: -1;
  }

  html,
  body,
  #app,
  .shell,
  .view,
  .topbar,
  .page-scroll {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .topbar {
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .topbar h1,
  .page-hero h2 {
    font-size: 24px;
  }

  .topbar h1,
  .topbar p,
  .page-hero h2,
  .page-hero p,
  .schema-card,
  .schema-card p,
  .template-card p,
  .library-card p,
  .agent-map-card p,
  .api-card p,
  .field-card p,
  .lifecycle-card p,
  .admin-card p,
  .rubric-card p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .workbench-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .summary-stack {
    grid-template-columns: 1fr;
  }

  .workbench-grid,
  .page-scroll {
    padding-inline: 14px;
  }

  .panel,
  .page-hero,
  .template-card,
  .library-card,
  .agent-map-card,
  .band-card,
  .api-card,
  .field-card,
  .lifecycle-card,
  .admin-card,
  .rubric-card {
    width: 100%;
    padding: 16px;
  }

  .schema-grid,
  .schema-card,
  .schema-code {
    min-width: 0;
    max-width: 100%;
  }

  .schema-code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .page-scroll {
    height: calc(100vh - 110px);
  }

  .page-hero {
    margin-bottom: 14px;
  }

  .prompt-body,
  .review-summary,
  .api-preview {
    min-height: 96px;
    padding: 14px;
  }

  .prompt-body {
    min-height: 300px;
    max-height: none;
  }

  .preview-modal {
    padding: 12px;
  }

  .preview-dialog {
    max-height: 92vh;
    border-radius: 22px;
  }

  .preview-head {
    flex-direction: row;
    align-items: flex-start;
    padding: 14px;
  }

  .preview-head > div {
    min-width: 0;
  }

  .preview-head h2 {
    font-size: 19px;
    line-height: 1.25;
  }

  .preview-content {
    padding: 14px;
    font-size: 12px;
  }

  .asset-kpi-strip {
    grid-template-columns: 1fr;
  }

  .asset-management-panel {
    padding: 14px;
    border-radius: 22px;
  }

  .asset-filter-group.scrollable {
    padding-bottom: 8px;
  }

  .asset-category-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-row-card {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .asset-rank {
    min-height: 42px;
    padding: 0;
  }

  .asset-main {
    padding-top: 0;
  }

  .asset-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: auto;
  }

  .asset-side small,
  .asset-actions {
    grid-column: 1 / -1;
  }

  .asset-list-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .library-card-topline {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .library-card-topline .asset-status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .library-facts {
    grid-template-columns: 1fr;
  }

  .preview-actions {
    justify-content: flex-start;
  }
}

/* Final flow-map layout: main creation modules on the left, review board on the right. */
.reactor-shell {
  display: block;
  width: 100%;
  padding: clamp(14px, 2vw, 24px) 0 clamp(6px, 1.4vw, 18px);
}

.reactor-flow-map {
  --flow-node: 72px;
  --flow-gap: 18px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, 128px) minmax(420px, 1fr) minmax(220px, 280px);
  gap: clamp(14px, 2.2vw, 30px);
  align-items: center;
  width: 100%;
  min-height: 650px;
  isolation: isolate;
}

.reactor-flow-map::before {
  content: "";
  position: absolute;
  inset: 4% 14%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(126, 228, 223, 0.16), transparent 34%),
    linear-gradient(90deg, transparent, rgba(126, 228, 223, 0.06), transparent);
  filter: blur(18px);
  opacity: 0.85;
}

.reactor-halo,
.reactor-ring,
.reactor-scanline,
.reactor-flow-map > .reactor-halo,
.reactor-flow-map > .reactor-ring,
.reactor-flow-map > .reactor-scanline,
.reactor-flow-map::after {
  display: none !important;
}

.flow-rail {
  position: relative;
  display: grid;
  grid-template-rows: repeat(7, var(--flow-node));
  gap: var(--flow-gap);
  justify-items: center;
  align-content: center;
  min-height: calc(var(--flow-node) * 7 + var(--flow-gap) * 6);
}

.flow-rail-review {
  grid-template-rows: repeat(9, var(--flow-node));
  min-height: calc(var(--flow-node) * 9 + var(--flow-gap) * 8);
}

.flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.flow-line {
  fill: none;
  stroke: rgba(126, 228, 223, 0.12);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  opacity: 0.74;
  transition: stroke 260ms ease, stroke-width 260ms ease, filter 260ms ease, opacity 260ms ease;
}

.flow-line[data-status="running"] {
  stroke: rgba(126, 228, 223, 0.28);
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(126, 228, 223, 0.16));
}

.flow-line[data-status="done"] {
  stroke: rgba(143, 241, 235, 0.34);
  stroke-width: 1.6;
  stroke-dasharray: 2 8;
  opacity: 0.92;
  filter: drop-shadow(0 0 5px rgba(126, 228, 223, 0.18));
}

.flow-bead {
  fill: rgba(126, 228, 223, 0.2);
  opacity: 0.38;
  filter: drop-shadow(0 0 3px rgba(126, 228, 223, 0.12));
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 260ms ease, opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}

.flow-bead[data-status="running"] {
  fill: rgba(143, 241, 235, 0.74);
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(126, 228, 223, 0.42));
  animation: flowBeadPulse 1.35s ease-in-out infinite;
}

.flow-bead[data-status="done"] {
  fill: rgba(224, 255, 252, 0.76);
  opacity: 0.82;
  filter: drop-shadow(0 0 6px rgba(126, 228, 223, 0.32));
}

.reactor-flow-map .reactor-node {
  position: relative;
  top: auto;
  left: auto;
  grid-row: var(--flow-row);
  z-index: 2;
  width: var(--flow-node);
  min-height: var(--flow-node);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(126, 228, 223, 0.18);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.12), transparent 34%),
    rgba(4, 10, 14, 0.72);
  color: rgba(226, 244, 242, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.28);
  transform: none !important;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.reactor-flow-map .reactor-node strong {
  max-width: calc(var(--flow-node) - 14px);
  color: currentColor;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}

.reactor-flow-map .reactor-node:not(:disabled) {
  cursor: pointer;
}

.reactor-flow-map .reactor-node:not(:disabled):hover {
  transform: translateY(-2px) scale(1.04) !important;
  border-color: rgba(143, 241, 235, 0.82);
  color: #f6fffe;
}

.reactor-flow-map .reactor-node[data-status="running"] {
  border-color: rgba(143, 241, 235, 0.78);
  background:
    radial-gradient(circle at 50% 48%, rgba(126, 228, 223, 0.26), transparent 54%),
    rgba(7, 25, 30, 0.94);
  color: #f3fffe;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 6px rgba(126, 228, 223, 0.08),
    0 0 28px rgba(126, 228, 223, 0.38);
  animation: flowNodePulse 1.35s ease-in-out infinite;
}

.reactor-flow-map .reactor-node[data-status="done"] {
  border-color: rgba(143, 241, 235, 0.9);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(180deg, rgba(126, 228, 223, 0.35), rgba(29, 96, 102, 0.86));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 24px rgba(126, 228, 223, 0.42),
    0 16px 32px rgba(0, 0, 0, 0.26);
}

.reactor-flow-map .review-skill-chip[data-status="running"],
.reactor-flow-map .review-skill-cluster[data-status="running"] {
  animation-delay: 120ms;
}

.reactor-flow-map .reactor-core {
  position: relative;
  inset: auto;
  z-index: 3;
  width: min(100%, 620px);
  justify-self: center;
  transform: none;
}

.reactor-flow-map .reactor-core .composer-stage {
  min-height: clamp(132px, 11vw, 164px);
}

.setup-main-column .reactor-flow-map .reactor-core .idea-input.studio-input {
  min-height: clamp(104px, 9vw, 136px);
  line-height: 1.56;
}

.trace-panel,
.workflow-marquee {
  display: none !important;
}

.agent-trace[hidden] {
  display: none !important;
}

@keyframes flowNodePulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 5px rgba(126, 228, 223, 0.06),
      0 0 22px rgba(126, 228, 223, 0.3);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 0 10px rgba(126, 228, 223, 0.1),
      0 0 34px rgba(126, 228, 223, 0.48);
  }
}

@keyframes flowBeadPulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.92;
  }
}

@media (max-width: 1180px) {
  .reactor-flow-map {
    grid-template-columns: 86px minmax(360px, 1fr) 86px;
    --flow-node: 64px;
    --flow-gap: 16px;
  }

  .reactor-flow-map .reactor-node strong {
    font-size: 14px;
  }
}

@media (max-width: 860px) {
  .reactor-flow-map {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "core core"
      "main review";
    align-items: start;
    min-height: 0;
    --flow-node: 62px;
  }

  .reactor-flow-map .reactor-core {
    grid-area: core;
    width: 100%;
  }

  .flow-rail-main {
    grid-area: main;
  }

  .flow-rail-review {
    grid-area: review;
  }
}

@media (max-width: 1280px) {
  .view[data-view-panel="workbench"] {
    padding: 22px 24px 30px;
  }

  .workbench-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .setup-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
    max-height: none;
  }

  .setup-panel > .field,
  .setup-panel > .action-row,
  .setup-panel > .note-card {
    grid-column: auto;
    grid-row: auto;
  }

  .output-overview,
  .support-grid,
  .history-grid,
  .log-summary-grid {
    grid-template-columns: 1fr;
  }

  .agent-trace {
    gap: 18px;
    padding-right: 8px;
  }

  .trace-card {
    flex-basis: 224px;
  }

  .prompt-body {
    min-height: 420px;
  }
}

@media (max-width: 1120px) {
  .view[data-view-panel="workbench"] {
    padding: 20px;
  }

  .setup-panel {
    grid-template-columns: 1fr;
  }

  .setup-panel > .field,
  .setup-panel > .action-row,
  .setup-panel > .note-card {
    grid-column: auto;
    grid-row: auto;
  }

  .setup-panel > .action-row {
    justify-content: flex-start;
  }

  .output-panel,
  .trace-panel,
  .setup-panel {
    padding: 22px;
    border-radius: 26px;
  }

  .agent-trace {
    gap: 16px;
  }

  .trace-card {
    flex-basis: 210px;
  }

  .history-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 780px) {
  .view[data-view-panel="workbench"] {
    padding: 14px;
  }

  .output-panel,
  .trace-panel,
  .setup-panel {
    padding: 18px;
    border-radius: 24px;
  }

  .output-overview,
  .support-grid,
  .history-grid,
  .log-summary-grid {
    grid-template-columns: 1fr;
  }

  .agent-trace {
    gap: 14px;
    padding-right: 0;
  }

  .trace-card {
    flex-basis: 190px;
  }

  .notice-card,
  .history-card-head,
  .history-toolbar {
    flex-direction: column;
  }

  .prompt-stage-card {
    padding: 18px;
  }

  .prompt-body {
    min-height: 320px;
    padding: 16px;
  }

  .history-card,
  .history-empty {
    padding: 18px;
  }

  .history-snippet {
    min-height: 140px;
  }

  .trace-card[data-has-next="true"]::after {
    right: -12px;
  }
}

:root {
  --font: "Outfit", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

body {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 214, 168, 0.18), transparent 20%),
    radial-gradient(circle at 82% 12%, rgba(111, 181, 175, 0.16), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(36, 110, 104, 0.08), transparent 28%),
    linear-gradient(135deg, #f6f4ed 0%, #e8ece5 46%, #dfe5dc 100%);
}

.topbar {
  margin: 16px 18px 0;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 60px rgba(24, 35, 30, 0.08);
  background:
    radial-gradient(circle at top right, rgba(184, 111, 56, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(250, 249, 242, 0.94), rgba(250, 249, 242, 0.8)),
    rgba(250, 249, 242, 0.82);
}

.topbar h1 {
  max-width: 920px;
  font-size: clamp(2rem, 2.5vw, 2.65rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.topbar p:last-child {
  max-width: 760px;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.72;
}

.view[data-view-panel="workbench"] {
  padding: 20px 18px 36px;
}

.workbench-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-height: auto;
}

.setup-panel,
.trace-panel,
.output-panel {
  border-radius: 28px;
}

.setup-panel {
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(36, 110, 104, 0.12), transparent 24%),
    radial-gradient(circle at bottom left, rgba(184, 111, 56, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248, 249, 246, .9)),
    rgba(255,255,255,.88);
}

.setup-shell {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.setup-hero-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  min-width: 0;
  overflow: hidden;
}

.setup-hero-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  max-width: 980px;
  min-width: 0;
}

.setup-copy-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.setup-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.setup-hero-title {
  margin: 0;
  max-width: 980px;
  font-size: clamp(2.05rem, 2.8vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
  color: var(--ink);
  text-wrap: balance;
}

.setup-hero-desc {
  margin: 0;
  max-width: 940px;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.68;
}

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

.hero-metric-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248, 249, 246, .88)),
    rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(24, 35, 30, 0.05);
}

.hero-metric-card span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-metric-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.hero-metric-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.reveal-char {
  display: inline-block;
  opacity: 0.16;
}

.reveal-space {
  width: 0.36em;
}

.inline-media {
  display: inline-block;
  width: 94px;
  height: 56px;
  margin: 0 0.18em;
  border-radius: 999px;
  vertical-align: -0.12em;
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 38px rgba(24, 35, 30, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.48);
  filter: grayscale(0.16) contrast(1.12) saturate(0.92);
}

.inline-media-a {
  background-image:
    linear-gradient(180deg, rgba(8, 10, 12, 0.1), rgba(8, 10, 12, 0.2)),
    url("https://picsum.photos/seed/cinematic-edit-suite/1920/1080");
}

.setup-hero-stage {
  display: none;
}

.hero-stage-visual {
  position: relative;
  overflow: hidden;
  min-height: 192px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8, 10, 12, 0.18), rgba(8, 10, 12, 0.58)),
    url("https://picsum.photos/seed/cinematic-creative-board/1400/1200");
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px rgba(16, 24, 21, 0.16);
}

.hero-stage-visual::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stage-visual-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  max-width: 230px;
}

.hero-stage-visual-copy span,
.hero-stage-pill span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-stage-visual-copy span {
  color: rgba(246, 250, 247, 0.62);
}

.hero-stage-visual-copy strong {
  display: block;
  margin-top: 10px;
  color: #f6faf7;
  font-size: 20px;
  line-height: 1.14;
  letter-spacing: -0.05em;
}

.hero-stage-visual-copy p {
  margin: 10px 0 0;
  color: rgba(246, 250, 247, 0.72);
  font-size: 12px;
  line-height: 1.58;
}

.hero-stage-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  align-content: stretch;
}

.hero-stage-pill {
  min-width: 0;
  min-height: 88px;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(19, 28, 24, 0.94), rgba(29, 43, 36, 0.9)),
    rgba(16, 24, 21, 0.92);
  color: #f4f8f5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 30px rgba(16, 24, 21, 0.12);
}

.hero-stage-pill span {
  color: rgba(244, 248, 245, 0.54);
}

.hero-stage-pill strong {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.setup-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.setup-main-column,
.setup-action-column {
  min-width: 0;
}

.field-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.composer-shell {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.composer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.composer-head-copy {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.composer-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.06);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.composer-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: 26px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248, 249, 246, .88)),
    rgba(255,255,255,.84);
  box-shadow: 0 18px 44px rgba(24, 35, 30, 0.06);
}

.composer-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.composer-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composer-tool,
.upload-inline-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.composer-tool:hover,
.upload-inline-tool:hover {
  transform: translateY(-1px);
  border-color: rgba(36, 110, 104, 0.34);
  background: rgba(213, 236, 232, 0.44);
}

.upload-inline-tool {
  cursor: pointer;
}

.upload-inline-tool input {
  display: none;
}

.mention-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background: rgba(246, 248, 245, 0.92);
}

.mention-panel-head,
.composer-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.mention-panel-tip,
.composer-inline-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.mention-suggestions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.mention-panel:not(.is-querying) .mention-token small {
  display: none;
}

.mention-token {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.mention-token img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 28, 0.08);
}

.mention-token:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 111, 56, 0.34);
  box-shadow: 0 10px 24px rgba(24, 35, 30, 0.06);
}

.mention-token small {
  color: var(--muted);
  font-weight: 500;
}

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

.composer-support-card,
.composer-style-block {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248, 249, 246, .9)),
    rgba(255,255,255,.82);
  box-shadow: 0 16px 40px rgba(24, 35, 30, 0.05);
}

.composer-reference-card {
  align-content: start;
}

.composer-style-block {
  padding: 14px 14px 16px;
}

.composer-style-block .chip-wrap {
  max-height: 88px;
  overflow: auto;
  padding-right: 2px;
}

.composer-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.composer-footnote {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.field-textarea .field-hint {
  margin: 0;
  white-space: nowrap;
}

.setup-main-column .idea-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 210px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(23, 32, 27, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 24px 48px rgba(24, 35, 30, 0.05);
  font-size: 16px;
  line-height: 1.7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(253, 252, 248, .9)),
    rgba(255,255,255,.9);
}

.setup-main-column .idea-input::placeholder {
  white-space: normal;
}

.setup-bottom-grid .field {
  margin: 0;
  min-width: 0;
}

.setup-note-card,
.preset-toggle,
.reference-preview {
  box-shadow: 0 16px 40px rgba(24, 35, 30, 0.06);
}

.setup-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.setup-action-column {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-width: 0;
}

.setup-action-column .action-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.preset-field {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(23, 32, 27, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248, 249, 246, .88)),
    rgba(255,255,255,.82);
  box-shadow: 0 16px 40px rgba(24, 35, 30, 0.06);
}

.setup-note-card {
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(36, 110, 104, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(18, 25, 22, 0.96), rgba(17, 24, 21, 0.92));
  color: #f4f7f5;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.setup-note-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.setup-note-card p {
  margin: 0;
  color: rgba(244, 247, 245, 0.72);
  line-height: 1.7;
}

.workflow-marquee {
  display: none;
}

.workflow-marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  min-height: 62px;
  padding: 0 26px;
  animation: workflowMarquee 28s linear infinite;
}

.workflow-marquee-track span {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workflow-marquee-track span::after {
  content: "/";
  position: absolute;
  right: -19px;
  color: rgba(23, 32, 27, 0.28);
}

@keyframes workflowMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.trace-panel {
  padding: 24px 28px;
  overflow: hidden;
}

.trace-panel-head {
  margin-bottom: 20px;
}

.trace-panel-head h2,
.result-head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.trace-caption,
.result-subtitle {
  max-width: 840px;
  font-size: 15px;
}

.agent-trace {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 8px 6px 0;
  overflow-x: auto;
  overflow-y: visible;
}

.agent-trace::-webkit-scrollbar {
  height: 9px;
}

.trace-card {
  flex: 0 0 164px;
  min-height: 148px;
  border-radius: 22px;
  transition:
    transform 280ms cubic-bezier(.2,.8,.2,1),
    box-shadow 280ms cubic-bezier(.2,.8,.2,1),
    border-color 280ms cubic-bezier(.2,.8,.2,1),
    flex-basis 280ms cubic-bezier(.2,.8,.2,1);
}

.trace-card:hover {
  flex-basis: 172px;
  transform: translateY(-3px);
}

.trace-card::before {
  top: 14px;
  bottom: 14px;
}

.trace-card[data-has-next="true"]::after {
  right: -8px;
  font-size: 16px;
}

.trace-status {
  min-width: 56px;
}

.trace-top h3 {
  font-size: 13px;
}

.trace-primary {
  font-size: 13px;
  line-height: 1.42;
}

.trace-mini-note {
  font-size: 11px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}

.output-panel {
  padding: 28px;
}

.output-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-grid {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.stack-card {
  position: relative;
  will-change: transform;
}

.prompt-stage-card {
  padding: 22px;
}

.prompt-stage-card .prompt-head {
  align-items: center;
  gap: 18px;
}

.prompt-stage-card .prompt-head > div:first-child {
  flex: 1 1 auto;
  min-width: 220px;
}

.prompt-stage-card .prompt-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  white-space: nowrap;
}

.prompt-stage-card .prompt-toolbar .small {
  flex: 0 0 auto;
  white-space: nowrap;
}

.prompt-body {
  min-height: 340px;
  max-height: min(52vh, 560px);
}

.workbench-action-strip {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(184, 111, 56, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(18, 25, 22, 0.98), rgba(28, 40, 34, 0.94));
  color: #f4f7f5;
}

.workbench-action-copy {
  max-width: 760px;
}

.workbench-action-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.workbench-action-copy p {
  margin: 0;
  color: rgba(244, 247, 245, 0.72);
  line-height: 1.7;
}

.workbench-action-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 10px;
}

.workbench-action-links .ghost-btn,
.workbench-action-links .primary-btn {
  white-space: nowrap;
}

.setup-panel .field-label,
.trace-panel .summary-label,
.output-panel .summary-label {
  margin-bottom: 12px;
}

.setup-panel .field-label,
.setup-panel .field-hint,
.setup-panel .segment,
.setup-panel .preset-toggle span,
.setup-panel .preset-toggle small {
  word-break: keep-all;
  overflow-wrap: normal;
}

.setup-panel .field-label,
.setup-panel .field-hint {
  white-space: nowrap;
}

.status-dot,
.quality-badge,
.trace-status,
.history-badge,
.export-status {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.composer-head.minimal {
  align-items: flex-start;
}

.composer-head.minimal .field-label {
  color: var(--muted-strong);
}

.composer-head.minimal .composer-head-copy {
  max-width: 840px;
}

.composer-card.composer-studio {
  gap: 16px;
  padding: 18px 18px 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 18%),
    linear-gradient(180deg, rgba(44, 44, 43, 0.98), rgba(32, 32, 31, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 60px rgba(18, 20, 18, 0.22);
}

.composer-studio-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.composer-launcher-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.composer-launcher {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  width: 98px;
  min-height: 96px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(247, 247, 244, 0.9);
  text-align: left;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.composer-launcher:hover,
.composer-launcher.active {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.composer-launcher input {
  display: none;
}

.composer-launcher strong,
.composer-launcher small {
  display: block;
}

.composer-launcher strong {
  font-size: 14px;
  line-height: 1.1;
}

.composer-launcher small {
  color: rgba(247, 247, 244, 0.46);
  font-size: 11px;
  line-height: 1.35;
}

.composer-launcher-glyph {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(247, 247, 244, 0.78);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
}

.composer-expand-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(247, 247, 244, 0.74);
  background: rgba(255, 255, 255, 0.02);
  font-size: 18px;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.composer-expand-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.composer-stage {
  position: relative;
  min-height: 188px;
}

.setup-main-column .idea-input.studio-input {
  min-height: 188px;
  padding: 8px 2px 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: rgba(247, 247, 244, 0.9);
  font-size: 18px;
  line-height: 1.78;
  resize: vertical;
}

.setup-main-column .idea-input.studio-input::placeholder {
  color: rgba(247, 247, 244, 0.38);
}

.setup-main-column .idea-input.studio-input:focus {
  outline: none;
}

.composer-card.is-expanded .studio-input {
  min-height: 320px;
}

.composer-tray {
  display: none;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.composer-tray.open,
.composer-reference-tray.has-reference {
  display: grid;
}

.composer-tray .field-label {
  color: rgba(247, 247, 244, 0.84);
}

.composer-tray .mention-panel-tip,
.composer-tray .composer-inline-note {
  color: rgba(247, 247, 244, 0.5);
}

.composer-tray .mention-token {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 247, 244, 0.88);
}

.composer-tray .mention-token small {
  color: rgba(247, 247, 244, 0.48);
}

.composer-style-tray .chip-wrap {
  max-height: none;
  display: grid;
  gap: 16px;
}

.composer-style-tray .chip {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.72);
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip.active {
  background: rgba(169, 214, 209, 0.14);
  border-color: rgba(169, 214, 209, 0.38);
  color: #eaf7f5;
}

.image-mode-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(169, 214, 209, 0.18);
  background:
    radial-gradient(circle at 0% 0%, rgba(169, 214, 209, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

.image-mode-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.image-mode-head div {
  display: grid;
  gap: 4px;
}

.image-mode-head strong {
  color: rgba(247, 247, 244, 0.92);
  font-size: 14px;
}

.image-mode-head span,
.image-mode-head small {
  color: rgba(247, 247, 244, 0.52);
  font-size: 12px;
  line-height: 1.45;
}

.image-mode-head small {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.image-mode-head small.selected {
  color: #dff8f4;
  border-color: rgba(169, 214, 209, 0.38);
  background: rgba(169, 214, 209, 0.12);
}

.image-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}

.image-mode-card {
  min-width: 0;
  min-height: 118px;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.76);
  text-align: left;
  display: grid;
  align-content: space-between;
  gap: 8px;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.image-mode-card:hover,
.image-mode-card.active {
  transform: translateY(-1px);
  border-color: rgba(169, 214, 209, 0.46);
  background:
    linear-gradient(180deg, rgba(169, 214, 209, 0.16), rgba(255, 255, 255, 0.05));
  color: #f4fffd;
}

.image-mode-card strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.image-mode-card span {
  min-width: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(247, 247, 244, 0.54);
  overflow-wrap: anywhere;
}

.image-mode-card small {
  font-size: 10px;
  color: rgba(169, 214, 209, 0.82);
}

.style-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  overflow: visible;
  padding-bottom: 0;
}

.style-column {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.style-column.generic {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.style-column-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.style-column-head strong {
  color: rgba(247, 247, 244, 0.82);
  font-size: 12px;
}

.style-column-head span {
  color: rgba(247, 247, 244, 0.42);
  font-size: 11px;
}

.style-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding: 2px 2px 4px;
}

.composer-reference-tray .reference-preview {
  margin-top: 0;
  min-height: 84px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.composer-reference-tray .reference-preview.empty {
  place-items: start;
}

.composer-reference-tray .reference-placeholder {
  color: rgba(247, 247, 244, 0.42);
}

.composer-reference-tray .reference-preview img {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.composer-reference-tray .reference-preview:not(.empty) {
  display: flex;
  align-items: stretch;
}

.composer-reference-tray .reference-meta {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
}

.composer-reference-tray .reference-meta strong {
  color: rgba(247, 247, 244, 0.9);
}

.composer-reference-tray .reference-meta span {
  color: rgba(247, 247, 244, 0.48);
}

.composer-bottombar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.composer-bottom-left,
.composer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.composer-inline-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.composer-control-label {
  color: rgba(247, 247, 244, 0.48);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.segmented.compact {
  gap: 6px;
}

.segmented.compact .segment {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.68);
}

.segmented.compact .segment.active {
  background: rgba(169, 214, 209, 0.14);
  color: #eaf7f5;
  border-color: rgba(169, 214, 209, 0.34);
}

.duration-row.compact {
  margin-top: 0;
  gap: 8px;
}

.duration-row.compact input {
  width: 76px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.88);
}

.duration-row.compact span {
  color: rgba(247, 247, 244, 0.54);
}

.composer-meta-trigger,
.composer-meta-readout {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.72);
  font-size: 12px;
  font-weight: 600;
}

.composer-meta-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.composer-meta-readout strong {
  margin-left: 6px;
  color: rgba(247, 247, 244, 0.92);
}

.composer-reset-btn {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.74);
}

.composer-send-btn {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(209, 209, 207, 0.9), rgba(168, 168, 166, 0.92));
  color: #111714;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition), filter var(--transition);
}

.composer-send-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.composer-send-btn:disabled {
  opacity: 0.58;
  cursor: wait;
}

.composer-preset-rail {
  margin-top: 0;
  padding: 8px 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.composer-preset-rail.open {
  display: flex;
}

.composer-preset-rail .preset-slide {
  flex: 0 0 220px;
  min-height: 88px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 247, 244, 0.82);
}

.composer-preset-rail .preset-slide strong {
  color: rgba(247, 247, 244, 0.92);
}

.composer-preset-rail .preset-slide span {
  color: rgba(247, 247, 244, 0.5);
}

.composer-preset-rail .preset-slide:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 1380px) {
  .setup-hero-metrics {
    grid-template-columns: 1fr;
  }

  .setup-bottom-grid {
    grid-template-columns: 1fr;
  }

  .setup-action-column,
  .setup-action-column .action-row {
    justify-content: flex-start;
  }

  .composer-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer-reference-card {
    grid-column: 1 / -1;
  }

  .support-grid,
  .output-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1240px) {
  .composer-support-grid {
    grid-template-columns: 1fr;
  }

  .composer-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1120px) {
  .topbar {
    margin: 16px 16px 0;
    padding: 24px 24px 20px;
  }

  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .view[data-view-panel="workbench"] {
    padding: 24px 16px 40px;
  }

  .setup-panel,
  .trace-panel,
  .output-panel {
    padding: 24px;
  }

  .setup-content-grid {
    grid-template-columns: 1fr;
  }

  .setup-hero-title {
    max-width: 100%;
    font-size: clamp(2.2rem, 7vw, 3.6rem);
    line-height: 1;
  }

  .composer-head,
  .composer-footer,
  .mention-panel-head,
  .composer-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .composer-studio-top,
  .composer-bottombar {
    flex-direction: column;
    align-items: flex-start;
  }

  .setup-main-column .idea-input {
    min-height: 220px;
  }

  .composer-bottom-right {
    width: 100%;
    justify-content: flex-start;
  }

  .trace-card {
    flex-basis: 228px;
  }

  .workbench-action-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .workbench-action-links {
    justify-content: flex-start;
  }
}

@media (max-width: 780px) {
  .topbar h1 {
    font-size: clamp(2.3rem, 9vw, 3.4rem);
  }

  .setup-panel,
  .trace-panel,
  .output-panel {
    padding: 20px;
    border-radius: 26px;
  }

  .setup-hero-title {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
  }

  .composer-card.composer-studio {
    padding: 14px;
    border-radius: 24px;
  }

  .composer-launcher {
    width: calc(33.333% - 8px);
    min-width: 88px;
    min-height: 88px;
    padding: 12px;
  }

  .composer-launcher-row {
    width: 100%;
  }

  .setup-main-column .idea-input.studio-input {
    min-height: 156px;
    font-size: 16px;
    line-height: 1.7;
  }

  .composer-bottom-left,
  .composer-bottom-right,
  .composer-inline-control {
    width: 100%;
  }

  .composer-bottom-right {
    gap: 8px;
  }

  .composer-meta-readout,
  .composer-meta-trigger,
  .composer-reset-btn {
    min-height: 32px;
    padding: 0 10px;
  }

  .composer-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 22px;
  }

  .inline-media {
    width: 76px;
    height: 44px;
  }

  .trace-card {
    flex-basis: 170px;
    min-height: 148px;
  }

  .trace-card:hover {
    flex-basis: 178px;
  }

  .prompt-body {
    min-height: 300px;
  }

  .workbench-action-copy h3 {
    font-size: 1.8rem;
  }
}

/* Creator composer refresh: bright, contained, reference-only mentions. */
.shell,
.view,
.workbench-grid,
.setup-shell,
.setup-content-grid,
.setup-main-column,
.composer-shell,
.composer-card,
.trace-panel,
.output-panel {
  min-width: 0;
  max-width: 100%;
}

.view[data-view-panel="workbench"] {
  padding: 18px clamp(14px, 2vw, 28px) 44px;
}

.setup-panel {
  padding: clamp(20px, 2.4vw, 34px);
  border: 1px solid rgba(22, 32, 28, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.92)),
    #fff;
  box-shadow: 0 22px 70px rgba(36, 52, 46, 0.09);
}

.setup-hero-band {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: stretch;
  gap: 16px;
}

.setup-hero-title {
  max-width: 1120px;
  font-size: clamp(2rem, 2.9vw, 3.45rem);
  line-height: 1.02;
}

.setup-hero-desc {
  max-width: 900px;
}

.setup-hero-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
}

.hero-metric-card {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 250, 0.9)),
    #fff;
}

.composer-card.composer-studio {
  position: relative;
  gap: 18px;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 28px;
  border: 1px solid rgba(23, 32, 27, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.94)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 28px 80px rgba(30, 46, 41, 0.12);
}

.composer-card.composer-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(28, 131, 122, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(183, 111, 56, 0.08), transparent 34%);
}

.composer-card.composer-studio > * {
  position: relative;
  z-index: 1;
}

.composer-studio-top {
  align-items: stretch;
}

.composer-launcher-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  width: min(100%, 480px);
  gap: 10px;
}

.composer-launcher {
  width: auto;
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-content: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 249, 247, 0.78)),
    #fff;
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(26, 42, 37, 0.06);
}

.composer-launcher:hover,
.composer-launcher.active {
  transform: translateY(-2px);
  border-color: rgba(28, 131, 122, 0.32);
  background: #fff;
  box-shadow: 0 18px 38px rgba(26, 42, 37, 0.1);
}

.composer-launcher-glyph {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(28, 131, 122, 0.16);
  color: #113f3b;
  background: linear-gradient(135deg, rgba(214, 241, 237, 0.92), rgba(255, 247, 237, 0.86));
}

.composer-launcher strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-launcher small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-launcher {
  border-color: rgba(184, 111, 56, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 246, 231, 0.98), rgba(255, 255, 255, 0.92)),
    #fff;
}

.composer-expand-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 26px rgba(26, 42, 37, 0.06);
}

.composer-expand-btn:hover {
  border-color: rgba(28, 131, 122, 0.28);
  background: #fff;
}

.composer-stage {
  min-height: 190px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 253, 250, 0.92)),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.setup-main-column .idea-input.studio-input {
  min-height: 166px;
  padding: 0;
  color: #101815;
  caret-color: #1c837a;
  font-size: 18px;
  line-height: 1.76;
}

.setup-main-column .idea-input.studio-input::placeholder {
  color: rgba(30, 45, 40, 0.42);
}

.composer-tray {
  border-radius: 20px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 249, 0.9)),
    #fff;
  box-shadow: 0 16px 38px rgba(26, 42, 37, 0.07);
}

.composer-tray .field-label,
.composer-tray .mention-panel-tip,
.composer-tray .composer-inline-note {
  color: var(--muted-strong);
}

.composer-tray .mention-token {
  min-height: 42px;
  border-radius: 14px;
  border-color: rgba(28, 131, 122, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.composer-tray .mention-token span {
  white-space: nowrap;
}

.composer-tray .mention-token small {
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reference mentions are contextual UI: keep the picker beside the caret and
   show the uploaded images as compact visual anchors instead of a second tray. */
.composer-card.composer-studio .mention-panel.floating-mentions.open {
  position: absolute !important;
  display: block;
  margin: 0 !important;
  padding: 7px;
  width: min(360px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  z-index: 40;
  border-radius: 14px;
  background: rgba(13, 24, 30, 0.96);
  border: 1px solid rgba(143, 241, 235, 0.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mention-panel.floating-mentions .mention-panel-head {
  display: none;
}

.mention-panel.floating-mentions .mention-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  overflow: visible;
  padding: 0;
}

.mention-panel.floating-mentions .mention-token,
.composer-tray .mention-panel.floating-mentions .mention-token {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 4px;
  border-radius: 11px;
  border-color: rgba(143, 241, 235, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.mention-panel.floating-mentions .mention-token img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.mention-panel.floating-mentions .mention-token span {
  position: absolute;
  right: 3px;
  bottom: 2px;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(4, 10, 13, 0.78);
  color: #eefafa;
  font-size: 9px;
  line-height: 1.2;
}

.mention-panel.floating-mentions .mention-token small {
  display: none;
}

.mention-empty {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(23, 32, 27, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* The empty state is a message, not a thumbnail tile.  The floating picker
   uses a 48px auto-fill grid for uploaded images; without spanning the grid,
   this sentence is constrained to one tile and wraps one character per line. */
.mention-panel.floating-mentions .mention-empty {
  grid-column: 1 / -1;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composer-style-tray .chip {
  border-color: rgba(22, 32, 28, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted-strong);
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip.active {
  background: rgba(213, 236, 232, 0.72);
  border-color: rgba(28, 131, 122, 0.34);
  color: #113f3b;
}

.composer-reference-tray .reference-preview {
  min-height: 94px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.composer-reference-tray .reference-preview.empty {
  display: grid;
  padding: 14px;
  border: 1px dashed rgba(22, 32, 28, 0.14);
  background: rgba(23, 32, 27, 0.03);
}

.composer-reference-tray .reference-placeholder {
  color: var(--muted);
}

.reference-tile {
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.reference-tile img {
  width: 86px;
  height: 86px;
  object-fit: cover;
}

.reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.reference-actions button {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.reference-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(28, 131, 122, 0.28);
  background: rgba(213, 236, 232, 0.74);
  color: #113f3b;
}

.reference-actions [data-reference-remove]:hover {
  border-color: rgba(154, 72, 87, 0.24);
  background: rgba(240, 219, 224, 0.5);
  color: #8e3142;
}

.composer-reference-tray .reference-meta {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
}

.composer-reference-tray .reference-meta strong {
  color: var(--ink);
}

.composer-reference-tray .reference-meta span,
.composer-reference-tray .reference-meta small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-bottombar {
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 32, 28, 0.08);
}

.composer-control-label {
  color: var(--muted-strong);
}

.segmented.compact .segment,
.duration-row.compact input,
.composer-meta-trigger,
.composer-meta-readout,
.composer-reset-btn {
  border-color: rgba(22, 32, 28, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-strong);
}

.segmented.compact .segment {
  min-width: 48px;
}

.segmented.compact .segment.active {
  background: #143f3a;
  color: #fff;
  border-color: #143f3a;
}

.duration-row.compact span,
.composer-meta-readout strong {
  color: var(--ink);
}

.preset-command {
  min-width: 110px;
  background:
    linear-gradient(135deg, rgba(255, 246, 231, 0.96), rgba(255, 255, 255, 0.86)),
    #fff;
  color: #7b421d;
}

.composer-send-btn {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(180deg, #101815, #1e2d28);
  color: #fff;
  box-shadow: 0 18px 34px rgba(18, 24, 21, 0.22);
  line-height: 1;
}

.composer-send-btn:disabled {
  opacity: 0.72;
}

.composer-preset-rail {
  display: none;
  margin-top: 2px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(184, 111, 56, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 246, 231, 0.98), rgba(255, 255, 255, 0.94)),
    #fff;
  box-shadow: 0 22px 56px rgba(83, 55, 35, 0.12);
}

.composer-preset-rail.open {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.composer-preset-rail.open::before {
  content: "Advanced template presets";
  position: sticky;
  left: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
  min-width: 136px;
  padding: 0 16px;
  border-radius: 16px;
  background: #101815;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.agent-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.agent-skill-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 249, 0.9)),
    #fff;
  box-shadow: 0 18px 44px rgba(24, 35, 30, 0.07);
}

.agent-skill-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.agent-skill-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.agent-skill-head .tag-pill {
  max-width: 46%;
  white-space: normal;
  text-align: right;
}

.agent-skill-mission {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.72;
}

.agent-skill-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-skill-columns section,
.agent-skill-block {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background: rgba(255, 255, 255, 0.64);
}

.agent-skill-columns section.danger {
  border-color: rgba(154, 72, 87, 0.16);
  background: rgba(240, 219, 224, 0.24);
}

.agent-skill-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-skill-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.58;
}

@media (max-width: 1120px) {
  .agent-skill-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .agent-skill-head,
  .agent-skill-columns {
    grid-template-columns: 1fr;
  }

  .agent-skill-head {
    flex-direction: column;
  }

  .agent-skill-head .tag-pill {
    max-width: 100%;
    text-align: left;
  }
}

.composer-preset-rail .preset-slide {
  scroll-snap-align: start;
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 250, 0.9)),
    #fff;
  color: var(--ink);
}

.composer-preset-rail .preset-slide:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 111, 56, 0.34);
  background: #fff;
  box-shadow: 0 18px 34px rgba(83, 55, 35, 0.1);
}

.composer-preset-rail .preset-slide strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.composer-preset-rail .preset-slide span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.agent-trace {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.trace-panel .agent-trace {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 0;
}

.trace-panel .trace-card {
  width: 100%;
  min-width: 0;
  min-height: 136px;
  flex: unset;
  overflow: hidden;
}

.trace-panel .trace-card:hover {
  flex-basis: unset;
}

.trace-panel .trace-card[data-has-next="true"]::after {
  right: 8px;
  top: 18px;
  transform: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(28, 131, 122, 0.1);
  color: rgba(28, 131, 122, 0.72);
  font-size: 13px;
}

.trace-status,
.quality-badge,
.export-status,
.composer-meta-readout,
.composer-meta-trigger,
.segment,
.chip {
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .setup-hero-band {
    grid-template-columns: 1fr;
  }

  .setup-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .composer-launcher-row {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .composer-studio-top,
  .composer-bottombar {
    flex-direction: column;
    align-items: stretch;
  }

  .composer-bottom-left,
  .composer-bottom-right {
    width: 100%;
  }

  .composer-bottom-right {
    justify-content: space-between;
  }
}

@media (max-width: 780px) {
  .setup-hero-metrics,
  .composer-launcher-row {
    grid-template-columns: 1fr;
  }

  .composer-launcher {
    width: 100%;
    min-width: 0;
  }

  .composer-bottom-right {
    justify-content: flex-start;
  }

  .composer-preset-rail.open {
    grid-auto-columns: minmax(230px, 82vw);
  }
}

/* Final composer panel normalization: keep trays readable in file:// and localhost builds. */
.composer-style-tray.open {
  display: grid;
}

.composer-style-tray .chip-wrap {
  display: grid;
  gap: 16px;
  max-width: 100%;
  overflow: visible;
}

.composer-style-tray .chip {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  max-width: none;
  overflow: hidden;
  text-overflow: clip;
}

.composer-style-tray .chip.custom {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.7);
}

.composer-style-tray .image-mode-panel,
.composer-style-tray .style-columns,
.composer-style-tray .style-column,
.composer-style-tray .style-chip-row {
  min-width: 0;
  max-width: 100%;
}

.composer-style-tray .image-mode-panel {
  border-color: rgba(28, 131, 122, 0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(213, 236, 232, 0.9), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 249, 0.9));
}

.composer-style-tray .image-mode-head strong,
.composer-style-tray .style-column-head strong {
  color: var(--ink);
}

.composer-style-tray .image-mode-head span,
.composer-style-tray .image-mode-head small,
.composer-style-tray .style-column-head span {
  color: var(--muted);
}

.composer-style-tray .image-mode-head small.selected {
  color: #0d5751;
  border-color: rgba(28, 131, 122, 0.25);
  background: rgba(213, 236, 232, 0.72);
}

.composer-style-tray .image-mode-card {
  border-color: rgba(22, 32, 28, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 248, 0.82)),
    #fff;
  color: var(--ink);
}

.composer-style-tray .image-mode-card:hover,
.composer-style-tray .image-mode-card.active {
  border-color: rgba(28, 131, 122, 0.34);
  background:
    linear-gradient(180deg, rgba(232, 247, 244, 0.95), rgba(255, 255, 255, 0.88)),
    #fff;
  color: #0e3d39;
  box-shadow: 0 14px 30px rgba(28, 131, 122, 0.1);
}

.composer-style-tray .image-mode-card span {
  color: var(--muted-strong);
}

.composer-style-tray .image-mode-card small {
  color: #1c837a;
}

.composer-style-tray .image-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}

.composer-style-tray .style-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: visible;
  padding-bottom: 0;
}

.composer-style-tray .style-column {
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  border-color: rgba(22, 32, 28, 0.08);
  background: rgba(255, 255, 255, 0.74);
}

.composer-style-tray .style-column.generic {
  border-color: rgba(28, 131, 122, 0.14);
  background: rgba(247, 252, 250, 0.86);
}

.composer-style-tray .style-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding: 2px 2px 4px;
}

.composer-style-tray .style-column.generic .chip {
  min-width: max-content;
  max-width: none;
  padding-inline: 16px;
}

.composer-style-tray .style-column-head strong,
.composer-style-tray .style-column-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .composer-style-tray .image-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .composer-style-tray .image-mode-head {
    flex-direction: column;
  }

  .composer-style-tray .image-mode-grid {
    grid-template-columns: 1fr;
  }

  .composer-style-tray .style-column {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.composer-preset-rail {
  width: 100%;
  max-width: 100%;
}

.composer-preset-rail.open {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-columns: initial;
  gap: 14px;
  overflow: visible;
  scroll-snap-type: none;
}

.composer-preset-rail.open::before {
  content: "Advanced template presets · click a card to fill the full RAG template";
  position: static;
  grid-column: 1 / -1;
  z-index: auto;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background: rgba(16, 24, 21, 0.05);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: normal;
}

.composer-preset-rail .preset-slide {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1180px) {
  .composer-preset-rail.open {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .composer-preset-rail.open {
    grid-template-columns: 1fr;
  }
}

/* Prompt Reactor: circular creator input and agent charging ring. */
.composer-card.composer-studio {
  --reactor-accent: #16766f;
  --reactor-ink: #101815;
  --reactor-soft: rgba(22, 118, 111, 0.12);
  padding: clamp(18px, 2.4vw, 32px);
  overflow: visible;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.98), transparent 42%),
    radial-gradient(circle at 18% 22%, rgba(222, 242, 238, 0.94), transparent 32%),
    radial-gradient(circle at 78% 16%, rgba(255, 241, 216, 0.9), transparent 30%),
    linear-gradient(180deg, rgba(250, 253, 250, 0.98), rgba(242, 247, 244, 0.94));
}

.reactor-shell {
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(12px, 2.4vw, 28px) 0 clamp(6px, 1.4vw, 18px);
}

.reactor-orb {
  --reactor-progress: 0deg;
  --node-radius: clamp(210px, 27vw, 332px);
  position: relative;
  isolation: isolate;
  width: min(680px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  transition: filter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reactor-halo,
.reactor-ring,
.reactor-scanline {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.reactor-halo {
  inset: 6%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(22, 118, 111, 0.18), transparent 64%);
  box-shadow:
    0 44px 120px rgba(35, 56, 48, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.reactor-ring {
  inset: 0;
  z-index: 0;
  background:
    conic-gradient(from -90deg, #0f3f3a var(--reactor-progress), rgba(17, 24, 21, 0.075) 0),
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 24px), #000 calc(100% - 23px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 24px), #000 calc(100% - 23px));
  box-shadow: inset 0 0 0 1px rgba(22, 32, 28, 0.08);
  transition: background 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reactor-ring::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: inherit;
  border: 1px solid rgba(22, 32, 28, 0.08);
  box-shadow: inset 0 0 48px rgba(22, 118, 111, 0.08);
}

.reactor-scanline {
  inset: 14%;
  z-index: -1;
  border: 1px solid rgba(22, 32, 28, 0.06);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 48%, rgba(255, 255, 255, 0.34)),
    repeating-linear-gradient(90deg, rgba(22, 32, 28, 0.035) 0 1px, transparent 1px 22px);
  opacity: 0.65;
}

.reactor-orb[data-reactor-state="running"] .reactor-scanline {
  animation: reactorScan 8s linear infinite;
}

.reactor-orb[data-reactor-state="running"] {
  filter: saturate(1.04);
}

.reactor-core {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  width: min(66%, 480px);
  min-width: 0;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)),
    rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 34px 92px rgba(31, 48, 42, 0.16);
}

.reactor-core-top {
  gap: 10px;
}

.reactor-core .composer-launcher-row {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reactor-core .composer-launcher {
  min-height: 58px;
  padding: 10px;
  border-radius: 18px;
  box-shadow: none;
}

.reactor-core .composer-stage {
  min-height: clamp(180px, 18vw, 230px);
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 249, 0.9)),
    #fff;
}

.setup-main-column .reactor-core .idea-input.studio-input {
  min-height: clamp(152px, 15vw, 202px);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}

.reactor-core-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0 2px;
  color: rgba(30, 45, 40, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.reactor-core-status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reactor-core-status strong {
  flex: 0 0 auto;
  color: var(--reactor-ink);
  font-size: 18px;
  letter-spacing: -0.04em;
}

.reactor-node {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(76px, 8.2vw, 98px);
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 22px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 248, 0.74)),
    rgba(255, 255, 255, 0.82);
  color: rgba(30, 45, 40, 0.6);
  box-shadow: 0 16px 38px rgba(31, 48, 42, 0.1);
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--node-radius))
    rotate(calc(var(--angle) * -1));
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms cubic-bezier(0.16, 1, 0.3, 1),
    color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reactor-node span {
  color: rgba(22, 118, 111, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.reactor-node strong {
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.reactor-node:not(:disabled):hover {
  color: #0f3f3a;
  border-color: rgba(22, 118, 111, 0.32);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 48px rgba(22, 118, 111, 0.14);
}

.reactor-node[data-status="running"] {
  color: #0f3f3a;
  border-color: rgba(22, 118, 111, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(218, 244, 238, 0.96), rgba(255, 255, 255, 0.9)),
    #fff;
  box-shadow:
    0 22px 52px rgba(22, 118, 111, 0.18),
    0 0 0 8px rgba(22, 118, 111, 0.07);
}

.reactor-node[data-status="done"] {
  color: #fff;
  border-color: rgba(15, 63, 58, 0.96);
  background: linear-gradient(180deg, #174d47, #0f302c);
  box-shadow: 0 22px 52px rgba(15, 63, 58, 0.18);
}

.reactor-node[data-status="done"] span {
  color: rgba(255, 255, 255, 0.72);
}

.reactor-node:disabled {
  cursor: default;
}

.composer-card.is-expanded .reactor-orb {
  width: min(860px, 100%);
}

.composer-card.is-expanded .reactor-core {
  width: min(78%, 660px);
}

.composer-card.is-expanded .reactor-core .composer-stage {
  min-height: 310px;
}

.composer-card.is-expanded .reactor-core .idea-input.studio-input {
  min-height: 278px;
}

.trace-panel .workflow-marquee {
  display: none;
}

.trace-panel .trace-caption {
  max-width: 62ch;
}

@keyframes reactorScan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reactor-orb[data-reactor-state="running"] .reactor-scanline {
    animation: none;
  }
}

@media (max-width: 1120px) {
  .reactor-orb {
    --node-radius: clamp(186px, 31vw, 300px);
  }

  .reactor-core {
    width: min(68%, 470px);
  }
}

@media (max-width: 780px) {
  .reactor-shell {
    padding-top: 4px;
  }

  .reactor-orb {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
  }

  .reactor-halo,
  .reactor-ring,
  .reactor-scanline {
    display: none;
  }

  .reactor-core {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    transform: none;
    border-radius: 26px;
  }

  .reactor-node {
    position: relative;
    inset: auto;
    order: 2;
    flex: 1 1 88px;
    width: auto;
    min-height: 48px;
    border-radius: 16px;
    transform: none;
  }

  .reactor-core .composer-launcher-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .reactor-core {
    padding: 14px;
  }

  .reactor-core-top {
    align-items: stretch;
  }

  .reactor-core .composer-launcher-row {
    grid-template-columns: 1fr;
  }

  .reactor-core .composer-stage {
    min-height: 220px;
  }

  .setup-main-column .reactor-core .idea-input.studio-input {
    min-height: 190px;
  }

  .reactor-node {
    flex-basis: calc(50% - 8px);
  }
}

/* Dark-tech luxury cockpit theme. Keep this late in the file so it safely overrides the light prototype. */
:root {
  --bg: #05080b;
  --bg-strong: #081017;
  --panel: rgba(10, 18, 24, 0.74);
  --panel-strong: rgba(16, 28, 36, 0.92);
  --panel-dark: #060a0d;
  --panel-dark-soft: #0b151b;
  --line: rgba(154, 214, 218, 0.14);
  --line-strong: rgba(154, 214, 218, 0.28);
  --ink: #edf7f7;
  --muted: rgba(207, 224, 224, 0.58);
  --muted-strong: rgba(229, 240, 238, 0.76);
  --accent: #7ee4df;
  --accent-soft: rgba(126, 228, 223, 0.12);
  --teal: #7ee4df;
  --teal-soft: rgba(126, 228, 223, 0.14);
  --gold: #d8b777;
  --obsidian: #04070a;
  --shadow-lg: 0 34px 110px rgba(0, 0, 0, 0.48);
  --shadow-md: 0 18px 58px rgba(0, 0, 0, 0.34);
}

html {
  background: #05080b; scrollbar-color: rgba(126, 228, 223, 0.14) transparent;
}

body {
  background:
    radial-gradient(circle at 50% -16%, rgba(126, 228, 223, 0.2), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(216, 183, 119, 0.14), transparent 26%),
    radial-gradient(circle at 8% 82%, rgba(65, 149, 156, 0.2), transparent 34%),
    linear-gradient(135deg, #04070a 0%, #071018 46%, #04070b 100%);
  color: var(--ink);
}

body::before {
  z-index: 0;
  opacity: 0.72;
  background-image:
    linear-gradient(rgba(126, 228, 223, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 228, 223, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 82%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 82%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

#app {
  position: relative;
  z-index: 1;
  grid-template-columns: 248px minmax(0, 1fr);
  transition: grid-template-columns 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

#app.sidebar-collapsed {
  grid-template-columns: 88px minmax(0, 1fr);
}
/* ── Dark-theme scrollbars ── */
.page-scroll::-webkit-scrollbar,
.setup-panel::-webkit-scrollbar,
.prompt-body::-webkit-scrollbar,
.review-summary::-webkit-scrollbar,
.api-preview::-webkit-scrollbar,
.agent-trace::-webkit-scrollbar,
.history-snippet::-webkit-scrollbar,
.composer-card.composer-studio .composer-style-tray::-webkit-scrollbar,
.composer-card.composer-studio .composer-reference-tray::-webkit-scrollbar,
.prompt-stage-card .prompt-toolbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.page-scroll::-webkit-scrollbar-thumb,
.setup-panel::-webkit-scrollbar-thumb,
.prompt-body::-webkit-scrollbar-thumb,
.review-summary::-webkit-scrollbar-thumb,
.api-preview::-webkit-scrollbar-thumb,
.agent-trace::-webkit-scrollbar-thumb,
.history-snippet::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.14);
}


.sidebar {
  padding: 16px 8px 16px 16px;
}

.sidebar-shell {
  gap: 18px;
  background:
    radial-gradient(circle at 16% 4%, rgba(126, 228, 223, 0.16), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(216, 183, 119, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(12, 22, 29, 0.92), rgba(5, 9, 12, 0.96));
  border-color: rgba(157, 225, 224, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 90px rgba(0, 0, 0, 0.5);
}

.sidebar-shell::before {
  border-color: rgba(126, 228, 223, 0.08);
  box-shadow: inset 0 0 48px rgba(126, 228, 223, 0.04);
}

.sidebar-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.sidebar-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  gap: 4px;
  border-radius: 14px;
  border: 1px solid rgba(126, 228, 223, 0.18);
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.sidebar-toggle span {
  width: 15px;
  height: 1px;
  display: block;
  background: rgba(231, 252, 250, 0.86);
  box-shadow: 0 0 10px rgba(126, 228, 223, 0.52);
  transition: transform var(--transition), width var(--transition);
}

.sidebar-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 228, 223, 0.42);
  background: rgba(126, 228, 223, 0.12);
}

#app.sidebar-collapsed .sidebar-toggle span:first-child {
  width: 10px;
  transform: translateX(2px) rotate(36deg);
}

#app.sidebar-collapsed .sidebar-toggle span:last-child {
  width: 10px;
  transform: translateX(2px) rotate(-36deg);
}

.sidebar-kicker {
  color: rgba(209, 238, 235, 0.46);
}

.brand {
  border-bottom-color: rgba(126, 228, 223, 0.12);
}

.brand-mark {
  background:
    radial-gradient(circle at 32% 18%, rgba(255,255,255,.5), transparent 26%),
    linear-gradient(135deg, #d8b777, #7ee4df 92%);
  color: #071014;
  box-shadow:
    0 18px 48px rgba(126, 228, 223, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.brand strong,
.sidebar-foot strong {
  color: #f2fbfa;
}

.brand span,
.sidebar-foot span,
.sidebar-foot p {
  color: rgba(221, 238, 236, 0.58);
}

.nav-item {
  color: rgba(223, 242, 240, 0.68);
  border-color: rgba(126, 228, 223, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.nav-item::before {
  background: linear-gradient(90deg, rgba(126, 228, 223, 0.16), transparent 68%);
}

.nav-item:hover {
  background: rgba(126, 228, 223, 0.08);
  color: #f5fffd;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.nav-item.active {
  background:
    linear-gradient(135deg, rgba(126, 228, 223, 0.18), rgba(216, 183, 119, 0.1)),
    rgba(255, 255, 255, 0.045);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(126, 228, 223, 0.18),
    0 18px 38px rgba(0, 0, 0, 0.34);
}

.nav-icon {
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
  color: rgba(231, 252, 250, 0.86);
  box-shadow: inset 0 0 0 1px rgba(126, 228, 223, 0.08);
}

.nav-item[data-view="sessions"] {
  border-color: rgba(255, 170, 80, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 170, 80, 0.12), rgba(174, 220, 118, 0.035)),
    rgba(255, 255, 255, 0.026);
  color: rgba(255, 231, 194, 0.92);
}

.nav-item[data-view="sessions"]::before {
  background: linear-gradient(90deg, rgba(255, 170, 80, 0.22), transparent 68%);
}

.nav-item[data-view="sessions"] .nav-icon {
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 248, 232, 0.22), transparent 30%),
    linear-gradient(145deg, rgba(255, 170, 80, 0.36), rgba(99, 64, 23, 0.7)),
    rgba(18, 12, 8, 0.72);
  color: #fff4dc;
  box-shadow:
    inset 0 0 0 1px rgba(255, 201, 132, 0.24),
    0 10px 26px rgba(255, 140, 48, 0.14);
}

.nav-item[data-view="sessions"]:hover,
.nav-item[data-view="sessions"].active {
  border-color: rgba(255, 170, 80, 0.46);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 201, 132, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 170, 80, 0.26), rgba(126, 228, 223, 0.08)),
    rgba(25, 15, 8, 0.78);
  color: #fff8e8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 201, 132, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(255, 140, 48, 0.12);
}

.nav-item[data-view="sessions"].active .nav-icon {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 248, 232, 0.38), transparent 30%),
    linear-gradient(145deg, rgba(255, 182, 92, 0.92), rgba(176, 91, 28, 0.86));
  color: rgba(20, 10, 4, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 12px 30px rgba(255, 140, 48, 0.24);
}

#app.sidebar-collapsed .sidebar {
  padding-right: 0;
}

#app.sidebar-collapsed .sidebar-shell {
  padding-inline: 12px;
  align-items: center;
}

#app.sidebar-collapsed .sidebar-topline {
  justify-content: center;
}

#app.sidebar-collapsed .sidebar-kicker,
#app.sidebar-collapsed .brand > div:not(.brand-mark),
#app.sidebar-collapsed .nav-item > span:not(.nav-icon),
#app.sidebar-collapsed .sidebar-foot {
  display: none;
}

#app.sidebar-collapsed .brand {
  justify-content: center;
  padding-bottom: 14px;
}

#app.sidebar-collapsed .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

#app.sidebar-collapsed .sidebar-nav {
  width: 100%;
}

#app.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px;
}

#app.sidebar-collapsed .nav-item:hover {
  transform: translateY(-1px);
}

.shell {
  background:
    radial-gradient(circle at 50% 18%, rgba(126, 228, 223, 0.075), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 24%);
}

.topbar {
  border-color: rgba(126, 228, 223, 0.14);
  background:
    radial-gradient(circle at 84% 0%, rgba(126, 228, 223, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(18, 29, 37, 0.82), rgba(8, 14, 19, 0.72)),
    rgba(8, 14, 19, 0.86);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 70px rgba(0, 0, 0, 0.36);
}

.eyebrow {
  color: rgba(216, 183, 119, 0.86);
}

.topbar h1,
.page-hero h2,
.setup-hero-title {
  color: #f3fbfa;
  text-shadow: 0 0 28px rgba(126, 228, 223, 0.14);
}

.topbar p:last-child,
.page-hero p:last-child {
  color: rgba(215, 231, 229, 0.62);
}

.topbar-actions {
  border-color: rgba(126, 228, 223, 0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(5, 10, 14, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.ghost-btn,
.primary-btn,
.ghost-btn.small, .primary-btn.small {
  border-color: rgba(126, 228, 223, 0.16);
}

.ghost-btn {
  color: rgba(232, 250, 248, 0.86);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(255, 255, 255, 0.02);
}

.ghost-btn:hover {
  border-color: rgba(126, 228, 223, 0.34);
  background: rgba(126, 228, 223, 0.1);
  color: #ffffff;
}

.primary-btn,
.composer-send-btn {
  background: linear-gradient(180deg, #d8b777, #8ff1eb);
  color: #041012;
  box-shadow:
    0 18px 44px rgba(126, 228, 223, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.panel,
.setup-shell,
.trace-panel,
.output-panel,
.page-hero,
.template-use-workspace,
.composer-card.composer-studio,
.output-stage-premium,
.prompt-card,
.overview-card,
.support-card,
.api-card,
.agent-skill-card,
.rag-card,
.template-card,
.log-card {
  border-color: rgba(126, 228, 223, 0.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 228, 223, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.78), rgba(7, 12, 16, 0.82)),
    rgba(8, 14, 19, 0.84);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 26px 78px rgba(0, 0, 0, 0.38);
}
/* ── Dark cockpit: card types not covered by the panel group ── */
.band-card,
.schema-card,
.field-card,
.lifecycle-card,
.admin-card,
.rubric-card,
.workflow-board div,
.history-card,
.history-empty,
.empty-state {
  border-color: rgba(126, 228, 223, 0.12);
  background: linear-gradient(180deg, rgba(17, 29, 37, 0.78), rgba(7, 12, 16, 0.82)),
    rgba(8, 14, 19, 0.84);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 26px 78px rgba(0, 0, 0, 0.38);
}

.history-card-meta span {
  background: rgba(126, 228, 223, 0.1);
  border-color: rgba(126, 228, 223, 0.12);
  color: rgba(213, 232, 230, 0.68);
}
.history-diagnostics {
  background: rgba(126, 228, 223, 0.06);
  border-color: rgba(126, 228, 223, 0.1);
  color: rgba(213, 232, 230, 0.68);
}
.library-shot-row span {
  background: rgba(126, 228, 223, 0.08);
  border-color: rgba(126, 228, 223, 0.12);
  color: rgba(213, 232, 230, 0.68);
}

.setup-panel {
  overflow: visible;
}

.setup-hero-band {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.composer-card.composer-studio {
  --reactor-accent: #7ee4df;
  --reactor-ink: #edf7f7;
  --reactor-soft: rgba(126, 228, 223, 0.12);
  padding: clamp(18px, 2.2vw, 30px);
  background:
    radial-gradient(circle at 50% 43%, rgba(126, 228, 223, 0.12), transparent 42%),
    radial-gradient(circle at 50% 92%, rgba(216, 183, 119, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(7, 13, 18, 0.78), rgba(3, 7, 10, 0.92));
}

.composer-card.composer-studio::before {
  background:
    linear-gradient(90deg, transparent, rgba(126, 228, 223, 0.1), transparent),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(126, 228, 223, 0.08) 48%, transparent 56%);
  opacity: 0.85;
}

.reactor-shell {
  padding-block: clamp(16px, 2.4vw, 34px);
}

.reactor-orb {
  --node-radius: clamp(228px, 29vw, 382px);
  width: min(800px, 100%);
}

.reactor-halo {
  inset: -2%;
  background:
    radial-gradient(circle at 50% 50%, rgba(126, 228, 223, 0.14), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(126, 228, 223, 0.12) 51%, transparent 53%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(216, 183, 119, 0.09) 63%, transparent 65%);
  box-shadow:
    0 0 120px rgba(126, 228, 223, 0.16),
    inset 0 0 90px rgba(126, 228, 223, 0.08);
}

.reactor-ring {
  background:
    conic-gradient(from -90deg, #8ff1eb var(--reactor-progress), rgba(126, 228, 223, 0.085) 0),
    radial-gradient(circle, transparent 58%, rgba(126, 228, 223, 0.1) 59%, transparent 61%),
    radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent 58%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  box-shadow:
    0 0 34px rgba(126, 228, 223, 0.14);
}

.reactor-ring::after {
  inset: 52px;
  border-color: rgba(126, 228, 223, 0.13);
  box-shadow:
    inset 0 0 52px rgba(126, 228, 223, 0.08),
    0 0 0 1px rgba(216, 183, 119, 0.06);
}

.reactor-scanline {
  inset: 9%;
  border-color: rgba(126, 228, 223, 0.08);
  background:
    linear-gradient(90deg, transparent, rgba(126, 228, 223, 0.12), transparent),
    repeating-linear-gradient(90deg, rgba(126, 228, 223, 0.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px);
  opacity: 0.9;
}

.reactor-core {
  width: min(58%, 500px);
  border-color: rgba(126, 228, 223, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 228, 223, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(15, 27, 35, 0.88), rgba(6, 11, 15, 0.86));
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 34px 110px rgba(0, 0, 0, 0.56),
    0 0 70px rgba(126, 228, 223, 0.08);
}

.reactor-core .composer-launcher,
.reactor-core .composer-stage,
.composer-tray,
.segmented.compact .segment,
.duration-row.compact input,
.composer-meta-trigger,
.composer-meta-readout,
.composer-reset-btn {
  border-color: rgba(126, 228, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(4, 9, 12, 0.58);
  color: rgba(231, 248, 246, 0.82);
}

.composer-launcher-glyph {
  border-color: rgba(126, 228, 223, 0.18);
  color: #8ff1eb;
  background: rgba(126, 228, 223, 0.08);
}

.composer-launcher strong,
.duration-row.compact span,
.composer-meta-readout strong,
.composer-tray .field-label,
.reactor-core-status strong {
  color: #f2fbfa;
}

.composer-launcher small,
.composer-tray .mention-panel-tip,
.composer-tray .composer-inline-note,
.reactor-core-status,
.composer-control-label {
  color: rgba(213, 232, 230, 0.58);
}

.reactor-core .composer-stage {
  min-height: clamp(198px, 18vw, 246px);
}

.setup-main-column .reactor-core .idea-input.studio-input {
  color: #eefafa;
  caret-color: #8ff1eb;
}

.setup-main-column .reactor-core .idea-input.studio-input::placeholder {
  color: rgba(219, 236, 234, 0.42);
}

.reactor-node {
  width: clamp(72px, 7.4vw, 92px);
  min-height: 58px;
  border-color: rgba(126, 228, 223, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 31, 39, 0.9), rgba(6, 12, 16, 0.86)),
    rgba(6, 12, 16, 0.9);
  color: rgba(222, 241, 239, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 20px 58px rgba(0, 0, 0, 0.42);
}

.reactor-node span {
  color: rgba(126, 228, 223, 0.86);
}

.reactor-node:not(:disabled):hover,
.reactor-node[data-status="running"] {
  color: #f7fffd;
  border-color: rgba(143, 241, 235, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 228, 223, 0.2), transparent 68%),
    linear-gradient(180deg, rgba(17, 40, 48, 0.96), rgba(4, 12, 16, 0.92));
  box-shadow:
    0 0 0 1px rgba(126, 228, 223, 0.16),
    0 0 42px rgba(126, 228, 223, 0.2),
    0 22px 58px rgba(0, 0, 0, 0.44);
}

.reactor-node[data-status="done"] {
  color: #061014;
  border-color: rgba(216, 183, 119, 0.58);
  background: linear-gradient(180deg, #d8b777, #8ff1eb);
  box-shadow:
    0 0 38px rgba(126, 228, 223, 0.2),
    0 22px 58px rgba(0, 0, 0, 0.42);
}

.reactor-node[data-status="done"] span {
  color: rgba(5, 16, 20, 0.72);
}

.composer-send-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.segmented.compact .segment.active {
  border-color: rgba(143, 241, 235, 0.46);
  background: rgba(126, 228, 223, 0.18);
  color: #f2fffd;
}

.composer-style-tray .image-mode-panel,
.composer-style-tray .style-column,
.composer-style-tray .style-column.generic,
.composer-style-tray .image-mode-card,
.composer-style-tray .chip,
.composer-reference-tray .reference-preview.empty,
.reference-tile,
.reference-actions button {
  border-color: rgba(126, 228, 223, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(4, 9, 12, 0.55);
  color: rgba(226, 243, 241, 0.74);
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip.active,
.composer-style-tray .image-mode-card:hover,
.composer-style-tray .image-mode-card.active {
  border-color: rgba(143, 241, 235, 0.42);
  background: rgba(126, 228, 223, 0.12);
  color: #f2fffd;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
}

.prompt-body,
.review-summary,
.api-preview,
.template-editor,
.preview-content {
  border-color: rgba(126, 228, 223, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(2, 6, 9, 0.72);
  color: rgba(235, 249, 247, 0.86);
}

.quality-badge,
.trace-status,
.export-status,
.tag-pill,
.asset-status-badge {
  border-color: rgba(126, 228, 223, 0.18);
  background: rgba(126, 228, 223, 0.1);
  color: rgba(238, 255, 253, 0.9);
/* ── Dark cockpit: badge / notice / trace idle variant overrides ── */
.quality-badge.empty {
  background: rgba(126, 228, 223, 0.08);
  color: rgba(213, 232, 230, 0.68);
}
.notice-card.neutral,
.notice-card.good,
.notice-card.info,
.notice-card.warn,
.notice-card.error {
  border-color: rgba(126, 228, 223, 0.14);
  background:
    linear-gradient(135deg, rgba(17, 29, 37, 0.82), rgba(7, 12, 16, 0.86)),
    rgba(8, 14, 19, 0.84);
}
.notice-card .ghost-btn {
  background: rgba(126, 228, 223, 0.1);
  border-color: rgba(126, 228, 223, 0.16);
  color: rgba(232, 250, 248, 0.86);
}
.trace-card[data-status="idle"] .trace-status {
  background: rgba(126, 228, 223, 0.1);
  color: rgba(213, 232, 230, 0.68);
}
.reactor-core-status {
  color: rgba(213, 232, 230, 0.58);
}
}

/* ── Dark cockpit: remaining sub-element light-background overrides ── */
.support-card .review-summary {
  background: linear-gradient(180deg, rgba(17, 29, 37, 0.86), rgba(7, 12, 16, 0.88));
  border-color: rgba(126, 228, 223, 0.12);
  color: rgba(235, 249, 247, 0.86);
}
.review-dimension-card {
  background: linear-gradient(180deg, rgba(17, 29, 37, 0.78), rgba(7, 12, 16, 0.82));
  border-color: rgba(126, 228, 223, 0.12);
}
.status-dot.idle {
  background: rgba(126, 228, 223, 0.1);
  color: rgba(213, 232, 230, 0.68);
}
.premium-pill-row .tag-pill {
  background: rgba(126, 228, 223, 0.1);
  border-color: rgba(126, 228, 223, 0.14);
  color: rgba(232, 250, 248, 0.86);
}
.history-badge.info,
.history-badge.warn,
.history-badge.error {
  background: rgba(126, 228, 223, 0.12);
  color: rgba(213, 232, 230, 0.68);
}
.library-facts div {
  background: rgba(126, 228, 223, 0.06);
  border-color: rgba(126, 228, 223, 0.12);
}
.asset-side {
  background: rgba(126, 228, 223, 0.06);
  border-color: rgba(126, 228, 223, 0.12);
  color: rgba(213, 232, 230, 0.68);
}
.agent-skill-block,
.agent-skill-columns section {
  background: rgba(126, 228, 223, 0.06);
  border-color: rgba(126, 228, 223, 0.12);
}
.agent-skill-columns section.danger {
  background: rgba(154, 72, 87, 0.1);
  border-color: rgba(154, 72, 87, 0.2);
}
.prompt-export-meta {
  background: linear-gradient(90deg, rgba(126, 228, 223, 0.08), rgba(17, 29, 37, 0.8));
  border-color: rgba(126, 228, 223, 0.14);
}


.trace-card {
  border-color: rgba(126, 228, 223, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(6, 12, 16, 0.72);
  color: var(--ink);
}

.trace-card[data-status="running"] {
  border-color: rgba(143, 241, 235, 0.42);
  box-shadow: 0 0 44px rgba(126, 228, 223, 0.12);
}

.trace-card h3,
.prompt-head span,
.overview-card-head strong,
.panel-head h2,
.review-dimension-top strong {
  color: #f2fbfa;
}

.trace-card p,
.prompt-caption,
.summary-label,
.review-dimension-card p,
.empty-inline,
.muted {
  color: rgba(213, 232, 230, 0.58);
}

@media (max-width: 1120px) {
  .reactor-orb {
    --node-radius: clamp(202px, 30vw, 332px);
    width: min(720px, 100%);
  }

  .reactor-core {
    width: min(62%, 470px);
  }
}

@media (max-width: 780px) {
  #app,
  #app.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  #app.sidebar-collapsed .sidebar-kicker,
  #app.sidebar-collapsed .brand > div:not(.brand-mark),
  #app.sidebar-collapsed .nav-item > span:not(.nav-icon) {
    display: inline;
  }

  #app.sidebar-collapsed .sidebar-shell {
    align-items: stretch;
  }

  .sidebar-toggle {
    display: none;
  }

  .reactor-orb {
    width: 100%;
  }

  .reactor-core {
    width: 100%;
  }
}

/* Reference-inspired photon ring and slide-out composer drawers. */
.reactor-orb::before,
.reactor-orb::after {
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  pointer-events: none;
}

.reactor-orb::before {
  z-index: -1;
  background:
    repeating-radial-gradient(circle, rgba(188, 235, 255, 0.18) 0 1px, transparent 1px 5px),
    conic-gradient(from 18deg, transparent 0deg, rgba(189, 238, 255, 0.45) 16deg, transparent 34deg, rgba(126, 228, 223, 0.22) 72deg, transparent 108deg, rgba(255, 255, 255, 0.32) 176deg, transparent 212deg, rgba(84, 142, 196, 0.24) 276deg, transparent 360deg);
  opacity: 0.72;
  filter: blur(0.7px);
  animation: reactorPhotonDrift 22s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent 0 37%, #000 42% 74%, transparent 83%);
  mask: radial-gradient(farthest-side, transparent 0 37%, #000 42% 74%, transparent 83%);
}

.reactor-orb::after {
  z-index: 1;
  inset: 7%;
  background:
    repeating-radial-gradient(circle, transparent 0 7px, rgba(214, 244, 255, 0.08) 8px 9px),
    conic-gradient(from -90deg, rgba(255, 255, 255, 0.72) 0deg, rgba(126, 228, 223, 0.14) var(--reactor-progress), transparent var(--reactor-progress));
  opacity: 0.58;
  filter: blur(1.1px);
  -webkit-mask: radial-gradient(farthest-side, transparent 0 42%, #000 45% 69%, transparent 75%);
  mask: radial-gradient(farthest-side, transparent 0 42%, #000 45% 69%, transparent 75%);
}

.reactor-halo {
  inset: -8%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(231, 250, 255, 0.5) 37%, rgba(134, 204, 237, 0.2) 43%, transparent 57%),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(45, 84, 126, 0.42) 66%, transparent 78%);
  filter: blur(1.2px);
}

.reactor-ring {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.reactor-orb[data-reactor-state="running"]::before {
  animation-duration: 9s;
  opacity: 0.94;
}

.reactor-orb[data-reactor-state="running"]::after {
  animation: reactorPhotonDriftReverse 7s linear infinite;
}

.reactor-core .composer-bottombar {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(126, 228, 223, 0.1);
}

.reactor-core .composer-bottom-left,
.reactor-core .composer-bottom-right {
  width: 100%;
  justify-content: space-between;
}

.reactor-core .composer-inline-control {
  flex: 1 1 220px;
  min-width: 0;
}

.reactor-core .composer-bottom-right {
  display: grid;
  grid-template-columns: auto auto minmax(72px, auto) 54px;
  align-items: center;
}

.composer-card.composer-studio:has(.composer-tray.open)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: radial-gradient(circle at 84% 34%, rgba(126, 228, 223, 0.11), transparent 32%);
}

.composer-card.composer-studio .composer-tray {
  max-height: calc(100dvh - 56px);
}

.composer-card.composer-studio .composer-style-tray,
.composer-card.composer-studio .composer-reference-tray {
  position: fixed;
  top: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  width: min(560px, calc(100vw - 56px));
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
  overflow: auto;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(34px) scale(0.98);
  transition:
    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  border-color: rgba(189, 238, 255, 0.2);
  background:
    radial-gradient(circle at 50% 0%, rgba(189, 238, 255, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(12, 23, 31, 0.96), rgba(4, 8, 12, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 100px rgba(0, 0, 0, 0.58),
    0 0 70px rgba(126, 228, 223, 0.1);
}

/* ── Style tray: absolute on orb midline, scrolls with page ── */
.composer-card.composer-studio .composer-style-tray.open {
  position: absolute;
  top: 50%;
  right: max(8px, 1.5%);
  transform: translateY(-50%) scale(1) !important;
  max-height: min(86vh, 700px);
  width: min(520px, 44vw);
  z-index: 10;
}
.composer-style-tray .field-label {
  font-size: 18px;
  letter-spacing: 0.04em;
}
.composer-style-tray .composer-inline-note {
  font-size: 13px;
}

.composer-card.composer-studio .composer-style-tray.open,
.composer-card.composer-studio .composer-reference-tray.open,
.composer-card.composer-studio .composer-reference-tray.has-reference {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.composer-card.composer-studio .mention-panel.open {
  margin-top: 14px;
}

.composer-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@keyframes reactorPhotonDrift {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.01);
  }
}

@keyframes reactorPhotonDriftReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@media (max-width: 980px) {
  .reactor-core .composer-bottom-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reactor-core .composer-send-btn {
    justify-self: end;
  }
}

@media (max-width: 780px) {
  .reactor-orb::before,
  .reactor-orb::after {
    display: none;
  }

  .composer-card.composer-studio .composer-style-tray,
  .composer-card.composer-studio .composer-reference-tray {
    inset: auto 12px 12px;
    top: 76px;
    width: auto;
    border-radius: 24px;
  }
}

.template-use-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  margin: 22px 0 24px;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 30px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background:
    radial-gradient(circle at 18% 0%, rgba(213, 236, 232, 0.72), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 247, 0.92)),
    #fff;
  box-shadow: 0 24px 70px rgba(30, 46, 41, 0.1);
}

.template-use-copy {
  display: grid;
  align-content: start;
  gap: 14px;
}

.template-use-copy h3 {
  margin: 0;
  max-width: 11ch;
  color: var(--ink);
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.template-use-copy p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.72;
}

.template-use-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-use-meta span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(22, 32, 28, 0.06);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.template-use-editor-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(22, 32, 28, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.template-use-editor-head,
.template-editor-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.template-use-editor-head strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.template-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.template-editor {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(22, 32, 28, 0.09);
  background: rgba(248, 251, 249, 0.92);
  color: var(--ink);
  font: 500 14px/1.75 "SFMono-Regular", "Menlo", "Monaco", Consolas, monospace;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.template-editor:focus {
  border-color: rgba(28, 131, 122, 0.36);
  background: #fff;
}

.template-editor-foot {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.template-editor-foot span:first-child {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* ── Dark cockpit: template-use-workspace cascade override ── */
.template-use-workspace {
  border-color: rgba(126, 228, 223, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 228, 223, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.9), rgba(7, 12, 16, 0.92)),
    rgba(8, 14, 19, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 26px 78px rgba(0, 0, 0, 0.38);
}
.template-use-editor-card,
.template-editor {
  border-color: rgba(126, 228, 223, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 249, 247, 0.86);
}
.template-use-meta span {
  background: rgba(126, 228, 223, 0.1);
  color: rgba(213, 232, 230, 0.68);
}
.template-editor-foot,
.template-editor-foot span:first-child {
  color: rgba(213, 232, 230, 0.68);
}


@media (max-width: 1080px) {
  .template-use-workspace {
    grid-template-columns: 1fr;
  }

  .template-use-copy h3 {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .template-use-editor-head,
  .template-editor-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-editor-actions {
    justify-content: flex-start;
  }
}

/* Final stability pass: dark-tech cockpit containment and contrast fixes. */
html,
body,
#app,
.shell,
.view,
.workbench-grid,
.setup-shell,
.setup-content-grid,
.setup-main-column,
.composer-shell,
.composer-card,
.reactor-shell,
.trace-panel,
.output-panel,
.output-stage,
.output-stage-premium,
.prompt-card,
.support-grid,
.template-use-workspace {
  min-width: 0;
  max-width: 100%;
}

.shell {
  overflow-x: clip;
}

.topbar {
  margin: 16px clamp(14px, 1.8vw, 24px) 0;
  border-radius: 28px;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.topbar-actions {
  max-width: 100%;
  flex-wrap: nowrap;
}

.topbar-actions .ghost-btn {
  white-space: nowrap;
}

.view[data-view-panel="workbench"] {
  padding: 18px clamp(14px, 1.8vw, 26px) 44px;
  overflow-x: clip;
}

.workbench-grid {
  width: 100%;
  overflow: visible;
}

/* Template library uses one scroll surface so the global title does not
   remain detached above the template content while browsing the catalog. */
#app[data-active-view="templates"] .shell,
#app[data-active-view="logs"] .shell,
#app[data-active-view="frames"] .shell {
  height: 100vh;
  overflow-x: clip;
  overflow-y: auto;
}

#app[data-active-view="templates"] .view[data-view-panel="templates"] .page-scroll,
#app[data-active-view="logs"] .view[data-view-panel="logs"] .page-scroll,
#app[data-active-view="frames"] .view[data-view-panel="frames"] .page-scroll {
  height: auto;
  min-height: calc(100vh - 126px);
  overflow: visible;
}

@media (max-width: 720px) {
  #app[data-active-view="templates"] .shell,
  #app[data-active-view="logs"] .shell,
  #app[data-active-view="frames"] .shell {
    height: auto;
    overflow: visible;
  }

  #app[data-active-view="templates"] .view[data-view-panel="templates"] .page-scroll,
  #app[data-active-view="logs"] .view[data-view-panel="logs"] .page-scroll,
  #app[data-active-view="frames"] .view[data-view-panel="frames"] .page-scroll {
    min-height: 0;
  }
}

.setup-panel,
.trace-panel,
.output-panel {
  overflow: visible;
}

.composer-card.composer-studio {
  overflow: visible;
  border-color: rgba(143, 241, 235, 0.14);
}

.reactor-shell {
  overflow: visible;
  padding-inline: max(0px, min(2vw, 22px));
}

.reactor-orb {
  width: min(980px, 100%);
  aspect-ratio: 1.48;
  --node-radius: clamp(206px, 25vw, 356px);
}

.reactor-orb::before,
.reactor-orb::after,
.reactor-halo,
.reactor-ring,
.reactor-scanline {
  border-radius: 50%;
}

.reactor-node {
  transform: translate(-50%, -50%);
}

.reactor-node[data-reactor-stage="interpret"] {
  left: 50%;
  top: 6.5%;
}

.reactor-node[data-reactor-stage="script"] {
  left: 79%;
  top: 14.5%;
}

.reactor-node[data-reactor-stage="plan"] {
  left: 94.5%;
  top: 47%;
}

.reactor-node[data-reactor-stage="retrieve"] {
  left: 78%;
  top: 84.5%;
}

.reactor-node[data-reactor-stage="draft"] {
  left: 50%;
  top: 93.5%;
}

.reactor-node[data-reactor-stage="review"] {
  left: 22%;
  top: 84.5%;
}

.reactor-node[data-reactor-stage="rewrite"] {
  left: 5.5%;
  top: 47%;
}

.reactor-core {
  width: min(60%, 600px);
  max-height: none;
}

.reactor-core .composer-stage {
  min-height: clamp(132px, 11vw, 164px);
}

.setup-main-column .reactor-core .idea-input.studio-input {
  min-height: clamp(104px, 9vw, 136px);
  line-height: 1.56;
}

.reactor-core .composer-bottombar {
  grid-template-columns: 1fr;
}

.reactor-core .composer-bottom-left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.reactor-core .composer-inline-control {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: start;
}

.reactor-core .composer-control-label {
  grid-column: 1 / -1;
}

.reactor-core .segmented.compact {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
}

.reactor-core .segmented.compact .segment {
  flex: 1 1 auto;
  min-width: max-content;
}

.reactor-core .duration-row.compact {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}

.reactor-core .duration-row.compact:has(input:disabled) {
  display: none;
}

.reactor-core .duration-row.compact input {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.reactor-core .duration-row.compact input::-webkit-outer-spin-button,
.reactor-core .duration-row.compact input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.reactor-core .duration-row.compact span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.reactor-core .composer-bottom-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 52px;
  gap: 8px;
}

.reactor-core .composer-meta-readout {
  min-width: 0;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reactor-core .composer-expand-btn {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(143, 241, 235, 0.26);
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.16), transparent 30%),
    rgba(126, 228, 223, 0.12);
  color: #eafffd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.24);
}

.reactor-core .composer-expand-btn:hover {
  border-color: rgba(143, 241, 235, 0.48);
  background: rgba(126, 228, 223, 0.18);
}

.setup-main-column .reactor-core .idea-input.studio-input::placeholder {
  color: rgba(224, 241, 239, 0.56);
}

.reactor-node {
  overflow: hidden;
}

.reactor-node strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composer-card.composer-studio .composer-reference-tray.has-reference:not(.open),
.composer-card.composer-studio .composer-style-tray:not(.open),
.composer-card.composer-studio .composer-reference-tray:not(.open) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(34px) scale(0.98);
}

.composer-card.composer-studio .composer-style-tray.open,
.composer-card.composer-studio .composer-reference-tray.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.composer-card.composer-studio .composer-style-tray,
.composer-card.composer-studio .composer-reference-tray {
  color: #eefafa;
  background:
    radial-gradient(circle at 28% 0%, rgba(143, 241, 235, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(12, 23, 31, 0.98), rgba(4, 8, 12, 0.98));
}

.composer-panel-head {
  margin: -2px -2px 2px;
  padding: 2px 2px 12px;
  background: linear-gradient(180deg, rgba(8, 15, 20, 0.98), rgba(8, 15, 20, 0.72), transparent);
}

.composer-style-tray .image-mode-panel,
.composer-style-tray .style-column,
.composer-style-tray .style-column.generic,
.composer-style-tray .image-mode-card,
.composer-style-tray .chip,
.composer-reference-tray .reference-preview.empty,
.reference-tile,
.reference-actions button {
  border-color: rgba(126, 228, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.02)),
    rgba(3, 8, 12, 0.66);
  color: rgba(232, 250, 248, 0.86);
}

.composer-style-tray .image-mode-head strong,
.composer-style-tray .style-column-head strong,
.composer-style-tray .image-mode-card span,
.composer-style-tray .field-label,
.composer-reference-tray .field-label,
.reference-meta strong {
  color: #f2fffd;
}

.composer-style-tray .image-mode-head span,
.composer-style-tray .image-mode-head small,
.composer-style-tray .style-column-head span,
.composer-style-tray .image-mode-card small,
.composer-style-tray .composer-inline-note,
.composer-reference-tray .composer-inline-note,
.reference-meta span,
.reference-meta small {
  color: rgba(213, 232, 230, 0.62);
}

.composer-style-tray .style-chip-row {
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
}

.composer-style-tray .chip,
.composer-style-tray .style-column.generic .chip {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  min-height: 34px;
  padding-block: 7px;
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip.active,
.composer-style-tray .image-mode-card:hover,
.composer-style-tray .image-mode-card.active {
  color: #f8fffe;
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.18), rgba(126, 228, 223, 0.08)),
    rgba(6, 18, 22, 0.86);
}

.reference-tile {
  min-width: 0;
  grid-template-columns: 96px minmax(0, 1fr);
}

.reference-tile img {
  width: 96px;
  height: 96px;
}

.reference-actions {
  flex-wrap: wrap;
}

.prompt-stage-card .prompt-head {
  align-items: flex-start;
}

.prompt-stage-card .prompt-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  max-width: min(100%, 560px);
  scrollbar-width: thin;
}

.prompt-stage-card .prompt-toolbar .small {
  flex: 0 0 auto;
  white-space: nowrap;
}

.prompt-body,
.review-summary,
.api-preview,
.preview-content,
.template-editor {
  color: rgba(238, 251, 249, 0.9);
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 228, 223, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(2, 6, 9, 0.78);
  border-color: rgba(126, 228, 223, 0.14);
}

.template-editor:focus {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 228, 223, 0.1), transparent 30%),
    rgba(3, 8, 12, 0.86);
}

.template-editor-foot,
.template-editor-foot span:first-child {
  color: rgba(213, 232, 230, 0.68);
}

@media (max-width: 1260px) {
  .reactor-orb {
    width: min(900px, 100%);
    --node-radius: clamp(190px, 27vw, 320px);
  }

  .reactor-core {
    width: min(60%, 560px);
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .reactor-core .composer-bottom-left {
    grid-template-columns: 1fr;
  }

  .reactor-core .composer-bottom-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .reactor-shell {
    padding-inline: 0;
  }

  .reactor-core {
    width: 100%;
  }

  .reactor-core .composer-inline-control {
    grid-template-columns: 1fr;
  }

  .reactor-core .duration-row.compact {
    justify-self: stretch;
  }

  .composer-card.composer-studio .composer-style-tray,
  .composer-card.composer-studio .composer-reference-tray {
    width: auto;
    max-height: calc(100dvh - 96px);
  }

  .prompt-stage-card .prompt-head {
    display: grid;
  }

  .prompt-stage-card .prompt-toolbar {
    justify-content: flex-start;
    max-width: 100%;
  }
}

/* ── Final output surface: Safari-stable dark hierarchy ── */
.trace-panel .status-dot,
.output-panel .quality-badge,
.output-panel .export-status,
.trace-panel .trace-status {
  border: 1px solid rgba(126, 228, 223, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.trace-panel .status-dot.live,
.output-panel .quality-badge,
.output-panel .export-status.good,
.trace-panel .trace-card[data-status="running"] .trace-status {
  background: rgba(126, 228, 223, 0.12);
  color: rgba(236, 251, 249, 0.92);
}

.trace-panel .status-dot.idle,
.output-panel .quality-badge.empty,
.output-panel .export-status,
.trace-panel .trace-card[data-status="idle"] .trace-status {
  background: rgba(126, 228, 223, 0.08);
  color: rgba(214, 233, 231, 0.74);
}

.output-panel .quality-badge.warn,
.output-panel .export-status.warn,
.trace-panel .trace-card[data-status="done"] .trace-status {
  background: rgba(184, 111, 56, 0.16);
  border-color: rgba(184, 111, 56, 0.2);
  color: rgba(255, 221, 193, 0.92);
}

.output-panel .export-status.checking {
  gap: 7px;
  background: rgba(126, 228, 223, 0.1);
  border-color: rgba(126, 228, 223, 0.18);
  color: rgba(236, 251, 249, 0.88);
}

.output-panel .export-status.checking::before {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: prompt-quality-spin 0.8s linear infinite;
}

@keyframes prompt-quality-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .output-panel .export-status.checking::before {
    animation: none;
  }
}

.trace-panel .trace-card,
.output-panel .overview-card,
.output-panel .support-card,
.output-panel .prompt-card,
.output-panel .review-dimension-card,
.output-panel .workbench-action-strip {
  border-color: rgba(126, 228, 223, 0.14) !important;
  color: #edf7f7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.22);
}

.trace-panel .trace-card,
.output-panel .overview-card,
.output-panel .support-card,
.output-panel .prompt-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 228, 223, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.9), rgba(7, 12, 16, 0.92)) !important;
}

.output-panel .review-summary,
.output-panel .review-dimension-card,
.output-panel .prompt-export-meta,
.output-panel .premium-pill-row .tag-pill,
.trace-panel .trace-card::before {
  border-color: rgba(126, 228, 223, 0.14) !important;
}

.output-panel .review-summary,
.output-panel .review-dimension-card,
.output-panel .prompt-export-meta,
.output-panel .premium-pill-row .tag-pill,
.output-panel .notice-card .ghost-btn,
.trace-panel .trace-card .ghost-btn.small {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(6, 12, 16, 0.78) !important;
  color: rgba(236, 251, 249, 0.88) !important;
}

.output-panel .notice-card.neutral,
.output-panel .notice-card.good,
.output-panel .notice-card.info,
.output-panel .notice-card.warn {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 228, 223, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.92), rgba(7, 12, 16, 0.94)) !important;
}

.trace-panel .trace-card::before {
  background: rgba(126, 228, 223, 0.12);
}

.trace-panel .trace-card[data-status="running"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 44px rgba(126, 228, 223, 0.12);
}

.output-panel .notice-copy p,
.trace-panel .trace-card p,
.output-panel .prompt-caption,
.output-panel .summary-label,
.output-panel .review-dimension-card p,
.output-panel .empty-inline,
.output-panel .muted,
.output-panel .export-meta-text,
.output-panel .review-dimension-top span {
  color: rgba(213, 232, 230, 0.68) !important;
}

.trace-panel .trace-card h3,
.output-panel .prompt-head span,
.output-panel .overview-card-head strong,
.output-panel .notice-copy strong,
.output-panel .panel-head h2,
.output-panel .review-dimension-top strong {
  color: #f2fbfa !important;
}

.output-panel .prompt-body,
.output-panel .review-summary,
.output-panel .api-preview {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 228, 223, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(2, 6, 9, 0.78) !important;
  color: rgba(238, 251, 249, 0.9) !important;
  border-color: rgba(126, 228, 223, 0.14) !important;
}

/* ── Composer tray and agent-flow final polish ── */
.composer-card.composer-studio {
  position: relative;
}

.composer-card.composer-studio .composer-style-tray.open {
  position: absolute !important;
  top: 50% !important;
  right: max(14px, 2.2%) !important;
  bottom: auto !important;
  width: min(680px, 48vw) !important;
  min-height: min(640px, calc(100vh - 120px));
  max-height: min(82vh, 780px) !important;
  padding: 28px !important;
  gap: 22px;
  transform: translateY(-50%) scale(1) !important;
  z-index: 18;
}

.composer-style-tray .composer-panel-head {
  margin: -6px -6px 0;
  padding: 6px 6px 16px;
}

.composer-style-tray .field-label {
  margin-bottom: 10px;
  font-size: 22px !important;
  line-height: 1.18;
  letter-spacing: 0.02em;
}

.composer-style-tray .composer-inline-note {
  display: block;
  max-width: 560px;
  font-size: 14px !important;
  line-height: 1.55;
}

.composer-style-tray .image-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.composer-style-tray .style-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.composer-style-tray .image-mode-card,
.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  border-radius: 24px;
}

.composer-style-tray .chip {
  min-height: 38px;
  padding: 8px 12px;
}

.trace-panel {
  --agent-flow-line: rgba(126, 228, 223, 0.2);
}

.trace-panel .agent-trace {
  position: relative;
  gap: 18px;
  padding: 12px 8px 18px;
}

.trace-panel .agent-trace::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--agent-flow-line), rgba(126, 228, 223, 0.46), var(--agent-flow-line), transparent);
  pointer-events: none;
}

.trace-panel .trace-card {
  overflow: hidden;
}

.trace-panel .trace-card[data-has-next="true"]::after {
  content: none !important;
  display: none !important;
}

.trace-panel .trace-step-index {
  border: 1px solid rgba(126, 228, 223, 0.14);
  background: rgba(126, 228, 223, 0.08);
  color: rgba(236, 251, 249, 0.9);
}

.trace-panel .trace-card[data-status="running"] .trace-step-index {
  background: rgba(126, 228, 223, 0.18);
  box-shadow: 0 0 22px rgba(126, 228, 223, 0.16);
}

.trace-panel .trace-card[data-status="done"] .trace-step-index {
  background: rgba(184, 111, 56, 0.16);
  border-color: rgba(184, 111, 56, 0.22);
}

@media (max-width: 1180px) {
  .composer-card.composer-studio .composer-style-tray.open {
    width: min(620px, 54vw) !important;
    right: 10px !important;
  }
}

@media (max-width: 780px) {
  .composer-card.composer-studio .composer-style-tray.open {
    position: static !important;
    width: 100% !important;
    min-height: 0;
    max-height: none !important;
    transform: none !important;
    margin-top: 16px;
  }

  .composer-style-tray .image-mode-grid,
  .composer-style-tray .style-columns {
    grid-template-columns: 1fr;
  }
}

/* ── Style selector half-screen drawer ── */
.composer-card.composer-studio .composer-style-tray.open {
  position: absolute !important;
  top: 50% !important;
  right: max(10px, 1.4vw) !important;
  bottom: auto !important;
  width: min(820px, calc(50vw - 18px)) !important;
  min-width: min(720px, calc(50vw - 18px));
  min-height: min(700px, calc(100vh - 92px));
  max-height: min(88vh, 860px) !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translateY(-50%) scale(1) !important;
  z-index: 22;
  border-radius: 30px;
  border-color: rgba(126, 228, 223, 0.2);
  background:
    radial-gradient(circle at 36% 0%, rgba(126, 228, 223, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(10, 20, 27, 0.98), rgba(3, 7, 11, 0.985));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 110px rgba(0, 0, 0, 0.62),
    0 0 80px rgba(126, 228, 223, 0.11);
}

.composer-style-tray .style-tray-collapse {
  position: absolute;
  left: -58px;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 44px;
  min-height: 128px;
  padding: 12px 8px;
  border-radius: 999px;
  border: 1px solid rgba(176, 218, 129, 0.72);
  background:
    linear-gradient(160deg, rgba(255, 170, 80, 0.96), rgba(174, 220, 118, 0.96));
  color: #132018;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -10px 22px rgba(70, 88, 30, 0.1),
    0 18px 44px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(198, 225, 111, 0.2);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.composer-style-tray.open .style-tray-collapse {
  display: grid !important;
  place-items: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.composer-style-tray .style-tray-collapse:hover {
  transform: translateY(-50%) translateX(-1px);
  border-color: rgba(210, 241, 145, 0.86);
  background:
    linear-gradient(160deg, rgba(255, 186, 98, 0.98), rgba(190, 236, 128, 0.98));
  color: #0c1710;
}

.composer-style-tray:not(.open) .style-tray-collapse {
  display: none;
}

.composer-style-tray > .composer-panel-head {
  display: none !important;
}

.composer-style-tray .chip-wrap {
  max-height: min(88vh, 860px);
  padding: 30px 30px 28px 74px !important;
  gap: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.composer-style-tray .image-mode-panel {
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  border-color: rgba(126, 228, 223, 0.16);
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 228, 223, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)),
    rgba(3, 8, 12, 0.7);
}

.composer-style-tray .image-mode-head {
  align-items: center;
  gap: 18px;
}

.composer-style-tray .image-mode-head div {
  gap: 7px;
}

.composer-style-tray .image-mode-head strong {
  font-size: clamp(26px, 2vw, 34px) !important;
  line-height: 1.05;
  letter-spacing: 0;
  color: #f4fffd;
}

.composer-style-tray .image-mode-head span {
  font-size: 14px !important;
  line-height: 1.55;
  color: rgba(213, 232, 230, 0.68);
}

.composer-style-tray .image-mode-head small {
  padding: 7px 12px;
  border-color: rgba(126, 228, 223, 0.16);
  background: rgba(126, 228, 223, 0.07);
  color: rgba(213, 232, 230, 0.72);
  white-space: nowrap;
}

.composer-style-tray .image-mode-head small.selected {
  color: #e9fffb;
  border-color: rgba(126, 228, 223, 0.42);
  background: rgba(126, 228, 223, 0.15);
}

.composer-style-tray .image-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.composer-style-tray .image-mode-card {
  min-height: 136px;
  padding: 16px;
  border-radius: 20px;
  border-color: rgba(126, 228, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.02)),
    rgba(3, 8, 12, 0.66);
  color: rgba(232, 250, 248, 0.88);
}

.composer-style-tray .image-mode-card strong {
  font-size: 16px;
  line-height: 1.25;
  color: #f2fffd;
}

.composer-style-tray .image-mode-card span {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(213, 232, 230, 0.62);
}

.composer-style-tray .image-mode-card small {
  color: rgba(126, 228, 223, 0.86);
}

.composer-style-tray .image-mode-card:hover,
.composer-style-tray .image-mode-card.active {
  border-color: rgba(126, 228, 223, 0.42);
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.18), rgba(126, 228, 223, 0.07)),
    rgba(6, 18, 22, 0.86);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.composer-style-tray .style-columns {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 12px;
  overflow: visible;
}

.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border-radius: 22px;
  border-color: rgba(126, 228, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(3, 8, 12, 0.62);
}

.composer-style-tray .style-column.generic {
  border-color: rgba(184, 111, 56, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(184, 111, 56, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(3, 8, 12, 0.62);
}

.composer-style-tray .style-column-head {
  display: grid;
  justify-content: start;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.composer-style-tray .style-column-head strong,
.composer-style-tray .style-column-head span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.composer-style-tray .style-column-head strong {
  color: #f2fffd;
  font-size: 15px;
  line-height: 1.25;
}

.composer-style-tray .style-column-head span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.08);
  color: rgba(213, 232, 230, 0.64);
  font-size: 11px;
}

.composer-style-tray .style-chip-row {
  display: flex;
  flex-wrap: wrap !important;
  gap: 9px;
  overflow: visible !important;
  padding: 4px 2px 2px;
}

.composer-style-tray .generic-style-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.composer-style-tray .generic-style-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(126, 228, 223, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(2, 7, 10, 0.36);
}

.composer-style-tray .generic-style-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.composer-style-tray .generic-style-group-head strong {
  color: rgba(242, 255, 253, 0.9);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.composer-style-tray .generic-style-group-head span {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.08);
  color: rgba(213, 232, 230, 0.58);
  font-size: 10px;
  line-height: 1.4;
}

.composer-style-tray .generic-style-row {
  gap: 7px;
  padding: 0;
}

.composer-style-tray .chip,
.composer-style-tray .style-column.generic .chip {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  min-width: max-content;
  max-width: none;
  padding: 8px 14px;
  border-radius: 999px;
  border-color: rgba(126, 228, 223, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 250, 248, 0.84);
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip.active {
  border-color: rgba(126, 228, 223, 0.42);
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.2), rgba(126, 228, 223, 0.09)),
    rgba(6, 18, 22, 0.86);
  color: #f8fffe;
}

.composer-style-tray .chip.active {
  padding-left: 28px;
  border-color: rgba(143, 241, 235, 0.78) !important;
  background:
    radial-gradient(circle at 16px 50%, rgba(255, 255, 255, 0.22), transparent 18px),
    linear-gradient(180deg, rgba(126, 228, 223, 0.34), rgba(32, 92, 98, 0.66)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(126, 228, 223, 0.16),
    0 0 20px rgba(126, 228, 223, 0.28) !important;
}

.composer-style-tray .chip.active::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(-45deg);
  opacity: 0.95;
}

.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  align-items: start;
  min-height: 0;
  padding: 10px 12px;
}

.composer-style-tray .style-column-head {
  padding-top: 4px;
}

.composer-style-tray .style-chip-row {
  align-content: start;
  padding: 0;
  row-gap: 8px;
}

.composer-style-tray .chip,
.composer-style-tray .style-column.generic .chip {
  min-height: 34px;
  padding: 7px 12px;
}

.composer-style-tray .style-column.generic {
  padding-top: 6px;
  padding-bottom: 5px;
}

.composer-style-tray .style-column.generic .style-column-head {
  padding-top: 2px;
}

.composer-style-tray .style-column.generic .style-chip-row {
  row-gap: 6px;
}

@media (max-width: 1180px) {
  .composer-card.composer-studio .composer-style-tray.open {
    width: min(760px, calc(58vw - 16px)) !important;
    min-width: min(620px, calc(58vw - 16px));
    right: 10px !important;
  }

  .composer-style-tray .image-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .composer-card.composer-studio .composer-style-tray.open {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    transform: none !important;
    margin-top: 16px;
    padding: 22px !important;
    overflow: auto !important;
  }

  .composer-style-tray .chip-wrap {
    max-height: none;
    padding: 0 !important;
    overflow: visible;
  }

  .composer-style-tray .style-tray-collapse {
    position: sticky;
    top: 8px;
    left: auto;
    justify-self: end;
    transform: none;
    width: auto;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border-right: 1px solid rgba(126, 228, 223, 0.22);
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }

  .composer-style-tray .style-tray-collapse:hover {
    transform: translateY(-1px);
  }

  .composer-style-tray .image-mode-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .composer-style-tray .image-mode-grid {
    grid-template-columns: 1fr;
  }

  .composer-style-tray .style-column,
  .composer-style-tray .style-column.generic {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Flow-map terminal overrides. Keep this block last so the retired circular reactor cannot reassert layout. */
.reactor-shell {
  display: block !important;
  overflow: visible;
}

.reactor-flow-map {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(92px, 128px) minmax(420px, 1fr) minmax(220px, 280px) !important;
  width: 100% !important;
  min-height: 650px;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

.reactor-flow-map .reactor-core {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 620px) !important;
  transform: none !important;
}

.reactor-flow-map .reactor-node {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: var(--flow-node) !important;
  min-height: var(--flow-node) !important;
  transform: none !important;
}

.reactor-flow-map::before {
  display: block !important;
}

.reactor-flow-map::after,
.reactor-flow-map .reactor-halo,
.reactor-flow-map .reactor-ring,
.reactor-flow-map .reactor-scanline {
  display: none !important;
}

@media (max-width: 1180px) {
  .reactor-flow-map {
    grid-template-columns: 86px minmax(360px, 1fr) minmax(220px, 260px) !important;
  }
}

@media (max-width: 860px) {
  .reactor-flow-map {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "core core"
      "main review";
    min-height: 0;
  }
}

.reactor-flow-map .review-console {
  align-self: center;
  display: grid;
  gap: 10px;
  grid-template-rows: none;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding: 14px 10px;
  border: 1px solid rgba(126, 228, 223, 0.16);
  background:
    linear-gradient(180deg, rgba(16, 32, 34, 0.9), rgba(8, 14, 16, 0.82)),
    radial-gradient(circle at 20% 0%, rgba(126, 228, 223, 0.12), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 46px rgba(0, 0, 0, 0.24);
}

.review-console-head {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.12);
}

.review-console-head span {
  color: rgba(158, 242, 236, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-console-head strong {
  color: rgba(243, 255, 253, 0.96);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
}

.review-console-head small,
.review-console-foot {
  color: rgba(213, 236, 235, 0.58);
  font-size: 11px;
  line-height: 1.35;
}

.review-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  justify-items: stretch;
  align-items: stretch;
}

.review-skill-chip,
.review-skill-cluster {
  display: grid;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 9px 9px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(4, 10, 14, 0.34);
  color: rgba(233, 249, 248, 0.88);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.review-skill-chip span,
.review-skill-cluster span {
  color: rgba(151, 216, 212, 0.74);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-skill-chip strong,
.review-skill-cluster strong {
  min-width: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-skill-chip small,
.review-skill-cluster small {
  color: rgba(213, 236, 235, 0.52);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-skill-chip:not(:disabled):hover,
.review-skill-cluster:not(:disabled):hover {
  transform: translateX(-2px);
  border-color: rgba(143, 241, 235, 0.34);
  background: rgba(126, 228, 223, 0.08);
}

.review-skill-chip[data-status="running"],
.review-skill-cluster[data-status="running"] {
  border-color: rgba(143, 241, 235, 0.58);
  background:
    linear-gradient(90deg, rgba(126, 228, 223, 0.16), rgba(126, 228, 223, 0.055));
  color: #f6fffe;
  box-shadow: inset 3px 0 0 rgba(143, 241, 235, 0.88);
}

.review-skill-chip[data-status="done"],
.review-skill-cluster[data-status="done"] {
  border-color: rgba(143, 241, 235, 0.3);
  background: rgba(126, 228, 223, 0.1);
  color: rgba(245, 255, 254, 0.95);
}

.review-skill-chip[data-status="fallback"],
.review-skill-cluster[data-status="fallback"] {
  border-color: rgba(255, 112, 98, 0.52);
  background: rgba(255, 112, 98, 0.12);
  color: #fff4ef;
}

.review-skill-chip[data-status="cancelled"],
.review-skill-cluster[data-status="cancelled"] {
  border-color: rgba(174, 184, 190, 0.22);
  background: rgba(174, 184, 190, 0.06);
  color: rgba(220, 231, 234, 0.58);
}

.review-skill-chip:disabled,
.review-skill-cluster:disabled {
  cursor: default;
  opacity: 0.82;
}

/* Style selector terminal overrides. Keep selected chips and grouped generic styles legible in Safari. */
.composer-style-tray .generic-style-groups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.composer-style-tray .generic-style-group {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.composer-style-tray .chip.active,
.composer-style-tray .chip[aria-pressed="true"] {
  padding-left: 28px !important;
  border-color: rgba(143, 241, 235, 0.78) !important;
  background:
    radial-gradient(circle at 16px 50%, rgba(255, 255, 255, 0.22), transparent 18px),
    linear-gradient(180deg, rgba(126, 228, 223, 0.34), rgba(32, 92, 98, 0.66)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(126, 228, 223, 0.16),
    0 0 20px rgba(126, 228, 223, 0.28) !important;
}

.composer-style-tray .chip.active::before,
.composer-style-tray .chip[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(-45deg);
}

@media (max-width: 780px) {
  .composer-style-tray .generic-style-groups {
    grid-template-columns: 1fr !important;
  }
}

.composer-style-tray.open .style-tray-collapse {
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (min-width: 781px) {
  .composer-style-tray.open .style-tray-collapse {
    position: absolute !important;
    left: -58px !important;
    top: 50% !important;
    z-index: 4 !important;
    transform: translateY(-50%) !important;
  }

  .composer-style-tray.open .style-tray-collapse:hover {
    transform: translateY(-50%) translateX(-1px) !important;
  }
}

/* Flow connector terminal tuning: activated links should stay quiet; nodes carry the emphasis. */
.reactor-flow-map .flow-line {
  stroke: rgba(126, 228, 223, 0.12) !important;
  stroke-width: 1.4 !important;
  stroke-dasharray: 2 10 !important;
  opacity: 0.74 !important;
  filter: none !important;
}

.reactor-flow-map .flow-line[data-status="running"] {
  stroke: rgba(126, 228, 223, 0.28) !important;
  stroke-width: 1.6 !important;
  stroke-dasharray: 3 9 !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 0 4px rgba(126, 228, 223, 0.16)) !important;
}

.reactor-flow-map .flow-line[data-status="done"] {
  stroke: rgba(143, 241, 235, 0.34) !important;
  stroke-width: 1.6 !important;
  stroke-dasharray: 2 8 !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 0 5px rgba(126, 228, 223, 0.18)) !important;
}

.reactor-flow-map .flow-bead[data-status="running"] {
  fill: rgba(143, 241, 235, 0.74) !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 0 8px rgba(126, 228, 223, 0.42)) !important;
}

.reactor-flow-map .flow-bead[data-status="done"] {
  fill: rgba(224, 255, 252, 0.76) !important;
  opacity: 0.82 !important;
  filter: drop-shadow(0 0 6px rgba(126, 228, 223, 0.32)) !important;
}

.reactor-flow-map .reactor-node[data-status="fallback"],
.reactor-node[data-status="fallback"] {
  color: #fff4ef !important;
  border-color: rgba(255, 112, 98, 0.82) !important;
  background:
    radial-gradient(circle at 38% 20%, rgba(255, 214, 190, 0.22), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(255, 92, 84, 0.3), transparent 62%),
    linear-gradient(180deg, rgba(88, 22, 22, 0.98), rgba(24, 8, 12, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 226, 0.18),
    0 0 0 1px rgba(255, 112, 98, 0.28),
    0 0 28px rgba(255, 82, 82, 0.34),
    0 18px 44px rgba(0, 0, 0, 0.44) !important;
}

.reactor-flow-map .reactor-node[data-status="fallback"] span,
.reactor-node[data-status="fallback"] span {
  color: rgba(255, 232, 220, 0.76) !important;
}

.reactor-flow-map .flow-line[data-status="fallback"] {
  stroke: rgba(255, 112, 98, 0.42) !important;
  stroke-width: 1.7 !important;
  stroke-dasharray: 2 8 !important;
  opacity: 0.94 !important;
  filter: drop-shadow(0 0 5px rgba(255, 82, 82, 0.26)) !important;
}

.reactor-flow-map .flow-bead[data-status="fallback"] {
  fill: rgba(255, 183, 164, 0.9) !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 0 8px rgba(255, 82, 82, 0.44)) !important;
}

/* Final style-chip normalization: every fine-style option uses one visual system. */
.composer-style-tray .chip,
.composer-style-tray .chip.custom,
.composer-style-tray .style-column .chip,
.composer-style-tray .style-column.generic .chip,
.composer-style-tray .generic-style-group .chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126, 228, 223, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(4, 10, 14, 0.72) !important;
  color: rgba(232, 250, 248, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.12) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.composer-style-tray .chip::before,
.composer-style-tray .chip.custom::before,
.composer-style-tray .style-column.generic .chip::before {
  content: none !important;
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip.custom:hover,
.composer-style-tray .style-column .chip:hover,
.composer-style-tray .style-column.generic .chip:hover,
.composer-style-tray .generic-style-group .chip:hover {
  border-color: rgba(126, 228, 223, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.12), rgba(126, 228, 223, 0.045)),
    rgba(5, 15, 18, 0.82) !important;
  color: rgba(248, 255, 254, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-1px) !important;
}

.composer-style-tray .chip.active,
.composer-style-tray .chip[aria-pressed="true"],
.composer-style-tray .chip.custom.active,
.composer-style-tray .chip.custom[aria-pressed="true"],
.composer-style-tray .style-column .chip.active,
.composer-style-tray .style-column .chip[aria-pressed="true"],
.composer-style-tray .style-column.generic .chip.active,
.composer-style-tray .style-column.generic .chip[aria-pressed="true"],
.composer-style-tray .generic-style-group .chip.active,
.composer-style-tray .generic-style-group .chip[aria-pressed="true"] {
  padding: 8px 14px !important;
  border-color: rgba(143, 241, 235, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(126, 228, 223, 0.3), rgba(34, 94, 100, 0.62)),
    rgba(6, 22, 26, 0.95) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(126, 228, 223, 0.18),
    0 0 18px rgba(126, 228, 223, 0.26),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
}

.composer-style-tray .chip.active:hover,
.composer-style-tray .chip[aria-pressed="true"]:hover {
  transform: translateY(-1px) !important;
}

/* Final style-drawer geometry: extend leftward and let wrapped rows define height. */
.composer-card.composer-studio .composer-style-tray.open {
  right: max(14px, 1.6vw) !important;
  width: clamp(760px, 68vw, 1120px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 96px) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: min(88vh, 860px) !important;
  align-content: start !important;
}

.composer-style-tray .chip-wrap {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(88vh, 860px) !important;
  padding: 24px 24px 24px 64px !important;
  overflow: auto !important;
}

.composer-style-tray .image-mode-panel {
  align-self: start !important;
  gap: 12px !important;
  padding: 18px !important;
}

.composer-style-tray .image-mode-card {
  min-height: 112px !important;
}

.composer-style-tray .style-columns {
  align-items: start !important;
  gap: 10px !important;
}

.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  align-items: start !important;
  grid-template-columns: minmax(118px, 148px) minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 11px 13px !important;
  gap: 12px !important;
}

.composer-style-tray .style-column-head {
  align-self: start !important;
  padding-top: 3px !important;
}

.composer-style-tray .style-chip-row,
.composer-style-tray .generic-style-row {
  align-content: start !important;
  gap: 7px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

.composer-style-tray .generic-style-groups {
  align-items: start !important;
  gap: 8px !important;
}

.composer-style-tray .generic-style-group {
  align-self: start !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px !important;
}

@media (min-width: 1500px) {
  .composer-card.composer-studio .composer-style-tray.open {
    width: clamp(940px, 70vw, 1240px) !important;
  }
}

@media (max-width: 980px) {
  .composer-card.composer-studio .composer-style-tray.open {
    width: calc(100vw - 84px) !important;
    max-width: calc(100vw - 84px) !important;
  }

  .composer-style-tray .chip-wrap {
    padding-left: 52px !important;
  }
}

/* Style drawer no-slack pass: category boxes hug wrapped chips, with no fixed filler space. */
.composer-style-tray .style-columns {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 6px !important;
}

.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: max-content !important;
  padding: 7px 8px !important;
}

.composer-style-tray .style-column-head {
  align-self: start !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.composer-style-tray .style-chip-row,
.composer-style-tray .generic-style-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 6px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.composer-style-tray .generic-style-groups {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

.composer-style-tray .generic-style-group {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 5px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px !important;
  margin: 0 0 6px !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

.composer-style-tray .generic-style-group-head {
  min-height: 0 !important;
  margin: 0 !important;
}

@media (max-width: 780px) {
  .composer-style-tray .generic-style-groups {
    column-count: 1 !important;
  }

  .composer-style-tray .style-column,
  .composer-style-tray .style-column.generic {
    grid-template-columns: 1fr !important;
  }
}

/* Agent node preview: black surfaces with the product's restrained purple accent. */
.preview-modal.active {
  color: rgba(244, 241, 255, 0.92) !important;
}

.preview-modal .preview-backdrop {
  background:
    radial-gradient(circle at 22% 14%, rgba(118, 88, 232, 0.2), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(155, 123, 255, 0.1), transparent 26%),
    rgba(4, 3, 8, 0.84) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
}

.preview-modal .preview-dialog {
  border: 1px solid rgba(155, 123, 255, 0.3) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(118, 88, 232, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(20, 18, 27, 0.985), rgba(8, 8, 12, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 110px rgba(0, 0, 0, 0.68),
    0 0 72px rgba(118, 88, 232, 0.16) !important;
}

.preview-modal .preview-head {
  border-bottom: 1px solid rgba(155, 123, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(10, 9, 14, 0.8) !important;
}

.preview-modal .preview-head .eyebrow {
  color: rgba(185, 166, 255, 0.82) !important;
}

.preview-modal .preview-head h2,
.preview-modal #preview-title {
  color: #f7f5ff !important;
}

.preview-modal .preview-actions .ghost-btn,
.preview-modal .preview-actions .ghost-btn.small {
  border-color: rgba(155, 123, 255, 0.42) !important;
  background: rgba(118, 88, 232, 0.12) !important;
  color: rgba(224, 215, 255, 0.94) !important;
}

.preview-modal .preview-actions .ghost-btn:hover,
.preview-modal .preview-actions .ghost-btn.small:hover {
  border-color: rgba(185, 166, 255, 0.72) !important;
  background: rgba(118, 88, 232, 0.24) !important;
  color: #ffffff !important;
}

.preview-modal .preview-actions .ghost-btn:focus-visible,
.preview-modal .preview-actions .ghost-btn.small:focus-visible {
  outline: 2px solid rgba(185, 166, 255, 0.88) !important;
  outline-offset: 3px !important;
}

.preview-modal .preview-content {
  background:
    radial-gradient(circle at 100% 0%, rgba(118, 88, 232, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.01)),
    rgba(7, 7, 11, 0.9) !important;
  color: rgba(235, 231, 247, 0.92) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  scrollbar-color: rgba(155, 123, 255, 0.46) rgba(255, 255, 255, 0.045) !important;
}

.preview-modal .preview-content::selection {
  background: rgba(118, 88, 232, 0.42) !important;
  color: #ffffff !important;
}

/* Composer title removal: collapse the unused hero row so the input board moves up. */
.setup-shell {
  gap: 0 !important;
}

.setup-shell > .setup-content-grid:first-child,
.setup-content-grid {
  margin-top: 0 !important;
}

.setup-panel {
  padding-top: clamp(12px, 1.5vw, 22px) !important;
}

/* Dark contrast pass for secondary product views: templates, guided mode, and agent docs. */
.view[data-view-panel="templates"] .page-hero,
.view[data-view-panel="guided"] .page-hero,
.view[data-view-panel="agents"] .page-hero {
  border-color: rgba(126, 228, 223, 0.12) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(126, 228, 223, 0.11), transparent 30%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.82), rgba(6, 11, 16, 0.88)),
    rgba(6, 11, 16, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 24px 72px rgba(0, 0, 0, 0.36) !important;
}

.view[data-view-panel="templates"] .page-hero {
  padding-block: clamp(18px, 2.4vw, 30px) !important;
}

.view[data-view-panel="templates"] .page-hero h2,
.view[data-view-panel="guided"] .page-hero h2,
.view[data-view-panel="agents"] .page-hero h2,
.view[data-view-panel="agents"] .section-intro h3 {
  color: #f4fffd !important;
}

.view[data-view-panel="guided"] .page-hero p,
.view[data-view-panel="agents"] .page-hero p,
.view[data-view-panel="agents"] .section-intro p {
  color: rgba(213, 232, 230, 0.76) !important;
}

.view[data-view-panel="templates"] .template-use-workspace,
.view[data-view-panel="templates"] .template-use-editor-card,
.view[data-view-panel="templates"] .template-card,
.view[data-view-panel="guided"] .coming-soon-panel,
.view[data-view-panel="agents"] .agent-map-card,
.view[data-view-panel="agents"] .rubric-card,
.view[data-view-panel="agents"] .agent-skill-card,
.view[data-view-panel="agents"] .agent-skill-block,
.view[data-view-panel="agents"] .agent-skill-columns section {
  border-color: rgba(126, 228, 223, 0.14) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 228, 223, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.86), rgba(5, 10, 15, 0.92)),
    rgba(5, 10, 15, 0.9) !important;
  color: rgba(238, 251, 249, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 22px 68px rgba(0, 0, 0, 0.34) !important;
}

.view[data-view-panel="templates"] .template-use-copy h3,
.view[data-view-panel="templates"] .template-use-editor-head strong,
.view[data-view-panel="templates"] .template-card h3,
.view[data-view-panel="guided"] .coming-soon-panel h3,
.view[data-view-panel="agents"] .agent-map-card h3,
.view[data-view-panel="agents"] .rubric-card h3,
.view[data-view-panel="agents"] .agent-skill-card h3,
.view[data-view-panel="agents"] .agent-skill-card strong,
.view[data-view-panel="agents"] .agent-skill-block strong,
.view[data-view-panel="agents"] .agent-skill-columns section strong {
  color: #f4fffd !important;
}

.view[data-view-panel="templates"] .template-use-copy p,
.view[data-view-panel="templates"] .template-card p,
.view[data-view-panel="templates"] .library-summary,
.view[data-view-panel="templates"] .library-template-preview,
.view[data-view-panel="guided"] .coming-soon-panel p,
.view[data-view-panel="agents"] .agent-map-card p,
.view[data-view-panel="agents"] .rubric-card p,
.view[data-view-panel="agents"] .agent-skill-card p,
.view[data-view-panel="agents"] .agent-skill-card li,
.view[data-view-panel="agents"] .agent-skill-block,
.view[data-view-panel="agents"] .agent-skill-columns section {
  color: rgba(213, 232, 230, 0.78) !important;
}

.view[data-view-panel="templates"] .template-editor,
.view[data-view-panel="templates"] .library-template-preview,
.view[data-view-panel="templates"] .template-use-meta span,
.view[data-view-panel="templates"] .library-meta span,
.view[data-view-panel="templates"] .library-facts div,
.view[data-view-panel="templates"] .library-shot-row span,
.view[data-view-panel="agents"] .tag-pill,
.view[data-view-panel="agents"] .agent-skill-head,
.view[data-view-panel="agents"] .agent-skill-columns section.danger {
  border-color: rgba(126, 228, 223, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(2, 6, 9, 0.74) !important;
  color: rgba(238, 251, 249, 0.88) !important;
}

.view[data-view-panel="templates"] .template-editor::placeholder {
  color: rgba(213, 232, 230, 0.46) !important;
}

.view[data-view-panel="templates"] .template-editor:focus {
  border-color: rgba(126, 228, 223, 0.34) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 228, 223, 0.1), transparent 30%),
    rgba(3, 8, 12, 0.9) !important;
  color: #f4fffd !important;
}

.view[data-view-panel="templates"] .template-editor-foot,
.view[data-view-panel="templates"] .template-editor-foot span,
.view[data-view-panel="templates"] .template-use-meta span,
.view[data-view-panel="templates"] .library-meta,
.view[data-view-panel="templates"] .library-facts span,
.view[data-view-panel="templates"] .library-shot-row span,
.view[data-view-panel="agents"] .tag-pill {
  color: rgba(213, 232, 230, 0.72) !important;
}

.view[data-view-panel="templates"] .template-editor-foot span:first-child,
.view[data-view-panel="templates"] .library-facts strong {
  color: rgba(244, 255, 253, 0.94) !important;
}

.view[data-view-panel="templates"] .ghost-btn,
.view[data-view-panel="agents"] .ghost-btn,
.view[data-view-panel="guided"] .ghost-btn {
  border-color: rgba(126, 228, 223, 0.2) !important;
  background: rgba(4, 12, 16, 0.76) !important;
  color: rgba(238, 251, 249, 0.88) !important;
}

.view[data-view-panel="templates"] .ghost-btn:hover,
.view[data-view-panel="agents"] .ghost-btn:hover,
.view[data-view-panel="guided"] .ghost-btn:hover {
  border-color: rgba(255, 170, 80, 0.45) !important;
  background:
    linear-gradient(160deg, rgba(255, 170, 80, 0.16), rgba(174, 220, 118, 0.1)),
    rgba(6, 18, 18, 0.82) !important;
  color: #fff7ec !important;
}

.view[data-view-panel="templates"] .asset-board,
.view[data-view-panel="templates"] .asset-row-card,
.view[data-view-panel="templates"] .asset-side,
.view[data-view-panel="templates"] .asset-metric,
.view[data-view-panel="templates"] .empty-state {
  border-color: rgba(126, 228, 223, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(3, 8, 12, 0.74) !important;
  color: rgba(238, 251, 249, 0.88) !important;
}

.view[data-view-panel="templates"] .asset-rank,
.view[data-view-panel="templates"] .asset-rank.mini,
.view[data-view-panel="templates"] .template-tag,
.view[data-view-panel="templates"] .asset-status-badge {
  border-color: rgba(126, 228, 223, 0.16) !important;
  background: rgba(126, 228, 223, 0.1) !important;
  color: rgba(238, 251, 249, 0.86) !important;
}

.view[data-view-panel="templates"] .asset-status-badge.reviewed {
  border-color: rgba(174, 220, 118, 0.32) !important;
  background: rgba(174, 220, 118, 0.13) !important;
  color: rgba(227, 247, 195, 0.92) !important;
}

.view[data-view-panel="templates"] .asset-status-badge.pending_review {
  border-color: rgba(255, 170, 80, 0.32) !important;
  background: rgba(255, 170, 80, 0.13) !important;
  color: rgba(255, 227, 189, 0.92) !important;
}

.view[data-view-panel="templates"] .asset-summary,
.view[data-view-panel="templates"] .asset-side small,
.view[data-view-panel="templates"] .asset-metric span {
  color: rgba(213, 232, 230, 0.72) !important;
}

.view[data-view-panel="templates"] .asset-metric strong,
.view[data-view-panel="templates"] .empty-state strong {
  color: rgba(244, 255, 253, 0.94) !important;
}

/* Template asset manager: close remaining light-surface leaks in KPI, review queue, and category units. */
.view[data-view-panel="templates"] .asset-kpi-strip div,
.view[data-view-panel="templates"] .asset-management-panel,
.view[data-view-panel="templates"] .asset-filter-chip,
.view[data-view-panel="templates"] .asset-category-card {
  border-color: rgba(126, 228, 223, 0.15) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(126, 228, 223, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(16, 29, 36, 0.9), rgba(4, 9, 13, 0.94)),
    rgba(4, 9, 13, 0.94) !important;
  color: rgba(238, 251, 249, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 46px rgba(0, 0, 0, 0.28) !important;
}

.view[data-view-panel="templates"] .asset-kpi-strip div::after {
  border-color: rgba(126, 228, 223, 0.085) !important;
}

.view[data-view-panel="templates"] .asset-kpi-strip strong,
.view[data-view-panel="templates"] .asset-filter-row h3,
.view[data-view-panel="templates"] .asset-category-card .category-name {
  color: #f4fffd !important;
}

.view[data-view-panel="templates"] .asset-kpi-strip span,
.view[data-view-panel="templates"] .asset-category-card .category-count,
.view[data-view-panel="templates"] .asset-category-card small {
  color: rgba(213, 232, 230, 0.74) !important;
}

.view[data-view-panel="templates"] .asset-filter-chip span:not(.chip-label) {
  background: rgba(126, 228, 223, 0.12) !important;
  color: rgba(238, 251, 249, 0.88) !important;
}

.view[data-view-panel="templates"] .asset-filter-chip:hover,
.view[data-view-panel="templates"] .asset-category-card:hover {
  border-color: rgba(255, 170, 80, 0.42) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 170, 80, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(20, 32, 37, 0.94), rgba(5, 13, 16, 0.96)),
    rgba(5, 13, 16, 0.96) !important;
  color: #fff8e8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(0, 0, 0, 0.32) !important;
}

.view[data-view-panel="templates"] .asset-filter-chip.active,
.view[data-view-panel="templates"] .asset-category-card.active {
  border-color: rgba(255, 170, 80, 0.5) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 170, 80, 0.17), transparent 40%),
    linear-gradient(145deg, rgba(49, 35, 18, 0.72), rgba(7, 24, 25, 0.94)),
    rgba(7, 24, 25, 0.94) !important;
  color: #fff8e8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 170, 80, 0.12),
    0 18px 52px rgba(0, 0, 0, 0.34) !important;
}

.view[data-view-panel="templates"] .asset-filter-chip.active span:not(.chip-label) {
  background: rgba(255, 170, 80, 0.2) !important;
  color: #ffe3bd !important;
}

/* Text-only Eastern cinematic CG presets use a distinct restrained red-gold system. */
.composer-style-tray .generic-style-group.is-eastern-cg {
  border-color: rgba(207, 157, 78, 0.42) !important;
  background: rgba(45, 10, 14, 0.94) !important;
  box-shadow:
    inset 3px 0 0 rgba(184, 122, 45, 0.82),
    inset 0 1px 0 rgba(247, 211, 143, 0.16),
    0 10px 26px rgba(18, 2, 4, 0.22) !important;
}

.composer-style-tray .generic-style-group.is-eastern-cg .generic-style-group-head strong {
  color: #f1d49a !important;
}

.composer-style-tray .generic-style-group.is-eastern-cg .generic-style-group-head span {
  border: 1px solid rgba(211, 164, 88, 0.24) !important;
  background: rgba(169, 107, 38, 0.16) !important;
  color: rgba(245, 216, 158, 0.78) !important;
}

.composer-style-tray .generic-style-group.is-eastern-cg .chip {
  border-color: rgba(195, 139, 66, 0.28) !important;
  background: rgba(28, 9, 12, 0.9) !important;
  color: rgba(247, 224, 185, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 189, 0.06),
    0 8px 18px rgba(12, 1, 3, 0.18) !important;
}

.composer-style-tray .generic-style-group.is-eastern-cg .chip:hover {
  border-color: rgba(228, 181, 98, 0.62) !important;
  background: rgba(66, 17, 21, 0.96) !important;
  color: #fff0cb !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 189, 0.12),
    0 0 0 1px rgba(202, 139, 56, 0.12),
    0 10px 22px rgba(20, 2, 4, 0.24) !important;
}

.composer-style-tray .generic-style-group.is-eastern-cg .chip.active,
.composer-style-tray .generic-style-group.is-eastern-cg .chip[aria-pressed="true"] {
  border-color: rgba(239, 194, 111, 0.82) !important;
  background: rgba(105, 27, 30, 0.98) !important;
  color: #fff4d8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 203, 0.2),
    0 0 0 1px rgba(191, 124, 40, 0.24),
    0 0 18px rgba(157, 76, 31, 0.24),
    0 10px 22px rgba(20, 2, 4, 0.24) !important;
}

.composer-style-tray .generic-style-group.is-recommended {
  border-color: rgba(113, 173, 143, 0.34) !important;
  background: rgba(15, 31, 27, 0.92) !important;
  box-shadow:
    inset 3px 0 0 rgba(91, 159, 126, 0.72),
    inset 0 1px 0 rgba(214, 244, 229, 0.08),
    0 10px 24px rgba(2, 13, 10, 0.2) !important;
}

.composer-style-tray .generic-style-group.is-recommended .generic-style-group-head strong {
  color: #cce8da !important;
}

.composer-style-tray .generic-style-group.is-recommended .chip {
  border-color: rgba(106, 177, 143, 0.3) !important;
  background: rgba(10, 24, 20, 0.9) !important;
  color: rgba(222, 244, 233, 0.88) !important;
}

/* Full dark contrast coverage for template and RAG asset-management pages. */
.view[data-view-panel="templates"] .section-intro,
.view[data-view-panel="rag"] .page-hero,
.view[data-view-panel="rag"] .section-intro,
.view[data-view-panel="rag"] .schema-card,
.view[data-view-panel="rag"] .library-card,
.view[data-view-panel="rag"] .field-card,
.view[data-view-panel="rag"] .lifecycle-card,
.view[data-view-panel="rag"] .admin-card {
  border-color: rgba(126, 228, 223, 0.14) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 228, 223, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(17, 29, 37, 0.86), rgba(5, 10, 15, 0.92)),
    rgba(5, 10, 15, 0.9) !important;
  color: rgba(238, 251, 249, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 22px 68px rgba(0, 0, 0, 0.34) !important;
}

.view[data-view-panel="rag"] .page-hero h2,
.view[data-view-panel="rag"] .section-intro h3,
.view[data-view-panel="rag"] .schema-card h3,
.view[data-view-panel="rag"] .library-card h3,
.view[data-view-panel="rag"] .field-card h3,
.view[data-view-panel="rag"] .lifecycle-card h3,
.view[data-view-panel="rag"] .admin-card h3,
.view[data-view-panel="rag"] .library-card strong,
.view[data-view-panel="rag"] .field-card strong,
.view[data-view-panel="rag"] .lifecycle-card strong,
.view[data-view-panel="rag"] .admin-card strong {
  color: #f4fffd !important;
}

.view[data-view-panel="rag"] .page-hero p,
.view[data-view-panel="rag"] .section-intro p,
.view[data-view-panel="rag"] .schema-card p,
.view[data-view-panel="rag"] .library-card p,
.view[data-view-panel="rag"] .field-card p,
.view[data-view-panel="rag"] .lifecycle-card p,
.view[data-view-panel="rag"] .admin-card p,
.view[data-view-panel="rag"] .admin-card li,
.view[data-view-panel="rag"] .library-summary,
.view[data-view-panel="rag"] .library-scaffold p,
.view[data-view-panel="rag"] .library-template-preview {
  color: rgba(213, 232, 230, 0.78) !important;
}

.view[data-view-panel="rag"] .schema-code,
.view[data-view-panel="rag"] .library-template-preview,
.view[data-view-panel="rag"] .library-facts div,
.view[data-view-panel="rag"] .library-shot-row span,
.view[data-view-panel="rag"] .tag-pill,
.view[data-view-panel="rag"] .asset-rank,
.view[data-view-panel="rag"] .asset-rank.mini,
.view[data-view-panel="rag"] .asset-status-badge,
.view[data-view-panel="rag"] .field-card-top,
.view[data-view-panel="rag"] .rubric-top {
  border-color: rgba(126, 228, 223, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(2, 6, 9, 0.74) !important;
  color: rgba(238, 251, 249, 0.88) !important;
}

.view[data-view-panel="rag"] .schema-code {
  scrollbar-color: rgba(126, 228, 223, 0.42) rgba(255, 255, 255, 0.05) !important;
}

.view[data-view-panel="rag"] .library-facts span,
.view[data-view-panel="rag"] .library-shot-row span,
.view[data-view-panel="rag"] .tag-pill,
.view[data-view-panel="rag"] .asset-status-badge {
  color: rgba(213, 232, 230, 0.72) !important;
}

.view[data-view-panel="rag"] .library-facts strong,
.view[data-view-panel="rag"] .asset-rank,
.view[data-view-panel="rag"] .asset-rank.mini {
  color: rgba(244, 255, 253, 0.94) !important;
}

.view[data-view-panel="rag"] .asset-status-badge.reviewed {
  border-color: rgba(174, 220, 118, 0.32) !important;
  background: rgba(174, 220, 118, 0.13) !important;
  color: rgba(227, 247, 195, 0.92) !important;
}

.view[data-view-panel="rag"] .asset-status-badge.pending_review {
  border-color: rgba(255, 170, 80, 0.32) !important;
  background: rgba(255, 170, 80, 0.13) !important;
  color: rgba(255, 227, 189, 0.92) !important;
}

.view[data-view-panel="rag"] .ghost-btn {
  border-color: rgba(126, 228, 223, 0.2) !important;
  background: rgba(4, 12, 16, 0.76) !important;
  color: rgba(238, 251, 249, 0.88) !important;
}

.view[data-view-panel="rag"] .ghost-btn:hover {
  border-color: rgba(255, 170, 80, 0.45) !important;
  background:
    linear-gradient(160deg, rgba(255, 170, 80, 0.16), rgba(174, 220, 118, 0.1)),
    rgba(6, 18, 18, 0.82) !important;
  color: #fff7ec !important;
}

/* Asset-library surface policy: keep template and RAG units dark even when dynamic data reuses shared card classes. */
.view[data-view-panel="templates"] .template-use-workspace,
.view[data-view-panel="templates"] .template-use-editor-card,
.view[data-view-panel="templates"] .asset-list-head,
.view[data-view-panel="templates"] .asset-board,
.view[data-view-panel="templates"] .asset-row-card,
.view[data-view-panel="templates"] .asset-main,
.view[data-view-panel="templates"] .asset-side,
.view[data-view-panel="templates"] .asset-metric,
.view[data-view-panel="templates"] .empty-state,
.view[data-view-panel="rag"] .page-hero,
.view[data-view-panel="rag"] .section-intro,
.view[data-view-panel="rag"] .schema-card,
.view[data-view-panel="rag"] .library-card,
.view[data-view-panel="rag"] .library-asset-card,
.view[data-view-panel="rag"] .library-scaffold,
.view[data-view-panel="rag"] .library-facts div,
.view[data-view-panel="rag"] .library-shot-row span,
.view[data-view-panel="rag"] .field-card,
.view[data-view-panel="rag"] .lifecycle-card,
.view[data-view-panel="rag"] .admin-card {
  border-color: rgba(126, 228, 223, 0.14) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 228, 223, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(16, 29, 36, 0.9), rgba(4, 9, 13, 0.94)),
    rgba(4, 9, 13, 0.94) !important;
  color: rgba(238, 251, 249, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 52px rgba(0, 0, 0, 0.28) !important;
}

.view[data-view-panel="templates"] .asset-main,
.view[data-view-panel="templates"] .asset-side,
.view[data-view-panel="templates"] .asset-metric,
.view[data-view-panel="rag"] .library-scaffold,
.view[data-view-panel="rag"] .library-facts div,
.view[data-view-panel="rag"] .library-shot-row span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(2, 6, 9, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.view[data-view-panel="templates"] .template-editor,
.view[data-view-panel="templates"] .template-editor-foot,
.view[data-view-panel="rag"] .schema-code,
.view[data-view-panel="rag"] .library-template-preview {
  border-color: rgba(126, 228, 223, 0.15) !important;
  background: rgba(1, 5, 8, 0.84) !important;
  color: rgba(238, 251, 249, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.view[data-view-panel="templates"] .asset-rank,
.view[data-view-panel="templates"] .asset-rank.mini,
.view[data-view-panel="templates"] .template-tag,
.view[data-view-panel="templates"] .asset-status-badge,
.view[data-view-panel="templates"] .template-use-meta span,
.view[data-view-panel="rag"] .asset-rank,
.view[data-view-panel="rag"] .asset-rank.mini,
.view[data-view-panel="rag"] .tag-pill,
.view[data-view-panel="rag"] .asset-status-badge,
.view[data-view-panel="rag"] .field-card-top,
.view[data-view-panel="rag"] .rubric-top {
  border-color: rgba(126, 228, 223, 0.17) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(3, 10, 13, 0.8) !important;
  color: rgba(222, 240, 238, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.view[data-view-panel="templates"] h2,
.view[data-view-panel="templates"] h3,
.view[data-view-panel="templates"] strong,
.view[data-view-panel="templates"] .template-use-editor-head strong,
.view[data-view-panel="templates"] .asset-metric strong,
.view[data-view-panel="templates"] .empty-state strong,
.view[data-view-panel="rag"] h2,
.view[data-view-panel="rag"] h3,
.view[data-view-panel="rag"] h4,
.view[data-view-panel="rag"] strong,
.view[data-view-panel="rag"] .library-facts strong {
  color: rgba(246, 255, 253, 0.96) !important;
}

.view[data-view-panel="templates"] p,
.view[data-view-panel="templates"] span,
.view[data-view-panel="templates"] small,
.view[data-view-panel="templates"] .asset-summary,
.view[data-view-panel="templates"] .template-use-copy p,
.view[data-view-panel="templates"] .template-editor-foot,
.view[data-view-panel="rag"] p,
.view[data-view-panel="rag"] span,
.view[data-view-panel="rag"] li,
.view[data-view-panel="rag"] small,
.view[data-view-panel="rag"] .library-summary,
.view[data-view-panel="rag"] .library-template-preview,
.view[data-view-panel="rag"] .schema-code {
  color: rgba(214, 232, 230, 0.8) !important;
}

.view[data-view-panel="templates"] .eyebrow,
.view[data-view-panel="rag"] .eyebrow,
.view[data-view-panel="templates"] .field-label,
.view[data-view-panel="rag"] .field-label {
  color: rgba(126, 228, 223, 0.82) !important;
}

.view[data-view-panel="templates"] .asset-status-badge.reviewed,
.view[data-view-panel="rag"] .asset-status-badge.reviewed {
  border-color: rgba(174, 220, 118, 0.34) !important;
  background: rgba(174, 220, 118, 0.13) !important;
  color: rgba(228, 248, 198, 0.94) !important;
}

.view[data-view-panel="templates"] .asset-status-badge.pending_review,
.view[data-view-panel="rag"] .asset-status-badge.pending_review {
  border-color: rgba(255, 170, 80, 0.34) !important;
  background: rgba(255, 170, 80, 0.13) !important;
  color: rgba(255, 229, 196, 0.94) !important;
}

.view[data-view-panel="templates"] .ghost-btn,
.view[data-view-panel="rag"] .ghost-btn {
  border-color: rgba(126, 228, 223, 0.22) !important;
  background: rgba(4, 12, 16, 0.82) !important;
  color: rgba(238, 251, 249, 0.9) !important;
}

.view[data-view-panel="templates"] .primary-btn,
.view[data-view-panel="rag"] .primary-btn {
  border-color: rgba(174, 220, 118, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255, 170, 80, 0.94), rgba(174, 220, 118, 0.92)) !important;
  color: rgba(4, 8, 7, 0.92) !important;
}

.view[data-view-panel="templates"] .ghost-btn:hover,
.view[data-view-panel="rag"] .ghost-btn:hover {
  border-color: rgba(255, 170, 80, 0.45) !important;
  background:
    linear-gradient(160deg, rgba(255, 170, 80, 0.16), rgba(174, 220, 118, 0.1)),
    rgba(6, 18, 18, 0.86) !important;
  color: #fff7ec !important;
}

/* Task sessions: separate multi-task management from the focused creation workspace. */
.task-session-page {
  display: grid;
  gap: 18px;
  align-content: start;
}

.task-session-hero,
.task-session-board {
  border: 1px solid rgba(126, 228, 223, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(126, 228, 223, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(13, 27, 33, 0.94), rgba(5, 11, 15, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 72px rgba(0, 0, 0, 0.34);
}

.task-session-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
}

.task-session-hero h2 {
  margin: 4px 0 8px;
  color: rgba(249, 255, 253, 0.97);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.95;
}

.task-session-hero p,
.task-session-board-head p {
  margin: 0;
  max-width: 680px;
  color: rgba(214, 232, 230, 0.76);
  line-height: 1.7;
}

.task-session-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 260px;
  color: rgba(214, 232, 230, 0.74);
  font-size: 12px;
}

.task-session-actions > span {
  flex-basis: 100%;
  text-align: right;
}

.task-session-board {
  padding: 18px;
}

.task-session-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 4px 18px;
}

.task-session-board-head strong {
  display: block;
  margin-top: 4px;
  color: rgba(249, 255, 253, 0.96);
  font-size: 18px;
}

.task-session-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0;
}

.task-session-list .session-card {
  flex: none;
  min-height: 150px;
  border-color: rgba(126, 228, 223, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(4, 13, 17, 0.86);
}

.task-session-list .session-card:hover,
.task-session-list .session-card.active {
  border-color: rgba(255, 170, 80, 0.44);
  background:
    linear-gradient(145deg, rgba(255, 170, 80, 0.14), rgba(126, 228, 223, 0.07)),
    rgba(5, 15, 18, 0.9);
}

.task-session-actions .primary-btn,
.task-session-actions .ghost-btn {
  white-space: nowrap;
}

@media (min-width: 1281px) {
  .view[data-view-panel="workbench"] .workbench-grid {
    grid-template-columns: minmax(700px, 760px) minmax(0, 1fr) !important;
  }

  .view[data-view-panel="workbench"] .setup-panel {
    overflow: visible !important;
  }
}

/* Workbench heading hierarchy: eyebrow, title and description form one block. */
.task-session-toolbar {
  align-items: flex-end;
  padding-top: 8px;
  padding-bottom: 20px;
}

.task-session-heading {
  display: grid;
  align-items: start;
  gap: 4px;
}

.task-session-heading .eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
}

.task-session-heading h2 {
  margin-top: 2px;
}

.task-session-heading p:not(.eyebrow) {
  margin-top: 5px;
}

.task-session-actions {
  padding-bottom: 2px;
}

@media (max-width: 980px) {
  .task-session-toolbar {
    align-items: stretch;
  }

  .task-session-heading {
    width: 100%;
  }
}

@media (min-width: 1281px) and (max-width: 1560px) {
  .view[data-view-panel="workbench"] .workbench-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  .view[data-view-panel="workbench"] .setup-panel,
  .view[data-view-panel="workbench"] .output-panel {
    grid-row: auto;
  }
}

@media (max-width: 1280px) {
  .view[data-view-panel="workbench"] .workbench-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  .view[data-view-panel="workbench"] .setup-panel,
  .view[data-view-panel="workbench"] .output-panel {
    grid-row: auto;
  }

  .task-session-hero,
  .task-session-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-session-actions,
  .task-session-actions > span {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Safari desktop containment for the expanded style selector. */
@media (min-width: 1360px) and (max-width: 1700px) {
  #app[data-active-view="workbench"] .composer-card.composer-studio .composer-style-tray.open {
    right: 14px !important;
    width: clamp(900px, 68vw, 1120px) !important;
    max-width: calc(100vw - 108px) !important;
  }

  #app[data-active-view="workbench"] .composer-style-tray.open .style-tray-collapse {
    left: 10px !important;
  }

  #app[data-active-view="workbench"] .output-panel .prompt-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #app[data-active-view="workbench"] .output-panel .prompt-toolbar {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Terminal task-list rules: the legacy card grid appears earlier in the product
   history and must not compress operational rows back into 250px tiles. */
.task-session-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

.task-session-list .session-card.session-row {
  width: 100%;
  max-width: none;
  flex-basis: auto;
}

.task-session-list .session-open-btn {
  min-width: 78px;
  white-space: nowrap;
}

.session-card[data-status="cancelled"] .session-status-pill {
  background: rgba(174, 184, 190, 0.14);
  color: rgba(220, 231, 234, 0.82);
}

.session-card[data-status="cancelled"] .session-progress-track i {
  background: rgba(174, 184, 190, 0.52);
}

.session-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(241, 164, 155, 0.38);
  border-radius: 7px;
  background: rgba(208, 91, 84, 0.1);
  color: #ffc2bb;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.session-cancel-btn:hover,
.session-cancel-btn:focus-visible {
  border-color: rgba(241, 164, 155, 0.68);
  background: rgba(208, 91, 84, 0.2);
  outline: none;
}

.session-cancel-btn:active {
  transform: translateY(1px);
}

.composer-send-btn.is-cancel {
  border-color: rgba(241, 164, 155, 0.52) !important;
  background: linear-gradient(180deg, #d8756b, #9f403b) !important;
  color: #fff8f7 !important;
  font-size: 17px;
  box-shadow:
    0 16px 38px rgba(159, 64, 59, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.reactor-node[data-status="cancelled"],
.review-skill-chip[data-status="cancelled"],
.review-skill-cluster[data-status="cancelled"] {
  border-color: rgba(174, 184, 190, 0.3) !important;
  background: rgba(174, 184, 190, 0.08) !important;
  color: rgba(220, 231, 234, 0.64) !important;
  box-shadow: none !important;
}

.session-filter-bar {
  width: 100%;
  max-width: 100%;
}

.session-filter-bar button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Creation mode returns to a vertical composition: the large Agent board is
   the primary surface, while all generated output follows underneath. */
@media (min-width: 1281px) {
  #app[data-active-view="workbench"] .workbench-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 24px !important;
  }

  #app[data-active-view="workbench"] .setup-panel,
  #app[data-active-view="workbench"] .output-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100%;
  }

  #app[data-active-view="workbench"] .setup-panel {
    padding: 18px !important;
  }

  #app[data-active-view="workbench"] .reactor-flow-map {
    grid-template-columns: minmax(88px, 118px) minmax(620px, 720px) minmax(300px, 360px) !important;
    column-gap: clamp(34px, 3.6vw, 72px) !important;
    justify-content: center;
    width: min(1500px, 100%) !important;
    min-height: 700px;
    margin-inline: auto;
  }

  #app[data-active-view="workbench"] .reactor-flow-map .reactor-core {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
  }

  #app[data-active-view="workbench"] .output-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="workbench"] .support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app[data-active-view="workbench"] .output-panel .prompt-head {
    align-items: center;
    flex-direction: row;
  }

  #app[data-active-view="workbench"] .output-panel .prompt-toolbar {
    justify-content: flex-end;
    width: auto;
  }

  #app[data-active-view="workbench"] .reactor-core .composer-launcher-row {
    grid-template-columns: minmax(128px, 0.9fr) minmax(142px, 1fr) minmax(142px, 1fr) minmax(172px, 1.15fr) !important;
  }
}

@media (max-width: 700px) {
  #app[data-active-view="workbench"] .reactor-core .composer-launcher-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 1281px) and (max-width: 1680px) {
  #app[data-active-view="workbench"] .reactor-flow-map {
    grid-template-columns: minmax(76px, 96px) minmax(490px, 530px) minmax(306px, 336px) !important;
    column-gap: clamp(34px, 3.2vw, 52px) !important;
    align-items: center;
    width: min(1120px, 100%) !important;
    min-height: 720px;
  }

  #app[data-active-view="workbench"] .flow-rail-main {
    grid-area: auto;
  }

  #app[data-active-view="workbench"] .reactor-flow-map .reactor-core {
    grid-area: auto;
    width: min(100%, 530px) !important;
    max-width: 530px !important;
    overflow: visible;
  }

  #app[data-active-view="workbench"] .review-console {
    grid-area: auto;
    width: 100%;
    max-width: 336px;
    justify-self: stretch;
    padding-inline: 8px;
  }

  #app[data-active-view="workbench"] .reactor-core .composer-launcher-row {
    grid-template-columns: minmax(98px, 0.9fr) minmax(106px, 0.95fr) minmax(106px, 0.95fr) minmax(122px, 1.05fr) !important;
    gap: 8px !important;
  }

  #app[data-active-view="workbench"] .reactor-core .composer-launcher,
  #app[data-active-view="workbench"] .reactor-core .composer-auto-frame-control,
  #app[data-active-view="workbench"] .reactor-core .composer-first-frame-size-control {
    min-height: 58px;
    padding: 9px !important;
  }

  #app[data-active-view="workbench"] .reactor-core .composer-stage {
    width: 100% !important;
    min-height: 146px !important;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-chip {
    min-height: 54px;
    padding: 8px 8px;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-cluster {
    min-height: 58px;
  }
}

#app[data-active-view="workbench"] .reactor-flow-map .reactor-core {
  overflow: visible;
  justify-self: stretch;
}

#app[data-active-view="workbench"] .reactor-flow-map .reactor-core > *,
#app[data-active-view="workbench"] .reactor-core .composer-stage,
#app[data-active-view="workbench"] .reactor-core .composer-bottombar,
#app[data-active-view="workbench"] .reactor-core .reactor-core-status,
#app[data-active-view="workbench"] .reactor-core .idea-input.studio-input {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-stage {
  width: calc(100% - 34px) !important;
  justify-self: start;
  overflow: hidden;
  min-height: 150px !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
}

#app[data-active-view="workbench"] .reactor-core .idea-input.studio-input {
  width: 100% !important;
  min-height: 120px !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  resize: none;
}

#app[data-active-view="workbench"] .review-console {
  z-index: 4;
  justify-self: stretch;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottombar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px !important;
  padding-top: 10px !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottom-left {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottom-right {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 50px;
  align-items: center;
  gap: 8px !important;
  width: 100%;
  min-width: 0;
  padding-right: 14px;
  box-sizing: border-box;
}

#app[data-active-view="workbench"] .reactor-core .composer-send-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 16px !important;
  justify-self: end;
}

#app[data-active-view="workbench"] .reactor-core-status {
  padding-right: 14px !important;
  box-sizing: border-box;
}

#app[data-active-view="workbench"] .reactor-progress-label,
#app[data-active-view="workbench"] #reactor-progress-label {
  justify-self: end;
}

/* Narrow desktop containment: keep the enlarged drawer inside the creation
   surface and keep its collapse control above the sidebar hit area. */
@media (min-width: 781px) and (max-width: 1080px) {
  #app[data-active-view="workbench"] .composer-card.composer-studio .composer-style-tray.open {
    right: 14px !important;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
  }

  #app[data-active-view="workbench"] .composer-style-tray.open .style-tray-collapse {
    left: 10px !important;
  }
}

.output-panel .review-dimension-card.is-na {
  opacity: 0.72;
  border-style: dashed !important;
}

.output-panel .review-dimension-card.is-na .review-meter span {
  width: 0 !important;
}

/* First-frame editor: keep both working canvases compact and symmetric. */
.first-frame-card .first-frame-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  width: min(100%, 1280px);
  margin-inline: auto;
  gap: 14px;
}

.first-frame-card .first-frame-pane,
.first-frame-card .first-frame-image-panel {
  width: 100%;
  min-width: 0;
}

.first-frame-card .first-frame-pane-head {
  min-height: 36px;
}

.first-frame-card .first-frame-prompt,
.first-frame-card .first-frame-image-stage {
  width: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: 1;
}

@media (max-width: 700px) {
  .first-frame-card .first-frame-workspace {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 18px;
  }

  .first-frame-card .first-frame-prompt {
    min-height: 320px;
    aspect-ratio: auto;
  }
}

/* Final navigation emphasis: creation mode is the product's primary workflow. */
.sidebar-nav .nav-item[data-view="workbench"] {
  border-color: rgba(255, 214, 137, 0.42) !important;
  background:
    linear-gradient(118deg, rgba(220, 68, 104, 0.62), rgba(116, 83, 203, 0.58) 34%, rgba(35, 165, 158, 0.58) 68%, rgba(220, 151, 55, 0.62)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(18, 6, 29, 0.26),
    0 0 22px rgba(69, 190, 181, 0.1) !important;
}

.sidebar-nav .nav-item[data-view="workbench"]::before {
  opacity: 0.48 !important;
  background: linear-gradient(90deg, rgba(255, 245, 213, 0.2), transparent 72%) !important;
}

.sidebar-nav .nav-item[data-view="workbench"] > * {
  position: relative;
  z-index: 1;
}

.sidebar-nav .nav-item[data-view="workbench"] .nav-icon {
  border: 1px solid rgba(255, 239, 201, 0.3) !important;
  background: rgba(10, 16, 24, 0.44) !important;
  color: #fff7df !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(12, 4, 20, 0.2) !important;
}

.sidebar-nav .nav-item[data-view="workbench"]:hover {
  border-color: rgba(255, 230, 174, 0.7) !important;
  background:
    linear-gradient(118deg, rgba(235, 78, 115, 0.72), rgba(128, 91, 218, 0.68) 34%, rgba(42, 183, 175, 0.68) 68%, rgba(235, 166, 67, 0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 16px 34px rgba(18, 6, 29, 0.34),
    0 0 26px rgba(78, 196, 186, 0.15) !important;
}

.sidebar-nav .nav-item[data-view="workbench"].active {
  border-color: rgba(255, 239, 196, 0.84) !important;
  background:
    linear-gradient(118deg, rgba(236, 77, 112, 0.86), rgba(130, 89, 219, 0.82) 34%, rgba(37, 184, 174, 0.82) 68%, rgba(238, 170, 68, 0.86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 18px 38px rgba(18, 6, 29, 0.38),
    0 0 30px rgba(78, 196, 186, 0.18) !important;
}

.view[data-view-panel="guided"] .coming-soon-panel .coming-soon-note {
  max-width: none;
  margin: 0 auto !important;
  color: rgba(232, 246, 243, 0.68) !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Compact style selector: every card and category row follows its content height. */
.composer-style-tray .chip-wrap {
  grid-template-rows: max-content max-content !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
}

.composer-style-tray .image-mode-panel,
.composer-style-tray .image-mode-grid,
.composer-style-tray .style-columns {
  align-self: start !important;
  align-items: start !important;
  align-content: start !important;
}

.composer-style-tray .image-mode-grid {
  grid-auto-rows: max-content !important;
}

.composer-style-tray .image-mode-card {
  align-self: start !important;
  align-content: start !important;
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 13px 14px !important;
  gap: 6px !important;
}

.composer-style-tray .image-mode-card strong,
.composer-style-tray .image-mode-card span,
.composer-style-tray .image-mode-card small {
  margin: 0 !important;
}

.composer-style-tray .style-columns {
  grid-auto-rows: max-content !important;
}

.composer-style-tray .style-column,
.composer-style-tray .style-column.generic {
  align-self: start !important;
  align-items: start !important;
  align-content: start !important;
  min-height: 0 !important;
  height: auto !important;
  block-size: auto !important;
  padding: 7px 8px !important;
}

.composer-style-tray .style-column-head,
.composer-style-tray .style-chip-row,
.composer-style-tray .generic-style-groups {
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
  block-size: auto !important;
}

/* Workbench composition: full-width input, horizontal Agent chain, then review skills. */
#app[data-active-view="workbench"] .setup-panel {
  padding: 10px !important;
}

#app[data-active-view="workbench"] .composer-card.composer-studio {
  padding: 12px !important;
}

#app[data-active-view="workbench"] .reactor-shell {
  padding: 0 !important;
}

#app[data-active-view="workbench"] .reactor-flow-map {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "core"
    "main"
    "review" !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#app[data-active-view="workbench"] .reactor-flow-map::before {
  inset: 0 !important;
}

#app[data-active-view="workbench"] .reactor-flow-map .reactor-core {
  grid-area: core !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

#app[data-active-view="workbench"] .reactor-core-top {
  position: relative;
  padding-right: 52px;
}

#app[data-active-view="workbench"] .reactor-core .composer-expand-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

#app[data-active-view="workbench"] .reactor-core .composer-stage {
  width: 100% !important;
  justify-self: stretch !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottom-right,
#app[data-active-view="workbench"] .reactor-core-status {
  padding-right: 0 !important;
}

#app[data-active-view="workbench"] .flow-rail-main {
  grid-area: main !important;
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: 72px !important;
  gap: 12px !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 0 8px !important;
  box-sizing: border-box;
}

#app[data-active-view="workbench"] .flow-rail-main::before {
  content: "";
  position: absolute;
  left: calc(100% / 14);
  right: calc(100% / 14);
  top: 50%;
  height: 1px;
  background: rgba(126, 228, 223, 0.14);
  pointer-events: none;
}

#app[data-active-view="workbench"] .flow-rail-main .flow-lines {
  display: none !important;
}

#app[data-active-view="workbench"] .reactor-flow-map .flow-rail-main .reactor-node {
  position: relative !important;
  z-index: 1;
  top: auto !important;
  left: auto !important;
  grid-row: 1 !important;
  grid-column: var(--flow-row) !important;
  width: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 8px !important;
  border-radius: 50% !important;
  transform: none !important;
}

#app[data-active-view="workbench"] .reactor-flow-map .flow-rail-main .reactor-node:not(:disabled):hover {
  transform: translateY(-2px) scale(1.03) !important;
}

#app[data-active-view="workbench"] .review-console {
  grid-area: review !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 10px;
}

#app[data-active-view="workbench"] .review-console-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 9px;
}

#app[data-active-view="workbench"] .review-console .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#app[data-active-view="workbench"] .review-console .review-skill-chip {
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 8px !important;
}

#app[data-active-view="workbench"] .review-console .review-skill-chip strong {
  font-size: 11px;
}

#app[data-active-view="workbench"] .review-console .review-skill-chip small {
  font-size: 9px;
}

#app[data-active-view="workbench"] .review-console-foot {
  margin: 0;
  text-align: right;
}

@media (max-width: 1280px) {
  #app[data-active-view="workbench"] .review-console .review-skill-grid {
    gap: 4px !important;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-chip {
    padding: 6px 4px !important;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-chip strong {
    font-size: 10px;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-chip small {
    font-size: 8px;
  }
}

@media (max-width: 700px) {
  #app[data-active-view="workbench"] .reactor-flow-map {
    overflow: visible;
  }

  #app[data-active-view="workbench"] .flow-rail-main,
  #app[data-active-view="workbench"] .review-console {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  #app[data-active-view="workbench"] .flow-rail-main {
    grid-template-columns: repeat(7, 82px) !important;
    justify-content: start !important;
    min-width: 646px;
  }

  #app[data-active-view="workbench"] .review-console .review-skill-grid {
    grid-template-columns: repeat(10, 108px) !important;
    min-width: 1152px;
  }
}

/* Composer controls: compact single-row groups with inline numeric values. */
#app[data-active-view="workbench"] .reactor-core-top {
  padding-right: 0;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottombar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px 14px !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottom-left,
#app[data-active-view="workbench"] .reactor-core .composer-bottom-right {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  gap: 8px !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-bottom-right {
  margin-left: auto;
}

#app[data-active-view="workbench"] .reactor-core .composer-inline-control {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  align-content: center;
  width: auto;
  gap: 6px !important;
}

#app[data-active-view="workbench"] .reactor-core .composer-control-label {
  grid-column: auto;
  flex: 0 0 auto;
}

#app[data-active-view="workbench"] .reactor-core .segmented.compact {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  min-width: 0;
  gap: 6px;
}

#app[data-active-view="workbench"] .reactor-core .segmented.compact .segment {
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: 12px;
  white-space: nowrap;
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option:has(.segment.active) {
  border: 1px solid rgba(126, 228, 223, 0.34);
  background: rgba(126, 228, 223, 0.08);
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option:has(.segment.active) > .segment {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option .duration-row.compact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 9px 0 0;
  gap: 3px;
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option .duration-row.compact:has(input:disabled) {
  display: none;
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option .duration-row.compact input {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  min-height: 26px;
  padding: 0 4px;
  border-radius: 7px;
  text-align: center;
}

#app[data-active-view="workbench"] .reactor-core .segment-value-option .duration-row.compact span {
  font-size: 10px;
}

#app[data-active-view="workbench"] .reactor-core .composer-meta-readout {
  flex: 0 0 auto;
  width: auto;
  min-width: 78px;
  padding-inline: 10px;
}

/* The style selector replaces the complete input, Agent, and review surface. */
#app[data-active-view="workbench"] .reactor-flow-map:has(> .composer-style-tray.open) {
  overflow: hidden !important;
}

#app[data-active-view="workbench"] .reactor-flow-map:has(> .composer-style-tray.open) > :not(.composer-style-tray) {
  visibility: hidden;
}

#app[data-active-view="workbench"] .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  transform: none !important;
  z-index: 20 !important;
}

#app[data-active-view="workbench"] .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open .style-tray-collapse {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  width: auto !important;
  min-width: 72px;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

#app[data-active-view="workbench"] .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open .style-tray-collapse:hover {
  transform: translateY(-1px) !important;
}

#app[data-active-view="workbench"] .composer-card.composer-studio .reactor-flow-map > .composer-style-tray.open .chip-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 54px 16px 16px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 980px) {
  #app[data-active-view="workbench"] .reactor-core .composer-bottombar {
    align-items: flex-start;
  }

  #app[data-active-view="workbench"] .reactor-core .composer-bottom-right {
    margin-left: 0;
  }
}

/* Final cascade lock for the product-facing template workspace. */
.view[data-view-panel="templates"] .template-use-workspace {
  border: 0 !important;
  border-bottom: 1px solid rgba(126, 228, 223, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.view[data-view-panel="templates"] .template-use-editor-card {
  border-color: rgba(126, 228, 223, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(3, 8, 12, 0.72) !important;
}

.view[data-view-panel="templates"] .template-editor {
  border-radius: 6px !important;
  background: rgba(2, 7, 10, 0.9) !important;
}

@media (max-width: 1080px) {
  .view[data-view-panel="templates"] .template-use-workspace {
    grid-template-columns: 1fr !important;
  }
}

/* Multi-dimensional style recommendation Skill. */
.composer-style-tray .style-recommendation-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 170, 80, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(255, 170, 80, 0.075), rgba(126, 228, 223, 0.035)),
    rgba(3, 9, 13, 0.78);
}

.composer-style-tray .style-recommendation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.composer-style-tray .style-recommendation-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.composer-style-tray .style-recommendation-head strong {
  color: #f4fffd;
  font-size: 14px;
}

.composer-style-tray .style-recommendation-head span,
.composer-style-tray .style-recommendation-head small,
.composer-style-tray .style-recommendation-empty,
.composer-style-tray .style-recommendation-loading {
  color: rgba(213, 232, 230, 0.64);
  font-size: 11px;
  line-height: 1.5;
}

.composer-style-tray .style-recommendation-head small {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 4px;
  background: rgba(126, 228, 223, 0.07);
}

.composer-style-tray .style-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  min-width: 0;
}

.composer-style-tray .style-recommendation-option.chip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 11px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 6px;
  text-align: left;
  white-space: normal;
  align-items: stretch;
  border: 1px solid rgba(143, 241, 235, 0.2);
  background: rgba(143, 241, 235, 0.055);
}

.composer-style-tray .style-recommendation-option.chip:hover {
  border-color: rgba(143, 241, 235, 0.56);
  background: rgba(143, 241, 235, 0.12);
}

.composer-style-tray .style-recommendation-option.chip.active {
  border-color: #8ff1eb;
  background: rgba(143, 241, 235, 0.2);
  color: #f4fffd;
  box-shadow: inset 0 0 0 1px rgba(143, 241, 235, 0.2), 0 0 16px rgba(143, 241, 235, 0.08);
}

.composer-style-tray .style-recommendation-option > span {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer-style-tray .style-recommendation-option strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-style-tray .style-recommendation-option em {
  flex: 0 0 auto;
  color: rgba(255, 205, 147, 0.88);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.composer-style-tray .style-recommendation-empty,
.composer-style-tray .style-recommendation-loading {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px dashed rgba(126, 228, 223, 0.13);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.12);
}

.composer-style-tray .style-recommendation-loading {
  gap: 9px;
}

.composer-style-tray .style-recommendation-loading i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8ff1eb;
  box-shadow: 0 0 12px rgba(143, 241, 235, 0.72);
  animation: styleRecommendationPulse 1s ease-in-out infinite;
}

@keyframes styleRecommendationPulse {
  50% { opacity: 0.42; transform: scale(0.76); }
}

@media (max-width: 700px) {
  .composer-style-tray .style-recommendation-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .composer-style-tray .style-recommendation-grid {
    grid-template-columns: 1fr;
  }
}

/* Fast mode reuses the creation composer and shows its complete execution rail. */
.fast-flow-rail {
  display: none;
}

#app[data-creation-mode="fast"] .reactor-flow-map {
  grid-template-areas:
    "core"
    "main" !important;
}

#app[data-creation-mode="fast"] .flow-rail-main,
#app[data-creation-mode="fast"] .review-console {
  display: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-rail {
  grid-area: main;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 14px 10px;
  box-sizing: border-box;
  overflow: hidden;
  border-top: 1px solid rgba(230, 184, 83, 0.12);
  border-bottom: 1px solid rgba(230, 184, 83, 0.1);
  background:
    linear-gradient(90deg, transparent, rgba(121, 76, 16, 0.08) 22%, rgba(235, 190, 88, 0.075) 50%, rgba(121, 76, 16, 0.08) 78%, transparent);
}

#app[data-creation-mode="fast"] .fast-flow-rail::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  /* Align the rail to the six 78px badges: 20px top padding + 39px radius. */
  top: calc(20px + 39px);
  height: 2px;
  background:
    linear-gradient(90deg, rgba(92, 53, 8, 0.22), rgba(224, 172, 62, 0.72), rgba(255, 244, 186, 0.96), rgba(195, 129, 28, 0.62), rgba(92, 53, 8, 0.22));
  background-size: 220% 100%;
  box-shadow: 0 0 8px rgba(230, 177, 66, 0.28), 0 0 20px rgba(209, 139, 30, 0.12);
  pointer-events: none;
  animation: fastRailGoldCurrent 3.4s linear infinite;
}

#app[data-creation-mode="fast"] .fast-flow-rail::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 7%;
  /* Keep the animated highlight on the same badge centerline. */
  top: calc(20px + 39px);
  width: 68px;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 118, 0.4), #fff7cc 72%, transparent);
  filter: drop-shadow(0 0 6px rgba(255, 218, 105, 0.84));
  animation: fastRailGoldPulse 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.fast-flow-node {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 70px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(224, 177, 70, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(54, 36, 10, 0.48), rgba(5, 12, 15, 0.96) 54%, rgba(22, 15, 5, 0.72));
  color: rgba(248, 236, 205, 0.78);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 183, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.fast-flow-node::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background: linear-gradient(112deg, transparent 24%, rgba(255, 240, 184, 0.34) 47%, transparent 67%);
  transform: translateX(-135%);
  animation: fastNodeGoldSweep 6.4s ease-in-out infinite;
}

.fast-flow-node::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 10px 7px;
  height: 1px;
  pointer-events: none;
  opacity: 0.46;
  background: linear-gradient(90deg, transparent, rgba(240, 194, 88, 0.76), transparent);
  box-shadow: 0 0 7px rgba(226, 167, 57, 0.3);
  animation: fastNodeGoldBreath 2.8s ease-in-out infinite;
}

.fast-flow-node:nth-child(2)::before { animation-delay: 0.45s; }
.fast-flow-node:nth-child(3)::before { animation-delay: 0.9s; }
.fast-flow-node:nth-child(4)::before { animation-delay: 1.35s; }
.fast-flow-node:nth-child(5)::before { animation-delay: 1.8s; }
.fast-flow-node:nth-child(6)::before { animation-delay: 2.25s; }
.fast-flow-node:nth-child(7)::before { animation-delay: 2.7s; }
.fast-flow-node:nth-child(8)::before { animation-delay: 3.15s; }

.fast-flow-node > * {
  position: relative;
  z-index: 1;
}

.fast-flow-node:hover {
  transform: translateY(-2px);
  border-color: rgba(250, 213, 125, 0.56);
  color: #fff4d2;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 207, 0.18),
    0 15px 32px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(222, 157, 45, 0.12);
}

.fast-flow-node span {
  color: rgba(244, 201, 105, 0.88);
  font-size: 9px;
  font-weight: 850;
}

.fast-flow-node strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fast-flow-node small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(226, 216, 189, 0.5);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fast-flow-node[data-status="running"] {
  border-color: rgba(255, 224, 143, 0.78);
  background: linear-gradient(145deg, rgba(135, 86, 17, 0.84), rgba(30, 20, 7, 0.96) 54%, rgba(7, 14, 16, 0.96));
  color: #fff8e9;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 217, 0.24),
    0 0 0 3px rgba(244, 190, 77, 0.09),
    0 16px 34px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(230, 166, 49, 0.18);
  animation: fastNodeRunningPulse 1.45s ease-in-out infinite;
}

.fast-flow-node[data-status="done"] {
  border-color: rgba(235, 190, 87, 0.58);
  background: linear-gradient(145deg, rgba(91, 59, 13, 0.82), rgba(8, 15, 17, 0.96));
  color: #fff3d6;
}

.fast-flow-node[data-warning="true"] {
  border-color: rgba(255, 190, 82, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 189, 0.16),
    0 0 0 2px rgba(255, 178, 55, 0.08),
    0 0 18px rgba(255, 169, 38, 0.16);
}

.fast-flow-node[data-status="skipped"] {
  border-style: dashed;
  opacity: 0.62;
}

.fast-flow-node[data-status="error"] {
  border-color: rgba(255, 113, 126, 0.68);
  background: rgba(68, 20, 28, 0.82);
  color: #fff1f3;
}

@keyframes fastRailGoldCurrent {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}

@keyframes fastRailGoldPulse {
  0% { left: 5%; opacity: 0; transform: translateY(-50%) scaleX(0.5); }
  14% { opacity: 0.92; }
  84% { opacity: 0.92; }
  100% { left: 88%; opacity: 0; transform: translateY(-50%) scaleX(1.18); }
}

@keyframes fastNodeGoldSweep {
  0%, 56% { transform: translateX(-135%); opacity: 0; }
  67% { opacity: 0.42; }
  84%, 100% { transform: translateX(135%); opacity: 0; }
}

@keyframes fastNodeGoldBreath {
  0%, 100% { opacity: 0.24; transform: scaleX(0.7); }
  50% { opacity: 0.72; transform: scaleX(1); }
}

@keyframes fastNodeRunningPulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-1px); filter: brightness(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-creation-mode="fast"] .fast-flow-rail::before,
  #app[data-creation-mode="fast"] .fast-flow-rail::after,
  .fast-flow-node,
  .fast-flow-node::before,
  .fast-flow-node::after {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(7, 132px);
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
}

@media (max-width: 700px) {
  #app[data-active-view="workbench"] .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    overflow: visible;
  }

  #app[data-active-view="workbench"] .workbench-task-context {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  #app[data-active-view="workbench"] .topbar-actions .ghost-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Extreme Creative identity: gild only its directory entry. */
.sidebar-nav .nav-item[data-view="fast"] {
  border-color: rgba(255, 220, 132, 0.62) !important;
  background:
    linear-gradient(108deg, #4b2d08 0%, #9f6b1d 18%, #e0b553 38%, #fff0ad 49%, #c58c27 62%, #70420d 82%, #3c2307 100%) !important;
  color: #211405 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 220, 0.74),
    inset 0 -1px 0 rgba(79, 42, 5, 0.62),
    inset 0 0 0 1px rgba(111, 66, 10, 0.24) !important;
}

.sidebar-nav .nav-item[data-view="fast"]::before {
  opacity: 0.72 !important;
  background:
    linear-gradient(104deg, transparent 8%, rgba(255, 249, 211, 0.12) 30%, rgba(255, 255, 238, 0.7) 48%, rgba(255, 222, 128, 0.12) 60%, transparent 82%) !important;
}

.sidebar-nav .nav-item[data-view="fast"] > * {
  position: relative;
  z-index: 1;
}

.sidebar-nav .nav-item[data-view="fast"] .nav-icon {
  border: 1px solid rgba(77, 42, 5, 0.44) !important;
  background: linear-gradient(145deg, #fff2b4, #d69f32 58%, #8a5512) !important;
  color: #281704 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 239, 0.8) !important;
}

.sidebar-nav .nav-item[data-view="fast"]:hover {
  border-color: rgba(255, 239, 177, 0.9) !important;
  background:
    linear-gradient(108deg, #5c3709 0%, #bb8125 18%, #efd06c 38%, #fff6c5 49%, #dda73b 63%, #845113 82%, #492a08 100%) !important;
  color: #160d03 !important;
}

.sidebar-nav .nav-item[data-view="fast"].active {
  border-color: rgba(255, 246, 202, 0.98) !important;
  background:
    linear-gradient(108deg, #6d430d 0%, #ce9633 19%, #f4d779 39%, #fff9d7 49%, #e5b94f 63%, #98601a 82%, #543109 100%) !important;
  color: #130b02 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 244, 0.96),
    inset 0 -1px 0 rgba(104, 57, 7, 0.66),
    inset 0 0 0 1px rgba(104, 57, 7, 0.24) !important;
}

/* Local delivery setup: tutorial and configuration share one calm workspace. */
.nav-item-settings {
  margin-top: 10px;
}

/* Model services: pale jade base with a restrained gilded reflection. */
.sidebar-nav .nav-item.nav-item-settings[data-view="setup"] {
  border-color: rgba(232, 239, 186, 0.72);
  background:
    linear-gradient(108deg, #5d8c70 0%, #9fc99d 19%, #d9e9bd 38%, #f1dc94 49%, #d9e9b9 61%, #8dbc91 82%, #4f7963 100%);
  color: #122118;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 230, 0.72),
    inset 0 -1px 0 rgba(49, 88, 65, 0.48),
    inset 0 0 0 1px rgba(89, 121, 75, 0.2);
}

.sidebar-nav .nav-item.nav-item-settings[data-view="setup"]::before {
  opacity: 0.58;
  background: linear-gradient(104deg, transparent 10%, rgba(255, 255, 233, 0.12) 32%, rgba(255, 251, 215, 0.66) 49%, rgba(223, 243, 203, 0.12) 64%, transparent 84%);
}

.sidebar-nav .nav-item.nav-item-settings[data-view="setup"] > * {
  position: relative;
  z-index: 1;
}

.sidebar-nav .nav-item.nav-item-settings[data-view="setup"] .nav-icon {
  border: 1px solid rgba(49, 77, 52, 0.4);
  background: linear-gradient(145deg, #f8efb6 0%, #c8e5b7 54%, #77a982 100%);
  color: #142219;
  box-shadow: inset 0 1px 0 rgba(255, 255, 238, 0.8);
}

.sidebar-nav .nav-item.nav-item-settings[data-view="setup"]:hover {
  border-color: rgba(249, 243, 194, 0.92);
  background:
    linear-gradient(108deg, #6d9d7c 0%, #b2d7aa 19%, #e5efc8 38%, #f8e6a7 49%, #e4efc5 61%, #9dcb9c 82%, #5b886c 100%);
  color: #0c1811;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 237, 0.86),
    inset 0 -1px 0 rgba(49, 88, 65, 0.44),
    inset 0 0 0 1px rgba(89, 121, 75, 0.18);
}

.sidebar-nav .nav-item.nav-item-settings[data-view="setup"].active {
  border-color: rgba(255, 247, 204, 0.98);
  background:
    linear-gradient(108deg, #76a684 0%, #bce0b2 19%, #edf4d1 38%, #ffedb4 49%, #e9f2cc 61%, #a8d2a3 82%, #638f72 100%);
  color: #09140d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 241, 0.94),
    inset 0 -1px 0 rgba(50, 88, 66, 0.46),
    inset 0 0 0 1px rgba(76, 112, 69, 0.2);
}

#app[data-active-view="setup"] .topbar-actions {
  display: none;
}

#app[data-active-view="image"] .topbar-actions,
#image-studio-download[hidden] {
  display: none;
}

/* Keep every primary destination visible on a standard laptop viewport. */
@media (min-width: 1121px) {
  .sidebar-shell {
    gap: 16px;
    padding: 16px;
  }

  .brand {
    gap: 12px;
    padding-bottom: 16px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .sidebar-nav {
    gap: 10px;
    padding-bottom: 8px;
  }

  .nav-item,
  .sub-nav-item {
    gap: 12px;
    min-height: 52px;
    padding: 9px 12px;
    border-radius: 15px;
  }

  .nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .nav-item-settings {
    margin-top: 0;
  }
}

.sidebar-nav .nav-item[data-view="image"] {
  border-color: rgba(218, 179, 102, 0.38);
  background:
    radial-gradient(circle at 88% 0%, rgba(233, 198, 116, 0.22), transparent 34%),
    linear-gradient(120deg, rgba(86, 46, 130, 0.9), rgba(49, 27, 78, 0.94));
  color: rgba(250, 239, 214, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 196, 0.12),
    inset 0 0 0 1px rgba(150, 99, 191, 0.2),
    0 12px 26px rgba(25, 10, 43, 0.22);
}

.sidebar-nav .nav-item[data-view="image"]::before {
  background: linear-gradient(90deg, rgba(240, 207, 127, 0.16), transparent 72%);
}

.sidebar-nav .nav-item[data-view="image"] .nav-icon {
  border: 1px solid rgba(236, 204, 129, 0.32);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 239, 194, 0.22), transparent 32%),
    linear-gradient(145deg, rgba(134, 79, 173, 0.92), rgba(64, 35, 94, 0.98));
  color: #f7e7bd;
  box-shadow: 0 8px 20px rgba(29, 12, 49, 0.3);
}

.sidebar-nav .nav-item[data-view="image"]:hover,
.sidebar-nav .nav-item[data-view="image"].active {
  border-color: rgba(244, 211, 132, 0.78);
  background:
    radial-gradient(circle at 86% 0%, rgba(246, 214, 139, 0.36), transparent 36%),
    linear-gradient(120deg, rgba(111, 59, 158, 0.98), rgba(63, 34, 92, 0.98));
  color: #fff7e5;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 209, 0.22),
    inset 0 0 0 1px rgba(190, 132, 222, 0.2),
    0 16px 34px rgba(34, 12, 57, 0.36),
    0 0 24px rgba(196, 148, 78, 0.1);
}

.setup-service-scroll {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: 48px;
  color: #edf7f7;
}

.service-setup-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 8px 0 6px;
}

.service-setup-hero h2 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #f4fbfa;
}

.service-setup-hero p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: rgba(218, 233, 231, 0.7);
  line-height: 1.75;
}

.setup-overall-state {
  display: flex;
  min-width: 172px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 228, 223, 0.2);
  border-radius: 8px;
  background: rgba(12, 23, 27, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.setup-state-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8e9b99;
  box-shadow: 0 0 0 5px rgba(142, 155, 153, 0.1);
}

.setup-overall-state[data-status="verified"] .setup-state-dot {
  background: #7ee4df;
  box-shadow: 0 0 0 5px rgba(126, 228, 223, 0.12);
}

.setup-overall-state[data-status="saved"] .setup-state-dot {
  background: #94c8c3;
  box-shadow: 0 0 0 5px rgba(148, 200, 195, 0.12);
}

.setup-overall-state[data-status="partial"] .setup-state-dot {
  background: #d8b777;
  box-shadow: 0 0 0 5px rgba(216, 183, 119, 0.12);
}

.setup-overall-state[data-status="loading"] .setup-state-dot {
  animation: setup-status-pulse 1.4s ease-in-out infinite;
}

.setup-overall-state[data-status="error"] .setup-state-dot {
  background: var(--rose);
  box-shadow: 0 0 0 5px rgba(154, 72, 87, 0.12);
}

.setup-overall-state small,
.setup-overall-state strong {
  display: block;
}

.setup-overall-state small {
  margin-bottom: 2px;
  color: rgba(207, 224, 224, 0.58);
  font-size: 11px;
  text-transform: uppercase;
}

.setup-integrity-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto !important;
  min-height: 60px;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 8px;
  background: rgba(10, 19, 23, 0.82);
  color: #eaf5f4;
  overflow: hidden;
}

.setup-integrity-strip > div {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  border-right: 1px solid rgba(126, 228, 223, 0.12);
}

.setup-integrity-strip > div:last-child {
  border-right: 0;
}

.setup-integrity-strip span {
  color: rgba(207, 224, 224, 0.58);
  font-size: 12px;
}

.setup-integrity-strip strong {
  font-size: 13px;
}

.setup-integrity-strip strong[data-complete="true"] {
  color: #8fe9e4;
}

.setup-provider-band {
  display: grid;
  grid-template-columns: clamp(320px, 30%, 390px) minmax(0, 1fr);
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 8px;
  background: #101b1d;
  box-shadow: 0 16px 44px rgba(2, 10, 13, 0.2);
}

.provider-guide {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(28px, 3vw, 38px);
  background: #0e211f;
  color: #f4f7f5;
}

.setup-provider-band[data-provider-band="image"] .provider-guide {
  background: #10201f;
  box-shadow: inset 3px 0 0 rgba(221, 186, 111, 0.2);
}

.provider-guide .eyebrow {
  color: rgba(159, 220, 211, 0.7);
}

.setup-provider-band[data-provider-band="image"] .provider-guide .eyebrow {
  color: rgba(221, 186, 111, 0.78);
}

.provider-number {
  position: absolute;
  top: 18px;
  right: 24px;
  color: rgba(255, 255, 255, 0.12);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.provider-guide h3 {
  margin: 8px 0 12px;
  font-size: 28px;
  letter-spacing: 0;
}

.provider-summary {
  max-width: 36em;
  margin: 0;
  color: rgba(240, 246, 243, 0.7);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}

.provider-steps {
  display: grid;
  gap: 14px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.provider-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.provider-steps li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(160, 222, 212, 0.3);
  border-radius: 50%;
  color: #b8e3db;
  font-size: 11px;
  font-weight: 800;
}

.setup-provider-band[data-provider-band="image"] .provider-steps li > span {
  border-color: rgba(221, 186, 111, 0.34);
  color: #e5c98d;
}

.provider-steps p {
  margin: 3px 0 0;
  color: rgba(241, 246, 244, 0.8);
  font-size: 13px;
  line-height: 1.6;
}

.provider-external-link {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  margin-top: auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

.provider-external-link:hover {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.08);
}

.provider-config {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  padding: clamp(30px, 3vw, 40px) clamp(30px, 3.4vw, 46px) 36px;
  background: #121c1f;
  color: #edf7f7;
}

.provider-config-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.14);
}

.provider-config-head > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.provider-config-head h3 {
  order: -1;
  margin: 0;
  color: #f0f8f7;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.provider-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid rgba(207, 224, 224, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(218, 233, 231, 0.68);
  font-size: 11px;
  font-weight: 800;
}

.provider-status[data-status="verified"] {
  border-color: rgba(126, 228, 223, 0.24);
  background: rgba(126, 228, 223, 0.12);
  color: #a5efeb;
}

.provider-status[data-status="saved"] {
  border-color: rgba(147, 193, 190, 0.22);
  background: rgba(147, 193, 190, 0.09);
  color: #bddad7;
}

.provider-status[data-status="environment"] {
  border-color: rgba(160, 174, 188, 0.22);
  background: rgba(160, 174, 188, 0.08);
  color: #c7d1d8;
}

.provider-status[data-status="limited"] {
  border-color: rgba(216, 183, 119, 0.3);
  background: rgba(216, 183, 119, 0.1);
  color: #e6c98e;
}

.provider-status[data-status="error"] {
  border-color: rgba(229, 161, 173, 0.3);
  background: rgba(154, 72, 87, 0.12);
  color: #e5a1ad;
}

.provider-test-result[data-status="verified"] {
  color: #9ee9e4;
}

.provider-test-result[data-status="limited"] {
  color: #e0c188;
}

.provider-test-result[data-status="error"] {
  color: #e5a1ad;
}

.model-pair {
  display: flex;
  min-width: 0;
  gap: 20px;
}

.model-lockup {
  text-align: right;
}

.model-lockup small,
.model-lockup strong {
  display: block;
}

.model-lockup small {
  margin-bottom: 3px;
  color: rgba(207, 224, 224, 0.58);
  font-size: 10px;
  text-transform: uppercase;
}

.model-lockup strong {
  color: #8fe9e4;
  font-size: 13px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.setup-provider-band[data-provider-band="image"] .model-lockup strong {
  color: #e2c485;
}

.setup-field {
  display: grid;
  gap: 7px;
}

.setup-field > span {
  color: rgba(229, 240, 238, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.setup-field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(154, 214, 218, 0.22);
  border-radius: 6px;
  outline: none;
  background: #091214;
  color: #f0f8f7;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.setup-field input:focus {
  border-color: #7ee4df;
  box-shadow: 0 0 0 3px rgba(126, 228, 223, 0.1);
}

.setup-field small {
  color: rgba(207, 224, 224, 0.56);
  font-size: 11px;
  line-height: 1.55;
}

.provider-actions {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.provider-actions .primary-btn,
.provider-actions .ghost-btn,
.provider-actions .text-danger-btn {
  min-height: 44px;
}

.provider-actions .primary-btn,
.provider-actions .ghost-btn {
  padding-inline: 18px;
}

.text-danger-btn {
  margin-left: auto;
  padding: 0 10px;
  color: var(--rose);
  font-size: 12px;
  font-weight: 800;
}

.text-danger-btn:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.provider-test-result {
  margin: 0;
  color: rgba(218, 233, 231, 0.72);
  font-size: 12px;
  line-height: 1.6;
}

.provider-test-result:empty {
  display: none;
}

.setup-completion-bar {
  position: static;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 2px;
  padding: 18px 20px;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 8px;
  background: rgba(10, 18, 22, 0.94);
  color: #edf7f7;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.setup-completion-bar > div:last-child {
  display: flex;
  gap: 10px;
}

.setup-completion-bar .primary-btn,
.setup-completion-bar .ghost-btn {
  min-height: 44px;
}

.setup-completion-bar strong,
.setup-completion-bar span {
  display: block;
}

.setup-completion-bar span {
  margin-top: 4px;
  color: rgba(207, 224, 224, 0.58);
  font-size: 11px;
}

@keyframes setup-status-pulse {
  50% { transform: scale(0.72); opacity: 0.55; }
}

@media (max-width: 1180px) {
  .setup-provider-band {
    grid-template-columns: 1fr;
  }

  .provider-guide {
    min-height: 0;
  }

  .provider-external-link {
    margin-top: 4px;
  }
}

@media (min-width: 1181px) and (max-height: 850px) {
  .provider-guide {
    padding: 28px 32px 30px;
  }

  .provider-steps {
    gap: 12px;
    margin: 20px 0;
  }

  .provider-config {
    gap: 14px;
    padding: 28px 36px 32px;
  }
}

@media (max-width: 700px) {
  .service-setup-hero,
  .provider-config-head,
  .setup-completion-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .setup-overall-state {
    min-width: 0;
  }

  .setup-integrity-strip {
    grid-template-columns: 1fr;
  }

  .setup-integrity-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .setup-integrity-strip > div:last-child {
    border-bottom: 0;
  }

  .model-pair {
    justify-content: space-between;
    width: 100%;
  }

  .model-lockup {
    text-align: left;
  }

  .provider-actions,
  .setup-completion-bar > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .text-danger-btn {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}
body.local-launch-blocked {
  overflow: hidden;
}

.local-launch-guard {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #07100f;
  color: #f3f6f4;
}

.local-launch-guard[hidden] {
  display: none;
}

.local-launch-guard-panel {
  width: min(620px, 100%);
  border: 1px solid rgba(177, 210, 195, 0.24);
  border-radius: 8px;
  padding: clamp(24px, 5vw, 48px);
  background: #0d1715;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
}

.local-launch-guard-panel h1 {
  margin: 8px 0 14px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.08;
}

.local-launch-guard-panel > p,
.local-launch-platforms p,
.local-launch-guard-panel small {
  color: rgba(226, 235, 231, 0.74);
  line-height: 1.7;
}

.local-launch-platforms {
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(177, 210, 195, 0.14);
  border-bottom: 1px solid rgba(177, 210, 195, 0.14);
}

.local-launch-platforms p {
  margin: 6px 0;
}

.local-launch-platforms strong {
  color: #f3f6f4;
}

.local-launch-guard-panel .primary-btn {
  margin-bottom: 14px;
}

.local-launch-guard-panel small {
  display: block;
}

/* Durable first-frame library */
#app[data-active-view="frames"] .topbar {
  grid-template-columns: minmax(0, 1fr);
}

#app[data-active-view="frames"] .topbar-actions {
  display: none;
}

.first-frame-library-page {
  background: rgba(4, 9, 12, 0.42);
}

.image-space-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(154, 214, 218, 0.16);
  border-radius: 8px;
  background: rgba(154, 214, 218, 0.14);
}

.image-space-types button {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: rgba(8, 16, 20, 0.96);
  color: rgba(221, 236, 234, 0.68);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.image-space-types button:hover,
.image-space-types button:focus-visible {
  background: rgba(15, 31, 35, 0.98);
  color: #edf7f7;
}

.image-space-types button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.image-space-types button.is-active {
  background: rgba(216, 183, 119, 0.13);
  color: #f3e2bc;
}

.image-space-types button span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-space-types button strong {
  color: currentColor;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.first-frame-library-location {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid rgba(216, 183, 119, 0.28);
  border-radius: 8px;
  background: rgba(216, 183, 119, 0.07);
}

.first-frame-library-folder-mark {
  width: 46px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 183, 119, 0.36);
  border-radius: 6px;
  background: rgba(216, 183, 119, 0.13);
  color: #f0d597;
  font-size: 11px;
  font-weight: 850;
}

.first-frame-library-location > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.first-frame-library-location strong {
  color: #f4f6ed;
  font-size: 13px;
}

.first-frame-library-location code {
  min-width: 0;
  overflow: hidden;
  color: rgba(229, 240, 238, 0.66);
  font: 11px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-frame-library-location .primary-btn {
  min-height: 42px;
  border-radius: 6px;
  background: #d8b777;
  color: #111713;
  box-shadow: none;
  white-space: nowrap;
}

.first-frame-library-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(112px, 0.7fr)) minmax(132px, 0.8fr);
  align-items: end;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(154, 214, 218, 0.16);
  border-radius: 8px;
  background: rgba(9, 17, 22, 0.82);
}

.first-frame-library-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.first-frame-library-toolbar label > span {
  color: rgba(221, 236, 234, 0.72);
  font-size: 11px;
  font-weight: 750;
}

.first-frame-library-toolbar input,
.first-frame-library-toolbar select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(154, 214, 218, 0.24);
  border-radius: 6px;
  outline: none;
  background: #071014;
  color: #edf7f7;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
}

.first-frame-library-toolbar input:focus,
.first-frame-library-toolbar select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 110, 104, 0.12);
}

.first-frame-library-toolbar .ghost-btn {
  height: 42px;
  border-radius: 6px;
  border-color: rgba(154, 214, 218, 0.22);
  background: rgba(126, 228, 223, 0.07);
  color: #dff5f3;
}

.image-space-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.image-space-toolbar-actions .ghost-btn {
  min-width: 0;
  padding-inline: 10px;
}

#image-space-selection-toggle[aria-pressed="true"] {
  border-color: rgba(216, 183, 119, 0.48);
  background: rgba(216, 183, 119, 0.14);
  color: #f0d597;
}

.image-space-selection-bar {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -2px 0 14px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(216, 183, 119, 0.28);
  border-radius: 7px;
  background: rgba(216, 183, 119, 0.08);
}

.image-space-selection-bar[hidden] {
  display: none;
}

.image-space-selection-bar p {
  margin: 0;
  color: rgba(235, 241, 234, 0.72);
  font-size: 12px;
}

.image-space-selection-bar p strong {
  margin-inline: 3px;
  color: #f0d597;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.image-space-selection-bar > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.image-space-selection-bar .ghost-btn,
.image-space-selection-bar .text-danger-btn {
  min-height: 34px;
  border-radius: 5px;
  white-space: nowrap;
}

.image-space-selection-bar .text-danger-btn {
  margin-left: 0;
  padding-inline: 12px;
  border: 1px solid rgba(229, 118, 126, 0.34);
  background: rgba(133, 45, 55, 0.18);
  color: #f0a2a8;
}

.image-space-selection-bar .text-danger-btn:not(:disabled):hover,
.image-space-selection-bar .text-danger-btn:not(:disabled):focus-visible {
  border-color: rgba(240, 162, 168, 0.62);
  background: rgba(133, 45, 55, 0.3);
  color: #ffd1d4;
}

.image-space-selection-bar .text-danger-btn:focus-visible {
  outline: 2px solid rgba(240, 162, 168, 0.68);
  outline-offset: 2px;
}

.first-frame-library-status {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px dashed rgba(154, 214, 218, 0.24);
  border-radius: 8px;
  background: rgba(7, 14, 18, 0.48);
  color: rgba(207, 224, 224, 0.62);
  text-align: center;
}

.first-frame-library-status[hidden] {
  display: none;
}

.first-frame-library-status strong {
  color: #edf7f7;
  font-size: 15px;
}

.first-frame-library-status span:not(.first-frame-library-spinner) {
  max-width: 460px;
  font-size: 13px;
  line-height: 1.6;
}

.first-frame-library-status.is-error strong {
  color: var(--rose);
}

.first-frame-library-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(36, 110, 104, 0.18);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: first-frame-library-spin 800ms linear infinite;
}

@keyframes first-frame-library-spin {
  to { transform: rotate(360deg); }
}

.first-frame-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.first-frame-library-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(154, 214, 218, 0.16);
  border-radius: 8px;
  background: rgba(9, 17, 22, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.first-frame-library-card.is-selected {
  border-color: rgba(240, 213, 151, 0.72);
  background: rgba(23, 24, 19, 0.96);
  box-shadow: 0 0 0 2px rgba(216, 183, 119, 0.15), 0 18px 38px rgba(0, 0, 0, 0.34);
}

.first-frame-library-card.is-selectable .first-frame-library-image {
  cursor: pointer;
}

.first-frame-library-card.is-selectable .first-frame-library-actions {
  display: none;
}

.image-space-selector {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.image-space-selector input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.image-space-selector span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 241, 234, 0.68);
  border-radius: 5px;
  background: rgba(5, 10, 12, 0.86);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.image-space-selector span::after {
  content: "";
  width: 8px;
  height: 4px;
  border: solid #151710;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
}

.image-space-selector input:checked + span {
  border-color: #f0d597;
  background: #f0d597;
}

.image-space-selector input:checked + span::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.image-space-selector input:focus-visible + span {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.first-frame-library-card:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 228, 223, 0.38);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

.first-frame-library-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(154, 214, 218, 0.14);
  background: #111714;
}

.first-frame-library-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease;
}

.first-frame-library-image:hover img,
.first-frame-library-image:focus-visible img {
  transform: scale(1.02);
}

.first-frame-library-image:focus-visible {
  outline: 3px solid rgba(36, 110, 104, 0.45);
  outline-offset: -3px;
}

.first-frame-library-image > .image-space-type-badge,
.first-frame-library-image > .image-space-ratio-badge {
  position: absolute;
  min-width: 42px;
  padding: 5px 7px;
  border-radius: 4px;
  background: rgba(9, 16, 13, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.first-frame-library-image > .image-space-type-badge {
  top: 8px;
  left: 8px;
  border: 1px solid rgba(240, 213, 151, 0.3);
  background: rgba(19, 17, 12, 0.84);
  color: #f0d597;
}

.first-frame-library-image > .image-space-ratio-badge {
  right: 8px;
  bottom: 8px;
}

.first-frame-library-card-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.first-frame-library-card-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.first-frame-library-card-title h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #edf7f7;
  font-size: 15px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-frame-library-card-title time {
  color: rgba(207, 224, 224, 0.54);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

.first-frame-library-card-body > p {
  min-height: 58px;
  margin: 0;
  overflow: hidden;
  color: rgba(229, 240, 238, 0.72);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 12px;
  line-height: 1.6;
}

.first-frame-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.first-frame-library-meta span {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid rgba(36, 110, 104, 0.14);
  border-radius: 4px;
  background: var(--teal-soft);
  color: #235c57;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-frame-library-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  border-top: 1px solid rgba(191, 201, 195, 0.58);
}

.first-frame-library-actions .ghost-btn,
.first-frame-library-actions .primary-btn {
  min-width: 0;
  border-radius: 6px;
  white-space: nowrap;
}

.first-frame-library-actions .ghost-btn {
  border-color: rgba(154, 214, 218, 0.2);
  background: rgba(126, 228, 223, 0.06);
  color: #dff5f3;
}

.first-frame-library-actions .primary-btn {
  background: #79dcd6;
  color: #07110f;
  box-shadow: none;
}

.first-frame-library-actions .text-danger-btn {
  min-height: 34px;
  margin-left: 0;
}

@media (max-width: 1180px) {
  .first-frame-library-toolbar {
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(120px, 0.7fr));
  }

  .first-frame-library-toolbar .ghost-btn {
    width: 100%;
  }

  .first-frame-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .first-frame-library-page {
    padding-inline: 16px;
  }

  .first-frame-library-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-space-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-space-selection-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-space-selection-bar > div {
    width: 100%;
    flex-wrap: wrap;
  }

  .first-frame-library-location {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .first-frame-library-folder-mark {
    width: 40px;
  }

  .first-frame-library-location .primary-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .first-frame-library-search,
  .first-frame-library-toolbar .ghost-btn {
    grid-column: 1 / -1;
  }

  .first-frame-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  .first-frame-library-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .first-frame-library-search,
  .first-frame-library-toolbar .ghost-btn {
    grid-column: auto;
  }

  .first-frame-library-actions {
    grid-template-columns: 1fr 1fr;
  }

  .first-frame-library-actions .text-danger-btn {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-frame-library-spinner,
  .first-frame-library-card,
  .first-frame-library-image img {
    animation: none;
    transition: none;
  }
}

/* Lightweight branded startup layer shared by the local Windows and macOS launchers. */
.startup-splash {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background: #07100f;
  color: #f1f7f5;
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.startup-splash[hidden] {
  display: none;
}

.startup-splash.is-hidden {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.startup-splash-grid {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(122, 219, 210, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 219, 210, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.startup-splash::before,
.startup-splash::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.startup-splash::before {
  top: 0;
  right: 12%;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(216, 177, 91, 0.4), transparent);
  opacity: 0.7;
}

.startup-splash::after {
  left: 12%;
  bottom: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(126, 228, 223, 0.42), transparent);
  opacity: 0.72;
}

.startup-splash-inner {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  padding: 8px 0;
  text-align: left;
  animation: startup-splash-rise 420ms ease both;
}

.startup-splash-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.startup-splash-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(223, 191, 113, 0.68);
  border-radius: 7px;
  background: #13211e;
  color: #ecd48f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 1px rgba(126, 228, 223, 0.08);
}

.startup-splash-mark-line {
  display: block;
  width: 86px;
  height: 1px;
  background: linear-gradient(to right, rgba(216, 177, 91, 0.8), transparent);
}

.startup-splash-kicker {
  margin: 0 0 12px;
  color: #dcbf77;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.startup-splash h1 {
  margin: 0;
  color: #f6fbf9;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 760;
  line-height: 1.08;
}

.startup-splash-tagline {
  margin: 14px 0 54px;
  color: rgba(226, 239, 235, 0.62);
  font-size: 14px;
  line-height: 1.6;
}

.startup-splash-status-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.startup-splash-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ee4df;
  box-shadow: 0 0 0 4px rgba(126, 228, 223, 0.09), 0 0 14px rgba(126, 228, 223, 0.72);
  animation: startup-splash-pulse 1.4s ease-in-out infinite;
}

.startup-splash-status-row strong,
.startup-splash-status-row span {
  display: block;
}

.startup-splash-status-row strong {
  color: #edf8f5;
  font-size: 13px;
  font-weight: 700;
}

.startup-splash-status-row div span {
  margin-top: 4px;
  color: rgba(222, 237, 233, 0.46);
  font-size: 11px;
}

.startup-splash-progress-label {
  color: #dcbf77;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.startup-splash-progress {
  height: 2px;
  margin-top: 16px;
  overflow: hidden;
  background: rgba(197, 221, 215, 0.13);
}

.startup-splash-progress span {
  display: block;
  width: 12%;
  height: 100%;
  background: #dcbf77;
  box-shadow: 0 0 14px rgba(220, 191, 119, 0.6);
  transition: width 300ms ease;
}

.startup-splash.is-error .startup-splash-status-dot {
  background: #e6a47d;
  box-shadow: 0 0 0 4px rgba(230, 164, 125, 0.09), 0 0 14px rgba(230, 164, 125, 0.58);
}

.startup-splash.is-error .startup-splash-progress span {
  background: #e6a47d;
  box-shadow: 0 0 14px rgba(230, 164, 125, 0.48);
}

/* Unified model-service check: one clear action, with provider-level feedback. */
.setup-bulk-test {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(220, 191, 119, 0.2);
  border-radius: 8px;
  background: rgba(18, 27, 27, 0.92);
}

.setup-bulk-test-copy {
  min-width: 0;
}

.setup-bulk-test-copy .eyebrow {
  margin-bottom: 5px;
  color: #dcbf77;
}

.setup-bulk-test-copy h3 {
  margin: 0;
  color: #f0f7f4;
  font-size: 16px;
}

.setup-bulk-test-copy p:last-child {
  max-width: 720px;
  margin: 5px 0 0;
  color: rgba(216, 232, 228, 0.58);
  font-size: 12px;
  line-height: 1.6;
}

.setup-bulk-test-action {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.setup-bulk-test-action .primary-btn {
  min-height: 42px;
  padding-inline: 20px;
  border-color: rgba(220, 191, 119, 0.5);
  background: #dcbf77;
  color: #101714;
  box-shadow: 0 8px 18px rgba(220, 191, 119, 0.12);
}

.setup-bulk-test-action .primary-btn:hover:not(:disabled) {
  border-color: #efd99c;
  background: #efd99c;
}

.setup-bulk-test-action .primary-btn:disabled {
  cursor: wait;
  opacity: 0.66;
}

.setup-bulk-test-action > span {
  color: rgba(220, 235, 231, 0.56);
  font-size: 11px;
  text-align: right;
}

.setup-bulk-test-items {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(220, 191, 119, 0.13);
}

.setup-bulk-test-items span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: rgba(216, 232, 228, 0.6);
  font-size: 11px;
  line-height: 1.4;
}

.setup-bulk-test-items i {
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(216, 232, 228, 0.34);
}

.setup-bulk-test-items span[data-status="testing"] i {
  background: #dcbf77;
  box-shadow: 0 0 0 4px rgba(220, 191, 119, 0.1);
  animation: setup-bulk-test-pulse 1.1s ease-in-out infinite;
}

.setup-bulk-test-items span[data-status="verified"] {
  color: #9ee9e4;
}

.setup-bulk-test-items span[data-status="verified"] i {
  background: #7ee4df;
}

.setup-bulk-test-items span[data-status="limited"] {
  color: #e0c188;
}

.setup-bulk-test-items span[data-status="limited"] i {
  background: #dcbf77;
}

.setup-bulk-test-items span[data-status="error"] {
  color: #e5a1ad;
}

.setup-bulk-test-items span[data-status="error"] i {
  background: #e5a1ad;
}

@keyframes setup-bulk-test-pulse {
  50% {
    opacity: 0.45;
    transform: scale(0.72);
  }
}

@media (max-width: 700px) {
  .setup-bulk-test {
    grid-template-columns: minmax(0, 1fr);
  }

  .setup-bulk-test-action {
    justify-items: stretch;
  }

  .setup-bulk-test-action > span {
    text-align: left;
  }

  .setup-bulk-test-items {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-bulk-test-items span[data-status="testing"] i {
    animation: none;
  }
}

.startup-splash-footer {
  position: absolute;
  right: 32px;
  bottom: 26px;
  left: 32px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: rgba(208, 229, 224, 0.35);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

@keyframes startup-splash-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes startup-splash-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 560px) {
  .startup-splash {
    padding: 24px;
  }

  .startup-splash-tagline {
    margin-bottom: 42px;
  }

  .startup-splash-footer {
    right: 24px;
    bottom: 20px;
    left: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .startup-splash,
  .startup-splash-inner,
  .startup-splash-status-dot,
  .startup-splash-progress span {
    animation: none;
    transition: none;
  }
}

/* Media v2 workbench. This layer only presents immutable v1.0.15 outputs. */
.image-generation-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.image-generation-options label,
.media-select-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.image-generation-options label > span,
.media-select-field > span {
  color: rgba(207, 224, 224, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.image-generation-options select,
.media-select-field select,
.video-provider-switch select {
  min-height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(207, 224, 224, 0.16);
  border-radius: 7px;
  background: rgba(10, 24, 23, 0.9);
  color: #edf7f7;
  font-size: 11px;
  font-weight: 700;
  outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.image-generation-options select:focus-visible,
.media-select-field select:focus-visible,
.video-provider-switch select:focus-visible {
  border-color: rgba(36, 110, 104, 0.64);
  box-shadow: 0 0 0 3px rgba(36, 110, 104, 0.12);
}

.media-production-card {
  overflow: hidden;
  border-color: rgba(19, 35, 30, 0.16);
  background:
    radial-gradient(circle at 8% 0%, rgba(184, 111, 56, 0.12), transparent 28%),
    radial-gradient(circle at 92% 2%, rgba(36, 110, 104, 0.15), transparent 30%),
    linear-gradient(180deg, rgba(250, 251, 247, 0.98), rgba(234, 239, 232, 0.94));
}

.media-production-card [hidden],
.image-skill-local-row [hidden] {
  display: none !important;
}

.media-production-head {
  align-items: center;
}

.media-count-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(207, 224, 224, 0.16);
  border-radius: 6px;
  background: rgba(10, 24, 23, 0.86);
  color: rgba(237, 247, 247, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.media-stage-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 2px 0 18px;
  padding: 1px;
  list-style: none;
  border-radius: 9px;
  background: rgba(207, 224, 224, 0.1);
}

.media-stage-rail li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 12px;
  background: rgba(9, 22, 21, 0.88);
  color: rgba(207, 224, 224, 0.52);
  transition: color var(--transition), background var(--transition);
}

.media-stage-rail li:first-child {
  border-radius: 8px 0 0 8px;
}

.media-stage-rail li:last-child {
  border-radius: 0 8px 8px 0;
}

.media-stage-rail b {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.media-stage-rail span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-stage-rail li[data-status="ready"] {
  color: #edf7f7;
}

.media-stage-rail li[data-status="running"] {
  background: rgba(143, 88, 45, 0.34);
  color: #f0bf93;
}

.media-stage-rail li[data-status="done"] {
  background: rgba(30, 104, 97, 0.34);
  color: #9de4dc;
}

.media-production-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.complete-video-stage {
  grid-column: 1 / -1;
}

.material-image-preview .first-frame-image-stage {
  aspect-ratio: 16 / 10;
}

.media-generation-stage {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(207, 224, 224, 0.12);
  border-radius: 12px;
  background: rgba(7, 18, 17, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.media-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.media-stage-head small {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.media-stage-head h3 {
  margin: 5px 0 5px;
  color: #edf7f7;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.media-stage-head p {
  max-width: 62ch;
  margin: 0;
  color: rgba(207, 224, 224, 0.58);
  font-size: 11px;
  line-height: 1.6;
}

.media-count-badge {
  width: 38px;
  height: 38px;
  background: #18241f;
  color: #f2e0c7;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.media-control-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  margin-bottom: 13px;
}

.media-control-row .primary-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 36px;
  white-space: nowrap;
}

.media-preview-surface,
.complete-video-output {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(222, 232, 226, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #17201c;
  background-size: 24px 24px;
}

.media-preview-surface {
  display: grid;
  aspect-ratio: 16 / 10;
  place-items: center;
  padding: 0;
}

.media-preview-surface:not(:disabled):hover img {
  transform: scale(1.012);
}

.media-preview-surface:focus-visible {
  outline: 3px solid rgba(36, 110, 104, 0.42);
  outline-offset: 3px;
}

.media-preview-surface img,
.complete-video-output video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition);
}

.media-empty-state {
  display: grid;
  place-items: center;
  gap: 6px;
  max-width: 360px;
  padding: 28px;
  color: rgba(233, 242, 237, 0.62);
  text-align: center;
}

.media-empty-state b {
  color: #eef4f0;
  font-size: 13px;
}

.media-empty-state small {
  font-size: 10px;
  line-height: 1.6;
}

.media-video-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
}

.media-generation-status {
  color: rgba(207, 224, 224, 0.58);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.media-generation-status[data-status="running"],
.media-generation-status[data-status="queued"],
.media-generation-status[data-status="submitting"],
.media-generation-status[data-status="generating"],
.media-generation-status[data-status="downloading"] {
  color: #e7b483;
}

.media-generation-status[data-status="succeeded"] {
  color: #8fddd4;
}

.media-generation-status[data-status="error"],
.media-generation-status[data-status="failed"] {
  color: #e7a4af;
}

.media-inherited-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(207, 224, 224, 0.1);
  border-radius: 7px;
  background: rgba(207, 224, 224, 0.08);
}

.media-inherited-spec div {
  min-width: 0;
  padding: 9px 10px;
  background: rgba(10, 24, 23, 0.92);
}

.media-inherited-spec dt {
  color: rgba(207, 224, 224, 0.5);
  font-size: 9px;
  font-weight: 700;
}

.media-inherited-spec dd {
  overflow: hidden;
  margin: 4px 0 0;
  color: #edf7f7;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-control-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.complete-video-output {
  display: grid;
  min-height: 230px;
  aspect-ratio: 16 / 10;
  place-items: center;
}

.complete-video-output video {
  background: #101713;
}

.media-video-progress {
  padding-top: 10px;
}

.media-video-progress > div {
  overflow: hidden;
  height: 5px;
  border-radius: 3px;
  background: rgba(207, 224, 224, 0.12);
}

.media-video-progress > div span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a76135, #27726b);
  transition: width 360ms ease;
}

.media-video-progress p {
  margin: 7px 0 0;
}

.media-inline-message {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.55;
}

.media-inline-message.is-error {
  border: 1px solid rgba(224, 129, 145, 0.24);
  background: rgba(103, 39, 52, 0.34);
  color: #edb2bc;
}

.video-provider-switch {
  display: grid;
  gap: 5px;
  min-width: 160px;
}

.video-provider-switch select {
  width: 100%;
  color: #e9f1ed;
  border-color: rgba(220, 235, 231, 0.15);
  background-color: rgba(255, 255, 255, 0.06);
}

.video-config-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.video-provider-band code {
  color: #dcbf77;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.92em;
}

.image-skill-local-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(220, 235, 231, 0.1);
}

.image-skill-local-row > div:first-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.image-skill-local-row > div:first-child > span {
  color: rgba(216, 232, 228, 0.55);
  font-size: 10px;
  font-weight: 700;
}

.image-skill-local-row code {
  overflow: hidden;
  max-width: 58ch;
  color: #dcbf77;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-skill-local-row > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

@media (max-width: 1080px) {
  .media-production-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #app[data-active-view="workbench"] .reactor-core .composer-launcher-row,
  .reactor-core .composer-launcher-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .media-production-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .first-frame-pane-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-generation-options {
    width: 100%;
    justify-content: stretch;
  }

  .image-generation-options label {
    flex: 1 1 140px;
  }

  .image-generation-options select {
    width: 100%;
  }

  .media-stage-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-stage-rail li,
  .media-stage-rail li:first-child,
  .media-stage-rail li:last-child {
    border-radius: 0;
  }

  .media-control-row,
  .video-control-row,
  .video-config-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-control-row .primary-btn {
    width: 100%;
  }

  .image-skill-local-row {
    align-items: stretch;
    flex-direction: column;
  }

  .image-skill-local-row > div:last-child {
    flex-wrap: wrap;
  }
}

@media (min-width: 701px) {
  #app[data-active-view="workbench"] .reactor-core .composer-launcher-row,
  .reactor-core .composer-launcher-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .reactor-core .composer-first-frame-size-control {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 10px;
  }
}

@media (min-width: 1681px) {
  #app[data-active-view="workbench"] .reactor-core .composer-launcher-row,
  .reactor-core .composer-launcher-row {
    grid-template-columns:
      repeat(2, minmax(140px, 0.85fr))
      repeat(3, minmax(158px, 1fr))
      minmax(190px, 1.15fr) !important;
  }
}

.reactor-core .composer-launcher-row {
  gap: 10px !important;
}

.reactor-core .composer-launcher,
.reactor-core .composer-auto-frame-control,
.reactor-core .composer-first-frame-size-control {
  min-height: 64px;
  border-radius: 14px;
}

.reactor-core .composer-launcher strong,
.composer-toggle-copy strong,
.composer-toggle-copy small,
.composer-first-frame-size-control > span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.image-prompts-card .first-frame-workspace {
  align-items: stretch;
}

.image-prompts-card .first-frame-pane {
  grid-template-rows: auto minmax(320px, 1fr);
}

.image-prompts-card .first-frame-prompt {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  aspect-ratio: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 228, 223, 0.28) rgba(126, 228, 223, 0.055);
}

.image-prompts-card .first-frame-prompt[contenteditable="true"] {
  cursor: text;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.image-prompts-card .first-frame-prompt[contenteditable="false"] {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.image-prompts-card .first-frame-prompt[contenteditable="true"]:focus {
  border-color: rgba(126, 228, 223, 0.52);
  background: rgba(7, 17, 22, 0.96);
  box-shadow: inset 0 0 0 1px rgba(126, 228, 223, 0.16), 0 0 0 3px rgba(126, 228, 223, 0.08);
}

.image-prompts-card .first-frame-prompt::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.055);
}

.image-prompts-card .first-frame-prompt::-webkit-scrollbar-thumb {
  border: 2px solid rgba(3, 8, 12, 0.82);
  border-radius: 999px;
  background: rgba(126, 228, 223, 0.28);
}

@media (max-width: 700px) {
  .image-prompts-card .first-frame-prompt {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }
}

.model-service-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.model-service-map article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 16px;
  background: rgba(4, 12, 16, 0.64);
}

.model-service-map article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: rgba(126, 228, 223, 0.08);
  color: rgba(143, 241, 235, 0.72);
  font: 700 11px/1 var(--mono, monospace);
}

.model-service-map small,
.model-service-map strong,
.model-service-map p {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-service-map small {
  color: rgba(220, 234, 231, 0.54);
  font-size: 10px;
}

.model-service-map strong {
  margin-top: 3px;
  color: rgba(241, 250, 247, 0.9);
  font-size: 14px;
}

.model-service-map p {
  margin-top: 5px;
  color: rgba(220, 234, 231, 0.44);
  font-size: 10px;
}

.model-service-map article[data-status="verified"] {
  border-color: rgba(93, 196, 185, 0.28);
  background: rgba(28, 80, 75, 0.18);
}

.image-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(120px, 0.8fr));
  gap: 12px;
}

.image-studio-scroll {
  display: grid;
  gap: 20px;
  max-width: 1560px;
  margin: 0 auto;
}

.image-studio-compose,
.image-studio-output,
.image-studio-recent {
  border: 1px solid rgba(126, 228, 223, 0.13);
  background:
    radial-gradient(circle at 0 0, rgba(126, 228, 223, 0.08), transparent 35%),
    rgba(3, 10, 14, 0.78);
}

.image-studio-service {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 10px;
  background: rgba(2, 8, 11, 0.56);
}

.image-studio-service > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(220, 234, 231, 0.32);
}

.image-studio-service[data-status="ready"] > span {
  background: #72cec3;
  box-shadow: 0 0 18px rgba(114, 206, 195, 0.62);
}

.image-studio-service small,
.image-studio-service strong {
  display: block;
}

.image-studio-service small {
  color: rgba(223, 237, 233, 0.48);
  font-size: 9px;
}

.image-studio-service strong {
  margin-top: 1px;
  color: rgba(242, 251, 248, 0.88);
  font-size: 11px;
}

.image-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 20px;
  align-items: stretch;
}

.image-studio-compose,
.image-studio-output,
.image-studio-recent {
  border-radius: 20px;
}

.image-studio-compose {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.image-studio-compose-head,
.image-studio-output-head,
.image-studio-section-head {
  min-height: 72px;
}

.image-studio-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.1);
}

.image-studio-compose-head > div:first-child > span,
.image-studio-compose-head > div:first-child > strong {
  display: block;
}

.image-studio-compose-head > div:first-child > span {
  color: rgba(223, 237, 233, 0.48);
  font-size: 10px;
}

.image-studio-compose-head > div:first-child > strong {
  margin-top: 3px;
  color: rgba(242, 251, 248, 0.84);
  font-size: 13px;
}

.image-studio-compose-body {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
}

.image-studio-prompt-field,
.image-studio-controls label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: rgba(230, 242, 239, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.image-studio-prompt-field textarea {
  min-height: 220px;
  resize: vertical;
  padding: 18px;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 14px;
  outline: none;
  background: rgba(1, 6, 9, 0.76);
  color: rgba(242, 251, 248, 0.92);
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
}

.image-studio-prompt-field textarea:focus {
  border-color: rgba(126, 228, 223, 0.5);
  box-shadow: 0 0 0 3px rgba(126, 228, 223, 0.08);
}

.image-studio-prompt-field > small {
  justify-self: end;
  color: rgba(223, 237, 233, 0.4);
}

.image-studio-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-studio-controls select,
.image-config-grid select {
  width: 100%;
}

.image-studio-template-select {
  display: grid;
  gap: 8px;
}

.image-studio-template-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(230, 242, 239, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.image-studio-template-label small {
  color: rgba(223, 237, 233, 0.4);
  font-size: 10px;
  font-weight: 500;
}

.image-studio-template-trigger {
  --template-a: #d5b572;
  --template-b: #668f84;
  --template-c: #2b4350;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 66px;
  padding: 11px 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--template-a) 42%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--template-a) 18%, transparent), transparent 38%),
    linear-gradient(115deg, color-mix(in srgb, var(--template-b) 16%, rgba(2, 8, 11, 0.94)), rgba(2, 8, 11, 0.9));
  color: rgba(244, 251, 248, 0.92);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.image-studio-template-trigger:hover,
.image-studio-template-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--template-a) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 28px color-mix(in srgb, var(--template-b) 16%, transparent);
  transform: translateY(-1px);
}

.image-studio-template-trigger > span:nth-child(2),
.image-studio-template-trigger strong,
.image-studio-template-trigger small {
  display: block;
  min-width: 0;
}

.image-studio-template-trigger strong {
  overflow: hidden;
  color: #f8fffd;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-studio-template-trigger small {
  margin-top: 4px;
  overflow: hidden;
  color: rgba(220, 235, 232, 0.5);
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-studio-template-trigger em {
  color: color-mix(in srgb, var(--template-a) 82%, white);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.image-template-swatch {
  display: flex;
  width: 48px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.2);
}

.image-template-swatch i {
  flex: 1;
}

.image-template-swatch i:nth-child(1) { background: var(--template-a); }
.image-template-swatch i:nth-child(2) { background: var(--template-b); }
.image-template-swatch i:nth-child(3) { background: var(--template-c); }

.tone-cinema-gold { --template-a: #d5b572; --template-b: #6d9186; --template-c: #263c49; }
.tone-noir { --template-a: #d2d0c9; --template-b: #66696c; --template-c: #151719; }
.tone-sci-fi { --template-a: #82c9c5; --template-b: #477b91; --template-c: #172b39; }
.tone-eastern { --template-a: #bd794f; --template-b: #6b8174; --template-c: #283730; }
.tone-fantasy { --template-a: #c7a66d; --template-b: #6f829b; --template-c: #3c324e; }
.tone-action { --template-a: #c26b55; --template-b: #80654f; --template-c: #2c2c2b; }
.tone-documentary { --template-a: #c4aa7e; --template-b: #78857a; --template-c: #39443d; }
.tone-luxury { --template-a: #d6bd80; --template-b: #856d54; --template-c: #272420; }
.tone-fashion { --template-a: #c9a3ac; --template-b: #786c88; --template-c: #302e3b; }
.tone-animation { --template-a: #d6a866; --template-b: #6b9e9a; --template-c: #4f6284; }
.tone-neutral { --template-a: #8fb8b3; --template-b: #667d80; --template-c: #27363d; }

body.image-template-modal-open {
  overflow: hidden;
}

.image-template-modal[hidden] {
  display: none !important;
}

.image-template-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
}

.image-template-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background:
    radial-gradient(circle at 20% 12%, rgba(99, 61, 130, 0.16), transparent 34%),
    rgba(0, 4, 7, 0.82);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
}

.image-template-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1240px, calc(100vw - 44px));
  height: min(820px, calc(100dvh - 44px));
  overflow: hidden;
  border: 1px solid rgba(217, 181, 108, 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 228, 223, 0.1), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(198, 151, 85, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(11, 20, 26, 0.99), rgba(3, 8, 12, 0.995));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 36px 120px rgba(0, 0, 0, 0.68);
}

.image-template-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.11);
}

.image-template-dialog-head span {
  color: rgba(214, 181, 114, 0.82);
  font: 700 9px/1.2 var(--mono, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.image-template-dialog-head h2 {
  margin: 3px 0 4px;
  color: #f3fbf9;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.image-template-dialog-head p {
  margin: 0;
  color: rgba(220, 235, 232, 0.48);
  font-size: 12px;
}

.image-template-close {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(126, 228, 223, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(235, 249, 246, 0.72);
  font-size: 21px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.image-template-close:hover {
  border-color: rgba(218, 181, 106, 0.44);
  background: rgba(218, 181, 106, 0.08);
  color: #fff7e6;
  transform: translateY(-1px);
}

.image-template-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  min-height: 0;
}

.image-template-catalog,
.image-template-detail {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 228, 223, 0.24) transparent;
}

.image-template-catalog {
  padding: 20px;
  border-right: 1px solid rgba(126, 228, 223, 0.1);
}

.image-template-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.image-template-catalog-head strong {
  color: rgba(240, 250, 247, 0.84);
  font-size: 12px;
}

.image-template-catalog-head span {
  color: rgba(220, 235, 232, 0.38);
  font-size: 10px;
}

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

.image-template-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 112px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(126, 228, 223, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--template-a) 12%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.025);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.image-template-card:hover,
.image-template-card.previewing {
  border-color: color-mix(in srgb, var(--template-a) 54%, transparent);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--template-a) 19%, transparent), transparent 52%),
    rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.image-template-card.selected::after {
  content: "Selected";
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 3px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--template-a) 18%, rgba(4, 10, 14, 0.88));
  color: color-mix(in srgb, var(--template-a) 80%, white);
  font-size: 8px;
  font-weight: 800;
}

.image-template-card .image-template-swatch {
  width: 40px;
  height: 54px;
  border-radius: 10px;
}

.image-template-card-copy {
  min-width: 0;
}

.image-template-card-copy > span,
.image-template-card-copy strong,
.image-template-card-copy small {
  display: block;
}

.image-template-card-copy > span {
  color: color-mix(in srgb, var(--template-a) 72%, white);
  font-size: 9px;
  font-weight: 700;
}

.image-template-card-copy strong {
  margin-top: 4px;
  color: rgba(246, 253, 251, 0.9);
  font-size: 13px;
}

.image-template-card-copy small {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(220, 235, 232, 0.44);
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.image-template-detail {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  background: rgba(0, 4, 7, 0.28);
}

.image-template-detail-top > span {
  color: rgba(214, 181, 114, 0.8);
  font-size: 10px;
  font-weight: 700;
}

.image-template-detail-top > strong {
  display: block;
  margin-top: 5px;
  color: #f5fcfa;
  font-size: 23px;
  letter-spacing: -0.035em;
}

.image-template-detail-top > p {
  margin: 8px 0 0;
  color: rgba(220, 235, 232, 0.54);
  font-size: 11px;
  line-height: 1.65;
}

.image-template-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.image-template-detail-tags span {
  padding: 5px 8px;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 8px;
  background: rgba(126, 228, 223, 0.045);
  color: rgba(220, 239, 236, 0.62);
  font-size: 9px;
}

.image-template-prompt-block,
.image-template-rules,
.image-template-sources {
  padding: 13px 14px;
  border: 1px solid rgba(126, 228, 223, 0.1);
  border-radius: 13px;
  background: rgba(1, 7, 10, 0.58);
}

.image-template-prompt-block.negative {
  border-color: rgba(208, 134, 113, 0.12);
}

.image-template-prompt-block > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-template-prompt-block strong,
.image-template-rules > strong,
.image-template-sources > strong {
  color: rgba(241, 250, 247, 0.8);
  font-size: 10px;
}

.image-template-prompt-block button {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(126, 228, 223, 0.62);
  font-size: 9px;
  cursor: pointer;
}

.image-template-prompt-block p {
  max-height: 150px;
  margin: 9px 0 0;
  overflow: auto;
  color: rgba(222, 237, 233, 0.58);
  font-size: 10px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.image-template-rules ol,
.image-template-sources ul {
  display: grid;
  gap: 6px;
  margin: 9px 0 0;
  padding-left: 18px;
}

.image-template-rules li,
.image-template-sources li,
.image-template-sources a {
  color: rgba(220, 235, 232, 0.52);
  font-size: 9px;
  line-height: 1.55;
}

.image-template-sources a:hover {
  color: rgba(143, 241, 235, 0.82);
}

.image-template-sources > p {
  margin: 9px 0 0;
  color: rgba(220, 235, 232, 0.34);
  font-size: 8px;
  line-height: 1.5;
}

.image-template-actions {
  position: sticky;
  bottom: -22px;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 -22px -22px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(126, 228, 223, 0.1);
  background: rgba(4, 10, 14, 0.96);
}

.image-template-actions .text-btn {
  padding: 8px;
  border: 0;
  background: none;
  color: rgba(220, 235, 232, 0.46);
  font-size: 10px;
  cursor: pointer;
}

.image-template-actions .text-btn:hover {
  color: rgba(242, 250, 247, 0.8);
}

.image-studio-ratio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.image-studio-ratio legend {
  margin-bottom: 8px;
  color: rgba(230, 242, 239, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.image-studio-ratio input {
  position: absolute;
  opacity: 0;
}

.image-studio-ratio span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(126, 228, 223, 0.12);
  border-radius: 10px;
  background: rgba(2, 8, 11, 0.68);
  color: rgba(223, 237, 233, 0.56);
  cursor: pointer;
}

.image-studio-ratio input:checked + span {
  border-color: rgba(218, 161, 84, 0.5);
  background: rgba(218, 161, 84, 0.14);
  color: #f4e2c7;
}

.image-studio-references {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(126, 228, 223, 0.1);
}

.image-studio-references > div:first-child strong,
.image-studio-references > div:first-child span {
  display: block;
}

.image-studio-references > div:first-child strong {
  color: rgba(242, 251, 248, 0.84);
  font-size: 12px;
}

.image-studio-references > div:first-child span {
  margin-top: 2px;
  color: rgba(223, 237, 233, 0.4);
  font-size: 10px;
}

.image-studio-reference-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

.image-studio-reference-list p {
  margin: 8px 0 0;
  color: rgba(223, 237, 233, 0.34);
  font-size: 11px;
}

.image-studio-reference-list figure {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
}

.image-studio-reference-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-studio-reference-list button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: white;
  cursor: pointer;
}

.image-studio-submit-row,
.image-studio-output-head,
.image-studio-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.image-studio-submit-row > span {
  color: rgba(223, 237, 233, 0.5);
  font-size: 11px;
}

.image-studio-submit-row > span[data-status="error"] {
  color: #e7a4af;
}

.image-studio-output {
  display: grid;
  grid-template-rows: auto minmax(430px, 1fr);
  overflow: hidden;
}

.image-studio-output-head,
.image-studio-section-head {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(126, 228, 223, 0.1);
}

.image-studio-output-head span,
.image-studio-output-head strong,
.image-studio-section-head span,
.image-studio-section-head strong {
  display: block;
}

.image-studio-output-head span,
.image-studio-section-head span {
  color: rgba(223, 237, 233, 0.48);
  font-size: 10px;
}

.image-studio-output-head strong,
.image-studio-section-head strong {
  margin-top: 3px;
  color: rgba(242, 251, 248, 0.84);
  font-size: 13px;
}

.image-studio-preview {
  display: grid;
  width: 100%;
  min-height: 0;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  background: rgba(0, 3, 5, 0.62);
  color: inherit;
}

.image-studio-preview:not(:disabled) {
  cursor: zoom-in;
}

.image-studio-preview img {
  width: 100%;
  height: 100%;
  max-height: 680px;
  object-fit: contain;
}

.image-studio-preview > span b,
.image-studio-preview > span small {
  display: block;
}

.image-studio-preview > span b {
  color: rgba(242, 251, 248, 0.64);
}

.image-studio-preview > span small {
  margin-top: 6px;
  color: rgba(223, 237, 233, 0.34);
}

.image-studio-recent {
  overflow: hidden;
}

.image-studio-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.image-studio-recent-grid > p {
  grid-column: 1 / -1;
  margin: 18px;
  color: rgba(223, 237, 233, 0.4);
  text-align: center;
}

.image-studio-recent-grid article {
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(1, 6, 9, 0.72);
}

.image-studio-recent-grid button {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.image-studio-recent-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.image-studio-recent-grid button:hover img {
  transform: scale(1.03);
}

.image-studio-recent-grid article > div {
  padding: 10px 11px 12px;
}

.image-studio-recent-grid strong,
.image-studio-recent-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-studio-recent-grid strong {
  color: rgba(242, 251, 248, 0.78);
  font-size: 11px;
}

.image-studio-recent-grid span {
  margin-top: 4px;
  color: rgba(223, 237, 233, 0.38);
  font-size: 9px;
}

@media (max-width: 1100px) {
  .model-service-map,
  .image-studio-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-studio-layout {
    grid-template-columns: 1fr;
  }

  .image-studio-output {
    grid-template-rows: auto minmax(420px, 62vw);
  }

  .image-template-dialog-body {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.9fr);
  }
}

@media (max-width: 700px) {
  .model-service-map,
  .image-studio-controls,
  .image-config-grid,
  .image-studio-recent-grid {
    grid-template-columns: 1fr;
  }

  .image-studio-compose-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-studio-template-trigger {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .image-studio-template-trigger em {
    grid-column: 2;
  }

  .image-template-modal {
    padding: 0;
  }

  .image-template-dialog {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .image-template-dialog-body {
    display: block;
    overflow: auto;
  }

  .image-template-catalog,
  .image-template-detail {
    overflow: visible;
  }

  .image-template-catalog {
    border-right: 0;
    border-bottom: 1px solid rgba(126, 228, 223, 0.1);
  }

  .image-template-grid {
    grid-template-columns: 1fr;
  }

  .image-studio-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .image-studio-submit-row .primary-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-stage-rail li,
  .media-preview-surface img,
  .media-video-progress > div span {
    transition: none;
  }
}

/* Compact desktop navigation. Keep every destination visible without nested scrolling. */
@media (min-width: 781px) and (min-height: 680px) {
  .sidebar {
    height: 100dvh;
    padding: 10px 8px 10px 16px;
    overflow: hidden;
  }

  .sidebar-shell {
    top: 10px;
    gap: 8px;
    height: calc(100dvh - 20px);
    min-height: 0;
    padding: 12px 14px;
  }

  .sidebar-topline {
    height: 32px;
  }

  .sidebar-kicker {
    font-size: 9px;
    line-height: 1.35;
  }

  .sidebar-toggle {
    width: 32px;
    height: 32px;
  }

  .brand {
    gap: 10px;
    min-height: 52px;
    padding-bottom: 10px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .brand strong {
    font-size: 14px;
  }

  .brand span {
    font-size: 10px;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    gap: 6px;
    min-height: 0;
    padding-bottom: 4px;
    overflow: hidden;
  }

  .sidebar-nav .nav-item.nav-item-settings {
    margin-top: auto;
  }

  .nav-item,
  .sub-nav-item {
    flex: 0 0 44px;
    gap: 10px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 6px 10px;
    border-radius: 13px;
    font-size: 13px;
  }

  .nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 9px;
  }

  .sidebar-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 6px;
    border-radius: 16px;
  }

  .sidebar-exit-button {
    min-height: 46px;
    padding: 6px 8px;
  }

  .sidebar-exit-icon {
    width: 30px;
    height: 30px;
  }

  .sidebar-exit-button strong {
    font-size: 12px;
  }

  .sidebar-exit-button small {
    font-size: 9px;
  }
}

@media (min-width: 781px) and (max-height: 679px) {
  .sidebar {
    height: 100dvh;
    padding: 6px 8px 6px 12px;
    overflow: hidden;
  }

  .sidebar-shell {
    top: 6px;
    gap: 6px;
    height: calc(100dvh - 12px);
    min-height: 0;
    padding: 10px 12px;
  }

  .sidebar-topline,
  .sidebar-toggle {
    height: 28px;
  }

  .sidebar-toggle {
    width: 28px;
    border-radius: 10px;
  }

  .sidebar-kicker {
    font-size: 8px;
    line-height: 1.25;
  }

  .brand {
    gap: 8px;
    min-height: 42px;
    padding-bottom: 6px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .brand strong {
    font-size: 13px;
  }

  .brand span {
    display: none;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    gap: 4px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .sidebar-nav .nav-item.nav-item-settings {
    margin-top: auto;
  }

  .nav-item,
  .sub-nav-item {
    flex: 0 0 38px;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 4px 8px;
    border-radius: 11px;
    font-size: 12px;
  }

  .nav-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 8px;
  }

  .sidebar-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 5px;
    border-radius: 14px;
  }

  .sidebar-exit-button {
    min-height: 40px;
    gap: 8px;
    padding: 4px 7px;
  }

  .sidebar-exit-icon {
    width: 26px;
    height: 26px;
  }

  .sidebar-exit-button strong {
    font-size: 11px;
  }

  .sidebar-exit-button small {
    display: none;
  }
}

/* Compact desktop image studio. Keep the complete workspace inside one viewport. */
@media (min-width: 1101px) and (min-height: 680px) {
  #app[data-active-view="image"] {
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  #app[data-active-view="image"] .shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #app[data-active-view="image"] .topbar {
    flex: 0 0 82px;
    min-height: 82px;
    max-height: 82px;
    padding: 11px 24px;
  }

  #app[data-active-view="image"] .topbar .eyebrow {
    margin-bottom: 3px;
    font-size: 9px;
  }

  #app[data-active-view="image"] .topbar h1 {
    margin-bottom: 3px;
    font-size: 27px;
    line-height: 1.05;
  }

  #app[data-active-view="image"] .topbar p:last-child {
    font-size: 11px;
    line-height: 1.35;
  }

  #app[data-active-view="image"] .view[data-view-panel="image"] {
    min-height: 0;
    overflow: hidden;
  }

  #app[data-active-view="image"] .image-studio-scroll {
    grid-template-rows: minmax(0, 1fr) 96px;
    gap: 10px;
    height: 100%;
    max-width: none;
    padding: 12px 20px 14px;
    overflow: hidden;
  }

  #app[data-active-view="image"] .image-studio-layout {
    min-height: 0;
    gap: 12px;
    overflow: hidden;
  }

  #app[data-active-view="image"] .image-studio-compose,
  #app[data-active-view="image"] .image-studio-output,
  #app[data-active-view="image"] .image-studio-recent {
    min-height: 0;
    border-radius: 15px;
  }

  #app[data-active-view="image"] .image-studio-compose-head,
  #app[data-active-view="image"] .image-studio-output-head,
  #app[data-active-view="image"] .image-studio-section-head {
    min-height: 48px;
  }

  #app[data-active-view="image"] .image-studio-compose-head,
  #app[data-active-view="image"] .image-studio-output-head {
    padding: 8px 14px;
  }

  #app[data-active-view="image"] .image-studio-compose-head > div:first-child > strong,
  #app[data-active-view="image"] .image-studio-output-head strong {
    margin-top: 1px;
    font-size: 12px;
  }

  #app[data-active-view="image"] .image-studio-service {
    padding: 5px 8px;
    border-radius: 8px;
  }

  #app[data-active-view="image"] .image-studio-service strong {
    font-size: 10px;
  }

  #app[data-active-view="image"] .image-studio-compose-body {
    gap: 6px;
    min-height: 0;
    padding: 8px 14px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 228, 223, 0.2) transparent;
  }

  #app[data-active-view="image"] .image-studio-prompt-field,
  #app[data-active-view="image"] .image-studio-controls label {
    gap: 4px;
  }

  #app[data-active-view="image"] .image-studio-prompt-field textarea {
    height: clamp(88px, 15dvh, 124px);
    min-height: 88px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55;
  }

  #app[data-active-view="image"] .image-studio-controls {
    gap: 8px;
  }

  #app[data-active-view="image"] .image-studio-controls select {
    min-height: 30px;
    font-size: 12px;
  }

  #app[data-active-view="image"] .image-studio-template-select {
    gap: 4px;
  }

  #app[data-active-view="image"] .image-studio-template-trigger {
    gap: 10px;
    min-height: 48px;
    padding: 6px 9px;
    border-radius: 10px;
  }

  #app[data-active-view="image"] .image-template-swatch {
    width: 38px;
    height: 34px;
    border-radius: 8px;
  }

  #app[data-active-view="image"] .image-studio-template-trigger strong {
    font-size: 12px;
  }

  #app[data-active-view="image"] .image-studio-template-trigger small {
    margin-top: 2px;
    font-size: 9px;
  }

  #app[data-active-view="image"] .image-studio-ratio {
    gap: 6px;
  }

  #app[data-active-view="image"] .image-studio-ratio legend {
    margin-bottom: 4px;
  }

  #app[data-active-view="image"] .image-studio-ratio span {
    min-height: 32px;
    border-radius: 8px;
    font-size: 12px;
  }

  #app[data-active-view="image"] .image-studio-references {
    gap: 8px;
    padding-top: 6px;
  }

  #app[data-active-view="image"] .image-studio-references > div:first-child strong {
    font-size: 11px;
  }

  #app[data-active-view="image"] .image-studio-reference-list {
    min-height: 0;
    gap: 6px;
  }

  #app[data-active-view="image"] .image-studio-reference-list:empty {
    display: none;
  }

  #app[data-active-view="image"] .image-studio-reference-list:has(> p:only-child) {
    display: none;
  }

  #app[data-active-view="image"] .image-studio-reference-list figure {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }

  #app[data-active-view="image"] .image-studio-submit-row {
    min-height: 34px;
  }

  #app[data-active-view="image"] .image-studio-submit-row .primary-btn {
    min-height: 34px;
    padding-inline: 14px;
    font-size: 12px;
  }

  #app[data-active-view="image"] .image-studio-output {
    grid-template-rows: 48px minmax(0, 1fr);
  }

  #app[data-active-view="image"] .image-studio-preview img {
    max-height: 100%;
  }

  #app[data-active-view="image"] .image-studio-recent {
    display: grid;
    grid-template-rows: 36px minmax(0, 1fr);
  }

  #app[data-active-view="image"] .image-studio-section-head {
    padding: 6px 12px;
  }

  #app[data-active-view="image"] .image-studio-recent .image-studio-section-head {
    min-height: 36px;
    padding-block: 4px;
  }

  #app[data-active-view="image"] .image-studio-section-head strong {
    margin-top: 1px;
    font-size: 11px;
  }

  #app[data-active-view="image"] .image-studio-recent-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: minmax(210px, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    min-height: 0;
    padding: 5px 7px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 228, 223, 0.2) transparent;
  }

  #app[data-active-view="image"] .image-studio-recent-grid article {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    min-width: 0;
    height: 48px;
    border-radius: 9px;
  }

  #app[data-active-view="image"] .image-studio-recent-grid button {
    height: 48px;
    aspect-ratio: auto;
  }

  #app[data-active-view="image"] .image-studio-recent-grid article > div {
    align-self: center;
    padding: 7px 9px;
  }

  #app[data-active-view="image"] .image-studio-recent-grid > p {
    align-self: center;
    margin: 0;
    padding: 8px;
  }
}

/* Keep model console density authoritative over legacy setup styles. */
.setup-service-scroll {
  gap: 14px;
  max-width: 1480px;
  padding: 18px 24px 26px;
}

.setup-integrity-strip {
  min-height: 52px;
  border-radius: 12px;
}

.setup-integrity-strip > div {
  min-height: 50px;
  padding-inline: 15px;
}

.model-service-map {
  gap: 8px;
}

.model-service-map article {
  padding: 12px;
  border-radius: 12px;
}

.setup-bulk-test {
  border-radius: 14px;
}

@media (max-width: 820px) {
  .setup-service-scroll {
    padding: 14px;
  }
}

/* Final authority for the Extreme Creation visual rail. */
#app[data-creation-mode="fast"] .reactor-flow-map {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "core" "main" "review" !important;
}

#app[data-creation-mode="fast"] .flow-rail-main {
  display: none !important;
}

#app[data-creation-mode="fast"] .fast-flow-rail {
  grid-area: main !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.6vw, 28px);
  align-items: start;
  min-height: 0;
  padding: 20px clamp(8px, 1.4vw, 22px) 12px;
  overflow: visible;
  border: 0;
  background: transparent;
}

#app[data-creation-mode="fast"] .fast-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 78px auto auto;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 134px;
  padding: 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(239, 220, 173, 0.72);
  text-align: center;
  box-shadow: none;
}

#app[data-creation-mode="fast"] .fast-flow-node::before,
#app[data-creation-mode="fast"] .fast-flow-node::after {
  content: none;
}

#app[data-creation-mode="fast"] .fast-flow-node > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(224, 171, 61, 0.52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 245, 192, 0.22), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(146, 91, 19, 0.72), rgba(15, 12, 8, 0.98) 74%);
  color: #f8d982;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 204, 0.2),
    inset 0 -8px 18px rgba(0, 0, 0, 0.24),
    0 0 0 5px rgba(211, 156, 43, 0.055),
    0 12px 24px rgba(0, 0, 0, 0.26);
}

#app[data-creation-mode="fast"] .fast-flow-node strong,
#app[data-creation-mode="fast"] .fast-flow-node small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-creation-mode="fast"] .fast-flow-node strong {
  color: rgba(255, 244, 211, 0.94);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 850;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .fast-flow-node small {
  color: rgba(221, 202, 159, 0.55);
  font-size: 10px;
  line-height: 1.25;
}

#app[data-creation-mode="fast"] .reactor-flow-map .review-console {
  grid-area: review !important;
  display: grid !important;
  width: 100%;
}

#app[data-creation-mode="fast"] .review-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 8px;
  width: 100%;
}

@media (max-width: 860px) {
  #app[data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(116px, 1fr)) !important;
    overflow-x: auto;
  }
}

@media (max-width: 700px) {
  #app[data-creation-mode="fast"] .review-skill-grid {
    grid-template-columns: repeat(10, 104px) !important;
    overflow-x: auto;
  }
}

/* Review console state is the single visual source of truth for the ten-dimension audit. */
#app[data-creation-mode="fast"] .review-console[data-status="running"] {
  border-color: rgba(143, 241, 235, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(126, 228, 223, 0.08),
    0 22px 46px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(126, 228, 223, 0.14) !important;
  animation: reviewConsoleBreathing 1.8s ease-in-out infinite;
}

#app[data-creation-mode="fast"] .review-console[data-status="running"] .review-console-head {
  border-bottom-color: rgba(143, 241, 235, 0.34) !important;
  animation: reviewConsoleHeadPulse 1.8s ease-in-out infinite;
}

#app[data-creation-mode="fast"] .review-console[data-status="done"] {
  border-color: rgba(143, 241, 235, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 46px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(126, 228, 223, 0.07) !important;
}

#app[data-creation-mode="fast"] .review-console[data-status="fallback"],
#app[data-creation-mode="fast"] .review-console[data-status="error"] {
  border-color: rgba(255, 175, 92, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 46px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(255, 175, 92, 0.1) !important;
}

#app[data-creation-mode="fast"] .review-skill-chip[data-selected="true"] {
  border-color: rgba(255, 220, 126, 0.86) !important;
  background:
    linear-gradient(135deg, rgba(255, 220, 126, 0.17), rgba(255, 220, 126, 0.055)),
    rgba(4, 10, 14, 0.42) !important;
  box-shadow:
    inset 3px 0 0 rgba(255, 220, 126, 0.94),
    0 0 0 1px rgba(255, 220, 126, 0.16),
    0 0 18px rgba(255, 205, 94, 0.16) !important;
}

.review-dimension-card[tabindex="-1"]:focus,
.review-dimension-card.is-selected {
  outline: 1px solid rgba(255, 220, 126, 0.8);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(255, 220, 126, 0.16), 0 0 22px rgba(255, 205, 94, 0.13);
}

@keyframes reviewConsoleBreathing {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.045); }
}

@keyframes reviewConsoleHeadPulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-creation-mode="fast"] .review-console[data-status="running"],
  #app[data-creation-mode="fast"] .review-console[data-status="running"] .review-console-head {
    animation: none !important;
  }
}

/* ── Quick Start: focused input + optional style wheel ── */
#app[data-creation-entry="quick-start"] .quick-start-style-dock {
  position: relative;
  top: auto;
  right: auto;
  z-index: 12;
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  height: auto;
  padding: 7px 12px;
  border: 1px solid rgba(227, 190, 86, 0.58);
  border-radius: 12px;
  color: #f8e6a4;
  background: linear-gradient(90deg, rgba(126, 82, 19, 0.2), rgba(8, 12, 14, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 226, 129, 0.06), 0 0 18px rgba(210, 161, 52, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#app[data-creation-entry="quick-start"] .quick-start-wheel-trigger:hover,
#app[data-creation-entry="quick-start"] .quick-start-style-dock.is-open .quick-start-wheel-trigger {
  transform: translateY(-2px);
  border-color: rgba(255, 226, 129, 0.94);
  box-shadow: inset 0 0 0 3px rgba(255, 226, 129, 0.12), 0 0 30px rgba(210, 161, 52, 0.28);
}

.quick-start-wheel-trigger strong { position: relative; z-index: 2; font-size: 12px; letter-spacing: .08em; }
.quick-start-wheel-trigger small { position: relative; z-index: 2; margin-left: auto; color: rgba(248, 230, 164, .62); font-size: 10px; }
.quick-start-wheel-orbit { position: absolute; top: 6px; right: 10px; width: 22px; height: 22px; border: 1px dashed rgba(255, 226, 129, .28); border-radius: 50%; animation: quickStartOrbit 12s linear infinite; opacity: .7; }
.quick-start-wheel-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe281; box-shadow: 0 0 8px #e4af45; }
.quick-start-wheel-orbit i:nth-child(1) { top: -2px; left: 50%; }
.quick-start-wheel-orbit i:nth-child(2) { right: 3px; bottom: 18%; }
.quick-start-wheel-orbit i:nth-child(3) { left: 9px; bottom: 7%; }

.quick-start-style-wheel {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: min(44vh, 420px);
  overflow: auto;
  padding: 10px 12px 12px;
  border: 1px solid rgba(227, 190, 86, .28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 24, 25, .98), rgba(8, 12, 14, .98));
  box-shadow: 0 16px 32px rgba(0,0,0,.28), 0 0 24px rgba(210,161,52,.1);
  animation: quickStartWheelInDown 180ms ease-out both;
}

.quick-start-wheel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.quick-start-wheel-head div { display: grid; gap: 4px; }
.quick-start-wheel-head span { color: rgba(248,230,164,.72); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.quick-start-wheel-head strong { color: rgba(248,247,241,.94); font-size: 13px; }
.quick-start-wheel-close { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: rgba(255,255,255,.66); background: rgba(255,255,255,.04); font-size: 20px; line-height: 1; cursor: pointer; }
.quick-start-wheel-section { display: grid; gap: 7px; padding-top: 10px; }
.quick-start-wheel-label { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.74); font-size: 11px; }
.quick-start-wheel-label small { color: rgba(248,230,164,.6); font-size: 10px; }
.quick-start-wheel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.quick-start-style-options { display: block; width: 100%; }
.quick-start-choice { min-width: 0; padding: 7px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: rgba(247,247,244,.76); background: rgba(255,255,255,.035); text-align: left; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.quick-start-choice:hover { transform: translateY(-1px); border-color: rgba(255,226,129,.46); background: rgba(255,226,129,.08); }
.quick-start-choice.active { border-color: rgba(255,226,129,.86); color: #fff1b3; background: linear-gradient(135deg, rgba(255,226,129,.16), rgba(255,226,129,.045)); box-shadow: inset 3px 0 0 rgba(255,226,129,.9); }
.quick-start-choice strong { display: block; font-size: 12px; line-height: 1.25; }
.quick-start-choice small { display: block; margin-top: 5px; color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.35; }
.quick-start-style-groups { display: grid; gap: 11px; padding-top: 2px; }
.quick-start-style-group { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.quick-start-style-group:first-child { padding-top: 0; border-top: 0; }
.quick-start-style-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.78); }
.quick-start-style-group-head strong { font-size: 11px; line-height: 1.25; letter-spacing: .03em; }
.quick-start-style-group-head small { color: rgba(248,230,164,.58); font-size: 10px; white-space: nowrap; }
.quick-start-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.quick-start-style-choice { padding: 6px 8px; font-size: 10px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-start-selected-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0 6px 6px 0; padding: 5px 8px 5px 10px; border: 1px solid rgba(255,226,129,.52); border-radius: 999px; color: #ffe9a1; background: rgba(255,226,129,.1); font-size: 11px; cursor: pointer; }
.quick-start-selected-chip span { color: rgba(255,233,161,.64); font-size: 14px; }
.quick-start-selection-strip { display: none !important; }
.quick-start-selection-label { display: block; margin-bottom: 4px; color: rgba(255,226,129,.6); font-size: 10px; letter-spacing: .08em; }

#app[data-creation-entry="quick-start"] .composer-stage { min-height: 210px; padding-right: 0; }
#app[data-creation-entry="quick-start"] .idea-input.studio-input { min-height: 210px; padding-right: 4px; }
#app[data-creation-entry="quick-start"] .output-overview,
#app[data-creation-entry="quick-start"] .result-head,
#app[data-creation-entry="quick-start"] .prompt-caption,
#app[data-creation-entry="quick-start"] .prompt-export-meta { display: none !important; }
#app[data-creation-entry="quick-start"] .prompt-card.prompt-primary { margin-top: 0; }
#app[data-creation-entry="quick-start"] #final-prompt { min-height: 280px; }

@keyframes quickStartOrbit { to { transform: rotate(360deg); } }
@keyframes quickStartWheelIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes quickStartWheelInDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) {
  #app[data-creation-entry="quick-start"] .quick-start-style-wheel { max-height: min(52vh, 420px); }
  #app[data-creation-entry="quick-start"] .quick-start-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .quick-start-wheel-orbit, .quick-start-style-wheel { animation: none !important; }
}

/* Quick Start wheel must escape the shared workbench input clipping layer. */
#app[data-creation-entry="quick-start"] .reactor-core .composer-stage {
  overflow: visible !important;
}

#app[data-creation-entry="quick-start"] .quick-start-style-dock {
  z-index: 1000 !important;
}

#app[data-creation-entry="quick-start"] .quick-start-style-wheel {
  z-index: 1100 !important;
}

/* Quick start keeps progress feedback without restoring the legacy node UI. */
#app[data-creation-entry="quick-start"] .reactor-core {
  position: relative;
}

#app[data-creation-entry="quick-start"] .reactor-core .composer-bottombar {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  min-height: 50px;
  gap: 8px;
}

#app[data-creation-entry="quick-start"] .reactor-core .composer-bottom-right {
  display: flex !important;
  width: auto !important;
  margin-left: auto;
  gap: 8px;
  align-items: center;
}

#app[data-creation-entry="quick-start"] .reactor-core-status {
  position: absolute;
  left: 16px;
  right: 148px;
  bottom: 41px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#app[data-creation-entry="quick-start"] .reactor-core-status > div:first-child {
  display: none !important;
}

#app[data-creation-entry="quick-start"] .reactor-core-status strong {
  order: 2;
  flex: 0 0 auto;
  color: rgba(30, 45, 40, 0.72);
  font-size: 12px;
  letter-spacing: -0.02em;
}

#app[data-creation-entry="quick-start"] .reactor-core-status .reactor-progress-track {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: 4px;
  border-radius: 999px;
}

@media (max-width: 700px) {
  #app[data-creation-entry="quick-start"] .reactor-core-status {
    left: 14px;
    right: 132px;
    bottom: 34px;
  }
}

/* Overseas prompt-only Quick Start keeps reference uploads and first-frame prompt controls visible. */
#app[data-creation-entry="quick-start"] .composer-launcher-row {
  display: flex !important;
}

#app[data-creation-entry="quick-start"] .composer-reference-strip {
  display: block !important;
}

#app[data-creation-entry="quick-start"] .composer-first-frame-size-control {
  display: flex !important;
}

#app[data-creation-entry="quick-start"] .composer-launcher[data-composer-panel="styles"] {
  display: none !important;
}

/* ==========================================================================
   Dr.Prompt overseas landing surface
   Progressive layer: keeps existing functional-page contracts intact.
   ========================================================================== */
#app[data-active-view="home"] {
  display: block;
  min-height: 100dvh;
  background: #f5f3ee;
}

#app[data-active-view="home"] .sidebar,
#app[data-active-view="home"] .topbar {
  display: none;
}

#app[data-active-view="home"] .shell {
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  padding: 0;
}

.home-view {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 82% 14%, rgba(207, 169, 110, .18), transparent 26%),
    radial-gradient(circle at 8% 88%, rgba(92, 113, 101, .12), transparent 28%),
    #f5f3ee;
  color: #161c19;
}

.home-shell {
  width: min(1280px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px) clamp(24px, 5vw, 72px) 24px;
  display: flex;
  flex-direction: column;
}

.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 42px;
}

.home-brand,
.home-nav-actions,
.home-hero-actions,
.home-entry,
.home-footer {
  display: flex;
  align-items: center;
}

.home-brand {
  gap: 11px;
  padding: 0;
  color: #161c19;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.home-brand-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  background: #171e1a;
  color: #f7f4ed;
  font-size: 10px;
  letter-spacing: .04em;
}

.home-nav-actions {
  gap: 18px;
}

.home-text-link,
.home-credit-btn,
.home-secondary-btn,
.home-primary-btn {
  min-height: 40px;
  border-radius: 999px;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.home-text-link {
  padding: 0 4px;
  color: #4d5750;
  font-size: 13px;
  font-weight: 700;
}

.home-credit-btn {
  padding: 0 17px;
  background: #171e1a;
  color: #fffdf7;
  font-size: 13px;
  font-weight: 800;
}

.home-text-link:hover,
.home-credit-btn:hover,
.home-secondary-btn:hover,
.home-primary-btn:hover,
.home-brand:hover {
  transform: translateY(-2px);
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(42px, 8vw, 116px);
  align-items: center;
  flex: 1;
  padding: clamp(64px, 9vh, 118px) 0 clamp(64px, 8vh, 102px);
}

.home-hero-copy {
  max-width: 590px;
}

.home-kicker,
.home-note,
.home-demo-card-label,
.home-demo-live,
.home-footer,
.home-demo-chrome,
.home-entry > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-kicker {
  margin: 0 0 20px;
  color: #aa7040;
}

.home-hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(52px, 7vw, 100px);
  line-height: .94;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.home-lede {
  max-width: 520px;
  margin: 28px 0 0;
  color: #5f6961;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  text-wrap: pretty;
}

.home-hero-actions {
  gap: 12px;
  margin-top: 34px;
}

.home-primary-btn,
.home-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 800;
}

.home-primary-btn {
  min-width: 154px;
  background: #171e1a;
  color: #fffdf7;
}

.home-primary-btn span {
  color: #e3ae71;
  font-size: 17px;
}

.home-secondary-btn {
  border: 1px solid rgba(23, 30, 26, .18);
  color: #334038;
}

.home-secondary-btn span {
  font-size: 9px;
}

.home-note {
  margin: 20px 0 0;
  color: #8a9189;
  letter-spacing: .1em;
}

.home-demo-wrap {
  min-width: 0;
}

.home-demo-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 31px;
  background: #141b18;
  box-shadow: 0 32px 72px rgba(36, 41, 36, .2);
  transform: rotate(1.2deg);
}

.home-demo-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.43);
  letter-spacing: .1em;
}

.home-demo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
}

.home-demo-url {
  margin-left: 10px;
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: none;
}

.home-demo-live {
  margin-left: auto;
  color: #deb27e;
  font-size: 9px;
}

.home-demo-canvas {
  position: relative;
  overflow: hidden;
  min-height: clamp(370px, 40vw, 560px);
  isolation: isolate;
  background:
    radial-gradient(circle at 60% 45%, rgba(194, 135, 78, .23), transparent 25%),
    radial-gradient(circle at 92% 12%, rgba(105, 135, 115, .35), transparent 34%),
    linear-gradient(145deg, #26342d 0%, #17221e 52%, #101714 100%);
}

.home-demo-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(140deg, transparent 8%, #000 50%, transparent 100%);
}

.home-demo-orbit {
  position: absolute;
  border: 1px solid rgba(226, 187, 136, .28);
  border-radius: 50%;
  transform: rotate(-22deg);
}

.home-demo-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: 15%;
  top: 12%;
  border-radius: 50%;
  background: #e2b47a;
  box-shadow: 0 0 22px 7px rgba(226, 180, 122, .38);
}

.home-demo-orbit-a {
  width: 62%;
  aspect-ratio: 1.42;
  left: 22%;
  top: 25%;
  animation: home-orbit-drift 12s ease-in-out infinite;
}

.home-demo-orbit-b {
  width: 46%;
  aspect-ratio: 1.42;
  left: 31%;
  top: 35%;
  opacity: .5;
  animation: home-orbit-drift 9s ease-in-out infinite reverse;
}

.home-demo-scan {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 202, 153, .75), transparent);
  box-shadow: 0 0 18px rgba(244, 202, 153, .5);
  animation: home-scan 7s ease-in-out infinite;
}

.home-demo-copy {
  position: absolute;
  left: 8%;
  top: 11%;
  color: #edf0e6;
}

.home-demo-copy span {
  display: block;
  margin-bottom: 12px;
  color: #deb27e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-demo-copy strong {
  display: block;
  font-size: clamp(30px, 4vw, 58px);
  line-height: .96;
  letter-spacing: -.06em;
}

.home-demo-prompt-card {
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: min(270px, 46%);
  padding: 17px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(13, 19, 16, .74);
  color: #f1f2eb;
  box-shadow: 0 18px 35px rgba(0,0,0,.2);
  backdrop-filter: blur(14px);
  animation: home-card-float 7s ease-in-out infinite;
}

.home-demo-card-label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.44);
  font-size: 8px;
}

.home-demo-prompt-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.home-demo-progress {
  height: 4px;
  margin: 16px 0 9px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
}

.home-demo-progress i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: #d9a56c;
  animation: home-progress 4.2s ease-in-out infinite;
}

.home-demo-prompt-card small {
  color: rgba(255,255,255,.47);
  font-size: 10px;
}

.home-demo-stage {
  position: absolute;
  display: grid;
  gap: 3px;
  width: 78px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
}

.home-demo-stage span {
  color: #d9a56c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.home-demo-stage b { font-weight: 650; }
.home-demo-stage-one { left: 10%; bottom: 18%; }
.home-demo-stage-two { left: 43%; top: 30%; }
.home-demo-stage-three { right: 9%; top: 17%; }

.home-demo-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 15px;
  color: #858c84;
  font-size: 11px;
}

.home-demo-caption span:last-child {
  color: #aa7040;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.home-entry-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(23, 30, 26, .18);
  border-bottom: 1px solid rgba(23, 30, 26, .18);
}

.home-entry {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-height: 126px;
  padding: 20px 24px 18px 0;
  border-right: 1px solid rgba(23, 30, 26, .14);
  color: #17201b;
  text-align: left;
}

.home-entry:not(:first-child) { padding-left: 24px; }
.home-entry:last-child { border-right: 0; }
.home-entry > span { color: #aa7040; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.home-entry strong { font-size: 16px; letter-spacing: -.035em; }
.home-entry small { color: #788078; font-size: 12px; }
.home-entry b { position: absolute; right: 18px; top: 20px; color: #9d6b40; font-size: 17px; font-weight: 500; transition: transform 180ms ease; }
.home-entry:hover b { transform: translate(3px, -3px); }
.home-entry:hover strong { color: #aa7040; }

.home-footer {
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  color: #8b918b;
  font-size: 9px;
  letter-spacing: .11em;
}

.home-footer span:first-child { color: #4b554e; }

@keyframes home-orbit-drift {
  0%, 100% { transform: rotate(-22deg) scale(1); }
  50% { transform: rotate(-12deg) scale(1.04); }
}
@keyframes home-scan {
  0%, 100% { top: 5%; opacity: 0; }
  18%, 82% { opacity: .75; }
  50% { top: 93%; }
}
@keyframes home-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes home-progress {
  0%, 100% { width: 54%; }
  50% { width: 82%; }
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 72px;
  }
  .home-hero-copy { max-width: 680px; }
  .home-demo-window { transform: none; }
}

@media (max-width: 640px) {
  .home-shell { padding: 18px 18px 20px; }
  .home-nav-actions { gap: 12px; }
  .home-credit-btn { padding: 0 13px; }
  .home-hero { padding: 58px 0 58px; }
  .home-hero h1 { font-size: clamp(48px, 15vw, 72px); }
  .home-hero-actions { align-items: stretch; flex-direction: column; }
  .home-primary-btn, .home-secondary-btn { width: 100%; }
  .home-demo-canvas { min-height: 350px; }
  .home-demo-prompt-card { width: 54%; }
  .home-entry-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-entry { min-height: 112px; padding: 18px 16px 16px 0; }
  .home-entry:not(:first-child) { padding-left: 16px; }
  .home-entry:nth-child(2) { border-right: 0; }
  .home-entry:nth-child(-n+2) { border-bottom: 1px solid rgba(23, 30, 26, .14); }
  .home-entry b { right: 13px; top: 16px; }
  .home-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-demo-orbit,
  .home-demo-scan,
  .home-demo-prompt-card,
  .home-demo-progress i { animation: none; }
  .home-text-link,
  .home-credit-btn,
  .home-secondary-btn,
  .home-primary-btn { transition: none; }
}

/* Functional-page quieting: preserve workflows, reduce console noise. */
#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .support-card,
#app:not([data-active-view="home"]) .overview-card {
  box-shadow: 0 14px 34px rgba(24, 35, 30, .07);
}

#app:not([data-active-view="home"]) .reactor-node,
#app:not([data-active-view="home"]) .fast-flow-node,
#app:not([data-active-view="home"]) .review-skill-chip {
  box-shadow: none;
}

.view[data-view-panel="logs"] .project-log-grid {
  display: grid;
  gap: 0;
}

@media (min-width: 840px) {
  .view[data-view-panel="logs"] .project-log-grid {
    grid-template-columns: 1fr;
  }
}

/* Run History is intentionally text-forward in the overseas release. */
.view[data-view-panel="logs"] .project-log-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  border-bottom: 1px solid rgba(23, 30, 26, .13);
  border-radius: 0;
  background: transparent;
}

.view[data-view-panel="logs"] .project-log-card:first-child {
  border-top: 1px solid rgba(23, 30, 26, .13);
}

.view[data-view-panel="logs"] .project-log-card-open {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 112px;
  padding: 18px 22px 18px 0;
  text-align: left;
  color: var(--ink);
}

.view[data-view-panel="logs"] .project-log-card-open:hover {
  background: rgba(255,255,255,.42);
}

.view[data-view-panel="logs"] .project-log-status-mark {
  display: flex;
  min-height: 64px;
  align-items: flex-end;
  padding: 12px;
  border-radius: 13px;
  background: #e8ece5;
  color: #536158;
}

.view[data-view-panel="logs"] .project-log-status-mark[data-tone="good"] { background: #e4eee6; color: #387052; }
.view[data-view-panel="logs"] .project-log-status-mark[data-tone="warning"] { background: #f4eadb; color: #9a6931; }
.view[data-view-panel="logs"] .project-log-status-mark[data-tone="error"] { background: #f0e1e2; color: #a44e58; }
.view[data-view-panel="logs"] .project-log-status-mark[data-tone="cancelled"] { background: #e7e9e6; color: #68726a; }
.view[data-view-panel="logs"] .project-log-status-mark span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.view[data-view-panel="logs"] .project-log-card-copy > div:first-child { display: flex; gap: 12px; color: #7d877f; font-size: 11px; }
.view[data-view-panel="logs"] .project-log-card-copy h3 { margin: 8px 0 5px; font-size: 17px; letter-spacing: -.03em; }
.view[data-view-panel="logs"] .project-log-card-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: #68736b; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.view[data-view-panel="logs"] .project-log-card-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: #8a938b; font-size: 11px; }
.view[data-view-panel="logs"] .project-log-card-open > strong { white-space: nowrap; color: #a36d40; font-size: 12px; }
.view[data-view-panel="logs"] .project-log-card-check { align-self: center; padding-left: 12px; }
.view[data-view-panel="logs"] .project-log-card-delete { top: 8px; right: 10px; z-index: 2; }

@media (max-width: 720px) {
  .view[data-view-panel="logs"] .project-log-card-open { grid-template-columns: 1fr auto; gap: 12px; padding-right: 14px; }
  .view[data-view-panel="logs"] .project-log-status-mark { display: none; }
  .view[data-view-panel="logs"] .project-log-card-open > strong { grid-column: 2; grid-row: 1; }
  .view[data-view-panel="logs"] .project-log-card-copy { grid-column: 1; grid-row: 1; }
}

/* Functional views: an overseas editorial layer over the existing workflow DOM. */
#app:not([data-active-view="home"]) {
  background: #f2f2ed;
}

#app:not([data-active-view="home"]) .sidebar {
  background: rgba(246, 246, 241, .86);
  border-right-color: rgba(23, 30, 26, .1);
}

#app:not([data-active-view="home"]) .sidebar-shell {
  padding-top: 24px;
}

#app:not([data-active-view="home"]) .brand-mark {
  border-radius: 10px;
  background: #171e1a;
}

#app:not([data-active-view="home"]) .nav-item {
  min-height: 44px;
  border-radius: 10px;
  color: #6d776f;
}

#app:not([data-active-view="home"]) .nav-item:hover,
#app:not([data-active-view="home"]) .nav-item.active {
  background: #e8ebe4;
  color: #171e1a;
}

#app:not([data-active-view="home"]) .topbar {
  min-height: 116px;
  padding: 28px 38px 22px;
  border-bottom-color: rgba(23, 30, 26, .1);
  background: rgba(245, 245, 240, .82);
}

#app:not([data-active-view="home"]) .topbar h1 {
  letter-spacing: -.055em;
}

#app:not([data-active-view="home"]) .topbar p:last-child {
  max-width: 690px;
  color: #788179;
}

#app:not([data-active-view="home"]) .page-scroll {
  padding: 30px 38px 44px;
}

#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel,
#app:not([data-active-view="home"]) .project-log-toolbar,
#app:not([data-active-view="home"]) .task-session-board {
  border-color: rgba(23, 30, 26, .12);
  border-radius: 20px;
}

#app:not([data-active-view="home"]) .panel-head,
#app:not([data-active-view="home"]) .prompt-head {
  border-bottom-color: rgba(23, 30, 26, .09);
}

#app:not([data-active-view="home"]) .fast-flow-node:not(.active),
#app:not([data-active-view="home"]) .review-skill-chip:not(.active) {
  opacity: .76;
}

#app[data-creation-entry="fast"] .reactor-flow-map {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.1));
}

#app[data-creation-entry="fast"] .composer-studio-top {
  border-bottom-color: rgba(23, 30, 26, .09);
}

#app[data-creation-entry="fast"] .review-console {
  border-top-color: rgba(23, 30, 26, .1);
}

#app[data-creation-entry="quick-start"] .composer-card {
  border-radius: 20px;
}

#app[data-creation-entry="quick-start"] .idea-input {
  min-height: 230px;
  font-size: 17px;
  line-height: 1.65;
}

@media (max-width: 800px) {
  #app:not([data-active-view="home"]) .topbar { padding: 22px 20px 18px; }
  #app:not([data-active-view="home"]) .page-scroll { padding: 20px 18px 32px; }
}

/* ==========================================================================
   Dr.Prompt overseas UI v2
   Navigation and visual tokens are layered over the existing workflow DOM.
   This intentionally changes presentation only; run state, selectors, and
   feature panels remain untouched.
   ========================================================================== */
:root {
  --ui-bg: #f4f3ef;
  --ui-surface: #ffffff;
  --ui-surface-muted: #eceee8;
  --ui-ink: #18201b;
  --ui-ink-soft: #566159;
  --ui-ink-muted: #788178;
  --ui-line: rgba(24, 32, 27, .14);
  --ui-night: #101816;
  --ui-night-soft: #27332f;
  --ui-accent: #b47a45;
  --ui-accent-soft: #ead8c6;
  --ui-star: #78b8b0;
  --ui-star-soft: rgba(120, 184, 176, .18);
  --ui-success: #397354;
  --ui-warning: #9b6a32;
  --ui-danger: #a14c57;
  --ui-shadow: 0 16px 42px rgba(24, 32, 27, .08);
  --ui-shadow-soft: 0 8px 24px rgba(24, 32, 27, .055);
}

body {
  background:
    radial-gradient(circle at 4% 0%, rgba(166, 110, 62, .08), transparent 24%),
    radial-gradient(circle at 100% 8%, rgba(57, 115, 84, .06), transparent 22%),
    var(--ui-bg);
  color: var(--ui-ink);
}

body::before {
  background-image: linear-gradient(rgba(24, 32, 27, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 32, 27, .022) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .62;
}

/* A single product shell: the old sidebar remains in the DOM so its data-view
   hooks keep working, but it is presented as a calm top navigation rail. */
#app {
  display: block;
  min-height: 100dvh;
  background: transparent;
}

#app > .sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  background: transparent;
}

#app > .sidebar > .sidebar-shell {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 12px clamp(18px, 4vw, 56px);
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  overflow: visible;
  background: rgba(244, 243, 239, .88);
  color: var(--ui-ink);
  box-shadow: 0 10px 26px rgba(24, 32, 27, .04);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

#app > .sidebar > .sidebar-shell::before {
  display: none;
}

#app > .sidebar .sidebar-topline {
  display: flex;
  order: 4;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#app > .sidebar .sidebar-kicker {
  display: none;
}

#app > .sidebar .brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}

#app > .sidebar .brand:hover .brand-mark {
  transform: translateY(-1px);
}

#app > .sidebar .brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  background: var(--ui-night);
  color: #fff;
  box-shadow: none;
  font-size: 12px;
  transition: transform var(--transition);
}

#app > .sidebar .brand strong {
  color: var(--ui-ink);
  font-size: 15px;
  letter-spacing: -.035em;
}

#app > .sidebar .brand span {
  display: block;
  margin-top: 2px;
  color: var(--ui-ink-muted);
  font-size: 10px;
  letter-spacing: .015em;
}

#app > .sidebar .sidebar-nav {
  order: 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

#app > .sidebar .nav-item {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ui-ink-soft);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

#app > .sidebar .nav-item::before,
#app > .sidebar .nav-icon {
  display: none;
}

#app > .sidebar .nav-item:hover {
  transform: none;
  background: rgba(255, 255, 255, .72);
  border-color: var(--ui-line);
  color: var(--ui-ink);
}

#app > .sidebar .nav-item.active {
  background: var(--ui-night);
  border-color: var(--ui-night);
  color: #f4f1e9;
  box-shadow: var(--ui-shadow-soft);
}

#app > .sidebar .sidebar-foot {
  order: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app > .sidebar .sidebar-exit-button {
  width: auto;
  padding: 8px 0 8px 8px;
  color: var(--ui-ink-muted);
}

#app > .sidebar .sidebar-exit-button:hover,
#app > .sidebar .sidebar-exit-button:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--ui-danger);
}

#app > .sidebar .sidebar-exit-button small {
  display: none;
}

#app > .sidebar .sidebar-exit-button strong {
  font-size: 11px;
  font-weight: 600;
}

#app > .sidebar .sidebar-exit-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  border-color: rgba(161, 76, 87, .26);
  color: var(--ui-danger);
  font-size: 16px;
}

#app > .sidebar .sidebar-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 7px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-surface);
}

#app > .sidebar .sidebar-toggle span {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--ui-ink-soft);
}

#app > .shell {
  min-width: 0;
}

#app:not([data-active-view="home"]) .topbar {
  min-height: 104px;
  padding: 28px clamp(18px, 4vw, 56px) 22px;
  border-bottom-color: var(--ui-line);
  background: rgba(244, 243, 239, .78);
}

#app:not([data-active-view="home"]) .topbar h1,
#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) .topbar-actions .ghost-btn {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, .72);
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) .topbar-actions .ghost-btn:hover,
#app:not([data-active-view="home"]) .topbar-actions .ghost-btn:focus-visible {
  border-color: rgba(166, 110, 62, .38);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .page-scroll,
#app:not([data-active-view="home"]) .workbench-grid {
  padding-left: clamp(18px, 4vw, 56px);
  padding-right: clamp(18px, 4vw, 56px);
}

#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel,
#app:not([data-active-view="home"]) .project-log-toolbar,
#app:not([data-active-view="home"]) .task-session-board {
  border-color: var(--ui-line);
  background-color: rgba(255, 255, 255, .82);
  box-shadow: var(--ui-shadow);
}

#app:not([data-active-view="home"]) .panel h2,
#app:not([data-active-view="home"]) .panel h3,
#app:not([data-active-view="home"]) .task-session-heading h2,
#app:not([data-active-view="home"]) .project-log-toolbar h2,
#app:not([data-active-view="home"]) .project-log-card-copy h3 {
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .panel p,
#app:not([data-active-view="home"]) .panel small,
#app:not([data-active-view="home"]) .task-session-heading p,
#app:not([data-active-view="home"]) .project-log-card-copy p {
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) textarea,
#app:not([data-active-view="home"]) select {
  color: var(--ui-ink);
  background: var(--ui-surface);
  border-color: var(--ui-line);
}

#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder {
  color: var(--ui-ink-muted);
  opacity: 1;
}

/* Keep the landing page editorial, but prevent oversized hero type from
   overpowering the product preview. */
.home-hero {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(46px, 7vw, 112px);
  padding-top: clamp(72px, 9vw, 118px);
  padding-bottom: clamp(70px, 9vw, 112px);
}

.home-hero-copy {
  max-width: 560px;
}

.home-hero h1 {
  max-width: 570px;
  font-size: clamp(58px, 6.2vw, 82px);
  line-height: .99;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.home-lede {
  max-width: 510px;
  font-size: 17px;
  line-height: 1.6;
}

.home-entry-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  background: rgba(255, 255, 255, .22);
}

.home-entry {
  min-height: 104px;
  padding: 18px 22px 18px 0;
}

.home-entry strong {
  font-size: 15px;
}

.home-entry small {
  color: var(--ui-ink-soft);
}

@media (max-width: 1120px) {
  #app > .sidebar > .sidebar-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  #app > .sidebar .sidebar-topline {
    order: 3;
  }

  #app > .sidebar .sidebar-foot {
    order: 4;
  }

  #app > .sidebar .sidebar-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #app > .sidebar .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  #app > .sidebar .nav-item {
    flex: 0 0 auto;
  }
}

@media (max-width: 760px) {
  #app > .sidebar > .sidebar-shell {
    grid-template-columns: auto 1fr auto;
    min-height: 62px;
    padding: 10px 16px;
  }

  #app > .sidebar .brand span {
    display: none;
  }

  #app > .sidebar .sidebar-nav {
    display: none;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 4px 0 2px;
    overflow: visible;
  }

  #app > .sidebar .sidebar-topline {
    grid-column: 3;
    grid-row: 1;
  }

  #app > .sidebar .sidebar-foot {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  #app > .sidebar .sidebar-exit-button strong {
    display: none;
  }

  #app > .sidebar .sidebar-exit-button {
    padding-left: 0;
  }

  #app > .sidebar .sidebar-toggle {
    display: inline-grid;
  }

  #app.sidebar-collapsed > .sidebar .sidebar-nav {
    display: none;
  }

  #app:not(.sidebar-collapsed) > .sidebar .sidebar-nav {
    display: flex;
  }

  #app:not([data-active-view="home"]) .topbar {
    min-height: 92px;
    padding-top: 20px;
    padding-bottom: 16px;
  }

  #app:not([data-active-view="home"]) .topbar-actions {
    display: none;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .home-hero h1 {
    max-width: 520px;
    font-size: clamp(48px, 13vw, 68px);
  }
}

@media (max-width: 560px) {
  .home-hero {
    padding-top: 56px;
    padding-bottom: 58px;
  }

  .home-lede {
    font-size: 16px;
  }

  .home-entry-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The public landing view owns its own minimal header; do not duplicate the
   workspace navigation beside it. */
#app[data-active-view="home"] > .sidebar {
  display: none;
}

#app[data-active-view="home"] > .shell {
  width: 100%;
}

/* Final overseas workspace stabilization.
   The legacy sidebar sizing rules remain in the stylesheet for the original
   workflow, but the overseas presentation uses a single compact top rail. */
@media (min-width: 1121px) {
  #app > .sidebar {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  #app > .sidebar > .sidebar-shell {
    height: auto;
    min-height: 70px;
    max-height: none;
    grid-template-rows: auto;
  }

  #app > .sidebar .sidebar-nav {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
}

/* Light editorial surfaces need an explicit ink system. Keep dark Creative
   Engine nodes untouched; these rules target only the light workspace chrome. */
#app:not([data-active-view="home"]) .topbar,
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel,
#app:not([data-active-view="home"]) .project-log-toolbar,
#app:not([data-active-view="home"]) .task-session-board {
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .topbar h1,
#app:not([data-active-view="home"]) .topbar .eyebrow {
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .topbar p:last-child,
#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child {
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy strong,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy small {
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .composer-first-frame-prompt-copy small,
#app:not([data-active-view="home"]) .first-frame-size-selector,
#app:not([data-active-view="home"]) .first-frame-size-selector button,
#app:not([data-active-view="home"]) .composer-control-label,
#app:not([data-active-view="home"]) .reactor-core-status,
#app:not([data-active-view="home"]) .composer-bottombar {
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) .first-frame-size-selector,
#app:not([data-active-view="home"]) .first-frame-size-selector button,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, .72);
}

#app:not([data-active-view="home"]) .first-frame-size-selector button:hover,
#app:not([data-active-view="home"]) .first-frame-size-selector button:focus-visible,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle:hover,
#app:not([data-active-view="home"]) .composer-first-frame-prompt-toggle:focus-visible {
  border-color: rgba(166, 110, 62, .38);
  color: var(--ui-ink);
}

#app:not([data-active-view="home"]) .composer-bottombar,
#app:not([data-active-view="home"]) .reactor-core-status {
  border-color: var(--ui-line);
}

#app:not([data-active-view="home"]) .output-panel .panel-head,
#app:not([data-active-view="home"]) .output-panel .prompt-head {
  color: var(--ui-ink);
  border-color: var(--ui-line);
}

#app:not([data-active-view="home"]) .output-panel .panel-head small,
#app:not([data-active-view="home"]) .output-panel .prompt-head small,
#app:not([data-active-view="home"]) .output-panel .output-meta,
#app:not([data-active-view="home"]) .output-panel .output-status {
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) .output-panel .ghost-btn,
#app:not([data-active-view="home"]) .output-panel .secondary-btn,
#app:not([data-active-view="home"]) .output-panel .copy-btn {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, .72);
  color: var(--ui-ink-soft);
}

#app:not([data-active-view="home"]) .output-panel .ghost-btn:hover,
#app:not([data-active-view="home"]) .output-panel .ghost-btn:focus-visible,
#app:not([data-active-view="home"]) .output-panel .secondary-btn:hover,
#app:not([data-active-view="home"]) .output-panel .secondary-btn:focus-visible,
#app:not([data-active-view="home"]) .output-panel .copy-btn:hover,
#app:not([data-active-view="home"]) .output-panel .copy-btn:focus-visible {
  color: var(--ui-ink);
  border-color: rgba(166, 110, 62, .38);
  background: var(--ui-surface);
}

/* Final browser layout pass: the workspace is a web page with one compact
   rail and one continuous document flow. Legacy cockpit height rules must not
   create a second viewport inside the functional views. */
#app:not([data-active-view="home"]) {
  --accent: var(--ui-accent);
  --accent-soft: rgba(180, 122, 69, .16);
  --gold: var(--ui-accent);
  --teal: var(--ui-star);
  --teal-soft: var(--ui-star-soft);
}

#app:not([data-active-view="home"]) > .shell {
  min-height: calc(100dvh - 64px);
  overflow: visible;
}

#app:not([data-active-view="home"]) .topbar {
  min-height: 88px;
  margin-top: 12px;
  padding-top: 20px;
  padding-bottom: 18px;
}

#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] {
  min-height: 0;
  padding-top: 0;
  overflow: visible;
}

#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] .workbench-grid,
#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] .setup-panel,
#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] .setup-content-grid,
#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] .setup-main-column,
#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] .composer-shell {
  min-height: 0;
}

#app:not([data-active-view="home"]) .view[data-view-panel="workbench"] .workbench-grid {
  gap: 18px;
}

#app[data-creation-entry="quick-start"] .view[data-view-panel="workbench"] .setup-panel {
  padding-top: 0 !important;
}

#app > .sidebar .sidebar-nav .nav-item,
#app > .sidebar .sidebar-nav .nav-item:hover,
#app > .sidebar .sidebar-nav .nav-item.active,
#app > .sidebar .sidebar-nav .nav-item.nav-item-settings[data-view="setup"],
#app > .sidebar .sidebar-nav .nav-item.nav-item-settings[data-view="setup"]:hover,
#app > .sidebar .sidebar-nav .nav-item.nav-item-settings[data-view="setup"].active {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--ui-ink-soft) !important;
  box-shadow: none !important;
}

#app > .sidebar .sidebar-nav .nav-item.active,
#app > .sidebar .sidebar-nav .nav-item.active:hover {
  border-color: var(--ui-night) !important;
  background: var(--ui-night) !important;
  color: #f4f1e9 !important;
  box-shadow: 0 8px 18px rgba(16, 24, 22, .14) !important;
}

@media (max-width: 760px) {
  #app > .sidebar > .sidebar-shell {
    min-height: 62px;
    grid-template-columns: auto 1fr auto;
    padding: 8px 14px;
  }

  #app > .sidebar .sidebar-nav,
  #app:not(.sidebar-collapsed) > .sidebar .sidebar-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    max-height: min(42vh, 260px);
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 40px rgba(24, 32, 27, .16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  #app.sidebar-collapsed > .sidebar .sidebar-nav {
    display: none;
  }

  #app > .sidebar .nav-item {
    flex: 1 1 calc(50% - 6px);
    min-height: 36px;
    padding: 8px 10px;
    text-align: left;
  }

  #app:not([data-active-view="home"]) .topbar {
    min-height: 82px;
    margin-top: 10px;
    padding: 18px 16px 16px;
  }

  #app:not([data-active-view="home"]) .view[data-view-panel="workbench"] {
    padding-bottom: 28px;
  }
}

/* Overseas palette finalization: intentionally last in cascade. */
:root {
  --ui-bg: #f2f2f0;
  --ui-surface: #ffffff;
  --ui-surface-muted: #e9e9e7;
  --ui-ink: #101014;
  --ui-ink-soft: #55555b;
  --ui-ink-muted: #77777e;
  --ui-line: rgba(16, 16, 20, .16);
  --ui-night: #0b0b0e;
  --ui-night-soft: #17171c;
  --ui-accent: #7658e8;
  --ui-accent-soft: rgba(118, 88, 232, .16);
  --ui-star: #9b7bff;
  --ui-star-soft: rgba(155, 123, 255, .16);
  --ui-success: #7658e8;
  --ui-warning: #d94b5b;
  --ui-danger: #d94b5b;
  --ui-shadow: 0 16px 42px rgba(16, 16, 20, .08);
  --ui-shadow-soft: 0 8px 24px rgba(16, 16, 20, .055);
}
body { background: var(--ui-bg); color: var(--ui-ink); }
body::before { background-image: linear-gradient(rgba(16,16,20,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,20,.018) 1px, transparent 1px); }
#app[data-active-view="home"] .home-entry-nav,
#app[data-active-view="home"] .home-entry { background: transparent; }
#app[data-active-view="home"] .home-shell,
#app[data-active-view="home"] .home-section,
#app[data-active-view="home"] .home-hero-copy,
#app[data-active-view="home"] .home-feature-copy { min-width: 0; }
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel {
  border-color: #2b2b32;
  background: #0d0d10;
  color: #f4f4f1;
  box-shadow: none;
}
#app:not([data-active-view="home"]) .composer-card .idea-input,
#app:not([data-active-view="home"]) .composer-card textarea,
#app:not([data-active-view="home"]) .composer-card input,
#app:not([data-active-view="home"]) .output-panel textarea {
  border-color: #303038;
  background: #111115;
  color: #f4f4f1;
}
#app:not([data-active-view="home"]) .composer-card .idea-input::placeholder,
#app:not([data-active-view="home"]) .composer-card textarea::placeholder { color: #818188; }
#app:not([data-active-view="home"]) .composer-card .composer-first-frame-prompt-toggle,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector button,
#app:not([data-active-view="home"]) .composer-card .composer-meta-trigger,
#app:not([data-active-view="home"]) .composer-card .composer-launcher,
#app:not([data-active-view="home"]) .composer-card .composer-reference-strip {
  border-color: #303038;
  background: #151519;
  color: #dedee2;
}
#app:not([data-active-view="home"]) .composer-card .composer-send-btn,
#app:not([data-active-view="home"]) .composer-card #run-demo-btn { background: var(--ui-accent); color: #fff; box-shadow: 0 0 0 4px rgba(118,88,232,.14); }
#app:not([data-active-view="home"]) .composer-card .composer-send-btn:hover,
#app:not([data-active-view="home"]) .composer-card #run-demo-btn:hover { background: #8d73f2; }
#app:not([data-active-view="home"]) .output-panel h2,
#app:not([data-active-view="home"]) .output-panel h3,
#app:not([data-active-view="home"]) .output-panel strong,
#app:not([data-active-view="home"]) .output-panel .panel-head,
#app:not([data-active-view="home"]) .output-panel .prompt-head { color: #f4f4f1; }
#app:not([data-active-view="home"]) .output-panel p,
#app:not([data-active-view="home"]) .output-panel small,
#app:not([data-active-view="home"]) .output-panel .output-meta,
#app:not([data-active-view="home"]) .output-panel .output-status { color: #9a9a9d; }
#app:not([data-active-view="home"]) .output-panel .ghost-btn,
#app:not([data-active-view="home"]) .output-panel .secondary-btn,
#app:not([data-active-view="home"]) .output-panel .copy-btn { border-color: #36363e; background: #17171c; color: #d8d8dd; }
#app:not([data-active-view="home"]) .output-panel .ghost-btn:hover,
#app:not([data-active-view="home"]) .output-panel .secondary-btn:hover,
#app:not([data-active-view="home"]) .output-panel .copy-btn:hover { border-color: var(--ui-accent); color: #fff; }

/* Compact prompt-library rows: keep the 99+ asset catalog scannable without
   weakening the existing editor, filtering, or copy actions. */
#app:not([data-active-view="home"]) .template-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#app:not([data-active-view="home"]) .template-choice-card {
  gap: 9px;
  padding: 13px;
  border-color: #2b2b32;
  border-radius: 5px;
  background: #111115;
  box-shadow: none;
}

#app:not([data-active-view="home"]) .template-choice-card:hover,
#app:not([data-active-view="home"]) .template-choice-card.active {
  transform: translateY(-1px);
  border-color: rgba(118, 88, 232, .72);
  background: #15151b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

#app:not([data-active-view="home"]) .template-choice-body {
  min-height: 68px;
}

#app:not([data-active-view="home"]) .template-choice-body h3 {
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 1.22;
}

#app:not([data-active-view="home"]) .template-choice-body p {
  font-size: 11px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

#app:not([data-active-view="home"]) .template-choice-facts {
  border-color: #292930;
  background: #292930;
}

#app:not([data-active-view="home"]) .template-choice-facts > span {
  padding: 7px 8px;
  background: #151519;
  font-size: 10px;
}

#app:not([data-active-view="home"]) .template-choice-facts small {
  font-size: 9px;
}

#app:not([data-active-view="home"]) .template-choice-card .template-meta {
  display: flex;
  min-height: 22px;
  gap: 4px;
  overflow: hidden;
}

#app:not([data-active-view="home"]) .template-choice-card .template-tag {
  max-width: 33%;
  overflow: hidden;
  border-color: #303038;
  background: #17171c;
  color: #9a9a9d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app:not([data-active-view="home"]) .template-choice-actions {
  gap: 6px;
}

#app:not([data-active-view="home"]) .template-choice-actions .ghost-btn,
#app:not([data-active-view="home"]) .template-choice-actions .primary-btn {
  min-height: 30px;
  padding-inline: 8px;
  font-size: 10px;
}

@media (max-width: 1180px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #app:not([data-active-view="home"]) .template-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  #app[data-active-view="home"] .home-hero h1 { width: 100%; max-width: 100%; overflow-wrap: normal; word-break: normal; }
  #app[data-active-view="home"] .home-hero-copy { width: 100%; }
  #app[data-active-view="home"] .home-nav-actions { min-width: 0; gap: 8px; }
  #app[data-active-view="home"] .home-credit-btn { padding-inline: 9px; font-size: 10px; }
}

/* Final cascade pass for overseas contrast and mobile stability. */
@media (max-width: 520px) {
  #app[data-active-view="home"] .home-view { overflow-x: clip; }
  #app[data-active-view="home"] .home-hero,
  #app[data-active-view="home"] .home-feature,
  #app[data-active-view="home"] .home-hero-copy,
  #app[data-active-view="home"] .home-lede,
  #app[data-active-view="home"] .home-demo-wrap { width: 100%; max-width: 100%; }
  #app[data-active-view="home"] .home-hero h1 { width: 100%; max-width: 100%; font-size: clamp(44px, 13vw, 58px); overflow-wrap: normal; word-break: normal; }
  #app[data-active-view="home"] .home-hero h1 em { display: block; }
  #app[data-active-view="home"] .home-lede { overflow-wrap: anywhere; text-wrap: wrap; }
  #app[data-active-view="home"] .home-nav-actions { min-width: 0; gap: 8px; }
  #app[data-active-view="home"] .home-credit-btn { padding-inline: 9px; font-size: 10px; }
}
body { background: #09090b; }
#app:not([data-active-view="home"]),
#app:not([data-active-view="home"]) > .shell,
#app:not([data-active-view="home"]) .view { background: #09090b; color: #f4f4f1; }
#app:not([data-active-view="home"]) > .sidebar > .sidebar-shell,
#app:not([data-active-view="home"]) .topbar { background: rgba(9,9,11,.94); color: #f4f4f1; border-color: #2b2b32; box-shadow: none; }
#app:not([data-active-view="home"]) .topbar h1,
#app:not([data-active-view="home"]) .topbar .eyebrow { color: #f4f4f1; }
#app:not([data-active-view="home"]) .topbar p:last-child,
#app:not([data-active-view="home"]) .topbar .topbar-copy > p:last-child { color: #9a9a9d; }
#app:not([data-active-view="home"]) .panel,
#app:not([data-active-view="home"]) .page-hero,
#app:not([data-active-view="home"]) .schema-card,
#app:not([data-active-view="home"]) .library-card,
#app:not([data-active-view="home"]) .template-card,
#app:not([data-active-view="home"]) .agent-map-card,
#app:not([data-active-view="home"]) .band-card,
#app:not([data-active-view="home"]) .api-card,
#app:not([data-active-view="home"]) .project-log-toolbar,
#app:not([data-active-view="home"]) .task-session-board { border-color: #2b2b32; background: #111115; color: #f4f4f1; box-shadow: none; }
#app:not([data-active-view="home"]) input,
#app:not([data-active-view="home"]) textarea,
#app:not([data-active-view="home"]) select { border-color: #303038; background: #111115; color: #f4f4f1; }
#app:not([data-active-view="home"]) input::placeholder,
#app:not([data-active-view="home"]) textarea::placeholder { color: #818188; }
#app:not([data-active-view="home"]) .composer-card,
#app:not([data-active-view="home"]) .output-panel { border-color: #2b2b32; background: #0d0d10; color: #f4f4f1; box-shadow: none; }
#app:not([data-active-view="home"]) .composer-card .idea-input,
#app:not([data-active-view="home"]) .composer-card textarea,
#app:not([data-active-view="home"]) .composer-card input,
#app:not([data-active-view="home"]) .output-panel textarea { border-color: #303038; background: #111115; color: #f4f4f1; }
#app:not([data-active-view="home"]) .composer-card .idea-input::placeholder,
#app:not([data-active-view="home"]) .composer-card textarea::placeholder { color: #818188; }
#app:not([data-active-view="home"]) .composer-card .composer-first-frame-prompt-toggle,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector,
#app:not([data-active-view="home"]) .composer-card .first-frame-size-selector button,
#app:not([data-active-view="home"]) .composer-card .composer-meta-trigger,
#app:not([data-active-view="home"]) .composer-card .composer-launcher,
#app:not([data-active-view="home"]) .composer-card .composer-reference-strip { border-color: #303038; background: #151519; color: #dedee2; }
#app:not([data-active-view="home"]) .composer-card .composer-send-btn,
#app:not([data-active-view="home"]) .composer-card #run-demo-btn { background: var(--ui-accent); color: #fff; box-shadow: 0 0 0 4px rgba(118,88,232,.14); }
#app:not([data-active-view="home"]) .composer-card .composer-send-btn:hover,
#app:not([data-active-view="home"]) .composer-card #run-demo-btn:hover { background: #8d73f2; }
#app:not([data-active-view="home"]) .output-panel h2,
#app:not([data-active-view="home"]) .output-panel h3,
#app:not([data-active-view="home"]) .output-panel strong,
#app:not([data-active-view="home"]) .output-panel .panel-head,
#app:not([data-active-view="home"]) .output-panel .prompt-head { color: #f4f4f1; }
#app:not([data-active-view="home"]) .output-panel p,
#app:not([data-active-view="home"]) .output-panel small,
#app:not([data-active-view="home"]) .output-panel .output-meta,
#app:not([data-active-view="home"]) .output-panel .output-status { color: #9a9a9d; }
#app:not([data-active-view="home"]) .output-panel .ghost-btn,
#app:not([data-active-view="home"]) .output-panel .secondary-btn,
#app:not([data-active-view="home"]) .output-panel .copy-btn { border-color: #36363e; background: #17171c; color: #d8d8dd; }
#app:not([data-active-view="home"]) .output-panel .ghost-btn:hover,
#app:not([data-active-view="home"]) .output-panel .secondary-btn:hover,
#app:not([data-active-view="home"]) .output-panel .copy-btn:hover { border-color: var(--ui-accent); color: #fff; }

/* Final cascade lock: General Styles heading on its own row. */
.composer-style-tray .style-column.generic {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  align-content: start !important;
  row-gap: 10px !important;
}
.composer-style-tray .style-column.generic > .style-column-head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
}
.composer-style-tray .style-column.generic > .generic-style-groups {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
}

/* Styles drawer theme: align the overseas selector with the product's dark-purple UI. */
.composer-card.composer-studio .composer-style-tray.open {
  border: 1px solid #2b2b32 !important;
  border-radius: 18px !important;
  background: #0d0d10 !important;
  color: #f4f4f1 !important;
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(118, 88, 232, 0.08),
    0 0 44px rgba(118, 88, 232, 0.12) !important;
}

.composer-style-tray.open .style-tray-collapse {
  border: 1px solid #363640 !important;
  border-radius: 9px !important;
  background: #17171c !important;
  color: #d8d8dd !important;
  box-shadow: none !important;
}

.composer-style-tray.open .style-tray-collapse:hover,
.composer-style-tray.open .style-tray-collapse:focus-visible {
  border-color: #7658e8 !important;
  background: #1d1930 !important;
  color: #ffffff !important;
}

.composer-style-tray .image-mode-panel,
.composer-style-tray .style-recommendation-panel,
.composer-style-tray .style-column {
  border: 1px solid #2b2b32 !important;
  border-radius: 14px !important;
  background: #111115 !important;
  box-shadow: none !important;
}

.composer-style-tray .image-mode-head strong,
.composer-style-tray .style-recommendation-head strong,
.composer-style-tray .style-column-head strong,
.composer-style-tray .generic-style-group-head strong {
  color: #f4f4f1 !important;
}

.composer-style-tray .image-mode-head span,
.composer-style-tray .style-recommendation-head span,
.composer-style-tray .style-recommendation-head small,
.composer-style-tray .style-column-head span,
.composer-style-tray .generic-style-group-head span,
.composer-style-tray .style-recommendation-empty,
.composer-style-tray .style-recommendation-loading {
  color: #9a9a9d !important;
}

.composer-style-tray .image-mode-head small,
.composer-style-tray .style-column-head span,
.composer-style-tray .generic-style-group-head span,
.composer-style-tray .style-recommendation-head small {
  border: 1px solid #303038 !important;
  background: #17171c !important;
}

.composer-style-tray .image-mode-head small.selected {
  border-color: rgba(118, 88, 232, 0.62) !important;
  background: rgba(118, 88, 232, 0.16) !important;
  color: #cfc5ff !important;
}

.composer-style-tray .image-mode-card {
  border: 1px solid #303038 !important;
  border-radius: 11px !important;
  background: #151519 !important;
  color: #dedee2 !important;
  box-shadow: none !important;
}

.composer-style-tray .image-mode-card strong { color: #f4f4f1 !important; }
.composer-style-tray .image-mode-card span { color: #9a9a9d !important; }
.composer-style-tray .image-mode-card small { color: #a995ff !important; }

.composer-style-tray .image-mode-card:hover,
.composer-style-tray .image-mode-card.active {
  border-color: #7658e8 !important;
  background: #19152a !important;
  box-shadow: 0 0 0 1px rgba(118, 88, 232, 0.14) !important;
}

.composer-style-tray .generic-style-group {
  border: 1px solid #2b2b32 !important;
  border-radius: 10px !important;
  background: #151519 !important;
}

.composer-style-tray .chip,
.composer-style-tray .style-column.generic .chip,
.composer-style-tray .style-recommendation-option.chip {
  border: 1px solid #363640 !important;
  border-radius: 9px !important;
  background: #17171c !important;
  color: #d8d8dd !important;
  box-shadow: none !important;
}

.composer-style-tray .chip:hover,
.composer-style-tray .chip:focus-visible,
.composer-style-tray .style-recommendation-option.chip:hover {
  border-color: #7658e8 !important;
  background: #1d1930 !important;
  color: #ffffff !important;
}

.composer-style-tray .chip.active,
.composer-style-tray .style-recommendation-option.chip.active {
  border-color: #7658e8 !important;
  background: #7658e8 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px rgba(118, 88, 232, 0.24) !important;
}

.composer-style-tray .style-recommendation-panel {
  gap: 12px !important;
  background: #111115 !important;
}

.composer-style-tray .style-recommendation-option strong,
.composer-style-tray .style-recommendation-option em {
  color: inherit !important;
}

.composer-style-tray .style-recommendation-empty,
.composer-style-tray .style-recommendation-loading {
  border-color: #303038 !important;
  border-radius: 9px !important;
  background: #151519 !important;
}

.composer-style-tray .style-recommendation-loading i {
  background: #7658e8 !important;
  box-shadow: 0 0 12px rgba(118, 88, 232, 0.62) !important;
}

@media (max-width: 780px) {
  .composer-card.composer-studio .composer-style-tray.open {
    border-radius: 16px !important;
  }
}

/* Style mode sections: keep each label on its own full-width row, then flow chips below. */
.composer-style-tray .style-column:not(.generic) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  align-content: start !important;
  row-gap: 9px !important;
}

.composer-style-tray .style-column:not(.generic) > .style-column-head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

.composer-style-tray .style-column:not(.generic) > .style-chip-row {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
}

/* Styles drawer back action: use the product's solid purple primary treatment. */
.composer-style-tray.open .style-tray-collapse {
  border-color: #7658e8 !important;
  background: #7658e8 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(118, 88, 232, 0.24) !important;
}

.composer-style-tray.open .style-tray-collapse:hover,
.composer-style-tray.open .style-tray-collapse:focus-visible {
  border-color: #8d73f2 !important;
  background: #8d73f2 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(118, 88, 232, 0.32) !important;
}

/* Overseas style taxonomy: quiet group colors improve scanning without changing layout. */
.composer-style-tray .generic-style-group {
  --style-group-rgb: 118, 88, 232;
  border-color: rgba(var(--style-group-rgb), 0.3) !important;
  background:
    linear-gradient(90deg, rgba(var(--style-group-rgb), 0.09), rgba(var(--style-group-rgb), 0.025) 38%, transparent 72%),
    #151519 !important;
}

.composer-style-tray .generic-style-group-head strong {
  color: rgb(var(--style-group-rgb)) !important;
}

.composer-style-tray .generic-style-group-head span {
  border-color: rgba(var(--style-group-rgb), 0.28) !important;
  background: rgba(var(--style-group-rgb), 0.1) !important;
  color: #c9c9d1 !important;
}

.composer-style-tray .generic-style-group.tone-look { --style-group-rgb: 154, 104, 216; }
.composer-style-tray .generic-style-group.tone-camera { --style-group-rgb: 100, 116, 216; }
.composer-style-tray .generic-style-group.tone-technical { --style-group-rgb: 121, 100, 200; }
.composer-style-tray .generic-style-group.tone-action { --style-group-rgb: 138, 95, 197; }
.composer-style-tray .generic-style-group.tone-performance { --style-group-rgb: 142, 106, 180; }
.composer-style-tray .generic-style-group.tone-world { --style-group-rgb: 95, 104, 173; }
.composer-style-tray .generic-style-group.tone-commercial { --style-group-rgb: 170, 134, 82; }
.composer-style-tray .generic-style-group.tone-regional { --style-group-rgb: 139, 108, 150; }
.composer-style-tray .generic-style-group.tone-grammar { --style-group-rgb: 111, 98, 181; }
.composer-style-tray .generic-style-group.tone-controls { --style-group-rgb: 118, 88, 232; }

/* Keep interactive meaning consistent: selection always uses the product purple. */
.composer-style-tray .generic-style-group .chip.active {
  border-color: #7658e8 !important;
  background: #7658e8 !important;
  color: #ffffff !important;
}

/* Film Review Board: compact one-word review cards. Keep the number on the
   left and the single-word dimension label centered in the remaining cell. */
#app[data-creation-mode="fast"] .review-skill-chip {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 8px !important;
  min-height: 58px !important;
  padding: 9px 10px 9px 8px !important;
  text-align: center !important;
}

#app[data-creation-mode="fast"] .review-skill-chip > span {
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  min-width: 0 !important;
  padding-right: 8px !important;
  border-right: 1px solid rgba(219, 165, 53, 0.2) !important;
  color: rgba(239, 188, 78, 0.9) !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.08em !important;
}

#app[data-creation-mode="fast"] .review-skill-chip strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  justify-self: center !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Status is communicated by border/background/state animation; no second
   visible label is needed on the card. */
#app[data-creation-mode="fast"] .review-skill-chip small {
  display: none !important;
}

@media (max-width: 1279px) {
  #app[data-creation-mode="fast"] .review-skill-chip {
    min-width: 104px !important;
  }
}
/* Final presentation authority for the six-stage Creative Engine rail. */
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-rail {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 26px) !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 24px clamp(10px, 1.6vw, 24px) 18px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-rail::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50px !important;
  right: calc(8.333% + 24px) !important;
  left: calc(8.333% + 24px) !important;
  height: 1px !important;
  border: 0 !important;
  background: linear-gradient(90deg, rgba(117, 93, 195, .14), rgba(154, 128, 232, .5) 50%, rgba(117, 93, 195, .14)) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-rail::after {
  content: none !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: 52px auto minmax(28px, auto) !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 0 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(238, 233, 249, .72) !important;
  text-align: center !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none;
  animation: workflowNodeIn 360ms cubic-bezier(.22, 1, .36, 1) both !important;
  transition: color 180ms ease !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:nth-child(2) { animation-delay: 35ms !important; }
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:nth-child(3) { animation-delay: 70ms !important; }
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:nth-child(4) { animation-delay: 105ms !important; }
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:nth-child(5) { animation-delay: 140ms !important; }
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:nth-child(6) { animation-delay: 175ms !important; }

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node::before,
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node > span {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(169, 150, 224, .34) !important;
  border-radius: 50% !important;
  background: rgba(48, 38, 75, .92) !important;
  color: rgba(229, 219, 255, .82) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 760 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(21, 13, 42, .16) !important;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node > span::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid transparent;
  border-top-color: rgba(188, 166, 255, .92);
  border-right-color: rgba(188, 166, 255, .34);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node > span::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(25, 19, 39, .96);
  border-radius: 50%;
  background: rgba(155, 133, 222, .48);
  opacity: 0;
  pointer-events: none;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node strong,
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node strong {
  color: rgba(250, 247, 255, .94) !important;
  font-size: clamp(11px, .82vw, 13px) !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node small {
  max-width: 154px !important;
  color: rgba(216, 207, 235, .5) !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-wrap: balance;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:hover,
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:focus-visible {
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:hover > span,
html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:focus-visible > span {
  border-color: rgba(192, 170, 255, .72) !important;
  background: rgba(61, 46, 99, .96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px rgba(35, 19, 73, .22) !important;
  transform: translateY(-2px) scale(1.035) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:focus-visible {
  outline: none !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node:focus-visible > span {
  outline: 2px solid rgba(190, 169, 255, .66);
  outline-offset: 4px;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-status="running"] {
  animation: none !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span {
  border-color: rgba(194, 172, 255, .86) !important;
  background: rgba(76, 54, 127, .98) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 4px rgba(140, 111, 222, .08), 0 10px 24px rgba(41, 22, 82, .24) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-status="running"] > span::before {
  opacity: 1;
  animation: workflowStageOrbit 1.8s linear infinite;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-status="done"] > span {
  border-color: rgba(165, 222, 201, .58) !important;
  background: rgba(41, 78, 68, .94) !important;
  color: rgba(229, 255, 246, .96) !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-status="done"] > span::after {
  background: #8bd7ba;
  opacity: 1;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-status="error"] > span {
  border-color: rgba(239, 133, 133, .7) !important;
  background: rgba(91, 41, 52, .96) !important;
  color: #ffecef !important;
}

html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node[data-warning="true"] > span::after {
  background: #e7b861;
  opacity: 1;
}

@keyframes workflowNodeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes workflowStageOrbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
  html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-rail {
    grid-template-columns: repeat(6, minmax(118px, 1fr)) !important;
    justify-content: start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }

  html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-rail::before {
    right: 69px !important;
    left: 69px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node,
  html body #app#app[data-active-view="workbench"][data-creation-mode="fast"] .fast-flow-node > span::before {
    animation: none !important;
  }
}

/* Imaging mode cards: visual-first, mode-specific examples with one consistent frame. */
.composer-style-tray .image-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.composer-style-tray .image-mode-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 11px;
  min-height: 0;
  padding: 10px;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}

.composer-style-tray .image-mode-card > .image-mode-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(111, 92, 192, .22), rgba(20, 24, 33, .92)),
    #16161b;
}

.composer-style-tray .image-mode-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
  transition: transform 260ms ease, filter 260ms ease;
}

.composer-style-tray .image-mode-card:hover .image-mode-thumb img,
.composer-style-tray .image-mode-card.active .image-mode-thumb img {
  transform: scale(1.035);
  filter: saturate(1.02) contrast(1.06);
}

.composer-style-tray .image-mode-thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: rgba(245, 243, 255, .78);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.composer-style-tray .image-mode-thumb:not(.is-missing) .image-mode-thumb-fallback {
  opacity: 0;
}

.composer-style-tray .image-mode-card-body {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.composer-style-tray .image-mode-card strong {
  display: block;
  font-size: 14px;
  line-height: 1.22;
}

.composer-style-tray .image-mode-card .image-mode-description {
  display: block;
  font-size: 11px;
  line-height: 1.42;
}

.composer-style-tray .image-mode-best-for {
  display: block;
  color: rgba(219, 214, 246, .78);
  font-size: 10px;
  line-height: 1.35;
}

.composer-style-tray .image-mode-best-for em {
  margin-right: 4px;
  color: rgba(169, 154, 238, .92);
  font-style: normal;
  letter-spacing: .03em;
}

.composer-style-tray .image-mode-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
}

.composer-style-tray .image-mode-card-foot > small {
  flex: 0 0 auto;
}

.composer-style-tray .image-mode-tags {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.composer-style-tray .image-mode-tags i {
  display: block;
  max-width: 78px;
  overflow: hidden;
  padding: 3px 5px;
  border: 1px solid rgba(169, 154, 238, .2);
  border-radius: 999px;
  color: rgba(203, 193, 246, .78);
  font-size: 9px;
  font-style: normal;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-start-mode-choice {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.quick-start-mode-thumb {
  display: block;
  width: 52px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(118, 88, 232, .32), rgba(20, 24, 29, .9));
}

.quick-start-mode-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .composer-style-tray .image-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .composer-style-tray .image-mode-grid {
    grid-template-columns: 1fr;
  }

  .composer-style-tray .image-mode-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
  }

  .composer-style-tray .image-mode-card > .image-mode-thumb {
    aspect-ratio: auto;
    min-height: 92px;
  }

  .composer-style-tray .image-mode-tags {
    display: none;
  }
}