: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;
}

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

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

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

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

/* 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;
}

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

.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: "高级模板套用";
  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: "高级模板套用 · 点击卡片将完整 RAG 模板回填到输入框";
  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;
}

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

.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: block !important;
  column-count: 2 !important;
  column-gap: 6px !important;
  gap: 0 !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: keep activated node details in the same dark UI system. */
.preview-modal.active {
  color: rgba(238, 251, 249, 0.92) !important;
}

.preview-modal .preview-backdrop {
  background:
    radial-gradient(circle at 22% 16%, rgba(126, 228, 223, 0.16), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(255, 170, 80, 0.12), transparent 28%),
    rgba(0, 4, 7, 0.78) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

.preview-modal .preview-dialog {
  border: 1px solid rgba(126, 228, 223, 0.18) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 228, 223, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(10, 20, 27, 0.98), rgba(3, 7, 11, 0.985)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 110px rgba(0, 0, 0, 0.64),
    0 0 76px rgba(126, 228, 223, 0.12) !important;
}

.preview-modal .preview-head {
  border-bottom: 1px solid rgba(126, 228, 223, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
    rgba(4, 10, 14, 0.72) !important;
}

.preview-modal .preview-head .eyebrow {
  color: rgba(143, 241, 235, 0.76) !important;
}

.preview-modal .preview-head h2,
.preview-modal #preview-title {
  color: #f4fffd !important;
}

.preview-modal .preview-actions .ghost-btn,
.preview-modal .preview-actions .ghost-btn.small {
  border-color: rgba(255, 170, 80, 0.46) !important;
  background:
    linear-gradient(160deg, rgba(255, 170, 80, 0.16), rgba(174, 220, 118, 0.11)),
    rgba(4, 10, 14, 0.72) !important;
  color: rgba(255, 238, 214, 0.94) !important;
}

.preview-modal .preview-actions .ghost-btn:hover,
.preview-modal .preview-actions .ghost-btn.small:hover {
  border-color: rgba(210, 241, 145, 0.72) !important;
  background:
    linear-gradient(160deg, rgba(255, 186, 98, 0.28), rgba(190, 236, 128, 0.2)),
    rgba(6, 18, 18, 0.86) !important;
  color: #fff7ec !important;
}

.preview-modal .preview-content {
  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.84) !important;
  color: rgba(238, 251, 249, 0.92) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.035) !important;
  scrollbar-color: rgba(126, 228, 223, 0.42) rgba(255, 255, 255, 0.05) !important;
}

.preview-modal .preview-content::selection {
  background: rgba(126, 228, 223, 0.28) !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;
  align-items: center;
  padding: 8px 11px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 6px;
  text-align: left;
  white-space: normal;
}

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

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