:root {
  --bg: #eef3f8;
  --dot: #c9d6e5;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --ink: #121826;
  --muted: #718096;
  --faint: #9aa8bb;
  --line: #d7e1ee;
  --line-strong: #9fb0c5;
  --primary: #101827;
  --accent: #2f6df6;
  --accent-soft: #edf4ff;
  --success: #069668;
  --warning: #b7791f;
  --danger: #df2d3f;
  --shadow: 0 18px 48px rgba(22, 34, 51, 0.12);
  --soft-shadow: 0 8px 24px rgba(22, 34, 51, 0.08);
  --radius: 8px;
}

/* Director Skills v2: use the existing Canvas light-glass material hierarchy. */
.app-shell.subpage-open .director-page {
  --director-accent: var(--system-blue, #0878f9);
  --director-accent-soft: rgba(8, 120, 249, 0.09);
  --director-ink: var(--ink, #151b26);
  --director-muted: var(--muted, #596779);
  --director-line: rgba(119, 136, 158, 0.2);
  --director-paper: var(--canvas-bg, #f2f4f9);
  --director-panel: rgba(255, 255, 255, 0.82);
  overflow: auto;
  padding: calc(var(--topbar-height) + 22px) 26px 34px;
  background-color: var(--director-paper);
  background-image: radial-gradient(circle, rgba(96, 116, 145, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
}

.director-page-head {
  width: min(1560px, 100%);
  margin-bottom: 20px;
  align-items: center;
}

.director-page-head h1 {
  margin-top: 6px;
  font-size: clamp(28px, 2.7vw, 38px);
  letter-spacing: -0.035em;
}

.director-eyebrow,
.director-section-kicker,
.director-project-brief > span,
.director-project-budget > span {
  color: var(--director-accent);
}

.director-new-button,
.director-action-dock .primary-button,
.director-review-actions .primary-button,
.director-shot-action-row .primary-button {
  border-color: var(--director-accent);
  background: var(--director-accent);
}

.director-skill-view,
.director-flow-shell {
  width: min(1560px, 100%);
  min-height: calc(100vh - var(--topbar-height) - 142px);
  margin: 0 auto;
}

.director-skill-view {
  display: grid;
  align-content: start;
  gap: 16px;
}

.director-skill-heading,
.director-stage-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.director-skill-heading h2,
.director-stage-heading h2 {
  margin: 5px 0 4px;
  color: var(--director-ink);
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.035em;
}

.director-skill-heading p,
.director-stage-heading p {
  margin: 0;
  color: var(--director-muted);
  font-size: 12px;
}

.director-stage-heading > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

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

.director-skill-card,
.director-recent-panel,
.director-form-card,
.director-upload-card,
.director-character-board,
.director-continuity-panel,
.director-rewrite-grid,
.director-canvas-preview,
.director-canvas-note,
.director-review-list,
.director-delivery-panel {
  border: 1px solid var(--director-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 32px rgba(39, 54, 75, 0.09);
  backdrop-filter: blur(18px) saturate(145%);
}

.director-skill-card {
  position: relative;
  display: flex;
  min-height: 340px;
  padding: 22px;
  overflow: hidden;
  flex-direction: column;
}

.director-skill-card.featured {
  border-color: rgba(8, 120, 249, 0.3);
  background: linear-gradient(145deg, rgba(235, 245, 255, 0.96), rgba(255, 255, 255, 0.88) 60%, rgba(247, 250, 254, 0.94));
  box-shadow: 0 14px 38px rgba(8, 120, 249, 0.1);
}

.director-skill-no {
  color: #8490a1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.15em;
}

.director-skill-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 25px 0 18px;
  place-items: center;
  border: 1px solid var(--director-line);
  border-radius: 15px;
  color: #5f6d80;
  background: #f5f7fb;
  font-size: 28px;
}

.director-skill-card.featured .director-skill-icon {
  border-color: rgba(8, 120, 249, 0.22);
  color: var(--director-accent);
  background: rgba(8, 120, 249, 0.08);
}

.director-skill-card h3 {
  margin: 0;
  color: var(--director-ink);
  font-size: 24px;
  letter-spacing: -0.035em;
}

.director-skill-card > p {
  max-width: 720px;
  margin: 9px 0 18px;
  color: var(--director-muted);
  font-size: 12px;
  line-height: 1.7;
}

.director-skill-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.director-skill-card > div span {
  padding: 6px 9px;
  border: 1px solid rgba(119, 136, 158, 0.17);
  border-radius: 7px;
  color: #536176;
  background: rgba(242, 245, 250, 0.88);
  font-size: 9px;
}

.director-skill-card footer {
  display: flex;
  margin-top: auto;
  padding-top: 20px;
  gap: 8px;
}

.director-recent-panel {
  padding: 18px 20px;
}

.director-recent-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.director-recent-panel h3 {
  margin: 4px 0 0;
  font-size: 16px;
}

.director-recent-panel > header > strong {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--director-accent);
  background: var(--director-accent-soft);
  font-size: 11px;
}

.director-project-list {
  padding-bottom: 0;
}

.director-project-item {
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  align-items: center;
  padding: 12px;
  border-color: rgba(119, 136, 158, 0.13);
  color: var(--director-ink);
  background: rgba(248, 250, 253, 0.7);
}

.director-project-item:hover,
.director-project-item:focus-visible,
.director-project-item.active {
  border-color: rgba(8, 120, 249, 0.22);
  background: rgba(8, 120, 249, 0.06);
}

.director-project-item strong {
  color: var(--director-ink);
}

.director-project-item span,
.director-project-item small {
  color: #748195;
}

.director-project-item em {
  color: #0878f9;
}

.director-project-main {
  display: grid !important;
  justify-content: stretch !important;
  gap: 4px !important;
}

.director-flow-shell {
  display: grid;
  overflow: hidden;
  grid-template-columns: 238px minmax(0, 1fr);
  border: 1px solid var(--director-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 14px 42px rgba(39, 54, 75, 0.09);
}

.director-flow-steps {
  display: flex;
  min-width: 0;
  padding: 18px 14px;
  flex-direction: column;
  border-right: 1px solid var(--director-line);
  background: rgba(236, 239, 247, 0.88);
  backdrop-filter: blur(18px) saturate(140%);
}

.director-flow-project {
  display: grid;
  padding: 7px 7px 16px;
  gap: 4px;
  border-bottom: 1px solid rgba(119, 136, 158, 0.15);
}

.director-flow-project > span {
  color: var(--director-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.director-flow-project > strong {
  overflow: hidden;
  color: #253247;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-flow-project > small {
  overflow: hidden;
  color: #7b8797;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-flow-project .director-status {
  margin-top: 7px;
  justify-self: start;
}

.director-flow-steps .director-stage-rail {
  display: grid;
  margin: 18px 0;
  grid-template-columns: 1fr;
  overflow: visible;
  border: 0;
  background: transparent;
}

.director-flow-steps .director-stage-rail li {
  min-width: 0;
  min-height: 74px;
  padding: 12px 8px 11px 47px;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.director-flow-steps .director-stage-rail li::after {
  position: absolute;
  top: 42px;
  bottom: -8px;
  left: 21px;
  width: 1px;
  background: rgba(119, 136, 158, 0.2);
  content: "";
}

.director-flow-steps .director-stage-rail li:last-child::after {
  display: none;
}

.director-flow-steps .director-stage-rail li > span {
  top: 11px;
  left: 6px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(119, 136, 158, 0.24);
  border-radius: 9px;
  color: #7d8999;
  background: rgba(255, 255, 255, 0.7);
}

.director-flow-steps .director-stage-rail li.active {
  border-radius: 10px;
  background: rgba(8, 120, 249, 0.08);
}

.director-flow-steps .director-stage-rail li.active > span {
  border-color: var(--director-accent);
  color: #fff;
  background: var(--director-accent);
  box-shadow: 0 5px 12px rgba(8, 120, 249, 0.18);
}

.director-flow-steps .director-stage-rail li.complete > span {
  border-color: rgba(32, 170, 135, 0.28);
  color: #159477;
  background: rgba(32, 170, 135, 0.08);
}

.director-flow-steps > .ghost-button {
  margin-top: auto;
  justify-content: center;
}

.director-workspace {
  min-width: 0;
  padding: 22px 26px 26px;
  background: rgba(242, 244, 249, 0.54);
  background-image: none;
}

.director-stage-panel {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.director-import-layout {
  display: grid;
  min-height: 640px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: 14px;
}

.director-form-card,
.director-upload-card,
.director-character-board,
.director-continuity-panel,
.director-delivery-panel {
  padding: 20px;
}

.director-create-form {
  gap: 14px;
}

.director-field textarea {
  min-height: 150px;
}

.director-upload-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.director-document-drop {
  display: grid;
  min-height: 182px;
  padding: 22px;
  place-items: center;
  border: 1px dashed rgba(8, 120, 249, 0.34);
  border-radius: 12px;
  color: var(--director-ink);
  text-align: center;
  background: rgba(8, 120, 249, 0.035);
}

.director-document-drop:hover,
.director-document-drop.dragover {
  border-color: var(--director-accent);
  background: rgba(8, 120, 249, 0.07);
}

.director-document-drop > i {
  color: var(--director-accent);
  font-size: 26px;
}

.director-document-drop strong {
  margin-top: 8px;
  font-size: 13px;
}

.director-document-drop span {
  color: var(--director-muted);
  font-size: 9px;
}

.director-document-drop em {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  background: var(--director-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.director-document-info {
  display: flex;
  min-height: 54px;
  padding: 11px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(119, 136, 158, 0.17);
  border-radius: 10px;
  color: var(--director-muted);
  background: #f7f9fc;
  font-size: 9px;
}

.director-upload-card > p,
.director-canvas-note p,
.director-delivery-panel > p {
  margin: 0;
  color: var(--director-muted);
  font-size: 9px;
  line-height: 1.65;
}

.director-character-layout,
.director-review-layout {
  display: grid;
  min-height: 640px;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}

.director-character-board > header,
.director-delivery-panel > header,
.director-delivery-progress > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.director-character-grid {
  display: grid;
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.director-character-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(119, 136, 158, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.director-character-portrait {
  position: relative;
  display: grid;
  height: 132px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  color: #8391a3;
  background: radial-gradient(circle at 50% 32%, #e3bc9f 0 11%, #8998a5 12% 29%, #dce4eb 30% 100%);
  font-size: 30px;
}

.director-character-portrait span {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  color: #159477;
  background: rgba(255, 255, 255, 0.9);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.director-character-card > label {
  display: grid;
  gap: 5px;
  color: var(--director-muted);
  font-size: 8px;
}

.director-character-card input,
.director-character-card textarea,
.director-character-card select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--director-line);
  border-radius: 7px;
  color: var(--director-ink);
  background: #fafbfd;
  font: inherit;
  font-size: 10px;
}

.director-character-card textarea {
  min-height: 70px;
  resize: vertical;
}

.director-character-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--director-muted);
  font-size: 8px;
}

.director-character-delete {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(225, 77, 69, 0.18);
  border-radius: 7px;
  color: #d7443c;
  background: rgba(225, 77, 69, 0.06);
}

.director-continuity-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.director-continuity-score {
  display: grid;
  min-height: 145px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(32, 170, 135, 0.18);
  border-radius: 12px;
  background: radial-gradient(circle, rgba(32, 170, 135, 0.12), transparent 66%);
}

.director-continuity-score strong {
  color: #20aa87;
  font-size: 38px;
}

.director-continuity-score small {
  color: var(--director-muted);
  font-size: 9px;
}

.director-continuity-checklist {
  display: grid;
}

.director-continuity-checklist > div {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(119, 136, 158, 0.14);
  color: var(--director-muted);
  font-size: 9px;
}

.director-continuity-checklist b.ready {
  color: #159477;
}

.director-rewrite-grid {
  display: grid;
  min-height: 630px;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.director-rewrite-grid > label {
  display: grid;
  min-width: 0;
  padding: 18px 20px;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

.director-rewrite-grid > label + label {
  border-left: 1px solid var(--director-line);
  background: rgba(248, 250, 253, 0.74);
}

.director-rewrite-grid span {
  color: #748195;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.director-rewrite-grid textarea {
  width: 100%;
  min-height: 560px;
  padding: 12px;
  resize: none;
  border: 1px solid rgba(119, 136, 158, 0.17);
  border-radius: 9px;
  color: #465468;
  outline: none;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 12px;
  line-height: 1.9;
}

.director-rewrite-grid textarea:focus {
  border-color: var(--director-accent);
  box-shadow: 0 0 0 3px rgba(8, 120, 249, 0.09);
}

.director-rewrite-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--director-muted);
  font-size: 9px;
}

.director-rewrite-foot > div {
  display: flex;
  gap: 6px;
}

.director-rewrite-foot button {
  padding: 6px 9px;
  border: 1px solid var(--director-line);
  border-radius: 7px;
  color: var(--director-accent);
  background: #fff;
  font-size: 9px;
}

.director-project-summary {
  grid-template-columns: 100px minmax(0, 1fr) 190px;
  border-color: var(--director-line);
  background: rgba(255, 255, 255, 0.82);
}

.director-product-preview {
  color: var(--director-accent);
  background: rgba(8, 120, 249, 0.05);
}

.director-project-budget {
  background: rgba(246, 248, 252, 0.9);
}

.director-shot-list {
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

.director-shot-card {
  border-color: var(--director-line);
  background: rgba(255, 255, 255, 0.9);
}

.director-shot-number {
  background: #eaf3ff;
}

.director-shot-number strong,
.director-shot-number span {
  color: var(--director-accent);
}

.director-shot-number small {
  color: #748195;
}

.director-shot-actions,
.director-review-panel {
  background: rgba(247, 249, 252, 0.86);
}

.director-action-dock {
  position: static;
  margin: 0;
  padding: 12px 0 0;
  background: transparent;
  box-shadow: none;
}

.director-canvas-preview {
  display: grid;
  min-height: 520px;
  padding: 36px;
  place-items: center;
  align-content: center;
  gap: 28px;
  background-color: rgba(248, 250, 253, 0.84);
  background-image: radial-gradient(circle, rgba(96, 116, 145, 0.21) 1px, transparent 1px);
  background-size: 22px 22px;
}

.director-canvas-pipeline {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.director-canvas-pipeline article {
  display: grid;
  width: 165px;
  min-height: 100px;
  padding: 15px;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(119, 136, 158, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(39, 54, 75, 0.1);
}

.director-canvas-pipeline article:first-child {
  border-color: rgba(32, 170, 135, 0.3);
  background: rgba(242, 252, 249, 0.96);
}

.director-canvas-pipeline article:last-child {
  border-color: rgba(8, 120, 249, 0.34);
  background: rgba(241, 247, 255, 0.96);
}

.director-canvas-pipeline article span {
  color: #7b8797;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.director-canvas-pipeline article strong {
  color: #263348;
  font-size: 11px;
}

.director-canvas-pipeline > i {
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, #a6b3c4, var(--director-accent));
}

.director-canvas-preview > p {
  margin: 0;
  color: var(--director-muted);
  font-size: 11px;
}

.director-canvas-note {
  display: flex;
  padding: 16px 18px;
  align-items: flex-start;
  gap: 12px;
}

.director-canvas-note > i {
  color: var(--director-accent);
  font-size: 18px;
}

.director-canvas-note strong {
  display: block;
  margin-bottom: 4px;
  color: #253247;
  font-size: 11px;
}

.director-review-list {
  display: grid;
  grid-auto-rows: max-content;
  max-height: 720px;
  padding: 14px;
  align-content: start;
  gap: 12px;
  overflow: auto;
}

.director-review-shot-card {
  overflow: hidden;
  border: 1px solid var(--director-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.director-review-shot-card > header {
  display: flex;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--director-line);
}

.director-review-shot-card .director-review-panel {
  grid-column: auto;
  border-top: 0;
}

.director-delivery-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.director-delivery-panel > header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--director-line);
}

.director-delivery-panel > header span {
  color: #748195;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.director-delivery-panel > header strong {
  color: var(--director-accent);
  font-size: 13px;
}

.director-delivery-progress {
  padding: 14px;
  border: 1px solid rgba(119, 136, 158, 0.17);
  border-radius: 10px;
  background: #f8fafe;
}

.director-delivery-progress > div {
  height: 4px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 99px;
  background: #e5eaf1;
}

.director-delivery-progress > div i {
  display: block;
  height: 100%;
  background: #20aa87;
}

.director-delivery-progress p {
  margin: 0;
  color: var(--director-muted);
  font-size: 8px;
}

.director-delivery-panel > button {
  display: flex;
  min-height: 58px;
  padding: 10px 12px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.director-delivery-panel > button span {
  display: grid;
  gap: 3px;
}

.director-delivery-panel > button small {
  color: var(--director-muted);
  font-size: 8px;
}

[data-theme="dark"] .director-skill-card,
[data-theme="dark"] .director-recent-panel,
[data-theme="dark"] .director-form-card,
[data-theme="dark"] .director-upload-card,
[data-theme="dark"] .director-character-board,
[data-theme="dark"] .director-continuity-panel,
[data-theme="dark"] .director-rewrite-grid,
[data-theme="dark"] .director-canvas-preview,
[data-theme="dark"] .director-canvas-note,
[data-theme="dark"] .director-review-list,
[data-theme="dark"] .director-delivery-panel,
[data-theme="dark"] .director-character-card,
[data-theme="dark"] .director-review-shot-card {
  background-color: rgba(26, 34, 42, 0.9);
}

@media (max-width: 1220px) {
  .director-import-layout,
  .director-character-layout,
  .director-review-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .director-canvas-pipeline {
    flex-wrap: wrap;
    gap: 10px;
  }

  .director-canvas-pipeline > i {
    width: 22px;
  }
}

@media (max-width: 820px) {
  .director-flow-shell {
    display: block;
    overflow: visible;
  }

  .director-flow-steps {
    border-right: 0;
    border-bottom: 1px solid var(--director-line);
  }

  .director-flow-steps .director-stage-rail {
    display: flex;
    overflow-x: auto;
  }

  .director-flow-steps .director-stage-rail li {
    min-width: 145px;
  }

  .director-flow-steps .director-stage-rail li::after {
    display: none;
  }

  .director-skill-grid,
  .director-rewrite-grid,
  .director-character-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-skill-heading,
  .director-stage-heading,
  .director-rewrite-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .director-stage-heading > div:last-child {
    justify-content: flex-start;
  }

  .director-project-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-rewrite-grid > label + label {
    border-top: 1px solid var(--director-line);
    border-left: 0;
  }
}

/* Video frame extraction node */
.node-editor-panel-frame_extract {
  --node-editor-width: 900px;
}

.node-editor-panel-frame_extract .node-editor-type-pill > i,
.node-frame_extract .node-type-icon {
  color: #188f82;
}

.frame-extraction-workbench .node-workbench-scroll {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.frame-extraction-intro {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.frame-extraction-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #b8e5df;
  border-radius: 13px;
  color: #128779;
  background: #eefaf8;
}

.frame-extraction-mark i {
  font-size: 22px;
}

.frame-extraction-intro > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.frame-extraction-intro strong,
.frame-extraction-intro small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-extraction-intro strong {
  color: var(--nody-text);
  font-size: 15px;
}

.frame-extraction-intro small {
  color: var(--nody-muted);
  font-size: 12px;
}

.frame-local-chip {
  padding: 6px 10px;
  border: 1px solid #b8e5df;
  border-radius: 999px;
  color: #157c71;
  background: #eefaf8;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

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

.frame-mode-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--nody-border);
  border-radius: 10px;
  color: var(--nody-muted-strong);
  background: var(--nody-card);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.frame-mode-tabs button:hover,
.frame-mode-tabs button:focus-visible {
  border-color: #8fcfc6;
  color: #117d70;
  outline: none;
}

.frame-mode-tabs button.selected {
  border-color: #46aa9d;
  color: #0c776a;
  background: #edf9f7;
  box-shadow: inset 0 0 0 1px rgba(70, 170, 157, 0.12);
}

.frame-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.85fr);
  gap: 12px;
  min-height: 272px;
}

.frame-preview-stage,
.frame-selection-panel {
  overflow: hidden;
  border: 1px solid var(--nody-border);
  border-radius: 14px;
  background: #f7f9fb;
}

.frame-preview-stage {
  position: relative;
  min-height: 272px;
  display: grid;
  place-items: center;
  background: #171d24;
}

.frame-preview-stage video {
  width: 100%;
  height: 272px;
  display: block;
  object-fit: contain;
  background: #171d24;
}

.frame-preview-stage.is-empty {
  background: #f5f8fa;
}

.frame-preview-stage.is-empty > div {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--nody-muted);
}

.frame-preview-stage.is-empty i {
  font-size: 30px;
}

.frame-preview-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 11px;
  color: #f7fafc;
  background: rgba(18, 24, 31, 0.84);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.frame-preview-controls button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.frame-preview-controls button:hover,
.frame-preview-controls button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.frame-preview-controls strong,
.frame-preview-controls span {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.frame-selection-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 12px;
  background: var(--nody-card);
}

.frame-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nody-border);
}

.frame-selection-head > span {
  display: grid;
  gap: 2px;
}

.frame-selection-head strong {
  font-size: 13px;
}

.frame-selection-head small {
  color: var(--nody-muted);
  font-size: 11px;
}

.frame-selection-head button {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #9bd4cc;
  border-radius: 9px;
  color: #0f796d;
  background: #effaf8;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.frame-selection-head button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.frame-selected-list {
  min-height: 0;
  max-height: 208px;
  margin: 10px 0 0;
  padding: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 6px;
  list-style: none;
}

.frame-selected-list li {
  min-height: 34px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  padding: 4px 5px;
  border: 1px solid var(--nody-border);
  border-radius: 9px;
  background: #f8fafb;
}

.frame-selected-index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #137e72;
  background: #e6f6f3;
  font-size: 10px;
  font-weight: 800;
}

.frame-selected-list li strong {
  overflow: hidden;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-selected-list li button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--nody-muted);
  background: transparent;
  cursor: pointer;
}

.frame-selected-list li button:hover,
.frame-selected-list li button:focus-visible {
  color: #c24147;
  background: #fff0f1;
  outline: none;
}

.frame-selected-list .frame-selected-empty {
  min-height: 112px;
  grid-template-columns: 1fr;
  place-content: center;
  justify-items: center;
  color: var(--nody-muted);
  text-align: center;
}

.frame-selected-empty small {
  font-size: 11px;
}

.frame-fixed-mode-summary {
  align-self: stretch;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 22px;
  color: var(--nody-muted);
  text-align: center;
}

.frame-fixed-mode-summary i {
  font-size: 28px;
  color: #15877a;
}

.frame-fixed-mode-summary strong {
  color: var(--nody-text);
  font-size: 13px;
}

.frame-fixed-mode-summary small {
  max-width: 220px;
  font-size: 11px;
  line-height: 1.55;
}

.frame-timeline-shell {
  padding: 11px 13px 13px;
  border: 1px solid var(--nody-border);
  border-radius: 12px;
  background: #f8fafb;
}

.frame-timeline-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--nody-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.frame-timeline-labels strong {
  color: var(--nody-muted-strong);
  font-size: 11px;
}

.frame-timeline-track {
  position: relative;
  height: 22px;
  display: grid;
  align-items: center;
}

.frame-timeline-track input {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  accent-color: #168f81;
  cursor: pointer;
}

.frame-timeline-marker {
  position: absolute;
  z-index: 1;
  left: var(--frame-marker-left);
  top: 1px;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: #0d8b7d;
  transform: translateX(-1px);
  pointer-events: none;
}

.frame-output-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.frame-output-strip a {
  min-width: 0;
  overflow: hidden;
  display: grid;
  border: 1px solid var(--nody-border);
  border-radius: 9px;
  color: var(--nody-muted-strong);
  background: #f8fafb;
  text-decoration: none;
}

.frame-output-strip img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.frame-output-strip span {
  overflow: hidden;
  padding: 5px 6px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-extraction-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--nody-muted);
  font-size: 11px;
  line-height: 1.45;
}

.frame-extraction-note i {
  color: #15877a;
  font-size: 14px;
}

.frame-extraction-card-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  overflow: hidden;
  border-radius: inherit;
  background: #e8eef2;
}

.frame-extraction-card-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
}

.frame-extraction-card-placeholder p {
  font-size: 12px;
}

.node-editor-panel-frame_extract.is-user-resized .frame-extraction-workbench,
.node-editor-panel-frame_extract.is-user-resized .node-workbench-main,
.node-editor-panel-frame_extract.is-user-resized .node-console,
.node-editor-panel-frame_extract.is-user-resized .node-workbench-scroll {
  min-height: 0;
  height: 100%;
}

[data-theme="dark"] .frame-extraction-mark,
[data-theme="dark"] .frame-local-chip,
[data-theme="dark"] .frame-mode-tabs button.selected,
[data-theme="dark"] .frame-selection-head button {
  border-color: #276e67;
  color: #81d6cc;
  background: #17312f;
}

[data-theme="dark"] .frame-preview-stage.is-empty,
[data-theme="dark"] .frame-selection-panel,
[data-theme="dark"] .frame-selected-list li,
[data-theme="dark"] .frame-timeline-shell,
[data-theme="dark"] .frame-output-strip a {
  background: #171f27;
}

@media (max-width: 760px) {
  .frame-extraction-intro {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .frame-local-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .frame-preview-layout {
    grid-template-columns: 1fr;
  }

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

/* Motion reference node --------------------------------------------------- */
.node-motion_reference .node-type-icon,
.node-editor-panel-motion_reference .node-editor-type-pill > i {
  color: #0f9b8e;
  background: linear-gradient(145deg, #e4faf6, #edf1ff);
}

.motion-reference-workbench .node-workbench-scroll {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.motion-reference-workbench.motion-helper-disconnected .node-workbench-scroll {
  padding-bottom: 72px;
}

.motion-reference-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.motion-reference-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(15, 155, 142, 0.2);
  border-radius: 13px;
  color: #0f9b8e;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.95), transparent 34%),
    linear-gradient(145deg, #dcf8f3, #e9edff);
  box-shadow: 0 8px 22px rgba(28, 107, 124, 0.1);
}

.motion-reference-mark i {
  font-size: 22px;
}

.motion-reference-intro > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.motion-reference-intro strong,
.motion-reference-intro small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-reference-intro strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.motion-reference-intro small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.motion-local-chip {
  align-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(15, 155, 142, 0.18);
  border-radius: 999px;
  color: #087b71;
  background: rgba(226, 248, 244, 0.76);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.motion-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.motion-mode-grid legend {
  grid-column: 1 / -1;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.04em;
}

.motion-mode-option {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, #f4f8ff);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.motion-mode-option:hover {
  border-color: rgba(47, 126, 247, 0.34);
  transform: translateY(-1px);
}

.motion-mode-option.selected {
  border-color: rgba(15, 155, 142, 0.48);
  background: linear-gradient(145deg, rgba(229, 250, 246, 0.92), rgba(240, 242, 255, 0.84));
  box-shadow: 0 0 0 2px rgba(15, 155, 142, 0.08), 0 9px 22px rgba(29, 109, 125, 0.08);
}

.motion-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.motion-mode-option > span {
  grid-row: 1 / 3;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: center;
  border-radius: 9px;
  color: #526174;
  background: rgba(116, 132, 155, 0.1);
}

.motion-mode-option.selected > span {
  color: #087b71;
  background: rgba(15, 155, 142, 0.13);
}

.motion-mode-option strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.motion-mode-option small {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-reference-settings {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: 9px;
}

.motion-reference-settings .node-field,
.motion-output-contract {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 95%, #f6f8fb);
}

.motion-reference-settings .node-field > span,
.motion-output-contract > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
}

.motion-reference-settings select {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 24px 0 0;
  border: 0;
  color: var(--ink);
  background-color: transparent;
  font-size: 11px;
  font-weight: 700;
}

.motion-output-contract strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-helper-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, #eef4fa);
}

.motion-helper-card.connected {
  border-color: rgba(15, 155, 142, 0.28);
  background: linear-gradient(140deg, rgba(228, 249, 245, 0.86), rgba(246, 249, 252, 0.94));
}

.motion-helper-status-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #657489;
  background: rgba(105, 122, 146, 0.1);
}

.motion-helper-card.connected .motion-helper-status-icon {
  color: #0a8c80;
  background: rgba(15, 155, 142, 0.12);
}

.motion-helper-card.checking .motion-helper-status-icon i {
  animation: interpolation-helper-spin 0.9s linear infinite;
}

.motion-helper-card > div:not(.motion-helper-actions) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

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

.motion-helper-card strong {
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
}

.motion-helper-card small {
  color: var(--muted);
  font-size: 9px;
}

.motion-helper-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.motion-helper-actions a,
.motion-helper-actions button,
.motion-runtime button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid rgba(86, 105, 130, 0.18);
  border-radius: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 94%, #eef3f8);
  font-size: 9px;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}

.motion-helper-guide {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.motion-helper-guide-toggle {
  display: inline-flex;
  width: 100%;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
  text-align: left;
}

.motion-helper-guide-toggle .ph-caret-down {
  margin-left: auto;
}

.motion-helper-guide-toggle:focus-visible {
  outline: 2px solid rgba(45, 139, 245, 0.48);
  outline-offset: 2px;
}

.motion-helper-guide.open .motion-helper-guide-toggle {
  color: var(--accent);
}

.motion-helper-guide-body {
  display: grid;
}

.motion-helper-guide-body[hidden] {
  display: none;
}

.motion-helper-guide ol {
  display: grid;
  gap: 7px;
  margin: 7px 0 0;
  padding: 0;
  counter-reset: motion-helper-step;
  list-style: none;
}

.motion-helper-guide li {
  display: grid;
  grid-template-columns: 18px 68px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.motion-helper-guide li::before {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 6px;
  color: #126dd5;
  background: rgba(45, 139, 245, 0.1);
  font-size: 8px;
  font-weight: 760;
  content: counter(motion-helper-step);
  counter-increment: motion-helper-step;
}

.motion-helper-guide li strong {
  overflow: visible;
  color: var(--ink);
  font-size: 10px;
  line-height: 18px;
  white-space: normal;
}

.motion-helper-guide li span {
  color: var(--muted);
  line-height: 18px;
}

.motion-helper-guide code {
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 9px;
  font-weight: 650;
}

.motion-helper-guide p {
  display: flex;
  gap: 5px;
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.motion-helper-guide p i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.motion-runtime {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(47, 126, 247, 0.18);
  border-radius: 11px;
  background: rgba(47, 126, 247, 0.05);
}

.motion-runtime > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}

.motion-runtime > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-runtime > div strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.motion-progress-track {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(75, 98, 126, 0.12);
}

.motion-progress-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f9b8e, #4f7df3);
}

.motion-artifact-download {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 155, 142, 0.2);
  border-radius: 11px;
  color: inherit;
  background: rgba(229, 249, 245, 0.55);
  text-decoration: none;
}

.motion-artifact-download > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #087b71;
  background: rgba(15, 155, 142, 0.12);
}

.motion-artifact-download > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.motion-artifact-download strong,
.motion-artifact-download small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-artifact-download strong { font-size: 10px; }
.motion-artifact-download small { color: var(--muted); font-size: 9px; }

[data-theme="dark"] .node-motion_reference .node-type-icon,
[data-theme="dark"] .node-editor-panel-motion_reference .node-editor-type-pill > i {
  color: #65ddd0;
  background: linear-gradient(145deg, rgba(17, 101, 93, 0.42), rgba(64, 72, 136, 0.38));
}

[data-theme="dark"] .motion-local-chip {
  color: #77ddd2;
  background: rgba(15, 124, 113, 0.2);
}

@media (max-width: 680px) {
  .motion-reference-intro {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .motion-local-chip {
    display: none;
  }

  .motion-helper-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .motion-helper-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Canvas smoothness: direct manipulation, arrangement, and collapsed groups. */
.canvas-create-dock.canvas-command-dock {
  grid-template-columns: repeat(5, 54px);
}

.arrange-menu {
  position: absolute;
  z-index: 86;
  width: min(304px, calc(100vw - 28px));
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 8px rgba(20, 31, 48, 0.18);
  color: var(--ink);
}

.arrange-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 10px;
}

.arrange-menu-head > span,
.arrange-menu button > span,
.arrange-connected-option > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.arrange-menu-head strong,
.arrange-menu button strong,
.arrange-connected-option strong {
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
}

.arrange-menu-head small,
.arrange-menu button small,
.arrange-connected-option small,
.arrange-menu > p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.35;
}

.arrange-menu-head > i {
  color: var(--accent);
  font-size: 19px;
}

.arrange-menu button {
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  padding: 7px 8px;
  text-align: left;
}

.arrange-menu button > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
}

.arrange-menu button:hover,
.arrange-menu button:focus-visible {
  background: var(--panel-2);
  outline: none;
}

.arrange-connected-option {
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  padding: 7px 8px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.arrange-connected-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.arrange-menu > p {
  margin: 0;
  padding: 4px 8px 2px;
}

.group-collapse {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--muted);
  padding: 0;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.12);
}

.group-collapse:hover,
.group-collapse:focus-visible {
  color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 1px;
}

.group-node.is-collapsed {
  border-style: solid;
  border-width: 1px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 8px rgba(20, 31, 48, 0.14);
}

.group-node.is-collapsed .group-label {
  top: 14px;
  left: 14px;
  right: 14px;
  max-width: none;
}

.group-node.is-collapsed .group-title {
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 2px;
}

.group-node.is-collapsed .group-rename {
  box-shadow: none;
}

.group-node.is-collapsed .group-count {
  top: auto;
  right: auto;
  left: 16px;
  bottom: 18px;
}

.edge-group.collapsed-proxy .edge-path {
  stroke-dasharray: 5 5;
}

.minimap-content,
.edge-layer {
  contain: layout style;
}

.nody-node:not(.selected) > .node-body {
  contain: layout paint style;
}

body.canvas-interacting,
body.canvas-interacting * {
  user-select: none !important;
}

body.canvas-interacting {
  cursor: grabbing;
}

body.canvas-interacting[data-canvas-interaction="resize-node"],
body.canvas-interacting[data-canvas-interaction="resize-group"] {
  cursor: nwse-resize;
}

body.canvas-interacting .node,
body.canvas-interacting .group-node,
body.canvas-interacting .node-port,
body.canvas-interacting .edge-delete-control {
  transition: none !important;
}

body.canvas-interacting iframe,
body.canvas-interacting video,
body.canvas-interacting .node-media {
  pointer-events: none !important;
}

[data-theme="dark"] .arrange-menu {
  background: rgba(24, 31, 40, 0.98);
  color: #f1f5f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .arrange-menu button,
[data-theme="dark"] .arrange-connected-option {
  color: #f1f5f9;
}

[data-theme="dark"] .arrange-menu button:hover,
[data-theme="dark"] .arrange-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .group-node.is-collapsed,
[data-theme="dark"] .group-collapse {
  background: rgba(31, 39, 49, 0.96);
  color: #c3ccd6;
}

@media (max-width: 760px) {
  .canvas-create-dock.canvas-command-dock {
    grid-template-columns: repeat(5, 48px);
  }

  .canvas-create-dock.canvas-command-dock button {
    width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .group-collapse,
  .arrange-menu button,
  .group-node.is-collapsed {
    transition: none !important;
  }
}

.interpolation-mode-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #6266f1) 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, #fff) 92%, var(--accent, #6266f1) 8%);
}

.interpolation-mode-field {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
}

.interpolation-mode-field > span {
  font-size: 12px;
  color: var(--muted, #77798b);
}

.interpolation-helper-card {
  --helper-tone: var(--accent);
  display: grid;
  gap: 9px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--helper-tone) 22%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--helper-tone) 9%, var(--panel)) 0%, var(--panel) 64%),
    var(--panel);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--helper-tone) 9%, transparent);
}

.interpolation-helper-card.connected { --helper-tone: var(--success); }
.interpolation-helper-card.disabled { --helper-tone: var(--muted); }
.interpolation-helper-card.permission { --helper-tone: var(--warning); }

.interpolation-helper-card-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.interpolation-helper-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--helper-tone) 18%, transparent);
  border-radius: 9px;
  color: var(--helper-tone);
  background: color-mix(in srgb, var(--helper-tone) 10%, var(--panel));
  font-size: 16px;
}

.interpolation-helper-card.checking .interpolation-helper-icon i {
  animation: interpolation-helper-spin 800ms linear infinite;
}

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

.interpolation-helper-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.interpolation-helper-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interpolation-helper-copy small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.interpolation-helper-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--helper-tone) 86%, #111827);
  background: color-mix(in srgb, var(--helper-tone) 9%, var(--panel));
  font-size: 8px;
  font-weight: 760;
  white-space: nowrap;
}

.interpolation-helper-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--helper-tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--helper-tone) 12%, transparent);
}

.interpolation-helper-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.interpolation-helper-actions a,
.interpolation-helper-actions button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.interpolation-helper-download {
  color: #fff;
  border-color: var(--primary) !important;
  background: var(--primary);
  box-shadow: 0 5px 12px rgba(16, 24, 39, 0.16);
}

.interpolation-helper-actions button {
  color: var(--ink);
  background: var(--panel);
}

.interpolation-helper-actions a:hover,
.interpolation-helper-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 6px 14px rgba(16, 24, 39, 0.12);
}

.interpolation-helper-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.interpolation-helper-guide {
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.interpolation-helper-guide summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  list-style: none;
}

.interpolation-helper-guide summary::-webkit-details-marker { display: none; }
.interpolation-helper-guide summary i { transition: transform 160ms ease; }
.interpolation-helper-guide[open] summary i { transform: rotate(180deg); }

.interpolation-helper-guide ol {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.interpolation-helper-guide li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.interpolation-helper-guide li > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 800;
}

.interpolation-helper-guide p {
  display: grid;
  gap: 1px;
  margin: 0;
}

.interpolation-helper-guide strong { color: var(--ink); font-size: 9px; }
.interpolation-helper-guide small { color: var(--muted); font-size: 8px; line-height: 1.35; }

.interpolation-runtime {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.interpolation-runtime > div:not(.interpolation-progress-track):not(.interpolation-actions) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.interpolation-runtime strong {
  text-align: right;
  font-weight: 600;
}

.interpolation-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.interpolation-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #696cf5, #32bda7);
  transition: width 180ms ease;
}

.interpolation-runtime p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #b66b22;
  font-size: 11px;
}

.interpolation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.interpolation-actions button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
}

.interpolation-reasons {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 18px;
  color: #b15454;
  font-size: 11px;
  line-height: 1.45;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  color: var(--ink);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.auth-body {
  min-height: 100vh;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 18%, rgba(47, 109, 246, 0.16), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(6, 150, 104, 0.10), transparent 24%),
    linear-gradient(135deg, #f8fbff 0%, #eef4fb 48%, #eaf1f8 100%);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.auth-panel {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(211, 219, 230, 0.88);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 28px 80px rgba(21, 34, 51, 0.16);
  backdrop-filter: blur(22px);
  padding: 28px;
}

.auth-panel .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: white;
  font-weight: 1000;
  box-shadow: var(--soft-shadow);
}

.auth-panel .eyebrow {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-panel h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.auth-panel form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

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

.field-input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(205, 216, 230, 0.95);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.92);
  color: var(--ink);
  padding: 0 13px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.field-input:focus {
  border-color: rgba(47, 109, 246, 0.82);
  background: white;
  box-shadow: 0 0 0 4px rgba(47, 109, 246, 0.12);
}

.primary-button.full {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  justify-content: center;
  border-radius: 13px;
}

.error-line {
  min-height: 20px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
}

.error-line.success {
  color: #18875f;
}

.text-link {
  align-self: flex-start;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}
button.text-link {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}
.account-session-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.account-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}
.account-session-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.account-session-row strong,
.account-session-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-session-row span {
  color: var(--muted);
  font-size: 12px;
}

.app-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 340px;
  overflow: hidden;
}
.app-shell.subpage-open {
  grid-template-columns: minmax(720px, 1fr);
}
.app-shell.subpage-open .inspector {
  display: none;
}

.inspector {
  min-width: 0;
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
  border-style: solid;
  backdrop-filter: blur(10px);
}
.asset-drawer {
  position: fixed;
  left: 14px;
  top: 12px;
  bottom: 12px;
  z-index: 88;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(16px);
}
.asset-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.asset-drawer-head strong,
.asset-drawer-head span {
  display: block;
}
.asset-drawer-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.asset-drawer-actions {
  display: flex;
  gap: 6px;
}
.asset-drawer-search {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  padding: 0 13px;
  color: var(--ink);
}
.asset-drawer-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.asset-drawer-tabs button {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.asset-drawer-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.asset-drawer-grid {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}
.drawer-asset-card,
.drawer-upload-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  padding: 6px;
  text-align: left;
}
.drawer-asset-card:hover,
.drawer-upload-card:hover {
  border-color: var(--primary);
  background: #fff;
}
.drawer-asset-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border-radius: 9px;
  background: #eef3f8;
}
.drawer-asset-thumb img,
.drawer-asset-thumb video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.drawer-asset-card strong,
.drawer-upload-card strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
}
.drawer-asset-card small,
.drawer-upload-card small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.drawer-empty {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}
.inspector {
  grid-column: 2;
  border-width: 0 0 0 1px;
  padding: 14px;
  overflow: auto;
}
#assetPanel {
  display: none;
}
.main {
  grid-column: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 72px 1fr;
}

.brand-row {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 900;
}
.brand-row strong,
.brand-row span { display: block; }
.brand-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.side-section {
  padding: 14px 12px 0;
}
.side-section.grow {
  min-height: 0;
  flex: 1;
  overflow: auto;
}
.section-head,
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nav-list {
  display: grid;
  gap: 7px;
}
.nav-item {
  min-height: 38px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink);
  background: transparent;
  font-weight: 800;
  text-align: left;
}
.nav-item:hover { background: var(--panel-2); border-color: var(--line); }
.nav-item.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item small {
  color: inherit;
  opacity: 0.72;
  font-size: 11px;
}

.account-card {
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
}
.account-button {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 10px;
  text-align: left;
  box-shadow: var(--soft-shadow);
}
.account-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.account-button strong {
  min-width: 48px;
  text-align: right;
}

.topbar {
  position: relative;
  z-index: 10;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.workspace-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.brand-chip,
.workspace-trigger {
  min-width: 0;
  height: 42px;
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: var(--soft-shadow);
}
.brand-chip {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  width: 164px;
  padding: 0 10px;
  text-align: left;
}
.brand-chip:hover,
.workspace-trigger:hover,
.workspace-menu:focus-within .workspace-trigger {
  border-color: var(--line-strong);
  background: #fff;
}
.brand-chip span:last-child,
.workspace-trigger span,
.workspace-trigger strong,
.title-block strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-chip strong,
.brand-chip small {
  display: block;
}
.brand-chip strong {
  font-size: 14px;
  line-height: 1.1;
}
.brand-chip small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.workspace-menu {
  position: relative;
  min-width: 0;
  width: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 4px;
}
.workspace-trigger {
  width: 100%;
  grid-template-rows: auto auto;
  justify-items: start;
  gap: 1px;
  padding: 0 10px;
  text-align: left;
}
.workspace-trigger span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
}
.workspace-trigger strong {
  width: 100%;
  font-size: 13px;
  font-weight: 950;
}
.workspace-menu .icon-button {
  width: 34px;
  height: 42px;
  border-radius: var(--radius);
}
.workspace-menu .nav-list {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 80;
  width: 236px;
  max-height: 330px;
  display: none;
  gap: 6px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  padding: 8px;
}
.workspace-menu:hover .nav-list,
.workspace-menu:focus-within .nav-list {
  display: grid;
}
.round-button,
.icon-button,
.icon-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel);
  font-weight: 900;
}
.round-button { border-radius: 999px; }
.title-block {
  display: none;
}
.title-block strong,
.title-block span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-block span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.toolbar {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.toolbar-shell {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: clamp(420px, 52vw, 900px);
  overflow: hidden;
}
.toolbar-shell::before,
.toolbar-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 28px;
  pointer-events: none;
}
.toolbar-shell::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), transparent);
}
.toolbar-shell::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.92), transparent);
}
.toolbar-shell .toolbar {
  width: 100%;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.toolbar-shell .toolbar button {
  scroll-snap-align: start;
}
.top-account {
  width: 214px;
  min-height: 42px;
  padding: 0 10px;
  box-shadow: var(--soft-shadow);
}
.top-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.top-actions > button:not(.account-button) {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 850;
  white-space: nowrap;
  box-shadow: var(--soft-shadow);
}
.top-actions > button:not(.account-button):hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}
.top-actions > button.active,
.top-account.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}
.top-account.active span,
.top-account.active strong {
  color: #fff;
}
.toolbar button,
.ghost-button,
.danger-button,
.primary-button,
.node-action,
.small-button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 850;
  white-space: nowrap;
}
.toolbar button:hover,
.ghost-button:hover,
.primary-button:hover,
.node-action:hover,
.small-button:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}
.toolbar button.strong,
.primary-button {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.primary-button:hover,
.primary-button:focus-visible {
  color: #fff;
  background: #1c2a40;
  border-color: #1c2a40;
}
.toolbar button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.danger-button {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.canvas-area {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  outline: none;
  background:
    radial-gradient(circle, var(--dot) 1px, transparent 1.2px) 0 0 / 28px 28px,
    linear-gradient(180deg, #f7faff 0%, #edf3fa 100%);
}
.asset-page {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  background: #f3f6fa;
}
.subpage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  background: #f3f6fa;
}
.subpage-head {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
  padding: 18px;
  margin-bottom: 16px;
}
.subpage-head strong,
.subpage-head span {
  display: block;
}
.subpage-head strong {
  font-size: 24px;
  font-weight: 950;
}
.subpage-head span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.subpage-actions,
.subpage-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.account-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}
.subpage-card {
  min-height: 180px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
  padding: 18px;
}
.subpage-card strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  font-weight: 950;
}
.subpage-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.subpage-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}
.account-actions-card {
  align-content: space-between;
}
.logs-page-list {
  display: grid;
  gap: 10px;
}
.logs-page-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
  padding: 14px 16px;
}
.logs-task-cancel {
  align-self: center;
  min-height: 32px;
  border: 1px solid rgba(215, 0, 21, 0.24);
  border-radius: 9px;
  background: var(--panel);
  padding: 0 10px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.logs-task-cancel:hover,
.logs-task-cancel:focus-visible {
  border-color: var(--danger);
  outline: none;
}
.logs-task-settle {
  align-self: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.logs-page-item.success { border-color: rgba(6, 150, 104, 0.34); }
.logs-page-item.error { border-color: rgba(223, 45, 63, 0.34); }
.logs-page-item strong,
.logs-page-item span {
  display: block;
}
.logs-page-item strong {
  font-size: 15px;
  font-weight: 950;
}
.logs-page-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.logs-page-item time {
  color: var(--faint);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.subpage-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  font-weight: 850;
}
.asset-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.asset-page-head strong,
.asset-page-head span {
  display: block;
}
.asset-page-head strong {
  font-size: 24px;
  font-weight: 950;
}
.asset-page-head span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.asset-page-actions {
  display: flex;
  gap: 10px;
}
.asset-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  padding: 6px;
  margin-bottom: 14px;
}
.asset-tabs button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #40506a;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}
.asset-tabs button.active,
.asset-group.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.asset-workspace {
  min-height: calc(100vh - 190px);
  display: grid;
  grid-template-columns: 280px minmax(420px, 1fr) 300px;
  gap: 14px;
}
.asset-library-tree,
.asset-main-panel,
.asset-preview {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
}
.asset-library-tree,
.asset-preview {
  padding: 14px;
}
.asset-panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.asset-panel-title strong,
.asset-panel-title span {
  display: block;
}
.asset-panel-title strong {
  font-size: 14px;
  font-weight: 950;
}
.asset-panel-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.asset-group {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  text-align: left;
  font-weight: 900;
}
.asset-group:hover {
  border-color: var(--line);
  background: var(--panel-2);
}
.asset-group strong {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(113, 128, 150, 0.12);
  font-size: 12px;
}
.asset-main-panel {
  overflow: hidden;
}
.asset-main-top {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 320px);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 14px;
}
.asset-main-top strong,
.asset-main-top span {
  display: block;
}
.asset-main-top strong {
  font-size: 16px;
  font-weight: 950;
}
.asset-main-top span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.asset-search {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}
.asset-grid {
  min-height: 420px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 14px;
}
.asset-card,
.asset-upload-tile {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px;
  text-align: left;
}
.asset-card:hover,
.asset-card.active,
.asset-upload-tile:hover {
  border-color: var(--accent);
  background: #f8fbff;
}
.asset-card-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 7px;
  background: #e9eef5;
  margin-bottom: 9px;
}
.asset-card-media img,
.asset-card-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.asset-card strong,
.asset-card small,
.asset-upload-tile strong,
.asset-upload-tile span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-card strong,
.asset-upload-tile strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.asset-card small,
.asset-upload-tile span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.asset-upload-tile {
  min-height: 180px;
  display: grid;
  place-content: center;
  gap: 4px;
  border-style: dashed;
  text-align: center;
}
.asset-empty-wide {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 900;
}
.asset-preview-body {
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 12px;
}
.asset-preview-media {
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #f8fbff;
}
.asset-preview-media img,
.asset-preview-media video {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}
.asset-preview-info {
  display: grid;
  gap: 4px;
}
.asset-preview-info strong {
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
}
.asset-preview-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.asset-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.asset-preview-empty {
  min-height: 420px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.world {
  position: absolute;
  left: 0;
  top: 0;
  width: 200000px;
  height: 200000px;
  transform-origin: 0 0;
  will-change: transform;
}

.viewport-pan,
.world-scale {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.viewport-pan {
  will-change: transform;
}

.world {
  transform: none;
  will-change: auto;
}
.edge-layer,
.node-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 200000px;
  height: 200000px;
}
.edge-layer {
  pointer-events: auto;
  overflow: visible;
}
.node-layer {
  pointer-events: none;
}
.edge-group {
  pointer-events: visibleStroke;
}
.edge-hit-path {
  fill: none;
  stroke: transparent;
  stroke-width: 24;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke;
}
.edge-path {
  fill: none;
  stroke: #899bb2;
  stroke-width: 2.4;
  stroke-linecap: round;
  cursor: pointer;
  filter: drop-shadow(0 3px 2px rgba(28, 38, 56, 0.08));
  pointer-events: stroke;
}
.edge-group:hover .edge-path,
.edge-group.selected .edge-path {
  stroke: var(--danger);
  stroke-width: 3.4;
}
.edge-path.draft {
  stroke: var(--accent);
  stroke-dasharray: 7 7;
}
.edge-delete-control {
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.edge-group:hover .edge-delete-control,
.edge-group.selected .edge-delete-control,
.edge-delete-control:focus-visible {
  opacity: 1;
  pointer-events: all;
}
.edge-delete-hit {
  fill: #fff;
  stroke: rgba(223, 45, 63, 0.56);
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 18px rgba(22, 34, 51, 0.18));
}
.edge-delete-glyph {
  fill: var(--danger);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.edge-delete-control:hover .edge-delete-hit,
.edge-delete-control:focus-visible .edge-delete-hit {
  fill: #fff6f7;
  stroke: var(--danger);
}

.node,
.group-node {
  position: absolute;
  border-radius: var(--radius);
  transform: translate3d(var(--x), var(--y), 0);
  will-change: transform;
  user-select: none;
  pointer-events: auto;
}
.node {
  width: var(--w);
  height: var(--h);
  min-height: 184px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.node.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(16, 24, 39, 0.12), var(--shadow);
}
.node.multi {
  border-color: var(--accent);
}
.node-image {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.node-image.selected {
  border-color: transparent;
  box-shadow: none;
}
.node-head {
  height: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
}
.node-title-wrap { min-width: 0; }
.node-type {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.node-title {
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}
.node-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.node-tools .node-tool {
  min-width: 36px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  padding: 0 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.node-image .node-head {
  width: max-content;
  max-width: 100%;
  min-width: 220px;
  height: 34px;
  margin: 0 auto 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--soft-shadow);
  padding: 0 8px 0 12px;
}
.node-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  height: calc(100% - 42px);
  overflow: hidden;
}
.node-image .node-body {
  height: calc(100% - 44px);
  gap: 14px;
  overflow: visible;
  padding: 0;
}
.node-stage {
  position: relative;
  flex: 1 1 160px;
  min-height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(16, 24, 39, 0.08), transparent 62%),
    #f8fbff;
}
.node-stage-video,
.node-stage-image,
.node-stage-text { aspect-ratio: auto; }
.node-stage-text { min-height: 88px; }
.node-stage-content {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
}
.node-stage .node-media {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  margin: 0;
  border: 0;
  background: transparent;
}
.node-media-preview {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: #edf2f8;
  padding: 0;
  cursor: zoom-in;
}
.node-stage .node-media-preview .node-media {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-user-drag: none;
}
.node-image .node-stage-image {
  aspect-ratio: auto;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  justify-self: stretch;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}
.node-image .node-media-preview {
  background: transparent;
  appearance: none;
  cursor: grab;
  touch-action: none;
}
.node-image .node-media-preview:active {
  cursor: grabbing;
}
.node-image .node-stage-content {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.node-image .node-console {
  flex: 1 1 240px;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 12px;
}
.node-image.selected .node-console {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(16, 24, 39, 0.12), var(--shadow);
}
.node-image.selected .node-stage-image {
  border-color: transparent;
  box-shadow: none;
}
.node-stage-copy {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  white-space: pre-wrap;
  color: #263346;
  font-size: 12px;
  line-height: 1.55;
}
.stage-placeholder {
  display: grid;
  place-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}
.stage-placeholder strong {
  color: var(--ink);
  font-size: 14px;
}
.stage-placeholder small {
  max-width: 240px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}
.stage-icon {
  color: rgba(16, 24, 39, 0.32);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.stage-status {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}
.stage-status.failed { color: var(--danger); border-color: rgba(223, 45, 63, 0.28); }
.stage-status.succeeded { color: var(--success); border-color: rgba(6, 150, 104, 0.28); }
.stage-status.running,
.stage-status.queued { color: var(--warning); border-color: rgba(183, 121, 31, 0.32); }
.stage-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(159, 176, 197, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  padding: 5px 8px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(8px);
}
.stage-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebf4;
}
.stage-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f6df6 0%, #0f9f7a 100%);
  transition: width 0.45s ease;
}
.stage-progress-label {
  min-width: 34px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-align: right;
}
.stage-queue-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 51px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #82540f;
  font-size: 11px;
  font-weight: 850;
  pointer-events: none;
}
.stage-queue-meta i {
  flex: 0 0 auto;
  font-size: 13px;
}
.stage-queue-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-console {
  position: relative;
  flex: 0 1 auto;
  max-height: 54%;
  overflow: auto;
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  padding: 10px;
}
.node-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.console-tool {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: #40506a;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}
.console-tool:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}
.console-input {
  min-height: 84px;
  margin: 0;
}
.compact-preview {
  max-height: 76px;
}
.node-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.node-bottom-bar select,
.node-bottom-bar input {
  flex: 1 1 86px;
  min-width: 0;
  min-height: 32px;
  font-size: 12px;
}
.image-bottom-bar select:nth-of-type(2),
.video-bottom-bar select:nth-of-type(2) {
  flex-basis: 130px;
}
.image-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  align-items: end;
}
.image-option-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.image-option-grid label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.image-option-grid select,
.image-option-grid input {
  min-height: 32px;
  font-size: 12px;
}
.image-scale-group {
  min-height: 32px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}
.image-scale-group .chip {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.node-bottom-bar input[type="number"] {
  flex: 0 0 54px;
}
.console-model-label,
.console-cost {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.console-run-button {
  flex: 0 0 36px;
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 19px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: var(--soft-shadow);
}
.console-run-button:hover {
  filter: brightness(1.08);
}
.mode-row .chip {
  min-height: 30px;
}
.fps-compact {
  flex: 1 1 150px;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
.fps-compact .chip {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}
.node textarea,
.node select,
.node input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  background: var(--panel-2);
  color: var(--ink);
}
.node textarea {
  min-height: 86px;
  resize: vertical;
  padding: 10px;
  line-height: 1.45;
}
.node select,
.node input {
  min-height: 36px;
  padding: 0 10px;
  font-weight: 800;
}
.node textarea:focus,
.node select:focus,
.node input:focus,
.inspect-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.14);
}
.node-textarea.prompt-text { min-height: 96px; }
.node-textarea.loop-items { min-height: 120px; }
.node-textarea.system-text { min-height: 68px; }
.field-block {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.field-block span,
.node-subtitle,
.control-row label span,
.chip-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.field-block.compact { margin-bottom: 8px; }
.control-row {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}
.control-row.two { grid-template-columns: 1fr 1fr; }
.control-row.three { grid-template-columns: 0.75fr 1fr 1fr; }
.control-row.four { grid-template-columns: 1fr 1fr 74px; }
.control-row label {
  display: grid;
  gap: 4px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.chip {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: #40506a;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}
.chip:hover { border-color: var(--line-strong); background: var(--panel-2); }
.chip.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}
.fps-row {
  padding-top: 2px;
  border-top: 1px dashed var(--line);
}
.node-subtitle {
  margin: 9px 0 6px;
}
.input-preview-list {
  display: grid;
  gap: 7px;
  max-height: 128px;
  overflow: auto;
}
.input-preview-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 6px;
}
.input-preview-item strong,
.input-preview-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-preview-item strong {
  color: var(--ink);
  font-size: 12px;
}
.input-preview-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.input-preview-icon {
  width: 44px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}
.node-empty {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}
.node-result {
  max-height: 150px;
  margin-top: 10px;
  padding: 10px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  color: #263346;
  font-size: 12px;
  line-height: 1.5;
}
.node-media {
  width: 100%;
  max-height: 220px;
  display: block;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f3f6fa;
  margin-bottom: 10px;
}
.node-media.compact {
  width: 44px;
  height: 38px;
  object-fit: cover;
  margin: 0;
}
.output-grid {
  min-height: 54px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.output-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f3f6fa;
}
.node-footer {
  height: 34px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.node-status {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.node-status.succeeded { color: var(--success); }
.node-status.failed { color: var(--danger); }
.node-status.running,
.node-status.queued { color: var(--warning); }
.node-port {
  position: absolute;
  z-index: 4;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--line-strong);
}
.node-port.input { left: -9px; top: calc(50% - 9px); }
.node-port.output { right: -9px; top: calc(50% - 9px); }
.node-port.hot,
.node-port:hover {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.25);
}
.node-resize {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 6;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: nwse-resize;
}
.node-resize:hover,
.node-resize:focus-visible {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.22);
  outline: none;
}

.group-node {
  width: var(--w);
  height: var(--h);
  border: 2px dashed #9eb1c8;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
}
.group-node.selected {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.5);
}
.group-node .group-output-port {
  z-index: 8;
  width: 16px;
  height: 16px;
  right: -9px;
  top: calc(50% - 8px);
  border-width: 3px;
  opacity: 0.58;
  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.group-node:hover .group-output-port,
.group-node.selected .group-output-port,
.group-node .group-output-port:focus-visible {
  opacity: 1;
}
.group-node .group-output-port:hover,
.group-node .group-output-port:focus-visible {
  transform: scale(1.12);
}
.group-node .group-output-port:disabled {
  background: var(--muted);
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: not-allowed;
  opacity: 0.28;
}
.group-title {
  position: absolute;
  left: 12px;
  top: -26px;
  min-width: 120px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  box-shadow: var(--soft-shadow);
  cursor: grab;
}
.group-count {
  position: absolute;
  right: 12px;
  top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.group-resize {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: var(--primary);
  cursor: nwse-resize;
}

.selection-box {
  position: absolute;
  border: 1px solid var(--accent);
  background: rgba(47, 109, 246, 0.12);
  pointer-events: none;
  z-index: 20;
}
.empty-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}
.empty-hint strong {
  color: var(--ink);
  font-size: 18px;
}
.add-menu {
  position: absolute;
  z-index: 45;
  width: 190px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 8px;
  backdrop-filter: blur(10px);
}
.add-menu.connection-menu::before {
  content: "连接到新节点";
  display: block;
  padding: 4px 8px 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  border-bottom: 1px solid var(--line);
}
.add-menu button {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
}
.add-menu button:hover,
.add-menu button:focus-visible {
  border-color: var(--line);
  background: var(--panel-2);
  outline: none;
}
.zoom-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  min-width: 64px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  box-shadow: var(--soft-shadow);
}
.canvas-minimap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  width: 228px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  padding: 10px;
  backdrop-filter: blur(10px);
}
.canvas-area.minimap-active .canvas-minimap {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.minimap-head {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.minimap-head strong {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
}
.minimap-view {
  position: relative;
  height: 118px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    radial-gradient(circle, rgba(154, 168, 187, 0.7) 1px, transparent 1.2px) 0 0 / 12px 12px,
    #f7faff;
  cursor: crosshair;
}
.minimap-content,
.minimap-viewport,
.minimap-node {
  position: absolute;
}
.minimap-node {
  min-width: 3px;
  min-height: 3px;
  border-radius: 2px;
  background: #8da1bc;
  opacity: 0.85;
}
.minimap-node.group {
  border: 1px dashed #6f829d;
  background: rgba(141, 161, 188, 0.16);
}
.minimap-node.llm { background: #7c8ea8; }
.minimap-node.image { background: #2f6df6; }
.minimap-node.video { background: #0f9f7a; }
.minimap-node.output { background: #b7791f; }
.minimap-viewport {
  border: 2px solid var(--primary);
  border-radius: 4px;
  background: rgba(47, 109, 246, 0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
  pointer-events: none;
}
.minimap-actions {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 6px;
  margin-top: 8px;
}
.minimap-actions button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.minimap-actions button:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
  padding: 14px;
  margin-bottom: 14px;
}
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mini-button {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}
.inspect-grid {
  display: grid;
  gap: 10px;
}
.inspect-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}
.inspect-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  padding: 0 10px;
  outline: none;
}
.inspect-textarea {
  min-height: 100px;
  padding: 10px;
  resize: vertical;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  padding: 0 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.task-list {
  display: grid;
  gap: 8px;
}
.task-item-shell {
  position: relative;
}
.task-item-shell > .task-item {
  padding-right: 42px;
}
.task-cancel-button {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215, 0, 21, 0.24);
  border-radius: 9px;
  background: var(--panel);
  color: var(--danger);
  cursor: pointer;
}
.task-cancel-button:hover,
.task-cancel-button:focus-visible {
  border-color: var(--danger);
  outline: none;
}
.task-item-shell.has-recovery > .task-item {
  padding-right: 118px;
}
.task-recover-button {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 9px;
  background: var(--panel);
  color: var(--primary);
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}
.task-recover-button:hover,
.task-recover-button:focus-visible {
  border-color: var(--primary);
  outline: none;
}
.task-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px;
}
.task-item.is-clickable {
  cursor: pointer;
}
.task-item.is-clickable:hover,
.task-item.is-clickable:focus-visible {
  border-color: var(--accent);
  background: #f8fbff;
  outline: none;
}
.task-item strong,
.task-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.task-item .task-queue-summary {
  color: #966015;
  font-weight: 800;
}
.task-item.succeeded { border-color: rgba(6, 150, 104, 0.35); }
.task-item.failed { border-color: rgba(223, 45, 63, 0.35); }
.asset-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
}
.asset-summary-list {
  max-height: none;
}
.asset-sidebar-empty {
  min-height: 68px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.asset-sidebar-summary {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px;
}
.asset-sidebar-summary strong {
  font-size: 24px;
  font-weight: 950;
}
.asset-sidebar-summary span,
.asset-sidebar-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.asset-sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.asset-sidebar-stats span {
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}
.asset-item {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 7px;
  text-align: left;
}
.asset-item:hover { border-color: var(--line-strong); background: #fbfdff; }
.asset-item img,
.asset-item video {
  width: 52px;
  height: 44px;
  object-fit: cover;
  border-radius: 7px;
  background: #eef3f8;
}
.asset-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}
.workflow-summary {
  display: grid;
  gap: 8px;
}
.workflow-stat {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 8px;
}
.workflow-stat strong {
  color: var(--ink);
  font-size: 22px;
}
.workflow-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.workflow-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.workflow-types span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.workflow-template-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.workflow-empty,
.workflow-template-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.workflow-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}
.workflow-template-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
}
.workflow-template-item strong,
.workflow-template-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workflow-template-item strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.workflow-template-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.workflow-template-actions {
  display: flex;
  gap: 5px;
}
.workflow-template-actions button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}
.workflow-template-actions button:hover {
  border-color: var(--line-strong);
  background: #eef4ff;
}
.workflow-template-actions [data-workflow-delete]:hover {
  color: var(--danger);
  border-color: rgba(223, 45, 63, 0.32);
  background: #fff6f7;
}
.log-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}
.log-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 9px;
}
.log-item.success { border-color: rgba(6, 150, 104, 0.34); }
.log-item.error { border-color: rgba(223, 45, 63, 0.34); }
.log-item strong {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
}
.log-item strong span {
  color: var(--faint);
  font-weight: 800;
}
.log-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.shortcut-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(12, 19, 31, 0.28);
}
.modal-card {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 28px;
}
.canvas-create-card {
  display: grid;
  gap: 16px;
}
.modal-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}
.modal-card h2 {
  margin: 0;
  font-size: 22px;
}
.modal-field {
  display: grid;
  gap: 8px;
}
.modal-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.modal-field input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}
.modal-field input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12);
}
.icon-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.metric-row div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 12px;
}
.metric-row span,
.metric-row strong {
  display: block;
}
.metric-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.metric-row strong {
  margin-top: 6px;
  font-size: 24px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.media-preview-modal {
  z-index: 130;
  background: rgba(7, 12, 20, 0.72);
  padding: 28px;
}
.media-preview-card {
  position: relative;
  width: min(1120px, calc(100vw - 56px));
  height: min(82vh, 820px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(10, 15, 25, 0.78);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  padding: 18px;
}
.media-preview-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
}
.media-preview-card .icon-close {
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-weight: 900;
}

/* Apple-inspired product UI layer: calm gray canvas, glass navigation, spacious pages. */
:root {
  --bg: #f5f5f7;
  --dot: #d4dce8;
  --panel: #ffffff;
  --panel-2: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --line: #dfe3ea;
  --line-strong: #bfc7d4;
  --primary: #1d1d1f;
  --accent: #0071e3;
  --accent-soft: #e8f2ff;
  --success: #15803d;
  --warning: #b26a00;
  --danger: #d70015;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
  --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.94), transparent 34%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 42%, #eef2f7 100%);
}

.main {
  grid-template-rows: 84px 1fr;
}

.topbar {
  min-height: 84px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(210, 215, 224, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 18px 48px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.brand-chip,
.workspace-trigger,
.workspace-menu .icon-button,
.top-actions > button:not(.account-button),
.top-account,
.toolbar button,
.ghost-button,
.primary-button,
.danger-button,
.small-button,
.node-action {
  border-color: rgba(205, 213, 224, 0.82);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 20px rgba(0, 0, 0, 0.05);
}

.brand-chip,
.workspace-trigger,
.top-actions > button:not(.account-button),
.top-account {
  min-height: 44px;
}

.brand-mark {
  border-radius: 8px;
  background: linear-gradient(145deg, #0b0d12, #252b36);
  box-shadow: 0 8px 18px rgba(29, 29, 31, 0.16);
}

.toolbar {
  gap: 10px;
  padding: 2px 0 4px;
}

.toolbar button,
.top-actions > button:not(.account-button) {
  color: #1d1d1f;
  font-weight: 760;
}

.toolbar button:hover,
.top-actions > button:not(.account-button):hover,
.brand-chip:hover,
.workspace-trigger:hover,
.workspace-menu:focus-within .workspace-trigger,
.ghost-button:hover,
.small-button:hover {
  border-color: rgba(0, 113, 227, 0.34);
  background: #fff;
  box-shadow: 0 1px 0 #fff inset, 0 12px 28px rgba(0, 113, 227, 0.08);
}

.top-actions > button.active,
.top-account.active,
.toolbar .strong {
  border-color: #1d1d1f;
  background: #1d1d1f;
  color: #fff;
  box-shadow: 0 16px 36px rgba(29, 29, 31, 0.18);
}

.canvas-area {
  background:
    radial-gradient(circle, rgba(129, 148, 174, 0.38) 1px, transparent 1.35px) 0 0 / 30px 30px,
    linear-gradient(180deg, #fbfcff 0%, #f3f6fb 52%, #eef3f8 100%);
}

.inspector {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 253, 0.92));
  box-shadow: -18px 0 42px rgba(0, 0, 0, 0.04);
}

.panel,
.asset-drawer,
.workspace-menu .nav-list,
.modal-card {
  border-color: rgba(211, 217, 226, 0.86);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--soft-shadow);
}

.asset-page,
.subpage {
  padding: 44px clamp(28px, 4.5vw, 72px);
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.98), transparent 28%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 64%, #eef2f7 100%);
}

.asset-page-head,
.subpage-head {
  width: min(100%, 1440px);
  min-height: unset;
  align-items: end;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 0 28px;
  margin: 0 auto 8px;
}

.asset-page-head strong,
.subpage-head strong {
  max-width: 780px;
  color: #1d1d1f;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 820;
  line-height: 1.03;
  letter-spacing: 0;
}

.asset-page-head span,
.subpage-head span {
  max-width: 680px;
  margin-top: 12px;
  color: #6e6e73;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 520;
  line-height: 1.45;
}

.asset-page-actions,
.subpage-actions {
  align-items: center;
  justify-content: flex-end;
}

.asset-tabs {
  width: min(100%, 1440px);
  display: flex;
  margin: 0 auto 18px;
  border-color: rgba(214, 220, 230, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 252, 0.84));
  box-shadow: 0 1px 0 #fff inset, 0 10px 24px rgba(0, 0, 0, 0.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.asset-tabs button {
  min-height: 38px;
  color: #424245;
  font-weight: 760;
}

.asset-tabs button.active,
.asset-group.active {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #fff;
}

.asset-workspace {
  width: min(100%, 1440px);
  min-height: calc(100vh - 270px);
  grid-template-columns: minmax(240px, 0.74fr) minmax(500px, 2fr) minmax(260px, 0.82fr);
  gap: 18px;
  margin: 0 auto;
}

.asset-library-tree,
.asset-main-panel,
.asset-preview,
.subpage-card,
.logs-page-item {
  border-color: rgba(210, 216, 226, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 253, 0.94));
  box-shadow: 0 1px 0 #fff inset, 0 18px 44px rgba(0, 0, 0, 0.065);
}

.asset-main-top {
  min-height: 78px;
  padding: 18px;
}

.asset-main-top strong,
.asset-panel-title strong {
  color: #1d1d1f;
}

.asset-search,
.modal-field input,
.asset-drawer-search,
.inspect-input {
  border-color: rgba(210, 216, 226, 0.9);
  background: rgba(245, 247, 250, 0.96);
  box-shadow: 0 1px 0 #fff inset;
}

.asset-card,
.asset-upload-tile,
.drawer-asset-card,
.drawer-upload-card,
.log-item,
.workflow-empty,
.workflow-template-item,
.metric-row div {
  border-color: rgba(212, 218, 228, 0.9);
  background: #fff;
  box-shadow: 0 1px 0 #fff inset, 0 8px 20px rgba(0, 0, 0, 0.04);
}

.account-page-grid,
.logs-page-list {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.account-page-grid {
  grid-template-columns: 1.35fr 0.85fr 0.85fr;
  grid-auto-rows: minmax(190px, auto);
}

.account-page-grid .subpage-card:first-child {
  grid-row: span 2;
}

.account-actions-card {
  min-height: 190px;
}

.subpage-card {
  padding: 24px;
}

.subpage-card strong {
  color: #1d1d1f;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 820;
  line-height: 1.1;
}

.subpage-card p {
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.55;
}

.subpage-kicker {
  color: #0071e3;
  font-size: 12px;
  letter-spacing: 0;
}

.logs-page-list {
  gap: 12px;
}

.logs-page-item {
  min-height: 78px;
  align-items: center;
  padding: 18px 20px;
}

.logs-page-item strong {
  color: #1d1d1f;
  font-size: 16px;
}

.logs-page-item span {
  color: #6e6e73;
}

.subpage-empty {
  width: min(100%, 1180px);
  margin: 0 auto;
  border-color: rgba(190, 198, 210, 0.9);
  background: rgba(255, 255, 255, 0.72);
}

.modal {
  background: rgba(245, 245, 247, 0.44);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: minmax(520px, 1fr); }
  .inspector { display: none; }
  .toolbar { max-width: 58vw; }
  .asset-workspace { grid-template-columns: 1fr; }
  .asset-main-top { grid-template-columns: 1fr; }
  .account-page-grid { grid-template-columns: 1fr; }
  .account-page-grid .subpage-card:first-child { grid-row: auto; }
  .asset-page-head,
  .subpage-head {
    align-items: start;
    flex-direction: column;
  }
}

/* Canvas polish layer: production-tool clarity with Apple-like calm surfaces. */
.canvas-area {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.92), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(221, 235, 255, 0.72), transparent 30%),
    radial-gradient(circle, rgba(125, 146, 176, 0.34) 1px, transparent 1.35px) 0 0 / 30px 30px,
    linear-gradient(180deg, #fbfcff 0%, #f4f7fb 50%, #edf2f8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.empty-hint {
  min-width: 340px;
  border: 1px solid rgba(216, 223, 234, 0.88);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.06);
  padding: 26px 30px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.empty-hint strong {
  font-size: 22px;
  font-weight: 820;
}

.empty-hint span {
  max-width: 320px;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.55;
}

.node {
  border: 1px solid rgba(211, 219, 230, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 253, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 44px rgba(17, 24, 39, 0.08);
  overflow: visible;
}

.node:hover {
  border-color: rgba(176, 187, 204, 0.98);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 22px 52px rgba(17, 24, 39, 0.11);
}

.node.selected {
  border-color: rgba(0, 113, 227, 0.86);
  box-shadow:
    0 0 0 3px rgba(0, 113, 227, 0.13),
    0 24px 58px rgba(0, 83, 168, 0.16);
}

.node.multi {
  border-color: rgba(0, 113, 227, 0.62);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.10), var(--soft-shadow);
}

.node-head {
  height: 44px;
  border-bottom: 1px solid rgba(223, 228, 236, 0.92);
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 253, 0.78));
}

.node-title {
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 780;
}

.node-type {
  color: #8a8f98;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.node-tools .node-tool {
  min-width: 30px;
  height: 28px;
  border-color: rgba(213, 220, 230, 0.9);
  background: rgba(255, 255, 255, 0.9);
  color: #1d1d1f;
  box-shadow: 0 1px 0 #fff inset;
}

.node-tools .node-tool:hover {
  border-color: rgba(0, 113, 227, 0.38);
  color: #0071e3;
  background: #fff;
}

.node-body {
  padding: 14px;
  gap: 12px;
}

.node-stage {
  border-color: rgba(216, 223, 234, 0.95);
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 113, 227, 0.08), transparent 42%),
    linear-gradient(180deg, #fbfdff, #f4f7fb);
  box-shadow: inset 0 1px 0 #fff;
}

.node-empty {
  border-color: rgba(201, 211, 224, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(245, 247, 251, 0.7));
  color: #8f98a7;
}

.node-result,
.node-console,
.input-preview-item {
  border-color: rgba(216, 223, 234, 0.9);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.node textarea,
.node select,
.node input {
  border-color: rgba(213, 220, 230, 0.94);
  background: #f7f9fc;
  color: #1d1d1f;
  box-shadow: inset 0 1px 0 #fff;
}

.node textarea {
  line-height: 1.55;
}

.node textarea:focus,
.node select:focus,
.node input:focus,
.inspect-input:focus {
  border-color: rgba(0, 113, 227, 0.86);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.13);
}

.chip,
.console-tool,
.mini-button,
.minimap-actions button {
  border-color: rgba(213, 220, 230, 0.92);
  background: rgba(255, 255, 255, 0.86);
  color: #424245;
  box-shadow: 0 1px 0 #fff inset;
}

.chip:hover,
.console-tool:hover,
.mini-button:hover,
.minimap-actions button:hover {
  border-color: rgba(0, 113, 227, 0.38);
  background: #fff;
  color: #0071e3;
}

.chip.active {
  border-color: #1d1d1f;
  background: #1d1d1f;
  color: #fff;
}

.console-run-button {
  border-color: #1d1d1f;
  background: #1d1d1f;
  box-shadow: 0 14px 28px rgba(29, 29, 31, 0.18);
}

.node-port {
  width: 20px;
  height: 20px;
  border: 4px solid rgba(255, 255, 255, 0.96);
  background: #1d1d1f;
  box-shadow:
    0 0 0 1px rgba(143, 155, 174, 0.8),
    0 8px 18px rgba(17, 24, 39, 0.18);
}

.node-port.input { left: -10px; top: calc(50% - 10px); }
.node-port.output { right: -10px; top: calc(50% - 10px); }

.node-port.hot,
.node-port:hover {
  background: #0071e3;
  box-shadow:
    0 0 0 4px rgba(0, 113, 227, 0.16),
    0 10px 24px rgba(0, 113, 227, 0.24);
}

.node-resize,
.group-resize {
  border-color: rgba(255, 255, 255, 0.96);
  background: #1d1d1f;
  box-shadow:
    0 0 0 1px rgba(143, 155, 174, 0.74),
    0 8px 18px rgba(17, 24, 39, 0.16);
}

.node-resize:hover,
.node-resize:focus-visible,
.group-resize:hover {
  background: #0071e3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16);
}

.edge-path {
  stroke: rgba(105, 122, 146, 0.72);
  stroke-width: 2.2;
  filter: drop-shadow(0 4px 5px rgba(17, 24, 39, 0.08));
}

.edge-group:hover .edge-path,
.edge-group.selected .edge-path {
  stroke: #0071e3;
  stroke-width: 3.1;
}

.edge-path.draft {
  stroke: #0071e3;
  stroke-dasharray: 8 8;
}

.edge-delete-hit {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(215, 0, 21, 0.64);
  filter: drop-shadow(0 12px 22px rgba(17, 24, 39, 0.20));
}

.edge-delete-glyph {
  fill: #d70015;
}

.group-node {
  border-color: rgba(150, 165, 186, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(240, 244, 250, 0.28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 40px rgba(17, 24, 39, 0.04);
}

.group-node.selected {
  border-color: rgba(0, 113, 227, 0.82);
  background: rgba(255, 255, 255, 0.56);
}

.group-title {
  border-color: rgba(213, 220, 230, 0.92);
  background: rgba(255, 255, 255, 0.92);
  color: #424245;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
}

.group-label {
  position: absolute;
  top: -22px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 28px);
}

.group-label .group-title {
  position: static;
  max-width: min(360px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
}

.group-rename {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(213, 220, 230, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #5f6b7a;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.group-node:hover .group-rename,
.group-node.selected .group-rename,
.group-rename:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.group-rename:hover,
.group-rename:focus-visible {
  color: var(--primary);
  border-color: rgba(0, 113, 227, 0.42);
}

.group-rename-input {
  width: min(360px, calc(var(--w) - 28px));
  height: 28px;
  border: 1px solid rgba(0, 113, 227, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  color: #111827;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12), 0 0 0 3px rgba(0, 113, 227, 0.12);
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
  outline: none;
}

.add-menu {
  width: 210px;
  border-color: rgba(211, 219, 230, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 253, 0.92));
  box-shadow: 0 22px 56px rgba(17, 24, 39, 0.14);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.add-menu button {
  font-weight: 760;
}

.add-menu button:hover,
.add-menu button:focus-visible {
  border-color: rgba(0, 113, 227, 0.32);
  background: #f2f7ff;
  color: #0071e3;
}

.canvas-minimap {
  width: 238px;
  border-color: rgba(211, 219, 230, 0.9);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 54px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.minimap-view {
  border-color: rgba(214, 220, 230, 0.95);
  background:
    radial-gradient(circle, rgba(132, 151, 181, 0.54) 1px, transparent 1.2px) 0 0 / 12px 12px,
    linear-gradient(180deg, #fbfcff, #f3f6fb);
}

.minimap-viewport {
  border-color: #1d1d1f;
  background: rgba(0, 113, 227, 0.08);
}

.zoom-chip {
  border-color: rgba(211, 219, 230, 0.9);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.inspector {
  padding: 18px;
}

.panel {
  border-color: rgba(211, 219, 230, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 253, 0.92));
  box-shadow: 0 1px 0 #fff inset, 0 12px 30px rgba(17, 24, 39, 0.055);
}

.panel-title {
  color: #6e6e73;
  letter-spacing: 0.04em;
}

.task-item {
  border-color: rgba(213, 220, 230, 0.9);
  background: #fff;
  box-shadow: 0 1px 0 #fff inset, 0 8px 18px rgba(17, 24, 39, 0.035);
}

.task-item.is-clickable:hover,
.task-item.is-clickable:focus-visible {
  border-color: rgba(0, 113, 227, 0.54);
  background: #f7fbff;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.08);
}

/* Page navigation separation: canvas tools stay on canvas, secondary pages stay clean. */
.app-shell {
  grid-template-columns: minmax(720px, 1fr);
}

.inspector {
  display: none;
}

.app-shell.subpage-open .toolbar-shell,
.app-shell.subpage-open .toolbar {
  display: none;
}

.app-shell.subpage-open .topbar {
  grid-template-columns: auto auto;
  justify-content: space-between;
}

.app-shell.subpage-open #saveState {
  display: none;
}

.app-shell.subpage-open .workspace-cluster {
  width: auto;
}

.app-shell.subpage-open .top-actions {
  justify-self: end;
}

.app-shell.subpage-open .asset-page,
.app-shell.subpage-open .subpage {
  padding-top: 56px;
}

/* Dark theme: persisted night mode for canvas and secondary pages. */
[data-theme="dark"] {
  --bg: #0d1117;
  --dot: #263244;
  --panel: #151a22;
  --panel-2: #10151d;
  --ink: #f5f7fb;
  --muted: #a7b0bf;
  --faint: #748093;
  --line: #2a3546;
  --line-strong: #4b5a70;
  --primary: #f5f7fb;
  --accent: #5aa7ff;
  --accent-soft: rgba(90, 167, 255, 0.14);
  --success: #5ee0a0;
  --warning: #ffd166;
  --danger: #ff6575;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  --soft-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 0%, rgba(40, 64, 96, 0.6), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(42, 88, 140, 0.34), transparent 32%),
    linear-gradient(180deg, #0b0f15 0%, #111821 56%, #0d1117 100%);
}

[data-theme="dark"] .topbar {
  border-bottom-color: rgba(70, 83, 104, 0.62);
  background:
    linear-gradient(180deg, rgba(23, 29, 39, 0.86), rgba(15, 20, 28, 0.76));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 48px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .brand-chip,
[data-theme="dark"] .workspace-trigger,
[data-theme="dark"] .workspace-menu .icon-button,
[data-theme="dark"] .top-actions > button:not(.account-button),
[data-theme="dark"] .top-account,
[data-theme="dark"] .toolbar button,
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .primary-button,
[data-theme="dark"] .danger-button,
[data-theme="dark"] .small-button,
[data-theme="dark"] .node-action,
[data-theme="dark"] .theme-toggle {
  border-color: rgba(74, 88, 110, 0.86);
  background: rgba(22, 28, 38, 0.88);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 26px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .brand-chip:hover,
[data-theme="dark"] .workspace-trigger:hover,
[data-theme="dark"] .toolbar button:hover,
[data-theme="dark"] .top-actions > button:not(.account-button):hover,
[data-theme="dark"] .ghost-button:hover,
[data-theme="dark"] .small-button:hover {
  border-color: rgba(90, 167, 255, 0.5);
  background: rgba(31, 39, 52, 0.96);
  color: var(--ink);
}

[data-theme="dark"] .brand-mark,
[data-theme="dark"] .top-actions > button.active,
[data-theme="dark"] .top-account.active,
[data-theme="dark"] .toolbar .strong,
[data-theme="dark"] .chip.active,
[data-theme="dark"] .console-run-button {
  border-color: rgba(90, 167, 255, 0.58);
  background: linear-gradient(180deg, #2f8cff, #006edb);
  color: #fff;
}

[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
  border-color: rgba(90, 167, 255, 0.58);
  background: rgba(90, 167, 255, 0.16);
  color: #d8ecff;
}

[data-theme="dark"] .canvas-area {
  background:
    radial-gradient(circle at 20% 10%, rgba(57, 89, 130, 0.28), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(46, 91, 151, 0.22), transparent 30%),
    radial-gradient(circle, rgba(93, 111, 137, 0.42) 1px, transparent 1.35px) 0 0 / 30px 30px,
    linear-gradient(180deg, #0d131c 0%, #101722 50%, #0b1017 100%);
}

[data-theme="dark"] .asset-page,
[data-theme="dark"] .subpage {
  background:
    radial-gradient(circle at 18% 4%, rgba(40, 64, 96, 0.34), transparent 28%),
    linear-gradient(180deg, #0b0f15 0%, #111821 64%, #0d1117 100%);
}



[data-theme="dark"] .asset-page-head,
[data-theme="dark"] .subpage-head {
  border: 1px solid rgba(58, 72, 94, 0.9);
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 167, 255, 0.10), transparent 28%),
    linear-gradient(135deg, rgba(17, 24, 34, 0.94), rgba(11, 16, 24, 0.88));
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 58px rgba(0,0,0,0.28);
}

[data-theme="dark"] .asset-page-head strong,
[data-theme="dark"] .subpage-head strong {
  color: #f8fafc;
  text-shadow: none;
}

[data-theme="dark"] .asset-page-head span,
[data-theme="dark"] .subpage-head span {
  color: #9aa8bb;
}

[data-theme="dark"] .workspace-menu .nav-list {
  border-color: rgba(58, 72, 94, 0.92);
  background:
    linear-gradient(180deg, rgba(17, 24, 34, 0.98), rgba(11, 16, 24, 0.96));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 22px 54px rgba(0,0,0,0.38);
}

[data-theme="dark"] .workspace-menu .nav-item {
  color: #f5f7fb;
  background: rgba(17, 24, 34, 0.72);
  border-color: transparent;
}

[data-theme="dark"] .workspace-menu .nav-item:hover,
[data-theme="dark"] .workspace-menu .nav-item:focus-visible {
  color: #f8fafc;
  background: rgba(31, 41, 55, 0.96);
  border-color: rgba(90, 167, 255, 0.36);
}

[data-theme="dark"] .workspace-menu .nav-item.active {
  color: #fff;
  background: linear-gradient(180deg, #2f8cff, #006edb);
  border-color: rgba(90, 167, 255, 0.58);
}

.toast-region {
  position: fixed;
  right: 18px;
  top: 88px;
  z-index: 220;
  width: min(360px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.toast-message {
  min-height: 44px;
  display: grid;
  align-items: center;
  border: 1px solid rgba(160, 174, 192, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(16, 24, 39, 0.16);
  color: var(--ink);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
  pointer-events: auto;
  backdrop-filter: blur(16px);
}
.toast-message.error {
  border-color: rgba(223, 45, 63, 0.32);
  color: #a81728;
}
.toast-message.warning {
  border-color: rgba(183, 121, 31, 0.34);
  color: #8a5a0a;
}
.toast-message.success {
  border-color: rgba(6, 150, 104, 0.3);
  color: #047857;
}
.transfer-status {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(31, 45, 66, 0.16);
  color: var(--text);
  pointer-events: auto;
}
.transfer-status[data-tone="success"] { border-color: color-mix(in srgb, #13936f 38%, var(--border)); }
.transfer-status[data-tone="error"] { border-color: color-mix(in srgb, #dc4d53 38%, var(--border)); }
.transfer-status-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 9px; }
.transfer-status-head > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); font-size: 17px; }
.transfer-status-head > div { min-width: 0; display: grid; gap: 2px; }
.transfer-status-head strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transfer-status-head small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.transfer-status-head > button { width: 28px; height: 28px; display: grid; padding: 0; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.transfer-status-head > button:hover { color: var(--text); background: var(--panel-2); }
.transfer-status-head [data-retry-import] { justify-self: start; max-width: 100%; min-height: 28px; margin-top: 6px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--accent); background: var(--panel-2); font-size: 12px; line-height: 1.4; text-align: left; white-space: normal; cursor: pointer; }
.transfer-status-head [data-retry-import]:disabled { opacity: .6; cursor: wait; }
.transfer-status[data-tone="error"] .transfer-status-head strong,
.transfer-status[data-tone="error"] .transfer-status-head small { white-space: normal; overflow-wrap: anywhere; }
.transfer-status-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--border); }
.transfer-status-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 180ms ease; }
.transfer-status[data-tone="success"] .transfer-status-track span { background: #13936f; }
.transfer-status[data-tone="error"] .transfer-status-track span { background: #dc4d53; }
@media (prefers-reduced-motion: reduce) {
  .transfer-status-track span { transition: none; }
}
[data-theme="dark"] .toolbar-shell::before {
  background: linear-gradient(90deg, rgba(15, 20, 28, 0.92), transparent);
}
[data-theme="dark"] .toolbar-shell::after {
  background: linear-gradient(270deg, rgba(15, 20, 28, 0.92), transparent);
}
[data-theme="dark"] .toast-message {
  border-color: rgba(90, 167, 255, 0.2);
  background: rgba(15, 22, 32, 0.92);
  color: var(--ink);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}

/* Final canvas grid behavior: zoom-responsive, quiet by default, hover-lit locally. */
.canvas-area {
  --grid-size: 28px;
  --grid-x: 0px;
  --grid-y: 0px;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  background-color: #f7faff;
  background-image:
    radial-gradient(circle, rgba(188, 196, 205, 0.34) 1px, transparent 1.25px),
    linear-gradient(180deg, #fbfdff 0%, #f5f9fe 48%, #edf4fb 100%);
  background-size:
    var(--grid-size) var(--grid-size),
    100% 100%;
  background-position:
    var(--grid-x) var(--grid-y),
    0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.canvas-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
  background:
    radial-gradient(circle 220px at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 221, 96, 0.24) 0%,
      rgba(94, 166, 255, 0.12) 38%,
      transparent 74%);
  mix-blend-mode: multiply;
}

.canvas-area.pointer-lit::before {
  opacity: 1;
}

[data-theme="dark"] .canvas-area {
  background-color: #070d12;
  background-image:
    radial-gradient(circle, rgba(194, 200, 208, 0.22) 1px, transparent 1.25px),
    linear-gradient(180deg, #071017 0%, #08111a 52%, #060b10 100%);
  background-size:
    var(--grid-size) var(--grid-size),
    100% 100%;
  background-position:
    var(--grid-x) var(--grid-y),
    0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .canvas-area::before {
  background:
    radial-gradient(circle 240px at var(--spotlight-x) var(--spotlight-y),
      rgba(242, 201, 76, 0.34) 0%,
      rgba(78, 122, 86, 0.18) 28%,
      rgba(90, 167, 255, 0.10) 54%,
      transparent 76%);
  mix-blend-mode: screen;
}

/* Subtle hover-lit canvas: keep the board quiet until the pointer passes over it. */
.canvas-area {
  --grid-size: 28px;
  --grid-x: 0px;
  --grid-y: 0px;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  background-color: #f7faff;
  background-image:
    radial-gradient(circle, rgba(188, 196, 205, 0.34) 1px, transparent 1.25px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: var(--grid-x) var(--grid-y);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
}

.canvas-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
  background:
    radial-gradient(circle 210px at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 221, 96, 0.28) 0%,
      rgba(94, 166, 255, 0.16) 36%,
      transparent 72%);
  mix-blend-mode: multiply;
}

.canvas-area.pointer-lit::before {
  opacity: 1;
}

.world {
  z-index: 2;
}

[data-theme="dark"] .canvas-area {
  background-color: #070d12;
  background-image:
    radial-gradient(circle, rgba(194, 200, 208, 0.22) 1px, transparent 1.25px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme="dark"] .canvas-area::before {
  background:
    radial-gradient(circle 230px at var(--spotlight-x) var(--spotlight-y),
      rgba(242, 201, 76, 0.34) 0%,
      rgba(63, 109, 84, 0.18) 28%,
      rgba(90, 167, 255, 0.10) 52%,
      transparent 74%);
  mix-blend-mode: screen;
}

[data-theme="dark"] .asset-page-head strong,
[data-theme="dark"] .subpage-head strong,
[data-theme="dark"] .node-title,
[data-theme="dark"] .asset-main-top strong,
[data-theme="dark"] .asset-panel-title strong,
[data-theme="dark"] .subpage-card strong,
[data-theme="dark"] .logs-page-item strong,
[data-theme="dark"] .empty-hint strong {
  color: var(--ink);
}

[data-theme="dark"] .asset-page-head span,
[data-theme="dark"] .subpage-head span,
[data-theme="dark"] .subpage-card p,
[data-theme="dark"] .logs-page-item span,
[data-theme="dark"] .node-type,
[data-theme="dark"] .empty-hint span {
  color: var(--muted);
}

[data-theme="dark"] .asset-tabs,
[data-theme="dark"] .asset-library-tree,
[data-theme="dark"] .asset-main-panel,
[data-theme="dark"] .asset-preview,
[data-theme="dark"] .subpage-card,
[data-theme="dark"] .logs-page-item,
[data-theme="dark"] .panel,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .asset-drawer,
[data-theme="dark"] .workspace-menu .nav-list,
[data-theme="dark"] .empty-hint {
  border-color: rgba(58, 72, 94, 0.88);
  background:
    linear-gradient(180deg, rgba(22, 28, 38, 0.96), rgba(15, 21, 30, 0.94));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 54px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .node {
  border-color: rgba(62, 78, 101, 0.94);
  background:
    linear-gradient(180deg, rgba(24, 31, 42, 0.98), rgba(14, 20, 29, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 22px 58px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .node:hover {
  border-color: rgba(90, 167, 255, 0.38);
}

[data-theme="dark"] .node.selected {
  border-color: rgba(90, 167, 255, 0.92);
  box-shadow:
    0 0 0 3px rgba(90, 167, 255, 0.16),
    0 28px 70px rgba(0, 0, 0, 0.46);
}

[data-theme="dark"] .node-head {
  border-bottom-color: rgba(58, 72, 94, 0.88);
  background:
    linear-gradient(180deg, rgba(28, 36, 48, 0.94), rgba(17, 24, 34, 0.82));
}

[data-theme="dark"] .node-stage,
[data-theme="dark"] .node-empty,
[data-theme="dark"] .node-result,
[data-theme="dark"] .node-console,
[data-theme="dark"] .input-preview-item,
[data-theme="dark"] .asset-card,
[data-theme="dark"] .asset-upload-tile,
[data-theme="dark"] .drawer-asset-card,
[data-theme="dark"] .drawer-upload-card,
[data-theme="dark"] .log-item,
[data-theme="dark"] .workflow-empty,
[data-theme="dark"] .workflow-template-item,
[data-theme="dark"] .metric-row div,
[data-theme="dark"] .task-item {
  border-color: rgba(58, 72, 94, 0.88);
  background: rgba(17, 24, 34, 0.92);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .node-media-preview,
[data-theme="dark"] .asset-card-media,
[data-theme="dark"] .asset-preview-frame,
[data-theme="dark"] .minimap-view {
  background:
    radial-gradient(circle, rgba(93, 111, 137, 0.44) 1px, transparent 1.2px) 0 0 / 12px 12px,
    #0f1620;
}

[data-theme="dark"] .node textarea,
[data-theme="dark"] .node select,
[data-theme="dark"] .node input,
[data-theme="dark"] .asset-search,
[data-theme="dark"] .asset-drawer-search,
[data-theme="dark"] .inspect-input,
[data-theme="dark"] .modal-field input {
  border-color: rgba(58, 72, 94, 0.92);
  background: #0e141d;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .node textarea::placeholder,
[data-theme="dark"] .asset-search::placeholder,
[data-theme="dark"] .asset-drawer-search::placeholder {
  color: #6f7b8f;
}

[data-theme="dark"] .chip,
[data-theme="dark"] .console-tool,
[data-theme="dark"] .mini-button,
[data-theme="dark"] .minimap-actions button,
[data-theme="dark"] .pill {
  border-color: rgba(58, 72, 94, 0.88);
  background: rgba(22, 28, 38, 0.9);
  color: var(--muted);
}

[data-theme="dark"] .node-port,
[data-theme="dark"] .node-resize,
[data-theme="dark"] .group-resize {
  border-color: rgba(16, 22, 32, 0.96);
  background: #d8ecff;
  box-shadow:
    0 0 0 1px rgba(90, 167, 255, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .node-port.hot,
[data-theme="dark"] .node-port:hover,
[data-theme="dark"] .node-resize:hover,
[data-theme="dark"] .group-resize:hover {
  background: #5aa7ff;
  box-shadow: 0 0 0 4px rgba(90, 167, 255, 0.18);
}

[data-theme="dark"] .edge-path {
  stroke: rgba(148, 163, 184, 0.62);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.28));
}

[data-theme="dark"] .edge-group:hover .edge-path,
[data-theme="dark"] .edge-group.selected .edge-path,
[data-theme="dark"] .edge-path.draft {
  stroke: #5aa7ff;
}

[data-theme="dark"] .edge-delete-hit {
  fill: #151b25;
  stroke: rgba(255, 101, 117, 0.7);
}

[data-theme="dark"] .group-node {
  border-color: rgba(90, 112, 144, 0.74);
  background: rgba(22, 28, 38, 0.32);
}

[data-theme="dark"] .group-node.selected {
  border-color: rgba(90, 167, 255, 0.84);
  background: rgba(90, 167, 255, 0.08);
}

[data-theme="dark"] .canvas-minimap,
[data-theme="dark"] .zoom-chip,
[data-theme="dark"] .add-menu {
  border-color: rgba(58, 72, 94, 0.9);
  background: rgba(17, 24, 34, 0.86);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .modal {
  background: rgba(4, 8, 14, 0.72);
}

/* Visual canvas layer: docked creation tools and icon-led nodes. */
.canvas-create-dock {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 36;
  width: 88px;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
  border: 1px solid rgba(211, 219, 230, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 22px 54px rgba(17, 24, 39, 0.12);
  padding: 8px;
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.canvas-create-dock button {
  min-height: 74px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #1d1d1f;
  padding: 8px 4px;
}

.canvas-create-dock button:hover,
.canvas-create-dock button:focus-visible {
  border-color: rgba(0, 113, 227, 0.32);
  background: #f3f8ff;
  outline: none;
}

.canvas-create-dock strong,
.canvas-create-dock small {
  display: block;
  line-height: 1.05;
}

.canvas-create-dock strong {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 850;
}

.canvas-create-dock small {
  color: #7b8494;
  font-size: 10px;
  font-weight: 780;
}

.dock-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  box-shadow: 0 1px 0 #fff inset, 0 8px 18px rgba(17, 24, 39, 0.08);
  color: #0071e3;
  font-size: 13px;
  font-weight: 950;
}

.dock-prompt::before { content: "T"; }
.dock-llm::before { content: "AI"; }
.dock-image::before { content: "图"; }
.dock-assets::before { content: "库"; }
.dock-upload::before { content: "↑"; font-size: 18px; line-height: 1; }
.dock-video::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
}

.toolbar button {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
}

.toolbar button::before,
.top-actions > button:not(.account-button)::before {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.toolbar button[data-add="prompt"]::before { content: "T"; }
.toolbar button[data-add="loop"]::before { content: "↻"; font-size: 13px; }
.toolbar button[data-add="llm"]::before { content: "AI"; }
.toolbar button[data-add="image"]::before { content: "图"; }
.toolbar button[data-add="video"]::before { content: "▶"; font-size: 11px; }
.toolbar button[data-add="output"]::before { content: "OUT"; font-size: 8px; }
#directorRecipeBtn::before { content: "台"; }
#uploadBtn::before { content: "↑"; font-size: 14px; }
#groupBtn::before { content: "□"; font-size: 13px; }
#runBtn::before { content: "▶"; font-size: 11px; }
#runChainBtn::before { content: "▶▶"; font-size: 8px; }
#saveBtn::before { content: "S"; }
#assetBtn::before { content: "库"; }
#logBtn::before { content: "记"; }
#themeToggleBtn::before { content: "◐"; font-size: 13px; }

.top-actions > button:not(.account-button) {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
}

.node-title-wrap {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.node-title-meta {
  min-width: 0;
}

.node-type-icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  box-shadow: 0 1px 0 #fff inset, 0 8px 18px rgba(17, 24, 39, 0.08);
  color: #0071e3;
  font-size: 11px;
  font-weight: 950;
}

.node-prompt .node-type-icon::before { content: "T"; font-size: 15px; }
.node-loop .node-type-icon::before { content: "↻"; font-size: 18px; }
.node-llm .node-type-icon::before { content: "AI"; }
.node-image .node-type-icon::before { content: "图"; font-size: 14px; }
.node-video .node-type-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}
.node-output .node-type-icon::before { content: "OUT"; font-size: 8px; }

.stage-placeholder {
  gap: 10px;
}

.stage-icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(211, 219, 230, 0.88);
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), transparent 34%),
    linear-gradient(180deg, #ffffff, #eef4fb);
  box-shadow: 0 1px 0 #fff inset, 0 16px 30px rgba(17, 24, 39, 0.08);
  color: transparent;
}

.node-stage-text .stage-icon::before {
  content: "T";
  color: #6e6e73;
  font-size: 28px;
  font-weight: 820;
}

.node-stage-image .stage-icon::before {
  content: "";
  width: 32px;
  height: 24px;
  border: 2px solid #6e6e73;
  border-radius: 7px;
}

.node-stage-image .stage-icon::after {
  content: "";
  position: absolute;
  left: 23px;
  bottom: 19px;
  width: 20px;
  height: 13px;
  background: #6e6e73;
  clip-path: polygon(0 100%, 42% 30%, 66% 62%, 78% 48%, 100% 100%);
  opacity: 0.9;
}

.node-stage-video .stage-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid #6e6e73;
}

.stage-placeholder strong {
  font-size: 15px;
  font-weight: 820;
}

.stage-placeholder small {
  max-width: 260px;
}

[data-theme="dark"] .canvas-create-dock {
  border-color: rgba(58, 72, 94, 0.9);
  background: rgba(17, 24, 34, 0.86);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .canvas-create-dock button {
  color: var(--ink);
}

[data-theme="dark"] .canvas-create-dock button:hover,
[data-theme="dark"] .canvas-create-dock button:focus-visible {
  border-color: rgba(90, 167, 255, 0.44);
  background: rgba(90, 167, 255, 0.12);
}

[data-theme="dark"] .canvas-create-dock small {
  color: var(--muted);
}

[data-theme="dark"] .dock-icon,
[data-theme="dark"] .node-type-icon,
[data-theme="dark"] .stage-icon {
  border-color: rgba(58, 72, 94, 0.86);
  background: linear-gradient(180deg, #202938, #121a25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 24px rgba(0,0,0,0.26);
  color: #5aa7ff;
}

[data-theme="dark"] .toolbar button::before,
[data-theme="dark"] .top-actions > button:not(.account-button)::before {
  background: rgba(90, 167, 255, 0.14);
  color: #d8ecff;
}

[data-theme="dark"] .node-stage-text .stage-icon::before,
[data-theme="dark"] .node-stage-image .stage-icon::before,
[data-theme="dark"] .node-stage-video .stage-icon::before {
  color: #a7b0bf;
  border-color: #a7b0bf;
}

[data-theme="dark"] .node-stage-image .stage-icon::after {
  background: #a7b0bf;
}

@media (max-width: 1100px) {
  .canvas-create-dock {
    left: 12px;
    top: auto;
    bottom: 58px;
    width: auto;
    grid-template-columns: repeat(6, 64px);
    transform: none;
  }

  .canvas-create-dock button {
    min-height: 62px;
  }
}

/* Domestic creator-canvas pass: more visual, less form-heavy. */
:root {
  --canvas-blue: #1d6bff;
  --canvas-cyan: #18a8b8;
  --canvas-green: #0ca678;
  --canvas-amber: #f59f00;
  --canvas-rose: #e03131;
  --glass: rgba(255, 255, 255, 0.78);
}

.topbar {
  min-height: 76px;
  padding: 12px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.82));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 14px 36px rgba(26, 42, 68, 0.08);
}

.brand-chip {
  width: 176px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.brand-mark {
  border-radius: 12px;
  background: linear-gradient(145deg, #111827, #243145);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px rgba(17, 24, 39, 0.18);
}

.workspace-menu {
  width: 154px;
}

.workspace-trigger,
.workspace-menu .icon-button,
.top-actions > button:not(.account-button),
.top-account,
.toolbar button {
  border-radius: 14px;
}

.workspace-trigger span {
  letter-spacing: 0;
  text-transform: none;
}

.toolbar {
  gap: 6px;
  padding: 2px 4px 5px;
  scrollbar-width: thin;
}

.toolbar button,
.top-actions > button:not(.account-button) {
  min-height: 42px;
  border-color: rgba(196, 207, 224, 0.9);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 8px 22px rgba(17, 24, 39, 0.055);
  font-size: 14px;
}

.toolbar button:hover,
.top-actions > button:not(.account-button):hover {
  transform: translateY(-1px);
  border-color: rgba(29, 107, 255, 0.38);
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 12px 28px rgba(29, 107, 255, 0.10);
}

.toolbar button.strong,
.toolbar button.active,
.top-actions > button.active {
  border-color: var(--canvas-blue);
  background: linear-gradient(180deg, #2f7dff, #1557db);
  color: #fff;
  box-shadow: 0 14px 30px rgba(29, 107, 255, 0.24);
}

.toolbar button.strong::before,
.toolbar button.active::before,
.top-actions > button.active::before {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.toolbar button::before,
.top-actions > button:not(.account-button)::before {
  content: "";
  min-width: 24px;
  height: 24px;
  border-radius: 9px;
  background: rgba(29, 107, 255, 0.10);
  color: var(--canvas-blue);
}

.toolbar button[data-add="prompt"]::before { content: "文"; }
.toolbar button[data-add="loop"]::before { content: "环"; }
.toolbar button[data-add="llm"]::before { content: "AI"; }
.toolbar button[data-add="image"]::before { content: "图"; }
.toolbar button[data-add="video"]::before { content: "影"; }
.toolbar button[data-add="output"]::before { content: "出"; }
#directorRecipeBtn::before { content: "导"; }
#uploadBtn::before { content: "上"; }
#groupBtn::before { content: "组"; }
#runBtn::before { content: "跑"; }
#runChainBtn::before { content: "链"; }
#saveBtn::before { content: "存"; }
#assetBtn::before { content: "库"; }
#logBtn::before { content: "志"; }
#themeToggleBtn::before { content: "夜"; }

.canvas-area {
  background-color: #f7faff;
  background-image:
    radial-gradient(circle, rgba(188, 196, 205, 0.34) 1px, transparent 1.24px),
    linear-gradient(180deg, #fbfdff 0%, #f5f9fe 48%, #edf4fb 100%);
  background-size:
    var(--grid-size, 28px) var(--grid-size, 28px),
    100% 100%;
  background-position:
    var(--grid-x, 0px) var(--grid-y, 0px),
    0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.canvas-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
  background:
    radial-gradient(circle 220px at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
      rgba(255, 221, 96, 0.24) 0%,
      rgba(94, 166, 255, 0.12) 38%,
      transparent 74%);
  mix-blend-mode: multiply;
}

.canvas-area.pointer-lit::before {
  opacity: 1;
}

.canvas-create-dock {
  width: 94px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
}

.canvas-create-dock button {
  border-radius: 16px;
}

.canvas-create-dock button:hover,
.canvas-create-dock button:focus-visible {
  background: linear-gradient(180deg, #ffffff, #edf5ff);
}

.dock-icon,
.node-type-icon {
  border: 1px solid rgba(207, 218, 232, 0.92);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 34%),
    linear-gradient(180deg, #ffffff, #eef5ff);
}

.node {
  border-radius: 16px;
  border-color: rgba(198, 210, 226, 0.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,254,0.96));
}

.node-head {
  height: 46px;
  border-radius: 16px 16px 0 0;
}

.node-title-wrap {
  grid-template-columns: 32px minmax(0, 1fr);
}

.node-type-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
}

.node-prompt .node-type-icon,
.node-stage-text .stage-icon { color: #4c6ef5; }
.node-llm .node-type-icon { color: #7950f2; }
.node-image .node-type-icon,
.node-stage-image .stage-icon { color: var(--canvas-cyan); }
.node-video .node-type-icon,
.node-stage-video .stage-icon { color: var(--canvas-green); }
.node-output .node-type-icon { color: var(--canvas-amber); }

.node-tools .node-tool {
  min-width: 34px;
  border-radius: 999px;
  font-size: 0;
}

.node-tools .node-tool::before {
  content: "▶";
  font-size: 12px;
}

.node-stage {
  border-radius: 14px;
  border-color: rgba(207, 218, 232, 0.95);
  background:
    radial-gradient(circle at 50% 42%, rgba(29, 107, 255, 0.08), transparent 42%),
    linear-gradient(180deg, #ffffff, #f4f8fd);
}

.stage-status {
  left: 12px;
  top: 12px;
  min-height: 26px;
  padding: 0 10px;
  background: rgba(255,255,255,0.82);
}

.stage-flow-meta {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: 2px;
  max-width: min(54%, 270px);
  padding: 8px 10px;
  border: 1px solid rgba(207, 218, 232, 0.82);
  border-radius: 12px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.07);
  backdrop-filter: blur(14px);
}

.stage-flow-meta span,
.stage-flow-meta em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.1;
}

.stage-flow-meta strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-placeholder {
  padding-top: 18px;
}

.stage-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  color: transparent;
  font-size: 0;
}

.node-stage-text .stage-icon,
.node-stage-image .stage-icon,
.node-stage-video .stage-icon {
  color: transparent;
  font-size: 0;
}

.node-stage-text .stage-icon::before {
  color: #4c6ef5;
}

.node-stage-image .stage-icon::before {
  border-color: var(--canvas-cyan);
}

.node-stage-image .stage-icon::after {
  background: var(--canvas-cyan);
}

.node-stage-video .stage-icon::before {
  border-left-color: var(--canvas-green);
}

.stage-placeholder strong {
  font-size: 16px;
}

.stage-placeholder small {
  color: #7b8494;
}

.node-console {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,252,255,0.88));
}

.director-console {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.director-input {
  min-height: 150px;
  resize: none;
}

.director-actions,
.director-counts,
.director-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.director-actions .primary {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.director-counts span,
.director-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.director-tabs button.active {
  color: #fff;
  border-color: var(--canvas-blue);
  background: var(--canvas-blue);
}

.director-results {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.director-result-card,
.director-overview-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.92);
  padding: 12px;
}

.director-result-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.director-result-card strong,
.director-overview-card strong {
  font-size: 14px;
}

.director-result-card span,
.director-result-card p,
.director-overview-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.director-empty {
  min-height: 120px;
}

.node-toolbar-row {
  gap: 6px;
}

.console-tool {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border-radius: 10px;
}

.console-tool::before {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(29, 107, 255, 0.10);
  color: var(--canvas-blue);
  font-size: 10px;
  font-weight: 950;
}

.console-tool[data-tool-action="write"]::before { content: "写"; }
.console-tool[data-tool-action="textToVideo"]::before { content: "影"; }
.console-tool[data-tool-action="imagePrompt"]::before { content: "图"; }
.console-tool[data-tool-action="musicPrompt"]::before { content: "音"; }
.console-tool[data-tool-action="uploadReference"]::before { content: "上"; }
.console-tool[data-tool-action="addReference"]::before { content: "参"; }
.console-tool[data-tool-action="stylePrompt"]::before { content: "风"; }
.console-tool[data-tool-action="commonPrompt"]::before { content: "词"; }
.console-tool[data-tool-action="cameraPrompt"]::before { content: "镜"; }
.console-tool[data-tool-action="markShot"]::before { content: "标"; }
.console-tool[data-tool-action="effectPrompt"]::before { content: "效"; }
.console-tool[data-tool-action="characterRef"]::before { content: "角"; }

.console-input,
.node-textarea.prompt-text {
  border-radius: 12px;
  font-size: 13px;
}

.input-preview-list {
  display: grid;
  gap: 6px;
}

.input-preview-item {
  grid-template-columns: 42px 1fr;
  border-radius: 12px;
  background: #f7fbff;
}

.input-preview-icon {
  border-radius: 10px;
  background: rgba(29, 107, 255, 0.10);
  color: var(--canvas-blue);
}

.node-bottom-bar,
.image-option-grid {
  padding-top: 2px;
}

.image-option-grid {
  grid-template-columns: minmax(82px, 1fr) minmax(92px, 1fr) minmax(82px, 1fr) auto;
}

.image-option-grid label span {
  text-transform: none;
  letter-spacing: 0;
}

.image-scale-group .chip,
.fps-compact .chip {
  border-radius: 999px;
}

.node-image .node-stage-image {
  border-radius: 18px;
}

.node-image .node-console {
  border-radius: 18px;
}

.node-media-preview {
  border-radius: 14px;
}

.task-item {
  position: relative;
  min-height: 70px;
  overflow: hidden;
  padding-left: 14px;
}

.task-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--line-strong);
}

.task-item.succeeded::before { background: var(--canvas-green); }
.task-item.failed::before { background: var(--canvas-rose); }
.task-item.running::before,
.task-item.queued::before { background: var(--canvas-amber); }

.asset-page,
.subpage {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.95), transparent 28%),
    linear-gradient(180deg, #f7faff 0%, #eef4fb 100%);
}

.asset-page-head,
.subpage-head {
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,249,255,0.86));
}

.asset-workspace {
  gap: 16px;
}

.asset-library-tree,
.asset-main-panel,
.asset-preview,
.subpage-card,
.logs-page-item {
  border-radius: 18px;
}

.asset-card {
  border-radius: 16px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.asset-card:hover {
  transform: translateY(-2px);
}

.asset-card-media {
  border-radius: 12px;
}

.logs-page-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg, rgba(20, 27, 38, 0.92), rgba(12, 18, 28, 0.82));
}

[data-theme="dark"] .toolbar button::before,
[data-theme="dark"] .top-actions > button:not(.account-button)::before,
[data-theme="dark"] .console-tool::before {
  background: rgba(90, 167, 255, 0.16);
  color: #d8ecff;
}

[data-theme="dark"] .stage-flow-meta {
  border-color: rgba(58, 72, 94, 0.86);
  background: rgba(17, 24, 34, 0.78);
}

[data-theme="dark"] .stage-flow-meta strong {
  color: var(--ink);
}

[data-theme="dark"] .node-console {
  background:
    linear-gradient(180deg, rgba(18, 25, 36, 0.95), rgba(13, 19, 29, 0.9));
}

[data-theme="dark"] .canvas-area {
  background-color: #070d12;
  background-image:
    radial-gradient(circle, rgba(194, 200, 208, 0.22) 1px, transparent 1.24px),
    linear-gradient(180deg, #071017 0%, #08111a 52%, #060b10 100%);
  background-size:
    var(--grid-size, 28px) var(--grid-size, 28px),
    100% 100%;
  background-position:
    var(--grid-x, 0px) var(--grid-y, 0px),
    0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme="dark"] .canvas-area::before {
  background:
    radial-gradient(circle 240px at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
      rgba(242, 201, 76, 0.34) 0%,
      rgba(78, 122, 86, 0.18) 28%,
      rgba(90, 167, 255, 0.10) 54%,
      transparent 76%);
  mix-blend-mode: screen;
}

[data-theme="dark"] .asset-page,
[data-theme="dark"] .subpage {
  background:
    radial-gradient(circle at 18% 4%, rgba(40, 64, 96, 0.34), transparent 28%),
    linear-gradient(180deg, #0b0f15 0%, #111821 64%, #0d1117 100%);
}

@media (max-width: 1200px) {
  .brand-chip { width: 48px; padding: 0 7px; }
  .brand-chip > span:last-child,
  .top-account > span { display: none; }
  .workspace-menu { width: 132px; }
  .top-account { width: auto; min-width: 86px; }
  .toolbar-shell { max-width: none; }
  .toolbar button {
    width: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .toolbar button::before { font-size: 10px; }
}

.account-actions-card .danger-button {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

[data-capability-disabled="true"],
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.35);
}

.account-page-grid .subpage-card:first-child strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 28px;
  line-height: 1.15;
}

.account-page-grid .subpage-card:first-child {
  grid-row: auto;
}

.storage-summary-card strong {
  font-size: 21px;
}

.storage-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #e9edf3;
}

.storage-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #1877f2;
  transition: width 180ms ease;
}

.password-card {
  grid-column: 1 / -1;
}

.password-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.password-form .primary-button {
  min-width: 112px;
  height: 44px;
}

.small-button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--panel));
}

[data-theme="dark"] .storage-meter {
  background: #263243;
}

@media (max-width: 900px) {
  .password-form {
    grid-template-columns: 1fr;
  }
}

/* Approved bright silver glass system, 2026-07-10. */
:root {
  --app-bg: #f4f5fa;
  --canvas-bg: #f2f4f9;
  --sidebar-bg: rgba(236, 239, 247, 0.94);
  --topbar-bg: rgba(244, 245, 250, 0.9);
  --surface-solid: #ffffff;
  --surface-muted: rgba(246, 248, 252, 0.9);
  --control-bg: rgba(255, 255, 255, 0.66);
  --control-hover: rgba(255, 255, 255, 0.92);
  --scrim: rgba(32, 42, 56, 0.3);
  --bg: var(--app-bg);
  --dot: rgba(120, 138, 162, 0.22);
  --panel: var(--surface-solid);
  --panel-2: var(--surface-muted);
  --ink: #151b26;
  --muted: #596779;
  --faint: #8d95a3;
  --line: rgba(119, 136, 158, 0.22);
  --line-strong: rgba(92, 106, 126, 0.42);
  --primary: #151b26;
  --accent: #0878f9;
  --accent-soft: rgba(8, 120, 249, 0.09);
  --system-blue: #0878f9;
  --glass-surface: rgba(255, 255, 255, 0.76);
  --glass-surface-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(119, 136, 158, 0.22);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --glass-shadow: 0 10px 32px rgba(39, 54, 75, 0.1);
  --sidebar-width: 167px;
  --topbar-height: 66px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --press-scale: 0.97;
  --motion-press: 90ms;
  --motion-theme: 220ms;
  --radius: 12px;
}

body {
  color: var(--ink);
  background: var(--app-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  letter-spacing: 0;
}

button,
a,
input,
textarea,
select {
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--app-bg);
}

.app-shell.subpage-open {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.app-sidebar {
  position: relative;
  z-index: 90;
  grid-column: 1;
  grid-row: 1;
  width: var(--sidebar-width);
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-right: 1px solid var(--glass-border);
  background: var(--sidebar-bg);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.42), 12px 0 36px rgba(38, 53, 73, 0.05);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.app-shell.subpage-open .app-sidebar {
  display: flex;
}

.app-main,
.main {
  grid-column: 2;
  grid-row: 1;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  background: var(--app-bg);
}

.app-main {
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.inspector {
  display: none;
}

.topbar {
  position: relative;
  z-index: 70;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  margin: 0;
  padding: 0 26px 0 30px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  border: 0;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  background: var(--topbar-bg);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.topbar-context {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: stretch;
  color: var(--ink);
  overflow: hidden;
}

.topbar-context > i {
  display: none;
}

.topbar-context .title-block {
  min-width: 0;
  display: block;
  flex: 1 1 0;
  overflow: hidden;
}

.topbar-context .title-block > span {
  display: none;
}

.topbar-context .title-block strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

#saveState {
  position: relative;
  flex: 0 0 auto;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

#saveState::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--system-blue);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 2px var(--topbar-bg);
  background: var(--system-blue);
}

.toolbar-shell {
  display: none;
}

.workspace-cluster,
.top-actions {
  gap: 6px;
}

.brand-chip,
.workspace-trigger,
.workspace-menu .icon-button,
.top-account,
.top-actions > button:not(.account-button),
.toolbar button {
  height: 46px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

.brand-chip {
  width: 154px;
  padding: 0 8px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #1c2736;
  box-shadow: var(--glass-highlight);
  font-size: 12px;
}

.workspace-menu {
  width: 142px;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 2px;
}

.workspace-trigger {
  padding: 0 9px;
}

.workspace-trigger span {
  color: #7b818b;
  font-size: 9px;
  letter-spacing: 0;
}

.workspace-trigger strong {
  font-size: 12px;
  font-weight: 720;
}

.brand-chip:hover,
.workspace-trigger:hover,
.workspace-menu:focus-within .workspace-trigger,
.workspace-menu .icon-button:hover,
.top-actions > button:not(.account-button):hover,
.top-account:hover,
.toolbar button:hover {
  border-color: rgba(115, 128, 146, 0.18);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--glass-highlight);
  transform: none;
}

.workspace-menu .nav-list {
  top: calc(100% + 9px);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--glass-highlight), 0 8px 24px rgba(31, 43, 58, 0.12);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.toolbar-shell {
  max-width: none;
}

.toolbar-shell::before,
.toolbar-shell::after {
  display: none;
}

.toolbar {
  gap: 2px;
  padding: 0;
  scrollbar-width: none;
}

.toolbar::-webkit-scrollbar {
  display: none;
}

.toolbar button {
  min-width: 48px;
  padding: 0 8px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  color: #383d46;
  font-size: 10px;
  font-weight: 650;
}

.toolbar button::before,
.top-actions > button:not(.account-button)::before {
  min-width: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #424954;
  font-size: 12px;
  line-height: 1;
}

.toolbar button.strong,
.toolbar button.active,
.top-actions > button.active,
.top-account.active {
  color: #fff;
  border-color: var(--system-blue);
  background: var(--system-blue);
  box-shadow: 0 2px 6px rgba(8, 120, 249, 0.24);
}

.toolbar button.strong::before,
.toolbar button.active::before,
.top-actions > button.active::before {
  color: #fff;
  background: transparent;
}

.top-actions > button:not(.account-button) {
  padding: 0 10px;
  color: #30353d;
  font-size: 12px;
  font-weight: 670;
}

.top-account {
  width: 84px;
  min-width: 84px;
  padding: 0 10px;
  grid-template-columns: 1fr;
  font-size: 12px;
}

.top-account > span {
  display: none;
}

.top-account strong {
  width: 100%;
  text-align: center;
  font-size: 14px;
}

.sidebar-brand {
  width: calc(100% - 24px);
  height: 112px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
  padding: 12px 8px 10px;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  box-shadow: none;
}

.sidebar-brand .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(145deg, #68a6ff, #2d74e7);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px rgba(8, 120, 249, 0.2);
  font-size: 18px;
}

.sidebar-brand strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
  white-space: nowrap;
}

.sidebar-brand small {
  display: none;
}

.sidebar-nav {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.sidebar-workspaces {
  width: 100%;
  display: grid;
  align-items: stretch;
  gap: 6px;
}

.app-sidebar .workspace-menu {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 2px;
  border-radius: 10px;
}

.app-sidebar .workspace-trigger,
.app-sidebar .workspace-menu .icon-button {
  min-height: 48px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.app-sidebar .workspace-trigger {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 7px;
  row-gap: 1px;
  padding: 0 7px;
}

.app-sidebar .workspace-trigger > i {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--system-blue);
  font-size: 18px;
}

.app-sidebar .workspace-trigger span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 560;
}

.app-sidebar .workspace-trigger strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
}

.app-sidebar .workspace-menu:focus-within {
  background: rgba(113, 131, 155, 0.1);
}

.app-sidebar .workspace-trigger:hover,
.app-sidebar .workspace-menu:focus-within .workspace-trigger,
.app-sidebar .workspace-menu .icon-button:hover {
  border-color: var(--glass-border);
  background: var(--control-hover);
}

.app-sidebar .workspace-trigger.active {
  border-color: rgba(8, 120, 249, 0.16);
  background: rgba(8, 120, 249, 0.1);
}

.app-sidebar .workspace-menu .nav-list {
  top: 0;
  left: calc(100% + 12px);
  width: min(340px, calc(100vw - var(--sidebar-width) - 24px));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.app-sidebar .nav-item {
  color: var(--ink);
}

.app-sidebar .nav-item:hover {
  border-color: var(--glass-border);
  background: var(--control-hover);
}

.app-sidebar .nav-item.active {
  border-color: rgba(8, 120, 249, 0.2);
  background: rgba(8, 120, 249, 0.12);
  color: var(--system-blue);
}

.app-sidebar .nav-item.is-switching {
  border-color: rgba(8, 120, 249, 0.28);
  background: rgba(8, 120, 249, 0.08);
  color: var(--system-blue);
  cursor: progress;
}

.app-sidebar .nav-item.is-switching small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0.9;
}

.app-sidebar .nav-item.is-switching small i {
  animation: ecommerce-spin 0.9s linear infinite;
}

.app-sidebar .nav-list-caption {
  padding: 2px 8px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 580;
  line-height: 1.35;
}

.app-sidebar .nav-item-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 4px;
}

.app-sidebar .nav-item-row .nav-item {
  min-width: 0;
  min-height: 44px;
}

.app-sidebar .nav-item-row .nav-item span {
  min-width: 0;
  width: 100%;
}

.app-sidebar .nav-item-actions {
  width: 72px;
  display: grid;
  grid-template-columns: repeat(2, 34px);
  align-items: center;
  justify-content: end;
  gap: 2px;
}

.app-sidebar .nav-item-rename,
.app-sidebar .nav-item-delete {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  opacity: 0.82;
  font-size: 15px;
}

.app-sidebar .nav-item-rename:disabled,
.app-sidebar .nav-item-delete:disabled {
  cursor: progress;
  opacity: 0.42;
}

.app-sidebar .nav-item-rename:hover,
.app-sidebar .nav-item-rename:focus-visible {
  border-color: color-mix(in srgb, var(--system-blue) 34%, var(--glass-border));
  background: color-mix(in srgb, var(--system-blue) 9%, var(--control-bg));
  color: var(--system-blue);
  opacity: 1;
}

.app-sidebar .nav-item-rename.is-confirm {
  color: var(--success);
}

.app-sidebar .nav-item-rename.is-confirm:hover,
.app-sidebar .nav-item-rename.is-confirm:focus-visible {
  border-color: color-mix(in srgb, var(--success) 38%, var(--glass-border));
  background: color-mix(in srgb, var(--success) 10%, var(--control-bg));
  color: var(--success);
}

.app-sidebar .nav-item-delete:hover,
.app-sidebar .nav-item-delete:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--glass-border));
  background: color-mix(in srgb, var(--danger) 9%, var(--control-bg));
  color: var(--danger);
  opacity: 1;
}

.app-sidebar .nav-item-rename:focus-visible,
.app-sidebar .nav-item-delete:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 54%, transparent);
  outline-offset: 1px;
}

.app-sidebar .nav-item-rename-input {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--system-blue) 58%, var(--glass-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--control-bg) 94%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--system-blue) 12%, transparent);
}

.app-sidebar .nav-item-rename-input:focus {
  outline: none;
}

.sidebar-actions {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.sidebar-actions > button {
  position: relative;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  padding: 0 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
}

.sidebar-actions > button i {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 19px;
}

.sidebar-actions > button span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-actions > button:hover,
.sidebar-actions > button:focus-visible {
  border-color: var(--glass-border);
  background: var(--control-hover);
}

.sidebar-actions > button.active {
  border-color: rgba(119, 136, 158, 0.12);
  background: rgba(113, 131, 155, 0.14);
  color: var(--ink);
}

#ecommerceBtn i {
  color: var(--system-blue);
}

.ecommerce-task-badge {
  min-width: 24px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  border: 1px solid rgba(10, 132, 255, 0.24);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.11);
  color: #0878df;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ecommerce-task-badge[data-tone="running"]::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.ecommerce-task-badge[data-tone="running"] {
  grid-auto-flow: column;
}

.ecommerce-task-badge[data-tone="complete"] {
  border-color: rgba(37, 166, 91, 0.22);
  background: rgba(37, 166, 91, 0.1);
  color: #126b39;
}

[data-theme="dark"] .ecommerce-task-badge {
  border-color: rgba(94, 176, 255, 0.32);
  background: rgba(10, 132, 255, 0.18);
  color: #8ac7ff;
}

[data-theme="dark"] .ecommerce-task-badge[data-tone="complete"] {
  border-color: rgba(72, 205, 128, 0.26);
  background: rgba(37, 166, 91, 0.17);
  color: #77dda0;
}

#assetBtn::before,
#logBtn::before,
#themeToggleBtn::before {
  content: none;
  display: none;
}

#themeToggleBtn {
  margin-top: auto;
}

.app-sidebar .top-account {
  width: 100%;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
}

.app-sidebar .top-account > span {
  display: block;
}

.credit-chip {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--ink);
  padding: 0 12px;
  box-shadow: var(--glass-highlight);
}

.credit-chip i {
  color: var(--muted);
  font-size: 16px;
}

.credit-chip strong {
  font-size: 13px;
  font-weight: 680;
}

.top-actions > .credit-chip:hover,
.top-actions > .credit-chip:focus-visible {
  border-color: rgba(8, 120, 249, 0.3);
  background: var(--control-hover);
}

.top-actions > .credit-chip.active {
  border-color: rgba(8, 120, 249, 0.24);
  background: rgba(8, 120, 249, 0.12);
  color: var(--system-blue);
}

.top-actions > .credit-chip.active i {
  color: var(--system-blue);
}

.top-actions {
  gap: 10px;
}

.top-actions > button:not(.account-button) {
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--ink);
  padding: 0 14px;
  box-shadow: var(--glass-highlight);
  font-size: 13px;
}

.top-actions #runBtn {
  min-width: 94px;
  border-color: var(--system-blue);
  background: linear-gradient(180deg, #1687ff, #0878f9);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 5px 14px rgba(8, 120, 249, 0.24);
}

#runBtn {
  display: none;
}

#runChainBtn {
  min-width: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--system-blue);
  background: linear-gradient(180deg, #1687ff, #0878f9);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 5px 14px rgba(8, 120, 249, 0.24);
}

#runChainBtn::before {
  content: none;
  display: none;
}

#runChainBtn .ph {
  font-size: 15px;
}

.canvas-area {
  --grid-size: 28px;
  --grid-x: 0px;
  --grid-y: 0px;
  margin: 0;
  overflow: hidden;
  overflow: clip;
  border-radius: 0;
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--dot) 0.9px, transparent 1.15px);
  background-size: var(--grid-size, 28px) var(--grid-size, 28px);
  background-position: var(--grid-x, 0px) var(--grid-y, 0px);
  box-shadow: none;
}

.canvas-area::before {
  background: radial-gradient(circle 220px at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(8, 120, 249, 0.055), transparent 74%);
  mix-blend-mode: normal;
  transition: opacity 160ms var(--ease-out);
}

.canvas-create-dock {
  left: 50%;
  top: auto;
  bottom: 34px;
  width: min(496px, calc(100% - 360px));
  min-height: 108px;
  grid-template-columns: repeat(6, minmax(64px, 1fr));
  gap: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-surface);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  padding: 9px;
  transform: translateX(-50%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.canvas-create-dock button {
  min-height: 88px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  padding: 6px 4px;
}

.canvas-create-dock button:hover,
.canvas-create-dock button:focus-visible {
  background: rgba(8, 120, 249, 0.08);
  transform: none;
}

.canvas-create-dock strong,
.canvas-create-dock small {
  display: block;
  color: var(--ink);
  line-height: 1.1;
}

.canvas-create-dock strong {
  font-size: 11px;
  font-weight: 650;
}

.canvas-create-dock small {
  display: none;
}

.dock-icon {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 21px;
}

.add-menu,
.asset-drawer {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface-strong);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.asset-drawer {
  left: calc(var(--sidebar-width) + 12px);
  top: calc(var(--topbar-height) + 12px);
  bottom: 12px;
}

.add-menu button,
.asset-drawer button {
  color: var(--ink);
}

.asset-drawer-tabs {
  border-color: var(--glass-border);
  background: var(--glass-surface);
}

.node {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.node.selected,
.node:focus-within {
  border-color: var(--system-blue);
  box-shadow: var(--glass-highlight), 0 0 0 1px rgba(8, 120, 249, 0.2), 0 3px 8px rgba(31, 43, 58, 0.12);
}

.node-head {
  height: 44px;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 12px 12px 0 0;
  background: var(--control-bg);
  padding: 0 10px;
}

.node-title-wrap {
  grid-template-columns: 26px minmax(0, 1fr);
}

.node-type-icon {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 7px;
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--system-blue);
}

.node-title-wrap strong {
  font-size: 12px;
  font-weight: 720;
}

.node-title-wrap span {
  color: var(--muted);
  font-size: 9px;
}

.node-tools .node-tool,
.node-tool,
.node-action {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.node-tools .node-tool:hover,
.node-tool:hover,
.node-action:hover {
  border-color: rgba(112, 126, 145, 0.16);
  background: rgba(118, 130, 147, 0.08);
}

.node-stage,
.node-console {
  border-radius: 9px;
  border-color: var(--glass-border);
  background: var(--surface-muted);
  color: var(--ink);
}

.node-stage {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.node-image .node-console,
.node-video .node-console {
  overflow-x: hidden;
}

.image-option-grid {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.image-scale-group {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.stage-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border-color: var(--glass-border);
  background: var(--control-bg);
  box-shadow: var(--glass-highlight);
}

.stage-status,
.stage-flow-meta {
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: var(--glass-highlight);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.node-toolbar-row,
.image-option-grid,
.node-bottom-bar,
.director-actions,
.director-counts,
.director-tabs {
  gap: 6px;
}

.console-tool,
.chip,
.director-counts span,
.director-tabs button {
  min-height: 30px;
  border-radius: 8px;
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: none;
}

.console-tool:hover,
.chip:hover,
.director-tabs button:hover {
  border-color: rgba(8, 120, 249, 0.3);
  background: rgba(8, 120, 249, 0.06);
}

.chip.active,
.director-tabs button.active {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

.console-input,
.node-textarea,
.prompt-text,
.node select,
.node input,
.modal-field input,
.field-input,
.asset-search,
.asset-drawer-search {
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.console-input:focus,
.node-textarea:focus,
.prompt-text:focus,
.node select:focus,
.node input:focus,
.modal-field input:focus,
.field-input:focus,
.asset-search:focus,
.asset-drawer-search:focus {
  border-color: var(--system-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(8, 120, 249, 0.1);
}

.port {
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #4c5665;
  box-shadow: 0 0 0 1px rgba(53, 64, 79, 0.32);
}

.port:hover,
.port.connecting {
  background: var(--system-blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 249, 0.16);
}

.edge-path {
  stroke: rgba(89, 111, 139, 0.58);
  stroke-width: 2;
}

.edge-path.selected,
.edge-hit:hover + .edge-path {
  stroke: var(--system-blue);
}

.canvas-minimap {
  right: 18px;
  bottom: 18px;
  width: 187px;
  min-height: 178px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  padding: 12px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Keep the fixed zoom controls anchored when the legacy reveal state activates. */
.canvas-area.minimap-active .canvas-minimap {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.minimap-actions button,
.zoom-chip {
  border-color: var(--glass-border);
  background: var(--glass-surface-strong);
  color: var(--ink);
}

.minimap-head {
  display: none;
}

.minimap-view {
  height: 104px;
  margin-top: 0;
  border-color: var(--glass-border);
  background-color: var(--canvas-bg);
}

.minimap-actions {
  position: fixed;
  left: calc(var(--sidebar-width) + 28px);
  bottom: 28px;
  z-index: 46;
  width: 142px;
  height: 44px;
  grid-template-columns: 38px 1fr 38px;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.minimap-actions button {
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--glass-border);
  border-radius: 0;
  background: transparent;
}

.minimap-actions button:last-child {
  border-right: 0;
}

.zoom-chip {
  left: 28px;
  bottom: 28px;
  width: 142px;
  height: 44px;
  opacity: 0;
  pointer-events: none;
}

.empty-hint {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.empty-hint strong {
  font-size: 22px;
  font-weight: 720;
}

.empty-hint span {
  color: var(--muted);
}

.asset-page,
.subpage {
  padding: 28px clamp(22px, 4vw, 64px) 44px;
  color: var(--ink);
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--dot) 0.8px, transparent 1px);
  background-size: 28px 28px;
}

.app-shell.subpage-open .toolbar,
.app-shell.subpage-open .toolbar-shell,
.app-shell.subpage-open .canvas-area {
  display: none;
}

.asset-page-head,
.subpage-head {
  width: min(100%, 1320px);
  min-height: 88px;
  align-items: center;
  margin: 0 auto 18px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.asset-page-head strong,
.subpage-head strong {
  color: var(--ink);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 740;
  line-height: 1.05;
}

.asset-page-head span,
.subpage-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 520;
}

.ghost-button,
.primary-button,
.danger-button,
.small-button,
.mini-button {
  border-radius: 8px;
  box-shadow: none;
}

.ghost-button,
.small-button,
.mini-button {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
}

.primary-button {
  border-color: var(--system-blue);
  background: var(--system-blue);
}

.asset-tabs {
  width: min(100%, 1320px);
  display: flex;
  margin: 0 auto 14px;
  padding: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.asset-tabs button {
  min-height: 34px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.asset-tabs button.active,
.asset-group.active {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

.asset-workspace {
  width: min(100%, 1320px);
  min-height: calc(100vh - 220px);
  margin: 0 auto;
  grid-template-columns: 224px minmax(420px, 1fr) 286px;
  gap: 12px;
}

.asset-library-tree,
.asset-main-panel,
.asset-preview,
.subpage-card {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.asset-library-tree,
.asset-preview {
  padding: 14px;
}

.asset-panel-title,
.asset-main-top {
  border-color: var(--glass-border);
  color: var(--ink);
}

.asset-group {
  border-radius: 8px;
  font-weight: 620;
}

.asset-grid {
  gap: 10px;
  padding: 12px;
}

.asset-card {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: none;
}

.asset-card:hover,
.asset-card.active {
  border-color: rgba(8, 120, 249, 0.5);
  background: var(--control-hover);
  box-shadow: 0 3px 8px rgba(31, 43, 58, 0.08);
  transform: translateY(-1px);
}

.asset-card-media,
.asset-preview-media {
  border-radius: 8px;
  border-color: var(--glass-border);
  background: var(--surface-muted);
}

.asset-upload-tile {
  border-color: var(--glass-border);
  background: var(--glass-surface);
  color: var(--muted);
}

.account-page-grid,
.logs-page-list {
  width: min(100%, 1180px);
}

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

.subpage-card {
  min-height: 168px;
  padding: 20px;
}

.subpage-card strong {
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 720;
}

.account-page-grid .subpage-card:first-child strong {
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.2;
  word-break: break-word;
}

.subpage-kicker {
  color: var(--system-blue);
  font-size: 11px;
  font-weight: 680;
}

.password-card {
  grid-column: 1 / -1;
}

.storage-meter {
  height: 6px;
  background: var(--glass-border);
}

.storage-meter span {
  background: var(--system-blue);
}

.logs-page-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.logs-page-item {
  min-height: 68px;
  margin: 0;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.logs-page-item:last-child {
  border-bottom: 0;
}

.logs-page-item.success,
.logs-page-item.error {
  border-color: var(--glass-border);
}

.subpage-card p,
.logs-page-item span,
.logs-page-item time,
.asset-panel-title span,
.asset-main-top span,
.asset-preview-meta {
  color: var(--muted);
}

.subpage-empty {
  border-color: var(--glass-border);
  background: var(--glass-surface);
  color: var(--muted);
}

.logs-page-item.success strong::before,
.logs-page-item.error strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--success);
  vertical-align: 1px;
}

.logs-page-item.error strong::before {
  background: var(--danger);
}

.auth-body {
  min-height: 100vh;
  overflow: auto;
  color: var(--ink);
  background-color: var(--app-bg);
  background-image:
    radial-gradient(circle at 24% 12%, rgba(8, 120, 249, 0.09), transparent 30%),
    radial-gradient(circle, var(--dot) 0.8px, transparent 1px);
  background-size: auto, 28px 28px;
}

.auth-shell {
  padding: 32px 20px;
}

.auth-panel {
  width: min(420px, 100%);
  gap: 13px;
  padding: 26px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.auth-panel .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #1c2736;
  box-shadow: var(--glass-highlight);
}

.auth-panel .eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
  text-transform: none;
}

.auth-panel h1 {
  font-size: 30px;
  font-weight: 740;
}

.field-input {
  height: 46px;
  border-radius: 8px;
}

.primary-button.full {
  height: 46px;
  border-radius: 8px;
}

.admin-shell {
  width: min(1460px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0 44px;
  color: var(--ink);
  background: transparent;
}

body:has(.admin-shell) {
  min-height: 100vh;
  overflow: auto;
  background-color: var(--app-bg);
  background-image:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--system-blue) 10%, transparent), transparent 28%),
    radial-gradient(circle, var(--dot) 0.7px, transparent 0.8px);
  background-size: auto, 28px 28px;
}

.admin-head {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 4px 2px;
}

.admin-head h1 {
  margin: 3px 0 5px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 740;
}

.admin-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-brand-mark {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--system-blue) 28%, var(--glass-border));
  border-radius: 15px;
  background: linear-gradient(145deg, #54a8ff, #0a84ff 62%, #0060df);
  color: #fff;
  box-shadow: 0 12px 28px rgba(10, 132, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  font-size: 24px;
}

.admin-eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-head-actions,
.admin-filters,
.admin-credit-action,
.admin-config-status {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-icon-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease-out;
}

.admin-icon-button:hover {
  border-color: color-mix(in srgb, var(--system-blue) 30%, var(--glass-border));
  background: var(--control-hover);
}

.admin-icon-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.admin-icon-button:active,
.admin-credit-action button:active {
  transform: scale(0.97);
}

.admin-refresh-status {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-icon-button .is-spinning {
  animation: admin-refresh-spin 700ms linear infinite;
}

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

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

.admin-metric-card {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-surface);
  box-shadow: var(--glass-highlight), 0 10px 26px rgba(24, 39, 61, 0.07);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.admin-metric-card > div {
  min-width: 0;
}

.admin-metric-card span:not(.admin-metric-icon) {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.admin-metric-card strong {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.admin-metric-card small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
}

.admin-metric-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
}

.admin-metric-icon.blue { background: rgba(10, 132, 255, 0.13); color: #0a84ff; }
.admin-metric-icon.violet { background: rgba(175, 82, 222, 0.13); color: #af52de; }
.admin-metric-icon.orange { background: rgba(255, 149, 0, 0.14); color: #d87800; }
.admin-metric-icon.green { background: rgba(48, 209, 88, 0.14); color: #188c3a; }
.admin-metric-icon.teal { background: rgba(22, 143, 135, 0.14); color: #168f87; }

.admin-panel,
.admin-shell > .panel {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.admin-panel-head {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 14px;
}

.admin-panel-head h2 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.admin-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-search,
.admin-sort {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search i,
.admin-sort i {
  position: absolute;
  pointer-events: none;
  color: var(--muted);
}

.admin-search i { left: 12px; }
.admin-sort i { right: 11px; }

.admin-search input,
.admin-sort select {
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  outline: none;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.admin-search input {
  width: 220px;
  padding: 0 12px 0 36px;
}

.admin-sort select {
  min-width: 146px;
  padding: 0 34px 0 12px;
  appearance: none;
}

.admin-search input:focus,
.admin-sort select:focus {
  border-color: var(--system-blue);
  background: var(--glass-surface-strong);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.admin-table {
  overflow-x: auto;
}

.admin-table-head,
.admin-user {
  min-width: 1320px;
  display: grid;
  grid-template-columns: minmax(250px, 1.55fr) 92px 128px 150px minmax(210px, 1.15fr) 138px 252px;
  align-items: center;
  gap: 14px;
}

.admin-table-head {
  padding: 10px 22px;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--control-bg) 70%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-users {
  min-width: 1320px;
}

.admin-user {
  min-height: 100px;
  padding: 16px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  background: transparent;
  color: var(--ink);
  transition: background 140ms ease;
}

.admin-user:last-child { border-bottom: 0; }
.admin-user:hover { background: color-mix(in srgb, var(--control-hover) 72%, transparent); }

.admin-user-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.admin-user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--system-blue) 22%, var(--glass-border));
  border-radius: 11px;
  background: rgba(10, 132, 255, 0.11);
  color: var(--system-blue);
  font-size: 14px;
  font-weight: 760;
}

.admin-user-identity > div {
  min-width: 0;
}

.admin-user-identity strong {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-identity span,
.admin-user-identity small,
.admin-number-cell span,
.admin-number-cell small,
.admin-task-cell span,
.admin-task-cell small,
.admin-date-cell span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.admin-account-state {
  width: fit-content;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(48, 209, 88, 0.1);
  color: #188c3a !important;
  font-weight: 680;
}

.admin-account-state.disabled {
  background: rgba(255, 69, 58, 0.1);
  color: #d72f27 !important;
}

.admin-number-cell strong {
  margin-right: 3px;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.admin-number-cell > span {
  display: inline;
}

.admin-consumed-cell small {
  margin-top: 5px;
  white-space: nowrap;
}

.admin-model-cell > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.admin-user-storage-summary {
  color: var(--system-blue) !important;
}

.admin-user-concurrency-summary {
  color: #138b7e !important;
}

.admin-credit-action {
  align-items: stretch;
  flex-direction: column;
  gap: 7px;
}

.admin-credit-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.admin-credit-control .inline-input {
  width: 100%;
  min-width: 0;
}

.admin-user-storage-control,
.admin-user-video-concurrency-control,
.admin-user-model-entitlement-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
}

.admin-user-storage-control label,
.admin-user-video-concurrency-control label,
.admin-user-model-entitlement-control label {
  min-width: 0;
}

.admin-user-storage-control label > span,
.admin-user-video-concurrency-control label > span,
.admin-user-model-entitlement-control label > span {
  display: block;
  margin: 0 0 4px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.admin-user-storage-control input,
.admin-user-video-concurrency-control input {
  width: 100%;
  min-width: 0;
}

.admin-user-storage-control button,
.admin-user-video-concurrency-control button,
.admin-user-model-entitlement-control button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--system-blue) 28%, var(--glass-border));
  border-radius: 8px;
  color: var(--system-blue);
  font-size: 11px;
  font-weight: 720;
}

.admin-user-storage-control button:disabled,
.admin-user-video-concurrency-control button:disabled,
.admin-user-model-entitlement-control button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-user-model-entitlement-control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 7px 0 6px 2px;
  accent-color: var(--system-blue);
}

.admin-status-button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #ff453a 32%, var(--glass-border));
  border-radius: 8px;
  background: rgba(255, 69, 58, 0.07);
  color: #c92f27;
  font-size: 11px;
  font-weight: 680;
}

.admin-status-button.restore {
  border-color: color-mix(in srgb, #30d158 32%, var(--glass-border));
  background: rgba(48, 209, 88, 0.08);
  color: #188c3a;
}

.admin-status-button:hover {
  filter: brightness(0.97);
}

.admin-status-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-account-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-delete-button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d82d25;
  border-radius: 8px;
  background: #d82d25;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.admin-delete-button:hover {
  background: #bd241e;
  border-color: #bd241e;
}

.admin-delete-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-task-cell strong,
.admin-date-cell strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 680;
}

.admin-task-cell small {
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 149, 0, 0.12);
  color: #c56f00;
}

.admin-model-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-usage-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 630;
  white-space: nowrap;
}

.admin-usage-chip strong { font-variant-numeric: tabular-nums; }
.admin-usage-chip.blue { background: rgba(10, 132, 255, 0.11); color: #0873dd; }
.admin-usage-chip.violet { background: rgba(175, 82, 222, 0.11); color: #9a42c5; }
.admin-usage-chip.orange { background: rgba(255, 149, 0, 0.12); color: #bd6b00; }

.admin-date-cell strong {
  color: var(--muted);
  font-weight: 560;
  line-height: 1.45;
}

.admin-credit-action input {
  width: 82px;
  height: 36px;
  padding: 0 9px;
  border-radius: 9px;
  outline: none;
  font-size: 12px;
}

.admin-credit-action button {
  min-width: 64px;
  height: 36px;
  border-radius: 9px;
  transition: transform 100ms ease-out, opacity 140ms ease;
}

.admin-credit-action button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.admin-empty {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.admin-empty i { font-size: 28px; }
.admin-empty strong { color: var(--ink); font-size: 14px; }
.admin-empty span { font-size: 12px; }

.admin-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.modal {
  background: var(--scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-card,
.canvas-create-card {
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-strong);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.media-preview-card {
  border-color: var(--glass-border);
  background: var(--glass-surface);
}

.toast-message {
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-strong);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.config-strip,
.metric-row > div,
.admin-user input,
.admin-user button,
.password-form input,
.drawer-asset-card,
.drawer-upload-card {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
}

.config-strip {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 22px 14px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--control-bg);
}

.admin-storage-capacity {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(360px, 1.3fr) minmax(260px, 0.9fr);
  align-items: center;
  gap: 22px;
  margin: 0 22px 16px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--control-bg) 82%, transparent);
}

.admin-video-concurrency {
  grid-template-columns: minmax(280px, 1fr) minmax(520px, 2fr);
}

.admin-video-concurrency .admin-storage-icon {
  background: rgba(19, 139, 126, 0.11);
  color: #138b7e;
}

.admin-video-concurrency .admin-storage-copy p + p {
  margin-top: 3px;
}

.admin-storage-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-storage-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.11);
  color: var(--system-blue);
  font-size: 21px;
}

.admin-storage-copy h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.admin-storage-copy p,
.admin-storage-control small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.admin-storage-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-storage-metrics > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--glass-surface) 74%, transparent);
}

.admin-storage-metrics dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.admin-storage-metrics dd {
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-storage-control > label {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.admin-storage-control > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.admin-storage-control input {
  width: 100%;
  min-width: 0;
}

.admin-storage-control small {
  display: block;
  margin-top: 5px;
}

.admin-config-status {
  flex-wrap: wrap;
}

.admin-config-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
}

.admin-config-pill.ready {
  background: rgba(48, 209, 88, 0.11);
  color: #148239;
}

.admin-config-pill.missing {
  background: rgba(255, 69, 58, 0.1);
  color: #c73830;
}

[data-theme="dark"] .admin-metric-icon.orange,
[data-theme="dark"] .admin-task-cell small,
[data-theme="dark"] .admin-usage-chip.orange {
  color: #ffb340;
}

[data-theme="dark"] .admin-metric-icon.green,
[data-theme="dark"] .admin-config-pill.ready {
  color: #4fda72;
}

[data-theme="dark"] .admin-usage-chip.blue {
  color: #69b4ff;
}

[data-theme="dark"] .admin-usage-chip.violet {
  color: #d28cff;
}

[data-theme="dark"] .admin-config-pill.missing {
  color: #ff7b73;
}

.admin-cost-note {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-view[hidden] {
  display: none !important;
}

.admin-insight-panel,
.admin-asset-panel {
  min-height: 560px;
}

.admin-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  gap: 12px;
  padding: 0 20px 18px;
}

.admin-chart-card,
.admin-model-ranking {
  min-height: 220px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 82%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--control-bg) 64%, transparent);
}

.admin-card-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-card-kicker span {
  font-size: 12px;
  font-weight: 720;
}

.admin-card-kicker small {
  color: var(--muted);
  font-size: 10px;
}

.admin-token-trend {
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.6vw, 8px);
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--glass-border);
  background-image: linear-gradient(to bottom, var(--glass-border) 1px, transparent 1px);
  background-size: 100% 33.33%;
}

.admin-trend-point {
  min-width: 3px;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 7px;
}

.admin-trend-point > span {
  width: min(100%, 16px);
  min-height: 5px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #31d5c8, #168f87);
  box-shadow: 0 5px 12px rgba(22, 143, 135, 0.16);
  transition: filter 140ms ease, transform 140ms ease;
}

.admin-trend-point:hover > span {
  filter: brightness(1.08);
  transform: scaleX(1.08);
}

.admin-trend-point small {
  min-height: 11px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.admin-ranking-list {
  display: grid;
  gap: 10px;
}

.admin-ranking-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.admin-ranking-item > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(22, 143, 135, 0.1);
  color: #168f87;
  font-size: 9px;
  font-weight: 760;
}

.admin-ranking-item > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
}

.admin-ranking-item strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ranking-item small {
  color: var(--muted);
  font-size: 9px;
}

.admin-ranking-item i {
  height: 3px;
  grid-column: 1 / -1;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #168f87, #31d5c8);
}

.admin-ranking-item b {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.admin-chart-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
}

.admin-token-table {
  border-top: 1px solid var(--glass-border);
}

.admin-token-table-head,
.admin-token-row {
  min-width: 1200px;
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(180px, 1.15fr) 82px 82px 82px 96px 130px 155px;
  align-items: center;
  gap: 13px;
  padding-inline: 22px;
}

.admin-token-table-head {
  min-height: 38px;
  background: color-mix(in srgb, var(--control-bg) 70%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.admin-token-rows {
  min-width: 1200px;
}

.admin-token-row {
  min-height: 76px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 74%, transparent);
  font-variant-numeric: tabular-nums;
  transition: background 140ms ease;
}

.admin-token-row:hover {
  background: color-mix(in srgb, var(--control-hover) 70%, transparent);
}

.admin-token-row > div {
  min-width: 0;
}

.admin-token-row strong,
.admin-token-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-token-row strong {
  font-size: 12px;
}

.admin-token-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.admin-token-row .token-total {
  color: #168f87;
  font-size: 15px;
}

.admin-token-row .token-missing {
  color: var(--muted);
  font-size: 10px;
  font-weight: 620;
}

.admin-token-row .token-cost {
  color: #188c3a;
  font-size: 13px;
}

.admin-cost-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-pressure-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-pressure-panel {
  overflow: visible;
}

.admin-pressure-heading,
.admin-pressure-legend,
.admin-live-status {
  display: flex;
  align-items: center;
}

.admin-pressure-heading {
  gap: 11px;
}

.admin-pressure-heading h2 {
  margin-bottom: 0;
}

.admin-live-status {
  gap: 6px;
  border: 1px solid rgba(48, 209, 88, 0.24);
  border-radius: 999px;
  background: rgba(48, 209, 88, 0.09);
  color: #188c3a;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 760;
}

.admin-live-status i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.12);
  animation: admin-live-pulse 1.8s ease-out infinite;
}

.admin-live-status.disconnected {
  border-color: rgba(255, 69, 58, 0.22);
  background: rgba(255, 69, 58, 0.08);
  color: #d6352c;
}

.admin-pressure-updated {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-pressure-chart-card {
  margin: 0 20px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-border) 84%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--control-bg) 58%, transparent);
}

.admin-pressure-legend {
  justify-content: flex-end;
  gap: 18px;
  padding: 14px 18px 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 680;
}

.admin-pressure-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-pressure-legend i {
  width: 17px;
  height: 3px;
  display: block;
  border-radius: 999px;
}

.admin-pressure-legend i.pressure { background: #0a84ff; }
.admin-pressure-legend i.cpu { background: #af52de; }
.admin-pressure-legend i.memory { background: #168f87; }

.admin-pressure-chart-wrap {
  position: relative;
  height: 300px;
  padding: 12px 18px 22px 48px;
}

.admin-pressure-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.admin-pressure-grid line {
  stroke: color-mix(in srgb, var(--glass-border) 76%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.admin-pressure-area {
  fill: rgba(10, 132, 255, 0.08);
  stroke: none;
}

.admin-pressure-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.admin-pressure-line.pressure { stroke: #0a84ff; stroke-width: 2.6; }
.admin-pressure-line.cpu { stroke: #af52de; opacity: 0.84; }
.admin-pressure-line.memory { stroke: #168f87; opacity: 0.9; }

.admin-pressure-axis {
  position: absolute;
  left: 13px;
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.admin-pressure-axis.top { top: 9px; }
.admin-pressure-axis.middle { top: calc(50% - 3px); }
.admin-pressure-axis.bottom { bottom: 18px; }

.admin-pressure-empty {
  position: absolute;
  inset: 12px 18px 22px 48px;
  min-height: 0;
  background: color-mix(in srgb, var(--control-bg) 74%, transparent);
}

.admin-pressure-details {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0 20px 20px;
}

.admin-pressure-details article {
  min-width: 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--control-bg) 58%, transparent);
}

.admin-pressure-details span,
.admin-pressure-details small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.admin-pressure-details strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-pressure-primary small[data-state="normal"] { color: #188c3a; }
.admin-pressure-primary small[data-state="busy"] { color: #d87800; }
.admin-pressure-primary small[data-state="critical"] { color: #d6352c; }

.admin-metric-card #systemRequestQuality[data-state="normal"] { color: #188c3a; }
.admin-metric-card #systemRequestQuality[data-state="degraded"],
.admin-metric-card #systemRequestQuality[data-state="observing"] { color: #d87800; }
.admin-metric-card #systemRequestQuality[data-state="critical"] { color: #d6352c; }
.admin-metric-card #systemRequestQuality[data-state="insufficient"] { color: var(--muted); }

#systemRequestQuality {
  font-size: clamp(20px, 1.65vw, 26px);
  white-space: nowrap;
}

.admin-pressure-details #systemDiskPercent[data-state="busy"] { color: #d87800; }
.admin-pressure-details #systemDiskPercent[data-state="critical"] {
  color: #d6352c;
  font-weight: 760;
}

.admin-cloud-monitor {
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #0a84ff 18%, var(--glass-border));
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(10, 132, 255, 0.045), transparent 34%),
    color-mix(in srgb, var(--control-bg) 62%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-cloud-monitor[data-state="healthy"] {
  border-color: color-mix(in srgb, #30d158 28%, var(--glass-border));
}

.admin-cloud-monitor[data-state="degraded"],
.admin-cloud-monitor[data-state="unavailable"] {
  border-color: color-mix(in srgb, #ff9f0a 35%, var(--glass-border));
}

.admin-cloud-head,
.admin-cloud-title,
.admin-cloud-title-line,
.admin-cloud-card-head,
.admin-cloud-legend,
.admin-cloud-alarm-row {
  display: flex;
  align-items: center;
}

.admin-cloud-head {
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 74%, transparent);
}

.admin-cloud-title {
  min-width: 0;
  gap: 12px;
}

.admin-cloud-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.11);
  color: #0a84ff;
  font-size: 19px;
}

.admin-cloud-title-line {
  flex-wrap: wrap;
  gap: 8px;
}

.admin-cloud-title h3,
.admin-cloud-title p,
.admin-cloud-card-head h4,
.admin-cloud-card-head p {
  margin: 0;
}

.admin-cloud-title h3 {
  font-size: 14px;
}

.admin-cloud-title p,
.admin-cloud-card-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.admin-cloud-status {
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 760;
}

.admin-cloud-status[data-state="healthy"] {
  border-color: rgba(48, 209, 88, 0.24);
  background: rgba(48, 209, 88, 0.09);
  color: #188c3a;
}

.admin-cloud-status[data-state="syncing"] {
  border-color: rgba(10, 132, 255, 0.22);
  background: rgba(10, 132, 255, 0.08);
  color: #0877df;
}

.admin-cloud-status[data-state="degraded"],
.admin-cloud-status[data-state="unavailable"] {
  border-color: rgba(255, 159, 10, 0.25);
  background: rgba(255, 159, 10, 0.09);
  color: #b56900;
}

.admin-cloud-sync {
  min-width: 180px;
  text-align: right;
}

.admin-cloud-sync strong,
.admin-cloud-sync span {
  display: block;
}

.admin-cloud-sync strong {
  font-size: 11px;
}

.admin-cloud-sync span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.admin-cloud-setup {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px;
  padding: 15px;
  border: 1px dashed color-mix(in srgb, #0a84ff 26%, var(--glass-border));
  border-radius: 13px;
  background: rgba(10, 132, 255, 0.045);
}

.admin-cloud-setup[hidden],
.admin-cloud-content[hidden] {
  display: none;
}

.admin-cloud-setup > i {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.1);
  color: #0a84ff;
  font-size: 16px;
}

.admin-cloud-setup strong,
.admin-cloud-setup span {
  display: block;
}

.admin-cloud-setup strong {
  font-size: 11px;
}

.admin-cloud-setup span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.admin-cloud-content {
  padding: 16px;
}

.admin-cloud-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.admin-cloud-metrics article {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--control-bg) 68%, transparent);
}

.admin-cloud-metrics span,
.admin-cloud-metrics small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.admin-cloud-metrics strong {
  display: block;
  margin: 7px 0 4px;
  overflow: hidden;
  font-size: 20px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-cloud-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 10px;
  margin-top: 10px;
}

.admin-cloud-chart-card,
.admin-cloud-alarm-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--control-bg) 68%, transparent);
}

.admin-cloud-card-head {
  min-height: 60px;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
}

.admin-cloud-card-head h4 {
  font-size: 11px;
}

.admin-cloud-legend {
  flex: 0 0 auto;
  gap: 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 680;
}

.admin-cloud-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-cloud-legend i {
  width: 12px;
  height: 3px;
  display: block;
  border-radius: 999px;
}

.admin-cloud-legend i.cpu,
.admin-cloud-line.cpu { stroke: #0a84ff; }
.admin-cloud-legend i.cpu { background: #0a84ff; }
.admin-cloud-legend i.memory,
.admin-cloud-line.memory { stroke: #af52de; }
.admin-cloud-legend i.memory { background: #af52de; }
.admin-cloud-legend i.disk,
.admin-cloud-line.disk { stroke: #168f87; }
.admin-cloud-legend i.disk { background: #168f87; }

.admin-cloud-chart-wrap {
  position: relative;
  height: 210px;
  padding: 18px 14px 22px 38px;
}

.admin-cloud-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.admin-cloud-grid-lines line {
  stroke: color-mix(in srgb, var(--glass-border) 72%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.admin-cloud-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.admin-cloud-axis {
  position: absolute;
  left: 11px;
  color: var(--muted);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.admin-cloud-axis.top { top: 15px; }
.admin-cloud-axis.middle { top: calc(50% - 2px); }
.admin-cloud-axis.bottom { bottom: 18px; }

.admin-cloud-chart-empty {
  position: absolute;
  inset: 18px 14px 22px 38px;
  min-height: 0;
  background: color-mix(in srgb, var(--control-bg) 82%, transparent);
}

.admin-cloud-alarm-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(48, 209, 88, 0.09);
  color: #188c3a;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 760;
}

.admin-cloud-alarm-count[data-state="active"] {
  background: rgba(255, 69, 58, 0.09);
  color: #d6352c;
}

.admin-cloud-alarm-rows {
  max-height: 210px;
  overflow-y: auto;
}

.admin-cloud-alarm-row {
  gap: 10px;
  min-height: 60px;
  padding: 11px 13px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 66%, transparent);
}

.admin-cloud-alarm-row:first-child {
  border-top: 0;
}

.admin-cloud-alarm-row > div {
  min-width: 0;
}

.admin-cloud-alarm-row strong,
.admin-cloud-alarm-row small {
  display: block;
}

.admin-cloud-alarm-row strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cloud-alarm-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.admin-cloud-alarm-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 760;
}

.admin-cloud-alarm-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.admin-cloud-alarm-state.active {
  background: rgba(255, 69, 58, 0.09);
  color: #d6352c;
}

.admin-cloud-alarm-state.recovered {
  background: rgba(48, 209, 88, 0.09);
  color: #188c3a;
}

.admin-cloud-alarm-empty {
  min-height: 210px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.admin-cloud-alarm-empty.hidden {
  display: none;
}

.admin-cloud-alarm-empty i {
  margin-bottom: 8px;
  color: #188c3a;
  font-size: 22px;
}

.admin-cloud-alarm-empty strong {
  color: var(--text);
  font-size: 10px;
}

.admin-cloud-alarm-empty span {
  margin-top: 4px;
  font-size: 9px;
}

.admin-slow-section,
.admin-failure-section {
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-border) 86%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--control-bg) 58%, transparent);
}

.admin-failure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 78%, transparent);
}

.admin-failure-head h3,
.admin-failure-head p {
  margin: 0;
}

.admin-failure-head h3 {
  font-size: 14px;
}

.admin-failure-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.admin-slow-count,
.admin-failure-count {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.admin-slow-count {
  border: 1px solid rgba(10, 132, 255, 0.18);
  background: rgba(10, 132, 255, 0.07);
  color: #0877df;
}

.admin-failure-count {
  border: 1px solid rgba(255, 69, 58, 0.18);
  background: rgba(255, 69, 58, 0.07);
  color: #d6352c;
}

.admin-slow-table,
.admin-failure-table {
  overflow-x: auto;
}

.admin-slow-table-head,
.admin-slow-row {
  min-width: 720px;
  display: grid;
  grid-template-columns: minmax(320px, 1.8fr) 100px minmax(190px, 1fr) 110px;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
}

.admin-slow-table-head {
  min-height: 36px;
  background: color-mix(in srgb, var(--control-bg) 74%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
}

.admin-slow-row {
  min-height: 62px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

.admin-slow-row:first-child {
  border-top: 0;
}

.admin-slow-row > div {
  min-width: 0;
}

.admin-slow-row strong,
.admin-slow-row small {
  display: block;
}

.admin-slow-row strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-slow-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.admin-failure-table-head,
.admin-failure-row {
  min-width: 1080px;
  display: grid;
  grid-template-columns: 130px minmax(190px, 1fr) minmax(220px, 1.1fr) minmax(360px, 2fr) 155px;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
}

.admin-failure-table-head {
  min-height: 36px;
  background: color-mix(in srgb, var(--control-bg) 74%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
}

.admin-failure-row {
  min-height: 132px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

.admin-failure-row:first-child {
  border-top: 0;
}

.admin-failure-row > div {
  min-width: 0;
}

.admin-failure-row strong,
.admin-failure-row small {
  display: block;
}

.admin-failure-row strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-failure-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.admin-failure-reason strong {
  color: #c63830;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.admin-failure-detail {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}

.admin-failure-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.admin-failure-tags span {
  border: 1px solid color-mix(in srgb, #ff453a 18%, var(--glass-border));
  border-radius: 999px;
  background: color-mix(in srgb, #ff453a 7%, transparent);
  color: color-mix(in srgb, #c63830 82%, var(--text));
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 720;
}

.admin-failure-refunded {
  color: #168f49 !important;
  font-weight: 700;
}

.admin-failure-unrefunded,
.admin-failure-history-note {
  color: #c63830 !important;
  font-weight: 700;
}

.admin-slow-section .admin-empty,
.admin-failure-section .admin-empty {
  min-height: 150px;
}

@keyframes admin-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.28); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); }
}

.admin-token-rows.is-loading,
.admin-generation-rows.is-loading,
.admin-asset-grid.is-loading {
  opacity: 0.48;
  pointer-events: none;
}

.admin-generation-filters {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-generation-filters .admin-search input {
  width: 208px;
}

.admin-generation-filters .admin-sort select {
  min-width: 120px;
}

#adminGenerationView .admin-metric-card small {
  display: block;
  margin: 7px 0 0;
}

.admin-generation-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px 18px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, #168f87 22%, var(--glass-border));
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(22, 143, 135, 0.1), rgba(10, 132, 255, 0.04)),
    var(--control-bg);
}

.admin-generation-note > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(22, 143, 135, 0.13);
  color: #168f87;
  font-size: 17px;
}

.admin-generation-note div {
  min-width: 0;
}

.admin-generation-note strong,
.admin-generation-note small {
  display: block;
}

.admin-generation-note strong {
  font-size: 12px;
}

.admin-generation-note small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.admin-generation-trend .admin-trend-point > span {
  background: linear-gradient(180deg, #55b6ff, #0a84ff);
  box-shadow: 0 5px 12px rgba(10, 132, 255, 0.18);
}

.admin-generation-ranking-item > span {
  background: rgba(10, 132, 255, 0.1);
  color: #0a84ff;
}

.admin-generation-ranking-item i {
  background: linear-gradient(90deg, #0a84ff, #31d5c8);
}

.admin-generation-table {
  border-top: 1px solid var(--glass-border);
}

.admin-generation-table-head,
.admin-generation-row {
  min-width: 1320px;
  display: grid;
  grid-template-columns: minmax(200px, 1.15fr) 120px minmax(190px, 1.05fr) minmax(220px, 1.25fr) minmax(250px, 1.4fr) 110px 170px;
  align-items: center;
  gap: 14px;
  padding-inline: 22px;
}

.admin-generation-table-head {
  min-height: 38px;
  background: color-mix(in srgb, var(--control-bg) 70%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.admin-generation-rows {
  min-width: 1320px;
}

.admin-generation-row {
  min-height: 78px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 74%, transparent);
  font-variant-numeric: tabular-nums;
  transition: background 140ms ease;
}

.admin-generation-row:hover {
  background: color-mix(in srgb, var(--control-hover) 70%, transparent);
}

.admin-generation-row > div {
  min-width: 0;
}

.admin-generation-row strong,
.admin-generation-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-generation-row strong {
  font-size: 12px;
}

.admin-generation-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.admin-generation-retry {
  min-height: 26px;
  margin-top: 7px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--glass-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--control-bg));
  color: var(--primary);
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
}

.admin-generation-retry:hover,
.admin-generation-retry:focus-visible {
  border-color: var(--primary);
  outline: none;
}

.admin-generation-kind,
.admin-generation-status {
  width: max-content;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 720;
}

.admin-generation-kind.image {
  background: rgba(175, 82, 222, 0.11);
  color: #9a42c5;
}

.admin-generation-kind.video {
  background: rgba(10, 132, 255, 0.11);
  color: #0873dd;
}

.admin-generation-kind.llm {
  background: rgba(22, 143, 135, 0.11);
  color: #168f87;
}

.admin-generation-failure strong {
  color: var(--muted);
}

.admin-generation-failure.failed strong {
  color: #c63830;
}

.admin-generation-status.succeeded {
  background: rgba(48, 209, 88, 0.12);
  color: #188c3a;
}

.admin-generation-status.failed {
  background: rgba(255, 69, 58, 0.1);
  color: #c9352d;
}

.admin-generation-status.active {
  background: rgba(255, 149, 0, 0.12);
  color: #bd6b00;
}

.admin-generation-status.unknown {
  background: var(--control-bg);
  color: var(--muted);
}

.admin-generation-cost {
  color: #168f87;
  font-size: 14px !important;
}

.admin-generation-cost.refunded {
  color: var(--muted);
  font-size: 11px !important;
}

.admin-pagination {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--glass-border);
  color: var(--muted);
  font-size: 11px;
}

.admin-pagination > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-pagination button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
}

.admin-pagination button:disabled {
  cursor: default;
  opacity: 0.42;
}

.admin-asset-filters {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-asset-filters .admin-search input {
  width: 250px;
}

.admin-asset-filters .admin-sort select {
  min-width: 118px;
}

.admin-asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 20px 22px;
  transition: opacity 140ms ease;
}

.admin-asset-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-border) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--control-bg) 68%, var(--glass-surface));
  box-shadow: 0 8px 22px rgba(24, 39, 61, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin-asset-card:hover {
  border-color: color-mix(in srgb, #168f87 34%, var(--glass-border));
  box-shadow: 0 13px 30px rgba(24, 39, 61, 0.1);
  transform: translateY(-2px);
}

.admin-asset-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(22, 143, 135, 0.08), rgba(49, 213, 200, 0.03)),
    radial-gradient(circle, var(--dot) 0.7px, transparent 0.8px);
  background-size: auto, 16px 16px;
}

.admin-asset-preview img,
.admin-asset-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admin-asset-preview video {
  background: #0e1618;
}

.admin-asset-kind {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(12, 27, 30, 0.68);
  color: #fff;
  font-size: 9px;
  font-weight: 680;
  backdrop-filter: blur(10px);
}

.admin-text-preview {
  height: 100%;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 28px;
  color: #163638;
}

.admin-text-preview i {
  color: #168f87;
  font-size: 28px;
}

.admin-text-preview p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.admin-asset-body {
  padding: 14px;
}

.admin-asset-owner,
.admin-asset-meta,
.admin-asset-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-asset-owner {
  justify-content: space-between;
  margin-bottom: 8px;
}

.admin-asset-owner span {
  min-width: 0;
  overflow: hidden;
  color: #168f87;
  font-size: 10px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-asset-owner small {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(22, 143, 135, 0.09);
  color: #168f87;
  font-size: 8px;
  font-weight: 680;
}

.admin-asset-body h3 {
  overflow: hidden;
  margin: 0 0 7px;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-asset-body > p {
  min-height: 34px;
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-asset-meta {
  min-height: 34px;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 10px;
}

.admin-asset-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
}

.admin-asset-actions {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
}

.admin-asset-actions a,
.admin-asset-actions button {
  min-height: 30px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 9px;
  font-weight: 680;
  text-decoration: none;
}

.admin-asset-actions a:first-child,
.admin-asset-actions button {
  border-color: color-mix(in srgb, #168f87 30%, var(--glass-border));
  background: rgba(22, 143, 135, 0.08);
  color: #168f87;
}

.admin-ops-table {
  overflow-x: auto;
  border-top: 1px solid var(--glass-border);
}

.admin-ops-row {
  min-width: 1120px;
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  color: var(--ink);
  font-size: 12px;
}

.admin-ops-row.payment {
  grid-template-columns: minmax(180px, 1.2fr) minmax(190px, 1.25fr) 100px 100px 80px minmax(190px, 1.2fr) 80px;
}

.admin-ops-row.audit {
  min-width: 1540px;
  grid-template-columns: 150px minmax(185px, 1.1fr) minmax(190px, 1.15fr) minmax(190px, 1.15fr) minmax(190px, 1fr) 75px minmax(210px, 1.2fr) minmax(240px, 1.4fr);
}

.admin-ops-row.support {
  min-width: 1120px;
  grid-template-columns: 145px 105px minmax(190px, 1fr) minmax(320px, 1.8fr) 88px 130px;
}

.admin-support-message p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-support-status-select {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  outline: none;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 11px;
}

.admin-support-status-select:focus {
  border-color: #168f87;
  box-shadow: 0 0 0 3px rgba(22, 143, 135, 0.12);
}

.admin-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-ops-row:not(.admin-ops-head):hover {
  background: color-mix(in srgb, var(--control-hover) 72%, transparent);
}

.admin-ops-row > div {
  min-width: 0;
}

.admin-ops-row strong,
.admin-ops-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-row strong {
  font-size: 12px;
  line-height: 1.45;
}

.admin-ops-row small,
.admin-ops-muted {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.admin-ops-head {
  min-height: 38px;
  padding-block: 9px;
  background: color-mix(in srgb, var(--control-bg) 70%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-ops-row code {
  display: block;
  overflow: hidden;
  padding: 5px 7px;
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--muted);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-state {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.admin-ops-state.paid {
  background: rgba(48, 209, 88, 0.12);
  color: #148239;
}

.admin-ops-state.pending {
  background: rgba(255, 149, 0, 0.14);
  color: #b56800;
}

.admin-ops-state.failed,
.admin-ops-state.cancelled,
.admin-ops-state.refunded {
  background: rgba(255, 69, 58, 0.11);
  color: #c62922;
}

.admin-ops-warning {
  color: #c66b00 !important;
}

.admin-ops-action {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--system-blue) 28%, var(--glass-border));
  border-radius: 8px;
  background: rgba(10, 132, 255, 0.08);
  color: var(--system-blue);
  font-size: 11px;
  font-weight: 700;
}

.admin-ops-action.danger {
  border-color: rgba(255, 149, 0, 0.28);
  background: rgba(255, 149, 0, 0.1);
  color: #b56800;
}

.admin-ops-action:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 22px 22px;
  border-top: 1px solid var(--glass-border);
}

.admin-readiness-grid.is-loading {
  opacity: 0.58;
}

.admin-readiness-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--control-bg);
}

.admin-readiness-item > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  font-size: 18px;
}

.admin-readiness-item strong,
.admin-readiness-item p {
  display: block;
  margin: 0;
}

.admin-readiness-item strong {
  color: var(--ink);
  font-size: 12px;
}

.admin-readiness-item p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.admin-readiness-item > span {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
}

.admin-readiness-item.passed > i,
.admin-readiness-item.passed > span {
  background: rgba(48, 209, 88, 0.12);
  color: #148239;
}

.admin-readiness-item.failed > i,
.admin-readiness-item.failed > span {
  background: rgba(255, 69, 58, 0.11);
  color: #c62922;
}

.admin-readiness-item.warning > i,
.admin-readiness-item.warning > span {
  background: rgba(255, 149, 0, 0.14);
  color: #b56800;
}

.admin-readiness-ready {
  color: #148239 !important;
}

.admin-readiness-blocked {
  color: #c62922 !important;
}

.admin-section-tabs {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-surface);
  box-shadow: var(--glass-highlight), 0 8px 22px rgba(24, 39, 61, 0.06);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.admin-section-tabs button,
.admin-provider-kind-tabs button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
  transition: color 140ms ease, background 140ms ease, transform 90ms ease-out;
}

.admin-section-tabs button:hover,
.admin-provider-kind-tabs button:hover {
  background: var(--control-hover);
  color: var(--ink);
}

.admin-section-tabs button.active,
.admin-provider-kind-tabs button.active {
  background: var(--system-blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(10, 132, 255, 0.2);
}

.admin-provider-panel {
  min-height: 620px;
}

.admin-provider-head {
  min-height: 92px;
  border-bottom: 1px solid var(--glass-border);
}

.admin-security-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(48, 209, 88, 0.1);
  color: #148239;
  font-size: 11px;
  font-weight: 680;
}

.admin-provider-content {
  min-width: 0;
}

.admin-provider-kind-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--control-bg) 72%, transparent);
}

.admin-provider-workspace {
  min-height: 490px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.admin-provider-sidebar {
  padding: 20px 14px;
  border-right: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--control-bg) 48%, transparent);
}

.admin-provider-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px 12px;
}

.admin-provider-sidebar-head span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.admin-provider-sidebar-head small {
  color: var(--muted);
  font-size: 10px;
}

.admin-provider-list {
  display: grid;
  gap: 7px;
}

.admin-provider-option {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease-out;
}

.admin-provider-option:hover {
  background: var(--control-hover);
}

.admin-provider-option.active {
  border-color: color-mix(in srgb, var(--system-blue) 30%, var(--glass-border));
  background: rgba(10, 132, 255, 0.1);
}

.admin-provider-option-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--system-blue);
  font-size: 17px;
}

.admin-provider-option span:nth-child(2) {
  min-width: 0;
}

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

.admin-provider-option strong {
  margin-bottom: 3px;
  font-size: 12px;
}

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

.admin-provider-option-state {
  width: 9px;
  height: 9px;
  justify-self: center;
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.admin-provider-option-state.ready { background: #20a348; color: #20a348; }
.admin-provider-option-state.missing { background: var(--muted); color: var(--muted); }

.admin-provider-form {
  align-content: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 28px;
}

.admin-provider-form-head,
.admin-provider-key-field,
.admin-provider-form-foot,
#adminProviderStatusUrlField {
  grid-column: 1 / -1;
}

.admin-provider-form-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 4px;
}

.admin-provider-form-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.admin-provider-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.admin-provider-state.ready {
  background: rgba(48, 209, 88, 0.11);
  color: #148239;
}

.admin-provider-state.missing {
  background: rgba(255, 69, 58, 0.1);
  color: #c73830;
}

.admin-provider-state.changed {
  background: rgba(255, 149, 0, 0.12);
  color: #b96400;
}

.admin-provider-field {
  min-width: 0;
}

.admin-provider-field > label {
  display: block;
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
}

.admin-provider-field > input,
.admin-secret-control input,
.admin-model-control input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  outline: none;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.admin-provider-field > input:focus,
.admin-secret-control input:focus,
.admin-model-control input:focus {
  border-color: var(--system-blue);
  background: var(--surface-solid);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.admin-provider-field > small,
.admin-field-meta small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.admin-provider-field code {
  color: var(--system-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-model-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.admin-model-control button {
  min-width: 112px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--system-blue);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-model-control .admin-model-add {
  min-width: 76px;
}

.admin-model-control button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--system-blue) 48%, var(--glass-border));
  background: var(--control-hover);
}

.admin-model-control button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.admin-model-control button.is-loading i {
  animation: admin-model-spin 800ms linear infinite;
}

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

.admin-model-picker {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--surface-solid);
}

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

.admin-model-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-model-picker-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.admin-model-picker-actions {
  display: flex;
  gap: 8px;
}

.admin-model-picker-actions button {
  min-width: 64px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--system-blue);
  font-size: 12px;
  font-weight: 700;
}

.admin-model-picker-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--system-blue) 48%, var(--glass-border));
  background: var(--control-hover);
}

.admin-model-picker-actions button:disabled {
  cursor: default;
  opacity: 0.46;
}

.admin-model-list {
  max-height: 264px;
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  overscroll-behavior: contain;
}

.admin-model-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
}

.admin-model-option:last-child {
  border-bottom: 0;
}

.admin-model-option:hover {
  background: var(--control-hover);
}

.admin-model-option:has(input:checked) {
  background: color-mix(in srgb, var(--system-blue) 10%, var(--control-bg));
}

.admin-model-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--system-blue);
}

.admin-model-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-model-option:focus-within {
  outline: 3px solid rgba(10, 132, 255, 0.16);
  outline-offset: -3px;
}

.admin-default-model {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.admin-default-model select {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  outline: none;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 13px;
}

.admin-default-model select:focus {
  border-color: var(--system-blue);
  background: var(--surface-solid);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.admin-provider-field > .admin-model-status.success {
  color: #148239;
}

.admin-provider-field > .admin-model-status.warning {
  color: #a65d00;
}

.admin-provider-field > .admin-model-status.error {
  color: #c73830;
}

.admin-secret-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
}

.admin-secret-control button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 17px;
}

.admin-secret-control button:hover {
  background: var(--control-hover);
  color: var(--ink);
}

.admin-secret-eye {
  position: relative;
  width: 18px;
  height: 12px;
  display: block;
  border: 1.7px solid currentColor;
  border-radius: 50% / 60%;
}

.admin-secret-eye::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.admin-secret-eye::before {
  position: absolute;
  top: 5px;
  left: -3px;
  width: 22px;
  height: 1.7px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: rotate(-38deg);
  transform-origin: center;
  transition: opacity 120ms ease;
}

.admin-secret-eye.revealed::before {
  opacity: 0;
}

.admin-field-meta {
  min-height: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-danger-link {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d13a32;
  font-size: 10px;
  font-weight: 680;
}

.admin-danger-link:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.55;
}

.admin-provider-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
}

.admin-provider-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.admin-provider-form-foot .primary-button {
  min-width: 118px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--system-blue);
  border-radius: 10px;
  background: var(--system-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.18);
}

.admin-config-pill {
  border: 0;
  cursor: pointer;
}

[data-theme="dark"] .admin-security-note,
[data-theme="dark"] .admin-provider-state.ready,
[data-theme="dark"] .admin-provider-option-state.ready {
  color: #4fda72;
}

[data-theme="dark"] .admin-provider-state.missing {
  color: #ff7b73;
}

[data-theme="dark"] .admin-provider-state.changed {
  color: #ffb340;
}

[data-theme="dark"] .admin-provider-field > .admin-model-status.success {
  color: #4fda72;
}

[data-theme="dark"] .admin-provider-field > .admin-model-status.warning {
  color: #ffc15c;
}

[data-theme="dark"] .admin-provider-field > .admin-model-status.error {
  color: #ff7b73;
}

[data-theme="dark"] .admin-account-state,
[data-theme="dark"] .admin-status-button.restore {
  color: #4fda72 !important;
}

[data-theme="dark"] .admin-account-state.disabled,
[data-theme="dark"] .admin-status-button {
  color: #ff7b73 !important;
}

[data-theme="dark"] .admin-text-preview {
  color: #d8f4f1;
}

[data-theme="dark"] .admin-token-row .token-total,
[data-theme="dark"] .admin-token-row .token-cost,
[data-theme="dark"] .admin-asset-owner span,
[data-theme="dark"] .admin-asset-owner small,
[data-theme="dark"] .admin-asset-actions a:first-child,
[data-theme="dark"] .admin-asset-actions button {
  color: #55d8ce;
}

@media (max-width: 1320px) {
  .admin-pressure-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .admin-storage-capacity {
    grid-template-columns: 1fr;
  }

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

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

  .admin-pressure-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-cloud-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

  .admin-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-filters {
    width: 100%;
  }

  .admin-search {
    flex: 1;
  }

  .admin-search input {
    width: 100%;
  }

  .admin-table-head {
    display: none;
  }

  .admin-ops-head {
    display: none;
  }

  .admin-ops-row.payment,
  .admin-ops-row.audit,
  .admin-ops-row.support {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 16px;
    padding: 16px;
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    background: var(--control-bg);
  }

  .admin-ops-row [data-label]::before {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
  }

  .admin-users,
  .admin-user {
    min-width: 0;
  }

  .admin-users {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
  }

  .admin-user {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    padding: 18px;
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    background: var(--control-bg);
  }

  .admin-user:last-child {
    border-bottom: 1px solid var(--glass-border);
  }

  .admin-user-identity,
  .admin-model-cell,
  .admin-credit-action {
    grid-column: 1 / -1;
  }

  .admin-user [data-label]::before {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
  }

  .admin-user-identity::before,
  .admin-model-cell::before,
  .admin-credit-action::before {
    width: 100%;
  }

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

  .admin-provider-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--glass-border);
  }

  .admin-provider-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .admin-shell {
    width: min(100% - 24px, 1460px);
    padding-top: 18px;
  }

  .admin-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-head-actions,
  .admin-head-actions > * {
    width: 100%;
  }

  .admin-head-actions > * {
    justify-content: center;
  }

  .admin-summary,
  .admin-users {
    grid-template-columns: 1fr;
  }

  .admin-insight-grid {
    padding-inline: 12px;
  }

  .admin-pressure-chart-card {
    margin-inline: 12px;
  }

  .admin-pressure-chart-wrap {
    height: 240px;
  }

  .admin-pressure-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 12px;
  }

  .admin-pressure-details article:last-child {
    grid-column: 1 / -1;
  }

  .admin-pressure-legend {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .admin-cloud-monitor {
    margin-inline: 12px;
  }

  .admin-cloud-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-cloud-sync {
    min-width: 0;
    text-align: left;
  }

  .admin-cloud-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-cloud-metrics article:last-child {
    grid-column: 1 / -1;
  }

  .admin-cloud-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-cloud-legend {
    overflow-x: auto;
  }

  .admin-slow-section,
  .admin-failure-section {
    margin-inline: 12px;
  }

  .admin-failure-head {
    align-items: flex-start;
  }

  .admin-slow-table-head,
  .admin-failure-table-head {
    display: none;
  }

  .admin-slow-rows,
  .admin-failure-rows {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .admin-slow-row,
  .admin-failure-row {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--control-bg);
  }

  .admin-slow-row > div:first-child,
  .admin-slow-row > div:nth-child(3),
  .admin-failure-row > div:nth-child(2),
  .admin-failure-row > div:nth-child(3),
  .admin-failure-row > div:nth-child(4),
  .admin-failure-row > div:last-child {
    grid-column: 1 / -1;
  }

  .admin-slow-row [data-label]::before,
  .admin-failure-row [data-label]::before {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
  }

  .admin-asset-grid {
    grid-template-columns: 1fr;
    padding-inline: 12px;
  }

  .admin-token-table-head {
    display: none;
  }

  .admin-generation-table-head {
    display: none;
  }

  .admin-token-rows,
  .admin-generation-rows {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
  }

  .admin-token-row,
  .admin-generation-row {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--control-bg);
  }

  .admin-generation-row > div:first-child,
  .admin-generation-row > div:nth-child(3),
  .admin-generation-row > div:nth-child(4),
  .admin-generation-row > div:nth-child(5),
  .admin-generation-row > div:last-child,
  .admin-token-row > div:first-child,
  .admin-token-row > div:nth-child(2),
  .admin-token-row > div:last-child {
    grid-column: 1 / -1;
  }

  .admin-generation-row [data-label]::before,
  .admin-token-row [data-label]::before {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
  }

  .admin-generation-note {
    margin-inline: 12px;
  }

  .admin-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-metric-card {
    min-height: 96px;
  }

  .admin-filters,
  .config-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-sort,
  .admin-sort select {
    width: 100%;
  }

  .config-strip {
    margin-inline: 16px;
  }

  .admin-cost-note {
    white-space: normal;
  }

  .admin-section-tabs,
  .admin-section-tabs button,
  .admin-provider-kind-tabs button {
    width: 100%;
  }

  .admin-section-tabs,
  .admin-provider-kind-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-section-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-provider-head,
  .admin-provider-form-head,
  .admin-provider-form-foot,
  .admin-field-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-provider-list,
  .admin-provider-form {
    grid-template-columns: 1fr;
  }

  .admin-provider-form {
    padding: 22px 16px;
  }

  .admin-provider-form > * {
    grid-column: 1;
  }

  .admin-model-control {
    grid-template-columns: 1fr;
  }

  .admin-model-control button {
    width: 100%;
  }

  .admin-model-picker-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-model-picker-actions,
  .admin-model-picker-actions button {
    width: 100%;
  }

  .admin-default-model {
    grid-template-columns: 1fr;
  }

  .admin-provider-form-foot .primary-button {
    width: 100%;
  }
}

[data-theme="dark"] {
  --app-bg: #0c131d;
  --canvas-bg: #0d141e;
  --sidebar-bg: rgba(16, 23, 34, 0.96);
  --topbar-bg: rgba(12, 19, 29, 0.92);
  --surface-solid: #18202b;
  --surface-muted: rgba(12, 18, 27, 0.72);
  --control-bg: rgba(255, 255, 255, 0.055);
  --control-hover: rgba(255, 255, 255, 0.095);
  --scrim: rgba(2, 6, 12, 0.68);
  --bg: var(--app-bg);
  --dot: rgba(157, 177, 202, 0.18);
  --panel: var(--surface-solid);
  --panel-2: var(--surface-muted);
  --ink: #f4f7fb;
  --muted: #9fa9b6;
  --faint: #7e8998;
  --line: rgba(164, 181, 204, 0.22);
  --line-strong: rgba(255, 255, 255, 0.2);
  --primary: #f4f7fb;
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --glass-surface: rgba(24, 32, 43, 0.82);
  --glass-surface-strong: rgba(24, 32, 43, 0.9);
  --glass-border: rgba(164, 181, 204, 0.22);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  --system-blue: #0a84ff;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .app-sidebar,
[data-theme="dark"] .node,
[data-theme="dark"] .canvas-create-dock,
[data-theme="dark"] .canvas-minimap,
[data-theme="dark"] .asset-library-tree,
[data-theme="dark"] .asset-main-panel,
[data-theme="dark"] .asset-preview,
[data-theme="dark"] .subpage-card,
[data-theme="dark"] .logs-page-list {
  background: var(--glass-surface);
}

[data-theme="dark"] .canvas-area {
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--dot) 0.9px, transparent 1.15px);
  background-size: var(--grid-size, 28px) var(--grid-size, 28px);
  background-position: var(--grid-x, 0px) var(--grid-y, 0px);
}

[data-theme="dark"] .asset-page,
[data-theme="dark"] .subpage {
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--dot) 0.8px, transparent 1px);
}

[data-theme="dark"] body,
[data-theme="dark"] .app-shell,
[data-theme="dark"] .app-main,
[data-theme="dark"] .main,
[data-theme="dark"] .admin-shell {
  color: var(--ink);
  background: var(--app-bg);
}

[data-theme="dark"] .topbar {
  border-color: var(--glass-border);
  background: var(--topbar-bg);
  box-shadow: var(--glass-highlight), 0 3px 8px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .app-sidebar {
  background: var(--sidebar-bg);
}

[data-theme="dark"] .brand-chip,
[data-theme="dark"] .workspace-trigger,
[data-theme="dark"] .workspace-menu .icon-button,
[data-theme="dark"] .toolbar button,
[data-theme="dark"] .top-actions > button:not(.account-button),
[data-theme="dark"] .top-account {
  color: var(--ink);
}

[data-theme="dark"] .sidebar-actions > button,
[data-theme="dark"] .sidebar-actions > button i,
[data-theme="dark"] .sidebar-brand strong,
[data-theme="dark"] .app-sidebar .workspace-trigger strong {
  color: var(--ink);
}

[data-theme="dark"] .sidebar-actions > button.active,
[data-theme="dark"] .app-sidebar .workspace-menu:focus-within {
  border-color: rgba(164, 181, 204, 0.12);
  background: rgba(164, 181, 204, 0.12);
}

[data-theme="dark"] .nav-item-delete {
  color: var(--muted);
}

[data-theme="dark"] .nav-item-rename {
  color: var(--muted);
}

[data-theme="dark"] .nav-item-rename:hover,
[data-theme="dark"] .nav-item-rename:focus-visible {
  border-color: color-mix(in srgb, var(--system-blue) 48%, var(--glass-border));
  background: color-mix(in srgb, var(--system-blue) 13%, var(--control-bg));
  color: var(--system-blue);
}

[data-theme="dark"] .nav-item-delete:hover,
[data-theme="dark"] .nav-item-delete:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--glass-border));
  background: color-mix(in srgb, var(--danger) 13%, var(--control-bg));
  color: var(--danger);
}

[data-theme="dark"] .workspace-trigger span,
[data-theme="dark"] .brand-chip small,
[data-theme="dark"] .node-title-wrap span,
[data-theme="dark"] .empty-hint span {
  color: var(--muted);
}

[data-theme="dark"] .toolbar button::before,
[data-theme="dark"] .top-actions > button:not(.account-button)::before,
[data-theme="dark"] .dock-icon {
  color: #c8d1dd;
  background: transparent;
}

[data-theme="dark"] .brand-chip:hover,
[data-theme="dark"] .workspace-trigger:hover,
[data-theme="dark"] .workspace-menu:focus-within .workspace-trigger,
[data-theme="dark"] .workspace-menu .icon-button:hover,
[data-theme="dark"] .toolbar button:hover,
[data-theme="dark"] .top-actions > button:not(.account-button):hover,
[data-theme="dark"] .top-account:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .toolbar button.strong,
[data-theme="dark"] .toolbar button.active,
[data-theme="dark"] .top-actions > button.active,
[data-theme="dark"] .top-account.active {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

[data-theme="dark"] .empty-hint strong,
[data-theme="dark"] .subpage-card strong,
[data-theme="dark"] .asset-page-head strong,
[data-theme="dark"] .subpage-head strong,
[data-theme="dark"] .stage-flow-meta strong {
  color: var(--ink);
}

[data-theme="dark"] .node-stage,
[data-theme="dark"] .node-console,
[data-theme="dark"] .stage-status,
[data-theme="dark"] .stage-flow-meta,
[data-theme="dark"] .console-tool,
[data-theme="dark"] .chip,
[data-theme="dark"] .node input,
[data-theme="dark"] .node textarea,
[data-theme="dark"] .node select {
  border-color: var(--glass-border);
  background: var(--surface-muted);
  color: var(--ink);
}

[data-theme="dark"] .auth-body,
[data-theme="dark"] body:has(.admin-shell) {
  color: var(--ink);
  background-color: var(--app-bg);
}

[data-theme="dark"] .auth-panel,
[data-theme="dark"] .admin-shell > .panel,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .canvas-create-card,
[data-theme="dark"] .toast-message,
[data-theme="dark"] .add-menu,
[data-theme="dark"] .asset-drawer,
[data-theme="dark"] .workspace-menu .nav-list {
  border-color: var(--glass-border);
  background: var(--glass-surface-strong);
  color: var(--ink);
}

[data-theme="dark"] .field-input,
[data-theme="dark"] .modal-field input,
[data-theme="dark"] .asset-search,
[data-theme="dark"] .asset-drawer-search,
[data-theme="dark"] .admin-user,
[data-theme="dark"] .asset-card,
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .small-button,
[data-theme="dark"] .mini-button {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
}

[data-theme="dark"] .asset-page-head span,
[data-theme="dark"] .subpage-head span,
[data-theme="dark"] .subpage-card p,
[data-theme="dark"] .auth-panel p,
[data-theme="dark"] .field-label,
[data-theme="dark"] .admin-head p {
  color: var(--muted);
}

[data-theme="dark"] .director-actions .primary {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

[data-theme="dark"] .director-counts span,
[data-theme="dark"] .director-tabs button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

[data-theme="dark"] .director-tabs button:hover {
  border-color: rgba(77, 161, 255, 0.42);
  background: rgba(77, 161, 255, 0.12);
  color: var(--ink);
}

[data-theme="dark"] .director-tabs button.active {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

[data-theme="dark"] .stage-icon,
[data-theme="dark"] .node-head {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .director-result-card,
[data-theme="dark"] .director-overview-card,
[data-theme="dark"] .director-empty {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
}

[data-theme="dark"] .director-result-card span,
[data-theme="dark"] .director-result-card p,
[data-theme="dark"] .director-overview-card p,
[data-theme="dark"] .stage-placeholder small,
[data-theme="dark"] .stage-flow-meta em {
  color: var(--muted);
}

/* Final dark takeover: neutralize legacy high-specificity dark surfaces. */
[data-theme="dark"] .asset-tabs {
  border-color: var(--glass-border);
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

[data-theme="dark"] .logs-page-item {
  border-color: var(--glass-border);
  background: transparent;
  color: var(--ink);
  text-align: center;
  box-shadow: none;
}

[data-theme="dark"] .empty-hint {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

[data-theme="dark"] .asset-upload-tile {
  border-color: var(--glass-border);
  background: var(--glass-surface);
  color: var(--muted);
  box-shadow: none;
}

[data-theme="dark"] .minimap-actions button {
  border-color: var(--glass-border);
  background: transparent;
  color: var(--ink);
}

[data-theme="dark"] .canvas-minimap {
  border-color: var(--glass-border);
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

[data-theme="dark"] .minimap-view {
  border-color: var(--glass-border);
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.2px);
}

[data-theme="dark"] .zoom-chip {
  border-color: var(--glass-border);
  background: var(--glass-surface-strong);
  color: var(--ink);
}

[data-theme="dark"] .node {
  border-color: var(--glass-border);
  background: var(--glass-surface-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

[data-theme="dark"] .node:hover,
[data-theme="dark"] .node.selected {
  border-color: var(--system-blue);
}

[data-theme="dark"] .node.selected {
  box-shadow: var(--glass-highlight), 0 0 0 2px rgba(10, 132, 255, 0.2), var(--glass-shadow);
}

[data-theme="dark"] .node-head,
[data-theme="dark"] .stage-icon {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
}

[data-theme="dark"] .asset-library-tree,
[data-theme="dark"] .asset-main-panel,
[data-theme="dark"] .asset-preview,
[data-theme="dark"] .subpage-card,
[data-theme="dark"] .panel {
  border-color: var(--glass-border);
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

[data-theme="dark"] .drawer-asset-card,
[data-theme="dark"] .drawer-upload-card,
[data-theme="dark"] .log-item,
[data-theme="dark"] .workflow-empty,
[data-theme="dark"] .workflow-template-item,
[data-theme="dark"] .metric-row div,
[data-theme="dark"] .task-item {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: none;
}

[data-theme="dark"] .asset-card-media,
[data-theme="dark"] .asset-preview-frame {
  border-color: var(--glass-border);
  background: var(--surface-muted);
}

[data-theme="dark"] .inspect-input {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
}

[data-theme="dark"] .stage-queue-meta,
[data-theme="dark"] .task-item .task-queue-summary {
  color: #f2bd64;
}

[data-theme="dark"] .node textarea::placeholder,
[data-theme="dark"] .asset-search::placeholder,
[data-theme="dark"] .asset-drawer-search::placeholder {
  color: var(--muted);
}

[data-theme="dark"] .director-counts span,
[data-theme="dark"] .director-tabs button,
[data-theme="dark"] .director-result-card,
[data-theme="dark"] .director-overview-card,
[data-theme="dark"] .director-empty {
  border-color: var(--glass-border);
  background: var(--control-bg);
  color: var(--ink);
}

[data-theme="dark"] .media-preview-card .icon-close {
  border-color: var(--glass-border);
  background: var(--glass-surface-strong);
  color: var(--ink);
}

[data-theme="dark"] .asset-card:hover {
  border-color: color-mix(in srgb, var(--system-blue) 62%, transparent);
  background: var(--control-hover);
}

[data-theme="dark"] .asset-card.active {
  border-color: var(--system-blue);
  background: var(--accent-soft);
}

[data-theme="dark"] .small-button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 48%, var(--glass-border));
  background: color-mix(in srgb, var(--danger) 12%, var(--control-bg));
}

body,
.app-shell,
.app-main,
.app-sidebar,
.topbar,
.canvas-area,
.node,
.canvas-create-dock,
.canvas-minimap,
.asset-page,
.subpage,
.asset-library-tree,
.asset-main-panel,
.asset-preview,
.subpage-card,
.auth-body,
.auth-panel,
.admin-shell,
.admin-shell > .panel,
.add-menu,
.asset-drawer,
.modal-card,
.canvas-create-card,
.toast-message {
  transition-property: color, background-color, border-color;
  transition-duration: var(--motion-theme);
  transition-timing-function: var(--ease-out);
}

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

[data-capability-configured="false"] {
  position: relative;
  cursor: pointer;
  opacity: 1;
  filter: none;
}

[data-capability-configured="false"]::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9f0a;
  box-shadow: 0 0 0 2px var(--glass-surface-strong);
}

button:not(:disabled):not(.edge-delete-control):active,
a[href]:active,
[role="button"]:not([aria-disabled="true"]):not(.edge-delete-control):active {
  transform: scale(var(--press-scale));
  transition-duration: var(--motion-press);
  transition-delay: 0ms;
}

.edge-delete-control:active {
  opacity: 0.62;
  transition: opacity var(--motion-press) var(--ease-out), color var(--motion-press) var(--ease-out);
}

.edge-delete-control:active .edge-delete-hit {
  stroke: var(--danger);
}

@media (max-width: 1200px) {
  .asset-workspace {
    grid-template-columns: 190px minmax(360px, 1fr);
  }

  .asset-preview {
    display: block;
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 116px;
  }

  .sidebar-brand {
    height: 92px;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .sidebar-brand > span:last-child,
  .app-sidebar .workspace-trigger span,
  .sidebar-actions > button span {
    display: none;
  }

  .sidebar-brand .brand-mark {
    width: 40px;
    height: 40px;
  }

  .app-sidebar .workspace-menu {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .app-sidebar .workspace-trigger {
    grid-template-columns: 20px minmax(0, 1fr);
    padding-inline: 6px;
  }

  .app-sidebar .workspace-trigger > i {
    grid-row: 1;
  }

  .sidebar-actions > button {
    justify-content: center;
    padding: 0;
  }

  .app-sidebar .top-account {
    grid-template-columns: 1fr;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 18px;
  }

  #saveState {
    display: none;
  }

  .canvas-create-dock {
    width: min(476px, calc(100% - 180px));
  }

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

@media (min-width: 761px) and (max-width: 1000px) {
  .canvas-minimap {
    top: auto;
    bottom: 18px;
    width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .canvas-minimap .minimap-view {
    display: none;
  }

  .minimap-actions {
    bottom: 28px;
  }
}

@media (max-width: 760px) {
  :root {
    --sidebar-width: 88px;
  }

  .credit-chip {
    display: none;
  }

  .asset-page,
  .subpage {
    padding: 20px 14px 36px;
  }

  .asset-workspace,
  .account-page-grid {
    grid-template-columns: 1fr;
  }

  .asset-library-tree {
    display: none;
  }

  .canvas-create-dock {
    bottom: 12px;
    width: calc(100% - 24px);
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border-radius: 14px;
  }

  .canvas-create-dock button {
    min-height: 56px;
    padding: 4px 2px;
  }

  .canvas-create-dock .dock-icon {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .empty-hint {
    min-width: 0;
    width: calc(100% - 24px);
  }

  .canvas-minimap {
    width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .canvas-minimap .minimap-view {
    display: none;
  }

  .minimap-actions {
    left: calc(var(--sidebar-width) + 12px);
    bottom: 150px;
    width: 132px;
    height: 40px;
  }

  .password-card {
    grid-column: auto;
  }
}

/* Full-image preview follows the rendered media bounds. */
.media-preview-card {
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - 56px);
  max-height: calc(100dvh - 56px);
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.media-preview-card img {
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: calc(100vw - 56px);
  max-height: calc(100dvh - 56px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

/* Frameless creation dock, approved 2026-07-14. */
.canvas-create-dock {
  --dock-label: #344154;
  --dock-icon: #5c6b80;
  --dock-hover-bg: rgba(8, 120, 249, 0.09);
  --dock-hover-line: rgba(8, 120, 249, 0.14);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

[data-theme="dark"] .canvas-create-dock {
  --dock-label: #e3eaf4;
  --dock-icon: #b8c5d6;
  --dock-hover-bg: rgba(10, 132, 255, 0.14);
  --dock-hover-line: rgba(10, 132, 255, 0.2);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.canvas-create-dock button {
  pointer-events: auto;
  color: var(--dock-label);
  background: transparent;
  transition:
    color 140ms var(--ease-out),
    background-color 140ms var(--ease-out),
    box-shadow 140ms var(--ease-out),
    transform var(--motion-press) var(--ease-out);
}

[data-theme="dark"] .canvas-create-dock button {
  color: var(--dock-label);
  background: transparent;
}

.canvas-create-dock strong {
  color: inherit;
}

.canvas-create-dock .dock-icon {
  color: var(--dock-icon);
  background: transparent;
}

.canvas-create-dock button:hover,
.canvas-create-dock button:focus-visible {
  color: var(--system-blue);
  background: var(--dock-hover-bg);
  box-shadow: inset 0 0 0 1px var(--dock-hover-line);
  transform: translateY(-1px);
}

[data-theme="dark"] .canvas-create-dock button:hover,
[data-theme="dark"] .canvas-create-dock button:focus-visible {
  color: var(--system-blue);
  background: var(--dock-hover-bg);
}

.canvas-create-dock button:hover .dock-icon,
.canvas-create-dock button:focus-visible .dock-icon {
  color: inherit;
}

.canvas-create-dock button:focus-visible {
  outline: 2px solid var(--system-blue);
  outline-offset: 2px;
}

.node-port:focus-visible,
.node-resize:focus-visible,
.group-resize:focus-visible {
  outline: 2px solid var(--system-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  button:not(:disabled):not(.edge-delete-control):active,
  a[href]:active,
  [role="button"]:not([aria-disabled="true"]):not(.edge-delete-control):active {
    transform: none;
    opacity: 0.78;
  }
}

/* Focused canvas controls: compact history, opt-in autosave, and visible vision inputs. */
.top-actions > .history-control,
.top-actions > .save-control {
  position: relative;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  box-shadow: var(--glass-highlight);
  pointer-events: auto;
}

.top-actions > .history-control {
  padding: 3px;
}

.history-control .history-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 0;
  box-shadow: none;
}

.history-control .history-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--system-blue) 10%, transparent);
  color: var(--system-blue);
}

.history-control .history-action:active:not(:disabled) {
  transform: scale(0.94);
}

.history-control .history-action:disabled {
  cursor: default;
  color: var(--muted);
  opacity: 0.34;
}

.history-glyph {
  display: block;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

.history-divider {
  width: 1px;
  height: 18px;
  background: var(--glass-border);
}

.top-actions > .save-control {
  isolation: isolate;
}

.save-control > button {
  height: 38px;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.save-control > .autosave-chip {
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px 0 0 9px;
  padding: 0 11px 0 13px;
  font-size: 12px;
  font-weight: 700;
}

.save-control > #saveBtn::before {
  content: none !important;
  display: none !important;
}

.save-control > .autosave-chip i {
  color: var(--system-blue);
  font-size: 16px;
}

.save-control > .autosave-chip[aria-busy="true"] i {
  animation: autosave-cloud-pulse 1.1s ease-in-out infinite;
}

.save-control > .autosave-chip:hover:not(:disabled),
.save-control > .autosave-menu-trigger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--system-blue) 8%, transparent);
}

.save-control > .autosave-chip:disabled {
  cursor: default;
  opacity: 0.72;
}

.save-control > .autosave-menu-trigger {
  width: 31px;
  min-width: 31px;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--glass-border);
  border-radius: 0 9px 9px 0;
  padding: 0;
}

.save-control > .autosave-menu-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--system-blue) 10%, transparent);
  color: var(--system-blue);
}

.autosave-caret {
  font-size: 15px;
  font-weight: 760;
  line-height: 1;
  transform: translateY(-2px);
}

.autosave-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 120;
  width: 290px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-surface-strong) 96%, transparent);
  padding: 13px;
  box-shadow: 0 18px 46px rgba(31, 45, 66, 0.18), var(--glass-highlight);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.autosave-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 13px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--glass-border);
  border-left: 1px solid var(--glass-border);
  background: var(--glass-surface-strong);
  transform: rotate(45deg);
}

.autosave-menu-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.autosave-menu-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--system-blue) 10%, transparent);
  color: var(--system-blue);
  font-size: 18px;
}

.autosave-menu-head strong,
.autosave-menu-head small {
  display: block;
}

.autosave-menu-head strong {
  font-size: 13px;
}

.autosave-menu-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.autosave-menu > p {
  margin: 11px 2px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.autosave-switch {
  position: relative;
  width: 38px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 24%, transparent);
  padding: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 20%, transparent);
}

.autosave-switch > span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(31, 45, 66, 0.24);
  transition: transform 160ms ease;
}

.autosave-switch[aria-checked="true"] {
  background: var(--system-blue);
}

.autosave-switch[aria-checked="true"] > span {
  transform: translateX(16px);
}

@keyframes autosave-cloud-pulse {
  50% { opacity: 0.45; transform: translateY(-1px); }
}

.nody-context-chip.vision {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 112px;
  border-color: color-mix(in srgb, var(--system-blue) 28%, var(--nody-border));
  background: color-mix(in srgb, var(--system-blue) 9%, var(--nody-card-muted));
  color: var(--system-blue);
}

.nody-context-chip.vision::before {
  content: "◉";
  font-size: 8px;
  line-height: 1;
}

.admin-autosave-card {
  display: grid;
  grid-template-columns: 44px minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--system-blue) 4%, var(--control-bg));
  padding: 14px 16px;
  box-shadow: var(--glass-highlight);
}

.admin-autosave-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--system-blue) 11%, transparent);
  color: var(--system-blue);
  font-size: 21px;
}

.admin-autosave-copy {
  min-width: 0;
}

.admin-autosave-copy strong,
.admin-autosave-copy span {
  display: block;
}

.admin-autosave-copy strong {
  font-size: 13px;
}

.admin-autosave-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.admin-autosave-input {
  height: 38px;
  display: inline-grid;
  grid-template-columns: auto 64px auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: var(--glass-surface-strong);
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
}

.admin-autosave-input input {
  width: 64px;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.admin-autosave-input em {
  font-style: normal;
}

.admin-autosave-status {
  grid-column: 2 / -1;
  min-height: 14px;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 1120px) {
  .save-control > .autosave-chip {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .save-control > .autosave-chip span {
    display: none;
  }

  .admin-autosave-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .admin-autosave-card > button {
    grid-column: 3;
  }

  .admin-autosave-input {
    grid-column: 2;
  }

  .admin-autosave-status {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .top-actions > .history-control {
    display: none;
  }

  .autosave-menu {
    position: fixed;
    top: 68px;
    right: 12px;
    width: min(290px, calc(100vw - 24px));
  }

  .admin-autosave-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .admin-autosave-input,
  .admin-autosave-card > button,
  .admin-autosave-status {
    grid-column: 1 / -1;
  }
}

/* Compliance and support entry points */
.auth-terms-consent {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.auth-terms-consent[hidden] {
  display: none;
}

.auth-terms-consent input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: #168f87;
}

.auth-terms-consent a,
.auth-legal-links a,
.sidebar-legal-links a,
.recharge-legal-links a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.auth-legal-links a,
.sidebar-legal-links a,
.recharge-legal-links a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.auth-terms-consent a:hover,
.auth-terms-consent a:focus-visible,
.auth-legal-links a:hover,
.auth-legal-links a:focus-visible,
.sidebar-legal-links a:hover,
.sidebar-legal-links a:focus-visible,
.recharge-legal-links a:hover,
.recharge-legal-links a:focus-visible {
  color: #168f87;
}

.auth-legal-links {
  margin-top: 22px;
  padding-top: 16px;
  display: flex;
  justify-content: center;
  gap: 17px;
  border-top: 1px solid var(--glass-border);
  color: var(--muted);
  font-size: 12px;
}

.sidebar-legal-links {
  margin: auto 12px 10px;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  gap: 13px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 72%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.account-rights-card {
  border-color: color-mix(in srgb, #168f87 24%, var(--glass-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, #dff4f0 56%, transparent), transparent 75%),
    var(--glass-surface);
}

.account-rights-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-rights-links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ai-label-card {
  border-color: color-mix(in srgb, #13b8aa 26%, var(--glass-border));
  background:
    radial-gradient(circle at 92% 10%, rgba(37, 211, 193, 0.13), transparent 35%),
    var(--glass-surface);
}

.ai-label-dialog {
  width: min(640px, calc(100vw - 32px));
  overflow: hidden;
  border-color: color-mix(in srgb, #12a99d 32%, var(--glass-border));
  background:
    radial-gradient(circle at 90% 0%, rgba(50, 216, 201, 0.12), transparent 42%),
    var(--panel);
}

.ai-label-dialog h2,
.mfa-dialog h2 {
  margin: 6px 0 14px;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.ai-label-copy {
  display: grid;
  gap: 10px;
}

.ai-label-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.ai-label-toggle {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-surface) 92%, #d9f6f2);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.ai-label-toggle > span {
  display: grid;
  gap: 4px;
}

.ai-label-toggle strong {
  color: var(--text);
  font-size: 15px;
}

.ai-label-toggle small {
  color: var(--muted);
  font-size: 11px;
}

.ai-label-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-label-toggle > i {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #b9c3cc;
  box-shadow: inset 0 0 0 1px rgba(17, 29, 37, 0.08);
  transition: background 160ms ease;
}

.ai-label-toggle > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 41, 53, 0.22);
  transition: transform 160ms ease;
}

.ai-label-toggle input:checked + i {
  background: linear-gradient(135deg, #0f9389, #20c9bb);
}

.ai-label-toggle input:checked + i::after {
  transform: translateX(20px);
}

.ai-label-toggle input:focus-visible + i {
  outline: 3px solid color-mix(in srgb, #16a99d 24%, transparent);
  outline-offset: 3px;
}

.ai-label-toggle.is-locked:hover {
  border-color: color-mix(in srgb, #13b8aa 52%, var(--glass-border));
  background: color-mix(in srgb, var(--glass-surface) 82%, #d9f6f2);
  box-shadow: 0 10px 28px rgba(18, 169, 157, 0.1);
}

.ai-label-toggle:has(input:disabled) {
  cursor: wait;
}

.ai-label-terms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.ai-label-terms input {
  margin-top: 2px;
  accent-color: #129d92;
}

.ai-label-terms.attention {
  color: #a85e00;
  animation: ai-label-terms-attention 420ms ease 2;
}

@keyframes ai-label-terms-attention {
  50% {
    transform: translateX(3px);
  }
}

.ai-label-status-line {
  min-height: 20px;
  margin-top: 10px;
  color: #10887f;
  font-size: 11px;
  font-weight: 750;
}

.ai-label-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.mfa-dialog {
  width: min(520px, calc(100vw - 32px));
}

.mfa-step {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.mfa-qr {
  width: 210px;
  height: 210px;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}

.mfa-secret {
  justify-self: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
}

.mfa-step pre {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: 700 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}

.ai-generated-badge {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(93, 234, 220, 0.55);
  border-radius: 999px;
  background: rgba(9, 29, 34, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.asset-card-media,
.drawer-asset-thumb,
.asset-preview-media {
  position: relative;
}

@media (max-width: 640px) {
  .ai-label-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .ai-label-actions button {
    width: 100%;
  }
}

.recharge-legal-links {
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  border-top: 1px solid var(--glass-border);
  color: var(--muted);
  font-size: 10px;
}

.recharge-legal-links a {
  color: var(--recharge-accent);
}

@media (max-width: 720px) {
  .auth-legal-links {
    margin-top: 16px;
  }

  .recharge-legal-links {
    align-items: center;
    flex-direction: column;
  }

  .recharge-legal-links a {
    min-height: 44px;
  }
}

.interpolation-node-handoff {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--nody-muted);
  font-size: 12px;
  line-height: 1.5;
}

.interpolation-node-handoff i {
  color: var(--nody-selected);
  font-size: 16px;
}

.interpolation-node-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 18%, var(--nody-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--nody-selected) 6%, var(--nody-card-muted));
}

.interpolation-node-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--nody-selected);
  background: color-mix(in srgb, var(--nody-selected) 12%, var(--nody-card));
  font-size: 20px;
}

.interpolation-node-intro div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.interpolation-node-intro strong,
.interpolation-node-intro small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interpolation-node-intro small {
  color: var(--nody-muted);
  font-size: 11px;
}

.interpolation-parameter-dock > .fps-field {
  margin-bottom: 10px;
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --sidebar-bg: #eceff7;
    --topbar-bg: #f4f5fa;
    --glass-surface: #ffffff;
    --glass-surface-strong: #ffffff;
    --surface-muted: #f3f5f8;
    --control-bg: #f7f9fc;
    --control-hover: #ffffff;
  }

  [data-theme="dark"] {
    --sidebar-bg: #101722;
    --topbar-bg: #0c131d;
    --glass-surface: #18202b;
    --glass-surface-strong: #18202b;
    --surface-muted: #141c27;
    --control-bg: #202a37;
    --control-hover: #293442;
  }

  .app-sidebar,
  .topbar,
  .node,
  .canvas-create-dock,
  .canvas-minimap,
  .asset-library-tree,
  .asset-main-panel,
  .asset-preview,
  .subpage-card,
  .auth-panel,
  .admin-shell > .panel,
  .modal-card,
  .canvas-create-card,
  .toast-message,
  .add-menu,
  .asset-drawer,
  .stage-status,
  .stage-flow-meta,
  .minimap-actions,
  .asset-tabs,
  .logs-page-list {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --sidebar-bg: #eef1f7;
    --topbar-bg: #f7f8fb;
    --glass-surface: #ffffff;
    --glass-surface-strong: #ffffff;
    --control-bg: #ffffff;
    --glass-border: rgba(48, 61, 80, 0.62);
    --line: rgba(48, 61, 80, 0.62);
    --muted: #4f5968;
  }

  [data-theme="dark"] {
    --sidebar-bg: #101722;
    --topbar-bg: #0c131d;
    --glass-surface: #18202b;
    --glass-surface-strong: #18202b;
    --control-bg: #202a37;
    --glass-border: rgba(230, 237, 247, 0.64);
    --line: rgba(230, 237, 247, 0.64);
    --muted: #c3ccd8;
  }

  :focus-visible {
    outline: 3px solid var(--system-blue);
    outline-offset: 2px;
  }
}

/* Floating top creation controls, approved 2026-07-14. */
.app-main {
  grid-template-rows: minmax(0, 1fr);
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 70;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 4px 26px 4px 30px;
  grid-template-columns: minmax(160px, 1fr) minmax(384px, 496px) max-content;
  gap: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

[data-theme="dark"] .topbar {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar-context {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  overflow: hidden;
}

.topbar-context .title-block strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#saveState::before {
  box-shadow: none;
}

.toolbar-shell {
  min-width: 0;
  width: 100%;
  max-width: 496px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.toolbar-shell > .toolbar {
  display: none;
}

.top-actions {
  justify-self: end;
  pointer-events: auto;
}

.canvas-create-dock {
  --dock-label: #344154;
  --dock-icon: #5c6b80;
  --dock-hover-bg: rgba(8, 120, 249, 0.09);
  --dock-hover-line: rgba(8, 120, 249, 0.14);
  position: static;
  inset: auto;
  width: 100%;
  min-height: 58px;
  grid-template-columns: repeat(5, minmax(56px, 1fr));
  gap: 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 2px;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.canvas-create-dock button {
  min-height: 54px;
  border-radius: 10px;
  background: transparent;
  color: var(--dock-label);
  padding: 3px 2px;
  pointer-events: auto;
}

.canvas-create-dock .dock-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 18px;
}

.canvas-create-dock strong {
  margin-top: 1px;
  font-size: 10px;
}

.app-shell.subpage-open .topbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-shell.subpage-open .asset-page,
.app-shell.subpage-open .subpage {
  padding-top: calc(var(--topbar-height) + 28px);
}

@media (max-width: 1100px) {
  .topbar {
    padding-inline: 18px;
    grid-template-columns: minmax(140px, 1fr) minmax(280px, 340px) max-content;
    gap: 12px;
  }

  .toolbar-shell {
    max-width: 340px;
  }

  .canvas-create-dock {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
  }
}

@media (max-width: 980px) {
  .credit-chip {
    width: 40px;
    min-width: 40px;
    justify-content: center;
    padding: 0;
  }

  .credit-chip strong {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --topbar-height: 116px;
  }

  .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 2px 12px 4px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 52px 58px;
    gap: 0 8px;
  }

  .toolbar-shell {
    width: 100%;
    max-width: none;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .top-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .canvas-create-dock {
    min-height: 56px;
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    gap: 1px;
    padding: 1px;
  }

  .canvas-create-dock button {
    min-height: 52px;
  }

  #runChainBtn {
    min-width: 76px;
  }
}

/* Calmer dark canvas spotlight, approved 2026-07-15. */
[data-theme="dark"] .canvas-area::before {
  background: radial-gradient(
    circle 160px at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    rgba(78, 140, 196, 0.065),
    transparent 72%
  );
  mix-blend-mode: normal;
}

[data-theme="dark"] .canvas-area.pointer-lit::before {
  opacity: 0.62;
}

/* Unified adaptive node workbench, approved 2026-07-15. */
:root {
  --node-workbench-bg: transparent;
  --node-section-bg: var(--surface-muted);
  --node-control-bg: var(--control-bg);
  --node-workbench-border: var(--glass-border);
}

[data-theme="dark"] {
  --node-workbench-bg: transparent;
  --node-section-bg: var(--surface-muted);
  --node-control-bg: var(--control-bg);
  --node-workbench-border: var(--glass-border);
}

.node-body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.node-workbench {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 9px;
  overflow: hidden;
  background: var(--node-workbench-bg);
}

.node-workbench-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 9px;
  overflow: hidden;
}

.prompt-workbench .node-workbench-main,
.loop-workbench .node-workbench-main,
.output-workbench .node-workbench-main {
  grid-template-rows: minmax(108px, 1fr) minmax(118px, 0.9fr);
}

.image-workbench .node-workbench-main,
.video-workbench .node-workbench-main {
  grid-template-rows: minmax(138px, 1fr) minmax(176px, 1.08fr);
}

.llm-workbench .node-workbench-main {
  grid-template-rows: auto minmax(58px, 0.55fr) minmax(92px, 0.8fr) minmax(116px, 1.25fr);
}

.node-workbench-main > .node-stage,
.node-workbench-main > .node-console,
.node-section {
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}

.node-workbench .node-console,
.node-section {
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--node-workbench-border);
  border-radius: 10px;
  background: var(--node-section-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.node-workbench .node-console {
  display: block;
  padding: 9px;
}

.node-workbench-scroll {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.node-field,
.node-field-grid {
  min-width: 0;
}

.node-field {
  display: grid;
  gap: 5px;
}

.node-field > span,
.node-section-label > span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

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

.node-field-grid,
.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid.three,
.video-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.node-workbench textarea,
.node-workbench select,
.node-workbench input {
  min-width: 0;
  max-width: 100%;
}

.workbench-editor-field textarea {
  min-height: 76px;
  resize: none;
}

.node-workbench .input-preview-list {
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.node-workbench .compact-preview {
  max-height: 82px;
}

.input-preview-item {
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
}

.input-preview-item > div {
  min-width: 0;
}

.input-preview-item strong,
.input-preview-item span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.node-workbench-footer {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--node-workbench-border);
  border-radius: 10px;
  background: var(--node-section-bg);
  padding: 5px 6px 5px 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.node-workbench-status {
  margin-left: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.node-workbench-status.running,
.node-workbench-status.queued {
  color: var(--warning);
}

.node-workbench-status.succeeded {
  color: var(--success);
}

.node-workbench-status.failed {
  color: var(--danger);
}

.node-workbench-run {
  min-width: 92px;
  min-height: 32px;
  border: 1px solid var(--system-blue);
  border-radius: 8px;
  background: var(--system-blue);
  color: #fff;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 760;
  box-shadow: 0 5px 14px rgba(8, 120, 249, 0.18);
}

.node-workbench-run:hover,
.node-workbench-run:focus-visible {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(8, 120, 249, 0.24);
}

.node-workbench-run:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--system-blue) 44%, transparent);
  outline-offset: 2px;
}

.node-section-label {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.node-section-label small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-context,
.llm-instruction,
.llm-output {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  padding: 9px;
}

.llm-output-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.llm-copy-button {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--node-workbench-border);
  border-radius: 7px;
  background: var(--node-control-bg);
  color: var(--muted);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 760;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 90ms ease;
}

.llm-copy-button:hover:not(:disabled),
.llm-copy-button:focus-visible {
  border-color: color-mix(in srgb, var(--system-blue) 62%, var(--node-workbench-border));
  color: var(--system-blue);
}

.llm-copy-button:active:not(:disabled) {
  transform: scale(0.96);
}

.llm-copy-button:disabled {
  cursor: default;
  opacity: 0.42;
}

.llm-copy-button.copied {
  border-color: color-mix(in srgb, var(--success) 58%, var(--node-workbench-border));
  background: color-mix(in srgb, var(--success) 10%, var(--node-control-bg));
  color: var(--success);
}

.llm-context-list {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

.llm-instruction-input {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
}

.llm-output-scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--node-workbench-border);
  border-radius: 8px;
  background: var(--node-control-bg);
  color: var(--ink);
  padding: 9px 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

.llm-output-editor {
  width: 100%;
  height: 100%;
  resize: none;
  font: inherit;
  line-height: 1.5;
}

.llm-output-editor:focus {
  border-color: color-mix(in srgb, var(--system-blue) 64%, var(--node-workbench-border));
  outline: 2px solid color-mix(in srgb, var(--system-blue) 18%, transparent);
  outline-offset: 0;
}

.llm-clear-button:hover:not(:disabled),
.llm-clear-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--node-workbench-border));
  color: var(--danger);
}

.llm-output-empty {
  height: 100%;
  min-height: 0;
}

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

.image-scale-field,
.fps-field {
  align-content: end;
}

.image-scale-group,
.fps-compact {
  min-width: 0;
  justify-content: flex-start;
}

.director-workbench {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.director-workbench .director-results {
  min-width: 0;
  min-height: 0;
}

.director-workbench .node-workbench-status {
  margin-left: auto;
}

.node-image {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.node-image.selected,
.node-image:focus-within {
  border-color: transparent;
  box-shadow: none;
}

[data-theme="dark"] .node-workbench,
[data-theme="dark"] .node-section,
[data-theme="dark"] .node-workbench-footer {
  color: var(--ink);
}

/* Presentation-safe local generation demo. */
.node-demo {
  --demo-accent: #0a84ff;
  border-color: color-mix(in srgb, var(--demo-accent) 28%, var(--glass-border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 16px 46px rgba(15, 69, 112, 0.13);
}

.node-demo.node-video {
  --demo-accent: #30b971;
}

.demo-node-badge {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--demo-accent) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--demo-accent) 10%, transparent);
  color: var(--demo-accent);
  padding: 0 7px;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.node-demo .stage-progress-fill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--demo-accent), #67e8d2);
}

.node-demo .stage-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: demo-progress-scan 1.15s linear infinite;
}

.node-demo .demo-run {
  border-color: transparent;
  background: var(--demo-accent);
  color: #fff;
}

.node-demo .demo-run:hover,
.node-demo .demo-run:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--demo-accent) 84%, #001526);
  color: #fff;
}

@keyframes demo-progress-scan {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .node-demo .stage-progress-fill::after {
    animation: none;
  }
}

[data-theme="dark"] .node-workbench-status {
  color: var(--muted);
}

[data-theme="dark"] .node-workbench-status.running {
  color: var(--warning);
}

[data-theme="dark"] .node-workbench-status.queued {
  color: var(--warning);
}

[data-theme="dark"] .node-workbench-status.succeeded {
  color: var(--success);
}

[data-theme="dark"] .node-workbench-status.failed {
  color: var(--danger);
}

[data-theme="dark"] .node-workbench-run {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

.node-media-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.node-image .node-media-shell.image {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: var(--media-aspect, 1 / 1);
}

.node-media-shell .node-media-preview,
.node-media-shell > .node-media {
  width: 100%;
  height: 100%;
  margin: 0;
}

.node-media-download {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  transition: transform 100ms ease-out, opacity 100ms ease-out;
}

.node-media-download i {
  display: block;
  font-size: 22px;
}

.node-media-download:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.86;
  transform: scale(1.08);
}

.node-media-download:active {
  transform: scale(0.94);
}

.node-media-download:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.node-media-shell.video .node-media-download {
  bottom: 44px;
}

.chip:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  border-color: var(--node-workbench-border);
  background: var(--node-control-bg);
  color: var(--muted);
  box-shadow: none;
}

.video-frame-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.video-frame-slot {
  position: relative;
  min-width: 0;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--node-workbench-border);
  border-radius: 10px;
  background: var(--node-control-bg);
  color: var(--muted);
}

.video-frame-slot > span {
  position: absolute;
  top: 6px;
  left: 7px;
  z-index: 1;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.video-frame-slot.filled > span {
  color: #fff;
}

.video-frame-slot img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: var(--node-control-bg);
}

.video-frame-empty {
  display: grid;
  place-items: center;
  gap: 3px;
  padding-top: 14px;
  text-align: center;
}

.video-frame-empty i {
  font-size: 18px;
}

.video-frame-empty small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.video-frame-slot.disabled {
  opacity: 0.66;
}

.video-frame-slot-action {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--node-workbench-border);
  border-radius: 7px;
  background: var(--node-section-bg);
  color: var(--ink);
  padding: 0 7px;
  box-shadow: 0 2px 8px rgba(24, 39, 58, 0.14);
  font-size: 9px;
  font-weight: 760;
  transition: transform 100ms ease-out, border-color 140ms ease-out, background 140ms ease-out;
}

.video-frame-slot-action:hover:not(:disabled) {
  border-color: var(--system-blue);
  background: var(--node-control-bg);
}

.video-frame-slot-action:active:not(:disabled) {
  transform: scale(0.96);
}

.video-frame-slot-action:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.strong-reference-panel {
  display: grid;
  gap: 7px;
  border: 1px solid var(--node-workbench-border);
  border-radius: 10px;
  background: var(--node-control-bg);
  padding: 8px;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}

.strong-reference-panel.active {
  border-color: color-mix(in srgb, var(--system-blue) 58%, var(--node-workbench-border));
  background: color-mix(in srgb, var(--system-blue) 7%, var(--node-control-bg));
}

.strong-reference-panel.disabled {
  border-style: dashed;
}

.strong-reference-head,
.strong-reference-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.strong-reference-head {
  justify-content: space-between;
}

.strong-reference-head > div {
  min-width: 0;
}

.strong-reference-head strong,
.strong-reference-head small {
  display: block;
}

.strong-reference-head strong {
  color: var(--ink);
  font-size: 10px;
  font-weight: 820;
}

.strong-reference-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 620;
  line-height: 1.35;
}

.strong-reference-switch {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 34%, transparent);
  padding: 2px;
  transition: background 150ms ease-out;
}

.strong-reference-switch span {
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 31, 46, 0.28);
  transform: translateX(0);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.strong-reference-switch[aria-pressed="true"] {
  background: var(--system-blue);
}

.strong-reference-switch[aria-pressed="true"] span {
  transform: translateX(14px);
}

.strong-reference-switch:disabled {
  cursor: not-allowed;
  opacity: 0.44;
}

.strong-reference-controls {
  flex-wrap: wrap;
}

.strong-reference-role-group {
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.strong-reference-role,
.strong-reference-token,
.strong-reference-clear {
  min-height: 24px;
  border: 1px solid var(--node-workbench-border);
  border-radius: 7px;
  background: var(--node-section-bg);
  color: var(--muted);
  padding: 0 7px;
  font-size: 9px;
  font-weight: 750;
}

.strong-reference-role.active {
  border-color: color-mix(in srgb, var(--system-blue) 48%, var(--node-workbench-border));
  background: color-mix(in srgb, var(--system-blue) 9%, var(--node-section-bg));
  color: var(--system-blue);
}

.strong-reference-role:disabled,
.strong-reference-token:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.strong-reference-token {
  color: var(--system-blue);
  font-weight: 820;
}

.strong-reference-clear {
  width: 24px;
  margin-left: auto;
  padding: 0;
}

.drawer-selection-hint {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--system-blue) 28%, var(--glass-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--system-blue) 7%, var(--control-bg));
  color: var(--system-blue);
  padding: 9px 10px;
}

.drawer-selection-hint > i {
  flex: 0 0 auto;
  font-size: 18px;
}

.drawer-selection-hint span,
.drawer-selection-hint strong,
.drawer-selection-hint small {
  min-width: 0;
  display: block;
}

.drawer-selection-hint strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.drawer-selection-hint small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.asset-drawer.selection-mode .drawer-asset-card:hover,
.asset-drawer.selection-mode .drawer-asset-card:focus-visible {
  border-color: var(--system-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--system-blue) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .video-frame-slot-action,
  .strong-reference-panel,
  .strong-reference-switch,
  .strong-reference-switch span {
    transition-duration: 120ms;
  }
}

@media (max-width: 760px) {
  .node-field-grid,
  .field-grid.two,
  .field-grid.three,
  .video-option-grid,
  .image-option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Non-destructive image editor opened from a canvas image node. */
.media-preview-modal {
  padding: clamp(12px, 2vw, 28px);
  overflow: hidden;
}

.media-preview-card.media-editor-card {
  --media-editor-panel-width: 330px;
  --media-editor-stage-width: clamp(
    440px,
    calc((100dvh - 274px) * var(--media-editor-aspect, 1) + 56px),
    980px
  );
  width: min(
    calc(var(--media-editor-stage-width) + var(--media-editor-panel-width)),
    calc(100vw - clamp(24px, 4vw, 56px))
  );
  height: min(900px, calc(100dvh - clamp(24px, 4vw, 56px)));
  max-width: none;
  max-height: none;
  display: grid;
  place-items: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 26px;
  background: rgba(248, 249, 252, 0.9);
  box-shadow: 0 32px 110px rgba(8, 15, 28, 0.42), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
  padding: 0;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  animation: media-editor-materialize 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes media-editor-materialize {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

.media-editor-header,
.media-editor-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.media-editor-header {
  min-height: 76px;
  padding: 14px 18px 13px 22px;
  box-shadow: 0 1px 0 rgba(24, 38, 58, 0.08);
}

.media-editor-heading {
  min-width: 0;
}

.media-editor-heading .modal-kicker {
  margin-bottom: 2px;
  color: var(--system-blue);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.media-editor-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.media-editor-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.media-editor-history,
.media-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 54, 78, 0.11);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  cursor: pointer;
  transition: transform 110ms ease-out, background 150ms ease, border-color 150ms ease;
}

.editor-icon-button i {
  font-size: 17px;
}

.editor-icon-button:hover:not(:disabled) {
  border-color: rgba(8, 120, 249, 0.22);
  background: rgba(8, 120, 249, 0.08);
}

.editor-icon-button:active:not(:disabled) {
  transform: scale(0.94);
}

.editor-icon-button:disabled {
  cursor: default;
  opacity: 0.34;
}

.top-actions .history-action {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.top-actions .history-action i {
  font-size: 16px;
}

.canvas-area.is-file-dragging {
  outline: 2px solid color-mix(in srgb, var(--nody-selected) 78%, transparent);
  outline-offset: -6px;
}

.canvas-area.is-file-dragging::after {
  content: "松开即可批量导入图片";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 500;
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 42%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--nody-card) 94%, transparent);
  color: var(--nody-text);
  padding: 0 24px;
  box-shadow: 0 18px 48px rgba(31, 45, 66, 0.18);
  font-size: 13px;
  font-weight: 720;
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: blur(18px);
}

.media-editor-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--media-editor-panel-width);
  overflow: hidden;
}

.media-editor-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  outline: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(68, 88, 118, 0.2), transparent 48%),
    #0e1219;
  user-select: none;
  touch-action: none;
}

.media-editor-stage:focus-visible {
  box-shadow: 0 0 0 3px rgba(8, 120, 249, 0.8) inset;
}

.media-editor-canvas-wrap {
  position: relative;
  max-width: calc(100% - 44px);
  max-height: calc(100% - 78px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #f7f8fa;
  background-image:
    linear-gradient(45deg, #e4e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e4e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e4e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e4e7eb 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border-radius: 13px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#mediaEditorCanvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
  touch-action: none;
}

#mediaEditorCanvas[data-tool="move"] { cursor: grab; }
.media-editor-stage.is-dragging #mediaEditorCanvas[data-tool="move"] { cursor: grabbing; }
#mediaEditorCanvas[data-tool="brush"],
#mediaEditorCanvas[data-tool="eraser"] { cursor: crosshair; }

.media-editor-source {
  display: none !important;
}

.media-editor-loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-width: 260px;
  min-height: 180px;
  padding: 24px;
  background: rgba(245, 247, 250, 0.94);
  color: #48566a;
  text-align: center;
  font-size: 12px;
}

.media-preview-modal.is-loading .media-editor-loading {
  display: grid;
}

.media-editor-loading i {
  color: var(--system-blue);
  font-size: 24px;
  animation: editor-spinner 900ms linear infinite;
}

.media-editor-loading .ph-warning-circle {
  color: #ff9f0a;
  animation: none;
}

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

.media-editor-stage-hint {
  position: absolute;
  left: 50%;
  bottom: 68px;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  pointer-events: none;
}

.media-editor-stage-zoom {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background: rgba(15, 20, 29, 0.82);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateX(-50%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.media-editor-stage-zoom button {
  min-width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  padding: 0 12px;
  box-shadow: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}

.media-editor-stage-zoom button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.media-editor-stage-zoom button:hover:not(:disabled),
.media-editor-stage-zoom button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.media-editor-stage-zoom button:focus-visible {
  outline: 2px solid rgba(78, 165, 255, 0.95);
  outline-offset: -3px;
}

.media-editor-stage-zoom button:active:not(:disabled) {
  background: rgba(8, 120, 249, 0.34);
}

.media-editor-stage-zoom button:disabled {
  cursor: default;
  opacity: 0.3;
}

.media-editor-stage-zoom .media-editor-zoom-value {
  min-width: 68px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.media-editor-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: rgba(246, 247, 250, 0.96);
  box-shadow: -1px 0 0 rgba(24, 38, 58, 0.08);
}

.media-editor-section {
  padding: 10px 4px 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.media-editor-section + .media-editor-section {
  margin-top: 0;
  padding-top: 15px;
  border-top: 1px solid rgba(36, 54, 78, 0.09);
}

.media-editor-section-title {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 11px;
}

.media-editor-section-title strong {
  font-size: 12px;
  letter-spacing: -0.006em;
}

.media-editor-section-title > span {
  color: var(--muted);
  font-size: 10px;
}

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

.media-editor-ratios button,
.media-editor-transform-grid button,
.media-editor-tools button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(36, 54, 78, 0.1);
  border-radius: 10px;
  background: rgba(250, 251, 253, 0.9);
  color: #415066;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: transform 100ms ease-out, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.media-editor-ratios button:hover,
.media-editor-transform-grid button:hover,
.media-editor-tools button:hover {
  border-color: rgba(8, 120, 249, 0.24);
  color: var(--system-blue);
}

.media-editor-ratios button:active,
.media-editor-transform-grid button:active,
.media-editor-tools button:active {
  transform: scale(0.96);
}

.media-editor-ratios button.active,
.media-editor-tools button.active {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(8, 120, 249, 0.2);
}

.media-editor-transform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.media-editor-transform-grid button,
.media-editor-tools button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 6px 3px;
}

.media-editor-transform-grid i,
.media-editor-tools i {
  font-size: 16px;
}

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

.media-editor-brush-controls {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.media-editor-color {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.media-editor-color input {
  width: 100%;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(36, 54, 78, 0.12);
  border-radius: 9px;
  background: #fff;
  padding: 3px;
  cursor: pointer;
}

.media-editor-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  color: #4b586a;
  font-size: 10px;
  font-weight: 650;
}

.media-editor-slider + .media-editor-slider {
  margin-top: 10px;
}

.media-editor-slider output {
  min-width: 32px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.media-editor-slider input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  accent-color: var(--system-blue);
  cursor: pointer;
}

.media-editor-brush-size {
  align-self: end;
}

.editor-text-button {
  border: 0;
  background: transparent;
  color: var(--system-blue);
  padding: 2px 0;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.media-editor-footer {
  min-height: 64px;
  padding: 11px 16px 11px 22px;
  box-shadow: 0 -1px 0 rgba(24, 38, 58, 0.08);
}

.media-editor-status {
  color: var(--muted);
  font-size: 11px;
}

.media-editor-actions .primary-button,
.media-editor-actions .ghost-button {
  min-height: 38px;
  border-radius: 11px;
  padding-inline: 16px;
}

.media-editor-actions .primary-button {
  display: flex;
  align-items: center;
  gap: 6px;
}

.media-preview-modal.is-saving .media-editor-layout,
.media-preview-modal.is-saving .media-editor-header {
  pointer-events: none;
  opacity: 0.72;
}

[data-theme="dark"] .media-preview-card.media-editor-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(20, 27, 37, 0.94);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .media-editor-header,
[data-theme="dark"] .media-editor-footer {
  background: rgba(24, 32, 44, 0.88);
}

[data-theme="dark"] .media-editor-panel {
  background: rgba(17, 24, 34, 0.98);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .media-editor-section {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .editor-icon-button,
[data-theme="dark"] .media-editor-ratios button,
[data-theme="dark"] .media-editor-transform-grid button,
[data-theme="dark"] .media-editor-tools button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(16, 23, 33, 0.72);
  color: #dce4ef;
}

[data-theme="dark"] .media-editor-ratios button.active,
[data-theme="dark"] .media-editor-tools button.active {
  border-color: var(--system-blue);
  background: var(--system-blue);
  color: #fff;
}

[data-theme="dark"] .media-editor-slider,
[data-theme="dark"] .media-editor-color {
  color: #c3cfdd;
}

@media (max-width: 980px) {
  .media-preview-card.media-editor-card {
    height: calc(100dvh - 24px);
    width: calc(100vw - 24px);
    border-radius: 20px;
  }

  .media-editor-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 1fr) minmax(0, 320px);
    overflow: hidden;
  }

  .media-editor-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 320px;
    box-shadow: 0 -1px 0 rgba(24, 38, 58, 0.08);
  }

  .media-editor-section + .media-editor-section {
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .media-preview-modal { padding: 0; }
  .media-preview-card.media-editor-card {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .media-editor-heading p { display: none; }
  .media-editor-header { min-height: 64px; padding: 10px 12px 9px 16px; }
  .media-editor-panel { grid-template-columns: minmax(0, 1fr); max-height: 42dvh; }
  .media-editor-footer { padding: 9px 10px; }
  .media-editor-status { display: none; }
  .media-editor-stage-hint { display: none; }
  .media-editor-stage-zoom { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-preview-card.media-editor-card { animation: none; }
  .media-editor-loading i { animation-duration: 1.4s; }
}

@media (prefers-reduced-transparency: reduce) {
  .media-preview-card.media-editor-card,
  .media-editor-header,
  .media-editor-footer,
  .media-editor-panel,
  .media-editor-discard-card {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Local hardening: hydrated boot state, history actions and batch file drop. */
.app-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(35, 198, 190, 0.13), transparent 34%),
    var(--canvas-bg, #f7f9fc);
  color: var(--text, #172130);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.app-boot-screen img {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(16, 42, 66, 0.12);
}

.app-boot-screen strong {
  margin-top: 6px;
  font-size: 15px;
}

.app-boot-screen span {
  color: var(--muted, #7b8797);
  font-size: 11px;
}

body.app-booting .app-shell {
  visibility: hidden;
}

.app-boot-screen[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}

[data-theme="dark"] .app-boot-screen {
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 197, 186, 0.12), transparent 34%),
    #0b111a;
  color: #eef7fa;
}

.top-actions .history-action {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.top-actions .history-action i {
  font-size: 16px;
}

.canvas-area.is-file-dragging {
  outline: 2px solid color-mix(in srgb, var(--nody-selected) 78%, transparent);
  outline-offset: -6px;
}

.canvas-area.is-file-dragging::after {
  content: "松开即可批量导入图片";
  position: fixed;
  left: calc(var(--sidebar-width) + 50%);
  top: 50%;
  z-index: 500;
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 42%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--nody-card) 94%, transparent);
  color: var(--nody-text);
  padding: 0 24px;
  box-shadow: 0 18px 48px rgba(31, 45, 66, 0.18);
  font-size: 13px;
  font-weight: 720;
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: blur(18px);
}

.platform-policy-note {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-top: 1px solid var(--nody-border);
  color: var(--nody-muted);
  padding: 8px 14px 0;
  font-size: 9px;
  line-height: 1.45;
}

.platform-policy-note i {
  margin-top: 1px;
  color: var(--nody-selected);
  font-size: 12px;
}

/* Daily check-in calendar, backed by the real account check-in ledger. */
.account-checkin-card {
  min-width: 0;
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(480px, 1.28fr) minmax(260px, 0.66fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 14px 18px;
  border: 1px solid var(--account-border);
  border-radius: 18px;
  background: var(--account-surface);
  color: var(--account-text);
  padding: 18px;
}

.account-checkin-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.account-checkin-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-checkin-head > div > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-checkin-head strong {
  font-size: 15px;
}

.account-checkin-head small,
.account-checkin-month-head small {
  color: var(--account-muted);
  font-size: 11px;
}

.account-checkin-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  font-size: 18px;
}

.account-checkin-head .primary-button {
  min-height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding-inline: 14px;
  font-size: 11px;
}

.account-checkin-head .primary-button:disabled {
  background: transparent;
  color: var(--account-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--account-accent) 34%, transparent);
  opacity: 1;
}

.account-checkin-stats {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-self: start;
  margin-top: 4px;
}

.account-checkin-stats > span {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  border-radius: 11px;
  background: var(--account-accent-soft);
  text-align: center;
}

.account-checkin-stats b {
  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-checkin-stats small {
  color: var(--account-muted);
  font-size: 10px;
}

.account-checkin-month {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  border: 1px solid var(--account-border);
  border-radius: 14px;
  padding: 12px;
}

.account-checkin-month-head {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-checkin-month-head strong {
  font-size: 13px;
}

.account-checkin-weekdays,
.account-checkin-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.account-checkin-weekdays {
  margin-top: 5px;
  border-bottom: 1px solid var(--account-border);
}

.account-checkin-weekdays span {
  min-width: 0;
  color: var(--account-muted);
  padding: 5px 0;
  text-align: center;
  font-size: 10px;
}

.account-checkin-day {
  position: relative;
  min-width: 0;
  min-height: 42px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  border-right: 1px solid color-mix(in srgb, var(--account-border) 56%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--account-border) 56%, transparent);
  color: var(--account-text);
  font-variant-numeric: tabular-nums;
}

.account-checkin-day:nth-child(7n) {
  border-right: 0;
}

.account-checkin-day b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 620;
}

.account-checkin-day i {
  position: absolute;
  right: calc(50% - 16px);
  bottom: 4px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 2px solid var(--account-surface);
  border-radius: 50%;
  background: #1fbd70;
  color: #fff;
  font-size: 8px;
}

.account-checkin-day small {
  color: #118452;
  font-size: 8px;
}

.account-checkin-day.is-today b {
  background: var(--account-blue);
  color: #fff;
}

.account-checkin-day.is-outside {
  color: color-mix(in srgb, var(--account-muted) 56%, transparent);
}

.account-checkin-rules {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--account-accent-soft) 60%, transparent);
  color: var(--account-muted);
  padding: 14px 14px 14px 28px;
  font-size: 11px;
  line-height: 1.65;
}

@media (max-width: 1600px) {
  .account-checkin-card {
    grid-template-columns: minmax(230px, 0.7fr) minmax(360px, 1.3fr);
  }

  .account-checkin-rules {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: 10px;
  }
}

@media (max-width: 1080px) {
  .account-checkin-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-checkin-head,
  .account-checkin-stats,
  .account-checkin-month,
  .account-checkin-rules {
    grid-column: 1;
    grid-row: auto;
  }

  .account-checkin-rules {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .node-editor-panel {
    width: min(var(--node-editor-width), calc(100vw - var(--sidebar-width) - 28px));
  }
}

@media (max-width: 620px) {
  .account-checkin-card {
    padding: 13px;
  }

  .account-checkin-head {
    align-items: stretch;
    flex-direction: column;
  }

  .account-checkin-head .primary-button {
    width: 100%;
  }

  .account-checkin-month {
    padding: 9px;
  }

  .account-checkin-day {
    min-height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-screen {
    transition: none;
  }
}

.media-editor-discard {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 10, 18, 0.42);
}

.media-editor-discard.hidden {
  display: none;
}

.media-editor-discard-card {
  width: min(390px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  padding: 18px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.media-editor-discard-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 159, 10, 0.13);
  color: #d87800;
}

.media-editor-discard-icon i { font-size: 18px; }
.media-editor-discard-card h3 { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: -0.01em; }
.media-editor-discard-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.media-editor-discard-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.media-editor-discard-actions button { min-height: 36px; border-radius: 10px; }

.media-editor-discard-actions .danger-button {
  min-width: 104px;
  border-color: #c70018;
  background: #d70015;
  color: #fff;
  box-shadow: 0 7px 18px rgba(215, 0, 21, 0.22);
}

.media-editor-discard-actions .danger-button:hover,
.media-editor-discard-actions .danger-button:focus-visible {
  border-color: #a90014;
  background: #b80016;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(215, 0, 21, 0.16), 0 8px 20px rgba(184, 0, 22, 0.24);
}

[data-theme="dark"] .media-editor-discard-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(29, 38, 51, 0.96);
}

.node-media-edit {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
  transition: opacity 120ms ease, transform 100ms ease-out;
}

.node-media-edit i {
  font-size: 21px;
}

.node-media-shell.image:hover .node-media-edit,
.node-media-edit:focus-visible {
  opacity: 1;
}

.node-media-edit:active {
  transform: scale(0.92);
}

.node-media-edit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
  .node-media-edit { width: 44px; height: 44px; opacity: 1; }
  .editor-icon-button { width: 44px; height: 44px; }
  .media-editor-ratios button,
  .media-editor-transform-grid button,
  .media-editor-tools button { min-height: 44px; }
}

/* 云知画布品牌系统 */
.brand-avatar-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(48, 213, 200, 0.34);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.96), rgba(227, 250, 248, 0.88) 64%, rgba(48, 213, 200, 0.2));
}

.brand-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  pointer-events: none;
  user-select: none;
}

.sidebar-brand .brand-mark {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-brand strong {
  letter-spacing: 0.02em;
}

.empty-hint {
  pointer-events: none;
}

.empty-hint-avatar {
  width: 76px;
  height: 76px;
  margin-bottom: 4px;
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 16px 34px rgba(18, 160, 150, 0.2);
  animation: yunzhi-avatar-enter 220ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes yunzhi-avatar-enter {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.empty-hint strong {
  color: var(--ink);
  letter-spacing: -0.01em;
}

.auth-body {
  min-height: 100dvh;
  overflow: auto;
  color: #142028;
  color-scheme: light;
  background: #eef5f8 url("/static/brand/yunzhi-auth-bg.webp?v=20260811-v160-security-monitor1") center / cover no-repeat fixed;
}

.auth-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1052px) minmax(380px, 420px);
  align-items: stretch;
  justify-items: stretch;
  justify-content: start;
  gap: clamp(48px, 5.5vw, 100px);
  padding: 0;
}

.auth-brand-stage {
  position: relative;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-brand-stage::before {
  display: none;
}

.auth-brand-copy {
  position: relative;
  z-index: 3;
  width: min(580px, 60%);
  padding: clamp(74px, 11vh, 116px) 0 0 clamp(42px, 3.7vw, 66px);
}

.auth-brand-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b9f97;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.18em;
}

.auth-brand-copy > span::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #18bcb2;
}

.auth-brand-copy h2 {
  margin: 20px 0 16px;
  color: #111d25;
  font-family: inherit;
  font-size: clamp(46px, 4.35vw, 70px);
  font-weight: 770;
  line-height: 1.1;
  letter-spacing: -0.055em;
}

.auth-brand-copy h2 span {
  color: #13aea5;
}

.auth-brand-copy p {
  width: min(410px, 100%);
  margin: 0;
  color: #65747d;
  font-size: 15px;
  line-height: 1.78;
}

.auth-brand-visual {
  position: absolute;
  inset: 0 -2% -10% -10%;
  z-index: 1;
  overflow: hidden;
}

.auth-brand-visual > img,
.auth-brand-visual > video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  filter: saturate(1.06) contrast(1.045);
  mix-blend-mode: multiply;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 62%, rgba(0, 0, 0, 0.92) 68%, rgba(0, 0, 0, 0.45) 82%, transparent 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 62%, rgba(0, 0, 0, 0.92) 68%, rgba(0, 0, 0, 0.45) 82%, transparent 94%, transparent 100%);
}

.auth-brand-static {
  opacity: 1;
  transition: opacity 260ms ease;
}

.auth-brand-intro {
  display: block;
  opacity: 0;
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
  transform: none;
  backface-visibility: visible;
  transition: opacity 260ms ease;
}

.auth-brand-visual > .auth-brand-intro {
  filter: none;
  transform: none;
  backface-visibility: visible;
}

html[data-auth-mode="intro"][data-auth-media="video"] .auth-brand-static {
  opacity: 0;
}

html[data-auth-mode="intro"] .auth-brand-intro.is-ready {
  opacity: 1;
}

.auth-panel {
  width: min(420px, 100%);
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #142028;
  box-shadow: none;
  padding: 42px 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.auth-panel-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-theme-toggle {
  min-width: 76px;
  height: 36px;
  margin-left: auto;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(20, 32, 40, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #53616b;
  box-shadow: 0 8px 22px rgba(30, 67, 72, 0.08);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus-visible {
  border-color: rgba(21, 151, 143, 0.34);
  background: rgba(235, 251, 248, 0.94);
  color: #0d857d;
  transform: translateY(-1px);
}

.auth-theme-toggle i {
  font-size: 15px;
}

.auth-panel-brand .brand-mark {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #e8fbf9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 34px rgba(28, 159, 151, 0.16);
}

.auth-panel-brand .eyebrow {
  margin: 0;
  color: #17232b;
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.auth-panel-brand span {
  display: block;
  margin-top: 4px;
  color: #74828d;
  font-size: 12px;
  font-weight: 650;
}

.auth-panel h1 {
  margin: 50px 0 8px;
  color: #152129;
  font-size: 34px;
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-panel > p {
  margin: 0;
  color: #596573;
  font-size: 14px;
  line-height: 1.65;
}

.auth-panel form {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

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

.auth-field-group[hidden] {
  display: none;
}

.auth-panel .field-label {
  color: #495761;
  font-size: 12px;
  font-weight: 740;
}

.auth-input-shell {
  position: relative;
}

.auth-input-shell > i {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 1;
  color: #9aa8b1;
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.auth-panel .field-input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(150, 170, 184, 0.46);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.64);
  color: #17232b;
  padding: 0 48px 0 46px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 24px rgba(43, 76, 95, 0.045);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.auth-panel .field-input::placeholder {
  color: #9aa8b1;
}

.auth-panel .field-input:hover {
  border-color: rgba(87, 142, 153, 0.58);
  background: rgba(255, 255, 255, 0.76);
}

.auth-panel .field-input:focus {
  border-color: #16b8ae;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(22, 184, 174, 0.12);
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #87959f;
  transform: translateY(-50%);
}

button.auth-password-toggle:not(:disabled):active {
  transform: translateY(-50%) scale(var(--press-scale));
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  background: rgba(18, 169, 160, 0.08);
  color: #0d9b93;
}

.auth-panel .primary-button.full {
  width: 100%;
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 4px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(100deg, #157d77 0%, #16a59c 48%, #21c9bd 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 820;
  box-shadow: 0 16px 34px rgba(18, 151, 142, 0.22);
}

.auth-panel .primary-button.full span {
  grid-column: 2;
}

.auth-panel .primary-button.full i {
  grid-column: 3;
  justify-self: end;
  margin-right: 6px;
  font-size: 18px;
  transition: transform 140ms ease;
}

.auth-panel .primary-button.full:hover,
.auth-panel .primary-button.full:focus-visible {
  background: linear-gradient(100deg, #126f6a 0%, #119d94 48%, #1bc0b5 100%);
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(22, 184, 174, 0.13),
    0 18px 38px rgba(18, 151, 142, 0.24);
  transform: translateY(-1px);
}

.auth-panel .primary-button.full:hover i {
  transform: translateX(3px);
}

.auth-panel .field-input[aria-invalid="true"] {
  border-color: #c42b3c;
  box-shadow: 0 0 0 3px rgba(196, 43, 60, 0.12);
}

.auth-terms-consent:has(input[aria-invalid="true"]) {
  color: #c42b3c;
}

.auth-panel .error-line {
  min-height: 22px;
  margin-top: 10px;
  color: #c42b3c;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.5;
}

.auth-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 24px;
}

.auth-link-row .text-link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  align-self: auto;
  color: #087d77;
  font-size: 12px;
  font-weight: 760;
}

.auth-link-row .text-link[hidden] {
  display: none;
}

.auth-link-row .text-link:hover,
.auth-link-row .text-link:focus-visible {
  color: #066b66;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-terms-consent,
.auth-legal-links {
  color: #596573;
}

.auth-terms-consent a,
.auth-legal-links a {
  color: #087d77;
}

.auth-terms-consent a:hover,
.auth-terms-consent a:focus-visible,
.auth-legal-links a:hover,
.auth-legal-links a:focus-visible {
  color: #066b66;
}

.admin-brand-mark {
  border-color: rgba(48, 213, 200, 0.4);
  background: #eafbf9;
  box-shadow: 0 12px 28px rgba(18, 160, 150, 0.18);
}

.admin-eyebrow {
  color: #087e79;
  letter-spacing: 0.1em;
}

[data-theme="dark"] .brand-avatar-shell,
[data-theme="dark"] .sidebar-brand .brand-mark,
[data-theme="dark"] .auth-panel-brand .brand-mark,
[data-theme="dark"] .admin-brand-mark {
  border-color: rgba(65, 226, 211, 0.34);
  background: #dff8f5;
}

[data-theme="dark"] .sidebar-brand .brand-mark {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .auth-brand-stage {
  border-color: transparent;
  box-shadow: none;
}

[data-theme="dark"] .auth-panel-brand .eyebrow {
  color: #effffc;
}

[data-theme="dark"] .admin-eyebrow {
  color: #63ddd3;
}

[data-theme="dark"] .empty-hint-avatar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 40px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(65, 226, 211, 0.12);
}

[data-theme="dark"] .auth-body {
  color: #ecf8f7;
  color-scheme: dark;
  background:
    radial-gradient(circle at 74% 22%, rgba(32, 202, 190, 0.13), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(16, 116, 123, 0.16), transparent 34%),
    linear-gradient(118deg, #071116 0%, #0a171e 52%, #061019 100%);
}

[data-theme="dark"] .auth-shell {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 58% 48%, rgba(38, 205, 192, 0.055), transparent 26%),
    linear-gradient(90deg, rgba(2, 11, 16, 0.08), rgba(3, 14, 20, 0.22) 61%, rgba(3, 12, 18, 0.52));
}

[data-theme="dark"] .auth-brand-stage {
  z-index: 2;
  box-shadow:
    38px 0 58px 28px rgba(7, 17, 25, 0.96),
    86px 0 130px 46px rgba(7, 28, 34, 0.48);
}

[data-theme="dark"] .auth-brand-stage::before,
[data-theme="dark"] .auth-brand-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

[data-theme="dark"] .auth-brand-stage::before {
  background:
    linear-gradient(145deg, rgba(4, 17, 22, 0.78) 0%, rgba(4, 17, 22, 0.35) 31%, transparent 58%),
    linear-gradient(0deg, rgba(3, 13, 18, 0.34), transparent 34%);
}

[data-theme="dark"] .auth-brand-stage::after {
  background: linear-gradient(90deg, transparent 54%, rgba(6, 17, 23, 0.08) 67%, rgba(6, 16, 22, 0.72) 91%, #071119 100%);
}

[data-theme="dark"] .auth-brand-visual > img {
  filter: saturate(1.08) contrast(1.08) brightness(0.72);
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 69%, rgba(0, 0, 0, 0.88) 80%, rgba(0, 0, 0, 0.3) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 69%, rgba(0, 0, 0, 0.88) 80%, rgba(0, 0, 0, 0.3) 94%, transparent 100%);
}

[data-theme="dark"] .auth-brand-visual > video {
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 69%, rgba(0, 0, 0, 0.88) 80%, rgba(0, 0, 0, 0.3) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 69%, rgba(0, 0, 0, 0.88) 80%, rgba(0, 0, 0, 0.3) 94%, transparent 100%);
}

[data-theme="dark"] .auth-brand-copy > span {
  color: #4fe0d3;
  text-shadow: 0 0 24px rgba(41, 220, 205, 0.28);
}

[data-theme="dark"] .auth-brand-copy > span::before {
  background: #45d7cb;
  box-shadow: 0 0 14px rgba(69, 215, 203, 0.55);
}

[data-theme="dark"] .auth-brand-copy h2 {
  color: #f2fbfa;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.36);
}

[data-theme="dark"] .auth-brand-copy h2 span {
  color: #36d0c4;
}

[data-theme="dark"] .auth-brand-copy p {
  color: #b0c3c6;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] .auth-panel {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(126, 236, 225, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(22, 44, 51, 0.76), rgba(8, 23, 30, 0.68)),
    rgba(8, 22, 29, 0.68);
  color: #eef9f8;
  padding: 40px 34px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 90px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(26, 172, 161, 0.035);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
}

[data-theme="dark"] .auth-panel-brand .brand-mark {
  border: 1px solid rgba(99, 229, 217, 0.24);
  background: linear-gradient(145deg, rgba(224, 255, 251, 0.96), rgba(172, 232, 226, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 15px 36px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(42, 210, 198, 0.12);
}

[data-theme="dark"] .auth-panel-brand span {
  color: #8ea8ab;
}

[data-theme="dark"] .auth-theme-toggle {
  border-color: rgba(203, 224, 231, 0.14);
  background: rgba(19, 29, 35, 0.78);
  color: rgba(226, 239, 243, 0.78);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .auth-theme-toggle:hover,
[data-theme="dark"] .auth-theme-toggle:focus-visible {
  border-color: rgba(75, 211, 197, 0.34);
  background: rgba(27, 47, 49, 0.92);
  color: #6ce5d9;
}

[data-theme="dark"] .auth-panel h1 {
  color: #f5fbfb;
}

[data-theme="dark"] .auth-panel > p,
[data-theme="dark"] .auth-panel .field-label {
  color: #9eb3b6;
}

[data-theme="dark"] .auth-input-shell > i {
  color: #7d9da0;
}

[data-theme="dark"] .auth-panel .field-input {
  border-color: rgba(128, 181, 184, 0.28);
  background: rgba(219, 246, 244, 0.075);
  color: #f3fbfa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 28px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .auth-panel .field-input::placeholder {
  color: #6f8a8e;
}

[data-theme="dark"] .auth-panel .field-input:hover {
  border-color: rgba(88, 214, 204, 0.44);
  background: rgba(220, 248, 245, 0.105);
}

[data-theme="dark"] .auth-panel .field-input:focus {
  border-color: #3bd1c5;
  background: rgba(220, 250, 247, 0.12);
  box-shadow:
    0 0 0 4px rgba(43, 211, 198, 0.13),
    0 14px 34px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .auth-panel .field-input:-webkit-autofill,
[data-theme="dark"] .auth-panel .field-input:-webkit-autofill:hover,
[data-theme="dark"] .auth-panel .field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f3fbfa;
  box-shadow: 0 0 0 1000px #14272e inset;
  caret-color: #f3fbfa;
}

[data-theme="dark"] .auth-password-toggle {
  color: #7f9b9e;
}

[data-theme="dark"] .auth-password-toggle:hover,
[data-theme="dark"] .auth-password-toggle:focus-visible {
  background: rgba(58, 210, 198, 0.12);
  color: #50dfd3;
}

[data-theme="dark"] .auth-panel .primary-button.full {
  background: linear-gradient(100deg, #147d77 0%, #17a99f 50%, #29d0c3 100%);
  box-shadow:
    0 18px 42px rgba(4, 154, 143, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .auth-panel .primary-button.full:hover,
[data-theme="dark"] .auth-panel .primary-button.full:focus-visible {
  background: linear-gradient(100deg, #168a83 0%, #1ab7ac 50%, #33ddcf 100%);
  box-shadow:
    0 0 0 4px rgba(50, 215, 202, 0.13),
    0 22px 48px rgba(4, 154, 143, 0.3);
}

[data-theme="dark"] .auth-link-row .text-link,
[data-theme="dark"] .auth-terms-consent a,
[data-theme="dark"] .auth-legal-links a {
  color: #42d7cb;
}

[data-theme="dark"] .auth-link-row .text-link:hover,
[data-theme="dark"] .auth-link-row .text-link:focus-visible,
[data-theme="dark"] .auth-terms-consent a:hover,
[data-theme="dark"] .auth-terms-consent a:focus-visible,
[data-theme="dark"] .auth-legal-links a:hover,
[data-theme="dark"] .auth-legal-links a:focus-visible {
  color: #76eee4;
}

[data-theme="dark"] .auth-terms-consent,
[data-theme="dark"] .auth-legal-links {
  color: #7f9a9e;
}

[data-theme="dark"] .auth-legal-links {
  border-top-color: rgba(145, 211, 210, 0.12);
}

[data-theme="dark"] .auth-panel .error-line {
  color: #ff96a1;
}

@media (max-width: 1280px) {
  .auth-shell {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    gap: 36px;
    padding-right: 24px;
  }

  .auth-brand-copy {
    width: min(480px, 65%);
    padding-top: clamp(58px, 9vh, 88px);
  }

  .auth-brand-copy h2 {
    font-size: clamp(40px, 5.2vw, 56px);
  }

  .auth-brand-visual {
    inset: 0 -8% -10% -12%;
  }
}

@media (max-width: 920px) {
  .auth-body {
    background-position: 72% center;
  }

  .auth-shell {
    width: min(520px, calc(100% - 32px));
    min-height: 100dvh;
    grid-template-columns: 1fr;
    place-content: center;
    padding: 28px 0;
  }

  .auth-brand-stage {
    display: none;
  }

  .auth-panel {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    background: rgba(247, 251, 253, 0.64);
    padding: 34px;
    box-shadow: 0 30px 70px rgba(42, 72, 88, 0.13);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
  }
}

@media (max-width: 600px) {
  .auth-shell {
    width: 100%;
    padding: 18px;
  }

  .auth-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 20px 2px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .auth-panel-brand .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .auth-panel h1 {
    margin-top: 38px;
    font-size: 32px;
  }

  .auth-panel form {
    margin-top: 28px;
  }

  .auth-panel .field-input {
    height: 54px;
  }

  .auth-theme-toggle {
    height: 44px;
  }

  .auth-password-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }

  .auth-link-row .text-link,
  .auth-legal-links a {
    min-height: 44px;
  }

  .auth-terms-consent {
    min-height: 44px;
    align-items: center;
  }

  .auth-panel .primary-button.full {
    height: 56px;
  }

  [data-theme="dark"] .auth-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 20px 2px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .empty-hint-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.auth-password-toggle:not(:disabled):active {
    transform: translateY(-50%);
  }

  .empty-hint-avatar,
  .auth-panel .primary-button.full i,
  .auth-brand-static,
  .auth-brand-intro {
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .auth-panel .field-input,
  .auth-panel {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-theme="dark"] .auth-panel {
    background: #0d1d24;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-theme="dark"] .auth-panel .field-input {
    background: #14282f;
  }
}

/* One-click ecommerce shooting workbench. */
.ecommerce-studio-modal {
  left: var(--sidebar-width);
  z-index: 125;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 2%, rgba(91, 173, 255, 0.16), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(101, 214, 194, 0.11), transparent 28%),
    #edf3f9;
}

.ecommerce-studio-card {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(244, 248, 252, 0.86);
  color: var(--ink);
  box-shadow: none;
  animation: ecommerce-materialize 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ecommerce-materialize {
  from { opacity: 0; transform: translateY(10px) scale(0.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ecommerce-studio-header,
.ecommerce-studio-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px max(24px, calc((100vw - 1240px) / 2 + 24px));
  background: rgba(251, 253, 255, 0.78);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.ecommerce-studio-header::after,
.ecommerce-studio-footer::before {
  content: "";
  position: absolute;
  right: max(24px, calc((100vw - 1240px) / 2 + 24px));
  left: max(24px, calc((100vw - 1240px) / 2 + 24px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(133, 151, 177, 0.3) 8%, rgba(133, 151, 177, 0.3) 92%, transparent);
}

.ecommerce-studio-header::after { bottom: 0; }
.ecommerce-studio-footer::before { top: 0; }

.ecommerce-studio-header h2 {
  margin: 2px 0;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.ecommerce-studio-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.ecommerce-studio-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ecommerce-session-badge,
.ecommerce-back-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.ecommerce-session-badge {
  border: 1px solid rgba(35, 157, 98, 0.2);
  background: rgba(226, 247, 235, 0.76);
  color: #18784d;
  padding: 0 12px;
}

.ecommerce-back-button {
  border: 1px solid rgba(141, 160, 185, 0.34);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  padding: 0 14px;
  box-shadow: 0 5px 18px rgba(26, 53, 86, 0.07), inset 0 1px rgba(255, 255, 255, 0.86);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.ecommerce-back-button:hover { border-color: rgba(10, 132, 255, 0.48); background: rgba(255, 255, 255, 0.92); }
.ecommerce-back-button:active { transform: scale(0.97); }

.ecommerce-mode-tabs {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 42px;
  border-bottom: 1px solid rgba(133, 151, 177, 0.22);
  background: rgba(251, 253, 255, 0.72);
  padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.ecommerce-mode-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 2px;
  font-size: 12px;
  font-weight: 760;
}

.ecommerce-mode-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #0a84ff;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.ecommerce-mode-tabs button[aria-pressed="true"] { color: #0878df; }
.ecommerce-mode-tabs button[aria-pressed="true"]::after { opacity: 1; transform: scaleX(1); }
.ecommerce-mode-tabs button:hover { color: var(--ink); }
.ecommerce-mode-tabs button small {
  border-radius: 999px;
  background: #0a84ff;
  color: #fff;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.ecommerce-studio-scroll {
  width: min(1500px, 100%);
  min-height: 0;
  display: grid;
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  margin-inline: auto;
  padding: 12px 24px 18px;
  scrollbar-gutter: stable;
}

.ecommerce-shoot-workspace { display: grid; gap: 14px; }

.ecommerce-step {
  border: 1px solid rgba(153, 169, 191, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 28px rgba(20, 36, 58, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 16px;
}

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

.ecommerce-step-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ecommerce-step-head > div:first-child > span {
  min-width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(10, 132, 255, 0.1);
  color: #0878df;
  font-size: 11px;
  font-weight: 850;
}

.ecommerce-step-head strong { font-size: 14px; letter-spacing: -0.01em; }
.ecommerce-step-head > small,
.ecommerce-step-actions small { color: var(--muted); font-size: 11px; font-weight: 700; }

.ecommerce-step-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ghost-button.compact {
  min-height: 34px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 10px;
  font-size: 12px;
}

.ecommerce-upload-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.ecommerce-upload-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ecommerce-upload-control > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.ecommerce-upload-control.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.ecommerce-upload-control.is-disabled input { cursor: not-allowed; }
.ecommerce-upload-control[aria-busy="true"] i { animation: ecommerce-spin 0.9s linear infinite; }

.ecommerce-step-copy {
  margin: -5px 0 12px 37px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.ecommerce-selected-styles {
  display: flex;
  gap: 8px;
  min-height: 0;
  overflow-x: auto;
  padding: 0 0 10px;
}

.ecommerce-selected-styles:empty { display: none; }

.ecommerce-selected-card {
  position: relative;
  flex: 0 0 88px;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgba(10, 132, 255, 0.4);
  border-radius: 12px;
  background: var(--panel-2);
}

.ecommerce-selected-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecommerce-selected-card button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
}

.ecommerce-style-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(78px, 1fr));
  gap: 9px;
  max-height: 248px;
  overflow: auto;
}

.ecommerce-style-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 166, 188, 0.35);
  border-radius: 13px;
  background: var(--panel-2);
  color: var(--ink);
  padding: 0;
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.ecommerce-style-card { aspect-ratio: 4 / 5; }
.ecommerce-style-card img { width: 100%; height: 100%; display: block; }
.ecommerce-style-card img { object-fit: cover; }
.ecommerce-style-card span {
  position: absolute;
  inset: auto 6px 6px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(13, 21, 34, 0.68);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  padding: 5px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-style-card[aria-pressed="true"] {
  border-color: #0a84ff;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.16);
}

.ecommerce-style-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #0a84ff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(0, 86, 180, 0.28);
}

.ecommerce-style-card:hover { transform: translateY(-2px); border-color: rgba(10, 132, 255, 0.55); }

.ecommerce-model-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(151, 166, 188, 0.35);
  border-radius: 13px;
  background: var(--panel-2);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.ecommerce-model-card[data-selected="true"] {
  border-color: #0a84ff;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.16);
}

.ecommerce-model-preview {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 0;
  background: #fff;
  padding: 0;
  cursor: zoom-in;
}

.ecommerce-model-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: #fff;
}

.ecommerce-preview-hint {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(43, 57, 75, 0.82);
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.82));
  font-size: 19px;
  line-height: 1;
  pointer-events: none;
  transition: color 140ms ease, transform 140ms ease;
}

.ecommerce-model-preview:hover .ecommerce-preview-hint,
.ecommerce-model-preview:focus-visible .ecommerce-preview-hint {
  color: #0878df;
  transform: scale(1.06);
}

.ecommerce-model-select {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border: 0;
  border-top: 1px solid rgba(151, 166, 188, 0.24);
  background: rgba(248, 250, 253, 0.96);
  color: var(--ink);
  padding: 0 8px;
  text-align: left;
}

.ecommerce-model-select span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-model-select i { color: var(--muted); opacity: 0.45; }
.ecommerce-model-select[aria-checked="true"] { color: #0878df; }
.ecommerce-model-select[aria-checked="true"] i { color: #0a84ff; opacity: 1; }
.ecommerce-model-card:hover { transform: translateY(-2px); border-color: rgba(10, 132, 255, 0.55); }

.ecommerce-empty-gallery {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 148px;
  border: 1px dashed rgba(147, 163, 186, 0.5);
  border-radius: 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

.ecommerce-empty-gallery > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 14px;
  background: rgba(10, 132, 255, 0.1);
  color: #0878df;
  font-size: 20px;
}

.ecommerce-empty-gallery strong { color: var(--ink); font-size: 13px; }
.ecommerce-empty-gallery small { max-width: 460px; margin-top: 5px; font-size: 10px; line-height: 1.55; }

.ecommerce-empty-upload {
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.ecommerce-empty-upload:hover,
.ecommerce-empty-upload:focus-visible {
  border-color: rgba(10, 132, 255, 0.72);
  background: rgba(10, 132, 255, 0.035);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
  outline: none;
}

.ecommerce-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ecommerce-choice-row > button,
.ecommerce-segmented button,
.ecommerce-ratio-grid button,
.ecommerce-pose-grid button,
.ecommerce-scene-card,
.ecommerce-custom-scene-button {
  min-height: 38px;
  border: 1px solid rgba(147, 163, 186, 0.38);
  border-radius: 11px;
  background: rgba(246, 249, 252, 0.92);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  padding: 0 13px;
}

.ecommerce-choice-row > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ecommerce-choice-row > button small { color: var(--muted); font-size: 10px; }
.ecommerce-choice-row > button[aria-pressed="true"],
.ecommerce-segmented button[aria-pressed="true"],
.ecommerce-ratio-grid button[aria-pressed="true"],
.ecommerce-pose-grid button[aria-pressed="true"],
.ecommerce-scene-card[aria-pressed="true"],
.ecommerce-custom-scene-button[aria-pressed="true"] {
  border-color: rgba(10, 132, 255, 0.72);
  background: rgba(10, 132, 255, 0.1);
  color: #0878df;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.08);
}

.ecommerce-model-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ecommerce-prompt-field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.ecommerce-prompt-field > span { font-size: 12px; font-weight: 800; }
.ecommerce-prompt-field textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(147, 163, 186, 0.42);
  border-radius: 12px;
  background: rgba(248, 250, 253, 0.9);
  color: var(--ink);
  line-height: 1.55;
  padding: 10px 12px;
  outline: none;
}
.ecommerce-prompt-field textarea:focus {
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}
.ecommerce-prompt-field small { color: var(--muted); font-size: 10px; line-height: 1.45; }

.ecommerce-white-panel { margin-top: 12px; }
.ecommerce-white-example-card {
  width: min(620px, 100%);
  min-height: 132px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(147, 163, 186, 0.38);
  border-radius: 14px;
  background: rgba(246, 249, 252, 0.92);
  color: var(--ink);
  padding: 0 15px 0 0;
  text-align: left;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.ecommerce-white-example-card:hover {
  border-color: rgba(10, 132, 255, 0.56);
  box-shadow: 0 10px 26px rgba(22, 53, 92, 0.1);
  transform: translateY(-1px);
}
.ecommerce-white-example-card:active { transform: scale(0.995); }
.ecommerce-white-example-media {
  width: 112px;
  height: 132px;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-self: stretch;
  background: #fff;
  box-shadow: inset -1px 0 rgba(147, 163, 186, 0.22);
}
.ecommerce-white-example-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.ecommerce-white-example-copy { min-width: 0; display: grid; gap: 4px; }
.ecommerce-white-example-copy strong { font-size: 13px; }
.ecommerce-white-example-copy small { color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.45; }
.ecommerce-example-eyebrow { color: #0878df; font-size: 10px; font-weight: 800; }
.ecommerce-example-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0878df;
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.ecommerce-outdoor-panel { display: grid; gap: 10px; margin-top: 12px; }
.ecommerce-scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ecommerce-scene-card { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto auto; gap: 0; padding: 0; text-align: left; }
.ecommerce-scene-thumb {
  width: 100%;
  aspect-ratio: 16 / 7;
  display: block;
  background-image: url('/static/ecommerce/scenes/outdoor-scenes-contact-sheet.png');
  background-repeat: no-repeat;
  background-size: 300% 200%;
  box-shadow: inset 0 -1px rgba(147, 163, 186, 0.22);
}
.ecommerce-scene-preview-0 { background-position: 0% 0%; }
.ecommerce-scene-preview-1 { background-position: 50% 0%; }
.ecommerce-scene-preview-2 { background-position: 100% 0%; }
.ecommerce-scene-preview-3 { background-position: 0% 100%; }
.ecommerce-scene-preview-4 { background-position: 50% 100%; }
.ecommerce-scene-preview-5 { background-position: 100% 100%; }
.ecommerce-scene-copy { min-width: 0; display: grid; gap: 2px; padding: 9px 11px 10px; }
.ecommerce-scene-card strong { font-size: 12px; }
.ecommerce-scene-card small { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ecommerce-custom-scene-button { min-height: 52px; display: flex; align-items: center; gap: 9px; text-align: left; }
.ecommerce-custom-scene-button > span { display: grid; gap: 2px; }
.ecommerce-custom-scene-button small { color: var(--muted); font-size: 10px; font-weight: 600; }

.ecommerce-tune-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
  gap: 14px 16px;
}
.ecommerce-tune-grid fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.ecommerce-tune-grid legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.ecommerce-tune-grid legend small { margin-left: 6px; font: inherit; font-weight: 650; opacity: 0.82; }
.ecommerce-ratio-field { grid-column: 1 / -1; }
.ecommerce-ratio-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(78px, 1fr));
  gap: 7px;
}
.ecommerce-ratio-grid button {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 9px;
  text-align: left;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), transform 110ms var(--ease-out);
}
.ecommerce-ratio-grid button:active,
.ecommerce-pose-grid button:active { transform: scale(0.975); }
.ecommerce-ratio-grid button > span:last-child,
.ecommerce-pose-grid button > span { min-width: 0; display: grid; gap: 1px; }
.ecommerce-ratio-grid strong,
.ecommerce-pose-grid strong { font-size: 11px; line-height: 1.25; white-space: nowrap; }
.ecommerce-ratio-grid small,
.ecommerce-pose-grid small { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ecommerce-ratio-mark {
  width: var(--ratio-width);
  height: var(--ratio-height);
  flex: 0 0 auto;
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  opacity: 0.66;
}
.ecommerce-ratio-grid button[aria-pressed="true"] .ecommerce-ratio-mark { opacity: 1; background: rgba(10, 132, 255, 0.12); }
.ecommerce-segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.ecommerce-segmented button { flex: 1 1 58px; min-height: 36px; padding: 0 10px; }
.ecommerce-shot-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 5px;
  font-size: 12px;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), transform 110ms var(--ease-out);
}
.ecommerce-pose-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(84px, 1fr));
  gap: 8px;
}
.ecommerce-pose-grid button {
  position: relative;
  min-width: 0;
  min-height: 108px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 70px auto;
  place-items: center;
  gap: 2px;
  border-color: rgba(126, 145, 170, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 252, 0.8));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92), 0 1px 2px rgba(28, 48, 76, 0.03);
  padding: 7px 6px 9px;
  text-align: center;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.ecommerce-pose-grid button:hover {
  border-color: rgba(10, 132, 255, 0.38);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 7px 18px rgba(32, 68, 112, 0.08);
  transform: translateY(-1px);
}
.ecommerce-pose-grid button:focus-visible {
  outline: 3px solid rgba(10, 132, 255, 0.24);
  outline-offset: 2px;
}
.ecommerce-pose-grid .ecommerce-pose-figure {
  width: 52px;
  height: 68px;
  overflow: visible;
  color: #536274;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.ecommerce-pose-grid .pose-head,
.ecommerce-pose-grid .pose-limb {
  stroke-width: 1.8;
}
.ecommerce-pose-grid .pose-torso {
  fill: rgba(83, 98, 116, 0.08);
  stroke-width: 1.65;
}
.ecommerce-pose-grid .pose-detail {
  stroke-width: 1.2;
  opacity: 0.42;
}
.ecommerce-pose-grid .pose-ground {
  stroke-width: 1.25;
  opacity: 0.26;
}
.ecommerce-pose-grid .pose-accent {
  stroke: #0a84ff;
  stroke-width: 1.7;
  opacity: 0.86;
}
.ecommerce-pose-grid button[aria-pressed="true"] {
  border-color: rgba(10, 132, 255, 0.68);
  background: linear-gradient(180deg, rgba(244, 250, 255, 0.98), rgba(226, 241, 255, 0.88));
  color: #0878df;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.08), 0 7px 20px rgba(10, 132, 255, 0.1);
}
.ecommerce-pose-grid button[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0a84ff;
  color: #fff;
  box-shadow: 0 3px 8px rgba(10, 132, 255, 0.22);
  font-size: 11px;
  font-weight: 850;
}
.ecommerce-pose-grid button[aria-pressed="true"] .ecommerce-pose-figure { color: #0878df; opacity: 1; }
.ecommerce-pose-grid .ecommerce-pose-copy { width: 100%; }
.ecommerce-pose-grid-photo button {
  min-height: 150px;
  grid-template-rows: 106px auto;
  padding: 5px 5px 8px;
}
.ecommerce-pose-grid-photo button > img {
  width: 100%;
  height: 106px;
  display: block;
  border-radius: 10px;
  object-fit: contain;
  object-position: center center;
  background: #f7f4ef;
}
.ecommerce-pose-grid-photo button[aria-pressed="true"] > img {
  box-shadow: inset 0 0 0 2px rgba(10, 132, 255, 0.34);
}
.ecommerce-tune-summary {
  margin: 11px 0 0;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.08);
  color: #0878df;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.4;
  padding: 8px 10px;
}

.ecommerce-tryon-workspace {
  min-height: min(680px, calc(100dvh - 202px));
  display: grid;
  grid-template-columns: minmax(248px, 286px) 68px minmax(520px, 1fr) 260px;
  grid-template-rows: minmax(560px, 1fr);
  grid-template-areas:
    "sources transform result queue";
  gap: 14px;
}

.ecommerce-tryon-workspace.is-fabric {
  grid-template-columns: minmax(248px, 286px) minmax(168px, 190px) minmax(480px, 1fr) 260px;
}

.ecommerce-tryon-sources {
  grid-area: sources;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ecommerce-tryon-result-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 164, 188, 0.3);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 9px 30px rgba(26, 51, 82, 0.06), inset 0 1px rgba(255, 255, 255, 0.9);
}

.ecommerce-tryon-upload-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header"
    "preview"
    "actions";
  align-items: stretch;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(146, 164, 188, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
}

.ecommerce-tryon-upload-panel + .ecommerce-tryon-upload-panel {
  border-left: 1px solid rgba(146, 164, 188, 0.28);
}

.ecommerce-tryon-upload-panel > .ecommerce-tryon-step-index {
  display: none;
}

.ecommerce-tryon-step-index {
  grid-area: index;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 132, 255, 0.58);
  border-radius: 50%;
  color: #0878df;
  font-size: 9px;
  font-weight: 800;
}

.ecommerce-tryon-upload-panel > header,
.ecommerce-tryon-result-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ecommerce-tryon-upload-panel > header {
  grid-area: header;
  display: flex;
  align-items: flex-start;
}

.ecommerce-tryon-upload-panel > header > div,
.ecommerce-tryon-result-panel > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ecommerce-tryon-upload-panel > header span {
  display: block;
  color: #0878df;
  font-size: 9px;
  font-weight: 800;
}

.ecommerce-tryon-upload-panel > header strong,
.ecommerce-tryon-result-panel > header strong {
  font-size: 13px;
  letter-spacing: -0.01em;
}

.ecommerce-tryon-upload-panel > header small,
.ecommerce-tryon-result-panel > header small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
}

.ecommerce-tryon-upload {
  grid-area: preview;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: block;
  border: 1px dashed rgba(111, 139, 173, 0.36);
  border-radius: 12px;
  background: rgba(242, 247, 252, 0.8);
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.ecommerce-tryon-upload:hover {
  border-color: rgba(10, 132, 255, 0.7);
  background: rgba(235, 246, 255, 0.92);
}

.ecommerce-tryon-upload:active { transform: scale(0.992); }

.ecommerce-tryon-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ecommerce-tryon-upload-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  padding: 6px;
  text-align: center;
  pointer-events: none;
}

.ecommerce-tryon-upload-preview.has-image { position: relative; padding: 0; }
.ecommerce-tryon-upload-preview > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
}

.ecommerce-tryon-empty-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.08);
  color: #0878df;
  font-size: 16px;
}

.ecommerce-tryon-upload-preview strong,
.ecommerce-tryon-upload-preview small { display: none; }
.ecommerce-tryon-upload-preview .ph-spinner-gap { animation: ecommerce-spin 0.9s linear infinite; }

.ecommerce-tryon-upload-state {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(12, 22, 35, 0.74);
  color: #fff;
  padding: 3px 5px;
  font-size: 7px;
  font-weight: 760;
  backdrop-filter: blur(10px);
}

.ecommerce-tryon-source-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.ecommerce-tryon-source-actions button,
.ecommerce-tryon-result-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(141, 160, 185, 0.32);
  border-radius: 10px;
  background: rgba(248, 251, 254, 0.92);
  color: var(--ink);
  font-size: 10px;
  font-weight: 720;
}

.ecommerce-tryon-upload-panel .ecommerce-tryon-source-actions button {
  width: auto;
  min-height: 32px;
  border-radius: 9px;
  padding: 0 8px;
  font-size: 9px;
}

.ecommerce-tryon-upload-panel .ecommerce-tryon-source-actions button i {
  font-size: 13px;
}

.ecommerce-tryon-source-actions button:hover,
.ecommerce-tryon-result-actions button:hover {
  border-color: rgba(10, 132, 255, 0.5);
  color: #0878df;
}

.ecommerce-tryon-source-actions button:disabled { opacity: 0.42; cursor: not-allowed; }

.ecommerce-tryon-transform {
  grid-area: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
}

.ecommerce-tryon-transform > .ecommerce-tryon-step-index {
  display: none;
}

.ecommerce-tryon-flow-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #0a84ff;
  box-shadow: 0 8px 22px rgba(24, 67, 112, 0.08);
  font-size: 18px;
}

.ecommerce-tryon-transform-copy {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.ecommerce-tryon-transform-copy strong {
  font-size: 10px;
}

.ecommerce-tryon-transform-copy small {
  display: none;
}

.ecommerce-tryon-region {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ecommerce-tryon-region button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(141, 160, 185, 0.3);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  padding: 0 4px;
  font-size: 9px;
  font-weight: 760;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), color 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.ecommerce-tryon-region button i { display: inline-block; font-size: 12px; }
.ecommerce-tryon-region button:hover { border-color: rgba(10, 132, 255, 0.45); color: var(--ink); }
.ecommerce-tryon-region button:active { transform: scale(0.97); }
.ecommerce-tryon-region button[aria-pressed="true"] {
  border-color: rgba(10, 132, 255, 0.62);
  background: rgba(10, 132, 255, 0.1);
  color: #0878df;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.06), 0 7px 18px rgba(10, 132, 255, 0.09);
}

.ecommerce-fabric-options {
  width: 100%;
  display: grid;
  gap: 8px;
}

.ecommerce-fabric-options > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.ecommerce-fabric-options button {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(141, 160, 185, 0.3);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  padding: 0 3px;
  font-size: 8px;
  font-weight: 760;
}

.ecommerce-fabric-options button i { flex: 0 0 auto; font-size: 11px; }
.ecommerce-fabric-options button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ecommerce-fabric-options button:hover { border-color: rgba(10, 132, 255, 0.45); color: var(--ink); }
.ecommerce-fabric-options button[aria-pressed="true"] {
  border-color: rgba(10, 132, 255, 0.62);
  background: rgba(10, 132, 255, 0.1);
  color: #0878df;
}

.ecommerce-fabric-options p {
  margin: 0;
  border-radius: 9px;
  background: rgba(10, 132, 255, 0.07);
  color: var(--muted);
  padding: 7px 8px;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.45;
}

.ecommerce-fabric-options .ecommerce-fabric-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  background: rgba(245, 158, 11, 0.1);
  color: #a45b00;
}

.ecommerce-tryon-result-panel {
  grid-area: result;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  border-radius: 16px;
  box-shadow: 0 9px 30px rgba(26, 51, 82, 0.045);
  padding: 14px;
}

.ecommerce-tryon-result-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ecommerce-tryon-result-actions button {
  width: 36px;
  padding: 0;
  font-size: 15px;
}

.ecommerce-tryon-result-actions button.ecommerce-tryon-original-download {
  width: auto;
  min-width: 94px;
  padding: 0 12px;
  border-color: #0a84ff;
  background: #0a84ff;
  color: #fff;
  font-size: 10px;
}

.ecommerce-tryon-result-actions button.ecommerce-tryon-original-download:hover {
  border-color: #0077e6;
  background: #0077e6;
  color: #fff;
}

.ecommerce-tryon-result-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(153, 169, 191, 0.26);
  border-radius: 15px;
  background: #f6f8fb;
}

.ecommerce-tryon-result-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.ecommerce-tryon-result-empty > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 146, 172, 0.18);
  border-radius: 18px;
  background: #fff;
  color: #8c9bad;
  box-shadow: 0 8px 24px rgba(36, 61, 91, 0.06);
  font-size: 27px;
}

.ecommerce-tryon-result-empty strong { color: var(--ink); font-size: 13px; }
.ecommerce-tryon-result-empty small { max-width: 260px; font-size: 10px; line-height: 1.5; }

.ecommerce-tryon-result-pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ecommerce-tryon-result-pending > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0.48;
}

.ecommerce-tryon-result-pending > span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(15, 27, 43, 0.74);
  color: #fff;
  box-shadow: 0 10px 30px rgba(11, 23, 39, 0.2);
  padding: 9px 13px;
  font-size: 10px;
  font-weight: 760;
  backdrop-filter: blur(12px);
}

.ecommerce-tryon-result-pending.is-running > span i { animation: ecommerce-spin 0.9s linear infinite; }

.ecommerce-tryon-result-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}

.ecommerce-tryon-result-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.ecommerce-tryon-result-preview > span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(12, 22, 35, 0.72);
  color: #fff;
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 760;
  backdrop-filter: blur(10px);
}

.ecommerce-tryon-summary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.08);
  color: #0878df;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 710;
  line-height: 1.45;
}

.ecommerce-tryon-summary i { flex: 0 0 auto; margin-top: 1px; }

.ecommerce-tryon-queue {
  grid-area: queue;
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(146, 164, 188, 0.26);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(24, 67, 112, 0.06);
  padding: 14px;
}

.ecommerce-tryon-queue > header,
.ecommerce-tryon-queue > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ecommerce-tryon-queue > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ecommerce-tryon-queue > header strong { font-size: 14px; letter-spacing: -0.015em; }
.ecommerce-tryon-queue > header small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-tryon-queue > header button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 0;
  background: transparent;
  color: #0878df;
  padding: 0;
  font-size: 10px;
  font-weight: 760;
}

.ecommerce-tryon-queue > header button:disabled { color: var(--muted); opacity: 0.48; cursor: not-allowed; }

.ecommerce-tryon-queue-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 180px;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 0 3px 0 0;
  scrollbar-gutter: stable;
}

.ecommerce-tryon-queue-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
  padding: 20px 8px;
}

.ecommerce-tryon-queue-empty > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 146, 172, 0.18);
  border-radius: 15px;
  background: rgba(246, 249, 252, 0.92);
  color: #8c9bad;
  font-size: 21px;
}

.ecommerce-tryon-queue-empty strong { color: var(--ink); font-size: 11px; }
.ecommerce-tryon-queue-empty small { max-width: 190px; font-size: 9px; line-height: 1.55; }

.ecommerce-tryon-queue-item {
  position: relative;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(146, 164, 188, 0.26);
  border-radius: 12px;
  background: rgba(252, 253, 255, 0.96);
  padding: 6px;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.ecommerce-tryon-queue-item.is-selected {
  border-color: #0a84ff;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.12);
}

.ecommerce-tryon-queue-preview {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #f5f8fb;
  padding: 0;
  cursor: zoom-in;
}

.ecommerce-tryon-queue-preview:disabled { cursor: default; opacity: 1; }
.ecommerce-tryon-queue-preview > img { width: 100%; height: 100%; display: block; object-fit: contain; }

.ecommerce-tryon-queue-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #9aa8b8;
  font-size: 28px;
}

.ecommerce-tryon-queue-state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #218956;
  padding: 0;
  font-size: 7px;
  font-weight: 700;
}

.ecommerce-tryon-queue-item[data-status="queued"] .ecommerce-tryon-queue-state i,
.ecommerce-tryon-queue-item[data-status="running"] .ecommerce-tryon-queue-state i {
  animation: ecommerce-spin 0.9s linear infinite;
}

.ecommerce-tryon-queue-item[data-status="queued"] .ecommerce-tryon-queue-state,
.ecommerce-tryon-queue-item[data-status="running"] .ecommerce-tryon-queue-state {
  color: #0878df;
}

.ecommerce-tryon-queue-item[data-status="failed"] .ecommerce-tryon-queue-state {
  color: #b52f3d;
}

.ecommerce-tryon-queue-select {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1.25px solid rgba(86, 109, 137, 0.68);
  border-radius: 50%;
  background: #fff;
  color: transparent;
  padding: 0;
  font-size: 10px;
  box-shadow: none;
}

.ecommerce-tryon-queue-select[aria-pressed="true"] {
  border-color: #0a84ff;
  background: #0a84ff;
  color: #fff;
}

.ecommerce-tryon-queue-select:hover:not(:disabled) {
  border-color: #0a84ff;
  color: #0a84ff;
}

.ecommerce-tryon-queue-select[aria-pressed="true"]:hover:not(:disabled) { color: #fff; }
.ecommerce-tryon-queue-select:disabled { opacity: 0.38; cursor: not-allowed; }
.ecommerce-tryon-queue-select:focus-visible { outline: 2px solid rgba(10, 132, 255, 0.34); outline-offset: 2px; }

.ecommerce-tryon-queue-meta {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.ecommerce-tryon-queue-meta > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 8px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecommerce-tryon-queue-download {
  grid-column: 2;
  grid-row: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #66778c;
  padding: 0;
  font-size: 14px;
}

.ecommerce-tryon-queue-download:hover:not(:disabled) { background: rgba(10, 132, 255, 0.09); color: #0878df; }
.ecommerce-tryon-queue-download:disabled { opacity: 0.3; cursor: not-allowed; }

.ecommerce-tryon-queue > footer {
  border-top: 1px solid rgba(146, 164, 188, 0.22);
  padding-top: 11px;
}

.ecommerce-tryon-queue > footer > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 680;
  white-space: nowrap;
}

.ecommerce-tryon-queue > footer button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(141, 160, 185, 0.34);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font-size: 10px;
  font-weight: 760;
}

.ecommerce-tryon-queue > footer button:hover:not(:disabled) { border-color: rgba(10, 132, 255, 0.5); color: #0878df; }
.ecommerce-tryon-queue > footer button:disabled { border-color: rgba(141, 160, 185, 0.24); background: rgba(141, 160, 185, 0.16); color: var(--muted); cursor: not-allowed; }

.ecommerce-cutout-workspace {
  min-height: min(680px, calc(100dvh - 202px));
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(440px, 1fr) 270px;
  grid-template-areas: "source result queue";
  gap: 14px;
}

.ecommerce-cutout-source-panel,
.ecommerce-cutout-result-panel,
.ecommerce-cutout-queue {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 164, 188, 0.3);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 9px 30px rgba(26, 51, 82, 0.05), inset 0 1px rgba(255, 255, 255, 0.9);
}

.ecommerce-cutout-source-panel {
  grid-area: source;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.ecommerce-cutout-source-panel > header,
.ecommerce-cutout-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ecommerce-cutout-source-panel > header > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ecommerce-cutout-source-panel > header span {
  color: #0878df;
  font-size: 9px;
  font-weight: 800;
}

.ecommerce-cutout-source-panel > header strong { font-size: 13px; }
.ecommerce-cutout-source-panel > header small { color: var(--muted); font-size: 9px; }

.ecommerce-cutout-source-actions { display: flex; align-items: center; gap: 6px; }
.ecommerce-cutout-source-actions button,
.ecommerce-cutout-source-actions label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(141, 160, 185, 0.32);
  border-radius: 10px;
  background: rgba(248, 251, 254, 0.94);
  color: var(--ink);
  padding: 0 9px;
  font-size: 9px;
  font-weight: 740;
  cursor: pointer;
}
.ecommerce-cutout-source-actions button:hover,
.ecommerce-cutout-source-actions label:hover,
.ecommerce-cutout-source-actions button[aria-pressed="true"] { border-color: rgba(10, 132, 255, 0.5); color: #0878df; }
.ecommerce-cutout-source-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.ecommerce-cutout-source-actions label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ecommerce-cutout-capability {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(220, 65, 72, 0.22);
  border-radius: 10px;
  background: rgba(255, 239, 240, 0.86);
  color: #b72d35;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
}

.ecommerce-cutout-library {
  max-height: 250px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 12px;
  background: rgba(240, 247, 255, 0.78);
  padding: 9px;
}
.ecommerce-cutout-library-head strong { font-size: 10px; }
.ecommerce-cutout-library-head input { width: 150px; height: 30px; border: 1px solid rgba(141, 160, 185, 0.3); border-radius: 9px; background: #fff; color: var(--ink); padding: 0 9px; font-size: 9px; }
.ecommerce-cutout-library-grid { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 6px; overflow: auto; }
.ecommerce-cutout-library-grid > button {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 58px auto;
  gap: 4px;
  border: 1px solid rgba(141, 160, 185, 0.28);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 4px;
}
.ecommerce-cutout-library-grid > button > span { overflow: hidden; border-radius: 6px; background: var(--panel-2); }
.ecommerce-cutout-library-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ecommerce-cutout-library-grid strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ecommerce-cutout-library-grid button > i { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; display: none; place-items: center; border-radius: 50%; background: #0a84ff; color: #fff; font-size: 10px; }
.ecommerce-cutout-library-grid button[aria-pressed="true"] { border-color: #0a84ff; box-shadow: inset 0 0 0 1px #0a84ff; }
.ecommerce-cutout-library-grid button[aria-pressed="true"] > i { display: grid; }
.ecommerce-cutout-library-grid button:disabled { opacity: 0.42; cursor: not-allowed; }
.ecommerce-cutout-library-empty { grid-column: 1 / -1; color: var(--muted); padding: 20px; font-size: 10px; text-align: center; }

.ecommerce-cutout-source-grid { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 7px; overflow: auto; }
.ecommerce-cutout-source-card { position: relative; min-width: 0; display: grid; gap: 4px; border: 1px solid rgba(141, 160, 185, 0.28); border-radius: 10px; background: rgba(248, 251, 254, 0.9); padding: 5px; }
.ecommerce-cutout-source-card > button:first-child { height: 76px; overflow: hidden; border: 0; border-radius: 7px; background: var(--panel-2); padding: 0; }
.ecommerce-cutout-source-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ecommerce-cutout-source-card > span { overflow: hidden; color: var(--ink); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ecommerce-cutout-source-card > button:last-child { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: rgba(17, 24, 39, 0.72); color: #fff; padding: 0; }
.ecommerce-cutout-empty { grid-column: 1 / -1; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed rgba(111, 139, 173, 0.36); border-radius: 13px; color: var(--muted); text-align: center; }
.ecommerce-cutout-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(10, 132, 255, 0.09); color: #0878df; font-size: 21px; }
.ecommerce-cutout-empty strong { color: var(--ink); font-size: 11px; }
.ecommerce-cutout-empty small { max-width: 230px; font-size: 9px; line-height: 1.5; }
.ecommerce-cutout-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; border-radius: 10px; background: rgba(10, 132, 255, 0.08); color: #0878df; padding: 8px 9px; font-size: 9px; font-weight: 680; line-height: 1.45; }

.ecommerce-cutout-result-panel { grid-area: result; }
.ecommerce-cutout-queue { grid-area: queue; }
.ecommerce-cutout-checkerboard,
.ecommerce-cutout-queue-preview {
  background-color: #f7f8fa;
  background-image:
    linear-gradient(45deg, rgba(113, 128, 150, 0.13) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(113, 128, 150, 0.13) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(113, 128, 150, 0.13) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(113, 128, 150, 0.13) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.ecommerce-cutout-result-panel .ecommerce-tryon-result-preview img { object-fit: contain; }

.ecommerce-batch-panel { border-color: rgba(10, 132, 255, 0.3); background: rgba(239, 247, 255, 0.76); }
.ecommerce-batch-panel .ecommerce-step-head > div:first-child > span i { animation: ecommerce-spin 0.9s linear infinite; }
.ecommerce-batch-panel.is-terminal .ecommerce-step-head > div:first-child > span i { animation: none; }
@keyframes ecommerce-spin { to { transform: rotate(360deg); } }
.ecommerce-batch-summary { margin: -3px 0 10px 37px; color: var(--muted); font-size: 11px; }
.ecommerce-batch-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ecommerce-batch-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 165, 188, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  padding: 7px;
}
.ecommerce-batch-thumb {
  position: relative;
  width: 56px;
  height: 64px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--panel-2);
  padding: 0;
}
button.ecommerce-batch-thumb { cursor: zoom-in; }
.ecommerce-batch-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ecommerce-batch-preview-hint {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(12, 20, 33, 0.72);
  color: #fff;
  font-size: 11px;
  opacity: 0.86;
  transition: transform 120ms ease, opacity 120ms ease;
}
button.ecommerce-batch-thumb:hover .ecommerce-batch-preview-hint { opacity: 1; transform: scale(1.08); }
.ecommerce-batch-info { min-width: 0; display: grid; gap: 4px; }
.ecommerce-batch-info strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ecommerce-batch-info small,
.ecommerce-tryon-queue-meta small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.ecommerce-batch-status { color: var(--muted); font-size: 10px; }
.ecommerce-batch-status.succeeded { color: var(--success); }
.ecommerce-batch-status.failed { color: var(--danger); }
.ecommerce-batch-actions { display: flex; gap: 4px; }
.ecommerce-batch-actions button,
.ecommerce-batch-actions a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(147, 163, 186, 0.34);
  border-radius: 9px;
  background: rgba(248, 250, 253, 0.9);
  color: var(--ink);
}

.ecommerce-studio-footer > div:first-child { display: grid; gap: 3px; }
.ecommerce-studio-footer > div:first-child strong { font-size: 15px; }
.ecommerce-studio-footer > div:first-child span { color: var(--muted); font-size: 11px; }
.ecommerce-studio-footer > div:last-child { display: flex; align-items: center; gap: 9px; }
.ecommerce-studio-footer .primary-button { min-width: 138px; justify-content: center; }

.ecommerce-tryon-quality {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(141, 160, 185, 0.28);
  border-radius: 12px;
  background: rgba(242, 247, 252, 0.88);
  padding: 3px;
}

.ecommerce-tryon-quality > span {
  padding-left: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 740;
  white-space: nowrap;
}

.ecommerce-tryon-quality > div {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ecommerce-tryon-quality button {
  min-width: 46px;
  min-height: 34px;
  display: grid;
  place-content: center;
  gap: 1px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  padding: 3px 8px;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.ecommerce-tryon-quality button strong { font-size: 11px; line-height: 1; }
.ecommerce-tryon-quality button small { font-size: 8px; line-height: 1; }
.ecommerce-tryon-quality button:hover:not(:disabled) { color: var(--ink); }
.ecommerce-tryon-quality button:active:not(:disabled) { transform: scale(0.96); }
.ecommerce-tryon-quality button[aria-pressed="true"] {
  background: #fff;
  color: #0878df;
  box-shadow: 0 3px 10px rgba(24, 67, 112, 0.12), inset 0 0 0 1px rgba(10, 132, 255, 0.14);
}
.ecommerce-tryon-quality button:disabled { opacity: 0.5; cursor: not-allowed; }

.ecommerce-studio-card :where(button, textarea, input):focus-visible,
.ecommerce-image-preview-modal button:focus-visible,
.ecommerce-upload-control:focus-within {
  outline: 3px solid rgba(10, 132, 255, 0.5);
  outline-offset: 2px;
}

.ecommerce-image-preview-modal {
  z-index: 140;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(3, 7, 13, 0.86);
}

.ecommerce-image-preview-card {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  background: #f7f9fc;
  color: #111827;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.48);
  padding: 16px;
  animation: ecommerce-materialize 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ecommerce-image-preview-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ecommerce-image-preview-card h3 { margin: 3px 0 0; font-size: 18px; }
.ecommerce-image-preview-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  cursor: zoom-in;
  outline: none;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
}

.ecommerce-image-preview-stage:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(10, 132, 255, 0.5);
}

.ecommerce-image-preview-stage.is-zoomed {
  cursor: grab;
}

.ecommerce-image-preview-stage.is-dragging {
  cursor: grabbing;
}

.ecommerce-image-preview-stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72dvh, 720px);
  display: block;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

.ecommerce-image-preview-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.ecommerce-image-preview-zoom-hint output {
  min-width: 34px;
  color: #75e3d9;
  font-weight: 700;
  text-align: right;
}

.ecommerce-image-preview-card > p {
  margin: 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.45;
}

.ecommerce-image-preview-card > .primary-button { justify-self: end; min-width: 146px; justify-content: center; }

[data-theme="dark"] .ecommerce-studio-card {
  border-color: rgba(161, 185, 214, 0.22);
  background: rgba(13, 22, 34, 0.98);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .ecommerce-studio-modal {
  background:
    radial-gradient(circle at 12% 2%, rgba(20, 112, 204, 0.2), transparent 31%),
    radial-gradient(circle at 88% 10%, rgba(35, 142, 126, 0.11), transparent 28%),
    #091321;
}
[data-theme="dark"] .ecommerce-studio-header,
[data-theme="dark"] .ecommerce-studio-footer { background: rgba(13, 22, 34, 0.94); }
[data-theme="dark"] .ecommerce-mode-tabs {
  border-color: rgba(140, 164, 193, 0.18);
  background: rgba(13, 22, 34, 0.9);
}
[data-theme="dark"] .ecommerce-mode-tabs button[aria-pressed="true"] { color: #8fc7ff; }
[data-theme="dark"] .ecommerce-step,
[data-theme="dark"] .ecommerce-batch-item { border-color: rgba(140, 164, 193, 0.19); background: rgba(22, 34, 49, 0.84); }
[data-theme="dark"] .ecommerce-tryon-sources,
[data-theme="dark"] .ecommerce-tryon-transform,
[data-theme="dark"] .ecommerce-tryon-result-panel,
[data-theme="dark"] .ecommerce-tryon-queue {
  border-color: rgba(140, 164, 193, 0.2);
  background: rgba(22, 34, 49, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
[data-theme="dark"] .ecommerce-tryon-upload-panel { background: transparent; }
[data-theme="dark"] .ecommerce-tryon-quality {
  border-color: rgba(144, 166, 194, 0.22);
  background: rgba(17, 29, 44, 0.76);
}
[data-theme="dark"] .ecommerce-tryon-quality button[aria-pressed="true"] {
  background: rgba(37, 55, 76, 0.96);
  color: #8fc7ff;
  box-shadow: inset 0 0 0 1px rgba(88, 170, 255, 0.22);
}
[data-theme="dark"] .ecommerce-tryon-upload {
  border-color: rgba(143, 169, 202, 0.3);
  background: rgba(17, 29, 44, 0.78);
}
[data-theme="dark"] .ecommerce-tryon-upload:hover { border-color: rgba(88, 170, 255, 0.68); background: rgba(16, 45, 72, 0.76); }
[data-theme="dark"] .ecommerce-tryon-empty-icon { border-color: rgba(88, 170, 255, 0.22); background: rgba(10, 132, 255, 0.15); color: #9dccff; }
[data-theme="dark"] .ecommerce-tryon-source-actions button,
[data-theme="dark"] .ecommerce-tryon-result-actions button,
[data-theme="dark"] .ecommerce-tryon-region button,
[data-theme="dark"] .ecommerce-tryon-arrow {
  border-color: rgba(144, 166, 194, 0.24);
  background: rgba(25, 38, 55, 0.9);
  color: #dbe6f1;
}
[data-theme="dark"] .ecommerce-tryon-result-actions button.ecommerce-tryon-original-download {
  border-color: #58aaff;
  background: #1689f5;
  color: #fff;
}
[data-theme="dark"] .ecommerce-tryon-result-actions button.ecommerce-tryon-original-download:hover {
  border-color: #79baff;
  background: #2695ff;
  color: #fff;
}
[data-theme="dark"] .ecommerce-tryon-region button[aria-pressed="true"] {
  border-color: #58aaff;
  background: rgba(10, 132, 255, 0.2);
  color: #b8dcff;
}
[data-theme="dark"] .ecommerce-fabric-options button { border-color: rgba(153, 177, 207, 0.2); background: rgba(18, 31, 47, 0.86); }
[data-theme="dark"] .ecommerce-fabric-options button[aria-pressed="true"] { border-color: rgba(88, 170, 255, 0.7); background: rgba(10, 132, 255, 0.2); color: #b8dcff; }
[data-theme="dark"] .ecommerce-fabric-options p { background: rgba(10, 132, 255, 0.14); color: #b9c8d8; }
[data-theme="dark"] .ecommerce-fabric-options .ecommerce-fabric-disclaimer { background: rgba(245, 158, 11, 0.14); color: #ffd08a; }
[data-theme="dark"] .ecommerce-tryon-arrow { color: #9dccff; }
[data-theme="dark"] .ecommerce-tryon-result-stage { border-color: rgba(140, 164, 193, 0.2); background: #101a28; }
[data-theme="dark"] .ecommerce-tryon-result-empty > span { border-color: rgba(144, 166, 194, 0.2); background: #172437; color: #a9b9ca; }
[data-theme="dark"] .ecommerce-tryon-summary { background: rgba(10, 132, 255, 0.16); color: #9dccff; }
[data-theme="dark"] .ecommerce-tryon-queue-item { border-color: rgba(140, 164, 193, 0.2); background: rgba(19, 31, 47, 0.92); }
[data-theme="dark"] .ecommerce-tryon-queue-preview { background: #101a28; }
[data-theme="dark"] .ecommerce-tryon-queue-empty > span { border-color: rgba(144, 166, 194, 0.2); background: #172437; color: #a9b9ca; }
[data-theme="dark"] .ecommerce-tryon-queue-download { color: #aebccc; }
[data-theme="dark"] .ecommerce-tryon-queue-download:hover:not(:disabled) { background: rgba(10, 132, 255, 0.18); color: #9dccff; }
[data-theme="dark"] .ecommerce-tryon-queue > footer { border-color: rgba(140, 164, 193, 0.18); }
[data-theme="dark"] .ecommerce-tryon-queue > footer button:disabled { border-color: rgba(140, 164, 193, 0.18); background: rgba(140, 164, 193, 0.12); color: #7f90a5; }
[data-theme="dark"] .ecommerce-cutout-source-panel,
[data-theme="dark"] .ecommerce-cutout-result-panel,
[data-theme="dark"] .ecommerce-cutout-queue { border-color: rgba(140, 164, 193, 0.2); background: rgba(22, 34, 49, 0.86); }
[data-theme="dark"] .ecommerce-cutout-source-actions button,
[data-theme="dark"] .ecommerce-cutout-source-actions label,
[data-theme="dark"] .ecommerce-cutout-source-card { border-color: rgba(144, 166, 194, 0.24); background: rgba(25, 38, 55, 0.9); color: #dbe6f1; }
[data-theme="dark"] .ecommerce-cutout-library { border-color: rgba(88, 170, 255, 0.24); background: rgba(15, 43, 70, 0.5); }
[data-theme="dark"] .ecommerce-cutout-library-head input,
[data-theme="dark"] .ecommerce-cutout-library-grid > button { border-color: rgba(144, 166, 194, 0.22); background: #172437; color: #e7edf5; }
[data-theme="dark"] .ecommerce-cutout-empty { border-color: rgba(143, 169, 202, 0.3); }
[data-theme="dark"] .ecommerce-cutout-checkerboard,
[data-theme="dark"] .ecommerce-cutout-queue-preview { background-color: #101a28; }
[data-theme="dark"] .ecommerce-batch-panel { border-color: rgba(10, 132, 255, 0.34); background: rgba(15, 43, 70, 0.62); }
[data-theme="dark"] .ecommerce-choice-row > button,
[data-theme="dark"] .ecommerce-segmented button,
[data-theme="dark"] .ecommerce-ratio-grid button,
[data-theme="dark"] .ecommerce-pose-grid button,
[data-theme="dark"] .ecommerce-white-example-card,
[data-theme="dark"] .ecommerce-scene-card,
[data-theme="dark"] .ecommerce-custom-scene-button,
[data-theme="dark"] .ecommerce-prompt-field textarea,
[data-theme="dark"] .ecommerce-batch-actions button,
[data-theme="dark"] .ecommerce-batch-actions a { border-color: rgba(144, 166, 194, 0.24); background: rgba(25, 38, 55, 0.9); color: #e7edf5; }
[data-theme="dark"] .ecommerce-style-card,
[data-theme="dark"] .ecommerce-model-card,
[data-theme="dark"] .ecommerce-batch-thumb { border-color: rgba(144, 166, 194, 0.22); background: #162235; }
[data-theme="dark"] .ecommerce-model-select { border-color: rgba(144, 166, 194, 0.2); background: rgba(22, 34, 53, 0.98); color: #e7edf5; }
[data-theme="dark"] .ecommerce-model-select[aria-checked="true"] { color: #8fc7ff; }
[data-theme="dark"] .ecommerce-example-eyebrow,
[data-theme="dark"] .ecommerce-example-open { color: #8fc7ff; }
[data-theme="dark"] .ecommerce-session-badge { border-color: rgba(77, 202, 137, 0.2); background: rgba(26, 83, 57, 0.42); color: #8ae0ae; }
[data-theme="dark"] .ecommerce-back-button { border-color: rgba(144, 166, 194, 0.24); background: rgba(25, 38, 55, 0.9); color: #e7edf5; box-shadow: none; }
[data-theme="dark"] .ecommerce-segmented button[aria-pressed="true"],
[data-theme="dark"] .ecommerce-ratio-grid button[aria-pressed="true"],
[data-theme="dark"] .ecommerce-pose-grid button[aria-pressed="true"],
[data-theme="dark"] .ecommerce-scene-card[aria-pressed="true"] { border-color: #58aaff; background: rgba(10, 132, 255, 0.2); color: #b8dcff; }
[data-theme="dark"] .ecommerce-tune-summary { background: rgba(10, 132, 255, 0.16); color: #9dccff; }
[data-theme="dark"] .ecommerce-image-preview-card { border-color: rgba(161, 185, 214, 0.24); background: #0f1928; color: #edf3fa; }
[data-theme="dark"] .ecommerce-image-preview-stage { background: #fff; }
[data-theme="dark"] .ecommerce-image-preview-card > p { color: #aebccc; }
[data-theme="dark"] .ecommerce-pose-grid button {
  border-color: rgba(153, 177, 207, 0.18);
  background: linear-gradient(180deg, rgba(26, 39, 56, 0.84), rgba(18, 29, 43, 0.74));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .ecommerce-pose-grid .ecommerce-pose-figure { color: #aebccc; }
[data-theme="dark"] .ecommerce-pose-grid button[aria-pressed="true"] .ecommerce-pose-figure { color: #9dccff; }

@media (max-width: 1260px) {
  .ecommerce-tryon-workspace {
    grid-template-columns: 228px 54px minmax(440px, 1fr) 230px;
    gap: 10px;
  }
  .ecommerce-tryon-workspace.is-fabric { grid-template-columns: 228px 154px minmax(410px, 1fr) 230px; }
  .ecommerce-tryon-queue { padding: 12px; }
  .ecommerce-cutout-workspace { grid-template-columns: 320px minmax(400px, 1fr) 240px; gap: 10px; }
}

@media (max-width: 1120px) {
  .ecommerce-tryon-workspace {
    grid-template-columns: 224px 52px minmax(420px, 1fr);
    grid-template-rows: minmax(520px, auto) minmax(380px, auto);
    grid-template-areas:
      "sources transform result"
      "queue queue queue";
    min-height: 0;
  }
  .ecommerce-tryon-workspace.is-fabric { grid-template-columns: 224px 150px minmax(390px, 1fr); }
  .ecommerce-tryon-queue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ecommerce-cutout-workspace {
    grid-template-columns: 320px minmax(420px, 1fr);
    grid-template-areas: "source result" "queue queue";
    min-height: 0;
  }
  .ecommerce-cutout-queue .ecommerce-tryon-queue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .ecommerce-style-grid { grid-template-columns: repeat(5, minmax(76px, 1fr)); }
  .ecommerce-model-grid { grid-template-columns: repeat(5, minmax(88px, 1fr)); }
  .ecommerce-tune-grid { grid-template-columns: 1fr; }
  .ecommerce-ratio-field { grid-column: 1; }
  .ecommerce-ratio-grid { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
  .ecommerce-pose-grid { grid-template-columns: repeat(5, minmax(68px, 1fr)); }
  .ecommerce-batch-items { grid-template-columns: 1fr; }
  .ecommerce-tryon-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(520px, auto) minmax(420px, auto);
    grid-template-areas:
      "sources"
      "transform"
      "result"
      "queue";
    min-height: 0;
    gap: 12px;
  }
  .ecommerce-tryon-workspace.is-fabric { grid-template-columns: 1fr; }
  .ecommerce-cutout-workspace {
    grid-template-columns: 1fr;
    grid-template-areas: "source" "result" "queue";
    min-height: 0;
  }
  .ecommerce-cutout-source-panel { min-height: 540px; }
  .ecommerce-tryon-sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ecommerce-tryon-transform {
    min-height: 92px;
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }
  .ecommerce-tryon-flow-arrow { transform: rotate(90deg); }
  .ecommerce-tryon-transform-copy { width: auto; }
  .ecommerce-tryon-region { width: auto; flex-direction: row; }
  .ecommerce-fabric-options { max-width: 620px; }
  .ecommerce-fabric-options > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecommerce-tryon-result-panel { border-radius: 15px; }
  .ecommerce-tryon-queue { min-height: 420px; border-radius: 15px; }
  .ecommerce-tryon-queue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ecommerce-tryon-result-stage { min-height: 540px; }
}

@media (max-width: 620px) {
  .ecommerce-studio-modal { left: 0; padding: 0; }
  .ecommerce-studio-card { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .ecommerce-studio-header,
  .ecommerce-studio-footer { padding: 14px; }
  .ecommerce-mode-tabs { min-height: 46px; gap: 18px; padding: 0 14px; }
  .ecommerce-mode-tabs button { font-size: 11px; }
  .ecommerce-studio-header-actions { gap: 6px; }
  .ecommerce-session-badge { display: none; }
  .ecommerce-back-button span { display: none; }
  .ecommerce-back-button { width: 40px; padding: 0; }
  .ecommerce-studio-scroll { padding: 12px 14px 18px; }
  .ecommerce-step { padding: 13px; border-radius: 15px; }
  .ecommerce-style-grid { grid-template-columns: repeat(3, minmax(74px, 1fr)); }
  .ecommerce-model-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .ecommerce-white-example-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 112px; gap: 12px; padding-right: 12px; }
  .ecommerce-white-example-media { width: 88px; height: 112px; }
  .ecommerce-example-open { display: none; }
  .ecommerce-scene-grid { grid-template-columns: 1fr; }
  .ecommerce-ratio-grid { grid-template-columns: repeat(2, minmax(112px, 1fr)); }
  .ecommerce-pose-grid { grid-template-columns: repeat(3, minmax(74px, 1fr)); }
  .ecommerce-pose-grid button { min-height: 112px; }
  .ecommerce-tryon-workspace { gap: 12px; }
  .ecommerce-tryon-sources { grid-template-columns: 1fr; }
  .ecommerce-tryon-upload-panel,
  .ecommerce-tryon-result-panel,
  .ecommerce-tryon-queue { border-radius: 15px; }
  .ecommerce-tryon-upload-panel + .ecommerce-tryon-upload-panel {
    border-top: 1px solid rgba(146, 164, 188, 0.2);
    border-left: 0;
  }
  .ecommerce-tryon-transform { flex-wrap: wrap; }
  .ecommerce-tryon-region { width: 100%; }
  .ecommerce-tryon-region button { flex: 1; min-width: 0; }
  .ecommerce-fabric-options { width: 100%; max-width: none; }
  .ecommerce-tryon-result-stage { min-height: 420px; }
  .ecommerce-tryon-queue { min-height: 420px; padding: 12px; }
  .ecommerce-tryon-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecommerce-tryon-queue > footer button { min-height: 40px; }
  .ecommerce-studio-footer { align-items: stretch; flex-direction: column; }
  .ecommerce-studio-footer > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .ecommerce-tryon-quality { grid-column: 1 / -1; justify-content: space-between; }
  .ecommerce-tryon-quality > div { flex: 1; }
  .ecommerce-tryon-quality button { flex: 1; }
  .ecommerce-studio-footer .primary-button { min-width: 0; }
  .ecommerce-image-preview-modal { padding: 0; }
  .ecommerce-image-preview-card { width: 100vw; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; padding: 14px; }
  .ecommerce-image-preview-stage img { max-height: 72dvh; }
  .ecommerce-image-preview-card > .primary-button { width: 100%; justify-self: stretch; }
}

@media (hover: none), (pointer: coarse) {
  .ecommerce-model-select,
  .ecommerce-model-preview,
  .ecommerce-ratio-grid button,
  .ecommerce-pose-grid button,
  .ecommerce-selected-card button,
  .ecommerce-batch-actions button,
  button.ecommerce-batch-thumb,
  .ecommerce-mode-tabs button,
  .ecommerce-tryon-source-actions button,
  .ecommerce-tryon-result-actions button,
  .ecommerce-tryon-queue > header button,
  .ecommerce-tryon-queue > footer button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecommerce-studio-card { animation: none; }
  .ecommerce-style-card,
  .ecommerce-model-card,
  .ecommerce-ratio-grid button,
  .ecommerce-pose-grid button { transition: border-color 100ms ease, background 100ms ease; }
  .ecommerce-back-button,
  .ecommerce-batch-preview-hint,
  .ecommerce-mode-tabs button::after,
  .ecommerce-tryon-upload,
  .ecommerce-tryon-region button { transition: none; }
  .ecommerce-style-card:hover,
  .ecommerce-model-card:hover,
  .ecommerce-pose-grid button:hover { transform: none; }
  .ecommerce-batch-panel .ecommerce-step-head > div:first-child > span i { animation: none; }
  .ecommerce-tryon-upload-preview .ph-spinner-gap,
  .ecommerce-tryon-result-pending.is-running > span i,
  .ecommerce-tryon-queue-state i { animation: none; }
  .ecommerce-tryon-queue-item { transition: none; }
  .ecommerce-image-preview-card { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .ecommerce-studio-card,
  .ecommerce-studio-header,
  .ecommerce-studio-footer,
  .ecommerce-mode-tabs { background: var(--panel); }
}

/* Nody-inspired compact canvas V2, approved 2026-07-27. */
:root {
  --nody-canvas: #f7f9fc;
  --nody-card: #ffffff;
  --nody-card-muted: #f7f9fc;
  --nody-border: #dce2ea;
  --nody-border-strong: #cbd4df;
  --nody-text: #141b2a;
  --nody-muted: #596779;
  --nody-selected: #1683ff;
  --nody-shadow: 0 14px 34px rgba(31, 45, 66, 0.09), 0 2px 5px rgba(31, 45, 66, 0.06);
}

[data-theme="dark"] {
  --nody-canvas: #0d141e;
  --nody-card: #151e2a;
  --nody-card-muted: #111a25;
  --nody-border: #2b3747;
  --nody-border-strong: #3a485b;
  --nody-text: #f3f6fa;
  --nody-muted: #9ca8b8;
  --nody-selected: #3195ff;
  --nody-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.24);
}

.canvas-area {
  background-color: var(--nody-canvas);
}

.topbar {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.toolbar-shell {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 84;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.canvas-create-dock.canvas-command-dock {
  position: relative;
  width: auto;
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(5, 54px);
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}

.canvas-create-dock.canvas-command-dock button {
  width: 54px;
  min-height: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nody-muted);
  padding: 4px 2px;
  transition: background-color 140ms ease, color 140ms ease, transform 100ms ease;
}

.canvas-create-dock.canvas-command-dock button:hover,
.canvas-create-dock.canvas-command-dock button:focus-visible {
  background: color-mix(in srgb, var(--nody-selected) 10%, transparent);
  color: var(--nody-selected);
  outline: none;
}

.canvas-create-dock.canvas-command-dock .dock-icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 19px;
}

.canvas-create-dock.canvas-command-dock strong {
  margin: 0;
  color: currentColor;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}

.canvas-create-dock.canvas-command-dock small {
  display: none;
}

.add-menu.dock-menu {
  transform: translate(-50%, -100%);
  margin-top: -12px;
}

.nody-node {
  min-height: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 30px;
}

.nody-node > .node-head,
.nody-node.node-image > .node-head {
  position: absolute;
  inset: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 4px;
}

.nody-node .node-title-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nody-node .node-type-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  box-shadow: none;
}

.nody-node .node-title-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.nody-node .node-type {
  flex: 0 0 auto;
  color: var(--nody-muted);
  font-size: 9px;
  font-weight: 740;
  letter-spacing: 0.08em;
}

.nody-node .node-title {
  margin: 0;
  color: var(--nody-text);
  font-size: 12px;
  font-weight: 760;
}

.node-downstream-add {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nody-muted);
  padding: 0;
  opacity: 0.52;
}

.nody-node:hover .node-downstream-add,
.nody-node.selected .node-downstream-add,
.node-downstream-add:focus-visible {
  background: color-mix(in srgb, var(--nody-selected) 9%, transparent);
  color: var(--nody-selected);
  opacity: 1;
  outline: none;
}

.nody-node > .node-body,
.nody-node.node-image > .node-body {
  width: 100%;
  height: calc(100% - 30px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--nody-border);
  border-radius: 14px;
  background: var(--nody-card);
  box-shadow: var(--nody-shadow);
  padding: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nody-node.selected > .node-body,
.nody-node.node-image.selected > .node-body {
  border-color: var(--nody-selected);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nody-selected) 68%, transparent), var(--nody-shadow);
}

.nody-node.has-error > .node-body {
  border-color: color-mix(in srgb, var(--danger) 76%, var(--nody-border));
}

.nody-node .node-port {
  top: calc(50% + 6px);
  width: 14px;
  height: 14px;
  border-width: 2px;
  background: var(--nody-muted);
  box-shadow: 0 0 0 1px var(--nody-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.nody-node .node-port.input { left: -7px; }
.nody-node .node-port.output { right: -7px; }

.nody-node:hover .node-port,
.nody-node.selected .node-port,
.nody-node .node-port.hot,
.nody-node .node-port:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.nody-node .node-port:hover,
.nody-node .node-port.hot,
.nody-node .node-port:focus-visible {
  background: var(--nody-selected);
  transform: scale(1.12);
}

.nody-node .node-resize {
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  border-width: 2px;
  border-radius: 4px;
  background: var(--nody-selected);
  opacity: 0;
}

.nody-node.selected .node-resize,
.nody-node .node-resize:focus-visible {
  opacity: 0.72;
}

.nody-workbench {
  gap: 0;
}

.nody-workbench .node-workbench-main {
  gap: 0;
  overflow: hidden;
}

.prompt-workbench .node-workbench-main {
  grid-template-rows: minmax(0, 1fr) auto;
}

.nody-primary-editor {
  min-width: 0;
  min-height: 0;
  display: block;
  padding: 10px;
}

.nody-primary-editor .prompt-text {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nody-text);
  padding: 10px;
  resize: none;
  font-size: 13px;
  line-height: 1.55;
}

.nody-primary-editor .prompt-text:focus {
  border: 0;
  background: var(--nody-card-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nody-selected) 44%, var(--nody-border));
  outline: none;
}

.nody-node-summary {
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--nody-border);
  color: var(--nody-muted);
  padding: 0 12px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-workbench-footer-stack {
  min-width: 0;
  display: grid;
}

.nody-workbench .node-workbench-footer {
  min-height: 42px;
  border: 0;
  border-top: 1px solid var(--nody-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 5px 7px 5px 12px;
}

.nody-workbench .node-workbench-run {
  min-width: 76px;
  min-height: 30px;
  border-radius: 9px;
  box-shadow: none;
  padding: 0 11px;
  font-size: 11px;
}

.nody-workbench .node-workbench-run:disabled {
  border-color: color-mix(in srgb, var(--nody-selected) 32%, var(--nody-border));
  background: color-mix(in srgb, var(--nody-selected) 11%, var(--nody-card));
  color: var(--nody-selected);
  cursor: wait;
  opacity: 1;
}

.node-inline-error {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 34%, var(--nody-border));
  background: color-mix(in srgb, var(--danger) 7%, var(--nody-card));
  color: var(--danger);
  padding: 6px 8px 6px 11px;
  font-size: 10px;
}

.node-inline-error span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-inline-error button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 3px 5px;
  font: inherit;
  font-weight: 760;
}

.node-inline-error.is-recoverable {
  border-top-color: color-mix(in srgb, var(--warning) 42%, var(--nody-border));
  background: color-mix(in srgb, var(--warning) 9%, var(--nody-card));
  color: color-mix(in srgb, var(--warning) 78%, var(--text));
}

.node-inline-error.is-recoverable button {
  border: 1px solid currentColor;
  border-radius: 7px;
  white-space: nowrap;
}

.node-billing-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--nody-border);
  background: var(--nody-card);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.5;
}
.node-billing-notice span { flex: 1; min-width: 0; }
.node-billing-notice button {
  flex-shrink: 0;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.llm-workbench .node-workbench-main {
  grid-template-rows: minmax(84px, 1fr) auto;
  gap: 8px;
  padding: 10px;
}

.nody-inline-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(122px, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.nody-model-select {
  min-width: 0;
}

.nody-model-select select {
  height: 32px;
  min-height: 32px;
  border-radius: 8px;
  background: var(--nody-card-muted);
  font-size: 11px;
}

.nody-context-summary {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
}

.nody-context-chip,
.nody-context-empty {
  min-width: 0;
  max-width: 92px;
  overflow: hidden;
  border: 1px solid var(--nody-border);
  border-radius: 999px;
  background: var(--nody-card-muted);
  color: var(--nody-muted);
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nody-context-chip.more {
  flex: 0 0 auto;
}

.llm-workbench .llm-instruction {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
}

.llm-workbench .llm-instruction-input {
  min-height: 0;
  border-radius: 9px;
  background: var(--nody-card-muted);
  resize: none;
  font-size: 12px;
}

.nody-result-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  overflow: hidden;
}

.nody-result-panel .llm-output-editor {
  min-height: 0;
  border-radius: 9px;
  background: var(--nody-card-muted);
  font-size: 11px;
  line-height: 1.45;
}

.nody-result-panel:not(.has-result) .llm-output-editor {
  color: var(--nody-muted);
}

.llm-output-actions .llm-copy-button {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
}

.image-workbench .node-workbench-main,
.video-workbench .node-workbench-main {
  grid-template-rows: minmax(138px, 1fr) auto auto;
  gap: 0;
}

.nody-workbench .node-stage {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--nody-card-muted);
}

.nody-workbench .stage-flow-meta {
  display: none;
}

.nody-workbench .node-stage-content {
  padding: 8px;
}

.nody-workbench .node-media-preview {
  border-radius: 10px;
  background: color-mix(in srgb, var(--nody-card-muted) 78%, #dfe6ef);
}

.nody-workbench .stage-placeholder {
  gap: 8px;
}

.nody-workbench .stage-placeholder strong {
  color: var(--nody-text);
  font-size: 13px;
}

.nody-workbench .stage-placeholder small {
  max-width: 260px;
  color: var(--nody-muted);
  font-size: 10px;
}

.nody-workbench .stage-icon {
  color: color-mix(in srgb, var(--nody-muted) 56%, transparent);
  font-size: 27px;
}

.nody-workbench .stage-progress {
  left: 10px;
  right: 10px;
  bottom: 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.nody-workbench .stage-progress-track {
  height: 3px;
}

.nody-workbench .stage-progress-label {
  font-size: 9px;
}

.nody-workbench .stage-queue-meta {
  left: 10px;
  right: 10px;
  bottom: 22px;
  color: var(--nody-muted);
  font-size: 9px;
}

.nody-node-settings {
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--nody-border);
  background: var(--nody-card);
}

.nody-node-settings > summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: var(--nody-muted);
  padding: 0 12px;
  font-size: 10px;
  font-weight: 720;
  list-style: none;
}

.nody-node-settings > summary::-webkit-details-marker {
  display: none;
}

.nody-node-settings[open] {
  max-height: 56%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.nody-node-settings[open] > summary {
  color: var(--nody-selected);
}

.nody-node-settings[open] > summary i {
  transform: rotate(180deg);
}

.nody-node-settings .node-console {
  height: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--nody-border);
  border-radius: 0;
  background: var(--nody-card-muted);
  box-shadow: none;
  padding: 9px;
}

.nody-node-settings .node-workbench-scroll {
  gap: 7px;
}

.nody-node-settings .console-tool,
.nody-node-settings .chip {
  min-height: 27px;
  border-radius: 8px;
  font-size: 10px;
}

.nody-node-settings .node-field > span {
  font-size: 10px;
}

.nody-node-settings textarea,
.nody-node-settings select,
.nody-node-settings input {
  font-size: 11px;
}

.toast-region {
  right: 18px;
  top: calc(var(--topbar-height) + 12px);
  width: min(390px, calc(100vw - 36px));
}

.toast-message {
  width: auto;
  border-radius: 12px;
  padding: 11px 13px;
  box-shadow: 0 14px 32px rgba(31, 45, 66, 0.16);
  font-size: 12px;
  line-height: 1.4;
}

[data-theme="dark"] .canvas-create-dock.canvas-command-dock {
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .nody-node .node-type-icon {
  background: color-mix(in srgb, var(--nody-selected) 14%, var(--nody-card));
}

[data-theme="dark"] .nody-workbench .node-media-preview {
  background: #0f1721;
}

@media (max-width: 760px) {
  :root {
    --topbar-height: 64px;
  }

  .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    padding: 0 12px;
  }

  .toolbar-shell {
    bottom: 12px;
    grid-column: auto;
    grid-row: auto;
  }

  .canvas-create-dock.canvas-command-dock {
    grid-template-columns: repeat(5, 48px);
    min-height: 54px;
    padding: 0;
  }

  .canvas-create-dock.canvas-command-dock button {
    width: 48px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nody-node > .node-body,
  .nody-node .node-port,
  .node-downstream-add,
  .canvas-create-dock.canvas-command-dock button {
    transition: none;
  }
}

/* Recharge page: a precise creative ledger with one warm transactional accent. */
.recharge-page {
  --recharge-accent: #ff6b2c;
  --recharge-accent-soft: #fff0e8;
  --recharge-ink: #15243a;
  --recharge-green: #0b8f68;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.recharge-page-head {
  min-height: 116px;
  margin-bottom: 12px;
}

.recharge-page-head > div:first-child {
  display: grid;
  gap: 7px;
}

.recharge-page-head .recharge-eyebrow {
  color: var(--recharge-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.recharge-page-head .subpage-actions {
  align-items: center;
}

.recharge-balance-pill {
  min-width: 196px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: 17px 25px;
  column-gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--recharge-accent) 28%, var(--glass-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--recharge-accent-soft) 68%, var(--glass-surface));
  box-shadow: var(--glass-highlight);
}

.recharge-balance-pill i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  border-radius: 12px;
  background: color-mix(in srgb, var(--recharge-accent) 10%, transparent);
  color: var(--recharge-accent);
  font-size: 20px;
}

.recharge-balance-pill > span {
  align-self: end;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.recharge-balance-pill strong {
  display: inline-flex !important;
  align-items: baseline;
  align-self: start;
  gap: 5px;
  white-space: nowrap;
  color: var(--recharge-ink);
  font-size: 22px;
  line-height: 1;
}

.recharge-balance-pill strong > span {
  display: inline !important;
  color: inherit;
  font: inherit;
}

.recharge-balance-pill strong > em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
}

.recharge-content {
  width: min(100%, 1320px);
  display: grid;
  gap: 42px;
  margin: 0 auto;
  padding-bottom: 52px;
}

.recharge-status {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-surface) 92%, transparent);
  box-shadow: var(--glass-highlight), 0 10px 26px rgba(40, 50, 68, 0.06);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.recharge-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff9f0a;
  box-shadow: 0 0 0 5px rgba(255, 159, 10, 0.14);
}

.recharge-status[data-tone="ready"] .recharge-status-dot {
  background: var(--recharge-green);
  box-shadow: 0 0 0 5px rgba(11, 143, 104, 0.14);
}

.recharge-status[data-tone="warning"] .recharge-status-dot,
.recharge-status[data-tone="error"] .recharge-status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(223, 45, 63, 0.12);
}

.recharge-status > div {
  flex: 1;
}

.recharge-status strong,
.recharge-status p {
  display: block;
  margin: 0;
}

.recharge-status strong {
  color: var(--recharge-ink);
  font-size: 14px;
  font-weight: 760;
}

.recharge-status p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.recharge-section {
  display: grid;
  gap: 18px;
}

.recharge-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

.recharge-section-head > div {
  display: grid;
  gap: 5px;
}

.recharge-section-head span,
.recharge-card-heading span,
.recharge-checkout-card > span {
  color: var(--recharge-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.recharge-section-head h2,
.recharge-card-heading strong,
.recharge-checkout-card h2 {
  margin: 0;
  color: var(--recharge-ink);
  font-weight: 760;
  letter-spacing: -0.02em;
}

.recharge-section-head h2 {
  font-size: clamp(23px, 2.4vw, 34px);
}

.recharge-section-head p {
  max-width: 500px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  text-align: right;
}

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

.recharge-package-card {
  position: relative;
  min-height: 332px;
  display: flex;
  flex-direction: column;
  padding: 23px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-surface) 94%, transparent);
  box-shadow: var(--glass-highlight), 0 12px 30px rgba(40, 50, 68, 0.07);
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  animation: recharge-card-in 420ms var(--ease-out) both;
}

.recharge-package-card:nth-child(2) { animation-delay: 55ms; }
.recharge-package-card:nth-child(3) { animation-delay: 110ms; }
.recharge-package-card:nth-child(4) { animation-delay: 165ms; }

@keyframes recharge-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.recharge-package-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--recharge-accent) 42%, var(--glass-border));
  box-shadow: var(--glass-highlight), 0 18px 42px rgba(40, 50, 68, 0.11);
}

.recharge-package-card.selected {
  border-color: var(--recharge-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--recharge-accent) 13%, transparent), 0 18px 42px rgba(40, 50, 68, 0.11);
}

.recharge-package-card.recommended {
  color: #fff;
  border-color: #17263c;
  background:
    radial-gradient(circle at 90% 8%, rgba(255, 107, 44, 0.26), transparent 32%),
    #17263c;
  box-shadow: 0 20px 46px rgba(20, 34, 55, 0.22);
}

.recharge-package-card.recommended.selected {
  border-color: var(--recharge-accent);
}

.recharge-recommended-label {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--recharge-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.recharge-package-name {
  min-height: 58px;
  display: grid;
  gap: 7px;
  padding-right: 54px;
}

.recharge-package-name > span {
  color: var(--recharge-ink);
  font-size: 18px;
  font-weight: 760;
}

.recharge-package-name small,
.recharge-package-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.recharge-package-card.recommended .recharge-package-name > span,
.recharge-package-card.recommended .recharge-package-price,
.recharge-package-card.recommended .recharge-package-credit b {
  color: #fff;
}

.recharge-package-card.recommended .recharge-package-name small,
.recharge-package-card.recommended p,
.recharge-package-card.recommended .recharge-package-credit {
  color: rgba(255, 255, 255, 0.66);
}

.recharge-package-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-top: 22px;
  color: var(--recharge-ink);
}

.recharge-package-price sup {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 760;
}

.recharge-package-price strong {
  font-family: "DIN Alternate", "Bahnschrift", "Aptos Display", sans-serif;
  font-size: clamp(46px, 4vw, 62px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.recharge-package-credit {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.recharge-package-credit b {
  color: var(--recharge-ink);
  font-size: 16px;
}

.recharge-package-card p {
  min-height: 34px;
  margin: 18px 0;
}

.recharge-package-card > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 13px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--recharge-ink);
  font-size: 12px;
  font-weight: 720;
}

.recharge-package-card.selected > button {
  border-color: var(--recharge-accent);
  background: var(--recharge-accent);
  color: #fff;
}

.recharge-package-card.recommended > button:not([aria-pressed="true"]) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.recharge-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 14px;
}

.recharge-calculator-card,
.recharge-checkout-card {
  min-height: 330px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-surface) 94%, transparent);
  box-shadow: var(--glass-highlight), 0 12px 30px rgba(40, 50, 68, 0.07);
}

.recharge-calculator-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 26px;
}

.recharge-card-heading {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.recharge-card-heading strong {
  font-size: 24px;
}

.recharge-field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.recharge-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.recharge-field select,
.recharge-quantity-control {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--control-bg);
  color: var(--recharge-ink);
}

.recharge-field select {
  padding: 0 13px;
  outline: none;
}

.recharge-field select:focus,
.recharge-quantity-control:focus-within {
  border-color: var(--recharge-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--recharge-accent) 13%, transparent);
}

.recharge-quantity-control {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  overflow: hidden;
}

.recharge-quantity-control button,
.recharge-quantity-control input {
  border: 0;
  background: transparent;
  color: var(--recharge-ink);
}

.recharge-quantity-control button {
  font-size: 20px;
}

.recharge-quantity-control input {
  width: 100%;
  text-align: center;
  outline: none;
  font-weight: 760;
  -moz-appearance: textfield;
}

.recharge-quantity-control input::-webkit-inner-spin-button,
.recharge-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.recharge-calculator-result {
  grid-column: 1 / -1;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-radius: 13px;
  background: var(--recharge-accent-soft);
}

.recharge-calculator-result span,
.recharge-calculator-result small {
  color: #8a4c31;
  font-size: 11px;
  font-weight: 700;
}

.recharge-calculator-result strong {
  color: #a63b12;
  font-family: "DIN Alternate", "Bahnschrift", "Aptos Display", sans-serif;
  font-size: 30px;
}

.recharge-calculator-hint {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.recharge-calculator-hint[data-tone="enough"] {
  color: var(--recharge-green);
}

.recharge-calculator-hint[data-tone="short"] {
  color: #a63b12;
}

.recharge-checkout-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  color: #fff;
  border-color: #17263c;
  background:
    linear-gradient(145deg, rgba(255, 107, 44, 0.15), transparent 44%),
    #17263c;
  box-shadow: 0 20px 46px rgba(20, 34, 55, 0.2);
}

.recharge-checkout-card h2 {
  margin-top: 6px;
  color: #fff;
  font-size: 28px;
}

.recharge-checkout-amount {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 16px;
}

.recharge-checkout-amount > strong {
  font-family: "DIN Alternate", "Bahnschrift", "Aptos Display", sans-serif;
  font-size: 52px;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.recharge-checkout-amount > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.recharge-checkout-card > p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.payment-provider-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 10px;
}

.payment-provider-options button {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 720;
}

.payment-provider-options button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.72);
  background: #fff;
  color: #17263c;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.payment-provider-options button i {
  font-size: 17px;
}

.recharge-submit-button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  border: 0;
  border-radius: 11px;
  background: var(--recharge-accent);
  color: #fff;
  font-weight: 760;
}

.recharge-submit-button:disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.58);
}

.recharge-checkout-card > small {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  line-height: 1.55;
}

body.payment-dialog-open {
  overflow: hidden;
}

.payment-dialog {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 20, 35, 0.46);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.payment-dialog-card {
  position: relative;
  width: min(100%, 430px);
  display: grid;
  justify-items: center;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 107, 44, 0.1), transparent 34%),
    color-mix(in srgb, var(--glass-surface) 96%, #fff);
  box-shadow: var(--glass-highlight), 0 30px 90px rgba(10, 20, 35, 0.28);
  animation: payment-dialog-in 220ms var(--ease-out) both;
}

@keyframes payment-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.payment-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 17px;
}

.payment-dialog-eyebrow {
  color: var(--recharge-accent, #ff6b2c);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.payment-dialog h2 {
  margin: 8px 0 5px;
  color: var(--text);
  font-size: 25px;
  letter-spacing: -0.03em;
}

.payment-dialog-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

.payment-qr-shell {
  width: 226px;
  height: 226px;
  display: grid;
  place-items: center;
  margin: 24px 0 16px;
  padding: 13px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(22, 37, 58, 0.12);
}

.payment-qr-shell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.payment-dialog-card > strong {
  color: var(--text);
  font-family: "DIN Alternate", "Bahnschrift", "Aptos Display", sans-serif;
  font-size: 32px;
  line-height: 1;
}

.payment-dialog-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #ff9f0a 11%, var(--glass-surface));
  color: #a76100;
  font-size: 11px;
}

.payment-dialog-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9f0a;
  box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.12);
}

.payment-dialog-status[data-status="paid"] {
  background: color-mix(in srgb, #0b8f68 11%, var(--glass-surface));
  color: #0b8f68;
}

.payment-dialog-status[data-status="paid"] > span {
  background: #0b8f68;
  box-shadow: 0 0 0 4px rgba(11, 143, 104, 0.12);
}

.payment-dialog-status[data-status="failed"],
.payment-dialog-status[data-status="refunded"],
.payment-dialog-status[data-status="cancelled"] {
  background: color-mix(in srgb, var(--danger) 9%, var(--glass-surface));
  color: var(--danger);
}

.payment-dialog-status[data-status="failed"] > span,
.payment-dialog-status[data-status="refunded"] > span,
.payment-dialog-status[data-status="cancelled"] > span {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent);
}

.payment-dialog-card > .ghost-button {
  margin-top: 15px;
}

.recharge-price-ledger {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 14px;
}

.recharge-price-group {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--glass-surface) 94%, transparent);
  box-shadow: var(--glass-highlight), 0 12px 30px rgba(40, 50, 68, 0.06);
}

.recharge-price-group-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--recharge-ink);
}

.recharge-price-group-head i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--recharge-accent-soft);
  color: var(--recharge-accent);
  font-size: 16px;
}

.recharge-price-rows {
  display: grid;
}

.recharge-price-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 74px;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--glass-border);
}

.recharge-price-row:last-child {
  border-bottom: 0;
}

.recharge-price-row > div {
  display: grid;
  gap: 2px;
}

.recharge-price-row strong {
  color: var(--recharge-ink);
  font-size: 12px;
}

.recharge-price-row small {
  color: var(--muted);
  font-size: 9px;
}

.recharge-price-row > span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.recharge-price-row > b {
  color: var(--recharge-ink);
  font-family: "DIN Alternate", "Bahnschrift", "Aptos Display", sans-serif;
  font-size: 15px;
  text-align: right;
}

.recharge-order-section .recharge-section-head {
  align-items: center;
}

.recharge-order-list {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-surface) 94%, transparent);
  box-shadow: var(--glass-highlight), 0 12px 30px rgba(40, 50, 68, 0.06);
}

.recharge-order-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 90px 82px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--glass-border);
}

.recharge-order-row:last-child {
  border-bottom: 0;
}

.recharge-order-row > div {
  display: grid;
  gap: 3px;
}

.recharge-order-row strong {
  color: var(--recharge-ink);
  font-size: 14px;
}

.recharge-order-row small,
.recharge-order-row > span {
  color: var(--muted);
  font-size: 10px;
}

.recharge-order-row > b {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}

.recharge-order-row > b[data-status="paid"] {
  background: color-mix(in srgb, var(--recharge-green) 13%, var(--glass-surface));
  color: var(--recharge-green);
}

.recharge-order-row > b[data-status="failed"],
.recharge-order-row > b[data-status="refunded"] {
  background: color-mix(in srgb, var(--danger) 10%, var(--glass-surface));
  color: var(--danger);
}

.recharge-order-row > button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--recharge-accent) 30%, var(--glass-border));
  border-radius: 9px;
  background: var(--recharge-accent-soft);
  color: var(--recharge-accent);
  font-size: 10px;
  font-weight: 760;
}

.recharge-order-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
}

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

.recharge-assurance > div {
  min-height: 94px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-content: center;
  padding: 15px;
  border-top: 1px solid var(--glass-border);
}

.recharge-assurance i {
  grid-row: 1 / 3;
  color: var(--recharge-accent);
  font-size: 23px;
}

.recharge-assurance strong {
  color: var(--recharge-ink);
  font-size: 12px;
}

.recharge-assurance span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

[data-theme="dark"] .recharge-page {
  --recharge-accent-soft: rgba(255, 107, 44, 0.14);
  --recharge-ink: #f1f5fa;
}

[data-theme="dark"] .recharge-balance-pill strong,
[data-theme="dark"] .recharge-status strong,
[data-theme="dark"] .recharge-section-head h2,
[data-theme="dark"] .recharge-package-name > span,
[data-theme="dark"] .recharge-package-price,
[data-theme="dark"] .recharge-package-credit b,
[data-theme="dark"] .recharge-card-heading strong,
[data-theme="dark"] .recharge-price-group-head,
[data-theme="dark"] .recharge-price-row strong,
[data-theme="dark"] .recharge-price-row > b,
[data-theme="dark"] .recharge-order-row strong,
[data-theme="dark"] .recharge-assurance strong,
[data-theme="dark"] .recharge-quantity-control button,
[data-theme="dark"] .recharge-quantity-control input,
[data-theme="dark"] .recharge-field select {
  color: var(--recharge-ink);
}

[data-theme="dark"] .recharge-package-card.recommended .recharge-package-name > span,
[data-theme="dark"] .recharge-package-card.recommended .recharge-package-price,
[data-theme="dark"] .recharge-package-card.recommended .recharge-package-credit b {
  color: #fff;
}

[data-theme="dark"] .recharge-calculator-result span,
[data-theme="dark"] .recharge-calculator-result small,
[data-theme="dark"] .recharge-calculator-hint[data-tone="short"] {
  color: #ffad89;
}

[data-theme="dark"] .recharge-calculator-result strong {
  color: #ff8b59;
}

@media (max-width: 1180px) {
  .recharge-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .recharge-page-head,
  .recharge-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .recharge-page-head .subpage-actions {
    width: 100%;
    justify-content: space-between;
  }

  .recharge-section-head p {
    max-width: none;
    text-align: left;
  }

  .recharge-workbench,
  .recharge-price-ledger {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .recharge-package-grid,
  .recharge-calculator-card {
    grid-template-columns: 1fr;
  }

  .recharge-page-head .subpage-actions {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .recharge-balance-pill {
    min-width: 0;
  }

  .recharge-calculator-card {
    padding: 18px;
  }

  .recharge-card-heading,
  .recharge-calculator-result,
  .recharge-calculator-hint {
    grid-column: 1;
  }

  .recharge-calculator-result {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .recharge-checkout-amount {
    align-items: flex-start;
    flex-direction: column;
  }

  .recharge-price-row {
    grid-template-columns: minmax(0, 1fr) 70px 62px;
    padding-inline: 13px;
  }

  .recharge-order-row {
    grid-template-columns: minmax(0, 1fr) 74px;
  }

  .recharge-order-row > b,
  .recharge-order-row > button {
    grid-column: 2;
  }

  .payment-dialog {
    padding: 12px;
  }

  .payment-dialog-card {
    padding: 30px 20px 24px;
  }

  .payment-qr-shell {
    width: min(65vw, 226px);
    height: min(65vw, 226px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recharge-package-card,
  .payment-dialog-card {
    animation: none;
    transition: none;
  }
}

/* Nody V3: compact result tiles with one contextual editor panel. */
.nody-node-panel {
  isolation: isolate;
}

.nody-node-panel.selected:not(.multi) {
  z-index: 100;
}

.nody-node-panel > .node-body,
.nody-node-panel.node-image > .node-body {
  height: calc(100% - 30px);
  overflow: hidden;
}

.nody-card-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--nody-card-muted) 72%, transparent), transparent 68%),
    var(--nody-card);
}

.nody-card-surface.has-media {
  background: color-mix(in srgb, var(--nody-card-muted) 76%, var(--nody-card));
}

.nody-card-surface .node-media-shell,
.nody-card-surface .node-media-preview,
.nody-card-surface .node-media,
.nody-card-surface video.node-media {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: inherit;
  margin: 0;
}

.nody-card-surface img.node-media {
  object-fit: contain;
}

.nody-card-surface video.node-media {
  object-fit: cover;
}

.nody-card-surface .node-media-shell {
  position: relative;
  aspect-ratio: auto !important;
}

.nody-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--nody-muted);
  padding: 24px;
  text-align: center;
}

.nody-card-placeholder > i {
  font-size: 36px;
  font-weight: 400;
  opacity: 0.76;
}

.nody-card-placeholder > p {
  max-width: 100%;
  max-height: 3.1em;
  margin: 0;
  overflow: hidden;
  color: var(--nody-text);
  font-size: 11px;
  line-height: 1.55;
}

.node-llm .nody-card-placeholder.has-text-result {
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  padding: 50px 42px 20px;
}

.node-llm .nody-card-placeholder.has-text-result > i {
  font-size: 34px;
}

.node-llm .nody-card-placeholder.has-text-result > p {
  width: 100%;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
  scrollbar-width: thin;
}

.nody-card-copy-result {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nody-border) 86%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--nody-card) 92%, transparent);
  color: var(--nody-muted);
  box-shadow: 0 4px 14px rgba(31, 45, 66, 0.09);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nody-card-copy-result:hover,
.nody-card-copy-result:focus-visible,
.nody-card-copy-result.copied {
  border-color: color-mix(in srgb, var(--nody-selected) 55%, var(--nody-border));
  color: var(--nody-selected);
  transform: translateY(-1px);
}

.nody-card-copy-result:active {
  transform: translateY(0);
}

.nody-card-status {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 4;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--nody-border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nody-card) 90%, transparent);
  color: var(--nody-muted);
  padding: 0 8px;
  box-shadow: 0 3px 12px rgba(31, 45, 66, 0.08);
  font-size: 9px;
  font-weight: 760;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nody-card-status.succeeded {
  color: var(--success);
}

.nody-card-status.failed {
  color: var(--danger);
}

.nody-card-status.running,
.nody-card-status.queued {
  color: var(--nody-selected);
}

.nody-node-panel .node-resize {
  display: none;
}

.node-editor-panel {
  --node-editor-width: 620px;
  --node-editor-offset-x: 0px;
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  z-index: 90;
  width: min(var(--node-editor-width), 82vw);
  max-height: min(680px, 74vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--nody-border-strong) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--nody-card) 97%, transparent);
  box-shadow: 0 24px 58px rgba(31, 45, 66, 0.18), 0 3px 10px rgba(31, 45, 66, 0.08);
  transform: translate(calc(-50% + var(--node-editor-offset-x)), -5px);
  transition: opacity 140ms ease, transform 160ms ease, visibility 0s linear 160ms;
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

.node-editor-panel-prompt {
  --node-editor-width: 540px;
}

.node-editor-panel-llm {
  --node-editor-width: 620px;
}

.node-editor-panel-image {
  --node-editor-width: 680px;
}

.node-editor-panel-video,
.node-editor-panel-director {
  --node-editor-width: 780px;
}

.nody-node-panel.selected:not(.multi) > .node-editor-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(calc(-50% + var(--node-editor-offset-x)), 0);
  transition-delay: 0s;
}

.nody-node-panel.panel-up > .node-editor-panel {
  top: auto;
  bottom: calc(100% + 12px);
  transform: translate(calc(-50% + var(--node-editor-offset-x)), 5px);
}

.nody-node-panel.panel-up.selected:not(.multi) > .node-editor-panel {
  transform: translate(calc(-50% + var(--node-editor-offset-x)), 0);
}

.node-editor-panel-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--nody-border);
  padding: 8px 10px 8px 14px;
}

.node-editor-panel-head > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.node-editor-panel-head span {
  flex: 0 0 auto;
  color: var(--nody-muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.node-editor-panel-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--nody-text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-editor-panel-head button {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nody-muted);
  padding: 0;
}

.node-editor-panel-head button:hover,
.node-editor-panel-head button:focus-visible {
  background: var(--nody-card-muted);
  color: var(--nody-text);
  outline: none;
}

.node-editor-panel-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.node-editor-panel-body > .node-workbench,
.node-editor-panel-body > .director-workbench {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.node-editor-panel .node-workbench-main {
  min-height: 0;
  overflow: visible;
}

.node-editor-panel .prompt-workbench .node-workbench-main {
  min-height: 188px;
}

.node-editor-panel .prompt-workbench .nody-primary-editor {
  min-height: 150px;
}

.node-editor-panel .llm-workbench .node-workbench-main {
  min-height: 330px;
}

.node-editor-panel .image-workbench .node-workbench-main,
.node-editor-panel .video-workbench .node-workbench-main {
  display: block;
  min-height: 0;
}

.node-editor-panel .image-workbench .node-console,
.node-editor-panel .video-workbench .node-console {
  height: auto;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px;
}

.node-editor-panel .node-workbench-scroll {
  max-height: none;
  overflow: visible;
}

.node-editor-panel .nody-node-summary {
  margin: 2px 0 0;
  border: 1px solid var(--nody-border);
  border-radius: 9px;
  background: var(--nody-card-muted);
}

.node-editor-panel .node-workbench-footer-stack {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--nody-card) 96%, transparent);
}

.node-layer.edge-connecting .nody-node .node-port.input {
  opacity: 0.72;
  pointer-events: auto;
  background: var(--nody-muted);
}

.node-layer.edge-connecting .nody-node .node-port.input:hover,
.node-layer.edge-connecting .nody-node .node-port.input.hot {
  opacity: 1;
  background: var(--nody-selected);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--nody-selected) 14%, transparent);
}

.edge-path.draft {
  pointer-events: none !important;
}

[data-theme="dark"] .node-editor-panel {
  background: color-mix(in srgb, var(--nody-card) 96%, transparent);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.46), 0 3px 12px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .node-editor-panel {
    transition: none;
  }
}

/* Invite-only beta administration */
.admin-invite-panel {
  margin-bottom: 14px;
}

.admin-invite-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 14px;
  padding: 0 22px 22px;
}

.admin-invite-form label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.admin-invite-form label > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.admin-invite-form label > small {
  color: var(--muted);
  font-size: 10px;
}

.admin-invite-form input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  outline: none;
  background: var(--control-bg);
  color: var(--ink);
  font: 650 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.admin-invite-form input:focus {
  border-color: var(--system-blue);
  background: var(--glass-surface-strong);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.admin-invite-form .primary-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 18px;
  white-space: nowrap;
}

.admin-invite-generated {
  margin: 0 22px 22px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--system-blue) 24%, var(--glass-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--system-blue) 6%, var(--control-bg));
}

.admin-invite-generated > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.admin-invite-generated h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 14px;
}

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

.admin-invite-generated-code {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: var(--glass-surface-strong);
}

.admin-invite-generated-code code {
  overflow: hidden;
  padding: 10px 11px;
  color: var(--ink);
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-invite-generated-code button {
  width: 34px;
  height: 34px;
  border: 0;
  border-left: 1px solid var(--glass-border);
  background: transparent;
  color: var(--system-blue);
}

.admin-invite-list-panel {
  overflow: hidden;
}

.admin-invite-table {
  overflow-x: auto;
  border-top: 1px solid var(--glass-border);
}

.admin-invite-row {
  min-width: 780px;
  display: grid;
  grid-template-columns: minmax(165px, 1.2fr) 70px 88px minmax(140px, 1fr) minmax(140px, 1fr) 62px;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 75%, transparent);
  color: var(--ink);
  font-size: 12px;
}

.admin-invite-row:not(.admin-invite-head):hover {
  background: color-mix(in srgb, var(--control-hover) 72%, transparent);
}

.admin-invite-row code {
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--ink);
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.02em;
}

.admin-invite-head {
  min-height: 38px;
  padding-block: 9px;
  background: color-mix(in srgb, var(--control-bg) 70%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-invite-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.admin-invite-status.active {
  background: rgba(48, 209, 88, 0.12);
  color: #148239;
}

.admin-invite-status.exhausted,
.admin-invite-status.expired {
  background: rgba(255, 149, 0, 0.14);
  color: #b56800;
}

.admin-invite-status.disabled {
  background: rgba(255, 69, 58, 0.11);
  color: #c62922;
}

#adminInviteRows.is-loading {
  opacity: 0.58;
}

@media (max-width: 980px) {
  .admin-invite-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-invite-form .primary-button {
    width: 100%;
  }

  .admin-invite-code-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-invite-form,
  .admin-invite-code-grid {
    grid-template-columns: 1fr;
  }

  .admin-invite-generated > div:first-child {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-invite-generated > div:first-child .admin-icon-button {
    width: 100%;
  }
}

/* Confirmed detached node workbench, 2026-07-28. */
.mobile-node-editor-host {
  display: none;
}

.node-editor-panel {
  --node-editor-width: 660px;
  top: calc(100% + 14px);
  max-height: min(470px, 66vh);
  border-color: color-mix(in srgb, var(--nody-border-strong) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--nody-card) 98%, transparent);
  box-shadow:
    0 24px 62px rgba(31, 45, 66, 0.16),
    0 3px 10px rgba(31, 45, 66, 0.07);
}

.node-editor-panel.is-expanded {
  max-height: min(720px, 76vh);
}

.node-editor-panel.is-user-resized {
  width: var(--node-editor-user-width);
  height: var(--node-editor-user-height);
  max-height: none;
}

/* Resized node panels give added height to their primary editor, not fixed controls. */
.node-editor-panel.is-user-resized .node-editor-panel-body > .node-workbench,
.node-editor-panel.is-user-resized .node-editor-panel-body > .director-workbench {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-prompt.is-user-resized .prompt-workbench .node-workbench-main,
.node-editor-panel-prompt.is-user-resized .prompt-workbench .nody-primary-editor,
.node-editor-panel-llm.is-user-resized .llm-workbench .node-workbench-main {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-prompt.is-user-resized .prompt-workbench .nody-primary-editor {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.node-editor-panel-prompt.is-user-resized .prompt-workbench .prompt-text {
  height: 100%;
}

.node-editor-panel-llm.is-user-resized .llm-workbench .node-workbench-main {
  grid-template-rows: minmax(64px, 1fr) auto;
  overflow: hidden;
}

.node-editor-panel-llm.is-user-resized .llm-instruction {
  min-height: 64px;
  height: auto;
  grid-template-rows: auto minmax(0, 1fr);
}

.node-editor-panel-llm.is-user-resized .llm-instruction textarea {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-image.is-user-resized .image-workbench .node-workbench-main,
.node-editor-panel-video.is-user-resized .node-editor-panel-body > .video-workbench,
.node-editor-panel-video.is-user-resized .video-workbench .node-workbench-main,
.node-editor-panel-video.is-user-resized .video-workbench .node-console,
.node-editor-panel-video.is-user-resized .video-workbench .node-workbench-scroll,
.node-editor-panel-image.is-user-resized .image-workbench .node-console,
.node-editor-panel-image.is-user-resized .image-workbench .node-workbench-scroll {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-image.is-user-resized .image-workbench .node-workbench-main,
.node-editor-panel-image.is-user-resized .image-workbench .node-console,
.node-editor-panel-video.is-user-resized .video-workbench .node-workbench-main,
.node-editor-panel-video.is-user-resized .video-workbench .node-console {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.node-editor-panel-image.is-user-resized .image-workbench .node-workbench-scroll,
.node-editor-panel-video.is-user-resized .video-workbench .node-workbench-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.node-editor-panel-image.is-user-resized .image-workbench .workbench-editor-field,
.node-editor-panel-video.is-user-resized .video-prompt-editor {
  min-height: 96px;
  flex: 1 1 140px;
  display: grid;
}

.node-editor-panel-image.is-user-resized .image-workbench .workbench-editor-field {
  grid-template-rows: minmax(0, 1fr);
}

.node-editor-panel-image.is-user-resized .image-workbench .workbench-editor-field textarea {
  height: 100%;
}

.node-editor-panel-video.is-user-resized .video-prompt-editor {
  grid-template-rows: auto minmax(0, 1fr);
}

.node-editor-panel-video.is-user-resized .video-prompt-editor .workbench-editor-field,
.node-editor-panel-video.is-user-resized .video-prompt-input-shell {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-video.is-user-resized .video-prompt-editor .workbench-editor-field {
  grid-template-rows: minmax(0, 1fr);
}

.node-editor-panel-video.is-user-resized .video-prompt-input-shell {
  display: grid;
}

.node-editor-panel-video.is-user-resized .video-prompt-input-shell > textarea {
  height: 100%;
}

.node-editor-panel-image.is-user-resized .image-parameter-dock,
.node-editor-panel-video.is-user-resized .video-parameter-dock {
  flex: 0 0 auto;
}

.node-editor-panel-loop.is-user-resized .loop-workbench .node-workbench-main,
.node-editor-panel-output.is-user-resized .output-workbench .node-workbench-main {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.node-editor-panel-loop.is-user-resized .loop-workbench .node-console,
.node-editor-panel-output.is-user-resized .output-workbench .node-console,
.node-editor-panel-loop.is-user-resized .loop-workbench .node-workbench-scroll,
.node-editor-panel-output.is-user-resized .output-workbench .node-workbench-scroll {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-loop.is-user-resized .loop-workbench .node-workbench-scroll {
  grid-template-rows: repeat(2, minmax(84px, 1fr));
}

.node-editor-panel-loop.is-user-resized .loop-workbench .node-field {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.node-editor-panel-output.is-user-resized .output-workbench .workbench-editor-field {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.node-editor-panel-output.is-user-resized .output-workbench .node-workbench-scroll {
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
}

.node-editor-panel-loop.is-user-resized .loop-workbench textarea,
.node-editor-panel-output.is-user-resized .output-workbench textarea {
  min-height: 0;
  height: 100%;
}

.node-editor-panel-director.is-user-resized .director-workbench {
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto auto auto minmax(100px, 0.6fr);
}

.node-editor-panel-director.is-user-resized .director-text-editor {
  min-height: 0;
  height: 100%;
  display: grid;
}

.node-editor-panel-director.is-user-resized .director-text-editor textarea {
  min-height: 0;
  height: 100%;
}

.node-editor-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: end;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--nody-muted) 82%, var(--nody-selected));
  padding: 0 4px 4px 0;
  opacity: 0.68;
  cursor: nwse-resize;
  touch-action: none;
  transition: color 140ms ease, opacity 140ms ease;
}

.node-editor-resize:hover,
.node-editor-resize:focus-visible,
.node-editor-panel.is-resizing .node-editor-resize {
  background: transparent;
  color: var(--nody-selected);
  opacity: 1;
  outline: none;
}

.node-editor-resize:focus-visible {
  box-shadow: none;
}

.node-editor-resize-grip {
  width: 16px;
  height: 16px;
  display: block;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  border-bottom-right-radius: 8px;
}

html.node-editor-resizing,
html.node-editor-resizing * {
  cursor: nwse-resize !important;
  user-select: none !important;
}

.node-editor-panel-prompt,
.node-editor-panel-llm {
  --node-editor-width: 600px;
}

.node-editor-panel-image {
  --node-editor-width: 720px;
}

.node-editor-panel-video {
  --node-editor-width: 820px;
}

.nody-node-panel.panel-up > .node-editor-panel {
  bottom: calc(100% + 14px);
}

.node-editor-panel-head {
  min-height: 52px;
  gap: 14px;
  border-bottom-color: color-mix(in srgb, var(--nody-border) 78%, transparent);
  padding: 8px 10px 8px 14px;
}

.node-editor-panel-title,
.node-editor-panel-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-editor-panel-title {
  flex: 1 1 auto;
}

.node-editor-panel-actions {
  flex: 0 0 auto;
}

.node-editor-type-pill {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--nody-border);
  border-radius: 10px;
  background: var(--nody-card-muted);
  color: var(--nody-text);
  padding: 0 10px;
}

.node-editor-type-pill > i:first-child {
  color: var(--nody-muted);
  font-size: 16px;
}

.node-editor-type-pill > i:last-child {
  color: var(--nody-muted);
  font-size: 11px;
}

.node-editor-type-pill strong {
  max-width: 150px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-editor-custom-title {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  color: var(--nody-muted);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-editor-panel-head .node-editor-icon-button {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 9px;
}

.node-editor-collapse {
  opacity: 0.72;
}

.node-editor-panel-head .node-editor-run .node-editor-cost {
  min-width: max-content;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.node-editor-panel-head .node-editor-run {
  width: auto;
  height: 40px;
  min-width: 0;
  min-height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nody-selected) 92%, #fff), var(--nody-selected));
  color: #fff;
  padding: 0 13px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--nody-selected) 28%, transparent);
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.node-editor-panel-head .node-editor-run:hover:not(:disabled) {
  background: color-mix(in srgb, var(--nody-selected) 88%, #071426);
  color: #fff;
  transform: translateY(-1px);
}

.node-editor-panel-head .node-editor-run:focus-visible:not(:disabled) {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--nody-selected) 24%, transparent),
    0 8px 20px color-mix(in srgb, var(--nody-selected) 28%, transparent);
}

.node-editor-panel-head .node-editor-run:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.node-editor-panel-head .node-editor-run:disabled {
  background: color-mix(in srgb, var(--nody-selected) 28%, var(--nody-card-muted));
  color: color-mix(in srgb, var(--nody-selected) 72%, #fff);
  box-shadow: none;
  cursor: wait;
  opacity: 0.82;
}

.node-editor-panel-head .node-editor-run i {
  flex: 0 0 auto;
  font-size: 15px;
}

.node-editor-panel-head .node-editor-run .ph-play {
  transform: translateX(0.5px);
}

.node-editor-panel-head .node-editor-run .node-editor-run-label {
  color: #fff;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
}

.node-editor-run-divider {
  width: 1px;
  height: 14px;
  flex: 0 0 1px;
  background: rgba(255, 255, 255, 0.32);
}

.node-editor-panel-head .node-editor-run:disabled i {
  animation: node-editor-spin 900ms linear infinite;
}

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

.node-editor-panel-body {
  overflow: auto;
  scrollbar-gutter: stable;
}

.node-editor-panel-body > .node-workbench {
  background: transparent;
}

.app-main.node-editor-open .toolbar-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

.node-editor-panel .node-workbench-main,
.node-editor-panel .prompt-workbench .node-workbench-main,
.node-editor-panel .llm-workbench .node-workbench-main,
.node-editor-panel .image-workbench .node-workbench-main,
.node-editor-panel .video-workbench .node-workbench-main {
  min-height: 0;
}

.node-editor-panel .prompt-workbench .node-workbench-main {
  display: grid;
  grid-template-rows: minmax(112px, 1fr) auto;
}

.node-editor-panel .prompt-workbench .nody-primary-editor {
  min-height: 132px;
  padding: 12px 14px 10px;
}

.node-editor-panel .prompt-workbench .nody-primary-editor .node-section-label {
  display: none;
}

.node-editor-panel .prompt-workbench .nody-primary-editor .prompt-text {
  min-height: 112px;
  border: 0;
  background: transparent;
  padding: 7px 5px;
}

.node-editor-panel .llm-workbench .node-workbench-main {
  height: 132px;
  display: grid;
  grid-template-rows: 64px 68px;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.node-editor-panel .llm-instruction {
  min-height: 64px;
  height: 64px;
  border: 0;
  border-radius: 0;
  padding: 7px 14px 5px;
}

.node-editor-panel .llm-instruction > span {
  color: var(--nody-muted);
  font-size: 10px;
}

.node-editor-panel .llm-instruction textarea {
  min-height: 40px;
  border: 0;
  background: transparent;
  padding: 4px;
}

.node-editor-panel .nody-result-panel {
  min-height: 70px;
  height: 70px;
  grid-template-rows: 20px minmax(0, 1fr);
  gap: 2px;
  margin: 0 14px;
  border-color: var(--nody-border);
  border-radius: 11px;
  background: var(--nody-card-muted);
  padding: 5px 8px;
}

.node-editor-panel .nody-result-panel .llm-output-editor {
  min-height: 0;
  max-height: none;
  background: transparent;
}

.node-editor-panel.is-expanded .llm-workbench .node-workbench-main {
  height: auto;
  grid-template-rows: minmax(100px, 1fr) auto;
  overflow: visible;
}

.node-editor-panel.is-expanded .llm-instruction {
  min-height: 108px;
  height: auto;
  padding: 12px 14px 10px;
}

.node-editor-panel.is-expanded .llm-instruction textarea {
  min-height: 76px;
  padding: 8px 4px;
}

.node-editor-panel.is-expanded .nody-result-panel {
  min-height: 92px;
  height: auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  margin-bottom: 12px;
  padding: 9px;
}

.node-editor-panel.is-expanded .nody-result-panel .llm-output-editor {
  min-height: 70px;
  max-height: 122px;
}

.node-editor-panel .image-workbench .node-console,
.node-editor-panel .video-workbench .node-console {
  padding: 0;
}

.node-editor-panel .image-workbench .node-workbench-scroll,
.node-editor-panel .video-workbench .node-workbench-scroll {
  display: grid;
  gap: 0;
}

.node-editor-panel .workbench-editor-field {
  order: 10;
  min-height: 96px;
  border: 0;
  border-radius: 0;
  padding: 12px 14px 10px;
}

.node-editor-panel .workbench-editor-field > span {
  display: none;
}

.node-editor-panel .workbench-editor-field textarea {
  min-height: 74px;
  border: 0;
  background: transparent;
  padding: 8px 5px;
}

.node-editor-panel .workbench-editor-field textarea:focus,
.node-editor-panel .llm-instruction textarea:focus {
  border: 0;
  background: var(--nody-card-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nody-selected) 42%, var(--nody-border));
}

.node-editor-panel .node-toolbar-row,
.node-editor-panel .input-preview-list,
.node-editor-panel .video-frame-slots,
.node-editor-panel .strong-reference-panel {
  order: 4;
  margin: 0 14px 10px;
}

.node-editor-panel .node-toolbar-row {
  gap: 6px;
}

.node-editor-panel .mode-row {
  order: 2;
  margin-top: 12px;
}

.node-editor-panel:not(.is-expanded) .image-workbench .node-toolbar-row,
.node-editor-panel:not(.is-expanded) .image-workbench .input-preview-list,
.node-editor-panel:not(.is-expanded) .video-workbench .node-toolbar-row,
.node-editor-panel:not(.is-expanded) .video-workbench .input-preview-list,
.node-editor-panel:not(.is-expanded) .video-workbench .video-frame-slots,
.node-editor-panel:not(.is-expanded) .video-workbench .strong-reference-panel {
  display: none;
}

.node-editor-panel.is-expanded .image-workbench .node-toolbar-row,
.node-editor-panel.is-expanded .image-workbench .input-preview-list,
.node-editor-panel.is-expanded .video-workbench .node-toolbar-row,
.node-editor-panel.is-expanded .video-workbench .input-preview-list,
.node-editor-panel.is-expanded .video-workbench .video-frame-slots,
.node-editor-panel.is-expanded .video-workbench .strong-reference-panel {
  display: flex;
}

.node-editor-panel.is-expanded .image-workbench .input-preview-list,
.node-editor-panel.is-expanded .video-workbench .input-preview-list {
  display: grid;
}

.node-editor-panel.is-expanded .strong-reference-panel {
  display: grid;
}

/* Unified node parameter rails: one calm container, hairline inner dividers. */
.node-parameter-dock {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-items: stretch;
  gap: 0;
  margin: 0 14px 10px;
  overflow: visible;
  border: 1px solid var(--nody-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nody-card-muted) 52%, var(--nody-card));
  padding: 0;
}

.node-editor-panel .prompt-parameter-dock {
  display: none;
}

.llm-parameter-dock {
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
}

.image-parameter-dock,
.video-parameter-dock {
  order: 20;
  grid-template-columns: minmax(150px, 0.64fr) minmax(0, 1.36fr);
}

.interpolation-parameter-dock {
  grid-template-columns: minmax(128px, 0.38fr) minmax(0, 1.62fr);
}

.motion-reference-parameter-dock {
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  margin-inline: 0;
}

.director-parameter-dock {
  width: 100%;
  grid-template-columns: minmax(160px, 1.35fr) minmax(104px, 0.65fr);
  margin: 0 0 10px;
}

.node-parameter-dock .node-field,
.node-parameter-dock .node-parameter-context,
.node-parameter-dock .image-option-grid,
.node-parameter-dock .video-option-grid,
.node-parameter-dock .nody-model-select {
  min-width: 0;
  margin: 0;
}

.node-parameter-dock > .node-field,
.node-parameter-dock > .node-parameter-context,
.node-parameter-dock > .motion-output-contract {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 12px;
}

.node-parameter-dock > .node-parameter-context,
.node-parameter-dock > .image-option-grid,
.node-parameter-dock > .video-option-grid,
.node-parameter-dock > .interpolation-mode-panel,
.node-parameter-dock > .motion-output-contract,
.node-parameter-dock > .node-field + .node-field {
  border-left: 1px solid var(--nody-border);
}

.node-parameter-dock select,
.node-parameter-dock input {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 24px 0 0;
  font-size: 11px;
  font-weight: 720;
}

.node-parameter-dock > .node-field:focus-within,
.node-parameter-dock > .node-parameter-context:focus-within,
.video-choice-menu[open] > summary {
  background: color-mix(in srgb, var(--nody-selected) 5%, transparent);
  box-shadow: inset 0 -2px color-mix(in srgb, var(--nody-selected) 74%, transparent);
}

.node-parameter-context .nody-context-summary {
  justify-content: flex-start;
}

.node-parameter-dock .image-option-grid,
.node-parameter-dock .video-option-grid {
  display: grid;
  gap: 0;
}

.node-parameter-dock .image-option-grid {
  grid-template-columns: minmax(128px, 1.45fr) repeat(2, minmax(72px, 1fr));
}

.node-parameter-dock .video-option-grid {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
}

.node-parameter-dock .video-choice-menu + .video-choice-menu {
  border-left: 1px solid var(--nody-border);
}

.video-parameter-dock > .interpolation-node-handoff {
  grid-column: 1 / -1;
  min-height: 30px;
  margin: 0;
  border-top: 1px solid var(--nody-border);
  padding: 6px 12px;
  font-size: 10px;
}

.video-choice-menu {
  position: relative;
  min-width: 0;
  color: var(--nody-text);
}

.video-choice-menu > summary {
  width: 100%;
  height: 58px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--nody-text);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 680;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.video-choice-menu > summary::-webkit-details-marker {
  display: none;
}

.video-choice-menu > summary > span:not(.video-ratio-glyph) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-choice-summary-copy {
  display: grid;
  gap: 2px;
  line-height: 1.05;
}

.node-choice-summary-copy small {
  overflow: hidden;
  color: var(--nody-muted);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-choice-summary-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 720;
}

.node-parameter-label {
  color: var(--nody-muted) !important;
  font-size: 9px !important;
  font-weight: 680 !important;
}

.video-choice-menu > summary > i {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--nody-muted);
  font-size: 12px;
  transition: transform 140ms ease;
}

.video-choice-menu[open] > summary {
  color: var(--nody-selected);
}

.video-choice-menu[open] > summary > i {
  transform: rotate(180deg);
}

.node-editor-panel:has(.video-choice-menu[open]),
.node-editor-panel-body:has(.video-choice-menu[open]),
.node-editor-panel-body:has(.video-choice-menu[open]) > .node-workbench,
.node-editor-panel:has(.video-choice-menu[open]) .node-console {
  overflow: visible;
}

.video-choice-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 120;
  width: max(100%, 138px);
  max-height: 224px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nody-border-strong) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nody-card) 98%, transparent);
  box-shadow: 0 16px 38px rgba(31, 45, 66, 0.18), 0 3px 10px rgba(31, 45, 66, 0.08);
  padding: 7px;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.video-choice-popover > strong {
  display: block;
  margin: 0 4px 5px;
  border-bottom: 1px solid var(--nody-border);
  color: var(--nody-muted);
  padding: 2px 3px 7px;
  font-size: 10px;
  font-weight: 680;
}

.video-choice-options {
  max-height: 174px;
  display: grid;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.video-choice-option {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--nody-text);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 620;
  text-align: left;
}

.video-choice-option:hover,
.video-choice-option:focus-visible,
.video-choice-option.active {
  background: color-mix(in srgb, var(--nody-selected) 9%, var(--nody-card-muted));
  color: var(--nody-text);
  outline: none;
}

.video-choice-option > span:not(.video-ratio-glyph) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-choice-option > i {
  margin-left: auto;
  color: var(--nody-selected);
  font-size: 13px;
}

.image-parameter-dock .video-choice-menu.ratio .video-choice-popover {
  width: min(292px, 74vw);
  max-height: 278px;
}

.image-parameter-dock .video-choice-menu.ratio .video-choice-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 224px;
  gap: 4px;
}

.image-parameter-dock .video-choice-menu.ratio .video-choice-option {
  min-height: 34px;
  border: 1px solid transparent;
}

.image-parameter-dock .video-choice-menu.ratio .video-choice-option.active {
  border-color: color-mix(in srgb, var(--nody-selected) 32%, transparent);
}

.video-ratio-glyph {
  width: var(--ratio-width, 18px);
  height: var(--ratio-height, 10px);
  flex: 0 0 auto;
  display: inline-block;
  border: 1.4px solid currentColor;
  border-radius: 1px;
  color: var(--nody-muted);
}

.video-ratio-glyph.adaptive {
  position: relative;
  width: 18px;
  height: 13px;
  border-style: dashed;
}

.video-ratio-glyph.adaptive > i {
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 1px;
}

[data-theme="dark"] .video-choice-popover {
  background: color-mix(in srgb, var(--nody-card-muted) 94%, #000);
}

.node-parameter-dock .image-scale-group,
.node-parameter-dock .fps-compact {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}

.node-parameter-dock .image-scale-group button,
.node-parameter-dock .fps-compact button {
  min-height: 30px;
  min-width: 42px;
  flex: 1 0 auto;
  border-radius: 8px;
}

.node-editor-panel .interpolation-parameter-dock > .fps-field {
  margin: 0;
}

.interpolation-parameter-dock > .interpolation-mode-panel {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 10px 10px;
  box-shadow: none;
}

.interpolation-parameter-dock .interpolation-mode-field {
  min-height: 58px;
  margin: 0 -10px;
  border: 0;
  border-bottom: 1px solid var(--nody-border);
  border-radius: 0;
  background: transparent;
  padding: 8px 12px;
}

.interpolation-parameter-dock .interpolation-mode-field > small {
  grid-column: 1 / -1;
  color: var(--nody-muted);
  font-size: 9px;
}

.motion-reference-parameter-dock.motion-reference-settings {
  gap: 0;
}

.motion-reference-parameter-dock .node-field,
.motion-reference-parameter-dock .motion-output-contract {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.director-parameter-dock + .director-text-editor {
  min-height: 0;
}

.node-editor-panel .nody-node-summary {
  display: none;
}

.node-editor-panel .node-workbench-footer-stack {
  position: static;
  background: transparent;
}

.node-editor-panel .node-workbench-footer.status-only {
  min-height: 28px;
  border-top: 1px solid color-mix(in srgb, var(--nody-border) 72%, transparent);
  padding: 0 14px;
}

.node-editor-panel .node-workbench-footer.status-only .node-workbench-status {
  font-size: 9px;
}

[data-theme="dark"] .node-editor-panel {
  background: color-mix(in srgb, var(--nody-card) 98%, transparent);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    0 3px 12px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .node-editor-type-pill,
[data-theme="dark"] .node-parameter-dock select,
[data-theme="dark"] .node-parameter-dock input {
  background: transparent;
}

[data-theme="dark"] .ecommerce-preview-hint {
  color: rgba(226, 232, 240, 0.86);
  filter: drop-shadow(0 1px 1px rgba(8, 15, 26, 0.9));
}

@media (max-width: 780px) {
  .node-editor-panel,
  .node-editor-panel-prompt,
  .node-editor-panel-llm,
  .node-editor-panel-image,
  .node-editor-panel-video {
    --node-editor-width: calc(100vw - 24px);
    width: min(var(--node-editor-width), 94vw);
  }

  .node-editor-custom-title {
    display: none;
  }

  .node-editor-resize {
    display: none;
  }

  .image-parameter-dock,
  .video-parameter-dock,
  .llm-parameter-dock,
  .interpolation-parameter-dock,
  .director-parameter-dock {
    grid-template-columns: 1fr;
  }

  .node-parameter-dock > .node-parameter-context,
  .node-parameter-dock > .image-option-grid,
  .node-parameter-dock > .video-option-grid,
  .node-parameter-dock > .interpolation-mode-panel,
  .node-parameter-dock > .node-field + .node-field {
    border-top: 1px solid var(--nody-border);
    border-left: 0;
  }

  .node-parameter-dock .image-option-grid,
  .node-parameter-dock .video-option-grid {
    grid-template-columns: repeat(2, minmax(72px, 1fr));
  }

  .node-parameter-dock .image-option-grid .video-choice-menu.ratio {
    grid-column: 1 / -1;
  }

  .node-parameter-dock .image-option-grid .video-choice-menu:nth-child(2),
  .node-parameter-dock .video-option-grid .video-choice-menu:nth-child(odd) {
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-editor-panel-head .node-editor-run {
    transition: none;
  }

  .node-editor-panel-head .node-editor-run:disabled i {
    animation: none;
  }
}

/* Version history drawer */
.top-actions > .version-history-chip {
  position: relative;
  min-width: 76px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--nody-border) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nody-card) 93%, transparent);
  color: var(--nody-text);
  box-shadow: 0 8px 20px rgba(31, 45, 66, 0.08);
  padding: 0 13px;
}

.top-actions > .version-history-chip::before {
  display: none;
}

.top-actions > .version-history-chip i {
  color: var(--nody-muted);
  font-size: 17px;
}

.top-actions > .version-history-chip strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.top-actions > .version-history-chip:hover,
.top-actions > .version-history-chip:focus-visible,
.top-actions > .version-history-chip[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--nody-selected) 44%, var(--nody-border));
  background: color-mix(in srgb, var(--nody-selected) 8%, var(--nody-card));
  color: var(--nody-selected);
  outline: none;
}

.top-actions > .version-history-chip:hover i,
.top-actions > .version-history-chip:focus-visible i,
.top-actions > .version-history-chip[aria-expanded="true"] i {
  color: currentColor;
}

.version-history-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--nody-card);
  border-radius: 50%;
  background: var(--nody-selected);
  box-sizing: content-box;
}

.version-update-scrim {
  position: fixed;
  inset: 0;
  z-index: 340;
  background: rgba(24, 36, 52, 0.34);
  backdrop-filter: blur(8px) saturate(0.88);
  -webkit-backdrop-filter: blur(8px) saturate(0.88);
  animation: version-scrim-in 180ms ease-out both;
}

.version-update-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 350;
  width: clamp(430px, 34vw, 680px);
  max-width: 100vw;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid color-mix(in srgb, var(--nody-border) 80%, transparent);
  background: color-mix(in srgb, var(--nody-card) 96%, transparent);
  box-shadow: -24px 0 64px rgba(18, 31, 48, 0.18);
  backdrop-filter: blur(28px) saturate(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.08);
  animation: version-drawer-in 240ms cubic-bezier(0.2, 0.82, 0.3, 1) both;
}

.version-update-head {
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--nody-border) 72%, transparent);
  padding: 26px 30px 20px;
}

.version-update-head > div {
  min-width: 0;
}

.version-update-head span {
  display: block;
  color: var(--nody-selected);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.version-update-head h2 {
  margin: 8px 0 0;
  color: var(--nody-text);
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.version-update-head button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nody-border) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--nody-card) 88%, transparent);
  color: var(--nody-text);
  box-shadow: 0 9px 22px rgba(31, 45, 66, 0.08);
}

.version-update-head button:hover,
.version-update-head button:focus-visible {
  border-color: color-mix(in srgb, var(--nody-selected) 42%, var(--nody-border));
  color: var(--nody-selected);
  outline: none;
}

.version-update-head button i {
  font-size: 20px;
}

.version-update-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px 34px 40px;
  scrollbar-gutter: stable;
}

.version-update-card {
  border: 1px solid color-mix(in srgb, var(--nody-border) 78%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--nody-card) 88%, transparent);
  box-shadow: 0 12px 30px rgba(31, 45, 66, 0.06);
  padding: 22px 24px 24px;
}

.version-update-card.current {
  border-color: color-mix(in srgb, var(--nody-selected) 24%, var(--nody-border));
  background: color-mix(in srgb, var(--nody-selected) 4%, var(--nody-card));
}

.version-update-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.version-update-meta strong {
  color: var(--nody-selected);
  font-size: 15px;
  font-weight: 800;
}

.version-update-meta time {
  color: var(--nody-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.version-update-card h3 {
  margin: 13px 0 12px;
  color: var(--nody-text);
  font-size: 18px;
  line-height: 1.35;
}

.version-update-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 20px;
  color: var(--nody-muted);
}

.version-update-card li {
  padding-left: 2px;
  font-size: 13px;
  line-height: 1.7;
}

.version-update-card li::marker {
  color: var(--nody-selected);
}

.version-update-loading,
.version-update-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--nody-muted);
  text-align: center;
}

.version-update-loading i,
.version-update-empty i {
  color: var(--nody-selected);
  font-size: 28px;
}

.version-update-loading i {
  animation: ecommerce-spin 900ms linear infinite;
}

.version-update-empty strong {
  color: var(--nody-text);
  font-size: 16px;
}

.version-update-empty span {
  font-size: 12px;
}

[data-theme="dark"] .top-actions > .version-history-chip,
[data-theme="dark"] .version-update-head button,
[data-theme="dark"] .version-update-card {
  box-shadow: none;
}

[data-theme="dark"] .version-update-scrim {
  background: rgba(1, 6, 12, 0.58);
}

[data-theme="dark"] .version-update-drawer {
  background: color-mix(in srgb, var(--nody-card) 97%, #000);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.46);
}

@keyframes version-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes version-drawer-in {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 980px) {
  .top-actions > .version-history-chip {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .top-actions > .version-history-chip strong {
    display: none;
  }
}

@media (max-width: 560px) {
  .version-update-head {
    min-height: 112px;
    padding: 24px 20px 20px;
  }

  .version-update-head h2 {
    font-size: 24px;
  }

  .version-update-list {
    gap: 14px;
    padding: 16px 16px 28px;
  }

  .version-update-card {
    border-radius: 16px;
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .version-update-scrim,
  .version-update-drawer,
  .version-update-loading i {
    animation: none;
  }
}

/* Clean intrinsic media nodes, 2026-07-28. */
.nody-node-panel.has-media-result {
  padding-top: 26px;
}

.nody-node-panel.has-media-result > .node-head,
.nody-node-panel.node-image.has-media-result > .node-head {
  height: 22px;
  padding-inline: 2px;
}

.nody-node-panel.has-media-result .node-title-wrap {
  gap: 5px;
}

.nody-node-panel.has-media-result .node-type-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: color-mix(in srgb, var(--nody-muted) 78%, transparent);
}

.nody-node-panel.has-media-result .node-type-icon::before {
  content: none;
  display: none;
}

.nody-node-panel.has-media-result .node-type-icon i {
  display: block;
  font-size: 14px;
  font-weight: 400;
}

.nody-node-panel.has-media-result .node-title-meta {
  display: block;
}

.nody-node-panel.has-media-result .node-type {
  display: none;
}

.nody-node-panel.has-media-result .node-title {
  color: color-mix(in srgb, var(--nody-text) 74%, var(--nody-muted));
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.2;
}

.nody-node-panel.has-media-result > .node-body,
.nody-node-panel.node-image.has-media-result > .node-body {
  height: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nody-text) 52%, transparent);
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 2px 8px rgba(31, 45, 66, 0.08);
}

.nody-node-panel.has-media-result.selected > .node-body,
.nody-node-panel.node-image.has-media-result.selected > .node-body {
  border-color: color-mix(in srgb, var(--nody-selected) 82%, var(--nody-text));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nody-selected) 34%, transparent), 0 3px 12px rgba(31, 45, 66, 0.1);
}

.nody-node-panel.has-media-result .nody-card-surface.has-media,
.nody-node-panel.has-media-result .node-media-shell {
  background: transparent;
}

.nody-node-panel.has-media-result .nody-card-surface img.node-media,
.nody-node-panel.has-media-result .nody-card-surface video.node-media {
  object-fit: contain;
}

.nody-node-panel.has-media-result .node-media-preview {
  cursor: grab;
}

.nody-node-panel.has-media-result .node-media-preview:active {
  cursor: grabbing;
}

.nody-node-panel.has-media-result .node-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.2);
  color: rgba(27, 37, 51, 0.88);
  cursor: pointer;
  opacity: 0.96;
  transform: translate(-50%, -50%);
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.nody-node-panel.has-media-result .node-video-play i {
  margin-left: 2px;
  font-size: 20px;
}

.nody-node-panel.has-media-result .node-video-play.is-loading i {
  animation: node-video-loading-pulse 720ms ease-in-out infinite alternate;
}

@keyframes node-video-loading-pulse {
  from { opacity: 0.38; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

.nody-node-panel.has-media-result .node-video-play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.nody-node-panel.has-media-result button.node-video-play:not(:disabled):active {
  transform: translate(-50%, -50%) scale(var(--press-scale));
}

@media (prefers-reduced-motion: reduce) {
  .nody-node-panel.has-media-result button.node-video-play:not(:disabled):active {
    transform: translate(-50%, -50%);
  }
}

.nody-node-panel.has-media-result .node-video-play:focus-visible {
  outline: 2px solid var(--nody-selected);
  outline-offset: 3px;
}

.nody-node-panel.has-media-result .node-video-play.is-playing {
  opacity: 0;
  pointer-events: none;
}

.nody-node-panel.has-media-result .node-media-download,
.nody-node-panel.has-media-result .node-media-edit {
  opacity: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.72));
}

.nody-node-panel.has-media-result:hover .node-media-download,
.nody-node-panel.has-media-result.selected .node-media-download,
.nody-node-panel.has-media-result .node-media-download:focus-visible,
.nody-node-panel.has-media-result:hover .node-media-edit,
.nody-node-panel.has-media-result.selected .node-media-edit,
.nody-node-panel.has-media-result .node-media-edit:focus-visible {
  opacity: 0.92;
}

.nody-node-panel.has-media-result .node-downstream-add {
  opacity: 0;
}

.nody-node-panel.has-media-result:hover .node-downstream-add,
.nody-node-panel.has-media-result.selected .node-downstream-add,
.nody-node-panel.has-media-result .node-downstream-add:focus-visible {
  opacity: 0.72;
}

.nody-media-dimensions {
  position: absolute;
  top: calc(100% + 5px);
  right: 2px;
  z-index: 2;
  color: color-mix(in srgb, var(--nody-muted) 66%, transparent);
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.nody-media-dimensions:empty,
.nody-node-panel.selected .nody-media-dimensions {
  display: none;
}

.nody-node-panel.has-media-result > .node-editor-panel {
  top: calc(100% + 26px);
}

.nody-node-panel.has-media-result.panel-up > .node-editor-panel {
  top: auto;
  bottom: calc(100% + 26px);
}

[data-theme="dark"] .nody-node-panel.has-media-result > .node-body,
[data-theme="dark"] .nody-node-panel.node-image.has-media-result > .node-body {
  border-color: color-mix(in srgb, var(--nody-text) 42%, transparent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}

@media (hover: none), (pointer: coarse) {
  .nody-node-panel.has-media-result .node-media-download,
  .nody-node-panel.has-media-result .node-media-edit {
    opacity: 0.82;
  }
}

/* Asset library stays inside the canvas as a focused, reversible modal. */
.asset-page {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(18px, 4vw, 52px);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.2), transparent 38%),
    rgba(22, 31, 45, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

.asset-page-card {
  width: min(1180px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 72px));
  min-height: 520px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(245, 249, 255, 0.94));
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  padding: 22px;
}

.asset-page .asset-page-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  margin: 0;
  padding: 0 2px;
}

.asset-page .asset-page-head > div:first-child {
  display: grid;
  gap: 3px;
}

.asset-page .asset-page-head .modal-kicker {
  margin: 0 0 2px;
  color: #0b8f8a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.asset-page .asset-page-head strong {
  color: #101927;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.asset-page .asset-page-head > div:first-child > span:last-child {
  margin-top: 3px;
  color: #718096;
  font-size: 12px;
  font-weight: 650;
}

.asset-page .asset-page-actions {
  align-items: center;
}

.asset-page .asset-page-actions .ghost-button {
  min-height: 38px;
  gap: 7px;
  border-color: rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.asset-page-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: #415067;
  font-size: 18px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.asset-page-close:hover {
  color: #111827;
  background: #fff;
  transform: translateY(-1px);
}

.asset-page .asset-tabs {
  width: fit-content;
  margin: 0;
  border-color: rgba(148, 163, 184, 0.22);
  border-radius: 13px;
  background: rgba(238, 243, 249, 0.82);
}

.asset-page .asset-tabs button {
  border-radius: 9px;
}

.asset-page .asset-tabs button.active,
.asset-page .asset-group.active {
  border-color: rgba(8, 145, 139, 0.18);
  color: #086e6a;
  background: rgba(15, 187, 178, 0.12);
  box-shadow: none;
}

.asset-page .asset-workspace {
  min-height: 0;
  height: 100%;
  grid-template-columns: 190px minmax(360px, 1fr) 260px;
  gap: 12px;
  overflow: hidden;
}

.asset-page .asset-library-tree,
.asset-page .asset-main-panel,
.asset-page .asset-preview {
  height: 100%;
  min-height: 0;
  border-color: rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(30, 41, 59, 0.055);
}

.asset-page .asset-library-tree,
.asset-page .asset-preview {
  overflow: auto;
}

.asset-page .asset-main-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.asset-page .asset-main-top {
  min-height: 66px;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 300px);
  border-bottom-color: rgba(148, 163, 184, 0.2);
}

.asset-page .asset-grid {
  min-height: 0;
  overflow: auto;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
}

.asset-batch-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--nody-muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-batch-select-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nody-text);
  cursor: pointer;
}

.asset-batch-select-all input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--nody-selected);
}

.asset-selected-count {
  white-space: nowrap;
}

.asset-batch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.asset-batch-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--nody-selected) 30%, var(--nody-border));
  color: #fff;
  background: var(--nody-selected);
}

.asset-batch-download:hover:not(:disabled) {
  color: #fff;
  background: color-mix(in srgb, var(--nody-selected) 88%, #000);
}

.asset-batch-download[aria-busy="true"] i {
  animation: spin 800ms linear infinite;
}

.asset-card-shell {
  position: relative;
  min-width: 0;
}

.asset-card-shell .asset-card {
  width: 100%;
  height: 100%;
}

.asset-card-shell.is-batch-selected .asset-card {
  border-color: color-mix(in srgb, var(--nody-selected) 72%, var(--nody-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nody-selected) 15%, transparent);
}

.asset-card-selector {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  cursor: pointer;
}

.asset-card-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.asset-card-selector > span:not(.sr-only) {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(100, 116, 139, 0.46);
  border-radius: 8px;
  color: transparent;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

.asset-card-selector input:checked + span {
  border-color: var(--nody-selected);
  color: #fff;
  background: var(--nody-selected);
}

.asset-card-selector input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--nody-selected) 28%, transparent);
  outline-offset: 2px;
}

.asset-page .asset-search {
  border-color: rgba(148, 163, 184, 0.28);
  border-radius: 11px;
  background: rgba(241, 245, 249, 0.8);
}

[data-theme="dark"] .asset-page {
  background:
    radial-gradient(circle at 50% 16%, rgba(47, 128, 132, 0.16), transparent 38%),
    rgba(3, 7, 13, 0.68);
}

[data-theme="dark"] .asset-page-card {
  border-color: rgba(105, 122, 148, 0.34);
  background: linear-gradient(145deg, rgba(21, 28, 38, 0.98), rgba(13, 18, 26, 0.96));
  box-shadow: 0 36px 96px rgba(0, 0, 0, 0.58);
}

[data-theme="dark"] .asset-page .asset-page-head strong {
  color: #f6f8fb;
}

[data-theme="dark"] .asset-page .asset-library-tree,
[data-theme="dark"] .asset-page .asset-main-panel,
[data-theme="dark"] .asset-page .asset-preview,
[data-theme="dark"] .asset-page-close,
[data-theme="dark"] .asset-page .asset-page-actions .ghost-button {
  border-color: rgba(90, 107, 132, 0.42);
  background: rgba(20, 27, 37, 0.84);
}

@media (max-width: 980px) {
  .asset-page {
    padding: 18px;
  }

  .asset-page-card {
    width: calc(100vw - 36px);
    height: calc(100vh - 36px);
    min-height: 0;
    border-radius: 22px;
    padding: 18px;
  }

  .asset-page .asset-workspace {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .asset-page .asset-preview {
    display: none;
  }
}

@media (max-width: 700px) {
  .asset-page {
    padding: 0;
  }

  .asset-page-card {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    padding: 16px;
  }

  .asset-page .asset-page-head {
    gap: 12px;
  }

  .asset-page .asset-page-actions .ghost-button {
    width: 38px;
    padding: 0;
  }

  .asset-page .asset-page-actions .ghost-button span {
    display: none;
  }

  .asset-page .asset-page-head > div:first-child > span:last-child,
  .asset-page .asset-library-tree {
    display: none;
  }

  .asset-page .asset-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-page .asset-main-top {
    grid-template-columns: 1fr;
  }

  .asset-batch-toolbar {
    flex-wrap: wrap;
  }

  .asset-batch-actions {
    width: 100%;
    margin-left: 0;
  }
}

.app-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(35, 198, 190, 0.13), transparent 34%),
    var(--canvas-bg, #f7f9fc);
  color: var(--text, #172130);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.app-boot-screen img {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(16, 42, 66, 0.12);
}

.app-boot-screen strong {
  margin-top: 6px;
  font-size: 15px;
}

.app-boot-screen span {
  color: var(--muted, #7b8797);
  font-size: 11px;
}

body.app-booting .app-shell {
  visibility: hidden;
}

.app-boot-screen[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}

[data-theme="dark"] .app-boot-screen {
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 197, 186, 0.12), transparent 34%),
    #0b111a;
  color: #eef7fa;
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-screen {
    transition: none;
  }
}

/* Direct-input edge semantics and retained generation history. */
.edge-group.visual-only .edge-path {
  stroke-dasharray: 8 7;
  opacity: 0.52;
}

.edge-group.visual-only.selected .edge-path,
.edge-group.visual-only:hover .edge-path {
  opacity: 0.9;
}

.edge-input-popover {
  position: absolute;
  z-index: 28;
  width: 244px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 28%, var(--nody-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--nody-card) 96%, transparent);
  box-shadow: 0 18px 44px rgba(20, 31, 48, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.edge-input-popover-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.edge-input-popover-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.edge-input-popover-head strong {
  color: var(--nody-text);
  font-size: 12px;
}

.edge-input-popover-head span {
  overflow: hidden;
  color: var(--nody-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-input-popover-head button {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nody-muted);
}

.edge-input-popover > label:not(.edge-input-popover-check) {
  display: grid;
  gap: 5px;
}

.edge-input-popover > label > span {
  color: var(--nody-muted);
  font-size: 10px;
  font-weight: 680;
}

.edge-input-popover select {
  width: 100%;
  height: 34px;
  border: 1px solid var(--nody-border);
  border-radius: 9px;
  background: var(--nody-card-muted);
  color: var(--nody-text);
  padding: 0 9px;
  font-size: 11px;
}

.edge-input-popover-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edge-input-popover-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--nody-selected);
}

.edge-input-popover-check span {
  color: var(--nody-text) !important;
  font-weight: 560 !important;
}

.edge-input-popover-delete {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--nody-border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--danger) 7%, var(--nody-card));
  color: var(--danger);
  font-size: 11px;
  font-weight: 720;
}

.inspect-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--nody-text);
  font-size: 12px;
  line-height: 1.5;
}

.inspect-checkbox input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--nody-selected);
}

.node-result-stack {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-right: 7px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nody-card) 84%, transparent);
  box-shadow: 0 7px 20px rgba(20, 31, 48, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.node-result-stack-item {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  margin-left: -8px;
  padding: 0;
  border: 2px solid var(--nody-card);
  border-radius: 9px;
  background: var(--nody-card-muted);
  color: var(--nody-muted);
  box-shadow: 0 2px 8px rgba(20, 31, 48, 0.16);
  transform: rotate(-2deg);
}

.node-result-stack-item:first-child {
  margin-left: 2px;
  transform: rotate(-5deg);
}

.node-result-stack-item:last-of-type {
  transform: rotate(2deg);
}

.node-result-stack-item.is-current {
  z-index: 2;
  border-color: var(--nody-selected);
}

.node-result-stack-item img,
.node-result-history-item img,
.node-result-video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.node-result-stack-item > span:not(.node-result-video-thumb) {
  position: absolute;
  right: 2px;
  bottom: 1px;
  min-width: 13px;
  border-radius: 5px;
  background: rgba(10, 18, 29, 0.76);
  color: #fff;
  font-size: 8px;
  font-weight: 760;
  line-height: 13px;
  text-align: center;
}

.node-result-video-thumb {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--nody-card-muted), color-mix(in srgb, var(--nody-selected) 12%, var(--nody-card)));
}

.node-result-stack-count {
  min-width: max-content;
  margin-left: 6px;
  color: var(--nody-text);
  font-size: 10px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.node-result-history {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nody-border);
  background: color-mix(in srgb, var(--nody-card-muted) 66%, transparent);
}

.node-result-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.node-result-history-head strong {
  color: var(--nody-text);
  font-size: 11px;
}

.node-result-history-head span {
  color: var(--nody-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.node-result-history-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: thin;
}

.node-result-history-item {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--nody-border);
  border-radius: 10px;
  background: var(--nody-card);
}

.node-result-history-item.is-current {
  border-color: var(--nody-selected);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nody-selected) 22%, transparent);
}

.node-result-history-item small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 16px;
  border-radius: 6px;
  background: rgba(10, 18, 29, 0.74);
  color: #fff;
  font-size: 9px;
  font-weight: 760;
  line-height: 16px;
  text-align: center;
}

[data-theme="dark"] .node-result-stack {
  border-color: rgba(90, 107, 132, 0.54);
  background: color-mix(in srgb, var(--nody-card) 88%, transparent);
}

/* Workspace polish: native iconography and a compact bilingual control. */
.nody-node.node-video:not(.has-media-result) .node-type-icon {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, #13a99a 24%, var(--nody-border));
  border-radius: 9px;
  background: color-mix(in srgb, #13a99a 9%, var(--nody-card));
  box-shadow: none;
  color: #078f83;
}

.nody-node.node-video:not(.has-media-result) .node-type-icon::before {
  content: none;
  display: none;
}

.nody-node.node-video:not(.has-media-result) .node-type-icon i {
  display: block;
  font-size: 17px;
  font-weight: 400;
}

.top-actions > .language-toggle-chip {
  min-width: 82px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--nody-border) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nody-card) 93%, transparent);
  color: var(--nody-text);
  box-shadow: 0 8px 20px rgba(31, 45, 66, 0.08);
  padding: 0 12px;
}

.top-actions > .language-toggle-chip::before {
  display: none;
}

.top-actions > .language-toggle-chip i {
  color: var(--nody-muted);
  font-size: 17px;
}

.top-actions > .language-toggle-chip strong {
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.top-actions > .language-toggle-chip:hover,
.top-actions > .language-toggle-chip:focus-visible {
  border-color: color-mix(in srgb, var(--nody-selected) 44%, var(--nody-border));
  background: color-mix(in srgb, var(--nody-selected) 8%, var(--nody-card));
  color: var(--nody-selected);
  outline: none;
}

[data-theme="dark"] .top-actions > .language-toggle-chip {
  box-shadow: none;
}

@media (max-width: 1120px) {
  .top-actions > .language-toggle-chip {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .top-actions > .language-toggle-chip strong {
    display: none;
  }
}

/* Canvas continuity pass: autosave, ordered references, and a blue asset library. */
.top-actions > .autosave-chip {
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.top-actions > .autosave-chip i {
  color: var(--nody-selected);
  font-size: 16px;
}

.top-actions > .autosave-chip[aria-busy="true"] i {
  animation: spin 900ms linear infinite;
}

.top-actions > .autosave-chip:disabled {
  cursor: default;
  opacity: 1;
  filter: none;
}

.top-actions > .autosave-chip::before {
  content: none !important;
  display: none !important;
}

.video-prompt-editor {
  position: relative;
  min-width: 0;
}

.node-editor-panel .video-prompt-editor {
  order: 10;
}

.node-editor-panel .video-prompt-editor .workbench-editor-field {
  order: initial;
}

.video-prompt-reference-strip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin: 10px 14px 0;
  padding: 0 0 2px;
  scrollbar-width: thin;
}

.node-editor-panel.is-expanded .video-prompt-reference-strip {
  display: none;
}

.video-prompt-reference-chip {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--nody-border);
  border-radius: 10px;
  background: var(--nody-card-muted);
  padding: 0;
  box-shadow: 0 4px 12px rgba(27, 42, 67, 0.08);
}

.image-prompt-reference-chip {
  cursor: default;
}

.video-prompt-reference-chip:hover,
.video-prompt-reference-chip:focus-visible {
  border-color: color-mix(in srgb, var(--nody-selected) 56%, var(--nody-border));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nody-selected) 14%, transparent);
}

.video-prompt-reference-thumb,
.video-prompt-reference-thumb img {
  width: 100%;
  height: 100%;
  display: block;
}

.video-prompt-reference-thumb img {
  object-fit: cover;
}

.video-prompt-reference-thumb > span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid var(--nody-card);
  border-radius: 50%;
  background: var(--nody-text);
  color: var(--nody-card);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.video-prompt-reference-empty {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nody-muted);
  font-size: 11px;
  font-weight: 650;
}

.video-prompt-reference-empty i {
  color: var(--nody-selected);
  font-size: 16px;
}

.video-prompt-input-shell {
  position: relative;
  min-width: 0;
  display: block;
}

.video-mention-menu {
  position: absolute;
  z-index: 60;
  top: 10px;
  left: 10px;
  width: min(280px, calc(100% - 20px));
  max-height: 272px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 20%, var(--nody-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--nody-card) 96%, transparent);
  box-shadow: 0 18px 44px rgba(20, 31, 46, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.video-mention-menu[hidden] {
  display: none;
}

.video-mention-options {
  max-height: 218px;
  overflow-y: auto;
  padding: 6px;
}

.video-mention-option {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nody-text);
  padding: 6px 8px;
  text-align: left;
}

.video-mention-option:hover,
.video-mention-option.active,
.video-mention-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--nody-selected) 11%, var(--nody-card-muted));
}

.video-mention-option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nody-selected) 60%, transparent);
  outline-offset: -2px;
}

.video-mention-option-thumb {
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--nody-border);
  border-radius: 8px;
  background: var(--nody-card-muted);
}

.video-mention-option-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-mention-option > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

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

/* User center V2 */
.account-page {
  --account-accent: #0d9f94;
  --account-accent-soft: #e8f7f5;
  --account-blue: #3478f6;
  --account-blue-soft: #edf4ff;
  --account-surface: rgba(255, 255, 255, 0.92);
  --account-surface-strong: #ffffff;
  --account-border: #dce5ec;
  --account-border-strong: #cbd7df;
  --account-text: #17212b;
  --account-muted: #596779;
  --account-subtle: #596779;
  --account-danger: #d84b4b;
  --account-danger-soft: #fff1f1;
  --account-shadow: 0 18px 48px rgba(31, 49, 67, 0.08);
  overflow: auto;
  background: #f4f7fb;
  color: var(--account-text);
}

.account-hub-shell {
  width: min(1440px, calc(100% - 48px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 24px;
}

.account-hub-directory,
.account-hub-panel,
.account-surface,
.account-feature-block,
.account-identity-band,
.account-storage-hero,
.account-security-banner {
  border: 1px solid var(--account-border);
  background: var(--account-surface);
  box-shadow: var(--account-shadow);
}

.account-hub-directory {
  position: sticky;
  top: 24px;
  align-self: start;
  min-height: calc(100vh - 48px);
  padding: 20px 14px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
}

.account-hub-profile {
  min-width: 0;
  padding: 4px 6px 19px;
  border-bottom: 1px solid var(--account-border);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.account-hub-avatar {
  grid-row: 1 / 4;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  overflow: hidden;
}

.account-avatar-clean,
.account-avatar-control,
.top-account-avatar {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.top-account-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 8px;
}

.account-avatar-clean img,
.account-avatar-control img,
.top-account-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.brand-avatar-shell.has-user-avatar {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.account-hub-profile > strong {
  overflow: hidden;
  color: var(--account-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-mention-option strong {
  font-size: 12px;
  font-weight: 780;
}

.video-mention-option small {
  color: var(--nody-muted);
  font-size: 10px;
  font-weight: 620;
}

.video-mention-option > i {
  color: var(--nody-muted);
  font-size: 14px;
}

.video-mention-empty {
  min-height: 70px;
  display: grid;
  place-items: center;
  color: var(--nody-muted);
  padding: 12px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.video-mention-help {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--nody-border);
  background: var(--nody-card-muted);
  color: var(--nody-muted);
  padding: 0 10px;
  font-size: 9px;
  font-weight: 650;
}

.video-mention-help span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.video-mention-help kbd {
  min-width: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--nody-border);
  border-radius: 5px;
  background: var(--nody-card);
  padding: 1px 4px;
  color: var(--nody-text);
  font: inherit;
}

.video-reference-section {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 18%, var(--nody-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--nody-selected) 3%, var(--nody-card));
  padding: 12px;
}

.video-reference-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-hub-profile > small {
  overflow: hidden;
  color: var(--account-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-hub-profile > span:last-child {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--account-muted);
  font-size: 11px;
  min-width: 0;
}

.account-hub-profile b,
.account-hub-profile em {
  overflow: hidden;
  font-style: normal;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-hub-profile i {
  color: var(--account-accent);
}

.account-hub-nav {
  margin-top: 18px;
  display: grid;
  gap: 6px;
}

.account-hub-nav button,
.account-hub-directory-foot button {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--account-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.account-hub-nav button:hover,
.account-hub-directory-foot button:hover {
  background: var(--account-accent-soft);
  color: var(--account-accent);
}

.account-hub-nav button.active {
  background: var(--account-accent-soft);
  color: var(--account-accent);
}

.account-hub-nav button i,
.account-hub-directory-foot button i {
  width: 18px;
  font-size: 18px;
}

.account-hub-directory-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--account-border);
}

.account-hub-directory-foot button:hover {
  background: var(--account-danger-soft);
  color: var(--account-danger);
}

.account-hub-workspace {
  min-width: 0;
}

.account-hub-head {
  min-height: 76px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.account-hub-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.account-hub-head > div > span {
  color: var(--account-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.account-hub-head > div > strong {
  color: var(--account-text);
  font-size: 26px;
  letter-spacing: -0.03em;
}

.account-hub-head p {
  margin: 0;
  color: var(--account-muted);
  font-size: 13px;
}

.account-hub-panel {
  display: none;
  min-height: calc(100vh - 142px);
  padding: 22px;
  border-radius: 22px;
}

.account-hub-panel.active {
  display: block;
}

.account-identity-band {
  padding: 18px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.account-identity-band > div:first-child,
.account-feature-heading,
.account-storage-hero > div:first-child {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.account-identity-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

.account-avatar-control {
  position: relative;
  padding: 0;
  cursor: pointer;
}

.account-avatar-control > span {
  position: absolute;
  inset: auto 6px 6px;
  min-height: 24px;
  border-radius: 8px;
  background: rgba(10, 22, 30, 0.72);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.account-avatar-control:hover > span,
.account-avatar-control:focus-visible > span {
  opacity: 1;
  transform: translateY(0);
}

.account-avatar-control:focus-visible {
  outline: 2px solid var(--account-accent);
  outline-offset: 3px;
}

.account-identity-band > div:first-child > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.account-name-display {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-name-display > button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.account-name-form {
  min-width: min(390px, 60vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.account-name-form.hidden {
  display: none;
}

.account-name-form input {
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--account-border-strong);
  border-radius: 11px;
  background: var(--account-surface-strong);
  color: var(--account-text);
  font: inherit;
}

.account-name-form .primary-button,
.account-name-form .ghost-button {
  min-height: 38px;
  padding-inline: 12px;
}

.account-overview-email {
  overflow: hidden;
  color: var(--account-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity-band > div:first-child strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-badge-row b,
.account-badge-row em {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.account-plan-summary {
  padding-left: 22px;
  border-left: 1px solid var(--account-border);
  display: grid;
  gap: 2px;
  text-align: right;
}

.account-plan-summary span,
.account-plan-summary small {
  color: var(--account-muted);
  font-size: 11px;
}

.account-plan-summary strong {
  color: var(--account-text);
  font-size: 15px;
}

.account-overview-metrics {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.account-feature-block,
.account-surface,
.account-storage-hero,
.account-security-banner {
  border-radius: 18px;
}

.account-feature-block {
  min-height: 174px;
  padding: 18px;
  box-shadow: none;
}

.account-feature-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-feature-heading > div > span,
.account-storage-hero > div:first-child > div > span {
  color: var(--account-muted);
  font-size: 11px;
}

.account-feature-heading strong,
.account-storage-hero strong {
  font-size: 18px;
}

.account-feature-heading strong b,
.account-storage-hero strong b {
  font: inherit;
}

.account-feature-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  display: grid;
  place-items: center;
  font-size: 21px;
}

.account-feature-icon.blue {
  background: var(--account-blue-soft);
  color: var(--account-blue);
}

.account-credit-facts {
  min-height: 42px;
  margin: 17px 0 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--account-muted);
  font-size: 11px;
}

.account-checkin-strip {
  min-height: 54px;
  margin-top: 16px;
  padding: 8px 9px 8px 14px;
  border-radius: 13px;
  background: var(--account-accent-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-reference-section-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-checkin-strip > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 2px 7px;
}

.account-checkin-strip i {
  grid-row: 1 / 3;
  color: var(--account-accent);
  font-size: 18px;
}

.account-checkin-strip b {
  color: var(--account-text);
  font-size: 11px;
}

.account-checkin-strip small {
  color: var(--account-muted);
  font-size: 9px;
}

.account-checkin-strip .primary-button {
  min-height: 36px;
  flex: 0 0 auto;
  padding-inline: 13px;
}

.account-checkin-strip .primary-button:disabled {
  background: transparent;
  color: var(--account-accent);
  box-shadow: inset 0 0 0 1px rgba(24, 170, 159, 0.28);
  cursor: default;
  opacity: 1;
}

.account-credit-facts b {
  color: var(--account-text);
}

.account-inline-actions {
  display: flex;
  gap: 8px;
}

.account-page .primary-button {
  border-color: var(--account-accent);
  background: var(--account-accent);
  color: #fff;
}

.account-inline-actions .primary-button {
  min-width: 132px;
}

.account-inline-actions button,
.account-surface-head button,
.account-verification-status button {
  min-height: 34px;
}

.account-storage-summary .storage-meter,
.account-storage-hero .storage-meter {
  height: 8px;
  margin: 28px 0 20px;
  border-radius: 999px;
  background: var(--account-blue-soft);
  overflow: hidden;
}

.account-storage-summary .storage-meter span,
.account-storage-hero .storage-meter span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--account-blue);
  transition: width 260ms ease;
}

.account-storage-summary .storage-meter.storage-warning span,
.account-storage-hero .storage-meter.storage-warning span {
  background: #d99a18;
}

.account-storage-summary .storage-meter.storage-danger span,
.account-storage-hero .storage-meter.storage-danger span {
  background: #e36a2e;
}

.account-storage-summary .storage-meter.storage-full span,
.account-storage-hero .storage-meter.storage-full span {
  background: var(--danger);
}

.account-overview-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
  gap: 16px;
}

.account-surface {
  padding: 18px;
  box-shadow: none;
}

.account-surface-head {
  min-height: 38px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.account-surface-head > div {
  display: grid;
  gap: 3px;
}

.account-surface-head strong {
  font-size: 14px;
}

.account-surface-head span {
  color: var(--account-muted);
  font-size: 10px;
}

.account-surface-head > button,
.account-text-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--account-accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.account-overview-side {
  display: grid;
  gap: 16px;
}

.account-overview-side .account-surface {
  min-height: 142px;
}

.account-overview-side .account-surface-head > i {
  color: var(--account-accent);
  font-size: 19px;
}

.account-summary-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--account-muted);
  font-size: 11px;
}

.account-summary-row b {
  color: var(--account-accent);
}

.account-summary-row input[role="switch"] {
  width: 38px;
  height: 20px;
  flex: 0 0 auto;
  position: relative;
  appearance: none;
  border: 1px solid var(--account-border-strong);
  border-radius: 999px;
  background: var(--account-border);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.account-summary-row input[role="switch"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--account-surface-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}

.account-summary-row input[role="switch"]:checked {
  border-color: var(--account-accent);
  background: var(--account-accent);
}

.account-summary-row input[role="switch"]:checked::before {
  transform: translateX(18px);
}

.account-text-action {
  padding: 8px 0 0;
}

.account-current-device {
  min-height: 45px;
}

.account-current-device > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
}

.account-current-device i {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--account-blue-soft);
  color: var(--account-blue);
  display: grid;
  place-items: center;
}

.account-current-device strong,
.account-current-device span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-current-device strong {
  font-size: 11px;
}

.account-current-device span,
.account-empty {
  color: var(--account-muted);
  font-size: 10px;
}

.account-overview-rights {
  margin-top: 16px;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid var(--account-border);
  border-radius: 16px;
  background: var(--account-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-overview-rights a {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--account-border-strong);
  border-radius: 10px;
  color: var(--account-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.account-overview-rights a:hover {
  color: var(--account-accent);
}

.account-overview-rights a.danger:hover {
  color: var(--account-danger);
}

.account-ledger-table {
  width: 100%;
  overflow-x: auto;
}

.account-ledger-head,
.account-ledger-row {
  min-width: 680px;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr 1.15fr 0.8fr 0.8fr 0.7fr;
  gap: 12px;
  align-items: center;
}

.account-ledger-compact .account-ledger-head,
.account-ledger-compact .account-ledger-row {
  min-width: 440px;
  grid-template-columns: 0.9fr 1.25fr 1fr 0.7fr 0.7fr;
}

.account-ledger-head {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(123, 145, 162, 0.09);
  color: var(--account-muted);
  font-size: 9px;
  font-weight: 700;
}

.account-ledger-row {
  min-height: 50px;
  padding: 0 10px;
  border-bottom: 1px solid var(--account-border);
  color: var(--account-muted);
  font-size: 10px;
}

.account-ledger-row:last-child {
  border-bottom: 0;
}

.account-ledger-row strong,
.account-ledger-row b {
  color: var(--account-text);
  font-size: 11px;
}

.account-ledger-row .positive {
  color: var(--account-accent);
}

.account-ledger-row .negative {
  color: var(--account-danger);
}

.account-ledger-status {
  width: max-content;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}

.account-detail-metrics {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.account-detail-metrics > div {
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--account-border);
  border-radius: 15px;
  background: var(--account-surface-strong);
  display: grid;
  align-content: center;
  gap: 4px;
}

.account-detail-metrics span,
.account-detail-metrics small {
  color: var(--account-muted);
  font-size: 10px;
}

.account-detail-metrics strong {
  font-size: 18px;
}

.account-detail-metrics strong b {
  font: inherit;
}

.account-order-surface,
.account-security-grid,
.account-detail-note {
  margin-top: 16px;
}

.account-order-list {
  display: grid;
  gap: 8px;
}

.account-order-row {
  min-height: 52px;
  padding: 9px 11px;
  border: 1px solid var(--account-border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  color: var(--account-muted);
  font-size: 10px;
}

.account-order-row > div {
  display: grid;
  gap: 2px;
}

.account-order-row strong {
  color: var(--account-text);
  font-size: 11px;
}

.account-storage-hero {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: center;
}

.account-storage-hero .storage-meter {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

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

.account-storage-expansion {
  position: relative;
  overflow: hidden;
  min-height: 176px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--account-blue) 26%, var(--account-border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--account-blue) 15%, transparent) 0 16%, transparent 17%),
    linear-gradient(135deg, color-mix(in srgb, var(--account-blue-soft) 74%, white), rgba(255, 255, 255, 0.96));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 28px;
  align-items: center;
}

.account-storage-expansion::after {
  content: '';
  position: absolute;
  right: -48px;
  bottom: -78px;
  width: 190px;
  height: 190px;
  border: 1px solid color-mix(in srgb, var(--account-blue) 18%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.account-storage-expansion-copy,
.account-storage-expansion-offer {
  position: relative;
  z-index: 1;
}

.account-storage-expansion-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--account-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.account-storage-expansion h3 {
  margin: 8px 0 6px;
  color: var(--account-text);
  font-size: 20px;
  letter-spacing: -0.03em;
}

.account-storage-expansion p,
.account-storage-expansion-offer > span {
  margin: 0;
  color: var(--account-muted);
  font-size: 11px;
  line-height: 1.7;
}

.account-storage-expansion-status {
  width: fit-content;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--account-muted);
  font-size: 10px;
  font-weight: 700;
}

.account-storage-expansion-status.pending {
  color: #9a5c00;
  background: #fff6dc;
}

.account-storage-expansion-status.active {
  color: #087a5f;
  background: #e7f8f2;
}

.account-storage-expansion-offer {
  padding-left: 24px;
  border-left: 1px solid color-mix(in srgb, var(--account-blue) 16%, var(--account-border));
  display: grid;
  gap: 10px;
  justify-items: start;
}

.account-storage-expansion-price {
  display: flex;
  align-items: baseline;
  color: var(--account-text);
}

.account-storage-expansion-price > span {
  margin-right: 2px;
  font-size: 14px;
  font-weight: 800;
}

.account-storage-expansion-price strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.account-storage-expansion-price small {
  margin-left: 7px;
  color: var(--account-muted);
  font-size: 10px;
}

.account-storage-expansion-offer > span b {
  color: var(--account-text);
}

.account-storage-expansion-offer .primary-button {
  min-width: 150px;
}

.account-storage-type {
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--account-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 10px;
  align-content: center;
}

.account-storage-type > i {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--account-blue-soft);
  color: var(--account-blue);
  display: grid;
  place-items: center;
  font-size: 19px;
}

.account-storage-type strong {
  font-size: 12px;
}

.account-storage-type span {
  color: var(--account-muted);
  font-size: 10px;
}

.account-detail-note {
  color: var(--account-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}

.account-security-banner {
  padding: 20px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.account-security-banner > span {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  display: grid;
  place-items: center;
  font-size: 23px;
}

.account-security-banner > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.account-security-banner small,
.account-security-banner p,
.account-verification-status span {
  margin: 0;
  color: var(--account-muted);
  font-size: 10px;
}

.account-security-banner strong {
  font-size: 15px;
}

.account-verification-status {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.account-security-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 16px;
}

.account-session-list {
  display: grid;
  gap: 8px;
}

.account-session-row {
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--account-border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.account-session-row > i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--account-blue-soft);
  color: var(--account-blue);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.account-session-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.video-reference-section-head strong {
  color: var(--nody-text);
  font-size: 12px;
  font-weight: 780;
}

.video-reference-section-head small {
  color: var(--nody-muted);
  font-size: 10px;
  line-height: 1.45;
}

.video-reference-requirement {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 24%, var(--nody-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--nody-selected) 7%, var(--nody-card));
  padding: 8px 10px;
  color: var(--nody-muted);
  font-size: 10px;
  line-height: 1.55;
}

.video-reference-requirement i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--nody-selected);
  font-size: 13px;
}

.video-reference-section-head > button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--nody-border);
  border-radius: 9px;
  background: var(--nody-card);
  color: var(--nody-muted);
  padding: 0 9px;
  font-size: 10px;
  font-weight: 700;
}

.video-reference-section-head > button:hover:not(:disabled),
.video-reference-section-head > button:focus-visible {
  border-color: color-mix(in srgb, var(--nody-selected) 46%, var(--nody-border));
  color: var(--nody-selected);
  outline: none;
}

.video-reference-section .video-frame-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-reference-section .video-frame-slot {
  min-width: 0;
  min-height: 174px;
  display: grid;
  grid-template-rows: auto minmax(88px, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--nody-border);
  border-radius: 12px;
  background: var(--nody-card);
  padding: 9px;
}

.video-frame-slot-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.video-reference-order {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--nody-selected);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.video-frame-slot-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--nody-text);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-session-row strong,
.account-session-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-reference-token {
  min-height: 22px;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 28%, var(--nody-border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--nody-selected) 8%, var(--nody-card));
  color: var(--nody-selected);
  padding: 0 6px;
  font-size: 9px;
  font-weight: 760;
}

.video-frame-slot-media {
  min-height: 88px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--nody-border-strong) 78%, transparent);
  border-radius: 9px;
  background: var(--nody-card-muted);
}

.video-frame-slot-media img {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
}

.video-frame-slot .video-frame-empty {
  min-height: 88px;
  gap: 6px;
  color: var(--nody-muted);
  padding: 10px;
  text-align: center;
}

.video-frame-slot-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-frame-slot-actions button {
  min-width: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--nody-border);
  border-radius: 8px;
  background: var(--nody-card);
  color: var(--nody-muted);
  padding: 0 7px;
  font-size: 9px;
  font-weight: 700;
}

.video-frame-slot-actions button:hover:not(:disabled),
.video-frame-slot-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--nody-selected) 46%, var(--nody-border));
  color: var(--nody-selected);
  outline: none;
}

.video-frame-slot-actions button:last-child:has(.ph-x) {
  width: 28px;
  margin-left: auto;
  padding: 0;
}

.video-frame-slot.disabled {
  opacity: 0.58;
}

.node-editor-panel:not(.is-expanded) .video-workbench .video-reference-section {
  display: none;
}

.node-editor-panel.is-expanded .video-workbench .video-reference-section {
  display: grid;
}

.asset-page-card {
  width: min(1340px, calc(100vw - 72px));
  height: min(780px, calc(100vh - 72px));
}

.asset-page .asset-page-head .modal-kicker {
  color: var(--nody-selected);
}

.asset-page .asset-page-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-page .asset-page-actions .ghost-button {
  min-width: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.asset-page .asset-page-actions .ghost-button i,
.asset-page .asset-page-actions .ghost-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.asset-page .asset-page-actions .ghost-button[aria-busy="true"] i {
  animation: spin 800ms linear infinite;
}

.asset-page .asset-tabs button.active,
.asset-page .asset-group.active {
  border-color: color-mix(in srgb, var(--nody-selected) 24%, var(--nody-border));
  color: var(--nody-selected);
  background: color-mix(in srgb, var(--nody-selected) 10%, var(--nody-card));
}

.asset-page .asset-group {
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--nody-text);
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.2;
}

.asset-page .asset-group > span {
  display: inline-flex;
  align-items: center;
}

.asset-page .asset-group > strong {
  display: grid;
  place-items: center;
  line-height: 1;
}

.asset-page .asset-main-top {
  align-items: center;
  padding: 14px 16px;
}

.asset-page .asset-main-top > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.asset-page .asset-main-top strong,
.asset-page .asset-panel-title strong {
  color: var(--nody-text);
  font-weight: 780;
  line-height: 1.25;
}

.asset-page .asset-main-top span,
.asset-page .asset-panel-title span {
  color: var(--nody-muted);
  line-height: 1.35;
}

.asset-page .asset-grid {
  gap: 14px;
  padding: 16px;
}

.asset-page .asset-grid.is-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}

[data-theme="dark"] .asset-page .asset-tabs,
[data-theme="dark"] .asset-page .asset-search {
  border-color: rgba(90, 107, 132, 0.42);
  background: rgba(20, 27, 37, 0.88);
}

[data-theme="dark"] .asset-page .asset-tabs button {
  color: var(--nody-muted);
  background: transparent;
}

[data-theme="dark"] .asset-page .asset-tabs button.active,
[data-theme="dark"] .asset-page .asset-group.active {
  border-color: color-mix(in srgb, var(--nody-selected) 32%, var(--nody-border));
  color: #65aafc;
  background: color-mix(in srgb, var(--nody-selected) 18%, var(--nody-card));
}

[data-theme="dark"] .asset-page .asset-search {
  color: var(--nody-text);
}

.asset-empty-state {
  width: min(430px, 100%);
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  margin: auto;
  padding: 28px;
  text-align: center;
}

.asset-empty-state .asset-upload-tile {
  width: min(260px, 100%);
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  margin: 0;
  border-color: color-mix(in srgb, var(--nody-selected) 26%, var(--nody-border));
  color: var(--nody-text);
  text-align: center;
}

.asset-empty-state .asset-upload-tile i {
  color: var(--nody-selected);
  font-size: 24px;
}

.asset-empty-state .asset-upload-tile strong {
  color: var(--nody-text);
  font-size: 14px;
  line-height: 1.3;
}

.asset-empty-state .asset-upload-tile span,
.asset-empty-state .asset-empty-wide {
  max-width: 240px;
  color: var(--nody-muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.asset-empty-state .asset-empty-wide {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}

@media (max-width: 1120px) {
  .top-actions > .autosave-chip {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .top-actions > .autosave-chip span {
    display: none;
  }

  .video-reference-section .video-frame-slots {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .asset-page-card {
    width: 100vw;
    height: 100vh;
  }

  .asset-empty-state {
    min-height: 260px;
    padding: 18px;
  }
}

.account-session-row strong {
  font-size: 11px;
}

.account-session-row span {
  color: var(--account-muted);
  font-size: 10px;
}

.account-session-row button {
  min-height: 30px;
  padding: 0 9px;
}

.account-password-surface .password-form {
  display: grid;
  gap: 12px;
}

.account-preferences-surface {
  max-width: 880px;
}

.account-rights-surface {
  width: 100%;
  max-width: none;
}

.account-preference-list {
  display: grid;
}

.account-preference-list > label {
  min-height: 82px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--account-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-preference-list > label > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
}

.account-preference-list > label i {
  grid-row: 1 / 3;
  color: var(--account-accent);
  font-size: 21px;
}

.account-preference-list > label b {
  font-size: 12px;
}

.account-preference-list > label small {
  color: var(--account-muted);
  font-size: 10px;
}

.account-preference-list input[role="switch"] {
  width: 38px;
  height: 20px;
  flex: 0 0 auto;
  position: relative;
  appearance: none;
  border: 1px solid var(--account-border-strong);
  border-radius: 999px;
  background: var(--account-border);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.account-preference-list input[role="switch"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--account-surface-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}

.account-preference-list input[role="switch"]:checked {
  border-color: var(--account-accent);
  background: var(--account-accent);
}

.account-preference-list input[role="switch"]:checked::before {
  transform: translateX(18px);
}

.account-preference-actions {
  padding-top: 16px;
}

.account-right-row {
  min-height: 82px;
  padding: 14px 2px;
  border-top: 1px solid var(--account-border);
  color: var(--account-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-decoration: none;
}

.account-right-row > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
}

.account-right-row > span > i {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--account-accent-soft);
  color: var(--account-accent);
  display: grid;
  place-items: center;
}

.account-right-row small {
  color: var(--account-muted);
  font-size: 10px;
}

.account-right-row.danger b,
.account-right-row.danger > i {
  color: var(--account-danger);
}

.account-right-row.danger > span > i {
  background: var(--account-danger-soft);
  color: var(--account-danger);
}

[data-theme="dark"] .account-page {
  --account-accent: #28c7bb;
  --account-accent-soft: rgba(40, 199, 187, 0.12);
  --account-blue: #72a7ff;
  --account-blue-soft: rgba(82, 139, 241, 0.14);
  --account-surface: rgba(17, 29, 38, 0.94);
  --account-surface-strong: #111d26;
  --account-border: #253947;
  --account-border-strong: #355062;
  --account-text: #edf6f8;
  --account-muted: #98aab5;
  --account-subtle: #758995;
  --account-danger: #ff8585;
  --account-danger-soft: rgba(255, 106, 106, 0.11);
  --account-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  background: #09131b;
}

[data-theme="dark"] .account-page .ghost-button,
[data-theme="dark"] .account-page .modal-field input,
[data-theme="dark"] .account-page .account-name-form input {
  border-color: var(--account-border);
  background: rgba(9, 19, 27, 0.56);
  color: var(--account-text);
}

[data-theme="dark"] .account-page .account-ledger-head {
  background: rgba(137, 166, 184, 0.09);
}

@media (max-width: 1180px) {
  .account-hub-shell {
    width: min(1060px, calc(100% - 32px));
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
  }

  .account-overview-grid,
  .account-security-grid {
    grid-template-columns: 1fr;
  }

  .account-overview-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .account-hub-shell {
    width: min(720px, calc(100% - 24px));
    margin: 12px auto;
    grid-template-columns: 1fr;
  }

  .account-hub-directory {
    position: static;
    min-height: 0;
  }

  .account-hub-profile,
  .account-hub-directory-foot {
    display: none;
  }

  .account-hub-nav {
    margin: 0;
    display: flex;
    overflow-x: auto;
  }

  .account-hub-nav button {
    width: auto;
    flex: 0 0 auto;
  }

  .account-hub-panel {
    min-height: 0;
    padding: 16px;
  }

  .account-identity-band,
  .account-overview-metrics,
  .account-overview-side,
  .account-storage-breakdown,
  .account-storage-expansion {
    grid-template-columns: 1fr;
  }

  .account-storage-expansion-offer {
    padding: 18px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--account-blue) 16%, var(--account-border));
    border-left: 0;
  }

  .account-identity-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-plan-summary {
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid var(--account-border);
    border-left: 0;
    text-align: left;
  }

  .account-overview-metrics {
    display: grid;
  }

  .account-security-banner {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .account-verification-status {
    grid-column: 1 / -1;
    justify-items: start;
  }
}

@media (max-width: 620px) {
  .account-hub-head {
    align-items: flex-start;
  }

  .account-hub-head > div > strong {
    font-size: 22px;
  }

  .account-hub-head p,
  #accountBackBtn {
    display: none;
  }

  .account-detail-metrics {
    grid-template-columns: 1fr;
  }

  .account-storage-hero {
    grid-template-columns: 1fr;
  }

  .account-storage-hero .storage-meter {
    grid-column: 1;
  }
}

/* Align the desktop account view with the confirmed creator-center composition. */
.app-shell.subpage-open .account-page {
  padding: 80px 32px 32px;
}

.account-hub-shell {
  width: 100%;
  margin: 24px auto 0;
}

.account-hub-directory {
  min-height: calc(100vh - 128px);
}

.account-hub-head {
  display: none;
}

.account-hub-panel {
  min-height: calc(100vh - 128px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-identity-band {
  min-height: 170px;
  padding: 26px;
}

.account-identity-avatar {
  width: 88px;
  height: 88px;
  border-radius: 24px;
}

.account-identity-band > div:first-child strong {
  font-size: 24px;
}

.account-badge-row b,
.account-badge-row em {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 11px;
}

.account-plan-summary {
  min-width: 200px;
  padding-left: 34px;
}

.account-plan-summary strong {
  font-size: 22px;
}

.account-feature-block {
  min-height: 220px;
  padding: 26px;
}

.account-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  font-size: 30px;
}

.account-feature-heading strong,
.account-storage-hero strong {
  font-size: 23px;
}

.account-credit-facts {
  margin: 24px 0 18px;
}

.account-overview-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(350px, 0.94fr);
}

.account-recent-usage {
  min-height: 360px;
}

.account-overview-side .account-surface {
  min-height: 172px;
}

@media (max-width: 1180px) {
  .app-shell.subpage-open .account-page {
    padding-inline: 20px;
  }

  .account-hub-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

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

@media (max-width: 900px) {
  .app-shell.subpage-open .account-page {
    padding: calc(var(--topbar-height) + 18px) 12px 24px;
  }

  .account-hub-shell {
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .account-hub-directory,
  .account-hub-panel {
    min-height: 0;
  }

  .account-hub-workspace,
  .account-overview-grid,
  .account-overview-side,
  .account-recent-usage,
  .account-surface {
    min-width: 0;
  }

  .account-overview-grid,
  .account-overview-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-identity-avatar {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .account-identity-band > div:first-child strong {
    font-size: 17px;
  }

  .account-feature-block {
    min-height: 176px;
    padding: 18px;
  }
}

@media (max-width: 620px) {
  .app-shell.subpage-open .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 10px;
    gap: 8px;
  }

  .app-shell.subpage-open .topbar-context {
    min-width: 0;
  }

  .app-shell.subpage-open .topbar-context > i,
  .app-shell.subpage-open .topbar-context .title-block > span,
  .app-shell.subpage-open .topbar-context #saveState,
  .app-shell.subpage-open .top-actions #versionHistoryBtn,
  .app-shell.subpage-open .top-actions #rechargeBtn,
  .app-shell.subpage-open .top-actions #saveBtn {
    display: none;
  }

  .app-shell.subpage-open .topbar-context strong {
    max-width: 120px;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell.subpage-open .top-actions {
    gap: 0;
  }

  .account-checkin-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .account-checkin-strip .primary-button {
    width: 100%;
  }

  .account-name-form {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }

  .account-name-form input {
    grid-column: 1 / -1;
  }

  .account-hub-nav {
    scrollbar-width: none;
  }

  .account-hub-nav::-webkit-scrollbar {
    display: none;
  }
}

/* V1.19 · large-canvas virtualization and selection migration */
.canvas-create-card {
  width: min(820px, calc(100vw - 32px));
  max-height: min(900px, calc(100vh - 32px));
  overflow: auto;
}

.canvas-create-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.canvas-create-mode > button {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: var(--ink, #122126);
  text-align: left;
  border: 1px solid rgba(67, 91, 105, 0.16);
  border-radius: 14px;
  background: rgba(245, 249, 252, 0.86);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.canvas-create-mode > button > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #148f87;
  font-size: 20px;
  border-radius: 11px;
  background: rgba(20, 143, 135, 0.1);
}

.canvas-create-mode > button span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.canvas-create-mode > button strong {
  font-size: 14px;
}

.canvas-create-mode > button small {
  color: var(--muted, #70808a);
  font-size: 11px;
  font-weight: 500;
}

.canvas-create-mode > button:hover:not(:disabled),
.canvas-create-mode > button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(20, 143, 135, 0.42);
  outline: none;
}

.canvas-create-mode > button.active {
  border-color: #148f87;
  background: rgba(20, 143, 135, 0.08);
  box-shadow: 0 0 0 3px rgba(20, 143, 135, 0.09);
}

.canvas-source-fields {
  display: grid;
  gap: 11px;
}

.canvas-source-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.canvas-source-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.canvas-source-toolbar strong {
  font-size: 13px;
}

.canvas-source-toolbar small {
  color: var(--muted, #70808a);
  font-size: 11px;
}

.canvas-source-toolbar > div:last-child {
  display: flex;
  gap: 7px;
}

.canvas-source-preview {
  position: relative;
  height: 330px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid rgba(68, 91, 106, 0.18);
  border-radius: 16px;
  background-color: #f6f9fc;
  background-image: radial-gradient(circle, rgba(83, 112, 131, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.canvas-source-preview:focus-visible {
  outline: 3px solid rgba(20, 143, 135, 0.22);
  outline-offset: 2px;
}

.canvas-source-preview-world {
  position: absolute;
  inset: 0;
}

.canvas-source-node {
  position: absolute;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 6px 8px;
  color: #263942;
  border: 1px solid rgba(79, 100, 114, 0.24);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 16px rgba(42, 62, 73, 0.09);
  cursor: pointer;
}

.canvas-source-node.type-group {
  z-index: 1;
  display: block;
  color: transparent;
  border-style: dashed;
  border-color: rgba(44, 107, 128, 0.3);
  background: rgba(215, 235, 243, 0.18);
  box-shadow: none;
}

.canvas-source-node > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #148f87;
  border-radius: 6px;
  background: rgba(20, 143, 135, 0.1);
}

.canvas-source-node > span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-source-node.selected {
  z-index: 4;
  border-color: #168f87;
  box-shadow: 0 0 0 3px rgba(22, 143, 135, 0.18), 0 7px 20px rgba(24, 94, 99, 0.12);
}

.canvas-source-node.type-group.selected {
  z-index: 1;
  background: rgba(22, 143, 135, 0.08);
}

.canvas-source-selection-box {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border: 1px solid #168f87;
  border-radius: 5px;
  background: rgba(22, 143, 135, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.76) inset;
}

.canvas-source-loading,
.canvas-source-empty {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  gap: 8px;
  color: var(--muted, #70808a);
  font-size: 13px;
  background: rgba(246, 249, 252, 0.86);
}

.canvas-source-preview.is-loading .canvas-source-loading {
  display: flex;
}

.canvas-source-preview.is-loading .canvas-source-loading i {
  animation: canvas-transfer-spin 800ms linear infinite;
}

.canvas-source-empty {
  display: grid;
}

.canvas-source-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted, #70808a);
  font-size: 11px;
}

.canvas-transfer-progress {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid rgba(20, 143, 135, 0.18);
  border-radius: 13px;
  background: rgba(20, 143, 135, 0.055);
}

.canvas-transfer-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.canvas-transfer-progress-head span {
  color: #148f87;
  font-weight: 800;
}

.canvas-transfer-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(54, 82, 96, 0.12);
}

.canvas-transfer-progress-track > span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #168f87;
  transition: width 220ms ease;
}

.canvas-transfer-progress.is-busy .canvas-transfer-progress-track > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  animation: canvas-transfer-scan 1s ease-in-out infinite;
}

.canvas-selection-menu {
  position: fixed;
  z-index: 180;
  width: 270px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(70, 90, 103, 0.18);
  border-radius: 15px;
  background: rgba(251, 253, 254, 0.97);
  box-shadow: 0 18px 44px rgba(35, 54, 64, 0.22);
  backdrop-filter: blur(18px) saturate(1.15);
}

.canvas-selection-menu header {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px 9px;
  color: var(--muted, #70808a);
  font-size: 11px;
}

.canvas-selection-menu header strong {
  color: #148f87;
}

.canvas-selection-menu > button {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--ink, #122126);
  text-align: left;
  border: 0;
  border-radius: 11px;
  background: transparent;
}

.canvas-selection-menu > button:hover:not(:disabled),
.canvas-selection-menu > button:focus-visible {
  outline: none;
  background: rgba(20, 143, 135, 0.08);
}

.canvas-selection-menu > button:disabled {
  opacity: 0.42;
}

.canvas-selection-menu > button > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #148f87;
  font-size: 18px;
  border-radius: 10px;
  background: rgba(20, 143, 135, 0.1);
}

.canvas-selection-menu > button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.canvas-selection-menu > button strong {
  font-size: 13px;
}

.canvas-selection-menu > button small {
  color: var(--muted, #70808a);
  font-size: 10px;
  line-height: 1.4;
}

.node-media-lightweight {
  width: 100%;
  height: 100%;
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 18px;
  color: #45606d;
  text-align: center;
  border: 1px dashed rgba(57, 102, 118, 0.28);
  border-radius: inherit;
  background: rgba(230, 240, 244, 0.66);
}

.node-media-lightweight > i {
  font-size: 28px;
  color: #168f87;
}

.node-media-lightweight > span {
  display: grid;
  gap: 3px;
}

.node-media-lightweight strong {
  font-size: 12px;
}

.node-media-lightweight small {
  color: #71838d;
  font-size: 9px;
}

.node-media-lightweight.compact {
  min-height: 68px;
}

.nody-node.is-lightweight .nody-card-surface {
  background: rgba(239, 246, 248, 0.92);
}

@keyframes canvas-transfer-scan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

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

[data-theme="dark"] .canvas-create-mode > button,
[data-theme="dark"] .canvas-source-node,
[data-theme="dark"] .canvas-selection-menu {
  color: #e8f4f4;
  border-color: rgba(164, 203, 207, 0.18);
  background: rgba(18, 33, 39, 0.96);
}

[data-theme="dark"] .canvas-create-mode > button.active {
  border-color: #31c8bd;
  background: rgba(31, 176, 166, 0.13);
}

[data-theme="dark"] .canvas-source-preview {
  background-color: #13242b;
  background-image: radial-gradient(circle, rgba(147, 185, 194, 0.19) 1px, transparent 1px);
}

[data-theme="dark"] .canvas-source-node.type-group {
  background: rgba(56, 126, 139, 0.1);
}

[data-theme="dark"] .canvas-source-loading,
[data-theme="dark"] .canvas-source-empty {
  background: rgba(19, 36, 43, 0.9);
}

[data-theme="dark"] .node-media-lightweight,
[data-theme="dark"] .nody-node.is-lightweight .nody-card-surface {
  color: #bed2d5;
  background: rgba(25, 55, 63, 0.86);
}

@media (max-width: 720px) {
  .canvas-create-mode {
    grid-template-columns: 1fr;
  }

  .canvas-source-preview {
    height: 270px;
  }

  .canvas-source-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-transfer-progress-track > span,
  .canvas-create-mode > button {
    transition: none;
  }

  .canvas-transfer-progress.is-busy .canvas-transfer-progress-track > span::after,
  .canvas-source-preview.is-loading .canvas-source-loading i {
    animation: none;
  }
}

/* Mobile canvas shell: keep the work area full-width and move navigation below it. */
@media (max-width: 700px) {
  :root {
    --sidebar-width: 0px;
    --topbar-height: 64px;
  }

  .app-shell,
  .app-shell.subpage-open {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 68px;
  }

  .app-main,
  .main {
    grid-column: 1;
    min-width: 0;
  }

  .app-sidebar,
  .app-shell.subpage-open .app-sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 180;
    width: 100%;
    height: 68px;
    min-height: 68px;
    display: flex;
    flex-direction: row;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--sidebar-bg) 96%, transparent);
    box-shadow: 0 -12px 34px rgba(31, 45, 66, 0.09);
  }

  body.ecommerce-studio-open .app-sidebar,
  body.ecommerce-studio-open .app-shell.subpage-open .app-sidebar {
    display: none;
  }

  body.ecommerce-studio-open .app-shell,
  body.ecommerce-studio-open .app-shell.subpage-open {
    padding-bottom: 0;
  }

  .sidebar-brand,
  .sidebar-legal-links {
    display: none;
  }

  .sidebar-nav {
    width: 100%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 8px;
    scrollbar-width: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar-workspaces,
  .sidebar-actions {
    width: auto;
    min-width: max-content;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    padding: 0;
  }

  .app-sidebar .workspace-menu {
    width: auto;
    display: flex;
    grid-template-columns: none;
    gap: 4px;
  }

  .app-sidebar .workspace-trigger,
  .app-sidebar .workspace-menu .icon-button,
  .sidebar-actions > button,
  .app-sidebar .top-account {
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 11px;
    padding: 0 3px;
    text-align: center;
  }

  .app-sidebar .workspace-trigger {
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .app-sidebar .workspace-trigger > i,
  .sidebar-actions > button i {
    grid-row: auto;
    font-size: 19px;
  }

  .app-sidebar .workspace-trigger span,
  .app-sidebar .workspace-trigger strong,
  .sidebar-actions > button span {
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 430px) {
    .sidebar-nav {
      gap: 2px;
      padding-inline: 4px;
    }

    .app-sidebar .workspace-menu {
      gap: 2px;
    }

    .app-sidebar .sidebar-actions {
      gap: 2px;
    }

    .app-sidebar .workspace-trigger,
    .app-sidebar .workspace-menu .icon-button,
    .sidebar-actions > button,
    .app-sidebar .top-account {
      width: calc((100vw - 22px) / 8);
      min-width: calc((100vw - 22px) / 8);
    }
  }

  .mobile-node-editor-host {
    position: fixed;
    inset: auto 8px max(calc(76px + env(safe-area-inset-bottom, 0px)), calc(var(--mobile-canvas-keyboard-inset, 0px) + 8px));
    z-index: 170;
    display: block;
    pointer-events: none;
  }

  .mobile-node-editor-host.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: auto;
  }

  /* Keep zoom in its own row, outside every editor's input and scroll area. */
  .mobile-node-editor-host > .minimap-actions {
    position: relative;
    inset: auto;
    flex: 0 0 44px;
    z-index: auto;
  }

  .mobile-node-editor-host > .node-editor-panel {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none !important;
    min-height: 0;
    max-height: min(62dvh, 560px, calc(var(--mobile-canvas-visible-height, 100dvh) - 164px)) !important;
    margin: 0 !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mobile-node-editor-host .node-editor-resize {
    display: none;
  }

  .mobile-node-editor-host .node-editor-panel-head {
    min-height: 56px;
    gap: 8px;
  }

  .mobile-node-editor-host .node-editor-panel-actions {
    gap: 5px;
  }

  .mobile-node-editor-host .node-editor-panel-head .node-editor-icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .mobile-node-editor-host .node-editor-panel-head .node-editor-run {
    width: auto;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding-inline: 12px;
  }

  .app-sidebar .workspace-trigger span {
    display: none;
  }

  .app-sidebar .workspace-menu .nav-list {
    position: fixed;
    inset: auto 8px 76px;
    width: min(320px, calc(100vw - 16px));
    max-height: min(58vh, 420px);
    overflow: auto;
  }

  #themeToggleBtn {
    margin-top: 0;
  }

  .app-sidebar .top-account {
    grid-template-columns: 1fr;
  }

  .app-sidebar .top-account #accountEmail {
    max-width: 52px;
    font-size: 9px;
  }

  .topbar {
    width: 100%;
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 6px;
    padding: 0 8px;
  }

  .topbar-context {
    display: none;
  }

  .topbar-context > i,
  .topbar-context .title-block > span,
  #saveState,
  .top-actions > .history-control {
    display: none;
  }

  .top-actions > button.language-toggle-chip strong {
    display: block;
    font-size: 9px;
  }

  .topbar-context .title-block strong {
    max-width: 132px;
    font-size: 12px;
  }

  .top-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    gap: 5px;
  }

  .top-actions > button:not(.account-button) {
    height: 44px;
    min-height: 44px;
  }

  #runChainBtn {
    min-width: 44px;
    width: 44px;
    padding-inline: 0;
  }

  #runChainBtn span {
    display: none;
  }

  .top-actions > .save-control {
    height: 46px;
    min-width: 70px;
    min-height: 46px;
  }

  .save-control > button {
    height: 44px;
    min-height: 44px;
  }

  .toolbar-shell {
    bottom: 78px;
  }

  .minimap-actions {
    left: 12px;
    bottom: 146px;
  }

  .toast-region {
    top: 72px;
    right: 8px;
    width: calc(100vw - 16px);
  }

  .node-editor-panel,
  .node-editor-panel-prompt,
  .node-editor-panel-llm,
  .node-editor-panel-image,
  .node-editor-panel-video {
    --node-editor-width: calc(100vw - 16px);
    width: var(--node-editor-width);
    max-width: var(--node-editor-width);
  }
}

/* Compact node identity and anchored workbench, 2026-07-30. */
.nody-node .node-title-wrap {
  max-width: calc(100% - 34px);
  gap: 6px;
}

.nody-node .node-title-meta {
  min-width: 0;
  display: block;
}

.nody-node .node-type {
  display: none;
}

.nody-node:not(.has-media-result) .node-type-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 22%, var(--nody-border));
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 9%, var(--nody-card));
  box-shadow: none;
}

.nody-node:not(.has-media-result) .node-type-icon::before {
  content: none;
  display: none;
}

.nody-node:not(.has-media-result) .node-type-icon i {
  display: block;
  color: currentColor;
  font-size: 14px;
  font-weight: 400;
}

.nody-node.node-prompt:not(.has-media-result) .node-type-icon,
.nody-node.node-loop:not(.has-media-result) .node-type-icon {
  color: #66758b;
}

.nody-node.node-llm:not(.has-media-result) .node-type-icon {
  color: #7659d9;
}

.nody-node.node-image:not(.has-media-result) .node-type-icon {
  color: #2d7fe8;
}

.nody-node.node-video:not(.has-media-result) .node-type-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-radius: 7px;
  color: #078f83;
}

.nody-node.node-director:not(.has-media-result) .node-type-icon,
.nody-node.node-output:not(.has-media-result) .node-type-icon {
  color: #b17218;
}

.nody-node .node-title {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.node-rename-input {
  width: min(210px, 100%);
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--nody-selected) 58%, var(--nody-border));
  border-radius: 7px;
  background: var(--nody-card);
  color: var(--nody-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nody-selected) 12%, transparent);
  padding: 0 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  outline: none;
}

.node-llm .nody-card-placeholder.has-text-result {
  display: block;
  padding: 44px 18px 16px;
  text-align: left;
}

.node-llm .nody-card-placeholder.has-text-result > p {
  height: 100%;
  max-height: none;
  overflow: auto;
  padding: 0 4px 0 0;
}

.sidebar-brand .brand-mark.brand-avatar-shell {
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.sidebar-brand .brand-avatar-shell:not(.has-user-avatar) .brand-avatar {
  border-radius: 50%;
  object-position: center 23%;
  transform: scale(1.04);
  filter: url("#yunzhi-avatar-remove-white");
}

[data-theme="dark"] .sidebar-brand .brand-mark.brand-avatar-shell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Unified large-text editor for canvas node prompts and long-form fields. */
.expandable-node-text,
.inspect-expandable-text,
.video-prompt-input-shell {
  position: relative;
  min-width: 0;
}

.expandable-node-text > textarea,
.video-prompt-input-shell > textarea,
.inspect-expandable-text > textarea {
  padding-right: 132px;
}

.expand-text-editor-button {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nody-border) 82%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--nody-card) 92%, transparent);
  color: var(--nody-muted);
  padding: 0;
  box-shadow: 0 4px 12px rgba(31, 45, 66, 0.08);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.expand-text-editor-button i {
  font-size: 15px;
}

.expand-text-editor-button.is-labeled {
  width: auto;
  min-width: 104px;
  grid-auto-flow: column;
  gap: 6px;
  padding: 0 10px;
  border-color: color-mix(in srgb, var(--nody-selected) 24%, var(--nody-border));
  background: color-mix(in srgb, var(--nody-card) 96%, var(--nody-selected) 4%);
  color: color-mix(in srgb, var(--nody-text) 82%, var(--nody-selected));
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.expand-text-editor-button:hover,
.expand-text-editor-button:focus-visible {
  border-color: color-mix(in srgb, var(--nody-selected) 48%, var(--nody-border));
  background: color-mix(in srgb, var(--nody-selected) 9%, var(--nody-card));
  color: var(--nody-selected);
  outline: none;
  transform: translateY(-1px);
}

.node-editor-panel .workbench-editor-field > .expand-text-editor-button,
.node-editor-panel .nody-primary-editor > .expand-text-editor-button {
  top: 12px;
  right: 14px;
}

.node-editor-panel .llm-instruction > .expand-text-editor-button {
  top: 7px;
  right: 12px;
}

.node-editor-panel .video-prompt-input-shell > .expand-text-editor-button {
  top: 8px;
  right: 24px;
}

.node-editor-panel .video-prompt-input-shell > textarea {
  padding-right: 144px;
}

.director-text-editor > .expand-text-editor-button {
  top: 9px;
  right: 9px;
}

.inspect-expandable-text {
  display: grid;
  gap: 6px;
}

.inspect-expandable-text > .expand-text-editor-button {
  top: 25px;
  right: 7px;
}

body.text-editor-open {
  overflow: hidden;
}

.text-editor-modal {
  z-index: 520;
  padding: 28px;
  background: rgba(18, 24, 34, 0.46);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.text-editor-card {
  width: min(900px, calc(100vw - 56px));
  height: min(640px, calc(100vh - 64px));
  min-height: 420px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nody-border-strong) 72%, transparent);
  border-radius: 18px;
  background: var(--nody-card);
  color: var(--nody-text);
  box-shadow: 0 32px 80px rgba(19, 31, 49, 0.28), 0 4px 16px rgba(19, 31, 49, 0.12);
}

.text-editor-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px 14px;
}

.text-editor-card > header > div {
  min-width: 0;
}

.text-editor-card h2 {
  margin: 0;
  color: var(--nody-text);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.01em;
}

.text-editor-card header p {
  margin: 6px 0 0;
  color: var(--nody-muted);
  font-size: 12px;
  line-height: 1.5;
}

.text-editor-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nody-muted);
  padding: 0;
  cursor: pointer;
}

.text-editor-close:hover,
.text-editor-close:focus-visible {
  background: var(--nody-card-muted);
  color: var(--nody-text);
  outline: none;
}

.text-editor-input-frame {
  min-height: 0;
  margin: 0 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nody-border-strong) 72%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--nody-card-muted) 52%, var(--nody-card));
  box-shadow: inset 0 1px 2px rgba(31, 45, 66, 0.04);
}

.text-editor-input-frame:focus-within {
  border-color: color-mix(in srgb, var(--nody-selected) 72%, var(--nody-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nody-selected) 14%, transparent), inset 0 1px 2px rgba(31, 45, 66, 0.04);
}

.text-editor-input-frame textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--nody-text);
  padding: 17px 18px;
  font: inherit;
  font-size: 15px;
  line-height: 1.72;
  outline: none;
}

.text-editor-input-frame textarea::placeholder {
  color: color-mix(in srgb, var(--nody-muted) 76%, transparent);
}

.text-editor-card > footer {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 16px;
}

.text-editor-card > footer > span {
  min-width: 0;
  overflow: hidden;
  color: var(--nody-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#textEditorRunBtn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--nody-selected);
  color: #fff;
  padding: 0;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--nody-selected) 30%, transparent);
  cursor: pointer;
}

#textEditorRunBtn i {
  font-size: 18px;
  transform: rotate(-90deg);
}

#textEditorRunBtn:hover:not(:disabled),
#textEditorRunBtn:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--nody-selected) 88%, #071426);
  outline: none;
  transform: translateY(-1px);
}

#textEditorRunBtn:disabled {
  background: color-mix(in srgb, var(--nody-selected) 25%, var(--nody-card-muted));
  color: color-mix(in srgb, var(--nody-selected) 62%, #fff);
  box-shadow: none;
  cursor: wait;
}

[data-theme="dark"] .expand-text-editor-button {
  background: color-mix(in srgb, var(--nody-card-muted) 86%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .text-editor-modal {
  background: rgba(1, 8, 17, 0.72);
}

[data-theme="dark"] .text-editor-card {
  box-shadow: 0 34px 88px rgba(0, 0, 0, 0.56), 0 4px 18px rgba(0, 0, 0, 0.32);
}

@media (max-width: 720px) {
  .text-editor-modal {
    padding: 12px;
  }

  .text-editor-card {
    width: calc(100vw - 24px);
    height: min(680px, calc(100vh - 24px));
    min-height: 360px;
    border-radius: 15px;
  }

  .text-editor-card > header {
    padding: 16px 16px 12px;
  }

  .text-editor-input-frame {
    margin: 0 14px;
  }

  .text-editor-card > footer {
    padding: 10px 16px 14px;
  }
}

/* V1.47 · 公开案例 */
.top-actions > .publish-canvas-button {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--accent);
}

.top-actions > .publish-canvas-button:hover:not(:disabled),
.top-actions > .publish-canvas-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

.canvas-publish-modal {
  z-index: 540;
  padding: 20px;
}

.canvas-publish-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(780px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 40px));
  max-width: 780px;
  max-height: 780px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 8px rgba(12, 19, 31, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.canvas-publish-head {
  position: relative;
  padding: 24px 28px 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.canvas-publish-body {
  min-height: 0;
  padding: 20px 28px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.canvas-publish-card .modal-kicker {
  display: block;
  margin-bottom: 4px;
  padding: 0;
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.canvas-publish-card h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.02em;
}

.canvas-publish-intro {
  max-width: 650px;
  margin: 7px 40px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.canvas-publish-status {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: var(--text);
  font-size: 13px;
}

.canvas-publish-status[data-tone="success"] {
  border-color: color-mix(in srgb, #13936f 30%, var(--border));
  background: color-mix(in srgb, #13936f 8%, var(--panel));
  color: #0f7258;
}

.canvas-publish-status[data-tone="warning"] {
  border-color: color-mix(in srgb, #d9931a 34%, var(--border));
  background: color-mix(in srgb, #d9931a 9%, var(--panel));
  color: #96620f;
}

.canvas-publish-status[data-tone="error"] {
  border-color: color-mix(in srgb, #dc4d53 34%, var(--border));
  background: color-mix(in srgb, #dc4d53 8%, var(--panel));
  color: #b33038;
}

.canvas-publish-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr);
  gap: 12px 15px;
}

.canvas-publish-card .modal-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.canvas-publish-card .modal-field small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.canvas-publish-card .modal-field input,
.canvas-publish-card .modal-field select,
.canvas-publish-card .modal-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.canvas-publish-card .modal-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.6;
}

.canvas-publish-card .modal-field input:focus,
.canvas-publish-card .modal-field select:focus,
.canvas-publish-card .modal-field textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}

.canvas-publish-description-field {
  grid-column: 1 / -1;
}

.canvas-publish-cover-section {
  margin-top: 18px;
}

.canvas-publish-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.canvas-publish-section-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.canvas-publish-section-head strong {
  font-size: 13px;
}

.canvas-publish-section-head small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.canvas-publish-section-head > button {
  min-height: 38px;
  flex: 0 0 auto;
}

.canvas-publish-cover-grid {
  display: grid;
  grid-auto-columns: 124px;
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 10px;
  margin-top: 10px;
  padding: 3px 3px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
}

.canvas-publish-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--soft);
  cursor: pointer;
  scroll-snap-align: start;
}

.canvas-publish-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-publish-cover > span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(13, 23, 39, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.canvas-publish-cover.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.canvas-publish-cover.selected > span {
  background: var(--accent);
}

.canvas-publish-cover-empty {
  width: min(420px, calc(100vw - 112px));
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--soft) 72%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.canvas-publish-cover-empty i {
  color: var(--accent);
  font-size: 24px;
}

.canvas-publish-video-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.canvas-publish-video-meta > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.canvas-publish-video-meta strong {
  font-size: 13px;
}

.canvas-publish-video-meta span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.canvas-publish-video-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.canvas-publish-video-empty > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-size: 22px;
}

.canvas-publish-video-empty > div {
  display: grid;
  gap: 4px;
}

.canvas-publish-video-empty strong {
  font-size: 12px;
}

.canvas-publish-video-empty span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.canvas-publish-video-preview {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--soft) 72%, var(--panel));
}

.canvas-publish-video-preview video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 180px;
  border-radius: 10px;
  object-fit: contain;
  background: #0d1522;
}

.canvas-publish-video-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
}

.canvas-publish-video-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-publish-video-meta > div:last-child {
  display: flex;
  gap: 8px;
}

.canvas-publish-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  cursor: pointer;
}

.canvas-publish-consent input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.canvas-publish-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 28px 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: var(--panel);
}

.canvas-publish-actions .danger {
  border-color: color-mix(in srgb, #d4474f 30%, var(--border));
  color: #c53740;
}

#canvasUnpublishBtn { grid-column: 1; }
.canvas-publish-actions > span { grid-column: 2; }
#canvasPublishCancelBtn { grid-column: 3; }
#canvasPublishSubmitBtn { grid-column: 4; }

[data-theme="dark"] .canvas-publish-status[data-tone="success"] { color: #5fd0aa; }
[data-theme="dark"] .canvas-publish-status[data-tone="warning"] { color: #f1c16d; }
[data-theme="dark"] .canvas-publish-status[data-tone="error"] { color: #ff9499; }

@media (max-width: 720px) {
  .canvas-publish-modal { padding: 10px; }
  .canvas-publish-card {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    border-radius: 14px;
  }
  .canvas-publish-head { padding: 20px 18px 15px; }
  .canvas-publish-body { padding: 18px 18px 22px; }
  .canvas-publish-intro { margin-right: 32px; }
  .canvas-publish-fields { grid-template-columns: 1fr; }
  .canvas-publish-description-field { grid-column: auto; }
  .canvas-publish-section-head {
    align-items: flex-start;
    gap: 10px;
  }
  .canvas-publish-cover-grid { grid-auto-columns: 112px; }
  .canvas-publish-video-preview {
    grid-template-columns: 1fr;
  }
  .canvas-publish-video-preview video {
    max-height: 240px;
  }
  .canvas-publish-actions {
    grid-template-columns: 1fr auto;
    padding: 12px 18px 14px;
  }
  .canvas-publish-actions > span { display: none; }
  #canvasPublishCancelBtn { grid-column: 1; grid-row: 1; justify-self: end; }
  #canvasPublishSubmitBtn { grid-column: 2; grid-row: 1; }
  #canvasUnpublishBtn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
/* Team spaces and realtime collaboration */
.space-switcher {
  display: grid;
  gap: 8px;
  margin: 0 8px 10px;
  padding: 8px;
  border: 1px solid var(--border, rgba(120, 130, 160, .2));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, #fff) 88%, transparent);
}
.space-switcher[hidden], .space-switcher.hidden, .team-space-controls.hidden { display: none !important; }
.space-switcher-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.space-switcher-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 700;
}
.space-switcher-tabs button.active { background: var(--accent, #6d5dfc); color: #fff; }
.team-space-controls { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
.team-space-controls select { min-width: 0; border-radius: 9px; padding: 0 8px; background: var(--panel, #fff); color: inherit; }
.collaboration-shell { position: relative; display: flex; }
.collaboration-shell.hidden { display: none !important; }
.collaboration-status { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 9px; border: 1px solid var(--border, #e4e7ec); border-radius: 999px; background: color-mix(in srgb, var(--panel, #fff) 92%, transparent); color: inherit; font: inherit; font-size: 12px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.collaboration-status:hover,
.collaboration-status:focus-visible,
.collaboration-status[aria-expanded="true"] { border-color: color-mix(in srgb, #12b76a 52%, var(--border, #e4e7ec)); background: color-mix(in srgb, #12b76a 7%, var(--panel, #fff)); box-shadow: 0 0 0 3px rgba(18, 183, 106, .08); }
.collaboration-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; box-shadow: 0 0 0 3px rgba(152, 162, 179, .15); }
.collaboration-status.is-online .collaboration-state-dot { background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .15); }
.collaboration-status.is-reconnecting .collaboration-state-dot { background: #f79009; animation: team-pulse 1s ease-in-out infinite; }
.collaboration-status.is-offline .collaboration-state-dot { background: #f04438; }
.collaboration-status-caret { color: var(--muted, #667085); font-size: 11px; transition: transform .18s ease; }
.collaboration-status[aria-expanded="true"] .collaboration-status-caret { transform: rotate(180deg); }
.online-members { display: flex; padding-left: 3px; }
.online-member-avatar { width: 26px; height: 26px; margin-left: -7px; display: grid; place-items: center; border: 2px solid var(--panel, #fff); border-radius: 50%; background: var(--member-color, #6d5dfc); color: #fff; font-size: 10px; font-weight: 800; overflow: hidden; }
.online-member-avatar:first-child { margin-left: 0; }
.online-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.collaboration-panel { position: absolute; z-index: 230; top: calc(100% + 10px); left: 0; width: min(390px, calc(100vw - 28px)); max-height: min(640px, calc(100vh - 86px)); overflow: auto; overscroll-behavior: contain; border: 1px solid color-mix(in srgb, var(--border, #e4e7ec) 88%, #12b76a 12%); border-radius: 18px; background: color-mix(in srgb, var(--panel, #fff) 97%, #12b76a 3%); box-shadow: 0 24px 70px rgba(15, 23, 42, .2), 0 2px 12px rgba(15, 23, 42, .08); transform-origin: 44px 0; animation: collaboration-panel-in .18s cubic-bezier(.2,.8,.2,1); }
.collaboration-panel-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 13px; border-bottom: 1px solid color-mix(in srgb, var(--border, #e4e7ec) 72%, transparent); background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); backdrop-filter: blur(18px); }
.collaboration-panel-header > div { display: grid; gap: 2px; }
.collaboration-panel-header strong { font-size: 14px; letter-spacing: -.01em; }
.collaboration-panel-header small { color: var(--muted, #667085); font-size: 10px; }
.collaboration-panel-header button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--muted, #667085) 9%, transparent); color: var(--muted, #667085); }
.collaboration-panel-section { display: grid; gap: 10px; padding: 14px 16px; }
.collaboration-panel-section + .collaboration-panel-section { border-top: 1px solid color-mix(in srgb, var(--border, #e4e7ec) 72%, transparent); }
.collaboration-panel-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.collaboration-panel-section-head strong { font-size: 12px; }
.collaboration-panel-section-head > span { padding: 3px 7px; border-radius: 999px; background: rgba(18, 183, 106, .1); color: #087a49; font-size: 10px; font-weight: 700; }
.collaboration-panel-section-head button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--muted, #667085); font-size: 10px; }
.collaboration-member-list { display: grid; gap: 7px; }
.collaboration-member-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 48px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--border, #e4e7ec) 72%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); }
.collaboration-member-row .online-member-avatar { width: 32px; height: 32px; margin: 0; }
.collaboration-member-identity { min-width: 0; display: grid; gap: 1px; }
.collaboration-member-identity strong,
.collaboration-member-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collaboration-member-identity strong { font-size: 11px; }
.collaboration-member-identity small { color: var(--muted, #667085); font-size: 9px; }
.collaboration-member-activity { color: var(--muted, #667085); font-size: 9px; white-space: nowrap; }
.collaboration-member-empty { padding: 14px 10px; border: 1px dashed var(--border, #d0d5dd); border-radius: 12px; color: var(--muted, #667085); font-size: 10px; text-align: center; }
.collaboration-history-list { position: relative; display: grid; gap: 0; }
.collaboration-history-list::before { content: ''; position: absolute; left: 15px; top: 19px; bottom: 18px; width: 1px; background: color-mix(in srgb, #12b76a 28%, var(--border, #d0d5dd)); }
.collaboration-history-item { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 9px; padding: 8px 0; }
.collaboration-history-avatar { z-index: 1; width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid var(--panel, #fff); border-radius: 50%; background: var(--member-color, #6d5dfc); color: #fff; font-size: 10px; font-weight: 800; }
.collaboration-history-copy { min-width: 0; display: grid; gap: 2px; }
.collaboration-history-copy strong { font-size: 11px; font-weight: 750; }
.collaboration-history-copy p { margin: 0; color: var(--muted, #667085); font-size: 9px; line-height: 1.45; }
.collaboration-history-copy time { color: color-mix(in srgb, var(--muted, #667085) 78%, transparent); font-size: 9px; }
.collaboration-history-locate { align-self: center; min-height: 28px; padding: 0 8px; border: 1px solid var(--border, #d0d5dd); border-radius: 8px; background: var(--panel, #fff); color: inherit; font-size: 9px; }
.collaboration-history-empty { padding: 24px 12px; border: 1px dashed var(--border, #d0d5dd); border-radius: 12px; color: var(--muted, #667085); font-size: 10px; text-align: center; }
.collaboration-history-more { min-height: 34px; border: 1px solid var(--border, #d0d5dd); border-radius: 10px; background: var(--panel, #fff); color: inherit; font-size: 10px; }
.collaboration-history-retention { margin: 0; color: color-mix(in srgb, var(--muted, #667085) 80%, transparent); font-size: 9px; line-height: 1.5; }
@keyframes collaboration-panel-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.collaboration-banner { position: absolute; z-index: 80; top: 14px; left: 50%; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; background: rgba(17, 24, 39, .9); color: #fff; font-size: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .2); pointer-events: none; }
.remote-presence-layer { position: absolute; inset: 0; z-index: 22; pointer-events: none; }
.remote-cursor { position: absolute; transform: translate(-2px, -2px); color: var(--member-color, #6d5dfc); filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.remote-cursor::before { content: ''; display: block; width: 14px; height: 18px; background: currentColor; clip-path: polygon(0 0, 100% 62%, 54% 68%, 36% 100%); }
.remote-cursor span { position: absolute; left: 12px; top: 14px; white-space: nowrap; padding: 3px 7px; border-radius: 8px; background: currentColor; color: #fff; font-size: 10px; font-weight: 700; }
.remote-drag-ghost { position: absolute; border: 2px dashed var(--member-color, #6d5dfc); border-radius: 14px; background: color-mix(in srgb, var(--member-color, #6d5dfc) 9%, transparent); }
.nody-node.remote-selected,
.group-node.remote-selected { outline: 2px solid var(--remote-selection-color, #6d5dfc); outline-offset: 3px; }
.nody-node.remote-locked::after,
.group-node.remote-locked::after { content: attr(data-lock-label); position: absolute; right: 8px; top: 8px; max-width: 170px; padding: 4px 7px; border-radius: 8px; background: #f79009; color: #fff; font-size: 10px; z-index: 8; }
.team-manager-card { width: min(760px, calc(100vw - 28px)); }
.team-manager-summary { color: var(--muted, #667085); }
.team-manager-create, .team-member-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.team-manager-create input, .team-member-add input { min-height: 40px; border: 1px solid var(--border, #d0d5dd); border-radius: 10px; padding: 0 12px; background: var(--panel, #fff); color: inherit; }
.team-manager-workspace { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; margin-top: 16px; }
.team-manager-team-list { display: flex; gap: 7px; margin-top: 12px; overflow-x: auto; padding-bottom: 3px; }
.team-manager-team-list button { white-space: nowrap; border: 1px solid var(--border, #d0d5dd); border-radius: 999px; padding: 6px 10px; background: var(--panel, #fff); color: inherit; }
.team-manager-team-list button.active { border-color: var(--accent, #6d5dfc); color: var(--accent, #6d5dfc); }
.team-manager-panel { padding: 14px; border: 1px solid var(--border, #e4e7ec); border-radius: 14px; background: color-mix(in srgb, var(--panel, #fff) 94%, var(--accent, #6d5dfc) 6%); }
.team-manager-panel-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.team-member-list { display: grid; gap: 7px; margin-top: 12px; max-height: 300px; overflow: auto; }
.team-member-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px; border-radius: 10px; background: var(--panel, #fff); }
.team-member-row small { display: block; color: var(--muted, #667085); overflow: hidden; text-overflow: ellipsis; }
.team-member-row button { border: 0; background: transparent; color: #d92d20; }
.team-storage-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(152, 162, 179, .2); }
.team-storage-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6d5dfc, #8b5cf6); }
.team-danger-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.admin-team-spaces { align-items: start; }
.admin-team-rows { grid-column: 1 / -1; display: grid; gap: 8px; width: 100%; }
.admin-team-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .65fr) minmax(230px, .75fr); align-items: center; gap: 14px; padding: 11px 12px; border: 1px solid var(--glass-border, #e4e7ec); border-radius: 12px; background: var(--control-bg, #fff); }
.admin-team-row.is-deleted { opacity: .68; }
.admin-team-row-main,
.admin-team-storage-summary { display: grid; gap: 3px; min-width: 0; }
.admin-team-row-main span,
.admin-team-row-main small,
.admin-team-storage-summary span { color: var(--muted, #667085); font-size: 10px; }
.admin-team-quota-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; }
.admin-team-quota-control label { display: grid; gap: 4px; color: var(--muted, #667085); font-size: 10px; }
.admin-team-quota-control button { min-height: 38px; border: 1px solid var(--glass-border, #d0d5dd); border-radius: 9px; padding: 0 11px; background: var(--surface-solid, #fff); color: inherit; }
@keyframes team-pulse { 50% { opacity: .4; } }
@media (max-width: 760px) {
  .team-manager-workspace { grid-template-columns: 1fr; }
  .admin-team-row { grid-template-columns: 1fr; }
  .collaboration-status #collaborationStateText { display: none; }
  .collaboration-panel { position: fixed; top: 64px; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: none; }
}

/* V1.78 recharge landing: member-first entry with a manual service fallback. */
body.recharge-landing-open {
  overflow: hidden;
}

body.recharge-landing-open .app-shell,
body.recharge-landing-open .app-shell.subpage-open {
  display: block;
  min-width: 0;
  background: #f5f8fc;
}

body.recharge-landing-open .app-sidebar,
body.recharge-landing-open .topbar {
  display: none !important;
}

body.recharge-landing-open .app-main,
body.recharge-landing-open .main {
  width: 100%;
  height: 100vh;
  display: block;
  min-width: 0;
  background: transparent;
}

body.recharge-landing-open .recharge-page {
  width: 100%;
  height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at 8% 4%, rgba(84, 139, 255, 0.09), transparent 27%),
    radial-gradient(circle at 91% 15%, rgba(91, 209, 205, 0.08), transparent 25%),
    linear-gradient(180deg, #f7faff 0%, #f2f6fb 56%, #f7f9fc 100%);
}

body.recharge-landing-open .app-shell.subpage-open .recharge-page {
  padding: 0;
}

.recharge-site-header {
  position: sticky;
  z-index: 120;
  top: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(310px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 clamp(24px, 3.8vw, 72px);
  border-bottom: 1px solid rgba(137, 154, 180, 0.2);
  background: rgba(247, 250, 255, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.recharge-site-brand,
.recharge-site-user {
  color: #152238;
  text-decoration: none;
}

.recharge-site-brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.recharge-site-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(45, 74, 116, 0.12);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(54, 80, 119, 0.1);
}

.recharge-site-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recharge-site-brand > span:last-child {
  display: grid;
  gap: 2px;
}

.recharge-site-brand strong {
  font-size: 14px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.recharge-site-brand small {
  color: #8290a5;
  font-size: 9px;
  letter-spacing: 0.05em;
}

.recharge-site-nav {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(137, 154, 180, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 26px rgba(37, 58, 91, 0.06);
}

.recharge-site-nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 10px;
  color: #6e7c91;
  font-size: 11px;
  font-weight: 720;
  text-decoration: none;
}

.recharge-site-nav a:hover,
.recharge-site-nav a:focus-visible {
  color: #1f5fd3;
  background: rgba(47, 109, 246, 0.07);
}

.recharge-site-nav a.active {
  color: #fff;
  background: #172237;
  box-shadow: 0 8px 18px rgba(23, 34, 55, 0.18);
}

.recharge-site-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.recharge-icon-button,
.recharge-enter-canvas,
.recharge-site-user {
  min-height: 40px;
  border: 1px solid rgba(137, 154, 180, 0.22);
}

.recharge-icon-button {
  width: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #435168;
  font-size: 17px;
}

.recharge-enter-canvas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-color: #172237;
  border-radius: 12px;
  background: #172237;
  color: #fff;
  font-size: 11px;
  font-weight: 760;
  box-shadow: 0 10px 22px rgba(23, 34, 55, 0.16);
}

.recharge-site-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  border-color: transparent;
  border-radius: 999px;
}

.recharge-site-user:hover {
  border-color: rgba(137, 154, 180, 0.2);
  background: rgba(255, 255, 255, 0.68);
}

.recharge-site-user img {
  width: 31px;
  height: 31px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: #e8eef7;
}

.recharge-site-user strong {
  max-width: 92px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recharge-page-shell {
  width: min(calc(100% - 48px), 1372px);
  margin: 0 auto;
  padding: 34px 0 66px;
}

body.recharge-landing-open .recharge-page-head {
  min-height: 0;
  display: flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.recharge-landing-open .recharge-page-head > div:first-child {
  gap: 8px;
}

body.recharge-landing-open .recharge-page-head .recharge-eyebrow {
  color: #2f6df6;
}

body.recharge-landing-open .recharge-page-head > div:first-child > strong {
  color: #111d31;
  font-size: clamp(34px, 3.7vw, 50px);
  font-weight: 830;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

body.recharge-landing-open .recharge-page-head > div:first-child > span:last-child {
  color: #75849a;
  font-size: 12px;
  line-height: 1.6;
}

body.recharge-landing-open .recharge-balance-pill {
  min-width: 202px;
  margin-left: auto;
  border-color: rgba(47, 109, 246, 0.18);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(44, 70, 108, 0.08), inset 0 1px 0 #fff;
}

body.recharge-landing-open .recharge-balance-pill i {
  color: #2f6df6;
}

body.recharge-landing-open .recharge-content {
  width: 100%;
  gap: 24px;
  padding-bottom: 0;
}

body.recharge-landing-open .recharge-status {
  min-height: 70px;
  padding: 13px 16px;
  border-color: rgba(238, 150, 49, 0.28);
  background: linear-gradient(90deg, rgba(255, 247, 232, 0.96), rgba(255, 250, 242, 0.88));
  box-shadow: 0 10px 28px rgba(170, 106, 30, 0.06), inset 3px 0 0 #f2a33b;
}

.recharge-status-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: rgba(244, 160, 47, 0.13);
  color: #c8740d;
  font-size: 17px;
}

body.recharge-landing-open .recharge-status strong {
  color: #7e4b0b;
}

body.recharge-landing-open .recharge-status p {
  color: #8e6a3b;
}

.recharge-status-copy {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid rgba(205, 122, 21, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: #a65d08;
  font-size: 10px;
  font-weight: 760;
}

body.recharge-landing-open .recharge-section-head {
  align-items: end;
}

body.recharge-landing-open .recharge-section-head > div > span,
body.recharge-landing-open .recharge-card-kicker {
  color: #2f6df6;
}

body.recharge-landing-open .recharge-section-head h2 {
  color: #152238;
  font-size: clamp(22px, 2.2vw, 31px);
}

body.recharge-landing-open .recharge-package-grid {
  gap: 14px;
}

body.recharge-landing-open .recharge-package-card {
  min-height: 252px;
  padding: 18px;
  border-color: rgba(135, 153, 180, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 38px rgba(44, 70, 108, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.recharge-landing-open .recharge-package-card:hover {
  border-color: rgba(47, 109, 246, 0.35);
  box-shadow: 0 22px 46px rgba(44, 70, 108, 0.12);
}

body.recharge-landing-open .recharge-package-card.selected {
  border-color: #2f6df6;
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.11), 0 22px 48px rgba(35, 76, 156, 0.15);
}

body.recharge-landing-open .recharge-package-card.recommended {
  border-color: #172237;
  background:
    radial-gradient(circle at 92% 0, rgba(65, 126, 255, 0.3), transparent 36%),
    linear-gradient(145deg, #1c2b47 0%, #121c30 100%);
  box-shadow: 0 22px 50px rgba(19, 31, 53, 0.2);
}

body.recharge-landing-open .recharge-recommended-label,
body.recharge-landing-open .recharge-package-card.selected > button {
  background: #2f6df6;
}

body.recharge-landing-open .recharge-package-card.selected > button {
  border-color: #2f6df6;
}

body.recharge-landing-open .recharge-package-price strong {
  font-size: clamp(40px, 3.2vw, 52px);
}

body.recharge-landing-open .recharge-package-name {
  min-height: 50px;
}

body.recharge-landing-open .recharge-package-price {
  margin-top: 14px;
}

body.recharge-landing-open .recharge-package-card p {
  margin: 12px 0;
}

body.recharge-landing-open .recharge-workbench {
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
  gap: 14px;
}

body.recharge-landing-open .recharge-checkout-card,
body.recharge-landing-open .recharge-manual-card {
  min-height: 300px;
  border-radius: 20px;
}

body.recharge-landing-open .recharge-checkout-card {
  padding: 26px;
  color: #152238;
  border-color: rgba(135, 153, 180, 0.2);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(44, 70, 108, 0.08), inset 0 1px 0 #fff;
}

body.recharge-landing-open .recharge-checkout-card h2 {
  margin: 0;
  color: #152238;
  font-size: 27px;
}

.recharge-selected-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-top: 32px;
}

.recharge-selected-summary > div:first-child {
  display: grid;
  gap: 8px;
}

.recharge-selected-summary p {
  max-width: 300px;
  margin: 0;
  color: #7a889d;
  font-size: 11px;
  line-height: 1.6;
}

body.recharge-landing-open .recharge-checkout-amount {
  display: grid;
  justify-items: end;
  gap: 6px;
  margin: 0;
}

body.recharge-landing-open .recharge-checkout-amount > strong {
  color: #172237;
  font-size: 48px;
}

body.recharge-landing-open .recharge-checkout-amount > span {
  color: #738198;
}

body.recharge-landing-open .recharge-checkout-amount b {
  color: #2f6df6;
}

.recharge-selected-note {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid rgba(47, 109, 246, 0.13);
  border-radius: 12px;
  background: rgba(47, 109, 246, 0.055);
  color: #65748b;
  font-size: 10px;
  line-height: 1.55;
}

.recharge-selected-note i {
  flex: 0 0 auto;
  color: #2f6df6;
  font-size: 18px;
}

.recharge-official-checkout {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.recharge-official-checkout .payment-provider-options {
  margin: 18px 0 0;
}

.recharge-official-checkout .payment-provider-options button {
  border-color: rgba(23, 34, 55, 0.15);
  background: rgba(23, 34, 55, 0.05);
  color: #536278;
}

.recharge-official-checkout .payment-provider-options button[aria-pressed="true"] {
  border-color: #2f6df6;
  background: #2f6df6;
  color: #fff;
}

.recharge-official-checkout > small {
  color: #7a889d;
  font-size: 10px;
  line-height: 1.55;
}

.recharge-manual-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(99, 148, 255, 0.28);
  background:
    radial-gradient(circle at 100% 0, rgba(69, 130, 255, 0.32), transparent 34%),
    linear-gradient(145deg, #1a2b4a 0%, #101a2e 100%);
  color: #fff;
  box-shadow: 0 22px 52px rgba(20, 35, 63, 0.21);
}

.recharge-manual-card .recharge-card-kicker {
  color: #78a7ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.recharge-manual-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
}

.recharge-manual-heading h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  letter-spacing: -0.03em;
}

.recharge-manual-heading p {
  margin: 7px 0 0;
  color: rgba(228, 237, 255, 0.63);
  font-size: 11px;
  line-height: 1.55;
}

.recharge-wechat-badge {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid rgba(115, 225, 155, 0.3);
  border-radius: 999px;
  background: rgba(49, 195, 101, 0.12);
  color: #77e3a0;
  font-size: 10px;
  font-weight: 760;
}

.recharge-manual-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.recharge-manual-steps li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.recharge-manual-steps li > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(74, 132, 255, 0.22);
  color: #8ab1ff;
  font-size: 10px;
  font-weight: 800;
}

.recharge-manual-steps li > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.recharge-manual-steps strong {
  overflow: hidden;
  color: #f6f9ff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recharge-manual-steps small {
  overflow: hidden;
  color: rgba(217, 228, 249, 0.52);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recharge-manual-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: auto;
}

.recharge-copy-wechat,
.recharge-continue-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 760;
}

.recharge-copy-wechat {
  gap: 7px;
  border: 1px solid #4a82fa;
  background: #3d77f4;
  color: #fff;
  box-shadow: 0 12px 26px rgba(38, 92, 213, 0.28);
}

.recharge-continue-button {
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(235, 242, 255, 0.74);
}

.recharge-copy-wechat:hover,
.recharge-copy-wechat:focus-visible {
  background: #4b84ff;
  transform: translateY(-1px);
}

.recharge-continue-button:hover,
.recharge-continue-button:focus-visible {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

body.recharge-landing-open .recharge-calculator-section {
  padding-top: 4px;
}

body.recharge-landing-open .recharge-calculator-card {
  min-height: 0;
  display: block;
  padding: 24px;
  border-color: rgba(135, 153, 180, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 38px rgba(44, 70, 108, 0.07), inset 0 1px 0 #fff;
}

.recharge-calculator-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) minmax(260px, 0.9fr);
  align-items: end;
  gap: 14px;
  margin-top: 18px;
}

body.recharge-landing-open .recharge-calculator-result {
  min-height: 48px;
  grid-template-columns: auto 1fr auto;
  padding: 10px 14px;
  background: rgba(47, 109, 246, 0.07);
}

body.recharge-landing-open .recharge-calculator-result span,
body.recharge-landing-open .recharge-calculator-result small {
  color: #5576aa;
}

body.recharge-landing-open .recharge-calculator-result strong {
  color: #2f6df6;
  font-size: 24px;
}

body.recharge-landing-open .recharge-calculator-hint {
  margin: 10px 0 0;
}

[data-theme="dark"] body.recharge-landing-open .app-shell,
[data-theme="dark"] body.recharge-landing-open .app-shell.subpage-open {
  background: #08111f;
}

[data-theme="dark"] body.recharge-landing-open .recharge-page {
  --recharge-ink: #f4f7fc;
  background:
    radial-gradient(circle at 8% 5%, rgba(56, 112, 235, 0.14), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(55, 185, 176, 0.08), transparent 24%),
    linear-gradient(180deg, #091321 0%, #08111f 60%, #0a1320 100%);
}

[data-theme="dark"] .recharge-site-header {
  border-bottom-color: rgba(130, 155, 194, 0.15);
  background: rgba(9, 19, 33, 0.88);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .recharge-site-brand,
[data-theme="dark"] .recharge-site-user {
  color: #eff5ff;
}

[data-theme="dark"] .recharge-site-avatar,
[data-theme="dark"] .recharge-icon-button,
[data-theme="dark"] .recharge-site-nav {
  border-color: rgba(139, 165, 203, 0.16);
  background: rgba(19, 32, 50, 0.76);
}

[data-theme="dark"] .recharge-site-brand small,
[data-theme="dark"] .recharge-site-nav a {
  color: #8798b2;
}

[data-theme="dark"] .recharge-icon-button {
  color: #b8c6da;
}

[data-theme="dark"] body.recharge-landing-open .recharge-page-head > div:first-child > strong,
[data-theme="dark"] body.recharge-landing-open .recharge-section-head h2,
[data-theme="dark"] body.recharge-landing-open .recharge-checkout-card h2,
[data-theme="dark"] body.recharge-landing-open .recharge-checkout-amount > strong,
[data-theme="dark"] .recharge-selected-summary p,
[data-theme="dark"] .recharge-selected-note {
  color: #edf3fd;
}

[data-theme="dark"] body.recharge-landing-open .recharge-page-head > div:first-child > span:last-child,
[data-theme="dark"] body.recharge-landing-open .recharge-section-head p {
  color: #8999b1;
}

[data-theme="dark"] body.recharge-landing-open .recharge-balance-pill,
[data-theme="dark"] body.recharge-landing-open .recharge-package-card,
[data-theme="dark"] body.recharge-landing-open .recharge-checkout-card,
[data-theme="dark"] body.recharge-landing-open .recharge-calculator-card,
[data-theme="dark"] body.recharge-landing-open .recharge-price-group,
[data-theme="dark"] body.recharge-landing-open .recharge-order-list {
  border-color: rgba(135, 160, 198, 0.15);
  background: rgba(16, 28, 45, 0.84);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] body.recharge-landing-open .recharge-status {
  border-color: rgba(232, 157, 63, 0.2);
  background: linear-gradient(90deg, rgba(61, 44, 25, 0.92), rgba(42, 35, 27, 0.88));
  box-shadow: inset 3px 0 0 #d99032;
}

[data-theme="dark"] body.recharge-landing-open .recharge-status strong {
  color: #f4c27d;
}

[data-theme="dark"] body.recharge-landing-open .recharge-status p {
  color: #c29b68;
}

[data-theme="dark"] .recharge-status-copy {
  border-color: rgba(234, 172, 91, 0.2);
  background: rgba(255, 255, 255, 0.055);
  color: #e3b36e;
}

[data-theme="dark"] body.recharge-landing-open .recharge-package-card.recommended {
  border-color: #457ff3;
  background:
    radial-gradient(circle at 92% 0, rgba(65, 126, 255, 0.32), transparent 36%),
    linear-gradient(145deg, #203456 0%, #121f36 100%);
}

[data-theme="dark"] .recharge-selected-summary p,
[data-theme="dark"] .recharge-selected-note,
[data-theme="dark"] body.recharge-landing-open .recharge-checkout-amount > span,
[data-theme="dark"] .recharge-official-checkout > small {
  color: #8f9fb8;
}

[data-theme="dark"] .recharge-selected-note {
  border-color: rgba(75, 130, 245, 0.16);
  background: rgba(60, 111, 222, 0.075);
}

[data-theme="dark"] body.recharge-landing-open .recharge-field select,
[data-theme="dark"] body.recharge-landing-open .recharge-quantity-control {
  border-color: rgba(135, 160, 198, 0.16);
  background: rgba(8, 17, 31, 0.58);
}

[data-theme="dark"] body.recharge-landing-open .recharge-calculator-result {
  background: rgba(56, 111, 232, 0.12);
}

@media (max-width: 1120px) {
  .recharge-site-header {
    grid-template-columns: minmax(200px, 1fr) auto;
  }

  .recharge-site-nav {
    display: none;
  }

  .recharge-page-shell {
    padding-top: 38px;
  }

  body.recharge-landing-open .recharge-workbench {
    grid-template-columns: 1fr;
  }

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

  body.recharge-landing-open .recharge-calculator-result {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.recharge-landing-open .app-shell,
  body.recharge-landing-open .app-shell.subpage-open {
    padding-bottom: 0;
  }

  .recharge-site-header {
    min-height: 64px;
    padding: 0 16px;
  }

  .recharge-site-brand small,
  .recharge-site-user strong {
    display: none;
  }

  .recharge-enter-canvas {
    padding: 0 12px;
  }

  .recharge-page-shell {
    width: min(calc(100% - 28px), 1372px);
    padding: 30px 0 48px;
  }

  body.recharge-landing-open .recharge-page-head {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  body.recharge-landing-open .recharge-balance-pill {
    width: 100%;
    margin-left: 0;
  }

  body.recharge-landing-open .recharge-section-head {
    align-items: flex-start;
  }

  body.recharge-landing-open .recharge-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .recharge-status-copy {
    width: 100%;
    justify-content: center;
  }

  .recharge-manual-steps {
    grid-template-columns: 1fr;
  }

  .recharge-manual-steps strong,
  .recharge-manual-steps small {
    white-space: normal;
  }

  .recharge-manual-actions,
  .recharge-calculator-fields {
    grid-template-columns: 1fr;
  }

  body.recharge-landing-open .recharge-calculator-result {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .recharge-site-actions {
    gap: 6px;
  }

  .recharge-site-user {
    display: none;
  }

  .recharge-enter-canvas span {
    display: none;
  }

  .recharge-enter-canvas {
    width: 40px;
    padding: 0;
  }

  body.recharge-landing-open .recharge-page-head > div:first-child > strong {
    font-size: 36px;
  }

  body.recharge-landing-open .recharge-package-grid {
    grid-template-columns: 1fr;
  }

  .recharge-selected-summary {
    grid-template-columns: 1fr;
  }

  body.recharge-landing-open .recharge-checkout-amount {
    justify-items: start;
  }

  .recharge-manual-heading {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recharge-site-header *,
  .recharge-page-shell * {
    scroll-behavior: auto;
  }
}

/* Project-level director console: editorial production desk, not a generation shortcut. */
.app-shell.subpage-open .director-page {
  --director-accent: #e85d39;
  --director-accent-soft: #fff0e9;
  --director-ink: #15202b;
  --director-muted: #68717c;
  --director-line: #d9dce0;
  --director-paper: #fbfaf7;
  --director-panel: #ffffff;
  padding: calc(var(--topbar-height) + 24px) 28px 40px;
  color: var(--director-ink);
  background: #eef0f2;
}

.director-page-head {
  display: flex;
  width: min(1500px, 100%);
  margin: 0 auto 18px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.director-eyebrow,
.director-section-kicker,
.director-rail-head span,
.director-project-brief > span,
.director-project-budget > span,
.director-shot-head span {
  color: var(--director-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.director-page-head h1 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}

.director-page-head p {
  margin: 0;
  color: var(--director-muted);
  font-size: 13px;
}

.director-new-button {
  min-height: 42px;
  padding-inline: 17px;
  border-color: var(--director-ink);
  background: var(--director-ink);
}

.director-console {
  display: grid;
  width: min(1500px, 100%);
  min-height: calc(100vh - var(--topbar-height) - 150px);
  margin: 0 auto;
  overflow: hidden;
  grid-template-columns: 236px minmax(0, 1fr);
  border: 1px solid var(--director-line);
  border-radius: 14px;
  background: var(--director-paper);
  box-shadow: 0 18px 55px rgba(30, 37, 43, 0.09);
}

.director-project-rail {
  display: flex;
  min-width: 0;
  padding: 18px 14px;
  flex-direction: column;
  border-right: 1px solid var(--director-line);
  background: #1e2933;
}

.director-rail-head {
  display: flex;
  min-height: 32px;
  padding: 0 5px 11px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.director-rail-head span {
  color: #ff9c7e;
}

.director-rail-head strong {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
}

.director-project-list {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px 0;
}

.director-project-item {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #d9e1e8;
  text-align: left;
  background: transparent;
}

.director-project-item:hover,
.director-project-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.director-project-item.active {
  border-color: rgba(255, 156, 126, 0.46);
  background: rgba(232, 93, 57, 0.18);
}

.director-project-item strong {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-project-item span,
.director-project-item small {
  color: #9eabb6;
  font-size: 9px;
}

.director-project-item span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.director-project-item em {
  color: #ffb199;
  font-style: normal;
  font-weight: 800;
}

.director-rail-empty {
  margin: 10px 5px;
  color: #91a0ac;
  font-size: 11px;
  line-height: 1.6;
}

.director-rail-note {
  display: flex;
  margin: auto 5px 0;
  gap: 7px;
  color: #94a3ae;
  font-size: 9px;
  line-height: 1.5;
}

.director-rail-note i {
  color: #70d3ae;
  font-size: 14px;
}

.director-workspace {
  min-width: 0;
  padding: 24px;
  background-color: var(--director-paper);
  background-image: linear-gradient(rgba(21, 32, 43, 0.035) 1px, transparent 1px);
  background-size: 100% 32px;
}

.director-empty {
  display: grid;
  max-width: 560px;
  min-height: 500px;
  margin: auto;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.director-empty-mark {
  display: grid;
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--director-accent) 30%, var(--director-line));
  border-radius: 50%;
  color: var(--director-accent);
  background: var(--director-accent-soft);
  font-size: 28px;
}

.director-empty h2 {
  margin: 8px 0;
  font-size: 30px;
  letter-spacing: -0.04em;
}

.director-empty p {
  max-width: 470px;
  margin: 0 0 20px;
  color: var(--director-muted);
  font-size: 13px;
  line-height: 1.8;
}

.director-create-panel,
.director-detail {
  width: 100%;
}

.director-create-panel {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px;
  border: 1px solid var(--director-line);
  border-top: 4px solid var(--director-accent);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(31, 42, 51, 0.08);
}

.director-create-heading {
  display: flex;
  margin: 5px 0 22px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.director-create-heading h2 {
  margin: 0 0 5px;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.director-create-heading p {
  margin: 0;
  color: var(--director-muted);
  font-size: 12px;
}

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

.director-field {
  display: grid;
  align-content: start;
  gap: 7px;
}

.director-field-wide {
  grid-column: 1 / -1;
}

.director-field > span {
  color: var(--director-ink);
  font-size: 11px;
  font-weight: 800;
}

.director-field > span b {
  color: var(--director-accent);
  font-size: 9px;
}

.director-field input,
.director-field select,
.director-field textarea,
.director-shot-editor input,
.director-shot-editor textarea {
  width: 100%;
  border: 1px solid var(--director-line);
  border-radius: 7px;
  color: var(--director-ink);
  outline: none;
  background: #fff;
  font: inherit;
}

.director-field input,
.director-field select {
  min-height: 41px;
  padding: 0 11px;
}

.director-field textarea {
  min-height: 118px;
  padding: 11px;
  resize: vertical;
  line-height: 1.65;
}

.director-field input:focus,
.director-field select:focus,
.director-field textarea:focus,
.director-shot-editor input:focus,
.director-shot-editor textarea:focus {
  border-color: var(--director-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--director-accent) 13%, transparent);
}

.director-field small {
  color: var(--director-muted);
  font-size: 9px;
}

.director-form-submit {
  display: flex;
  margin-top: 4px;
  padding-top: 17px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--director-line);
}

.director-form-submit > div {
  display: grid;
  gap: 3px;
}

.director-form-submit strong {
  font-size: 12px;
}

.director-form-submit span {
  color: var(--director-muted);
  font-size: 9px;
}

.director-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.director-detail-head h2 {
  margin: 4px 0 5px;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.045em;
}

.director-detail-head p {
  margin: 0;
  color: var(--director-muted);
  font-size: 11px;
}

.director-status,
.director-shot-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--director-line);
  border-radius: 999px;
  color: var(--director-muted);
  background: #fff;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.director-status {
  min-height: 28px;
  padding: 0 11px;
}

.director-status[data-status="approved"],
.director-status[data-status="in_production"],
.director-status[data-status="completed"],
.director-shot-status[data-status="approved"],
.director-shot-status[data-status="keyframe_ready"],
.director-shot-status[data-status="video_ready"],
.director-shot-status[data-status="completed"] {
  border-color: color-mix(in srgb, var(--success) 32%, var(--director-line));
  color: #067857;
  background: #ecf9f4;
}

.director-status[data-status="review"],
.director-shot-status[data-status="keyframe_generating"],
.director-shot-status[data-status="video_generating"],
.director-shot-status[data-status="needs_revision"] {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--director-line));
  color: #93640e;
  background: #fff8e5;
}

.director-shot-status[data-status="generation_failed"] {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--director-line));
  color: #a12c20;
  background: #fff0ed;
}

.director-stage-rail {
  display: grid;
  margin: 22px 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--director-line);
  border-bottom: 1px solid var(--director-line);
  background: rgba(255, 255, 255, 0.62);
}

.director-stage-rail li {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 74px;
  padding: 13px 10px 11px 36px;
  align-content: center;
  gap: 2px;
  border-right: 1px solid var(--director-line);
}

.director-stage-rail li:last-child {
  border-right: 0;
}

.director-stage-rail li > span {
  position: absolute;
  top: 14px;
  left: 10px;
  color: #a4abb1;
  font-size: 9px;
  font-weight: 900;
}

.director-stage-rail strong {
  font-size: 11px;
}

.director-stage-rail small {
  overflow: hidden;
  color: var(--director-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-stage-rail li.complete,
.director-stage-rail li.active {
  background: var(--director-accent-soft);
}

.director-stage-rail li.complete > span,
.director-stage-rail li.active > span,
.director-stage-rail li.active strong {
  color: var(--director-accent);
}

.director-project-summary {
  display: grid;
  min-height: 138px;
  overflow: hidden;
  grid-template-columns: 150px minmax(0, 1fr) 210px;
  border: 1px solid var(--director-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
}

.director-product-preview {
  display: grid;
  min-height: 138px;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--director-line);
  color: var(--director-muted);
  background: #e5e7e9;
  font-size: 10px;
}

.director-product-preview img {
  width: 100%;
  height: 100%;
  min-height: 138px;
  object-fit: cover;
}

.director-project-brief,
.director-project-budget {
  display: grid;
  min-width: 0;
  padding: 17px 18px;
  align-content: center;
  gap: 7px;
}

.director-project-brief p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--director-ink);
  font-size: 11px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.director-project-budget {
  border-left: 1px solid var(--director-line);
  background: #f5f3ed;
}

.director-project-budget strong {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.director-project-budget small {
  color: var(--director-muted);
  font-size: 8px;
  line-height: 1.5;
}

.director-shot-head {
  display: flex;
  margin: 28px 0 12px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.director-shot-head h3 {
  margin: 2px 0 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.director-shot-head p {
  margin: 0;
  color: var(--director-muted);
  font-size: 10px;
}

.director-shot-list {
  display: grid;
  gap: 10px;
}

.director-shot-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  grid-template-columns: 72px minmax(0, 1fr) 310px;
  border: 1px solid var(--director-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.director-shot-card:hover {
  border-color: color-mix(in srgb, var(--director-accent) 34%, var(--director-line));
  box-shadow: 0 11px 24px rgba(30, 37, 43, 0.07);
  transform: translateY(-1px);
}

.director-shot-number {
  display: grid;
  padding: 14px 8px;
  align-content: space-between;
  justify-items: center;
  border-right: 1px solid var(--director-line);
  color: #fff;
  background: var(--director-ink);
}

.director-shot-number strong {
  font-size: 26px;
  line-height: 1;
}

.director-shot-number span {
  max-width: 58px;
  color: #ffad94;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.director-shot-number small {
  color: #b5c0c9;
  font-size: 9px;
}

.director-shot-editor {
  display: grid;
  min-width: 0;
  padding: 13px 15px;
  gap: 8px;
}

.director-shot-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.director-shot-editor input {
  min-width: 0;
  padding: 6px 8px;
  border-color: transparent;
  font-size: 12px;
  font-weight: 850;
}

.director-shot-editor textarea {
  min-height: 56px;
  padding: 8px;
  resize: vertical;
  color: var(--director-muted);
  font-size: 10px;
  line-height: 1.55;
}

.director-shot-camera {
  display: flex;
  gap: 6px;
  color: var(--director-muted);
  font-size: 9px;
  line-height: 1.5;
}

.director-shot-camera i {
  color: var(--director-accent);
  font-size: 13px;
}

.director-shot-editor details {
  color: var(--director-muted);
  font-size: 9px;
}

.director-shot-editor summary {
  cursor: pointer;
  font-weight: 750;
}

.director-shot-editor details textarea {
  width: 100%;
  min-height: 90px;
  margin-top: 7px;
}

.director-shot-actions {
  display: grid;
  padding: 13px;
  align-content: center;
  gap: 8px;
  border-left: 1px solid var(--director-line);
  background: #f7f7f5;
}

.director-shot-actions p {
  margin: 0;
  color: var(--director-muted);
  font-size: 9px;
  line-height: 1.5;
}

.director-shot-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 7px;
}

.director-shot-action-row button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 9px;
}

.director-shot-action-row .primary-button {
  justify-content: center;
  border-color: var(--director-ink);
  background: var(--director-ink);
}

.director-shot-revision {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  color: var(--director-muted);
  background: transparent;
  font-size: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.director-shot-revision:hover,
.director-shot-revision:focus-visible {
  color: var(--director-accent);
}

.director-review-panel {
  grid-column: 2 / -1;
  display: grid;
  padding: 15px;
  gap: 12px;
  border-top: 1px solid var(--director-line);
  background:
    linear-gradient(135deg, rgba(238, 83, 52, 0.045), transparent 38%),
    #f3f2ee;
}

.director-review-head,
.director-version-lane > header,
.director-review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.director-review-head > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.director-review-head span,
.director-version-lane > header span,
.director-review-note > span {
  color: var(--director-accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.director-review-head strong {
  font-size: 13px;
  letter-spacing: -0.02em;
}

.director-review-head em {
  padding: 4px 7px;
  border: 1px solid var(--director-line);
  border-radius: 4px;
  color: var(--director-muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.director-review-live,
.director-review-error {
  display: flex;
  margin: 0;
  padding: 8px 10px;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1.45;
}

.director-review-live {
  color: #176349;
  background: rgba(33, 171, 123, 0.1);
}

.director-review-live > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21ab7b;
  box-shadow: 0 0 0 4px rgba(33, 171, 123, 0.13);
  animation: director-review-pulse 1.4s ease-in-out infinite;
}

.director-review-error {
  color: #9f321f;
  background: rgba(238, 83, 52, 0.1);
}

@keyframes director-review-pulse {
  50% { opacity: 0.38; transform: scale(0.82); }
}

.director-review-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.director-version-lane {
  display: grid;
  min-width: 0;
  padding: 10px;
  gap: 8px;
  border: 1px solid var(--director-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
}

.director-version-lane > header small {
  color: var(--director-muted);
  font-size: 8px;
}

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

.director-version-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.director-version-card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--director-line);
  border-radius: 5px;
  background: var(--director-ink);
}

.director-version-card.current {
  border-color: var(--director-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--director-accent) 38%, transparent);
}

.director-version-media {
  display: grid;
  min-height: 128px;
  place-items: center;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
    #20272d;
  background-size: 18px 18px;
}

.director-version-media img,
.director-version-media video {
  display: block;
  width: 100%;
  height: 164px;
  object-fit: contain;
  background: #11171c;
}

.director-version-media > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #aab4bc;
  font-size: 9px;
}

.director-version-card figcaption {
  display: flex;
  padding: 7px 8px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
}

.director-version-card figcaption strong {
  color: #ff9b7f;
  font-size: 9px;
}

.director-version-card figcaption span {
  color: #aeb8c0;
  font-size: 8px;
}

.director-version-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 128px;
  padding: 18px;
  place-items: center;
  border: 1px dashed var(--director-line);
  color: var(--director-muted);
  font-size: 9px;
  text-align: center;
}

.director-review-note {
  display: grid;
  gap: 6px;
}

.director-review-note textarea {
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  resize: vertical;
  border: 1px solid var(--director-line);
  border-radius: 5px;
  color: var(--director-ink);
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
}

.director-review-note textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--director-accent) 18%, transparent);
  border-color: var(--director-accent);
}

.director-review-actions {
  justify-content: flex-end;
}

.director-review-actions button {
  min-height: 36px;
  font-size: 9px;
}

.director-review-actions .primary-button {
  border-color: var(--director-ink);
  background: var(--director-ink);
}

.director-action-dock {
  position: sticky;
  z-index: 4;
  bottom: -24px;
  display: flex;
  margin: 22px -24px -24px;
  padding: 14px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--director-line);
  background: rgba(251, 250, 247, 0.94);
  box-shadow: 0 -12px 30px rgba(30, 37, 43, 0.06);
  backdrop-filter: blur(12px);
}

.director-action-dock > div {
  display: flex;
  gap: 8px;
}

.director-action-dock .primary-button {
  border-color: var(--director-ink);
  background: var(--director-ink);
}

.director-action-dock .primary-button:disabled,
.director-shot-action-row .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.director-danger-button {
  color: var(--danger);
}

[data-theme="dark"] .app-shell.subpage-open .director-page {
  --director-accent: #ff8161;
  --director-accent-soft: rgba(255, 129, 97, 0.12);
  --director-ink: #eef2f5;
  --director-muted: #9ba7b1;
  --director-line: #303b45;
  --director-paper: #151b20;
  --director-panel: #1b232a;
  background: #0f1418;
}

[data-theme="dark"] .director-console,
[data-theme="dark"] .director-workspace,
[data-theme="dark"] .director-create-panel,
[data-theme="dark"] .director-shot-card,
[data-theme="dark"] .director-status,
[data-theme="dark"] .director-shot-status,
[data-theme="dark"] .director-project-summary {
  background-color: var(--director-panel);
}

[data-theme="dark"] .director-field input,
[data-theme="dark"] .director-field select,
[data-theme="dark"] .director-field textarea,
[data-theme="dark"] .director-shot-editor input,
[data-theme="dark"] .director-shot-editor textarea {
  color: var(--director-ink);
  background: #12191f;
}

[data-theme="dark"] .director-shot-actions,
[data-theme="dark"] .director-project-budget,
[data-theme="dark"] .director-review-panel {
  background: #182027;
}

[data-theme="dark"] .director-version-lane,
[data-theme="dark"] .director-review-head em,
[data-theme="dark"] .director-review-note textarea {
  color: var(--director-ink);
  background: #12191f;
}

[data-theme="dark"] .director-stage-rail,
[data-theme="dark"] .director-action-dock {
  background: rgba(21, 27, 32, 0.94);
}

[data-theme="dark"] .director-status[data-status="approved"],
[data-theme="dark"] .director-status[data-status="in_production"],
[data-theme="dark"] .director-status[data-status="completed"],
[data-theme="dark"] .director-shot-status[data-status="approved"],
[data-theme="dark"] .director-shot-status[data-status="keyframe_ready"],
[data-theme="dark"] .director-shot-status[data-status="video_ready"],
[data-theme="dark"] .director-shot-status[data-status="completed"] {
  color: #7be2bd;
  background: rgba(33, 171, 123, 0.13);
}

@media (max-width: 1160px) {
  .app-shell.subpage-open .director-page {
    padding-inline: 18px;
  }

  .director-console {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .director-project-summary {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .director-project-budget {
    grid-column: 1 / -1;
    border-top: 1px solid var(--director-line);
    border-left: 0;
  }

  .director-shot-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .director-shot-actions {
    grid-column: 2;
    border-top: 1px solid var(--director-line);
    border-left: 0;
  }

  .director-review-lanes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .app-shell.subpage-open .director-page {
    padding: calc(var(--topbar-height) + 14px) 10px 24px;
  }

  .director-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .director-new-button {
    width: 100%;
    justify-content: center;
  }

  .director-console {
    display: block;
    overflow: visible;
  }

  .director-project-rail {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--director-line);
  }

  .director-project-list {
    display: flex;
    overflow-x: auto;
  }

  .director-project-item {
    min-width: 180px;
  }

  .director-rail-note {
    display: none;
  }

  .director-workspace {
    padding: 14px;
  }

  .director-create-form {
    grid-template-columns: 1fr;
  }

  .director-field-wide {
    grid-column: auto;
  }

  .director-form-submit,
  .director-shot-head,
  .director-action-dock {
    align-items: stretch;
    flex-direction: column;
  }

  .director-stage-rail {
    display: flex;
    overflow-x: auto;
  }

  .director-stage-rail li {
    min-width: 130px;
  }

  .director-project-summary {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .director-shot-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .director-shot-number strong {
    font-size: 20px;
  }

  .director-shot-action-row {
    grid-template-columns: 1fr;
  }

  .director-review-panel {
    padding: 11px;
  }

  .director-version-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-review-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .director-action-dock {
    position: static;
    margin: 18px -14px -14px;
    padding: 12px 14px;
  }

  .director-action-dock > div {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Cascade seal: the legacy director desk remains above for compatibility. */
.app-shell.subpage-open .director-page {
  --director-accent: var(--system-blue, #0878f9);
  --director-accent-soft: rgba(8, 120, 249, 0.09);
  --director-ink: var(--ink, #151b26);
  --director-muted: var(--muted, #596779);
  --director-line: rgba(119, 136, 158, 0.2);
  --director-paper: var(--canvas-bg, #f2f4f9);
  --director-panel: rgba(255, 255, 255, 0.82);
  overflow: auto;
  padding: calc(var(--topbar-height) + 22px) 26px 34px;
  background-color: var(--director-paper);
  background-image: radial-gradient(circle, rgba(96, 116, 145, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
}

.director-page-head {
  width: min(1560px, 100%);
  margin-bottom: 20px;
  align-items: center;
}

.director-page-head h1 {
  margin-top: 6px;
  font-size: clamp(28px, 2.7vw, 38px);
}

.director-eyebrow,
.director-section-kicker,
.director-project-brief > span,
.director-project-budget > span {
  color: var(--director-accent);
}

.director-new-button,
.director-action-dock .primary-button,
.director-review-actions .primary-button,
.director-shot-action-row .primary-button {
  border-color: var(--director-accent);
  background: var(--director-accent);
}

.director-workspace {
  min-width: 0;
  padding: 22px 26px 26px;
  background: rgba(242, 244, 249, 0.54);
  background-image: none;
}

.director-project-item {
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  align-items: center;
  padding: 12px;
  border-color: rgba(119, 136, 158, 0.13);
  color: var(--director-ink);
  background: rgba(248, 250, 253, 0.7);
}

.director-project-item:hover,
.director-project-item:focus-visible,
.director-project-item.active {
  border-color: rgba(8, 120, 249, 0.22);
  background: rgba(8, 120, 249, 0.06);
}

.director-project-item strong { color: var(--director-ink); }
.director-project-item span,
.director-project-item small { color: #748195; }
.director-project-item em { color: #0878f9; }

.director-project-summary {
  grid-template-columns: 100px minmax(0, 1fr) 190px;
  border-color: var(--director-line);
  background: rgba(255, 255, 255, 0.82);
}

.director-product-preview {
  color: var(--director-accent);
  background: rgba(8, 120, 249, 0.05);
}

.director-project-budget,
.director-shot-actions,
.director-review-panel {
  background: rgba(247, 249, 252, 0.88);
}

.director-shot-card {
  border-color: var(--director-line);
  background: rgba(255, 255, 255, 0.9);
}

.director-shot-number { background: #eaf3ff; }
.director-shot-number strong,
.director-shot-number span { color: var(--director-accent); }
.director-shot-number small { color: #748195; }

.director-action-dock {
  position: static;
  margin: 0;
  padding: 12px 0 0;
  background: transparent;
  box-shadow: none;
}

.director-review-shot-card .director-review-panel {
  grid-column: auto;
  border-top: 0;
}

[data-theme="dark"] .app-shell.subpage-open .director-page {
  --director-accent: #5aa2ff;
  --director-accent-soft: rgba(90, 162, 255, 0.13);
}

[data-theme="dark"] .director-flow-shell {
  border-color: #303b45;
  background: rgba(18, 25, 31, 0.82);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .director-flow-steps {
  border-color: #303b45;
  background: rgba(22, 30, 37, 0.96);
}

[data-theme="dark"] .director-flow-steps .director-stage-rail {
  background: transparent;
}

[data-theme="dark"] .director-flow-project > strong,
[data-theme="dark"] .director-flow-steps .director-stage-rail strong,
[data-theme="dark"] .director-delivery-progress > header strong {
  color: #eef2f5;
}

[data-theme="dark"] .director-flow-project > small,
[data-theme="dark"] .director-flow-steps .director-stage-rail small,
[data-theme="dark"] .director-delivery-progress p {
  color: #9ba7b1;
}

[data-theme="dark"] .director-flow-steps .director-stage-rail li.active {
  background: rgba(90, 162, 255, 0.1);
}

[data-theme="dark"] .director-flow-steps .director-stage-rail li > span {
  border-color: #3a4652;
  color: #aab5bf;
  background: #202a32;
}

[data-theme="dark"] .director-delivery-progress {
  border-color: #35414c;
  color: #eef2f5;
  background: #12191f;
}

[data-theme="dark"] .director-delivery-progress > div {
  background: #2a3540;
}

@media (max-width: 820px) {
  .app-shell.subpage-open .director-page {
    padding: calc(var(--topbar-height) + 14px) 10px 24px;
  }

  .director-project-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .director-workspace {
    padding: 14px;
  }
}