:root {
  color-scheme: dark;
  --bg: #0c0d10;
  --panel: #17191f;
  --panel-2: #20232b;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f4f6fb;
  --muted: #9ba3b2;
  --purple: #8257ff;
  --blue: #3488ff;
  --cyan: #27c6bf;
  --gold: #f0b84c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  --rail-width: 232px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 14px;
  border-right: 1px solid var(--line);
  background: #0f1116;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
}

.logo > span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.nav-item.active,
.nav-item:hover {
  color: var(--text);
  background: var(--panel-2);
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.nav-group-toggle b {
  font-size: 12px;
  transition: transform 160ms ease;
}

.nav-group:not(.open) .nav-group-toggle b {
  transform: rotate(180deg);
}

.nav-submenu {
  display: grid;
  gap: 3px;
  padding-left: 16px;
}

.nav-group:not(.open) .nav-submenu {
  display: none;
}

.nav-submenu button {
  min-height: 36px;
  border: 0;
  border-left: 2px solid rgba(255,255,255,.1);
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.nav-submenu button:hover,
.nav-submenu button.active {
  border-left-color: var(--purple);
  color: #fff;
  background: rgba(130,87,255,.1);
}

.rail-note {
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  display: grid;
  gap: 6px;
}

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

.workspace-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--rail-width);
  display: none;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  background: #111319;
}

body.workspace-active .workspace-rail {
  display: flex;
}

.workspace-back,
.workspace-nav button {
  width: 100%;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.workspace-back {
  display: flex;
  align-items: center;
  gap: 9px;
  border-color: var(--line);
  color: var(--text);
  background: #191b22;
}

.workspace-back span {
  font-size: 19px;
}

.workspace-nav {
  display: grid;
  gap: 6px;
}

.workspace-nav button:hover,
.workspace-nav button.active {
  border-color: rgba(130, 87, 255, 0.42);
  color: #fff;
  background: rgba(130, 87, 255, 0.14);
}

.workspace-nav-group {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.workspace-nav-group > span {
  padding: 0 12px 5px;
  color: #737c8e;
  font-size: 12px;
  font-weight: 700;
}

.workspace-nav-group button {
  min-height: 36px;
  padding-left: 22px;
}

.main {
  padding: 20px 24px 24px;
  min-width: 0;
}

.app-view {
  display: none;
}

.app-view.active {
  display: block;
}

.space-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.space-actions {
  display: flex;
  gap: 10px;
}

.space-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.space-card {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  background-color: #24262d;
  background-size: cover;
  background-position: center;
  text-align: left;
  box-shadow: var(--shadow);
}

.space-card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}

.space-card-info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.space-card-info strong,
.space-card-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-card-info span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}

.space-empty {
  min-height: 280px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  background: #111319;
}

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

.home-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(360px, 720px) auto;
  gap: 16px;
  align-items: center;
  margin: -20px -24px 18px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 13, 16, 0.88);
  backdrop-filter: blur(18px);
}

.home-topbar .top-search {
  width: min(700px, 100%);
}

.top-search {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 88px;
  gap: 10px;
  align-items: center;
  padding: 0 8px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #17191f;
}

.top-search span {
  color: var(--muted);
  font-size: 18px;
}

.top-search input {
  min-width: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  outline: none;
}

.top-search button,
.top-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #fff;
  background: rgba(130, 87, 255, 0.88);
  font-weight: 800;
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.top-actions button {
  padding: 0 12px;
  background: #1c1f27;
}

.power-pill {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #ffe7b0;
  background: #1f2026;
  font-weight: 800;
}

.hero {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 520px);
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(230px, 0.7fr) minmax(0, 1.55fr);
  gap: 14px;
  margin-bottom: 24px;
}

.feature-hero,
.feature-stack button,
.tool-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  overflow: hidden;
  text-align: left;
}

.feature-hero {
  min-height: 220px;
  display: grid;
  align-items: end;
  padding: 28px;
  cursor: pointer;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78), rgba(0,0,0,0.2)),
    radial-gradient(circle at 76% 22%, rgba(255, 180, 78, 0.46), transparent 24%),
    linear-gradient(135deg, #2a160c, #612a1b 45%, #245179);
  background-position: center;
  background-size: cover;
}

.feature-hero span {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  color: #ffe6bd;
  background: rgba(255,255,255,0.08);
  font-weight: 800;
}

.feature-hero h2 {
  font-size: 34px;
}

.feature-hero p {
  margin-top: 10px;
  color: rgba(255,255,255,0.76);
}

.feature-stack {
  display: grid;
  gap: 14px;
}

.feature-stack button {
  min-height: 103px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  cursor: pointer;
  background:
    radial-gradient(circle at 88% 40%, rgba(240, 184, 76, 0.44), transparent 24%),
    linear-gradient(135deg, #271313, #101522 72%);
}

.feature-stack button:nth-child(2) {
  background:
    radial-gradient(circle at 86% 42%, rgba(130, 87, 255, 0.52), transparent 24%),
    linear-gradient(135deg, #201241, #101522 72%);
}

.feature-stack span,
.tool-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.tool-grid button {
  min-height: 102px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  cursor: pointer;
  background: linear-gradient(135deg, #211d37, #171923);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.feature-hero:hover,
.feature-stack button:hover,
.tool-grid button:hover {
  border-color: rgba(130, 87, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(130, 87, 255, 0.32);
  transform: translateY(-1px);
}

.feature-hero:focus-visible,
.feature-stack button:focus-visible,
.tool-grid button:focus-visible {
  outline: 2px solid #8257ff;
  outline-offset: 2px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
}

h2 {
  font-size: 22px;
  line-height: 1.25;
}

h3 {
  font-size: 15px;
}

.hero-copy,
#description {
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.searchbar {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.searchbar input,
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  background: #111319;
  outline: none;
}

.searchbar input:focus,
.field input:focus,
.field textarea:focus {
  border-color: rgba(130, 87, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(130, 87, 255, 0.18);
}

.searchbar button,
.primary {
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--purple), var(--blue));
}

.quick-row,
.filters,
.tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
}

.quick,
.filter-chip,
.model-tab,
.tab,
.secondary,
.resource {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--panel);
}

.quick.active,
.filter-chip.active,
.model-tab.active,
.tab.active {
  color: #fff;
  border-color: transparent;
  background: rgba(130, 87, 255, 0.9);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.inspector[hidden] {
  display: none;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  align-items: start;
}

.model-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 160ms ease, border-color 160ms ease;
  cursor: pointer;
}

.model-card:hover {
  transform: translateY(-2px);
  border-color: rgba(130, 87, 255, 0.62);
}

.model-card.active {
  border-color: rgba(130, 87, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(130, 87, 255, 0.2), var(--shadow);
}

.model-cover {
  position: relative;
  width: 100%;
  min-height: 120px;
  max-height: 260px;
  overflow: hidden;
  background-color: #252935;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  place-items: center;
}

.model-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
}

.model-cover.is-fallback {
  aspect-ratio: 4 / 3;
}

.model-cover::after {
  content: none;
}

.model-cover > span,
.selected-cover span {
  z-index: 1;
  font-size: 22px;
  font-weight: 900;
}

.model-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 38%, rgba(0, 0, 0, 0.78));
  transition: opacity 160ms ease;
}

.model-card:hover .model-hover,
.model-card:focus-within .model-hover {
  opacity: 1;
  pointer-events: auto;
}

.favorite-button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgba(20, 21, 26, 0.58);
  backdrop-filter: blur(8px);
  font-size: 16px;
}

.favorite-button.active {
  color: #ffd86a;
}

.model-hover-bottom {
  width: 100%;
  display: grid;
  gap: 7px;
}

.hover-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hover-author {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.author-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #53b6ff, #8557ff);
  font-size: 10px !important;
  font-weight: 900;
}

.hover-stat {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px !important;
  white-space: nowrap;
}

.hover-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  align-items: center;
}

.same-button,
.workflow-button,
.like-button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.same-button {
  background: var(--purple);
}

.workflow-button {
  min-width: 52px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(23, 25, 31, 0.76);
  backdrop-filter: blur(10px);
}

.like-button {
  min-width: 46px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}

.like-button.active {
  color: #ff8da1;
  background: rgba(255, 103, 134, 0.24);
}

.workflow-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  background: #111318;
}

.workflow-modal.open {
  display: block;
}

/* The fixed project surface owns scrolling; do not expose the home page scrollbar. */
html:has(.workflow-modal.open), body:has(.workflow-modal.open) {
  overflow: hidden;
}

.workflow-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
}

.workflow-header {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid #2a2d35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  color: #f5f7fb;
  background: #181a20;
}

.workflow-header > div:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.workflow-header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.workflow-kicker {
  color: #8991a3;
  font-size: 11px;
}

.workflow-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workflow-toolbar button,
.workflow-toolbar span {
  height: 32px;
  border: 1px solid #343843;
  border-radius: 6px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  color: #e7eaf0;
  background: #23262e;
  font: inherit;
  font-size: 12px;
}

.workflow-toolbar button {
  cursor: pointer;
}

.workflow-toolbar #workflowZoomOut,
.workflow-toolbar #workflowZoomIn,
.workflow-toolbar .workflow-close {
  width: 32px;
  padding: 0;
  font-size: 18px;
}

.workflow-toolbar #workflowZoomLabel {
  min-width: 58px;
}

.workflow-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  touch-action: none;
  cursor: default;
  background-color: #eef1f7;
  background-image: radial-gradient(circle, #c6ccd8 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-user-select: none;
  user-select: none;
  /* Non-editable canvas content must not paint a browser navigation caret. */
  caret-color: transparent;
}

.workflow-viewport:focus,
.workflow-viewport:focus-visible { outline: none; }

.workflow-viewport.is-hand-tool,
.workflow-viewport.is-hand-tool .workflow-node,
.workflow-viewport.is-hand-tool .workflow-node header {
  cursor: grab;
}

.workflow-viewport.is-panning {
  cursor: grabbing;
}

.workflow-viewport.is-panning .workflow-node,
.workflow-viewport.is-panning .workflow-node header {
  cursor: grabbing;
}

.workflow-pan-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1680px;
  height: 840px;
  transform-origin: 0 0;
  transform: none;
  pointer-events: none;
}

.workflow-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 1680px;
  height: 840px;
  transform: none;
  transform-origin: 0 0;
  zoom: 1;
  pointer-events: auto;
}

.workflow-links {
  position: absolute;
  inset: 0;
  width: 1680px;
  height: 840px;
  overflow: visible;
  pointer-events: none;
}

.workflow-links path {
  fill: none;
  stroke: #29ad75;
  stroke-width: 3;
  stroke-linecap: round;
}

.workflow-links path.blue {
  stroke: #4d7cff;
}

.workflow-links path.workflow-temp-link {
  display: none;
  stroke-dasharray: 8 6;
  marker-end: none;
  opacity: 0.8;
}

.workflow-links path.workflow-temp-link.is-active {
  display: block;
}

.workflow-stage-label {
  position: absolute;
  top: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303746;
  font-size: 13px;
  font-weight: 900;
}

.workflow-stage-label b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #7652ee;
  font-size: 12px;
}

.workflow-stage-label.stage-one { left: 60px; }
.workflow-stage-label.stage-two { left: 480px; }
.workflow-stage-label.stage-three { left: 940px; }

.workflow-node {
  position: absolute;
  z-index: 2;
  border: 1px solid #d4d9e3;
  border-radius: 8px;
  overflow: visible;
  color: #252b36;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 32px rgba(49, 59, 78, 0.14);
  cursor: default;
  touch-action: none;
}

.workflow-node:not(:has(input:focus, textarea:focus, select:focus)) {
  cursor: grab;
}

.workflow-node.is-dragging {
  z-index: 6;
  box-shadow: 0 18px 42px rgba(49, 59, 78, 0.24);
  cursor: grabbing;
  user-select: none;
}

.workflow-node input,
.workflow-node textarea,
.workflow-node select {
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
  caret-color: auto;
}

.workflow-viewport [contenteditable="true"] { caret-color: auto; }

.workflow-node header {
  height: 42px;
  border-bottom: 1px solid #e2e5eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  background: #f9fafc;
  cursor: grab;
  touch-action: none;
  border-radius: 8px 8px 0 0;
}

.workflow-node.is-dragging header {
  cursor: grabbing;
}

.workflow-port {
  position: absolute;
  z-index: 8;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  padding: 0;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px currentColor, 0 3px 8px rgba(35, 43, 58, 0.24);
  cursor: crosshair;
  touch-action: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.workflow-port:hover,
.workflow-port.is-connecting,
.workflow-port.is-compatible {
  transform: translateY(-50%) scale(1.28);
  box-shadow: 0 0 0 3px currentColor, 0 4px 12px rgba(35, 43, 58, 0.3);
}

.workflow-port.green {
  color: #29ad75;
  background: #29ad75;
}

.workflow-port.blue {
  color: #4d7cff;
  background: #4d7cff;
}

.workflow-port-input { left: -8px; }
.workflow-port-output { right: -8px; }
.input-image-port { top: 46%; }
.input-skill-port { top: 72%; }
.model-input-port,
.model-output-port { top: 58%; }
.analysis-input-port,
.analysis-output-port { top: 52%; }
.output-model-port { top: 46%; }
.output-skill-port { top: 66%; }
.workflow-node header span {
  font-size: 13px;
  font-weight: 900;
}

.workflow-node header i {
  border-radius: 999px;
  padding: 3px 7px;
  color: #348364;
  background: #e6f6ee;
  font-size: 10px;
  font-style: normal;
}

.workflow-node label {
  display: block;
  margin: 12px 14px 6px;
  color: #6f7787;
  font-size: 10px;
  font-weight: 800;
}

.workflow-input-node {
  left: 60px;
  top: 105px;
  width: 280px;
  height: 500px;
}

.workflow-image-preview {
  width: calc(100% - 28px);
  height: 170px;
  margin: 14px 14px 0;
  border: 1px dashed #bbc2cf;
  border-radius: 6px;
  color: #7c8493;
  background-color: #f1f3f7;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.workflow-image-preview.has-image span {
  display: none;
}

.workflow-input-image { position: relative; margin: 14px 14px 0; }
.workflow-input-image .workflow-image-preview { display: block; width: 100%; margin: 0; }
.workflow-input-remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #e0e3eb; border-radius: 50%; background: #fff; color: #697386; box-shadow: 0 2px 6px #25304a16; font-size: 20px; line-height: 1; cursor: pointer; }
.workflow-input-remove:hover { color: #d04e59; background: #fff5f5; }
.workflow-input-remove:focus-visible { outline: 2px solid #8060ff; outline-offset: 2px; }
.workflow-image-preview:not(.has-image) + .workflow-input-remove { display: none; }

.workflow-input-node textarea {
  width: calc(100% - 28px);
  height: 196px;
  margin: 0 14px;
  border: 1px solid #d8dce4;
  border-radius: 6px;
  resize: none;
  padding: 10px;
  color: #343b48;
  background: #fff;
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
}

.workflow-model-node {
  left: 480px;
  top: 105px;
  width: 320px;
  min-height: 220px;
}

.workflow-model-node select {
  width: calc(100% - 28px);
  height: 38px;
  margin: 0 14px;
  border: 1px solid #d8dce4;
  border-radius: 6px;
  padding: 0 9px;
  color: #252b36;
  background: #fff;
}

.workflow-model-status {
  margin: 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  color: #4d5564;
  background: #f2f5fa;
  font-size: 11px;
}

.workflow-model-status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #29ad75;
  box-shadow: 0 0 0 4px rgba(41, 173, 117, 0.14);
}

.workflow-analysis-node {
  left: 480px;
  top: 350px;
  width: 320px;
  min-height: 310px;
}

.workflow-analysis-node > strong {
  display: block;
  margin: 12px 14px 9px;
  font-size: 13px;
}

.workflow-skill-upload {
  width: calc(100% - 28px);
  min-height: 62px;
  margin: 0 14px 10px;
  border: 1px dashed #9eb5ec;
  border-radius: 7px;
  display: grid;
  place-content: center;
  gap: 3px;
  color: #315bba;
  background: #f5f8ff;
  cursor: pointer;
}

.workflow-skill-upload:hover,
.workflow-skill-upload.is-dragging {
  border-color: #6f49e8;
  background: #f1edff;
}

.workflow-skill-upload b { font-size: 11px; }
.workflow-skill-upload small { color: #77849c; font-size: 9px; }

.workflow-skill-document {
  margin: 0 14px 10px;
  min-height: 50px;
  border: 1px solid #dce3f0;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  background: #f7f9fc;
}

.workflow-skill-document[hidden] { display: none; }

.workflow-skill-file-icon {
  width: 30px;
  height: 34px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #6f49e8;
  font-size: 12px;
  font-weight: 800;
}

.workflow-skill-file-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workflow-skill-file-meta b,
.workflow-skill-file-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-skill-file-meta b { color: #303746; font-size: 10px; }
.workflow-skill-file-meta small { color: #778195; font-size: 9px; }

.workflow-skill-document > button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  color: #687286;
  background: #e9edf4;
  cursor: pointer;
  font-size: 15px;
}

.workflow-analysis {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px 14px;
}

.workflow-analysis span {
  border: 1px solid #dce1ea;
  border-radius: 5px;
  padding: 6px 8px;
  color: #555e6e;
  background: #f7f8fb;
  font-size: 10px;
}

.workflow-output-node {
  left: 940px;
  top: 105px;
  width: 280px;
  min-height: 500px;
}

.workflow-size-default {
  padding: 14px 14px 8px;
}

.workflow-size-default button {
  width: 100%;
  min-height: 54px;
  border: 1px solid #d8dce5;
  border-radius: 7px;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  color: #303746;
  background: #f7f8fb;
  cursor: pointer;
  text-align: left;
}

.workflow-size-default button.active,
.workflow-aspect-grid button.active {
  border-color: #7652ee;
  color: #5c3bd4;
  background: #f1edff;
  box-shadow: 0 0 0 1px rgba(118, 82, 238, 0.14);
}

.workflow-size-default b { font-size: 12px; }
.workflow-size-default small { color: #758096; font-size: 9px; }

.workflow-aspect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 14px 9px;
}

.workflow-aspect-grid button {
  min-width: 0;
  height: 62px;
  border: 1px solid #dce0e8;
  border-radius: 6px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 4px;
  color: #3b4351;
  background: #fafbfc;
  cursor: pointer;
}

.workflow-aspect-grid i {
  width: 18px;
  max-height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  aspect-ratio: var(--rw) / var(--rh);
  font-style: normal;
}

.workflow-aspect-grid b { font-size: 9px; }
.workflow-aspect-grid small { color: #7f8796; font-size: 7px; white-space: nowrap; }

.workflow-size-hint {
  min-height: 28px;
  margin: 0 14px 8px;
  color: #717a8c;
  font-size: 9px;
  line-height: 1.45;
}

.workflow-result-node {
  width: var(--workflow-result-width, 420px);
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.workflow-result-node.is-selected {
  z-index: 20;
}

.workflow-result-node.is-selected .workflow-result-preview {
  outline: 2px solid #2f80ed;
  outline-offset: 0;
}

.workflow-result-selection-ui {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.workflow-result-node.is-selected .workflow-result-selection-ui {
  display: block;
}

.workflow-result-selection-labels {
  position: absolute;
  left: 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #2f80ed;
  font-size: 13px;
  line-height: 20px;
  pointer-events: none;
  white-space: nowrap;
}

.workflow-result-selection-labels span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-result-selection-labels span:last-child {
  flex-shrink: 0;
}

.workflow-result-toolbar {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border: 1px solid #e2e5eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(35, 43, 64, 0.16);
  pointer-events: auto;
  white-space: nowrap;
  overflow-x: auto;
}

.workflow-selection-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.workflow-selection-overlay[hidden] { display: none; }

.workflow-result-toolbar button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  color: #3d4656;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}
.workflow-result-toolbar button:disabled { opacity: .5; cursor: progress; }
.workflow-action-hd { border: 1.25px solid currentColor; border-radius: 3px; letter-spacing: -.35px; }
.workflow-upscale-menu {
  position: fixed;
  z-index: 900;
  display: grid;
  width: 188px;
  padding: 6px;
  border: 1px solid #e3e5ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(25, 31, 45, .18);
}
.workflow-upscale-menu button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  color: #30343d;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.workflow-upscale-menu button:hover:not(:disabled),
.workflow-upscale-menu button:focus-visible:not(:disabled) { background: #f2efff; color: #6f4be8; outline: none; }
.workflow-upscale-menu button:disabled { color: #b2b5bd; cursor: not-allowed; }
.workflow-upscale-menu b { font-size: 13px; }
.workflow-upscale-menu small { overflow: hidden; color: #8a8e98; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-upscale-menu span { color: #7c808a; font-size: 11px; white-space: nowrap; }
#workflowChooseSkill { border: 0; border-radius: 5px; background: #eee8ff; color: #7652ee; padding: 3px 7px; font-size: 11px; cursor: pointer; }
.project-chat-references { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.project-chat-references button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #ddd; border-radius: 6px; padding: 3px 5px; background: white; font-size: 12px; cursor: pointer; }
.project-chat-references img { width: 40px; height: 40px; object-fit: contain; }
.workflow-result-node.is-cutout .workflow-result-preview {
  background-color: #fff;
  background-image: conic-gradient(#e8eaf0 25%, transparent 0 50%, #e8eaf0 0 75%, transparent 0);
  background-size: 24px 24px;
}

.workflow-action-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #697386;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.workflow-action-icon.workflow-action-hd {
  box-sizing: border-box;
  width: 16px;
  height: 13px;
  font-size: 6.5px;
  font-weight: 700;
  line-height: 11px;
}

.workflow-result-toolbar button:hover .workflow-action-icon,
.workflow-result-toolbar button:focus-visible .workflow-action-icon {
  color: #7652ee;
}

.workflow-result-toolbar button:hover,
.workflow-result-toolbar button:focus-visible {
  color: #7652ee;
  background: #f0edff;
  outline: none;
}

.workflow-result-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #2f80ed;
  border-radius: 1px;
  background: #fff;
  pointer-events: none;
}

.workflow-result-handle.handle-tl { top: -5px; left: -5px; }
.workflow-result-handle.handle-tr { top: -5px; right: -5px; }
.workflow-result-handle.handle-bl { bottom: -5px; left: -5px; }
.workflow-result-handle.handle-br { right: -5px; bottom: -5px; }

.workflow-result-node > header {
  display: none;
}

.workflow-result-node.is-new {
  box-shadow: none;
}

.workflow-result-preview {
  position: relative;
  height: var(--workflow-result-preview-height, 460px);
  min-height: 0;
  max-height: none;
  margin: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  color: #71798a;
  background: transparent;
  cursor: pointer;
  touch-action: auto;
}

.workflow-result-node.is-loading .workflow-result-preview {
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  background: #aeb7c6;
  color: #fff;
  cursor: progress;
}
.workflow-result-node.is-loading .workflow-result-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.08) 60%, transparent 70%);
  transform: translateX(-120%);
  animation: workflow-generation-sweep 2.2s linear infinite;
  pointer-events: none;
}
.workflow-result-loading {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 10px;
  width: max-content;
  zoom: var(--workflow-inverse-zoom, 1);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.workflow-result-loading small { font-size: 14px; }
@keyframes workflow-generation-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-result-node.is-loading .workflow-result-preview::after {
    animation: none;
    background: none;
  }
}

.workflow-result-node .workflow-result-meta {
  display: none;
}

.workflow-result-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.workflow-result-node.is-selected .workflow-result-preview,
.workflow-result-node.is-selected .workflow-result-preview img {
  cursor: default;
}

.workflow-result-preview > button {
  position: absolute;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.workflow-viewport > .workflow-process-trigger {
  position: absolute;
  z-index: 31;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: rgba(32, 36, 48, 0.72);
  box-shadow: 0 3px 10px rgba(20, 24, 36, 0.2);
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
}

.workflow-process-trigger[hidden] { display: none; }

.workflow-process-trigger:hover,
.workflow-process-trigger:focus-visible {
  border-color: #fff;
  background: #7652ee;
  outline: 2px solid rgba(118, 82, 238, 0.3);
}

.workflow-result-preview > button {
  cursor: pointer;
  font-size: 9px;
}

.workflow-result-preview small {
  max-width: 240px;
  text-align: center;
  line-height: 1.45;
}

.workflow-result-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #d7dbea;
  border-top-color: #7652ee;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.workflow-result-meta {
  display: grid;
  gap: 3px;
  padding: 0 14px 14px;
}

.workflow-result-meta strong { font-size: 12px; }
.workflow-result-meta span { color: #7b8392; font-size: 9px; }
.workflow-result-node.is-error header i { color: #a94848; background: #fdeaea; }
.workflow-result-node.is-error .workflow-result-preview { color: #a94848; background: #fff3f3; }

.workflow-minimap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2600;
  width: 200px;
  padding: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 16px rgba(35, 43, 64, 0.08);
}
.workflow-minimap canvas {
  display: block;
  width: 100%;
  height: 112px;
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
}
.workflow-minimap canvas:active { cursor: grabbing; }
.workflow-minimap canvas:focus-visible { outline: 2px solid #6396df; outline-offset: 2px; }

.workflow-context-menu {
  position: fixed;
  z-index: 2700;
  width: 220px;
  padding: 6px;
  border: 1px solid #e9e9ec;
  border-radius: 12px;
  background: #fff;
  color: #303136;
  box-shadow: 0 8px 24px rgba(25, 30, 45, 0.1);
}
.workflow-context-menu[hidden] { display: none; }
.workflow-context-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.workflow-context-menu button:hover,
.workflow-context-menu button:focus-visible { background: #f2f3f6; outline: none; }
.workflow-context-menu button span { margin-left: 8px; color: #a7a8ad; font-size: 12px; }
.workflow-context-menu hr { height: 1px; margin: 4px 8px; border: 0; background: #ededf0; }
#workflowContextHint { margin: 6px 8px; color: #70798a; font-size: 12px; line-height: 1.5; }
.workflow-media-node { overflow: hidden; }
.workflow-media-node > header { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; cursor: grab; }
.workflow-media-node video { display: block; width: 100%; background: #191b20; }

.workflow-quick-edit {
  position: fixed;
  z-index: 2490;
  width: min(480px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid #e1e4eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(35, 43, 64, 0.1);
}
.workflow-quick-edit[hidden] { display: none; }
.workflow-quick-edit textarea {
  display: block;
  width: 100%;
  padding: 0 20px 0 0;
  border: 0;
  outline: none;
  resize: none;
  color: #384257;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
}
.workflow-quick-edit-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: #70798a;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.workflow-quick-edit-close:hover { background: #f0edff; }
.workflow-quick-edit-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.workflow-quick-edit-footer span { color: #8a92a1; font-size: 11px; }
.workflow-quick-edit-footer button {
  border: 0;
  border-radius: 8px;
  padding: 8px 15px;
  color: #fff;
  background: #7652ee;
  font-size: 13px;
  cursor: pointer;
}
.workflow-quick-edit-footer button:disabled { color: #969ba5; background: #f0f1f4; cursor: default; }
#workflowQuickEditStatus { margin: 6px 0 0; color: #70798a; font-size: 12px; line-height: 1.5; }
#workflowQuickEditStatus:empty { display: none; }
#workflowQuickEditStatus.is-error { color: #c63f45; }

.workflow-creation-process {
  position: fixed;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 2500;
  width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: hidden;
  color: #273040;
  background: #fff;
  border: 1px solid #e1e4eb;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(35, 43, 64, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.workflow-creation-process.open {
  opacity: 1;
  pointer-events: auto;
}

.workflow-creation-process-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #eceef3;
}

.workflow-creation-process-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.workflow-creation-process-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.workflow-creation-process-thumb {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  background: #eef1f6 center / cover no-repeat;
}

.workflow-creation-process-actions button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  color: #687286;
  background: #f4f5f8;
  font-size: 20px;
  cursor: pointer;
}

.workflow-creation-process-actions button:hover,
.workflow-creation-process-actions button:focus-visible {
  color: #7652ee;
  background: #eeeaff;
  outline: none;
}

.workflow-creation-process-body {
  max-height: calc(100vh - 82px);
  overflow: auto;
  padding: 14px;
}

.workflow-process-block {
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eceef3;
}

.workflow-process-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.workflow-process-block small {
  display: block;
  margin-bottom: 7px;
  color: #8a92a1;
  font-size: 11px;
}

.workflow-process-block p {
  max-height: 190px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #384257;
  font-size: 13px;
  line-height: 1.65;
}

.workflow-process-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.workflow-process-tags span {
  padding: 4px 8px;
  border-radius: 6px;
  color: #70798a;
  background: #f0f1f5;
  font-size: 11px;
}

.workflow-process-reference > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 42px;
  color: #8a92a1;
  font-size: 12px;
}

.workflow-process-reference img {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  border: 1px solid #e4e7ee;
  border-radius: 8px;
  background: #f5f6f8;
}

body.workflow-process-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .workflow-creation-process { transition: none; }
}

.workflow-output-preview {
  height: 330px;
  margin: 14px;
  border-radius: 6px;
  background-color: #e9ecf2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.workflow-output-meta {
  display: grid;
  gap: 3px;
  padding: 0 14px 12px;
}

.workflow-output-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.workflow-output-meta span {
  color: #7b8392;
  font-size: 10px;
}

.workflow-generate {
  width: calc(100% - 28px);
  min-height: 36px;
  margin: 0 14px 14px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #7652ee;
  font-weight: 900;
  cursor: pointer;
}

.workflow-generate:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 820px) {
  .workflow-header {
    padding: 0 8px;
  }

  .workflow-kicker,
  #workflowFit {
    display: none;
  }
}

.model-info {
  padding: 12px 12px 8px;
  display: grid;
  gap: 5px;
}

.model-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-info small,
.model-stats {
  color: var(--muted);
  font-size: 12px;
}

.draft-drop.local-edit-ready {
  cursor: crosshair;
}

.local-mask-entry {
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: #fff;
  background: #303139;
  font-weight: 800;
  cursor: pointer;
}

.local-mask-entry.has-mask {
  border-color: rgba(132, 87, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(132, 87, 255, 0.3);
}

.local-mask-entry[hidden] {
  display: none;
}

.local-mask-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.local-mask-modal.open {
  display: flex;
}

.local-mask-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 11, 0.82);
  backdrop-filter: blur(9px);
}

.local-mask-panel {
  position: relative;
  width: min(1000px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  color: var(--text);
  background: #18191f;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.local-mask-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.local-mask-header h2 {
  margin: 0;
  font-size: 16px;
}

.local-mask-header > div {
  display: flex;
  gap: 8px;
}

.local-mask-header button {
  min-height: 34px;
  padding: 0 14px;
}

.local-mask-editor {
  position: relative;
  height: min(650px, calc(100vh - 155px));
  min-height: 420px;
  padding: 12px 12px 12px 66px;
  background-color: #111217;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 12px 12px;
}

.local-mask-tools {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  width: 44px;
  display: grid;
  gap: 5px;
}

.local-mask-tools > button,
.local-mask-zoom button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: #30323a;
  font-size: 17px;
  cursor: pointer;
}

.local-mask-tools > button.active {
  border-color: transparent;
  background: var(--purple);
}

.local-mask-size {
  width: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 4px;
  color: var(--muted);
  background: #30323a;
  font-size: 9px;
  text-align: center;
}

.local-mask-size input {
  width: 92px;
  margin: 38px -24px;
  transform: rotate(-90deg);
}

.local-mask-size output {
  color: #fff;
  font-size: 11px;
}

.local-mask-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.local-mask-canvas-wrap {
  position: relative;
  flex: 0 0 auto;
  transform: translate(var(--mask-pan-x, 0), var(--mask-pan-y, 0)) scale(var(--mask-zoom, 1));
  transform-origin: center;
  will-change: transform;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 40px rgba(0, 0, 0, 0.4);
}

.local-mask-canvas-wrap img,
.local-mask-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.local-mask-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;
}

.local-mask-zoom {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 7px;
  background: rgba(36, 38, 45, 0.9);
  transform: translateX(-50%);
}

.local-mask-zoom button {
  width: 28px;
  height: 28px;
}

.local-mask-zoom output {
  min-width: 48px;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.local-mask-footer {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 720px) {
  .local-mask-modal { padding: 8px; }
  .local-mask-panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .local-mask-header { align-items: flex-start; }
  .local-mask-header h2 { font-size: 14px; }
  .local-mask-header button { padding: 0 9px; }
  .local-mask-editor { min-height: 360px; padding-left: 60px; }
}

.model-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 12px;
}

.inspector {
  position: sticky;
  top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.selected-cover {
  min-height: 170px;
  background-color: #242834;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

.selected-body,
.mode-tabs,
.field,
.actions,
.resource-block {
  padding: 14px;
}

.mode-tabs,
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.field textarea {
  resize: vertical;
}

.primary,
.secondary {
  min-height: 40px;
  padding: 0 15px;
}

.secondary {
  color: #fff;
  font-weight: 800;
}

pre {
  margin: 0 14px 14px;
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: #e7ebf4;
  background: #101217;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.chips,
.resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip,
.resource {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-size: 12px;
}

.resource.image {
  border-color: rgba(39, 198, 191, 0.35);
  color: #a8f4ef;
}

.resource.script {
  border-color: rgba(240, 184, 76, 0.45);
  color: #ffe0a1;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--text);
  background: rgba(23, 25, 31, 0.92);
  box-shadow: var(--shadow);
}
.toast[hidden] { display: none; }

.creator-modal {
  position: fixed;
  inset: 0 0 0 var(--rail-width);
  z-index: 20;
  display: none;
}

.creator-modal.open {
  display: block;
}

.upscale-modal {
  z-index: 24;
  color: var(--text);
  background: #111217;
}

.upscale-workspace {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 260px;
  min-width: 0;
  min-height: 0;
  background: #111217;
}

.line-workspace {
  grid-template-columns: 286px minmax(0, 1fr) 260px;
}

.upscale-controls,
.upscale-history-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow-y: auto;
  background: #1b1d24;
}

.upscale-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--line);
  padding: 12px;
}

.upscale-titlebar,
.upscale-block-title,
.upscale-history-panel header,
.upscale-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.upscale-titlebar {
  min-height: 46px;
}

.upscale-titlebar div {
  display: grid;
  gap: 4px;
}

.upscale-titlebar span,
.upscale-control-block small,
.upscale-empty span,
.upscale-loading span {
  color: var(--muted);
  font-size: 12px;
}

.upscale-control-block {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #23252d;
}

.upscale-control-block label {
  font-size: 13px;
  font-weight: 800;
}

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

.upscale-segments button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #191b21;
  font-weight: 800;
}

.upscale-segments button.active {
  border-color: var(--purple);
  color: #fff;
  background: var(--purple);
}

.upscale-drop {
  position: relative;
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  border: 1px dashed #50535f;
  border-radius: 8px;
  cursor: pointer;
  background: #1c1e25;
}

.upscale-drop:focus-visible,
.upscale-drop.is-dragging {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.upscale-input-preview {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.upscale-drop.has-image .upscale-upload-icon,
.upscale-drop.has-image strong,
.upscale-drop.has-image small {
  opacity: 0;
}

.upscale-upload-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #565965;
  border-radius: 7px;
  font-size: 25px;
  background: #2d3039;
}

.upscale-control-block input[type="range"] {
  width: 100%;
  accent-color: var(--purple);
}

.upscale-scale-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}

.upscale-controls .generate-button {
  margin-top: auto;
}

.upscale-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 44px minmax(0, 1fr);
  background: #111217;
}

.upscale-stage-toolbar {
  border-bottom: 1px solid var(--line);
  padding: 0 18px;
  font-size: 13px;
}

.upscale-canvas {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background-color: #0f1014;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.upscale-canvas img {
  display: block;
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  transform: scale(var(--upscale-zoom, 1));
  transform-origin: center;
  transition: transform 120ms ease;
}

.upscale-empty,
.upscale-loading {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
}

.upscale-empty[hidden],
.upscale-loading[hidden],
.upscale-canvas img[hidden],
.upscale-control-block button[hidden] {
  display: none;
}

.render-empty {
  align-content: center;
  justify-items: center;
}

.render-guide-image {
  display: block;
  width: min(320px, 62vw);
  max-width: 100%;
  max-height: min(300px, 38vh);
  margin-top: 36px;
  border: 1px solid #393c47;
  border-radius: 8px;
  object-fit: contain;
}

.upscale-loading i {
  width: 38px;
  height: 38px;
  border: 3px solid #444753;
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 850ms linear infinite;
}

.upscale-history-panel {
  border-left: 1px solid var(--line);
}

.upscale-history-panel header {
  height: 44px;
  border-bottom: 2px solid var(--purple);
  padding: 0 14px;
}

.upscale-history-panel .history-filter {
  padding: 10px;
}

.upscale-history {
  display: grid;
  gap: 10px;
  padding: 0 10px 16px;
}

.upscale-history-card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #292c34 center / contain no-repeat;
  cursor: pointer;
}

.upscale-history-card span {
  position: absolute;
  inset: auto 6px 6px;
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 6px;
  color: #fff;
  background: rgba(10, 11, 14, .78);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upscale-history-card.is-pending {
  display: grid;
  place-items: center;
  cursor: default;
}

.upscale-history-card.is-pending::before {
  content: "";
  width: 30px;
  height: 30px;
  border: 3px solid #4b4e59;
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 850ms linear infinite;
}

.upscale-history-empty {
  padding: 44px 10px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.line-model-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #23252d;
}

.line-model-card > div:last-child {
  display: grid;
  gap: 5px;
}

.line-model-card span,
.line-toggle-row span {
  color: var(--muted);
  font-size: 11px;
}

.line-model-thumb {
  display: grid;
  height: 58px;
  place-items: center;
  border-radius: 7px;
  color: #434754;
  background: linear-gradient(135deg, #fafafa, #c9cbd2);
  font-size: 28px;
  font-weight: 900;
}

.line-drop {
  min-height: 122px;
}

.line-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
}

.line-toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.line-toggle-row > div {
  display: grid;
  gap: 4px;
}

.switch-control {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
}

.switch-control input {
  position: absolute;
  opacity: 0;
}

.switch-control span {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #4a4d57;
  transition: background 160ms ease;
}

.switch-control span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.switch-control input:checked + span {
  background: var(--purple);
}

.switch-control input:checked + span::after {
  transform: translateX(18px);
}

.line-results {
  display: grid;
  width: 86%;
  height: 86%;
  grid-template-columns: repeat(var(--line-count, 1), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 12px;
  transform: scale(var(--line-zoom, 1));
  transform-origin: center;
  transition: transform 120ms ease;
}

.line-results[hidden] {
  display: none;
}

.line-results img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #fff;
}

.render-workspace {
  grid-template-columns: 300px minmax(0, 1fr) 260px;
}

.render-controls {
  gap: 12px;
}

.render-mode {
  flex: 0 0 auto;
}

.render-control-section {
  display: grid;
  gap: 8px;
}

.render-control-section > label,
.render-control-section .upscale-block-title label {
  font-size: 13px;
  font-weight: 800;
}

.render-style-card {
  display: grid;
  min-height: 68px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  color: var(--text);
  background: #272a33;
  text-align: left;
}

.render-style-card:hover {
  border-color: var(--purple);
}

.render-style-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.render-style-card strong,
.render-style-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.render-style-card small {
  color: var(--muted);
  font-size: 11px;
}

.render-style-thumb {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #7654df, #35b8ba);
  background-position: center;
  background-size: cover;
  font-weight: 900;
}

.render-drop {
  min-height: 150px;
}

.render-range-block input[type="range"] {
  width: 100%;
  accent-color: var(--purple);
}

.render-range-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.render-range-labels span:last-child {
  text-align: right;
}

.render-range-labels output {
  color: #fff;
  font-weight: 800;
}

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

.render-quality button {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 5px 2px;
}

.render-quality button small {
  color: inherit;
  font-size: 10px;
}

.render-results {
  width: 88%;
  height: 88%;
}

.render-results img {
  background: transparent;
}

.render-compare {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
}

.render-compare > img,
.render-compare-after,
.render-compare-after img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.render-compare-after {
  z-index: 0;
}

.render-compare-before {
  z-index: 1;
  opacity: 0;
  clip-path: inset(0 calc(100% - var(--compare-position, 50%)) 0 0);
}

.render-compare:hover .render-compare-before {
  opacity: 1;
  clip-path: inset(0 calc(100% - var(--compare-position, 50%)) 0 0);
}

.render-compare-divider {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: var(--compare-position, 50%);
  width: 2px;
  z-index: 2;
  opacity: 0;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .24), 0 0 14px rgba(0, 0, 0, .4);
  transform: translateX(-1px);
  transition: opacity 120ms ease;
  pointer-events: none;
}

.render-compare:hover .render-compare-divider {
  opacity: 1;
}

.render-compare-divider i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: rgba(17, 18, 23, .82);
  font-style: normal;
  font-size: 14px;
  transform: translate(-50%, -50%);
}

.render-compare-label {
  position: absolute;
  bottom: 10px;
  z-index: 2;
  opacity: 0;
  border-radius: 6px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(13, 14, 18, .78);
  font-size: 11px;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.render-compare:hover .render-compare-label {
  opacity: 1;
}

.render-compare-label.before {
  left: 10px;
}

.render-compare-label.after {
  right: 10px;
}

.render-single-result {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.render-style-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
}

.render-style-modal.open {
  display: block;
}

.render-style-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, .82);
  backdrop-filter: blur(7px);
}

.render-style-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(980px, calc(100vw - 64px));
  max-height: min(680px, calc(100vh - 70px));
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #3b3e48;
  border-radius: 8px;
  background: #1a1c22;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%);
}

.render-style-panel > header,
.render-style-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
}

.render-style-panel > header {
  border-bottom: 1px solid var(--line);
}

.render-style-panel h2 {
  margin: 0;
  font-size: 17px;
}

.render-style-tools {
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.render-style-tools input {
  width: min(260px, 100%);
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--text);
  background: #111318;
}

.render-style-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.render-style-filters button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 13px;
  color: var(--muted);
  background: #20222a;
}

.render-style-filters button.active {
  border-color: var(--purple);
  color: #fff;
  background: var(--purple);
}

.render-style-grid {
  display: grid;
  min-height: 180px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 8px 16px 18px;
}

.render-style-option {
  display: grid;
  min-width: 0;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 0 9px;
  color: var(--text);
  background: #23252c;
  text-align: left;
}

.render-style-option:hover,
.render-style-option.active {
  border-color: var(--purple);
  box-shadow: inset 0 0 0 1px var(--purple);
}

.render-style-option-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / .82;
  background-position: center;
  background-size: cover;
}

.render-style-option > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 0 9px;
}

.render-style-option strong,
.render-style-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.render-style-option small {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 1180px) {
  .render-workspace {
    grid-template-columns: 280px minmax(0, 1fr) 220px;
  }

  .render-style-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: none;
}

.detail-modal.open {
  display: block;
}

.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 14, 18, 0.92);
  backdrop-filter: blur(6px);
}

.detail-panel {
  position: absolute;
  inset: 58px 9vw 36px;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 380px;
  gap: 18px;
  min-height: 0;
}

.detail-preview {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px;
}

.detail-image {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: #0f1014;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.025) 25%, transparent 25%);
}

.detail-image.is-clickable {
  cursor: zoom-in;
}

.detail-tags {
  display: flex;
  gap: 8px;
}

.detail-tags span {
  min-height: 26px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  background: #20232b;
  font-size: 12px;
}

.detail-comments {
  min-height: 120px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  align-content: start;
  gap: 18px;
  padding-top: 16px;
}

.detail-info {
  position: relative;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #181a20;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(100px, auto) auto;
  gap: 14px;
  padding: 18px;
}

.detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.detail-author-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-right: 40px;
}

.detail-author-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-title-row h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-edit-input {
  width: 100%;
  border: 1px solid var(--purple);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: #20232b;
  font: inherit;
  outline: none;
}

.detail-edit-prompt {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
  font-size: 13px;
}

.detail-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  font-size: 11px;
  font-weight: 900;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.detail-block,
.detail-specs {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.detail-block-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

#detailPrompt {
  max-height: 180px;
  overflow: auto;
  border-radius: 10px;
  padding: 12px;
  color: var(--text);
  background: #20232b;
  line-height: 1.65;
  font-size: 13px;
}

.detail-ref-list,
.detail-thumbs {
  display: grid;
  gap: 8px;
}

.detail-ref {
  min-height: 66px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: #24262d;
  text-align: left;
  padding: 8px;
}

.detail-ref-cover {
  width: 74px;
  height: 50px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #30333b;
}

.detail-ref strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-ref small {
  color: var(--muted);
}

.detail-specs {
  display: grid;
  gap: 10px;
}

.detail-specs div {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}

.detail-specs strong {
  color: var(--text);
}

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

.detail-thumbs button {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #24262d;
}

.detail-actions {
  position: sticky;
  bottom: -18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 2px;
  background: #181a20;
}

.detail-actions button {
  min-height: 44px;
}

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: none;
}

.image-preview-modal.open {
  display: block;
}

.image-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.88);
  backdrop-filter: blur(8px);
}

.image-preview-panel {
  position: absolute;
  inset: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.image-preview-canvas {
  width: min(92vw, 1280px);
  height: min(86vh, 960px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background-color: #0f1014;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.035) 75%);
  background-size: 34px 34px, 34px 34px, 34px 34px, 34px 34px;
  background-position: 0 0, 0 17px, 17px -17px, -17px 0;
  background-repeat: repeat;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
  transform-origin: center;
  transition: transform 120ms ease-out;
  will-change: transform;
}

.image-preview-canvas[style*="url"] {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.image-preview-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.creator-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #111216;
  box-shadow: none;
}

.workspace-panel {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  min-height: 100vh;
}

.modal-cover {
  width: 96px;
  height: 72px;
  border-radius: 8px;
  background-color: #242834;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 24px;
  line-height: 1;
}

.workspace-left,
.workspace-history {
  min-height: 0;
  overflow: auto;
  background: #1d1f25;
}

.workspace-left {
  border-right: 1px solid var(--line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-history {
  border-left: 1px solid var(--line);
}

.workspace-title {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 10px;
}

.workspace-title span,
.section-label,
.prompt-count,
.history-title span {
  color: var(--muted);
  font-size: 12px;
}

.workspace-title strong {
  display: block;
  margin-top: 4px;
}

.left-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #24262d;
}

.left-section.compact {
  padding: 10px 12px;
}

.section-title-row,
.range-row,
.count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.section-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  color: #dfe5ef;
}

.skill-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.selected-skill-row {
  min-height: 72px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #30333b;
}

.skill-row-cover {
  width: 72px;
  height: 56px;
  border-radius: 8px;
  background-color: #1a1c22;
  background-size: cover;
  background-position: center;
}

.selected-skill-row strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}

.selected-skill-row span,
.selected-skill-row output {
  color: var(--muted);
  font-size: 12px;
}

.empty-skill-reference {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  background: #24262d;
}

.empty-skill-reference strong {
  font-size: 13px;
}

.empty-skill-reference span {
  color: var(--muted);
  font-size: 11px;
}

.remove-skill-reference {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #24262d;
}

.remove-skill-reference:hover {
  color: #fff;
  border-color: rgba(255, 124, 124, 0.58);
}

.style-model-picker {
  max-height: 230px;
  margin-top: 8px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #17191f;
}

.style-model-picker[hidden] {
  display: none;
}

.style-model-option {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  padding: 5px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.style-model-option:hover {
  background: #30333b;
}

.style-model-option-cover {
  width: 44px;
  height: 40px;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
}

.style-model-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.style-model-option small {
  color: var(--muted);
  font-size: 10px;
}

.wide {
  width: 100%;
}

.tiny-button,
.mini-select {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #fff;
  background: #30333b;
  padding: 0 8px;
  font-size: 12px;
}

.positive-prompt {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  background: #191b20;
  outline: none;
  line-height: 1.55;
}

.prompt-count {
  margin-top: 6px;
  text-align: right;
}

.draft-drop {
  position: relative;
  min-height: 150px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #191b20;
  display: grid;
  grid-template-rows: auto auto auto;
  place-items: center;
  gap: 8px;
  text-align: center;
  color: var(--text);
  padding: 18px 10px;
}

.draft-drop.paste-ready {
  border-color: rgba(130, 87, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(130, 87, 255, 0.16);
}

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

.draft-file-input {
  display: none;
}

.draft-preview {
  display: none;
  width: 132px;
  height: 96px;
  border-radius: 8px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.draft-add {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  background: #30333b;
  font-size: 36px;
  line-height: 1;
}

.draft-remove {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #fff;
  background: rgba(38, 40, 47, 0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.draft-remove svg {
  width: 18px;
  height: 18px;
}

.draft-remove:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: #343740;
}

.draft-remove:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.draft-drop.has-image .draft-remove {
  display: grid;
}

.draft-drop.has-image .draft-add {
  display: none;
}

.draft-drop.tool-needs-image:not(.has-image) {
  border-color: rgba(130, 87, 255, 0.68);
  background: rgba(130, 87, 255, 0.06);
}

.draft-drop.has-image .draft-preview {
  display: block;
  width: 132px;
  height: 96px;
}

#referenceStrength {
  width: 100%;
  accent-color: var(--purple);
}

.count-row {
  justify-content: flex-start;
}

.count-row input {
  width: 70px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #191b20;
  text-align: center;
}

.count-step {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #30333b;
}

.generate-button {
  margin-top: auto;
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  color: #1d130c;
  font-weight: 900;
  background: #ffd8bd;
}

.generate-button:disabled {
  cursor: wait;
  opacity: 0.78;
}

.workspace-stage {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) 74px;
  background: #131419;
}

.stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.view-toggle {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #24262d;
}

.view-toggle.active {
  color: #fff;
  background: var(--purple);
}

.generation-stage {
  min-height: 0;
  margin: 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  align-self: center;
  display: grid;
  background-color: #0f1014;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.025) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.025) 75%);
  background-size: 34px 34px;
  background-position: 0 0, 0 17px, 17px -17px, -17px 0;
}

.generation-stage.count-1 {
  aspect-ratio: 1.55;
  max-height: calc(100vh - 160px);
}

.generation-stage.count-2,
.generation-stage.count-4 {
  grid-template-columns: repeat(2, 1fr);
  aspect-ratio: 1.55;
  max-height: calc(100vh - 160px);
}

.generation-stage.count-3 {
  grid-template-columns: repeat(3, 1fr);
  aspect-ratio: 2.1;
}

.generation-slot {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 14px;
}

.generation-image-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: transform 120ms ease-out;
  will-change: transform;
}

.generation-stage.is-loading {
  display: grid;
  place-items: center;
}

.generation-stage.has-error {
  display: grid;
  place-items: center;
}

.generation-stage.is-empty {
  display: block;
}

.stage-loading {
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--text);
  text-align: center;
}

.stage-error {
  width: min(520px, calc(100% - 48px));
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 183, 118, 0.34);
  border-radius: 10px;
  color: var(--text);
  background: rgba(24, 25, 31, 0.92);
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.stage-error strong {
  color: #ffd2ad;
  font-size: 16px;
}

.stage-error span,
.stage-error small {
  color: var(--muted);
  line-height: 1.6;
}

.stage-loading span,
.loading-note {
  color: var(--muted);
  font-size: 13px;
}

.spinner {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--purple);
  animation: spin 0.9s linear infinite;
}

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

.generation-slot:last-child {
  border-right: 0;
}

.generation-slot > span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.44);
  font-size: 12px;
}

.image-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(42, 42, 47, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.generation-slot:hover .image-actions,
.image-actions:focus-within {
  opacity: 1;
  transform: translateX(0);
}

.image-action-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 1;
}

.image-action-button:hover,
.download-action.is-open .download-trigger {
  color: #9b77ff;
  background: rgba(130, 87, 255, 0.16);
}

.download-action {
  position: relative;
}

.download-popover {
  position: absolute;
  top: -6px;
  right: 44px;
  width: 310px;
  display: none;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: var(--text);
  background: rgba(38, 38, 43, 0.98);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.42);
}

.download-action.is-open .download-popover {
  display: grid;
}

.download-popover strong {
  font-size: 14px;
}

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

.download-options button,
.download-popover-actions button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text);
  background: #323238;
  font-weight: 800;
}

.download-options button.selected {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px rgba(130, 87, 255, 0.35) inset;
}

.download-options small {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid rgba(184, 157, 255, 0.65);
  border-radius: 999px;
  color: #d8ccff;
  font-size: 10px;
}

.remove-bg-option {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #303036;
  font-weight: 800;
}

.remove-bg-option input {
  appearance: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #5b5c62;
  position: relative;
  cursor: pointer;
  transition: background 140ms ease;
}

.remove-bg-option input::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform 140ms ease;
}

.remove-bg-option input:checked {
  background: var(--purple);
}

.remove-bg-option input:checked::after {
  transform: translateX(18px);
}

.download-popover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.download-popover-actions .confirm-download {
  border: 0;
  background: var(--purple);
}

.stage-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.stage-thumb {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background-color: #24262d;
  background-size: cover;
  background-position: center;
}

.history-tabs {
  height: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.history-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.history-tab.active {
  color: #fff;
  border-bottom-color: var(--purple);
}

.history-filter {
  padding: 10px;
}

.history-list {
  display: grid;
  gap: 10px;
  padding: 0 10px 14px;
}

.history-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.history-empty-state strong {
  color: var(--text);
  font-size: 13px;
}

.history-empty-state span {
  max-width: 210px;
  font-size: 12px;
  line-height: 1.5;
}

.history-item {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.history-title {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.history-title strong {
  font-size: 13px;
}

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

.history-images.count-1 {
  grid-template-columns: 1fr;
}

.history-images.count-3,
.history-images.count-4 {
  grid-template-columns: repeat(2, 1fr);
}

.history-image {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #24262d;
  background-size: cover;
  background-position: center;
}

.history-item.is-pending .history-title strong::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(130, 87, 255, 0.18);
  animation: pulse 1.2s ease-in-out infinite;
}

.history-image.is-pending {
  position: relative;
  cursor: wait;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.12), rgba(255,255,255,0.05)),
    #24262d;
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.history-image.is-pending::after {
  content: "生成中";
  position: absolute;
  inset: auto 8px 8px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #d9d2ff;
  background: rgba(15, 16, 20, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.history-image.is-empty {
  cursor: default;
  background: #24262d;
}

.history-item.is-failed .history-image.is-pending::after {
  content: "失败";
  color: #ffcfcf;
}

.history-failure {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(239, 124, 124, 0.32);
  border-radius: 6px;
  background: rgba(103, 38, 45, 0.16);
}

.history-failure span {
  color: #f0bfc3;
  font-size: 11px;
  line-height: 1.45;
}

.history-retry {
  width: 100%;
  min-height: 30px;
  font-size: 12px;
}

.history-image:hover {
  border-color: rgba(130, 87, 255, 0.75);
}

@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1); }
}

.quality-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.aspect-ratio-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.aspect-ratio-selector button {
  min-width: 0;
  min-height: 66px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #191b20;
}

.aspect-ratio-selector .ratio-frame {
  display: block;
  width: 16px;
  height: 16px;
  border: 1.5px solid #9ca5b5;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.aspect-ratio-selector button[data-aspect="4:3"] .ratio-frame { width: 20px; height: 15px; }
.aspect-ratio-selector button[data-aspect="3:4"] .ratio-frame { width: 12px; height: 16px; }
.aspect-ratio-selector button[data-aspect="3:2"] .ratio-frame { width: 21px; height: 14px; }
.aspect-ratio-selector button[data-aspect="2:3"] .ratio-frame { width: 11px; height: 17px; }
.aspect-ratio-selector button[data-aspect="16:9"] .ratio-frame { width: 24px; height: 14px; }
.aspect-ratio-selector button[data-aspect="9:16"] .ratio-frame { width: 10px; height: 18px; }
.aspect-ratio-selector button[data-aspect="21:9"] .ratio-frame { width: 25px; height: 11px; }
.aspect-ratio-selector button[data-aspect="9:21"] .ratio-frame { width: 8px; height: 19px; }

.aspect-ratio-selector button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.aspect-ratio-selector button:disabled.active {
  opacity: 1;
  border-color: var(--accent);
}

.aspect-ratio-selector button strong {
  color: var(--text);
  font-size: 12px;
}

.aspect-ratio-selector button small {
  max-width: 100%;
  color: #aeb5c2;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
}

.aspect-ratio-selector button.active {
  border-color: var(--purple);
  color: #fff;
  background: rgba(130, 87, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(130, 87, 255, 0.35);
}

.aspect-ratio-selector button.active .ratio-frame {
  border-color: #bba8ff;
  background: rgba(139, 92, 246, 0.18);
}

.quality-selector button {
  min-width: 0;
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #191b20;
}

.quality-selector button strong {
  color: var(--text);
  font-size: 13px;
}

.quality-selector button small {
  color: #c4c9d4;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.quality-selector button span,
.cost-hint {
  color: var(--muted);
  font-size: 11px;
}

.quality-selector button.active {
  border-color: var(--purple);
  color: #fff;
  background: rgba(130, 87, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(130, 87, 255, 0.35);
}

.cost-hint {
  display: block;
  margin-top: 8px;
}

.wallet-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.wallet-modal.open {
  display: block;
}

.wallet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.78);
  backdrop-filter: blur(7px);
}

.wallet-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(780px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 22px;
  background: #17191f;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.wallet-header,
.wallet-summary,
.wallet-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wallet-header span,
.wallet-summary span,
.wallet-summary p,
.payment-notice,
.wallet-ledger-row span {
  color: var(--muted);
}

.wallet-header h2 {
  margin: 5px 0 0;
  font-size: 24px;
}

.wallet-summary {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(240, 184, 76, 0.28);
  border-radius: 8px;
  background: rgba(240, 184, 76, 0.07);
}

.wallet-summary strong {
  display: block;
  margin-top: 5px;
  color: #ffe3a1;
  font-size: 22px;
}

.wallet-summary p {
  margin: 0;
  text-align: right;
  font-size: 12px;
}

.recharge-packages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.recharge-card {
  position: relative;
  min-height: 138px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--text);
  background: #20232b;
  text-align: left;
}

.recharge-card:hover,
.recharge-card.recommended {
  border-color: var(--purple);
}

.recharge-card em {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  background: var(--purple);
  font-size: 10px;
  font-style: normal;
}

.recharge-card b {
  color: #ffe3a1;
  font-size: 20px;
}

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

.wallet-rules,
.wallet-ledger-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#walletPricing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#walletPricing span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #20232b;
  font-size: 12px;
}

#walletPricing b {
  color: var(--text);
}

.wallet-ledger {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.wallet-ledger-row {
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #20232b;
}

.wallet-ledger-row div {
  display: grid;
  gap: 3px;
}

.wallet-ledger-row span,
.ledger-empty,
.payment-notice {
  font-size: 12px;
}

.credit-in {
  color: #63d5a6;
}

.credit-out {
  color: #ffb2a7;
}

.payment-notice {
  margin: 16px 0 0;
  line-height: 1.55;
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .home-feature-grid {
    grid-template-columns: minmax(340px, 1.25fr) minmax(260px, 0.75fr);
  }

  .tool-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.utility-modal {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: none;
}

.utility-modal.open {
  display: block;
}

.utility-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.78);
  backdrop-filter: blur(7px);
}

.utility-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 22px;
  background: #17191f;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.utility-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.utility-header span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
}

.utility-header h2 {
  margin-top: 5px;
  font-size: 24px;
}

.utility-body {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.release-row,
.invite-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #20232b;
}

.release-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
}

.release-row time,
.release-row p,
.invite-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.invite-card {
  display: grid;
  gap: 12px;
}

.invite-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.invite-link-row input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--text);
  background: #15171d;
}

.invite-link-row button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  padding: 0 16px;
  color: #fff;
  background: var(--purple);
  font-weight: 800;
}

@media (max-width: 1180px) {
  .upscale-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .upscale-history-panel {
    display: none;
  }

  .line-workspace {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .content-grid,
  .hero,
  .home-topbar,
  .home-feature-grid {
    grid-template-columns: 1fr;
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inspector {
    position: static;
  }

  .workspace-panel {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .workspace-history {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 820px) {
  .creator-modal {
    left: 0;
    top: 56px;
  }

  .workspace-rail {
    inset: 0 0 auto 0;
    width: 100%;
    height: 56px;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    padding: 7px;
  }

  .workspace-back {
    width: 92px;
    flex: 0 0 92px;
  }

  .workspace-nav {
    display: flex;
    min-width: 0;
    overflow-x: auto;
  }

  .workspace-nav > button,
  .workspace-nav-group button {
    width: auto;
    min-width: max-content;
  }

  .workspace-nav-group {
    display: contents;
  }

  .workspace-nav-group > span {
    display: none;
  }

  .workspace-nav-group button {
    padding-left: 12px;
  }

  .upscale-workspace {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

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

  .upscale-controls {
    overflow: visible;
  }

  .upscale-stage {
    min-height: 68vh;
  }

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

  .rail {
    position: static;
    height: auto;
  }

  .main {
    padding: 18px;
  }

  .home-topbar {
    margin: -18px -18px 18px;
    padding: 12px 18px;
  }

  .top-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

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

  .recharge-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .wallet-summary p {
    text-align: left;
  }

  .model-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .workspace-panel {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .workspace-left,
  .workspace-stage,
  .workspace-history {
    min-height: auto;
  }
}
.workflow-skill-document.is-clickable {
  cursor: pointer;
}

.workflow-skill-document.is-clickable:hover,
.workflow-skill-document.is-clickable:focus-visible {
  border-color: #7657f5;
  box-shadow: 0 0 0 2px rgba(118, 87, 245, 0.16);
  outline: none;
}

.workflow-skill-detail {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  visibility: hidden;
}

.workflow-skill-detail.open {
  pointer-events: auto;
  visibility: visible;
}

.workflow-skill-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(20, 28, 46, 0.16);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.workflow-skill-detail.open .workflow-skill-detail-backdrop {
  opacity: 1;
}

.workflow-skill-detail-panel {
  color-scheme: light;
  position: absolute;
  top: 0;
  right: 0;
  width: min(720px, 40vw);
  min-width: min(420px, 100vw);
  height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #202838;
  background: #fff;
  border-left: 1px solid #dfe3ed;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.32);
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

.workflow-skill-detail.open .workflow-skill-detail-panel {
  transform: translateX(0);
}

.workflow-skill-detail-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e5e7ef;
}

.workflow-skill-detail-header small {
  color: #9a82ff;
  font-weight: 800;
}

.workflow-skill-detail-header h2 {
  margin: 6px 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.workflow-skill-detail-header p {
  margin: 0;
  color: #8f96a5;
  font-size: 12px;
}

#workflowSkillDetailClose {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #dfe3ed;
  border-radius: 6px;
  color: #475369;
  background: #f5f6fa;
  font-size: 22px;
  cursor: pointer;
}

#workflowSkillDetailClose:hover {
  background: #ece8ff;
}

.workflow-skill-detail-body {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  color: #344056;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.75;
}

.workflow-skill-detail-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.workflow-skill-detail-images img {
  display: block;
  width: 100%;
  border: 1px solid #e1e5ee;
  border-radius: 6px;
  background: #f3f5fa;
}
.workflow-skill-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.workflow-skill-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-right: 0;
}
.workflow-skill-detail-scroll::-webkit-scrollbar { display: none; }
/* The editor owns scrolling while editing; avoid a second outer scrollbar. */
.workflow-skill-detail-scroll:has(#workflowSkillDetailEditor:not([hidden])) { overflow: hidden; }
.workflow-skill-detail-panel .secondary {
  background: #f7f5ff;
  color: #6745d6;
  border: 1px solid #ddd5fa;
}
#workflowSkillDetailEditor {
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  resize: none;
  padding: 14px;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 8px;
  background: #fcfbff;
  color: #273247;
  font: inherit;
  line-height: 1.75;
  scrollbar-width: thin;
  scrollbar-color: #c9cbd2 transparent;
}
#workflowSkillDetailEditor:focus, #workflowSkillDetailEditor:focus-visible { outline: none; border: 0; box-shadow: none; }
#workflowSkillDetailEditor::-webkit-scrollbar { width: 4px; height: 4px; }
#workflowSkillDetailEditor::-webkit-scrollbar-thumb { background: #c9cbd2; border-radius: 4px; }
#workflowSkillDetailEditor::-webkit-scrollbar-track { background: transparent; }
#workflowSkillDetailEditor::-webkit-scrollbar-button { display: none; }
#workflowSkillDetailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid #e5e7ef;
}
#workflowSkillDetailActions small { width: 100%; color: #738096; }
#workflowSkillDetailError { color: #c23548; margin: 8px 0; }
#workflowSkillDetailError:empty { display: none; }
.workflow-skill-detail [hidden] { display: none !important; }
body.workflow-detail-open { overflow: hidden; }
#workflowSkillUpload[hidden], #workflowSkillDocumentStatus[hidden], #workflowSkillDocumentRemove[hidden] { display: none !important; }
#workflowSkillDocumentStatus[aria-disabled="true"] { cursor: progress; }
@media (max-width: 600px) {
  .workflow-skill-detail-panel { width: 100vw; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-skill-detail-panel, .workflow-skill-detail-backdrop { transition: none; }
}
#workflowSkillDocumentStatus {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

#workflowSkillDocumentStatus:hover {
  border-color: #7c4dff;
  box-shadow: 0 0 0 2px rgb(124 77 255 / 12%);
}

/* Project folders and the primary library navigation. */
.rail { background: #f6f6f7; color: #292b30; border-color: #e8e8eb; gap: 16px; }
.rail .nav { gap: 4px; }
.rail .nav-item { display: flex; align-items: center; gap: 12px; color: #45464b; padding: 10px 12px; font-size: 14px; min-height: 40px; }
.rail .nav-item.active, .rail .nav-item:hover { color: #17181b; background: #e6e6e8; }
.rail .nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.rail .logo { position: relative; }
.rail-toggle { position: absolute; top: 0; right: 0; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #4c4d54; background: transparent; font-size: 18px; line-height: 1; }
.rail-toggle:hover, .rail-toggle:focus-visible { color: #17181b; background: #e6e6e8; outline: none; }
.rail-toggle-expand { display: none; font-size: 25px; font-weight: 400; }
.rail .nav-group { margin-top: 12px; }
.rail .nav-submenu button { color: #65666c; border-color: #e3e3e8; font-size: 13px; }
.rail .nav-submenu button:hover, .rail .nav-submenu button.active { color: #6a48cd; border-color: #9771eb; background: #eeebf7; }
.new-project-button { display: flex; align-items: center; gap: 12px; min-height: 40px; width: 100%; padding: 8px 12px; border: 1px solid #dedee3; border-radius: 9px; color: #303136; background: #fff; box-shadow: 0 2px 3px #20202a05; font-size: 14px; }
.new-project-button span { font-size: 21px; line-height: 1; }
.recent-projects { min-width: 0; }
.recent-projects h2 { margin: 4px 10px 10px; color: #92939a; font-size: 12px; font-weight: 400; }
#recentProjects { display: grid; gap: 3px; }
#recentProjects button { display: block; width: 100%; border: 0; border-radius: 6px; background: transparent; color: #4b4c52; padding: 9px 10px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
#recentProjects button:hover, #recentProjects button.active { background: #eae8ef; color: #5434a6; }
.user-profile-footer { margin-top: auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; color: #303137; }
.user-profile-identity, .user-profile-credits { display: flex; align-items: center; min-width: 0; gap: 8px; }
.user-profile-identity { font-size: 14px; }
.user-profile-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-avatar { width: 30px; height: 30px; flex: 0 0 30px; }
.user-profile-credits { flex: 0 0 auto; font-size: 14px; }
.user-profile-credits svg { width: 18px; height: 18px; fill: none; stroke: #303137; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.user-profile-footer { border-radius: 9px; }
.user-profile-identity, .user-profile-credits { border: 0; background: transparent; color: inherit; padding: 4px; border-radius: 7px; cursor: pointer; }
.user-profile-identity:hover, .user-profile-credits:hover { background: #ececf0; }
.user-profile-identity:focus-visible, .user-profile-credits:focus-visible { outline: 2px solid #8d71db; outline-offset: 2px; }
.user-profile-menu { position: fixed; z-index: 500; width: 220px; max-height: calc(100vh - 16px); overflow: auto; padding: 12px 10px 8px; border: 1px solid #e3e3e8; border-radius: 10px; background: #fff; color: #2f3036; box-shadow: 0 10px 30px #2525311f; }
.user-profile-menu[hidden] { display: none !important; }
.user-menu-header { display: flex; align-items: center; gap: 10px; padding: 4px 4px 11px; border-bottom: 1px solid #ededf0; }
.user-menu-avatar { width: 29px; height: 29px; flex: 0 0 29px; }
.user-menu-header div { min-width: 0; display: grid; gap: 2px; }
.user-menu-header strong { font-size: 14px; font-weight: 500; }
.user-menu-header small { color: #a4a5ac; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-plan { display: flex; align-items: center; justify-content: space-between; padding: 11px 4px 8px; font-size: 13px; }
.user-menu-plan span:last-child { color: #777980; }
.user-menu-upgrade { width: 100%; height: 28px; border: 0; border-radius: 7px; background: #2e2e30; color: #fff; font-size: 12px; }
.user-menu-links { display: grid; gap: 1px; padding: 8px 0; border-bottom: 1px solid #ededf0; }
.user-menu-links button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 5px 4px; border: 0; border-radius: 5px; background: transparent; color: #38393f; font-size: 13px; text-align: left; }
.user-menu-links button:hover { background: #f0eff2; }
.user-menu-upgrade:hover { background: #454547; }
.user-menu-links button > span { width: 16px; color: #55565d; font-size: 16px; text-align: center; }
.user-menu-links button b { margin-left: auto; font-weight: 400; font-size: 16px; }
.user-menu-footer-links { border-bottom: 0; padding-bottom: 0; }
.user-profile-menu { width: 224px; padding: 12px 10px 8px; }
.user-menu-links button { min-height: 36px; font-size: 14px; }
.user-menu-upgrade { height: 30px; font-size: 13px; }
.user-credits-menu { position: fixed; z-index: 501; width: 260px; max-width: calc(100vw - 16px); padding: 12px; border: 1px solid #e6e6e9; border-radius: 13px; background: #fff; color: #292a2e; box-shadow: 0 8px 24px #25253114; font-size: 13px; overflow: auto; }
.user-credits-menu[hidden] { display: none !important; }
.credits-menu-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid #ededf0; }
.credits-menu-header button { border: 0; border-radius: 7px; padding: 6px 12px; background: #2e2e30; color: white; }
.credits-menu-row { display: flex; align-items: center; gap: 9px; line-height: 20px; }
.credits-menu-row > span:last-child { margin-left: auto; }
.credits-menu-row svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.credits-menu-detail { display: flex; justify-content: space-between; gap: 8px; padding-left: 25px; color: #a6a6ac; font-size: 11px; line-height: 18px; }
.credits-menu-daily { margin-top: 11px; }
.credits-menu-usage { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; padding: 11px 0 0; border: 0; border-top: 1px solid #ededf0; border-radius: 0; color: inherit; background: transparent; font-size: 13px; }
.credits-menu-usage:hover { color: #7951d4; }
.rail-note { display: none; }
.app-shell.rail-collapsed { --rail-width: 60px; }
.rail-collapsed .rail { padding-left: 8px; padding-right: 8px; gap: 16px; overflow-x: hidden; }
.rail-collapsed .logo { justify-content: center; padding: 4px 0; }
.rail-collapsed .logo strong, .rail-collapsed .new-project-label, .rail-collapsed .nav-item > span, .rail-collapsed .nav-group-toggle b, .rail-collapsed .recent-projects, .rail-collapsed .user-profile-identity span, .rail-collapsed .user-profile-credits span { display: none; }
.rail-collapsed .logo .rail-toggle { inset: 0; width: 100%; height: 100%; opacity: 0; }
.rail-collapsed .logo:hover .rail-toggle, .rail-collapsed .rail-toggle:focus-visible { opacity: 1; }
.rail-collapsed .logo:hover > span { opacity: .18; }
.rail-collapsed .rail-toggle-collapse { display: none; }
.rail-collapsed .rail-toggle-expand { display: block; }
.rail-collapsed .new-project-button { justify-content: center; padding: 8px; }
.rail-collapsed .new-project-button > span:first-child { font-size: 24px; }
.rail-collapsed .nav { gap: 7px; }
.rail-collapsed .nav-item { justify-content: center; padding: 10px 8px; }
.rail-collapsed .nav-item svg { width: 20px; height: 20px; }
.rail-collapsed .nav-group { margin-top: 6px; }
.rail-collapsed .nav-group-toggle { display: flex; }
.rail-collapsed .nav-submenu { display: none !important; }
.rail-collapsed .logo span { flex-shrink: 0; }
.rail-collapsed .user-profile-footer { justify-content: center; flex-direction: column; gap: 12px; padding: 4px 0; }
.rail-collapsed .user-profile-credits svg { width: 18px; height: 18px; }
.app-shell { --rail-width: 240px; grid-template-columns: var(--rail-width) minmax(0, 1fr); transition: grid-template-columns 200ms ease; }
.rail { position: sticky; height: 100vh; padding: 20px 12px; overflow-x: hidden; }
.rail .logo { min-height: 34px; padding: 0 4px; margin-bottom: 6px; }
.home-bloub-logo { display: block; width: 30px; height: 30px; flex: 0 0 30px; overflow: visible; transition: opacity 140ms ease; }
.bloub-gaze { transform: translate(var(--bloub-look-x, 0px), var(--bloub-look-y, 0px)); transition: transform 240ms ease-out; }
.bloub-eyes { transform-box: fill-box; transform-origin: center; animation: bloub-logo-blink 5.2s ease-in-out infinite; }
body:has(.workflow-modal.open) .home-bloub-logo .bloub-eyes { animation-play-state: paused; }
@keyframes bloub-logo-blink { 0%, 41%, 45%, 100% { transform: scaleY(1); } 43% { transform: scaleY(.1); } }
.rail .rail-toggle { top: 2px; right: 0; width: 30px; height: 30px; }
.rail-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-toggle:focus-visible { outline: 2px solid #8d71db; outline-offset: 2px; }
.new-project-button .new-project-label { font-size: 14px; }
.rail-collapsed .rail { padding-left: 10px; padding-right: 10px; }
.rail-collapsed .rail .logo { padding: 0; }
.rail-collapsed .logo:hover .home-bloub-logo, .rail-collapsed .logo:has(.rail-toggle:focus-visible) .home-bloub-logo { opacity: 0; }
.rail-collapsed .rail .logo .rail-toggle { inset: 0; width: 100%; height: 100%; background: #f6f6f7; }
.rail-collapsed .new-project-button { width: 36px; min-height: 36px; padding: 5px; align-self: center; }
.rail-collapsed .rail .nav-item { width: 36px; min-height: 36px; padding: 8px; align-self: center; }
.rail-collapsed .rail .nav { gap: 4px; }
@media (prefers-reduced-motion: reduce) {
  .app-shell, .home-bloub-logo, .bloub-gaze { transition: none; }
  .bloub-eyes { animation: none; }
}
#projectsView, #skillsView, #assetsView { color: #26272b; background: #fff; min-height: 100vh; padding: 40px clamp(24px, 4vw, 72px); --line: #e4e5e9; --muted: #85858e; color-scheme: light; }
.library-header, #projectsView .space-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.library-header h1, #projectsView h1 { margin: 0 0 8px; font-size: 25px; font-weight: 600; }
.library-header p, #projectsView .hero-copy { color: #8a8b94; font-size: 13px; margin: 0; }
.library-header input, .project-actions input { width: 220px; padding: 10px 12px; color: #35363e; border: 1px solid #e1e2e7; border-radius: 8px; background: #fafafa; }
.project-actions, .project-dialog-actions { display: flex; align-items: center; gap: 12px; }
#projectsView .secondary, #assetsView .secondary, .project-dialog .secondary { background: #f7f7fa; border: 1px solid #dddfe6; color: #555865; }
.project-grid, .assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 18px; }
.project-card { min-width: 0; border: 0; padding: 0; text-align: left; background: transparent; color: #393a41; }
.project-card-wrapper { position: relative; min-width: 0; }
.project-card-wrapper > .project-card { display: block; width: 100%; }
.project-card-wrapper .project-card > strong, .project-card-wrapper .project-card > small { padding-right: 32px; }
.project-card-more { position: absolute; right: 0; bottom: 21px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: #f1f1f4; color: #555563; font-size: 20px; line-height: 20px; opacity: 0; pointer-events: none; }
.project-card-wrapper:hover .project-card-more, .project-card-wrapper:focus-within .project-card-more, .project-card-more[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
.project-card-more:hover { background: #e9e6f0; }
.project-card-menu { position: fixed; z-index: 160; min-width: 142px; padding: 6px; border: 1px solid #e9e7ee; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px #19132415; color-scheme: light; }
.project-card-menu[hidden] { display: none; }
.project-card-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #4d4d56; text-align: left; font-size: 13px; }
.project-card-menu button:hover, .project-card-menu button:focus-visible { background: #f5f4f8; outline: none; }
.project-card-menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#projectMenuDelete { color: #e2565f; }
#projectMenuDelete:disabled { color: #bab7bf; cursor: not-allowed; }
.project-delete-notice { color: #73717e; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
#saveProjectDialog.danger { background: #dc525f; border-color: #dc525f; color: #fff; }
@media (hover: none) { .project-card-more { opacity: 1; pointer-events: auto; } }
.project-cover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.7; border: 1px solid #e4e4e8; border-radius: 12px; overflow: hidden; background: #f3f3f5; margin-bottom: 10px; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-cover img:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.project-card:hover .project-cover { border-color: #a99aca; box-shadow: 0 4px 18px #40305b0b; }
.project-card strong, .project-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card strong { font-size: 13px; font-weight: 500; margin: 0 2px 5px; }
.project-card small { font-size: 11px; color: #9999a2; margin: 0 2px; }
.project-card-new .project-cover, .project-cover.is-empty { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; color: #a4a4ae; }
.project-cover:has(img:nth-child(2):last-child) { grid-template-rows: 1fr; }
.project-card-new .project-cover { border-style: dashed; font-size: 29px; font-weight: 300; }
.project-cover.is-empty svg { width: 42px; height: 42px; fill: none; stroke: #c4c4ce; stroke-width: 1; }
.text-button { border: 0; padding: 0; margin: 0 0 15px; background: transparent; color: #777987; font-size: 13px; }
.project-selection-toolbar { align-items: center; justify-content: flex-start; font-size: 13px; color: #7a7d88; }
.project-selection-toolbar label { display: flex; align-items: center; gap: 6px; }
.project-work { position: relative; min-width: 0; }
.project-work .space-card { display: block; width: 100%; box-shadow: none; border-radius: 12px; }
.project-work > input { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; z-index: 2; accent-color: #7957ce; cursor: pointer; }
.project-work:has(input:checked) .space-card { outline: 2px solid #9069df; outline-offset: 2px; }
.project-error { color: #bf3b4e; font-size: 13px; white-space: pre-wrap; }
.project-error:empty { display: none; }
.project-dialog { width: min(440px, calc(100vw - 32px)); border: 1px solid #e4e3ec; border-radius: 16px; background: #fff; padding: 28px; color: #2a2b32; box-shadow: 0 20px 70px #10102530; color-scheme: light; }
.project-dialog::backdrop { background: #13132166; }
.project-dialog h2 { margin: 0 0 24px; font-size: 20px; }
.project-dialog label { display: grid; gap: 10px; color: #737580; font-size: 13px; }
.project-dialog input, .project-dialog select { width: 100%; color: #32333a; background: #fff; border: 1px solid #dcdde5; padding: 12px; border-radius: 8px; }
.project-dialog-actions { margin-top: 24px; justify-content: flex-end; }
.asset-card { display: grid; gap: 10px; min-width: 0; }
.asset-card strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-preview { height: 185px; background: #f5f5f7; border: 1px solid #e5e5e9; border-radius: 12px; padding: 0; overflow: hidden; }
.asset-preview img { width: 100%; height: 100%; object-fit: contain; }
#skillsView .tabs, #skillsView .filters { color: #5b5d67; }
#skillsView .model-tab, #skillsView .filter-chip { color: #777986; background: #f6f6f9; border-color: #e5e5ec; }
#skillsView .model-tab.active, #skillsView .filter-chip.active { color: #7149ce; background: #eee8fc; }
#projectsView [hidden], #assetsView [hidden], .project-dialog [hidden] { display: none !important; }
@media (max-width: 900px) { .library-header, #projectsView .space-header { align-items: flex-start; flex-direction: column; } .project-actions { flex-wrap: wrap; } }

/* Home: navigation, a calm creation column, and a white skill discovery area. */
#homeView { padding: 0; min-width: 0; background: #fff; color: #34363c; --text: #34363c; --muted: #92959e; --line: #e9e9ee; color-scheme: light; }
#homeView.active { display: grid; grid-template-columns: clamp(300px, 23vw, 410px) minmax(0, 1fr); align-items: start; }
.home-create-panel { position: sticky; top: 0; height: 100vh; min-width: 0; padding: 28px 22px; display: flex; align-items: center; border-right: 1px solid #ececf0; background: #fff; }
.home-create-content { width: 100%; transform: translateY(-12px); }
.home-create-content h1 { margin: 0 0 25px; font-size: 22px; font-weight: 500; text-align: center; letter-spacing: -.4px; }
.home-create-form { border: 1px solid #e8e8ed; border-radius: 20px; padding: 14px 14px 10px; background: #fff; box-shadow: 0 3px 8px #24253506; }
.home-create-form:focus-within { border-color: #b7a3e6; box-shadow: 0 0 0 3px #8a61db09; }
#homeCreatePrompt { display: block; width: 100%; min-height: 100px; max-height: 260px; resize: vertical; padding: 0; border: 0; outline: 0; color: #41434b; background: transparent; font-size: 14px; line-height: 1.65; }
#homeCreatePrompt::placeholder { color: #b3b4be; }
.home-create-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.home-create-actions button { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 0; background: transparent; border-radius: 50%; color: #6c6f79; padding: 6px; }
.home-create-actions button:hover { background: #f0ecf8; }
.home-create-actions svg, .home-create-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-create-actions > span { flex: 1; min-width: 0; font-size: 11px; color: #a1a2aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-create-actions b { font-weight: 400; }
#homeCreateSubmit { background: #7852d8; color: #fff; }
#homeCreateSubmit:disabled { background: #f0f0f2; color: #c4c4cb; cursor: default; }
.home-create-reference { position: relative; width: 62px; height: 62px; margin: 10px 0; }
.home-create-reference img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #e3e3e8; border-radius: 8px; }
.home-create-reference button { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; padding: 0; border: 1px solid #dedee4; border-radius: 50%; background: #fff; color: #777; }
.home-create-link { display: flex; gap: 9px; align-items: center; width: 100%; border: 0; padding: 10px 7px; text-align: left; color: #9597a0; background: transparent; font-size: 12px; }
.home-create-link:first-of-type { margin-top: 14px; }
.home-create-link svg { color: #8871cf; flex-shrink: 0; width: 16px; height: 16px; }
.home-create-link:last-child svg { color: #56a596; }
.home-create-link span:last-child { margin-left: auto; color: #b2b1ba; }
.home-create-link:hover { color: #7652c9; }
.home-explore { min-width: 0; padding: 0 20px 36px; background: #fff; }
#homeView .home-topbar { position: relative; top: auto; margin: 0 0 16px; padding: 14px 0; grid-template-columns: minmax(180px, 1fr) auto; gap: 12px; background: #fff; backdrop-filter: none; border-color: #eeeeF2; }
#homeView .top-search { min-height: 36px; max-width: 550px; border-radius: 9px; grid-template-columns: auto minmax(0, 1fr) 64px; gap: 7px; padding: 0 5px 0 10px; background: #f7f7f9; border-color: #e7e7ec; }
#homeView .top-search input { color: #535663; font-size: 12px; }
#homeView .top-search button { min-height: 26px; font-size: 11px; border-radius: 6px; }
#homeView .top-actions { gap: 6px; }
#homeView .top-actions button { background: #fff; color: #797b86; border-color: #e6e6ec; font-size: 11px; font-weight: 500; padding: 0 9px; white-space: nowrap; }
#homeView .top-actions .power-pill { display: flex; gap: 4px; color: #7452be; }
#homeView .home-feature-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1.65fr); gap: 9px; margin-bottom: 16px; }
#homeView .feature-hero { min-height: 158px; padding: 17px; background: #f3f2f7; background-size: cover; color: #343743; }
#homeView .feature-hero span { min-height: 20px; padding: 2px 8px; margin-bottom: 8px; font-size: 10px; font-weight: 500; color: #9a8656; background: #f6f1e5; border-color: #e6dfcb; }
#homeView .feature-hero h2 { margin: 0; font-size: clamp(16px, 1.3vw, 25px); font-weight: 600; line-height: 1.4; }
#homeView .feature-hero p { margin: 8px 0 0; font-size: 11px; color: #838792; line-height: 1.5; }
#homeView .feature-stack, #homeView .tool-grid { gap: 8px; }
#homeView .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#homeView .feature-stack button, #homeView .tool-grid button { min-width: 0; min-height: 75px; padding: 10px; gap: 5px; background-color: #f7f8fa; background-image: none; background-size: auto 100%; background-position: right center; color: #3e424d; }
#homeView .feature-stack strong, #homeView .tool-grid strong { font-size: 11px; }
#homeView .feature-stack span, #homeView .tool-grid span { font-size: 10px; line-height: 1.5; color: #8e929b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#homeView .tabs { margin-bottom: 10px; gap: 7px; }
#homeView .model-tab, #homeView .filter-chip { border-color: #e7e7ed; background: #f6f6f9; color: #8b8b97; font-size: 11px; padding: 5px 9px; border-radius: 6px; }
#homeView .model-tab.active, #homeView .filter-chip.active { background: #7e55db; border-color: #7e55db; color: #fff; }
#homeView .filters { margin-bottom: 16px; gap: 7px; flex-wrap: wrap; font-size: 11px; color: #777b88; }
#homeView .content-grid { display: block; }
#homeView .model-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 14px; }
.model-section-title { grid-column: 1 / -1; margin: 6px 0 -10px; font-size: 14px; font-weight: 500; color: #656a76; }
.model-caption { padding: 9px 2px 3px; display: grid; gap: 5px; }
.model-caption strong { font-size: 13px; font-weight: 500; }
.model-caption p { font-size: 11px; margin: 0; color: #989ba5; }
.model-caption small { font-size: 10px; color: #aaaeb7; }
.model-caption strong, .model-caption p, .model-caption small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#homeView .model-card, #skillsView .model-card { background: #fff; color: #535761; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
#homeView .model-card.active, #skillsView .model-card.active { box-shadow: none; }
#homeView .model-cover { aspect-ratio: 1.25; min-height: 0; max-height: none; border-radius: 11px; background-color: #f3f3f6; border: 1px solid #eeeeF2; }
#homeView .model-cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
#homeView .model-card:hover .model-cover, #homeView .model-card:focus-visible .model-cover { outline: 2px solid #a589e5; outline-offset: 2px; }
.model-search-empty { grid-column: 1 / -1; color: #9699a4; padding: 32px 0; font-size: 13px; }
#homeView [hidden] { display: none !important; }
@media (max-width: 1500px) { #homeView .top-actions #changelogButton, #homeView .top-actions #inviteButton { display: none; } }
@media (min-width: 1800px) { #homeView .model-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1200px) {
  #homeView.active { grid-template-columns: 280px minmax(0, 1fr); }
  .home-create-panel { padding: 22px 16px; }
  #homeView .home-feature-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  #homeView .tool-grid { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #homeView.active { display: block; }
  .home-create-panel { position: relative; height: auto; min-height: 300px; border-right: 0; border-bottom: 1px solid #ececf0; padding: 32px 20px; }
  .home-create-content { max-width: 480px; margin: auto; transform: none; }
  .home-create-content h1 { margin-bottom: 16px; }
  #homeView .home-topbar { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 520px) { .home-explore { padding: 0 12px 24px; } #homeView .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; } #homeView .home-feature-grid { grid-template-columns: minmax(0, 1fr); } #homeView .feature-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } #homeView .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#homeView .feature-hero { min-height: 198px; }
#homeView .feature-stack button, #homeView .tool-grid button { min-height: 95px; }
#homeView .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#homeView .model-cover { aspect-ratio: auto; }
#homeView .model-cover img { height: auto; object-fit: contain; }
#homeView .model-cover.is-fallback { aspect-ratio: 1.25; }

/* Homepage typography follows the larger reference layout. */
#homeView .home-create-content h1 { font-size: 24px; }
#homeView #homeCreatePrompt { font-size: 14px; line-height: 1.65; }
#homeView .home-create-actions > span { font-size: 13px; }
#homeView .home-create-link { font-size: 14px; }
#homeView .top-search input { font-size: 14px; }
#homeView .top-search button { font-size: 12px; }
#homeView .top-actions button { font-size: 12px; }
#homeView .feature-hero span { font-size: 11px; }
#homeView .feature-hero h2 { font-size: clamp(18px, 1.45vw, 27px); }
#homeView .feature-hero p { font-size: 12px; }
#homeView .feature-stack strong, #homeView .tool-grid strong { font-size: 13px; }
#homeView .feature-stack span, #homeView .tool-grid span { font-size: 12px; }
#homeView .model-tab, #homeView .filter-chip { font-size: 12px; }
#homeView .filters { font-size: 12px; }
#homeView .model-section-title { font-size: 16px; }
#homeView .model-caption strong { font-size: 14px; }
#homeView .model-caption p { font-size: 12px; }
#homeView .model-caption small { font-size: 11px; }
.model-hover { justify-content: flex-end; align-items: stretch; background: linear-gradient(180deg, transparent 35%, #18162455); }
.skill-project-actions { display: grid; gap: 7px; width: 100%; }
.skill-project-actions button { min-height: 34px; border: 1px solid #ffffffb3; border-radius: 7px; background: #fffffff2; color: #565064; font-size: 12px; }
.skill-project-actions .create-project-action { color: #fff; border-color: #9472d7; background: #8055d9; }
.home-skill-chip { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 5px 8px; margin-bottom: 12px; border: 1px solid #ded3f6; border-radius: 6px; color: #7c58be; background: #f6f2fc; font-size: 12px; }
.home-skill-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-skill-chip button { border: 0; padding: 0 2px; background: transparent; color: #9b8ab7; }
#projectShowWorks { display: none; }
#projectConversationPanel[hidden] { display: none !important; }
.project-workflow { color-scheme: light; }
.pending-project-window .workflow-viewport { visibility: hidden; }
.pending-project-window::after { content: "正在创建项目…"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: #7a5ad5; font-size: 14px; font-weight: 500; }
.project-workflow .workflow-shell { position: relative; display: grid; grid-template-columns: var(--project-conversation-width, 300px) minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); background: #f5f5f7; }
.project-workflow .workflow-header { grid-column: 1 / -1; grid-row: 1; background: #fff; color: #3c3f49; border-bottom: 1px solid #e8e8ee; padding: 0 16px; }
.project-workflow .workflow-kicker { display: none; }
.project-workflow .workflow-header strong { font-weight: 500; font-size: 14px; }
.project-workflow .workflow-project-title { cursor: text; border-radius: 4px; padding: 3px 5px; margin-left: -5px; outline: none; }
.project-workflow .workflow-project-title:hover { background: #f4f2fa; }
.project-workflow .workflow-project-title[contenteditable="true"] { min-width: 80px; background: #f5f1ff; box-shadow: 0 0 0 2px #b79ae9; }
.project-workflow .workflow-toolbar button, .project-workflow .workflow-toolbar span { background: #fafafd; border-color: #e4e4ed; color: #737786; height: 29px; font-size: 11px; }
.project-workflow #projectShowWorks { display: block; }
.project-workflow .workflow-viewport { grid-column: 2; grid-row: 2; background-color: #f5f5f7; background-image: radial-gradient(circle, #d8dbe3 .7px, transparent .7px); }
.project-conversation-panel { grid-column: 1; grid-row: 2; min-height: 0; background: #fff; border-right: 1px solid #e9e9ee; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.project-conversation { grid-row: 1; grid-column: 1; min-height: 0; overflow: auto; padding: 18px 16px; overscroll-behavior: contain; }
.project-conversation::-webkit-scrollbar { width: 4px; height: 4px; }
.project-conversation::-webkit-scrollbar-track { background: transparent; }
.project-conversation::-webkit-scrollbar-thumb { background: #c9cbd2; border-radius: 8px; }
.project-conversation::-webkit-scrollbar-thumb:hover { background: #b5b8c2; }
.project-conversation::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  .project-conversation { scrollbar-width: thin; scrollbar-color: #c9cbd2 transparent; }
}
.project-chat-message { padding: 12px; margin-bottom: 16px; border-radius: 12px; background: #f7f6fa; color: #62616e; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.project-chat-message p { margin: 0 0 9px; white-space: pre-wrap; }
.project-chat-message small { font-size: 10px; color: #9b94ab; }
.project-chat-message.is-pending { background: #f4effc; }
.project-conversation-welcome { grid-row: 1; grid-column: 1; align-self: center; display: grid; justify-items: center; gap: 12px; color: #555561; font-size: 13px; }
.project-conversation-welcome strong { margin-bottom: 12px; font-weight: 500; }
.project-conversation-welcome button { border: 1px solid #e9e7ef; border-radius: 24px; padding: 10px 18px; color: #7f778f; background: #fff; font-size: 12px; }
.project-conversation-form { grid-row: 2; margin: 12px; border: 1px solid #e4e3eb; border-radius: 14px; padding: 12px; background: #fff; }
.project-attachments { display: flex; flex-wrap: wrap; gap: 6px; max-height: 116px; overflow-y: auto; margin-bottom: 10px; }
.project-attachment { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid #dedee7; border-radius: 7px; background: #fff; color: #555563; }
.project-attachment.error { border-color: #d9828d; background: #fff7f8; }
.project-attachment.loading { opacity: .6; }
.project-attachment-label { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 5px; border: 0; background: transparent; color: inherit; font-size: 12px; }
.project-attachment-label > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-attachment-label img { width: 20px; height: 20px; border-radius: 3px; object-fit: contain; }
.project-attachment-icon { color: #8a6ac1; width: 20px; font-size: 18px; }
.project-attachment-remove { flex-shrink: 0; padding: 3px 6px 3px 2px; border: 0; color: #aaa5b5; background: transparent; }
.project-attachment-label:focus-visible { outline: 2px solid #7f9fff; border-radius: 5px; }
.project-attachment-preview { position: fixed; z-index: 120; padding: 5px; border: 1px solid #e7e5ec; border-radius: 10px; background: #fff; box-shadow: 0 5px 22px #17112330; pointer-events: none; }
.project-attachment-preview img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 5px; }
.project-conversation-skill { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; color: #9179b9; font-size: 11px; }
.project-conversation-skill span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-conversation-skill button { flex-shrink: 0; border: 0; padding: 0; color: #9a90aa; background: transparent; font-size: 10px; }
#projectRemoveSkill { width: 20px; height: 20px; border-radius: 5px; font-size: 17px; line-height: 1; }
#projectRemoveSkill:hover { background: #f2eef9; color: #7652ee; }
#projectRemoveSkill:disabled { opacity: .4; cursor: default; }
#projectConversationPrompt { width: 100%; min-height: 90px; max-height: 200px; border: 0; padding: 0; resize: vertical; background: transparent; color: #515261; line-height: 1.6; font-size: 14px; outline: none; }
#projectConversationPrompt::placeholder { color: #b0acb8; }
.project-conversation-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.project-conversation-actions button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #f5f3f8; color: #93889f; font-size: 17px; }
#projectConversationSubmit { background: #7951ce; color: #fff; }
#projectConversationSubmit:disabled { background: #ebe8f0; color: #b6afc0; }
.project-model-control { position: relative; margin-left: auto; }
#projectModelTrigger { display: grid; place-items: center; color: #69646f; }
#projectModelTrigger:hover, #projectModelTrigger[aria-expanded="true"] { background: #e9e4f2; color: #62449b; }
.project-model-menu { position: absolute; z-index: 150; right: -34px; bottom: calc(100% + 12px); width: min(280px, calc(var(--project-conversation-width, 300px) - 48px)); padding: 16px; border: 1px solid #e8e7ed; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px #241b3b1c; color: #34323a; }
.project-model-menu > strong { font-size: 14px; font-weight: 600; }
.project-model-menu > p { margin: 14px 0 8px; font-size: 12px; color: #8b8791; }
#projectModelGpt { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 60px; padding: 10px; border-radius: 10px; background: #f6f4fa; color: #37343d; text-align: left; }
#projectModelGpt:hover { background: #ede8f6; }
.project-model-symbol { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ded9e9; border-radius: 8px; font-size: 14px; }
.project-model-description { display: grid; gap: 5px; flex: 1; }
.project-model-description b { font-size: 13px; font-weight: 500; }
.project-model-description small { display: block !important; font-size: 11px; color: #918b9a; }
.project-model-check { color: #7951ce; font-size: 15px; }
.project-model-control button:focus-visible, #projectRemoveSkill:focus-visible { outline: 2px solid #9b81d1; outline-offset: 2px; }
.project-workflow [hidden] { display: none !important; }
.project-skill-picker { width: min(740px, calc(100vw - 32px)); max-height: min(650px, calc(100vh - 40px)); border: 1px solid #e5e2ec; border-radius: 15px; padding: 22px; background: #fff; color: #56505f; color-scheme: light; }
.project-skill-picker::backdrop { background: #22202c55; }
.project-skill-picker header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.project-skill-picker h2 { margin: 0; font-size: 18px; font-weight: 500; }
.project-skill-picker header button { background: #f5f3f8; border: 0; border-radius: 6px; color: #8e809f; width: 28px; height: 28px; }
#projectSkillSearch { width: 100%; padding: 10px; border: 1px solid #e3dfec; border-radius: 8px; background: #fcfbfe; color: #676171; }
#projectSkillOptions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
#projectSkillOptions button { min-height: 100px; display: grid; gap: 8px; align-content: center; padding: 10px; border: 1px solid #e9e6ee; border-radius: 9px; color: #786d86; background: #fff; font-size: 11px; }
#projectSkillOptions img { width: 100%; height: 100px; object-fit: contain; }
@media (max-height: 760px) and (min-width: 901px) { .project-workflow .workflow-shell { grid-template-rows: 44px minmax(0, 1fr); } }
@media (max-width: 1200px) { .project-workflow .workflow-shell { grid-template-columns: var(--project-conversation-width, 260px) minmax(0, 1fr); } }
@media (max-width: 700px) { .project-workflow .workflow-shell { grid-template-columns: var(--project-conversation-width, 190px) minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr); } .project-conversation-form { margin: 6px; padding: 8px; } .project-conversation-actions small { display: none; } .project-conversation-actions { justify-content: space-between; } .project-workflow .workflow-toolbar #workflowFit, .project-workflow .workflow-toolbar #workflowZoomLabel { display: none; } .project-workflow .workflow-header { gap: 6px; padding: 0 8px; } .project-workflow .workflow-toolbar { gap: 3px; } .project-conversation-welcome { font-size: 11px; } .project-conversation-welcome button { padding: 8px; font-size: 10px; } }

.project-conversation-resizer { display: none; }
.project-workflow .project-conversation-resizer { display: block; grid-column: 1; grid-row: 2; align-self: stretch; justify-self: end; width: 10px; margin-right: -5px; z-index: 50; position: relative; cursor: col-resize; touch-action: none; outline: none; }
.project-conversation-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.project-conversation-resizer:hover::after, .project-conversation-resizer:focus-visible::after, .is-resizing-conversation .project-conversation-resizer::after { background: #9471dc; }
.project-workflow.is-resizing-conversation, .project-workflow.is-resizing-conversation * { cursor: col-resize !important; user-select: none !important; }

/* Project conversation header and shared split / expanded chat surface. */
.project-bloub-logo { width: 22px; height: 22px; flex: 0 0 22px; display: block; }
.project-workflow .workflow-header { padding-left: 0; gap: 8px; }
.project-workflow .workflow-header > .project-chat-header { position: relative; width: var(--project-conversation-width, 300px); flex: 0 0 var(--project-conversation-width, 300px); height: 100%; padding: 0 8px; display: flex; align-items: center; gap: 7px; }
.project-chat-header #workflowTitle { flex: 1; min-width: 0; margin: 0; padding: 4px 0; font-size: 12px; }
.project-chat-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.project-chat-controls button { width: 27px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: #53545b; }
.project-chat-controls #projectConversationSelect { width: 35px; gap: 1px; }
.project-chat-controls svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.project-chat-controls #projectConversationSelect svg:last-child { width: 10px; }
.project-chat-controls button:hover, .project-chat-controls button[aria-expanded="true"]:first-child { background: #f1f1f4; }
.project-chat-controls button:focus-visible { outline: 2px solid #8d71db; outline-offset: 1px; }
.chat-restore-path { display: none; }
.conversation-fullscreen .chat-expand-path { display: none; }
.conversation-fullscreen .chat-restore-path { display: block; }
.conversation-collapsed #projectConversationCollapse svg { transform: rotate(180deg); }
.project-workflow.conversation-collapsed .workflow-header > .project-chat-header { width: 82px; flex: 0 0 82px; gap: 10px; border-right: 1px solid #ededf1; }
.conversation-collapsed #workflowTitle,
.conversation-collapsed #projectConversationSelect,
.conversation-collapsed #projectConversationExpand { display: none; }
.project-conversation-menu { position: absolute; z-index: 220; top: calc(100% + 5px); right: 8px; width: 270px; max-width: calc(100vw - 16px); padding: 10px; border: 1px solid #e7e7ed; border-radius: 12px; background: #fff; box-shadow: 0 10px 32px #24203024; }
.project-conversation-menu header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; }
.project-conversation-menu button { border: 0; border-radius: 6px; background: #f6f4fb; color: #695386; padding: 8px; font-size: 12px; text-align: left; }
#projectConversationList { display: grid; gap: 4px; max-height: min(340px, 55vh); overflow: auto; }
#projectConversationList button { background: transparent; color: #555; }
#projectConversationList button:hover, #projectConversationList button.active { background: #f0ebfb; color: #7651c8; }
#projectConversationMenuError { color: #b34350; font-size: 12px; margin: 6px 0 0; }
#projectConversationMenuError:empty { display: none; }
.project-conversation-menu { left: 8px; right: auto; }
.conversation-fullscreen .project-conversation-menu { left: auto; right: 8px; }
.project-chat-message { background: transparent; padding: 0; color: #414149; margin-bottom: 30px; }
.project-chat-message .project-chat-user { margin: 0 0 22px auto; width: fit-content; max-width: 92%; background: #f4f4f5; border-radius: 16px; padding: 10px 12px; }
.project-chat-response { display: grid; gap: 12px; }
.project-chat-images { display: flex; flex-wrap: wrap; gap: 10px; }
.project-chat-images:empty { display: none; }
.project-chat-images button { display: block; max-width: 100%; padding: 0; background: #f5f5f5; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.project-chat-images img { display: block; width: auto; height: auto; max-width: 100%; max-height: 220px; object-fit: contain; }
.project-workflow.conversation-fullscreen .workflow-shell, .project-workflow.conversation-collapsed .workflow-shell { grid-template-columns: 0 minmax(0, 1fr); }
.project-workflow.conversation-fullscreen .workflow-header > .project-chat-header { width: auto; flex: 1; }
.conversation-fullscreen #workflowTitle { flex: 0 1 auto; max-width: 50vw; }
.conversation-fullscreen .project-chat-controls { margin-left: auto; }
.project-workflow.conversation-fullscreen .project-conversation-panel { grid-column: 1 / -1; border: 0; }
.conversation-fullscreen .project-conversation { padding: 28px max(24px, calc((100% - 760px) / 2)); }
.conversation-fullscreen .project-conversation-form { width: min(760px, calc(100% - 32px)); margin: 12px auto 20px; padding: 16px; }
.conversation-fullscreen .project-chat-message { font-size: 14px; margin-bottom: 42px; }
.conversation-fullscreen .project-chat-images img { max-height: 280px; }
.project-workflow.conversation-fullscreen .workflow-viewport,
.project-workflow.conversation-fullscreen .workflow-toolbar,
.project-workflow.conversation-fullscreen .workflow-minimap,
.project-workflow.conversation-fullscreen .project-conversation-resizer,
.project-workflow.conversation-fullscreen #workflowSelectionOverlay,
.project-workflow.conversation-fullscreen #workflowCreationProcess,
.project-workflow.conversation-collapsed .project-conversation-panel,
.project-workflow.conversation-collapsed .project-conversation-resizer { display: none !important; }
@media (max-width: 700px) {
  .project-workflow .workflow-header > .project-chat-header { gap: 3px; padding: 0 5px; }
  .project-bloub-logo { width: 18px; height: 18px; flex-basis: 18px; }
  .project-chat-controls button { width: 23px; }
  .project-chat-controls #projectConversationSelect { width: 29px; }
  .project-workflow.conversation-collapsed .workflow-header > .project-chat-header { flex-basis: 82px; width: 82px; }
}
/* Independent project document and its account actions. */
html[data-page="project"], html[data-page="project"] body { height: 100%; overflow: hidden; }
html[data-page="project"] .project-page-editor { position: relative; inset: auto; width: 100%; height: 100dvh; padding: 0; }
html[data-page="project"] .project-page-editor > .workflow-backdrop { display: none; }
.project-workflow .workflow-toolbar { margin-left: auto; }
.project-account-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 12px 0 8px; }
.project-account-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; padding: 4px; color: #787981; background: transparent; cursor: pointer; font: 13px/1.4 inherit; border-radius: 7px; }
.project-account-actions button:hover { background: #f3f3f6; }
.project-account-actions .user-profile-avatar { width: 26px; height: 26px; }
.project-account-actions .user-profile-credits svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.project-account-actions .project-share-trigger { border: 1px solid #e2e2e8; background: white; color: #303139; padding: 5px 12px; }
.project-share-dialog, .project-works-dialog { border: 1px solid #e4e4eb; border-radius: 15px; background: #fff; color: #32323b; box-shadow: 0 18px 60px #20203020; }
.project-share-dialog { width: min(420px, calc(100vw - 40px)); padding: 22px; }
.project-share-dialog::backdrop, .project-works-dialog::backdrop { background: #25253035; }
.project-share-dialog header, .project-share-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-share-dialog header h2 { font-size: 18px; margin: 0; }
.project-share-dialog header button { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #85858e; }
.project-share-dialog p { font-size: 14px; line-height: 1.8; color: #777782; }
.project-share-dialog input { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px; border: 1px solid #dddde6; border-radius: 8px; }
.project-share-dialog footer { justify-content: flex-end; }
.project-works-dialog { width: min(1200px, calc(100vw - 50px)); height: min(800px, calc(100vh - 50px)); padding: 24px; }
.project-works-content { padding-top: 18px; }
html[data-page="project"] #backToProjects, html[data-page="project"] #projectSearch, html[data-page="project"] #projectCreateArtwork { display: none; }
@media(max-width: 900px) { .project-account-actions { gap: 5px; padding-right: 6px; } .project-workflow .workflow-toolbar #projectShowWorks, .project-workflow .workflow-toolbar #workflowFit { display: none; } }
/* Shared account dialogs on the homepage and independent project page. */
.account-dialog { width: min(410px, calc(100vw - 32px)); box-sizing: border-box; padding: 32px; border: 1px solid #e6e6ef; border-radius: 20px; background: #fff; color: #252631; box-shadow: 0 20px 70px #17152c26; }
.account-dialog::backdrop { background: #17152c42; }
.account-dialog h2 { margin: 16px 0 6px; font-size: 23px; line-height: 1.4; }
.account-brand { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #744cff; color: #fff; font-size: 22px; font-weight: 700; }
.account-subtitle, .account-note { color: #858592; font-size: 13px; line-height: 1.7; }
.account-subtitle { margin: 0 0 24px; }
.account-dialog .account-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: #868591; font-size: 25px; padding: 2px 8px; cursor: pointer; }
.account-tabs { display: flex; padding: 4px; border-radius: 10px; background: #f4f3f7; margin-bottom: 22px; }
.account-tabs[hidden] { display: none; }
.account-tabs button { flex: 1; border: 0; border-radius: 7px; background: transparent; padding: 9px; color: #858592; cursor: pointer; font-size: 14px; }
.account-tabs button.active { color: #252631; background: #fff; box-shadow: 0 1px 4px #0000000a; }
.account-dialog label { display: block; margin: 14px 0 8px; font-size: 14px; }
.account-dialog input { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid #e3e1ec; border-radius: 9px; font: inherit; font-size: 14px; background: #fff; color: #252631; }
.account-dialog input:focus { outline: 2px solid #cabaff; outline-offset: 1px; }
.account-code-row { display: flex; gap: 10px; }
.account-code-row button, .account-binding button { flex-shrink: 0; border: 0; border-radius: 9px; background: #f4f0ff; padding: 10px 13px; color: #744cff; cursor: pointer; font-size: 13px; }
.account-dialog button:disabled { opacity: .5; cursor: default; }
.account-dialog .account-submit { width: 100%; margin-top: 14px; border: 0; border-radius: 9px; background: #29282e; color: #fff; padding: 13px; font-size: 15px; cursor: pointer; }
.account-status { min-height: 20px; margin: 12px 0 0; color: #7454ad; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.account-note { margin: 16px 0 0; }
.account-binding { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 0; border-bottom: 1px solid #efedf5; }
.account-binding div { min-width: 0; }
.account-binding span { display: block; color: #858592; font-size: 13px; margin-bottom: 6px; }
.account-binding strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.skill-intro-open { overflow: hidden; }
.skill-intro-dialog { box-sizing: border-box; width: min(1400px, calc(100vw - 64px)); max-width: none; max-height: calc(100dvh - 64px); padding: 42px 54px 34px; border: 1px solid #eeeeef; border-radius: 20px; color: #222328; background: white; box-shadow: 0 24px 100px #19172426; overflow: auto; scrollbar-width: thin; scrollbar-color: #d8d8df transparent; }
.skill-intro-dialog::backdrop { background: #20212b50; }
.skill-intro-heading { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; padding-right: 28px; }
.skill-intro-heading h2 { font-size: 23px; line-height: 1.45; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.skill-intro-actions { display: flex; gap: 10px; flex-shrink: 0; }
.skill-intro-actions button { padding: 9px 15px; border: 1px solid #e3e3e7; border-radius: 9px; font-size: 14px; color: #30313a; background: white; cursor: pointer; white-space: nowrap; }
.skill-intro-actions #skillIntroTry { background: #28282c; border-color: #28282c; color: white; }
.skill-intro-actions button:hover { filter: brightness(.94); }
.skill-intro-close { position: absolute; top: 12px; right: 15px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f5f5f7; color: #777b85; font-size: 24px; cursor: pointer; }
.skill-intro-description { margin: 14px 0 12px; color: #757a88; font-size: 14px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.skill-intro-byline { display: flex; align-items: center; gap: 7px; color: #9398a5; font-size: 12px; }
#skillIntroAvatar { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #7770ce; color: white; font-size: 10px; }
#skillIntroUsage:not(:empty)::before { content: '·'; margin: 0 9px 0 2px; }
.skill-intro-error { margin: 12px 0; font-size: 13px; color: #bd6262; }
.skill-intro-error:empty { display: none; }
.skill-intro-showcase { position: relative; margin-top: 28px; }
.skill-intro-gallery { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.skill-intro-gallery::-webkit-scrollbar { display: none; }
.skill-intro-gallery:focus-visible { outline: 2px solid #b5a0f8; outline-offset: 4px; }
.skill-intro-gallery figure { flex: 0 0 min(440px, 78vw); height: clamp(320px, 55vh, 610px); margin: 0; border-radius: 13px; overflow: hidden; background: #f7f7f8; scroll-snap-align: start; }
.skill-intro-gallery img { display: block; width: 100%; height: 100%; object-fit: contain; }
.skill-intro-gallery:has(figure:only-child) { justify-content: center; }
.skill-intro-gallery figure:only-child { flex-basis: min(650px, 100%); }
.skill-intro-dialog button:focus-visible { outline: 2px solid #aa91f6; outline-offset: 3px; }
.skill-intro-gallery .image-unavailable, .skill-intro-empty { display: grid; place-items: center; min-height: 250px; color: #9297a3; font-size: 14px; }
.skill-intro-empty[hidden] { display: none; }
.skill-intro-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e7e7eb; border-radius: 50%; background: #fffffff2; color: #666b73; box-shadow: 0 2px 8px #0000000b; font-size: 26px; cursor: pointer; }
.skill-intro-arrow.previous { left: 10px; }.skill-intro-arrow.next { right: 10px; }
.skill-intro-arrow:disabled { opacity: .35; cursor: default; }.skill-intro-arrow[hidden] { display: none; }
.skill-intro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.skill-intro-tags span { padding: 3px 7px; border-radius: 4px; color: #818695; background: #f5f5f7; font-size: 12px; }
@media (max-width: 700px) {
  .skill-intro-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 42px 20px 24px; border-radius: 15px; }
  .skill-intro-heading { flex-direction: column; gap: 14px; padding-right: 0; }.skill-intro-heading h2 { font-size: 21px; }
  .skill-intro-gallery figure { flex-basis: 78vw; height: 48vh; min-height: 280px; }
}