:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --bg-elevated: #ffffff;
  --bg-soft: #e9edf2;
  --bg-strong: #dce2e9;
  --canvas: #e8ecf1;
  --text: #171b20;
  --text-secondary: #515a65;
  --text-tertiary: #788390;
  --line: #d4dae2;
  --line-strong: #b8c1cc;
  --accent: #477bdc;
  --accent-strong: #3568c7;
  --accent-ink: #ffffff;
  --danger: #b95449;
  --warning: #977222;
  --success: #43834b;
  --shadow: rgba(38, 48, 34, 0.13);
  --radius: 12px;
  --radius-small: 8px;
  --topbar-height: 64px;
  --nav-width: 78px;
  --inspector-width: 340px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  font-family:
    "SF Pro Text",
    "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    -apple-system,
    sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0d;
  --bg-elevated: #141617;
  --bg-soft: #1a1d1f;
  --bg-strong: #22272a;
  --canvas: #08090a;
  --text: #f3f5f7;
  --text-secondary: #aeb5bd;
  --text-tertiary: #707983;
  --line: #2a2f33;
  --line-strong: #434a50;
  --accent: #7ea7ff;
  --accent-strong: #9abaff;
  --accent-ink: #071121;
  --danger: #e3867c;
  --warning: #d8b96d;
  --success: #75c997;
  --shadow: rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

a {
  color: inherit;
}

input,
textarea,
select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  outline: 0;
  background: var(--bg);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

input,
select {
  min-height: 40px;
  padding: 0 12px;
}

textarea {
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.app-shell {
  display: grid;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  background: var(--bg);
}

.topbar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--nav-width) minmax(180px, 330px) 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  box-shadow: 0 1px 14px var(--shadow);
}

.home-global-nav {
  display: none;
  align-items: center;
  gap: 4px;
}

.home-global-nav button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 13px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
}

.home-global-nav button:hover,
.home-global-nav button.is-active {
  background: var(--bg-soft);
  color: var(--text);
}

body.is-home-view .app-shell {
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
}

body.is-home-view .navigation {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

body.is-home-view .topbar {
  grid-template-columns: var(--nav-width) minmax(0, 1fr) auto;
  padding-right: 12px;
}

body.is-home-view .home-global-nav {
  display: none;
}

body.is-home-view .main {
  grid-column: 2;
}

body.is-home-view .topbar__actions {
  grid-column: 3;
  justify-self: end;
}

body.is-home-view .navigation__items {
  align-content: start;
}

body.is-projects-view .home-global-nav,
body.is-skills-view .home-global-nav {
  display: none;
}

body.is-projects-view .topbar,
body.is-skills-view .topbar {
  grid-template-columns: var(--nav-width) minmax(0, 1fr) auto;
  padding-right: 12px;
}

body.is-projects-view .topbar__actions,
body.is-skills-view .topbar__actions {
  grid-column: 3;
  justify-self: end;
}

body.is-projects-view .brand,
body.is-skills-view .brand {
  justify-content: center;
}

body.is-projects-view .brand__name,
body.is-skills-view .brand__name {
  display: none;
}

body.is-projects-view .project-switcher,
body.is-projects-view .topbar__status,
body.is-skills-view .project-switcher,
body.is-skills-view .topbar__status {
  display: none;
}

body.is-projects-view #undoButton,
body.is-projects-view #redoButton,
body.is-projects-view #shareButton,
body.is-projects-view #exportButton,
body.is-skills-view #undoButton,
body.is-skills-view #redoButton,
body.is-skills-view #shareButton,
body.is-skills-view #exportButton {
  display: none;
}

body.is-home-view .project-switcher,
body.is-home-view .topbar__status {
  display: none;
}

body.is-home-view #undoButton,
body.is-home-view #redoButton,
body.is-home-view #shareButton,
body.is-home-view #exportButton {
  display: none;
}

body.is-home-view .brand {
  justify-content: center;
  padding-left: 0;
}

body.is-home-view .brand__name {
  display: none;
}

.brand {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
}

.brand__mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.08em;
}

.brand__name {
  display: none;
  font-weight: 780;
  letter-spacing: -0.04em;
}

.project-switcher {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
}

.project-switcher select {
  min-width: 0;
  height: 38px;
  border-color: transparent;
  background: transparent;
  font-weight: 680;
}

.topbar__status {
  min-width: 0;
  padding: 0 12px;
}

.save-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.save-state.is-saving {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
  color: var(--warning);
}

.save-state.is-error {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  color: var(--danger);
}

.topbar__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 14px;
}

.topbar__utility {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.topbar-utility-button {
  min-height: 34px;
  padding: 0 10px;
}

.topbar-notification-count {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  margin-left: 3px;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.topbar-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 96px));
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 18px 50px var(--shadow-strong);
}

.topbar-popover[hidden] {
  display: none;
}

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

.topbar-popover__heading h2 {
  margin: 0;
  font-size: 15px;
}

.topbar-popover__heading p,
.topbar-popover__item p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.topbar-popover__list {
  display: grid;
  gap: 8px;
}

.topbar-popover__item {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg-soft);
}

.topbar-popover__item strong {
  font-size: 13px;
}

.topbar-popover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

@media (max-width: 820px) {
  .topbar-utility-button {
    display: none;
  }

  .topbar__utility::before {
    content: "帧场";
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 5px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
  }
}

.primary-button,
.secondary-button,
.danger-button,
.text-button,
.icon-button {
  min-height: 40px;
  border-radius: var(--radius-small);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 690;
  white-space: nowrap;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms var(--ease);
}

.primary-button {
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.primary-button:hover {
  background: var(--accent-strong);
}

.secondary-button {
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--text);
}

.secondary-button:hover,
.icon-button:hover,
.text-button:hover {
  border-color: var(--line-strong);
  background: var(--bg-soft);
}

.danger-button {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-elevated));
  color: var(--danger);
}

.text-button {
  min-height: 34px;
  border: 1px solid transparent;
  padding: 0 9px;
  background: transparent;
  color: var(--text-secondary);
}

.icon-button {
  display: inline-grid;
  min-width: 40px;
  place-items: center;
  border: 1px solid var(--line);
  padding: 0 9px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.compact {
  min-height: 34px;
  padding-inline: 10px;
}

.wide {
  width: 100%;
}

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

.button-row.compact-row {
  flex: 0 0 auto;
  margin: 0;
}

.assistant-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.assistant-actions .primary-button {
  grid-column: 1 / -1;
}

.assistant-skill-tools {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.assistant-skill-tools > .text-button {
  min-height: 30px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--bg-elevated);
  font-size: 10px;
}

.assistant-skill-tools > .text-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  color: var(--accent);
}

.assistant-selected-skill {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.assistant-selected-skill__chip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 999px;
  padding: 3px 4px 3px 7px;
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-elevated));
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  cursor: grab;
  transition: border-color 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.assistant-selected-skill[hidden] {
  display: none;
}

.assistant-selected-skill__chip.is-dragging {
  opacity: 0.52;
  transform: scale(0.98);
}

.assistant-selected-skill__chip > span:first-child {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-selected-skill__chip b {
  display: grid;
  width: 16px;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 8px;
}

.assistant-selected-skill__actions {
  display: inline-flex;
  gap: 2px;
}

.assistant-selected-skill__actions > button {
  display: grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
}

.assistant-selected-skill__actions > button:disabled {
  opacity: 0.3;
}

.assistant-skill-picker {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 70%, transparent);
}

.assistant-skill-picker[hidden] {
  display: none;
}

.assistant-skill-picker__heading {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 7px 9px 7px 12px;
}

.assistant-skill-picker__heading > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.assistant-skill-picker__heading strong {
  font-size: 12px;
}

.assistant-skill-picker__heading small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-skill-picker__search {
  margin: 8px;
}

.assistant-skill-picker__list {
  display: grid;
  max-height: 220px;
  gap: 4px;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.assistant-skill-picker__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px;
}

.assistant-skill-picker__item > button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 9px;
  background: var(--bg-soft);
  color: var(--text);
  text-align: left;
}

.assistant-skill-picker__item > button:first-child {
  display: grid;
  gap: 2px;
}

.assistant-skill-picker__item > button:first-child:hover,
.assistant-skill-picker__item.is-selected > button:first-child {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft));
}

.assistant-skill-picker__item strong,
.assistant-skill-picker__item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-skill-picker__item strong {
  font-size: 10px;
}

.assistant-skill-picker__item small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-skill-picker__item > button:last-child {
  width: 48px;
  padding-inline: 6px;
  color: var(--text-tertiary);
  font-size: 9px;
  text-align: center;
}

.assistant-skill-picker__empty {
  margin: 0;
  padding: 18px 10px;
  color: var(--text-tertiary);
  font-size: 10px;
  text-align: center;
}

.assistant-message-edit-state {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 7px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.assistant-form[data-message-editing="true"] .assistant-actions {
  grid-template-columns: 1fr 1fr;
}

.assistant-form[data-message-editing="true"] .assistant-actions .primary-button {
  grid-column: auto;
}

.assistant-reference-details {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg-elevated);
}

.assistant-reference-details > summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.assistant-reference-details > summary::-webkit-details-marker {
  display: none;
}

.assistant-reference-details > summary::after {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  content: "展开";
  font-size: 10px;
}

.assistant-reference-details[open] > summary::after {
  content: "收起";
}

.assistant-reference-details > summary span {
  font-size: 11px;
  font-weight: 720;
}

.assistant-reference-details > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-reference-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.assistant-reference-details .reference-box {
  border: 0;
  border-radius: 0;
}

.navigation {
  position: relative;
  z-index: 30;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  background: var(--bg-elevated);
}

.navigation__items {
  display: grid;
  min-height: 0;
  gap: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 8px;
  scrollbar-width: none;
}

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

.nav-item {
  position: relative;
  display: grid;
  min-height: 56px;
  place-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.nav-item:hover {
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.nav-item.is-active {
  border-color: var(--line);
  background: var(--bg-strong);
  color: var(--text);
}

.nav-item__icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 820;
}

.nav-item__count {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  line-height: 18px;
}

.navigation__settings {
  margin: 8px;
}

.main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.view {
  display: none;
  width: 100%;
  height: 100%;
}

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

.home-view {
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 25rem),
    var(--bg);
}

.home-content {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(42px, 7vh, 74px) 0 80px;
}

.home-hero {
  display: grid;
  width: min(620px, 100%);
  justify-items: center;
  margin: 0 auto clamp(48px, 7vh, 72px);
  text-align: center;
}

.home-section__heading > div > span {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 680;
}

.home-hero h1 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 720;
  letter-spacing: -0.045em;
}

.home-hero > p {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.65;
}

.home-composer {
  position: relative;
  display: grid;
  width: min(590px, 100%);
  min-height: 116px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  box-shadow:
    0 20px 60px color-mix(in srgb, var(--shadow) 68%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  text-align: left;
}

.home-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  box-shadow:
    0 22px 64px color-mix(in srgb, var(--shadow) 74%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.home-composer textarea {
  min-height: 58px;
  resize: none;
  border: 0;
  padding: 2px 4px;
  background: transparent;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: none;
}

.home-composer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-composer-tools {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
}

.home-composer-tools > button,
.home-submit {
  display: inline-flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 9px;
  background: var(--bg-soft);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.home-composer-tools > button:hover,
.home-composer-tools > button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: var(--bg-strong);
  color: var(--text);
}

.home-submit {
  width: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 17px;
}

.home-composer[aria-busy="true"] .home-submit {
  cursor: progress;
  opacity: 0.62;
}

.home-command-menu,
.home-composer-menu,
.assistant-command-menu {
  position: absolute;
  z-index: 20;
  right: 18px;
  bottom: 62px;
  left: 18px;
  max-height: 310px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 55px var(--shadow);
}

.home-composer-menu {
  position: absolute;
  z-index: 24;
  bottom: 58px;
  left: 12px;
  width: min(390px, calc(100% - 24px));
  max-height: 330px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 55px var(--shadow);
}

.home-composer-menu > button,
.home-composer-menu__asset,
.home-model-option {
  display: grid;
  width: 100%;
  gap: 3px;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.home-composer-menu > button:hover,
.home-composer-menu > button[aria-checked="true"],
.home-composer-menu__asset:hover,
.home-model-option:hover,
.home-model-option[aria-selected="true"] {
  background: var(--bg-soft);
}

.home-composer-menu strong,
.home-model-option strong {
  font-size: 11px;
}

.home-composer-menu small,
.home-model-option small {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

.home-composer-menu__divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}

.home-model-menu__modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  padding: 2px;
  border-radius: 9px;
  background: var(--bg-soft);
}

.home-model-menu__modes button {
  min-height: 29px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-model-menu__modes button[aria-selected="true"] {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 1px 4px var(--shadow);
}

.home-model-menu__list {
  display: grid;
  gap: 2px;
}

.home-model-option {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.home-model-option > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-model-option > span:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
}

.home-model-option > span:last-child small {
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--bg-soft);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.home-model-option > span[data-model-execution-status="verified"] small {
  background: color-mix(in srgb, var(--success) 12%, var(--bg-soft));
  color: var(--success);
}

.home-model-option > span[data-model-execution-status="restored"] small {
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-soft));
  color: var(--warning);
}

.home-model-menu__empty {
  margin: 0;
  padding: 14px 10px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-command-menu > button,
.assistant-command-menu > button {
  display: grid;
  width: 100%;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  padding: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.home-command-menu > button:hover,
.assistant-command-menu > button:hover,
.assistant-command-menu > button:focus-visible {
  background: var(--bg-soft);
}

.home-command-menu > button > span,
.assistant-command-menu > button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-strong);
  color: var(--accent);
}

.home-command-menu > button > div,
.assistant-command-menu > button > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-command-menu small,
.assistant-command-menu small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-form .field:has(#assistantPrompt) {
  position: relative;
}

.assistant-command-menu {
  right: 0;
  bottom: calc(100% - 30px);
  left: 0;
  z-index: 80;
}

.assistant-command-menu > p {
  margin: 0;
  padding: 12px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.home-skill-selection,
.home-reference-chips {
  display: flex;
  min-width: 0;
  gap: 6px;
  padding-top: 8px;
  overflow-x: auto;
}

.home-skill-selection:empty,
.home-reference-chips:empty {
  display: none;
}

.home-skill-selection > span,
.home-reference-chips > span {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 7px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
}

.home-skill-selection > span {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-soft));
  color: var(--text);
  cursor: grab;
}

.home-skill-selection > span.is-dragging {
  cursor: grabbing;
  opacity: 0.48;
}

.home-skill-selection > span::before {
  content: "技";
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-strong));
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
}

.home-skill-selection button,
.home-reference-chips button {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0;
  background: var(--bg-strong);
  color: var(--text-tertiary);
}

.home-starters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.home-starters button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-starters button:hover {
  color: var(--text);
  background: var(--bg-soft);
}

.home-starters button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  color: var(--text);
}

.home-section {
  margin-top: 48px;
}

.home-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.home-section__heading h2 {
  margin: 4px 0 0;
  font-size: 18px;
  letter-spacing: -0.025em;
}

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

.home-empty-state {
  display: grid;
  grid-column: 1 / -1;
  min-height: 112px;
  align-content: center;
  gap: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 20px;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  color: var(--text-secondary);
}

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

.home-empty-state span {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.55;
}

.home-project-card {
  display: grid;
  min-width: 0;
  min-height: 194px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 7px;
  background: var(--bg-elevated);
  color: var(--text);
  text-align: left;
  transition:
    transform 180ms var(--ease),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.home-project-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--shadow) 62%, transparent);
}

.home-project-card__open {
  display: grid;
  min-width: 0;
  grid-template-rows: 122px minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.home-project-card__open:hover {
  color: inherit;
}

.home-project-card__preview {
  position: relative;
  display: block;
  width: 100%;
  min-height: 122px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 48% 54%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 38%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--canvas);
  background-size: auto, 22px 22px, 22px 22px, auto;
  color: var(--accent);
}

.home-project-preview__node {
  position: absolute;
  display: grid;
  width: 40%;
  min-height: 24px;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 6px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  box-shadow: 0 4px 14px var(--shadow);
  color: var(--text-secondary);
  font-size: 7px;
  font-weight: 680;
  line-height: 1.2;
}

.home-project-preview__node:nth-child(1) { top: 24%; left: 8%; }
.home-project-preview__node:nth-child(2) { top: 52%; left: 52%; }
.home-project-preview__node:nth-child(3) { top: 14%; left: 56%; }
.home-project-preview__node:nth-child(4) { top: 65%; left: 12%; }

.home-project-preview__edge {
  position: absolute;
  top: 47%;
  left: 42%;
  width: 24%;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 52%, transparent);
  transform: rotate(14deg);
  transform-origin: left center;
}

.home-project-preview__empty {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-project-card__meta {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 0 4px;
}

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

.home-project-card small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-project-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 2px 1px;
}

.home-project-card__actions button {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 7px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-project-card__actions button:hover {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--text);
}

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

.home-work-discovery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.home-work-categories {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-work-categories::-webkit-scrollbar {
  display: none;
}

.home-work-categories button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  white-space: nowrap;
}

.home-work-categories button:hover,
.home-work-categories button.is-active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--text);
}

.home-work-search {
  display: grid;
  flex: 0 1 560px;
  grid-template-columns: 112px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 6px;
}

.home-work-search select,
.home-work-search input {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 10px;
}

.home-work-search button {
  min-height: 34px;
  padding: 0 11px;
  font-size: 10px;
}

.home-work-summary {
  min-height: 18px;
  margin-bottom: 9px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.home-work-load-more {
  display: block;
  min-width: 220px;
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
}

.home-work-load-more:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--text);
}

.home-work-load-more[hidden] {
  display: none;
}

.home-work-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elevated);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--shadow) 42%, transparent);
  transition:
    transform 180ms var(--ease),
    border-color 180ms ease;
}

.home-work-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  transform: translateY(-2px);
}

.home-work-card__preview {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 176px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
    linear-gradient(145deg, var(--canvas), var(--bg-strong));
  color: var(--text);
  text-align: left;
}

.home-work-card[data-result-type="text"] .home-work-card__preview,
.home-work-card[data-result-type="document"] .home-work-card__preview,
.home-work-card[data-result-type="generation"] .home-work-card__preview {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  padding: 20px;
}

.home-work-card[data-result-type="audio"] .home-work-card__preview {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  padding: 20px;
  background:
    radial-gradient(circle at 22% 30%, color-mix(in srgb, #56b5a7 24%, transparent), transparent 38%),
    linear-gradient(145deg, var(--canvas), var(--bg-strong));
}

.home-work-card__preview img,
.home-work-card__preview video {
  width: 100%;
  height: 176px;
  object-fit: cover;
}

.home-work-card__preview > small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.home-work-card__type {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-soft));
  color: var(--text);
  font-weight: 760;
}

.home-work-card__media-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(12, 16, 24, 0.72);
  color: #fff;
  font-size: 10px;
  backdrop-filter: blur(12px);
}

.home-work-card__empty {
  color: var(--text-tertiary);
  font-size: 11px;
}

.home-work-card__body {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 14px;
}

.home-work-card__eyebrow,
.home-work-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-work-card__eyebrow span {
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  color: var(--accent);
  font-size: 9px;
  font-weight: 760;
}

.home-work-card__eyebrow small,
.home-work-card__body > small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-work-card h3,
.home-work-card p {
  margin: 0;
}

.home-work-card h3 {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-work-card p {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-work-card__actions {
  justify-content: flex-start;
  margin-top: 3px;
}

.home-work-card__actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
}

.home-work-card__actions button:first-child {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  color: var(--text);
}

.home-creation-process {
  display: grid;
  gap: 18px;
}

.home-creation-process .modal__heading > div > span,
.home-creation-process__input > span,
.home-creation-process__heading > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.home-creation-process__input {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: var(--bg-soft);
}

.home-creation-process__input p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.home-creation-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
}

.home-creation-process__grid > section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
}

.home-creation-process__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.home-creation-process__heading small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.home-creation-process__steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-creation-process__steps li,
.home-creation-process__outputs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.home-creation-process__steps li > span,
.home-creation-process__outputs button > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 760;
}

.home-creation-process__steps li[data-step-status="completed"] > span {
  border-color: color-mix(in srgb, var(--success) 40%, var(--line));
  background: color-mix(in srgb, var(--success) 11%, var(--bg-soft));
  color: var(--success);
}

.home-creation-process__steps div,
.home-creation-process__outputs div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-creation-process__steps strong,
.home-creation-process__outputs strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-creation-process__steps small,
.home-creation-process__outputs small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.home-creation-process__outputs {
  display: grid;
  gap: 8px;
}

.home-creation-process__outputs button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: var(--bg-soft);
  text-align: left;
}

.home-creation-process__outputs button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

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

.home-skill-card {
  display: grid;
  min-height: 188px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--skill-tone, var(--accent)) 13%, transparent), transparent 42%),
    var(--bg-elevated);
  transition:
    transform 180ms var(--ease),
    border-color 180ms ease;
}

.home-skill-card:hover {
  border-color: color-mix(in srgb, var(--skill-tone, var(--accent)) 46%, var(--line));
  transform: translateY(-1px);
}

.home-skill-card[data-tone="1"] { --skill-tone: #6b98ef; }
.home-skill-card[data-tone="2"] { --skill-tone: #d79950; }
.home-skill-card[data-tone="3"] { --skill-tone: #8978de; }
.home-skill-card[data-tone="4"] { --skill-tone: #cd718e; }
.home-skill-card[data-tone="5"] { --skill-tone: #4dafaa; }

.home-skill-card__top,
.home-skill-card > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-skill-card__top > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--skill-tone, var(--accent)) 38%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--skill-tone, var(--accent)) 10%, var(--bg-soft));
  color: var(--text);
  font-weight: 800;
}

.home-skill-card small {
  color: color-mix(in srgb, var(--text) 64%, transparent);
  font-size: 10px;
}

.home-skill-card h3 {
  margin: 0;
  font-size: 15px;
}

.home-skill-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.home-skill-card > div:last-child > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-skill-card > div:last-child > button {
  flex: none;
  border-radius: 7px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--skill-tone, var(--accent)) 16%, var(--bg-strong));
  color: var(--text);
  font-size: 10px;
}

.feedback-modal {
  width: min(520px, calc(100vw - 32px));
}

.feedback-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  margin: 0 0 18px;
  padding: 0;
}

.feedback-types legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.feedback-types button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 12px;
}

.feedback-types button:hover,
.feedback-types button.is-active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-soft));
  color: var(--text);
}

.workspace-header-button--feedback {
  color: var(--text-secondary);
}

.workspace {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) var(--inspector-width);
}

.canvas-shell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: 50px minmax(0, 1fr);
  border-right: 1px solid var(--line);
}

.canvas-toolbar {
  position: relative;
  z-index: 20;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
  scrollbar-width: none;
}

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

.tool-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tool-group button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.tool-group button:hover,
.tool-group button.is-active {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--text);
}

.tool-group output {
  width: 46px;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
}

.canvas-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 72%, transparent) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 24px 24px;
  user-select: none;
  touch-action: none;
}

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

.canvas-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 2600px;
  transform-origin: 0 0;
  will-change: transform;
}

.edge-layer,
.node-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.edge-layer {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.edge-path {
  fill: none;
  pointer-events: stroke;
  stroke: color-mix(in srgb, var(--accent) 62%, var(--line-strong));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.edge-path.is-selected {
  stroke: var(--accent-strong);
  stroke-width: 4;
}

.node-layer {
  z-index: 2;
  pointer-events: none;
}

.canvas-node {
  position: absolute;
  display: grid;
  min-width: 220px;
  min-height: 140px;
  pointer-events: auto;
  grid-template-rows: 40px minmax(0, 1fr);
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 18px 48px var(--shadow);
  transform: translate3d(var(--node-x), var(--node-y), 0);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.canvas-node:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
}

.canvas-node.is-selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent),
    0 18px 52px var(--shadow);
}

.canvas-node.is-grouped .node-header {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.canvas-node[data-node-type="comment"] {
  border-color: color-mix(in srgb, var(--warning) 62%, var(--line));
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-elevated));
  box-shadow: 0 14px 36px var(--shadow);
}

.canvas-node[data-node-type="comment"][data-comment-color="sage"] {
  border-color: color-mix(in srgb, var(--success) 62%, var(--line));
  background: color-mix(in srgb, var(--success) 11%, var(--bg-elevated));
}

.canvas-node[data-node-type="comment"][data-comment-color="rose"] {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: color-mix(in srgb, var(--danger) 9%, var(--bg-elevated));
}

.canvas-node[data-node-type="comment"] .node-header {
  cursor: move;
}

.node-group-badge {
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-soft));
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
}

.canvas-marquee {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.canvas-multi-selection {
  position: absolute;
  z-index: 24;
  top: 62px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 6px;
  background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  box-shadow: 0 14px 40px var(--shadow);
  transform: translateX(-50%);
}

.canvas-multi-selection strong {
  padding: 0 7px;
  font-size: 10px;
}

.canvas-multi-selection button {
  min-height: 28px;
  border-radius: 7px;
  padding: 0 8px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 9px;
}

.canvas-multi-selection button.is-danger {
  color: var(--danger);
}

.canvas-node.is-dragging {
  z-index: 10;
  box-shadow: 0 26px 70px var(--shadow);
  transition: none;
}

.node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
  cursor: move;
}

.node-type {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 780;
}

.node-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-status {
  color: var(--text-tertiary);
  font-size: 10px;
}

.node-status[data-status="running"] {
  color: var(--warning);
}

.node-status[data-status="succeeded"] {
  color: var(--success);
}

.node-status[data-status="failed"] {
  color: var(--danger);
}

.node-body {
  position: relative;
  min-height: 0;
  overflow: auto;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  user-select: text;
}

.node-body--text,
.node-body--document,
.node-body--generation {
  padding: 14px;
  white-space: pre-wrap;
}

.node-body--comment {
  padding: 0;
}

.canvas-comment-note {
  display: grid;
  min-height: 100%;
  align-content: space-between;
  gap: 12px;
  padding: 14px;
}

.canvas-comment-note p {
  margin: 0;
  white-space: pre-wrap;
}

.canvas-comment-note small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.node-body img,
.node-body video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: contain;
  background: var(--canvas);
}

.node-body audio {
  display: block;
  width: calc(100% - 24px);
  margin: 24px 12px;
}

.node-body__empty {
  display: grid;
  height: 100%;
  min-height: 100px;
  place-items: center;
  padding: 20px;
  color: var(--text-tertiary);
  text-align: center;
}

.node-port {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 150ms ease;
}

.node-port__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  pointer-events: none;
}

.canvas-node:hover .node-port,
.canvas-node.is-selected .node-port,
.canvas-viewport.is-connecting .node-port {
  opacity: 1;
}

.node-resize {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}

.node-resize::after {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--text-tertiary);
  border-bottom: 1px solid var(--text-tertiary);
  content: "";
}

.canvas-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(390px, calc(100% - 40px));
  justify-items: center;
  transform: translate(-50%, -52%);
  color: var(--text-secondary);
  text-align: center;
}

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

.canvas-empty__mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 28px;
}

.canvas-empty h1 {
  margin: 20px 0 8px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.045em;
}

.canvas-empty p {
  max-width: 38ch;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.65;
}

.canvas-empty__actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.connection-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  padding: 9px 12px;
  background: var(--bg-elevated);
  box-shadow: 0 12px 30px var(--shadow);
  color: var(--text-secondary);
  font-size: 12px;
}

.inspector {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-elevated);
}

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

.panel-tabs button {
  position: relative;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 680;
}

.panel-tabs button.is-active {
  color: var(--text);
}

.panel-tabs button.is-active::after {
  position: absolute;
  right: 15px;
  bottom: -1px;
  left: 15px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.panel-section {
  display: none;
  height: calc(100% - 50px);
  overflow-y: auto;
  padding: 18px;
}

.panel-section.is-active {
  display: block;
}

.panel-heading {
  margin-bottom: 20px;
}

.panel-heading h2 {
  margin: 0 0 7px;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.panel-heading p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.55;
}

.panel-heading--actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.conversation-list {
  display: grid;
  max-height: 220px;
  gap: 8px;
  overflow-y: auto;
  margin: -6px 0 16px;
}

.assistant-session-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  gap: 6px;
  margin: -4px 0 12px;
}

.assistant-session-toolbar select,
.assistant-session-toolbar button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
}

.assistant-session-toolbar select {
  min-width: 0;
  padding: 0 8px;
}

.assistant-session-toolbar button {
  padding: 0 8px;
}

.assistant-session-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.assistant-session-utilities {
  display: grid;
  gap: 6px;
  margin: -5px 0 12px;
}

.assistant-message-search,
.assistant-session-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.assistant-message-search input,
.assistant-message-search button,
.assistant-session-copy select,
.assistant-session-copy button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 0 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
}

.assistant-session-copy button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.assistant-message-search-results {
  display: grid;
  max-height: 210px;
  gap: 4px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 5px;
  background: var(--bg-soft);
}

.assistant-message-search-results[hidden] {
  display: none;
}

.assistant-message-search-results > button {
  display: grid;
  gap: 3px;
  border-radius: 7px;
  padding: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.assistant-message-search-results > button:hover,
.assistant-message-search-results > button:focus-visible {
  background: var(--bg-elevated);
}

.assistant-message-search-results strong,
.assistant-message-search-results small,
.assistant-message-search-results span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-message-search-results strong {
  font-size: 10px;
}

.assistant-message-search-results small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-message-search-results span {
  color: var(--text-secondary);
  font-size: 10px;
}

.assistant-attachment-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  margin-top: 8px;
}

.assistant-attachment-manager select,
.assistant-attachment-manager button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 9px;
}

.assistant-attachment-manager select {
  padding: 0 7px;
}

.assistant-attachment-manager button {
  padding: 0 7px;
}

.assistant-attachment-list {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.assistant-attachment-list > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: var(--bg-soft);
}

.assistant-attachment-list i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
}

.assistant-attachment-list article > div {
  min-width: 0;
}

.assistant-attachment-list strong {
  display: block;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-attachment-list article small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-attachment-list .assistant-attachment-actions {
  display: flex;
  gap: 3px;
}

.assistant-attachment-list button {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 5px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 8px;
}

.assistant-attachment-list > small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-attachment-recovery {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line));
  border-radius: 8px;
  padding: 7px;
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-soft));
}

.assistant-attachment-recovery strong,
.assistant-attachment-recovery p {
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

.assistant-attachment-recovery p {
  color: var(--text-tertiary);
}

.assistant-attachment-recovery > div {
  display: flex;
  gap: 5px;
}

.assistant-attachment-recovery button {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 7px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 8px;
}

.conversation-message {
  display: grid;
  gap: 6px;
  border-left: 2px solid var(--line-strong);
  padding: 8px 10px;
  background: var(--bg);
}

.conversation-message[data-role="user"] {
  border-left-color: var(--accent);
}

.conversation-message.is-search-match {
  outline: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
}

.conversation-message > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.conversation-message strong,
.conversation-message time {
  font-size: 9px;
}

.conversation-message time {
  color: var(--text-tertiary);
}

.conversation-message p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.conversation-message button {
  width: fit-content;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font-size: 9px;
}

.conversation-message__actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.conversation-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius-small);
  padding: 10px;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.5;
}

.assistant-form,
.property-form {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.field label,
.search-field > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 680;
}

.field__hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.55;
}

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

.reference-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 11px 12px;
  background: var(--bg);
}

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

.reference-box strong {
  font-size: 11px;
}

.reference-box span {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.inline-status {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.inline-status.is-error {
  color: var(--danger);
}

.inline-status.is-success {
  color: var(--success);
}

.tool-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 13px;
  background: var(--bg);
}

.tool-card > div:first-child {
  display: grid;
  gap: 5px;
}

.tool-card strong {
  font-size: 12px;
}

.tool-card p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.tool-card output {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.tool-card output.is-error {
  color: var(--danger);
}

.tool-card output.is-success {
  color: var(--success);
}

.connection-list {
  display: grid;
  gap: 7px;
}

.connection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
}

.connection-item span {
  min-width: 0;
  flex: 1;
}

.connection-item select {
  max-width: 58px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 3px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
}

.connection-item button {
  padding: 3px 5px;
  background: transparent;
  color: var(--danger);
  font-size: 10px;
}

.connection-empty {
  color: var(--text-tertiary);
  font-size: 10px;
}

.empty-panel,
.empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
}

.history-list {
  display: grid;
  gap: 9px;
}

.version-history {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 10px;
  background: var(--bg-soft);
}

.version-history__heading,
.version-history__list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.version-history__heading > div,
.version-history__list article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.version-history__heading small,
.version-history__list small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.version-history__list {
  display: grid;
  gap: 6px;
}

.version-history__notice,
.version-history__diagnostic {
  border-radius: 7px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg));
  color: var(--warning);
  font-size: 9px;
  line-height: 1.45;
}

.version-history__diagnostic {
  background: color-mix(in srgb, var(--danger) 9%, var(--bg));
  color: var(--danger) !important;
}

.version-history__list article {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.version-history__list article.is-invalid {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}

.version-history__list button {
  flex: none;
  border-radius: 7px;
  padding: 5px 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.version-history__list strong em {
  border-radius: 999px;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 8px;
  font-style: normal;
}

.version-history__list strong em.is-error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.version-history__actions {
  display: flex !important;
  grid-auto-flow: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px !important;
}

.version-history button.is-danger,
.version-trash button.is-danger {
  color: var(--danger);
}

.version-diff {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--bg);
}

.version-diff--error {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  color: var(--danger);
  font-size: 9px;
  line-height: 1.45;
}

.version-diff__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.version-diff__summary span {
  display: grid;
  gap: 2px;
  border-radius: 6px;
  padding: 6px;
  background: var(--bg-soft);
  color: var(--text-tertiary);
  font-size: 8px;
}

.version-diff__summary strong {
  color: var(--text);
  font-size: 11px;
}

.version-diff__nodes {
  display: grid;
  gap: 5px;
}

.version-diff__nodes > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.version-diff__nodes span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.version-diff__nodes small,
.version-diff > p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
}

.version-diff__fields {
  display: grid !important;
  gap: 3px !important;
  margin-top: 3px;
}

.version-diff__fields i {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  color: var(--text-tertiary);
  font-size: 8px;
  font-style: normal;
}

.version-diff__fields b {
  color: var(--text-secondary);
}

.version-diff__fields del,
.version-diff__fields ins {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-diff__fields del {
  color: var(--danger);
}

.version-diff__fields ins {
  color: var(--success);
}

.version-trash {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.version-trash summary {
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 10px;
}

.version-trash__list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.version-trash__list article,
.version-trash__list article > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.version-trash__list article {
  justify-content: space-between;
}

.version-trash__list article > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.version-trash__list small {
  color: var(--text-tertiary);
  font-size: 8px;
}

.history-records {
  display: grid;
  gap: 9px;
}

.history-records__title {
  color: var(--text-secondary);
  font-size: 12px;
}

.history-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 11px;
  background: var(--bg);
}

.history-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-item strong {
  font-size: 12px;
}

.history-item time,
.history-item p {
  color: var(--text-tertiary);
  font-size: 10px;
}

.history-item p {
  margin: 7px 0 0;
  line-height: 1.5;
}

.content-view {
  height: 100%;
  overflow-y: auto;
  padding: 36px clamp(22px, 4vw, 58px) 64px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 28rem),
    var(--bg);
}

#view-projects {
  padding: 26px clamp(20px, 3vw, 42px) 58px;
  background: var(--bg);
}

.project-content-header {
  width: min(1120px, 100%);
  align-items: center;
  margin-bottom: 18px;
}

.project-heading-main,
.project-top-tools {
  display: flex;
  min-width: 0;
  align-items: center;
}

.project-heading-main {
  gap: 10px;
}

#view-projects .project-heading-main h1 {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.project-heading-main p {
  display: none;
}

.project-back-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 23px;
}

.project-top-tools {
  justify-content: flex-end;
  gap: 10px;
}

.project-top-tools .button-row {
  flex-wrap: nowrap;
}

.project-top-tools .secondary-button,
.project-top-tools .primary-button {
  min-height: 36px;
  padding-inline: 12px;
  white-space: nowrap;
}

#createProjectButton {
  display: none;
}

.project-search-field {
  width: 240px;
}

.project-search-field input,
.project-sort-select select {
  min-height: 36px;
  border-radius: 999px;
  background: var(--bg-elevated);
}

.project-sort-select {
  min-width: 118px;
  gap: 0;
}

#view-projects .folder-strip,
#view-projects .project-bulk-bar,
#view-projects .project-grid {
  width: min(1120px, 100%);
}

#view-projects .folder-strip {
  margin-bottom: 14px;
}

#view-projects .project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#view-projects .project-card,
#view-projects .project-create-card {
  min-height: 210px;
  border-radius: 14px;
}

#view-projects .project-card {
  grid-template-rows: 140px minmax(68px, auto);
  box-shadow: none;
}

#view-projects .project-create-card {
  border-style: solid;
  background: var(--bg-elevated);
}

#view-projects .project-card__body {
  position: relative;
  min-height: 68px;
  padding: 10px 12px;
}

#view-projects .project-card__body p {
  margin-top: 5px;
}

#view-projects .project-card .card-actions {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 4;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  box-shadow: 0 8px 24px var(--shadow);
}

#view-projects .project-card .card-actions button {
  min-height: 25px;
  border: 0;
  padding-inline: 6px;
}

.content-header {
  display: flex;
  max-width: 1320px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 30px;
}

.content-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 740;
  letter-spacing: -0.055em;
}

.content-header p {
  max-width: 55ch;
  margin: 9px 0 0;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.6;
}

.filter-bar {
  display: flex;
  max-width: 1320px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto 20px;
}

.compact-select {
  display: grid;
  min-width: 132px;
  gap: 7px;
}

.compact-select > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 680;
}

.search-field {
  display: grid;
  width: min(380px, 100%);
  gap: 7px;
}

.segmented {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  background: var(--bg-elevated);
}

.segmented button {
  min-height: 32px;
  border-radius: 7px;
  padding: 0 11px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
}

.segmented button.is-active {
  background: var(--bg-strong);
  color: var(--text);
}

.segmented.standalone {
  width: fit-content;
  max-width: 1320px;
  margin: 0 auto 20px;
}

.folder-strip {
  display: flex;
  max-width: 1320px;
  gap: 8px;
  margin: 0 auto 18px;
  overflow-x: auto;
}

.folder-chip {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.folder-chip-wrap {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.folder-chip-wrap:has(.folder-chip-action) .folder-chip {
  border-radius: 999px 0 0 999px;
}

.folder-chip-action {
  min-height: 36px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  padding: 0 10px 0 8px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-size: 10px;
}

.folder-chip-action:hover {
  color: var(--text);
}

.folder-chip.is-active {
  border-color: var(--accent);
  color: var(--text);
}

.project-grid,
.asset-grid,
.skill-grid {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.project-card,
.asset-card,
.skill-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow) 55%, transparent);
  transition:
    border-color 180ms ease,
    transform 220ms var(--ease),
    box-shadow 220ms ease;
}

.project-card:hover,
.asset-card:hover,
.skill-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 18px 42px var(--shadow);
  transform: translateY(-2px);
}

.asset-card[draggable="true"] {
  cursor: grab;
}

.asset-card[draggable="true"]:active,
.asset-card.is-dragging {
  cursor: grabbing;
  opacity: 0.68;
  transform: scale(0.985);
}

.project-card {
  display: grid;
  min-height: 190px;
  grid-template-rows: 1fr auto;
}

.project-create-card {
  display: grid;
  min-height: 190px;
  place-content: center;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  color: var(--text-secondary);
  text-align: center;
}

.project-create-card:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  color: var(--text);
}

.project-create-card > span {
  color: var(--accent);
  font-size: 28px;
  font-weight: 300;
}

.project-create-card > small {
  color: var(--text-tertiary);
}

.project-card__select {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  color: var(--accent-ink);
}

.project-card__select[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.project-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.project-card__preview {
  position: relative;
  display: block;
  min-height: 140px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--canvas);
  background-size: auto, 22px 22px, 22px 22px, auto;
}

.project-card__body,
.skill-card__body {
  padding: 14px;
}

.project-card__body h3,
.skill-card__body h3 {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card__title,
.skill-card__title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-card__title h3,
.skill-card__title h3 {
  min-width: 0;
}

.project-card__title button {
  flex: 0 0 auto;
  padding: 3px 5px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 9px;
}

.project-card__body p,
.skill-card__body p {
  margin: 7px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  gap: 5px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.project-card .card-actions {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.project-card:hover .card-actions,
.project-card:focus-within .card-actions {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .project-card .card-actions {
    opacity: 1;
    transform: none;
  }
}

.project-bulk-bar {
  display: flex;
  max-width: 1320px;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px auto 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 7px 10px 7px 14px;
  background: var(--bg-elevated);
}

.card-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 9px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
}

.card-actions button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.asset-card {
  display: grid;
  grid-template-rows: 170px auto;
}

.canvas-viewport.is-asset-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
  background-color: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

.asset-folder-strip,
.asset-bulk-bar {
  display: flex;
  max-width: 1320px;
  align-items: center;
  gap: 8px;
  margin: 0 auto 14px;
  overflow-x: auto;
}

.asset-folder-strip > button,
.asset-folder-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.asset-folder-strip button {
  min-height: 32px;
  border: 1px solid var(--line);
  padding: 0 11px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-size: 10px;
}

.asset-folder-strip > button {
  border-radius: 999px;
}

.asset-folder-chip button:first-child {
  border-radius: 999px 0 0 999px;
}

.asset-folder-chip button:not(:first-child) {
  border-left: 0;
}

.asset-folder-chip button:nth-child(2) {
  color: var(--text-tertiary);
  padding-inline: 8px;
}

.asset-folder-chip button:last-child {
  border-radius: 0 999px 999px 0;
  padding-inline: 8px;
}

.asset-folder-strip button.is-active {
  border-color: var(--accent);
  color: var(--text);
}

.asset-bulk-bar {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  padding: 6px 9px;
  background: var(--bg-elevated);
}

.asset-bulk-bar strong {
  margin-right: auto;
  font-size: 11px;
}

.asset-bulk-bar select,
.asset-bulk-bar button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 9px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
}

.asset-bulk-bar .is-danger {
  color: var(--danger);
}

.asset-upload-recovery {
  display: grid;
  max-width: 1320px;
  gap: 7px;
  margin: 0 auto 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 56%, var(--line));
  border-radius: var(--radius-small);
  padding: 11px 13px;
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-elevated));
}

.asset-upload-recovery strong {
  font-size: 12px;
}

.asset-upload-recovery p,
.asset-upload-recovery ul {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.asset-upload-recovery ul {
  padding-left: 17px;
}

.asset-upload-recovery__actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.asset-upload-recovery button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 9px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
}

.asset-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.asset-card__select {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  box-shadow: 0 4px 12px var(--shadow);
}

.asset-card__select input {
  width: 14px;
  height: 14px;
  min-height: 0;
}

.asset-card__select span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.asset-grid.is-list-view {
  grid-template-columns: 1fr;
}

.asset-grid.is-list-view .asset-card {
  min-height: 96px;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-rows: auto;
}

.asset-grid.is-list-view .asset-card__media {
  min-height: 96px;
}

.asset-grid.is-list-view .asset-card__body {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.asset-card__media {
  display: grid;
  min-height: 170px;
  place-items: center;
  overflow: hidden;
  background: var(--canvas);
}

.asset-card__media img,
.asset-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-card__thumbnail-wrap,
.asset-card__audio-preview {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  place-items: center;
}

.asset-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-card__audio-preview {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
}

.asset-card__audio-preview .asset-card__thumbnail {
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  object-fit: cover;
}

.asset-card__audio-preview audio {
  width: 100%;
}

.asset-card__media-type {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--bg-elevated) 62%, transparent);
  border-radius: 999px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
}

.asset-card__thumbnail-fallback {
  padding: 12px;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
}

.asset-card__media audio {
  width: calc(100% - 24px);
}

.asset-card__file {
  display: grid;
  width: 64px;
  height: 76px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 13px;
  font-weight: 760;
}

.asset-card__body {
  padding: 12px;
}

.asset-card__body strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card__body small {
  display: block;
  margin-top: 5px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.asset-tags {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  overflow: hidden;
  flex-wrap: wrap;
}

.asset-tags span {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--accent);
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-card {
  display: grid;
  min-height: 220px;
  grid-template-rows: 70px minmax(0, 1fr);
}

.skill-card__symbol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 17%, var(--bg-soft)), var(--bg-soft));
}

.skill-card__symbol span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--accent);
  font-weight: 820;
}

.skill-card__symbol small {
  color: var(--text-secondary);
  font-size: 10px;
}

.skill-card__body {
  display: flex;
  flex-direction: column;
}

.skill-card__body p {
  flex: 1;
}

.skill-card__body > small {
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-examples {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-examples summary {
  cursor: pointer;
}

.skill-examples ul {
  margin: 7px 0 0;
  padding-left: 16px;
}

.skill-market-view {
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 34%),
    var(--bg);
}

.skill-market-header {
  margin-bottom: 20px;
}

.skill-launchpad {
  position: relative;
  display: grid;
  width: min(920px, 100%);
  gap: 14px;
  margin: 0 auto 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  box-shadow: var(--shadow-sm);
}

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

.skill-launchpad__intro {
  display: grid;
  gap: 4px;
}

.skill-launchpad__intro h2,
.skill-launchpad__intro p {
  margin: 0;
}

.skill-launchpad__intro h2 {
  font-size: clamp(20px, 3vw, 28px);
}

.skill-launchpad__intro p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.skill-launchpad__composer {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-elevated);
}

.skill-launchpad__composer textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  outline: none;
}

.skill-launchpad__selection,
.skill-launchpad__references {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-launchpad__selection:empty,
.skill-launchpad__references:empty {
  display: none;
}

.skill-launchpad__selection > span,
.skill-launchpad__references > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
}

.skill-launchpad__selection button,
.skill-launchpad__references button {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
}

.skill-launchpad__footer,
.skill-launchpad__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-launchpad__footer {
  justify-content: space-between;
}

.skill-launchpad__tools button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
}

.skill-launchpad__composer > .home-composer-menu {
  top: auto;
  right: 13px;
  bottom: 58px;
  left: 13px;
  z-index: 20;
  max-height: min(420px, 54vh);
  overflow: auto;
}

.skill-launchpad__composer[aria-busy="true"] {
  opacity: 0.72;
}

.skill-market-switch {
  display: flex;
  width: min(1320px, 100%);
  gap: 24px;
  margin: 0 auto 20px;
  border-bottom: 1px solid var(--line);
}

.skill-market-switch button,
.skill-category-chips button {
  min-height: 40px;
  border-radius: 9px;
  padding: 0 15px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
}

.skill-market-switch button {
  position: relative;
  border-radius: 0;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 700;
}

.skill-market-switch button.is-active {
  color: var(--text);
}

.skill-market-switch button.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

.skill-category-chips button.is-active {
  background: var(--bg-strong);
  color: var(--text);
}

.skill-mine-toolbar {
  display: grid;
  width: min(1320px, 100%);
  gap: 14px;
  margin: 0 auto 18px;
}

.skill-mine-tabs,
.skill-mine-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-mine-tabs button,
.skill-mine-status button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 13px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
}

.skill-mine-tabs button.is-active,
.skill-mine-status button.is-active {
  border-color: var(--line-strong);
  background: var(--bg-strong);
  color: var(--text);
}

.skill-mine-tabs span,
.skill-mine-status span {
  margin-left: 4px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.skill-runtime-summary {
  display: flex;
  width: min(1320px, 100%);
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin: -7px auto 14px;
  overflow-x: auto;
  color: var(--text-secondary);
  font-size: 12px;
  scrollbar-width: thin;
}

.skill-runtime-summary span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.skill-runtime-summary strong {
  color: var(--text);
}

.skill-runtime-summary.sr-only {
  display: block;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skill-category-chips {
  display: flex;
  max-width: 1320px;
  gap: 5px;
  margin: 0 auto 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.skill-category-chips button {
  flex: 0 0 auto;
  border: 1px solid transparent;
}

.skill-category-chips button.is-active {
  border-color: var(--line-strong);
}

.skill-market-filters {
  align-items: center;
  flex-wrap: wrap;
}

.skill-market-filters .search-field {
  width: min(440px, 100%);
}

.skill-usability-filters {
  flex: 0 0 auto;
}

.skill-usability-filters[hidden] {
  display: none;
}

.skill-usability-filters button[data-skill-usability-filter="usable"].is-active {
  color: var(--success);
}

.skill-usability-filters button[data-skill-usability-filter="development"].is-active {
  color: var(--warning);
}

.skill-pagination {
  display: flex;
  width: min(1320px, 100%);
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

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

.skill-pagination .secondary-button {
  min-width: 184px;
}

.skill-quality-workbench {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.skill-quality-workbench__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 22px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)),
      var(--bg-elevated) 62%
    );
}

.skill-quality-workbench__header h2 {
  margin: 5px 0 7px;
  font-size: clamp(20px, 2.4vw, 28px);
}

.skill-quality-workbench__header p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}

.skill-quality-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--bg-elevated);
}

.skill-quality-summary article {
  display: grid;
  min-width: 0;
  gap: 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}

.skill-quality-summary article:last-child {
  border-right: 0;
}

.skill-quality-summary span {
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-quality-summary strong {
  color: var(--text);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.skill-quality-campaign {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) minmax(280px, 1.6fr) minmax(150px, 0.7fr) auto;
  align-items: end;
  gap: 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 16px 20px;
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--accent) 5%, var(--bg-soft)),
      var(--bg-elevated) 58%
    );
}

.skill-quality-campaign__intro {
  display: grid;
  gap: 4px;
}

.skill-quality-campaign__intro strong {
  font-size: 12px;
}

.skill-quality-campaign__intro small,
.skill-quality-campaign .field > span {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.55;
}

.skill-quality-campaign .field {
  margin: 0;
}

.skill-quality-campaign textarea {
  min-height: 58px;
  resize: vertical;
}

.skill-quality-campaign .primary-button {
  min-height: 38px;
  white-space: nowrap;
}

.skill-quality-layout {
  display: grid;
  min-height: 650px;
  grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.skill-quality-queue {
  display: grid;
  min-width: 0;
  max-height: 780px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  border-right: 1px solid var(--line);
  padding: 16px;
  background: color-mix(in srgb, var(--bg-soft) 76%, var(--bg-elevated));
}

.skill-quality-session {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-elevated));
}

.skill-quality-session > div:first-child,
.skill-quality-session .field {
  display: grid;
  gap: 4px;
}

.skill-quality-session strong {
  color: var(--text);
  font-size: 11px;
}

.skill-quality-session small,
.skill-quality-session .field > span {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.55;
}

.skill-quality-session .field {
  margin: 0;
}

.skill-quality-session__selectors {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.skill-quality-session__selectors .compact-select {
  width: 100%;
  min-width: 0;
}

.skill-quality-session > .text-button {
  justify-self: start;
}

.skill-quality-queue .search-field {
  width: 100%;
}

.skill-quality-queue .compact-select {
  min-width: 96px;
}

.skill-quality-queue__list {
  display: grid;
  min-height: 0;
  grid-column: 1 / -1;
  align-content: start;
  gap: 7px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.skill-quality-queue__item {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  background: var(--bg-elevated);
  color: var(--text);
  text-align: left;
}

.skill-quality-queue__item:hover,
.skill-quality-queue__item.is-active {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.skill-quality-queue__item.is-active {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
  box-shadow: inset 3px 0 0 var(--accent);
}

.skill-quality-queue__item > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.skill-quality-queue__item strong,
.skill-quality-queue__item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-quality-queue__item strong {
  font-size: 11px;
}

.skill-quality-queue__item small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.skill-quality-queue__item em,
.skill-quality-badge,
.skill-usability-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--bg);
  color: var(--text-tertiary);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.skill-card__badges {
  position: relative;
  z-index: 4;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

[data-usability-status="usable"].skill-usability-badge {
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  background: color-mix(in srgb, var(--success) 9%, var(--bg-elevated));
  color: var(--success);
}

[data-usability-status="partial"].skill-usability-badge,
[data-usability-status="executed"].skill-usability-badge {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
  color: var(--accent);
}

[data-usability-status="development"].skill-usability-badge {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-elevated));
  color: var(--warning);
}

[data-usability-status="blocked"].skill-usability-badge {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-elevated));
  color: var(--danger);
}

[data-quality-status="passed"].skill-quality-badge,
.skill-quality-queue__item[data-quality-status="passed"] em {
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  background: color-mix(in srgb, var(--success) 9%, var(--bg-elevated));
  color: var(--success);
}

[data-quality-status="needs-work"].skill-quality-badge,
.skill-quality-queue__item[data-quality-status="needs-work"] em {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-elevated));
  color: var(--danger);
}

[data-quality-status="stale"].skill-quality-badge,
.skill-quality-queue__item[data-quality-status="stale"] em,
[data-quality-status="unattested"].skill-quality-badge,
.skill-quality-queue__item[data-quality-status="unattested"] em {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-elevated));
  color: var(--warning);
}

.skill-quality-form {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 16px;
  padding: 24px;
}

.skill-quality-form[inert] {
  opacity: 0.55;
}

.skill-quality-form__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 17px;
}

.skill-quality-form__intro h3 {
  margin: 5px 0 7px;
  font-size: 19px;
}

.skill-quality-form__intro p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.7;
}

.skill-quality-form__intro > small {
  grid-column: 1 / -1;
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-quality-conflicts {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 54%, var(--line));
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-elevated));
}

.skill-quality-conflicts__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.skill-quality-conflicts__heading > div {
  display: grid;
  gap: 4px;
}

.skill-quality-conflicts__heading strong {
  font-size: 12px;
}

.skill-quality-conflicts__heading small,
.skill-quality-conflict-card small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.55;
}

.skill-quality-conflict-card {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--line));
  border-radius: 10px;
  padding: 11px;
  background: var(--bg-elevated);
}

.skill-quality-conflict-card > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skill-quality-conflict-card p {
  max-height: 5.4em;
  margin: 0;
  overflow: auto;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.skill-quality-conflict-card .text-button {
  justify-self: start;
}

.skill-machine-evidence {
  display: grid;
  min-width: 0;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 12px;
  padding: 15px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 5%, var(--bg-soft)),
      var(--bg-soft) 70%
    );
}

.skill-machine-evidence > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.skill-machine-evidence__heading,
.skill-machine-evidence > footer,
.skill-machine-evidence__input summary,
.skill-machine-evidence__artifact summary,
.skill-machine-evidence__artifact footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.skill-machine-evidence__heading > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.skill-machine-evidence__heading strong {
  font-size: 12px;
}

.skill-machine-evidence__heading small,
.skill-machine-evidence > footer small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.skill-machine-evidence__heading > span,
.skill-machine-evidence__facts > span {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 9px;
  white-space: nowrap;
}

.skill-machine-evidence [data-status="succeeded"] {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
  color: var(--success);
}

.skill-machine-evidence [data-status="failed"] {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  color: var(--danger);
}

.skill-machine-evidence__facts {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-machine-evidence__review-progress {
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 9px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--warning) 7%, var(--bg-elevated));
  color: var(--warning);
  font-size: 10px;
  font-weight: 700;
}

.skill-machine-evidence__review-progress[data-status="succeeded"] {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
  background: color-mix(in srgb, var(--success) 7%, var(--bg-elevated));
  color: var(--success);
}

.skill-machine-evidence__input,
.skill-machine-evidence__artifact {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-elevated);
}

.skill-machine-evidence__input summary,
.skill-machine-evidence__artifact summary {
  cursor: pointer;
  padding: 10px;
  list-style: none;
}

.skill-machine-evidence__input summary::-webkit-details-marker,
.skill-machine-evidence__artifact summary::-webkit-details-marker {
  display: none;
}

.skill-machine-evidence__input summary > span,
.skill-machine-evidence__artifact summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.skill-machine-evidence__input summary strong,
.skill-machine-evidence__artifact summary strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-machine-evidence__input summary small,
.skill-machine-evidence__artifact summary small {
  color: var(--text-tertiary);
  font-size: 8px;
}

.skill-machine-evidence__input summary em,
.skill-machine-evidence__artifact summary em {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
}

.skill-machine-evidence__input[open] summary,
.skill-machine-evidence__artifact[open] summary {
  border-bottom: 1px solid var(--line);
}

.skill-machine-evidence__input pre,
.skill-machine-evidence__artifact pre {
  overflow: auto;
  max-height: 360px;
  margin: 0;
  padding: 12px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.skill-machine-evidence__artifacts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.skill-machine-evidence__artifact footer {
  align-items: flex-start;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}

.skill-machine-evidence__artifact footer small {
  overflow-wrap: anywhere;
  color: var(--text-tertiary);
  font-size: 8px;
  line-height: 1.45;
}

.skill-machine-evidence > footer {
  align-items: flex-end;
}

.skill-quality-scores {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  background: var(--bg-soft);
}

.skill-quality-scores legend {
  padding: 0 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.skill-quality-scores label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 10px;
}

.skill-quality-scores select {
  width: 100%;
}

.skill-quality-confirmation {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 11px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-soft));
}

.skill-quality-confirmation:has(input:disabled) {
  border-color: var(--line);
  background: var(--bg-soft);
  opacity: 0.72;
}

.skill-card__title .skill-quality-badge {
  position: relative;
  z-index: 4;
}

.skill-legacy-category {
  display: none;
}

.skill-grid {
  max-width: 1440px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}

.skill-card {
  min-height: 150px;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: none;
  border-radius: 12px;
  box-shadow: none;
}

.skill-card__poster {
  --skill-poster-tone: var(--accent);
  position: relative;
  display: grid;
  min-height: 100%;
  align-content: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 72% 26%, color-mix(in srgb, var(--skill-poster-tone) 34%, transparent), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--skill-poster-tone) 20%, var(--bg-strong)), var(--bg-soft) 74%);
}

.skill-card__poster[data-skill-poster="提示词"],
.skill-detail-poster[data-skill-poster="提示词"] {
  --skill-poster-tone: #ef9b4d;
}

.skill-card__poster[data-skill-poster="视频生成"],
.skill-detail-poster[data-skill-poster="视频生成"] {
  --skill-poster-tone: #7d8cff;
}

.skill-card__poster[data-skill-poster="创意策划"],
.skill-detail-poster[data-skill-poster="创意策划"] {
  --skill-poster-tone: #e06f91;
}

.skill-card__poster[data-skill-poster="图片生成"],
.skill-detail-poster[data-skill-poster="图片生成"] {
  --skill-poster-tone: #53b9a9;
}

.skill-card__poster[data-skill-poster="AI工具"],
.skill-detail-poster[data-skill-poster="AI工具"] {
  --skill-poster-tone: #65a6e8;
}

.skill-card__poster[data-skill-poster="视频制作"],
.skill-detail-poster[data-skill-poster="视频制作"] {
  --skill-poster-tone: #b07ae8;
}

.skill-card__poster::before,
.skill-card__poster::after {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 1px solid color-mix(in srgb, var(--skill-poster-tone) 38%, transparent);
  border-radius: 22px;
  content: "";
  transform: rotate(24deg);
}

.skill-card__poster::after {
  width: 42px;
  height: 42px;
  transform: translate(34px, 38px) rotate(24deg);
}

.skill-card__poster[data-has-real-result="true"] {
  display: block;
  background: var(--bg-strong);
}

.skill-card__poster[data-has-real-result="true"]::before,
.skill-card__poster[data-has-real-result="true"]::after {
  display: none;
}

.skill-card__result-preview {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 13px;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--skill-poster-tone) 22%, transparent), transparent 42%),
    var(--bg-strong);
  color: var(--text-secondary);
}

.skill-card__result-preview::after {
  position: absolute;
  z-index: 1;
  inset: 38% 0 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-strong) 92%, transparent));
  content: "";
  pointer-events: none;
}

.skill-card__result-preview img,
.skill-card__result-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skill-card__result-preview > span,
.skill-card__result-preview > small {
  position: relative;
  z-index: 2;
}

.skill-card__result-preview > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--skill-poster-tone) 46%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  color: color-mix(in srgb, var(--skill-poster-tone) 82%, var(--text));
  font-size: 11px;
  font-weight: 800;
}

.skill-card__result-preview[data-result-type="video"] > span {
  position: absolute;
  top: 9px;
  left: 9px;
}

.skill-card__result-preview > small {
  display: -webkit-box;
  max-height: 44px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.skill-card__result-meta {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  gap: 1px;
  color: #fff;
  text-shadow: 0 1px 5px rgb(0 0 0 / 55%);
}

.skill-card__result-meta strong {
  font-size: 9px;
}

.skill-card__result-meta small {
  overflow: hidden;
  color: rgb(255 255 255 / 78%);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-card__poster[data-result-type="text"] .skill-card__result-preview::after,
.skill-card__poster[data-result-type="audio"] .skill-card__result-preview::after {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-strong) 96%, transparent));
}

.skill-card__poster[data-result-type="text"] .skill-card__result-meta,
.skill-card__poster[data-result-type="audio"] .skill-card__result-meta {
  color: var(--text);
  text-shadow: none;
}

.skill-card__poster[data-result-type="text"] .skill-card__result-meta small,
.skill-card__poster[data-result-type="audio"] .skill-card__result-meta small {
  color: var(--text-secondary);
}

.skill-card__poster > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--skill-poster-tone) 58%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: color-mix(in srgb, var(--skill-poster-tone) 82%, var(--text));
  font-size: 16px;
  font-weight: 820;
}

.skill-card__poster > small {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 10px;
}

.skill-favorite {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 9px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--text-secondary);
}

.skill-favorite[aria-pressed="true"] {
  color: var(--accent);
}

.skill-card__body {
  padding: 13px 14px 11px;
}

.skill-card__title {
  align-items: flex-start;
}

.skill-card__title > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.skill-card__title > div small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-card__body p {
  display: -webkit-box;
  min-height: 34px;
  flex: 1;
  overflow: hidden;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.skill-card__preset {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 5px;
  margin: 4px 0 10px;
}

.skill-card__preset span {
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-card__preset select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 9px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
}

.skill-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  color: var(--text-tertiary);
  font-size: 10px;
}

.skill-card__use {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 7px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  color: var(--accent);
  font: inherit;
  font-weight: 720;
}

.skill-card__use:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
}

.agent-role-card__use {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 7px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  color: var(--accent);
  font: inherit;
  font-weight: 720;
}

.agent-role-card__use:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
}

.skill-card__open {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  min-height: 0;
  border-radius: inherit;
  background: transparent;
}

.skill-card:has(.skill-card__open:focus-visible) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.skill-detail-view {
  width: min(1320px, 100%);
  margin: 0 auto;
  outline: none;
}

.skill-detail-breadcrumb {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
}

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

.skill-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 22px;
}

.skill-detail-main {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.skill-detail-hero,
.skill-detail-section,
.skill-detail-aside > section,
.skill-detail-actions {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elevated);
}

.skill-detail-hero {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 226px;
  overflow: hidden;
}

.skill-detail-poster {
  --skill-poster-tone: var(--accent);
  display: grid;
  min-height: 226px;
  place-content: center;
  gap: 12px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 66% 28%, color-mix(in srgb, var(--skill-poster-tone) 42%, transparent), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--skill-poster-tone) 22%, var(--bg-strong)), var(--bg-soft));
  text-align: center;
}

.skill-detail-poster > span {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: auto;
  border: 1px solid color-mix(in srgb, var(--skill-poster-tone) 62%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: color-mix(in srgb, var(--skill-poster-tone) 82%, var(--text));
  font-size: 24px;
  font-weight: 820;
}

.skill-detail-poster small {
  color: var(--text-secondary);
  font-size: 11px;
}

.skill-detail-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
}

.skill-detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.skill-detail-title > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.skill-detail-title h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
}

.skill-detail-title span,
.skill-detail-tags span {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.skill-detail-title__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.skill-detail-favorite {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
}

.skill-detail-favorite[aria-pressed="true"] {
  color: var(--accent);
}

.skill-detail-copy > small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.skill-detail-copy > p {
  max-width: 72ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.skill-detail-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.skill-detail-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  background: var(--bg-elevated);
}

.skill-detail-tabs button {
  min-height: 34px;
  border-radius: 7px;
  padding: 0 18px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
}

.skill-detail-tabs button.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  color: var(--accent);
}

.skill-detail-tab-panel {
  display: grid;
  gap: 18px;
}

.skill-detail-tab-panel[hidden] {
  display: none;
}

.skill-detail-section {
  padding: 18px;
}

.skill-detail-section__heading h2,
.skill-detail-aside h2 {
  margin: 0;
  font-size: 15px;
}

.skill-detail-section__heading p {
  margin: 5px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
}

.skill-detail-demo {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) auto minmax(160px, 1fr) auto minmax(180px, 1.2fr);
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.skill-detail-demo article {
  display: grid;
  min-width: 0;
  min-height: 96px;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-soft);
}

.skill-detail-demo article.is-agent {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.skill-detail-demo article small,
.skill-detail-demo article p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.skill-detail-demo > span {
  color: var(--text-tertiary);
}

.skill-detail-demo__outputs {
  display: grid;
  max-height: 220px;
  gap: 6px;
  overflow: auto;
}

.skill-detail-demo__outputs article {
  min-height: 58px;
}

.skill-detail-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.skill-detail-guidance article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  background: var(--bg-soft);
}

.skill-detail-guidance small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.skill-detail-guidance ul,
.skill-detail-guidance ol {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.skill-detail-guidance li strong,
.skill-detail-guidance li span {
  display: block;
}

.skill-detail-guidance li span {
  margin-top: 2px;
  color: var(--text-tertiary);
}

.skill-success-portfolio .skill-detail-section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.skill-success-portfolio .skill-detail-section__heading > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--bg-soft);
  color: var(--text-tertiary);
  font-size: 9px;
}

.skill-success-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.skill-success-portfolio__card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}

.skill-success-portfolio__preview {
  display: grid;
  width: 100%;
  height: 130px;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-strong));
  color: var(--text-secondary);
}

.skill-success-portfolio__preview img,
.skill-success-portfolio__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skill-success-portfolio__preview > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-strong));
  color: var(--accent);
  font-weight: 700;
}

.skill-success-portfolio__preview > small {
  max-width: 85%;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.skill-success-portfolio__copy {
  display: grid;
  gap: 5px;
  padding: 11px 12px 8px;
}

.skill-success-portfolio__copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-success-portfolio__copy small,
.skill-success-portfolio__copy p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.skill-success-portfolio__copy p {
  display: -webkit-box;
  min-height: 27px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.skill-success-portfolio__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 12px 12px;
}

.skill-success-portfolio__actions button {
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font-size: 9px;
}

.skill-success-portfolio__empty {
  margin-top: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 18px;
  background: var(--bg-soft);
  text-align: center;
}

.skill-success-portfolio__empty strong {
  font-size: 11px;
}

.skill-success-portfolio__empty p {
  max-width: 560px;
  margin: 6px auto 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.55;
}

.skill-confirmation-gates > ol {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.skill-confirmation-gates li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 9px;
  padding: 10px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-soft));
}

.skill-confirmation-gates li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-strong));
  color: var(--accent);
  font-size: 10px;
}

.skill-confirmation-gates p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.skill-detail-section__heading--actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.skill-source-contract pre {
  max-height: 620px;
  margin: 14px 0 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--canvas);
  color: var(--text-secondary);
  font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.skill-detail-workflow {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.skill-detail-workflow li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.skill-detail-workflow li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 10px;
}

.skill-detail-workflow strong {
  font-size: 12px;
}

.skill-detail-workflow p {
  margin: 4px 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.6;
}

.agent-skill-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.agent-skill-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  background: var(--bg-soft);
}

.agent-skill-list article > div {
  min-width: 0;
}

.agent-skill-list strong {
  font-size: 12px;
}

.agent-skill-list p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-skill-list button {
  min-height: 34px;
  padding-inline: 12px;
}

.skill-composition .skill-detail-section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.skill-composition .skill-detail-section__heading > span {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft));
  color: var(--accent);
  font-size: 10px;
  white-space: nowrap;
}

.skill-composition__steps {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.skill-composition__steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  background: var(--bg-soft);
}

.skill-composition__steps li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-strong));
  color: var(--accent);
  font-size: 10px;
}

.skill-composition__steps li div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.skill-composition__steps strong {
  font-size: 11px;
}

.skill-composition__steps p,
.skill-composition__steps small {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.skill-composition__notice {
  margin: 10px 0 0;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.6;
}

.skill-detail-aside {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 104px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.api-management-view {
  overflow: auto;
}

.api-management-view__header,
.api-management-overview,
.api-management-layout,
.api-invocation-card {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.api-management-view__header a.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.api-management-overview {
  margin-top: 16px;
}

.api-management-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 16px;
  margin-top: 16px;
}

.api-management-control {
  min-width: 0;
}

.api-token-form {
  display: grid;
  gap: 14px;
}

.api-scope-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  border: 0;
  padding: 0;
}

.api-scope-fields legend {
  width: 100%;
  margin-bottom: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}

.api-scope-fields label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
}

.api-secret-panel {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--line));
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--warning) 7%, var(--bg-soft));
}

.api-secret-panel[hidden] {
  display: none;
}

.api-secret-panel strong,
.api-secret-panel p {
  margin: 0;
}

.api-secret-panel p {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.api-secret-panel code {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 10px;
  word-break: break-all;
}

.api-token-list {
  display: grid;
  gap: 8px;
}

.api-token-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.7fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  background: var(--bg-soft);
}

.api-token-list > article[data-revoked="true"] {
  opacity: 0.62;
}

.api-token-list > article > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.api-token-list code,
.api-token-list small,
.api-token-list span {
  color: var(--text-tertiary);
  font-size: 9px;
  overflow-wrap: anywhere;
}

.api-management-guide {
  align-self: start;
  position: sticky;
  top: 16px;
}

.api-management-guide ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.api-management-guide li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.api-management-guide li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 9px;
}

.api-management-guide li div {
  display: grid;
  gap: 2px;
}

.api-management-guide li strong,
.api-management-guide li code {
  font-size: 9px;
}

.api-management-guide li code,
.api-management-guide pre {
  color: var(--text-tertiary);
}

.api-management-guide pre {
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg);
  font-size: 9px;
  line-height: 1.6;
}

.api-management-guide > p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.55;
}

.api-invocation-card {
  margin-top: 16px;
  margin-bottom: 24px;
}

.api-invocation-list {
  display: grid;
  gap: 8px;
}

.api-invocation-list > article {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(170px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  background: var(--bg-soft);
}

.api-invocation-list > article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.api-invocation-list small,
.api-invocation-list span {
  color: var(--text-tertiary);
  font-size: 9px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .api-management-layout {
    grid-template-columns: 1fr;
  }

  .api-management-guide {
    position: static;
  }
}

@media (max-width: 640px) {
  .api-token-list > article,
  .api-invocation-list > article {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.skill-detail-aside > section,
.skill-detail-actions {
  padding: 16px;
}

.skill-detail-aside dl {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
}

.skill-detail-aside dl > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.skill-detail-aside dt,
.skill-detail-aside dd {
  margin: 0;
  font-size: 10px;
}

.skill-detail-aside dt {
  color: var(--text-tertiary);
}

.skill-detail-aside dd {
  color: var(--text-secondary);
  text-align: right;
}

.skill-detail-actions {
  display: grid;
  gap: 8px;
}

.skill-agent-choices {
  display: grid;
  gap: 10px;
}

.skill-agent-choices > p {
  margin: -2px 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.6;
}

.skill-agent-choices > div {
  display: grid;
  gap: 7px;
}

.skill-agent-choices button {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  background: var(--bg-soft);
  color: var(--text);
  text-align: left;
}

.skill-agent-choices button:hover,
.skill-agent-choices button:focus-visible,
.skill-agent-choices button.is-primary {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}

.skill-agent-choices button small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .skill-launchpad {
    padding: 15px;
  }

  .skill-launchpad__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .skill-launchpad__tools {
    flex-wrap: wrap;
  }

  .skill-launchpad__footer > .primary-button {
    width: 100%;
  }

  .skill-source-filters {
    display: none;
  }

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

  .skill-detail-layout {
    grid-template-columns: 1fr;
  }

  .skill-detail-aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .skill-quality-workbench__header {
    flex-direction: column;
  }

  .skill-quality-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-quality-summary article:nth-child(even) {
    border-right: 0;
  }

  .skill-quality-layout {
    grid-template-columns: 1fr;
  }

  .skill-quality-campaign {
    grid-template-columns: 1fr 1fr;
  }

  .skill-quality-campaign__intro {
    grid-column: 1 / -1;
  }

  .skill-quality-queue {
    max-height: 420px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .skill-quality-scores {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}

@media (max-width: 520px) {
  .skill-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .skill-detail-hero {
    grid-template-columns: 1fr;
  }

  .skill-detail-poster {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .skill-detail-title,
  .skill-detail-title > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .skill-detail-demo {
    grid-template-columns: 1fr;
  }

  .skill-detail-guidance {
    grid-template-columns: 1fr;
  }

  .skill-success-portfolio__grid {
    grid-template-columns: 1fr;
  }

  .skill-detail-title__actions {
    width: 100%;
  }

  .skill-detail-demo > span {
    transform: rotate(90deg);
    text-align: center;
  }

  .skill-quality-summary {
    grid-template-columns: 1fr 1fr;
  }

  .skill-quality-summary article {
    padding: 13px;
  }

  .skill-quality-queue {
    grid-template-columns: 1fr;
  }

  .skill-quality-campaign {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .skill-quality-campaign__intro {
    grid-column: 1;
  }

  .skill-quality-queue .compact-select,
  .skill-quality-queue__list {
    grid-column: 1;
    width: 100%;
  }

  .skill-quality-session {
    grid-column: 1;
  }

  .skill-quality-form {
    padding: 16px;
  }

  .skill-machine-evidence__heading,
  .skill-machine-evidence > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .skill-machine-evidence__artifacts {
    grid-template-columns: 1fr;
  }

  .skill-quality-scores {
    grid-template-columns: 1fr;
  }

  .global-completion-summary {
    grid-template-columns: 1fr;
  }

  .global-completion-gates > article {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .global-completion-gates em {
    grid-column: 2;
  }
}

.task-list {
  display: grid;
  max-width: 1320px;
  gap: 9px;
  margin: 0 auto;
}

.task-item {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(220px, 1.8fr) minmax(90px, 0.5fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elevated);
}

.task-item strong {
  font-size: 12px;
}

.task-item p {
  margin: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-label {
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--text-secondary);
  font-size: 10px;
  white-space: nowrap;
}

.status-label[data-status="running"],
.status-label[data-status="queued"] {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
  color: var(--warning);
}

.status-label[data-status="draft"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.status-label[data-status="succeeded"] {
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  color: var(--success);
}

.status-label[data-status="failed"],
.status-label[data-status="cancelled"] {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
}

.settings-layout {
  display: grid;
  max-width: 1120px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
  gap: 16px;
  margin: 0 auto;
}

.settings-card {
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg-elevated);
}

.settings-card:first-child {
  grid-row: span 2;
}

.settings-card__heading h2 {
  margin: 0;
  font-size: 17px;
}

.settings-card__heading p {
  margin: 7px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.55;
}

.settings-card--completion {
  gap: 14px;
}

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

.global-completion-summary article {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  background: var(--bg-soft);
}

.global-completion-summary span {
  color: var(--text-tertiary);
  font-size: 9px;
}

.global-completion-summary strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.global-completion-gates {
  display: grid;
  gap: 7px;
}

.global-completion-gates > article {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg);
}

.global-completion-gates > article > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-tertiary);
  font-size: 10px;
}

.global-completion-gates > article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.global-completion-gates strong {
  font-size: 10px;
}

.global-completion-gates small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.global-completion-gates em {
  color: var(--text-secondary);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.global-completion-gates > article[data-status="passed"] {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
}

.global-completion-gates > article[data-status="passed"] > span {
  background: color-mix(in srgb, var(--success) 12%, var(--bg-soft));
  color: var(--success);
}

.global-completion-gates > article[data-status="blocked"] {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
}

.global-completion-status {
  margin: 0;
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
}

.global-completion-status[data-status="succeeded"] {
  color: var(--success);
}

.global-completion-status[data-status="blocked"],
.global-completion-status[data-status="failed"] {
  color: var(--warning);
}

.settings-card--quality-benchmark {
  grid-column: 1 / -1;
  gap: 18px;
}

.settings-card__heading--row,
.quality-benchmark-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.quality-benchmark-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.quality-benchmark-summary article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-soft);
}

.quality-benchmark-summary span,
.quality-benchmark-panel__heading span {
  color: var(--text-tertiary);
  font-size: 10px;
}

.quality-benchmark-summary strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.quality-review-campaign {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 12px;
  background: var(--bg-soft);
}

.quality-review-campaign__heading,
.quality-review-campaign__list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quality-review-campaign__heading > div,
.quality-review-campaign__list,
.quality-review-campaign__list article > div {
  display: grid;
  gap: 3px;
}

.quality-review-campaign__heading span,
.quality-review-campaign__heading small,
.quality-review-campaign__list small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.quality-review-campaign__list article {
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.quality-review-campaign__list article > span {
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--warning) 14%, var(--bg-soft));
  color: var(--warning);
  font-size: 10px;
}

.quality-review-campaign__list article > span[data-status="imported"] {
  background: color-mix(in srgb, var(--success) 14%, var(--bg-soft));
  color: var(--success);
}

.quality-challenge-matrix {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 14px;
  background: var(--bg);
}

.quality-challenge-matrix__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.quality-challenge-matrix__heading > div {
  display: grid;
  gap: 3px;
}

.quality-challenge-matrix__heading span,
.quality-challenge-matrix__heading small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.quality-challenge-matrix__heading strong {
  color: var(--text-primary);
  font-size: 12px;
}

.quality-challenge-matrix__heading > small {
  max-width: 520px;
  text-align: right;
}

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

.quality-challenge-matrix__grid article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: var(--bg-soft);
}

.quality-challenge-matrix__grid article > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-size: 9px;
}

.quality-challenge-matrix__grid article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.quality-challenge-matrix__actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
  margin-top: 4px;
}

.quality-challenge-matrix__actions button {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 9px;
}

.quality-challenge-matrix__actions button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}

.quality-challenge-matrix__grid strong,
.quality-challenge-matrix__grid small,
.quality-challenge-matrix__grid em {
  font-size: 9px;
}

.quality-challenge-matrix__grid small {
  color: var(--text-tertiary);
  line-height: 1.45;
}

.quality-challenge-matrix__grid em {
  color: var(--text-tertiary);
  font-style: normal;
  white-space: nowrap;
}

.quality-challenge-matrix__grid article[data-status="prepared"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.quality-challenge-matrix__grid article[data-status="reviewed"] {
  border-color: color-mix(in srgb, var(--success) 48%, var(--line));
}

.quality-challenge-matrix__grid article[data-status="reviewed"] em {
  color: var(--success);
}

.quality-benchmark-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 12px;
}

.quality-benchmark-panel,
.quality-benchmark-results {
  display: grid;
  min-width: 0;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 14px;
  background: var(--bg);
}

.quality-benchmark-panel__heading h3 {
  margin: 3px 0 0;
  font-size: 13px;
}

.quality-benchmark-panel__heading p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 10px;
}

.quality-benchmark-case-form,
#qualityBenchmarkReviewForm {
  display: grid;
  gap: 12px;
}

.quality-benchmark-case-form select[multiple] {
  min-height: 118px;
  padding: 6px;
}

.quality-benchmark-case-form .field > small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.quality-evidence-leg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quality-evidence-leg-grid fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-soft);
}

.quality-evidence-leg-grid legend {
  padding: 0 5px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
}

.quality-benchmark-case-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
}

.quality-benchmark-case-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-soft);
}

.quality-benchmark-case-item > div:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.quality-benchmark-case-item strong,
.quality-benchmark-case-item p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-benchmark-case-item strong {
  font-size: 11px;
}

.quality-benchmark-case-item p,
.quality-benchmark-case-item small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.quality-benchmark-case-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quality-benchmark-case-actions button {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
}

.quality-blind-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quality-blind-output {
  display: grid;
  min-width: 0;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px;
  background: var(--bg-soft);
}

.quality-blind-output > strong {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  color: var(--accent);
  font-size: 12px;
}

.quality-blind-media {
  display: grid;
  min-height: 180px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--bg-strong);
}

.quality-blind-media img,
.quality-blind-media video {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.quality-blind-media audio {
  width: calc(100% - 20px);
}

.quality-blind-media span {
  padding: 18px;
  color: var(--text-tertiary);
  font-size: 10px;
  text-align: center;
}

.quality-score-grid {
  display: grid;
  gap: 6px;
}

.quality-score-row,
.quality-benchmark-dimension-table > article {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) repeat(2, minmax(74px, 0.55fr));
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}

.quality-score-row:last-child,
.quality-benchmark-dimension-table > article:last-child {
  border-bottom: 0;
}

.quality-score-row strong,
.quality-benchmark-dimension-table strong {
  font-size: 10px;
}

.quality-score-row label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.quality-score-row select {
  min-height: 30px;
  padding: 4px 6px;
}

.quality-benchmark-dimension-table > article {
  grid-template-columns: minmax(130px, 1fr) repeat(4, minmax(72px, 0.55fr));
}

.quality-benchmark-dimension-table span,
.quality-benchmark-dimension-table em {
  color: var(--text-tertiary);
  font-size: 9px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.quality-benchmark-dimension-table article[data-status="passed"] em {
  color: var(--success);
}

.quality-benchmark-dimension-table article[data-status="blocked"] em {
  color: var(--warning);
}

@media (max-width: 1100px) {
  .quality-benchmark-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quality-benchmark-layout {
    grid-template-columns: 1fr;
  }

  .quality-evidence-leg-grid {
    grid-template-columns: 1fr;
  }

  .quality-challenge-matrix__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .quality-benchmark-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-challenge-matrix__heading {
    display: grid;
  }

  .quality-challenge-matrix__heading > small {
    max-width: none;
    text-align: left;
  }

  .quality-challenge-matrix__grid {
    grid-template-columns: 1fr;
  }

  .quality-blind-pair {
    grid-template-columns: 1fr;
  }

  .quality-score-row,
  .quality-benchmark-dimension-table > article {
    grid-template-columns: 1fr 1fr;
  }

  .quality-score-row > strong,
  .quality-benchmark-dimension-table > article > strong {
    grid-column: 1 / -1;
  }
}

.runtime-diagnostics-actions {
  align-items: stretch;
  flex-wrap: wrap;
}

.runtime-diagnostics-status {
  min-height: 18px;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.runtime-diagnostics-status[data-status="succeeded"] {
  color: var(--success);
}

.runtime-diagnostics-status[data-status="failed"] {
  color: var(--danger);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 12px;
  background: var(--bg);
}

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

.toggle-row strong {
  font-size: 12px;
}

.toggle-row small {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

.toggle-row input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--accent);
}

.capability-list {
  display: grid;
  gap: 8px;
}

.capability-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.capability-item:last-child {
  border-bottom: 0;
}

.capability-item > span:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.capability-item strong {
  font-size: 11px;
}

.capability-item small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skeleton-line {
  height: 42px;
  border-radius: var(--radius-small);
  background: linear-gradient(
    90deg,
    var(--bg-soft),
    color-mix(in srgb, var(--bg-strong) 76%, var(--bg-soft)),
    var(--bg-soft)
  );
  background-size: 220% 100%;
  animation: skeleton-shift 1.2s ease-in-out infinite;
}

@keyframes skeleton-shift {
  to {
    background-position: -120% 0;
  }
}

.advanced-settings {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 0 12px;
  background: var(--bg);
}

.advanced-settings summary {
  padding: 12px 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 680;
}

.advanced-settings[open] {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
}

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

.data-summary div {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 12px;
  background: var(--bg);
}

.data-summary dt {
  color: var(--text-tertiary);
  font-size: 10px;
}

.data-summary dd {
  margin: 5px 0 0;
  font-size: 22px;
  font-weight: 730;
  letter-spacing: -0.04em;
}

.scope-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

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

.modal.is-open {
  display: grid;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
}

.modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(440px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  gap: 18px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg-elevated);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.38);
}

.modal__panel--wide {
  width: min(680px, 100%);
}

.modal__panel--skill-builder {
  width: min(900px, 100%);
}

.skill-builder-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 14px;
  background: color-mix(in srgb, var(--bg-soft) 82%, transparent);
}

.skill-builder-section__heading,
.skill-builder-section__heading > div {
  display: flex;
  min-width: 0;
  gap: 10px;
}

.skill-builder-section__heading {
  align-items: flex-start;
  justify-content: space-between;
}

.skill-builder-section__heading > div {
  flex-direction: column;
  gap: 3px;
}

.skill-builder-section__heading strong {
  font-size: 12px;
}

.skill-builder-section__heading small,
.skill-builder-output-row small,
.skill-builder-stage-list small {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.5;
}

.skill-builder-choice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.skill-builder-choice-grid label {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
}

.skill-builder-choice-grid label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
  color: var(--accent);
}

.skill-builder-output-list,
.skill-builder-stage-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-builder-output-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 112px minmax(180px, 1.4fr) 34px;
  gap: 8px;
  align-items: center;
}

.skill-builder-output-row input,
.skill-builder-output-row select {
  width: 100%;
}

.skill-builder-stage-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.skill-builder-stage-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
  background: var(--bg-elevated);
}

.skill-builder-stage-list li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  color: var(--accent);
  font-size: 10px;
}

.skill-builder-stage-list li > div:first-of-type {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.skill-builder-stage-actions {
  display: flex;
  gap: 4px;
}

.skill-builder-stage-actions button,
.skill-builder-output-row > button {
  min-width: 30px;
  min-height: 30px;
  padding: 0 7px;
}

.toggle-row.compact {
  padding: 10px 0 0;
}

.modal__panel--preview {
  width: min(860px, 100%);
}

.modal__heading p {
  margin: 5px 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
}

.asset-preview-stage {
  display: grid;
  min-height: 320px;
  max-height: 58dvh;
  place-items: center;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--canvas);
}

.asset-preview-stage img,
.asset-preview-stage video {
  display: block;
  max-width: 100%;
  max-height: 58dvh;
  object-fit: contain;
}

.asset-preview-stage audio {
  width: calc(100% - 36px);
}

.asset-image-tools {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 14px;
  background: var(--bg);
}

.asset-image-tools[hidden] {
  display: none;
}

.asset-image-tools__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.asset-image-tools__heading strong {
  font-size: 12px;
}

.asset-image-tools__heading p,
.asset-image-tools__heading output {
  margin: 4px 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.55;
}

.asset-image-tools__heading output {
  max-width: 45%;
  text-align: right;
}

.asset-image-tools__heading output.is-success {
  color: var(--success);
}

.asset-image-tools__heading output.is-error {
  color: var(--danger);
}

.asset-image-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.asset-image-tools fieldset {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  min-width: 0;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-soft);
}

.asset-image-tools legend {
  padding-inline: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.asset-image-tools label {
  display: grid;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.asset-image-tools label > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.asset-image-tools__hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.55;
}

.asset-image-tools__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.asset-image-tools input[type="range"] {
  width: 100%;
}

@media (max-width: 720px) {
  .asset-image-tools__grid {
    grid-template-columns: 1fr;
  }

  .asset-image-tools__heading {
    display: grid;
  }

  .asset-image-tools__heading output {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .asset-image-tools__pair {
    grid-template-columns: 1fr;
  }
}

.asset-technical-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 12px;
  background: var(--bg);
}

.asset-technical-info > div {
  min-width: 0;
}

.asset-technical-info strong {
  font-size: 12px;
}

.asset-technical-info p,
.asset-technical-info output {
  margin: 4px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.55;
}

.asset-technical-info output {
  grid-column: 1 / -1;
}

.asset-technical-info output.is-success {
  color: var(--success);
}

.asset-technical-info output.is-error {
  color: var(--danger);
}

@media (max-width: 560px) {
  .asset-technical-info {
    grid-template-columns: 1fr;
  }
}

.asset-details {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.asset-details .field {
  gap: 5px;
}

.asset-details textarea {
  min-height: 70px;
  resize: vertical;
}

.asset-preview-stage pre {
  width: 100%;
  min-height: 320px;
  margin: 0;
  padding: 18px;
  color: var(--text-secondary);
  font: 12px/1.65 ui-monospace, "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
}

.modal__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.modal__heading h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.export-options {
  display: grid;
  gap: 8px;
}

.export-options button {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 0 14px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 680;
  text-align: left;
}

.export-options button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.toast-region {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(360px, calc(100% - 36px));
  gap: 8px;
  pointer-events: none;
}

.toast {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  padding: 11px 13px;
  background: var(--bg-elevated);
  box-shadow: 0 16px 42px var(--shadow);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  animation: toast-in 260ms var(--ease);
}

.toast.is-error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  color: var(--danger);
}

.toast.is-success {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line));
  color: var(--success);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.canvas-search-trigger {
  display: flex;
  min-width: 176px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-right: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 7px 10px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12px;
}

.canvas-search-trigger kbd {
  color: var(--text-tertiary);
  font: inherit;
}

.canvas-rail {
  position: absolute;
  z-index: 12;
  top: 66px;
  left: 12px;
  display: grid;
  gap: 4px;
  width: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
  box-shadow: 0 16px 40px var(--shadow);
}

.canvas-rail button {
  display: grid;
  min-height: 45px;
  place-items: center;
  gap: 1px;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-secondary);
}

.canvas-rail button:hover,
.canvas-rail button:focus-visible {
  background: var(--bg-soft);
  color: var(--text);
}

.canvas-rail span {
  font-size: 13px;
  font-weight: 800;
}

.canvas-rail small {
  font-size: 9px;
}

.canvas-drawer {
  position: absolute;
  z-index: 11;
  top: 56px;
  bottom: 14px;
  left: 72px;
  width: min(350px, calc(100% - 94px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 24px 70px var(--shadow);
}

.canvas-drawer__heading {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px 10px 16px;
}

.canvas-drawer__heading div,
.result-browser-heading > div {
  display: grid;
  gap: 3px;
}

.canvas-drawer__heading small,
.result-browser-heading small {
  color: var(--text-tertiary);
}

.canvas-drawer__body {
  height: calc(100% - 62px);
  overflow: auto;
  padding: 12px;
}

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

.drawer-actions--assets {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.drawer-actions--assets button {
  min-width: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.drawer-view-switch {
  position: absolute;
  top: 16px;
  right: 48px;
  display: flex;
  gap: 3px;
}

.drawer-view-switch button,
.drawer-scope-tabs button,
.drawer-sort-row > button {
  min-height: 28px;
  border-radius: 8px;
  padding: 0 9px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
}

.drawer-view-switch button.is-active,
.drawer-scope-tabs button.is-active,
.drawer-sort-row > button.is-active {
  background: var(--bg-strong);
  color: var(--text);
}

.drawer-scope-tabs {
  display: flex;
  gap: 4px;
  margin: -2px 0 10px;
  border-bottom: 1px solid var(--line);
}

.drawer-scope-tabs button {
  min-height: 38px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}

.drawer-scope-tabs button.is-active {
  border-bottom-color: var(--text);
  background: transparent;
}

.drawer-sort-row,
.drawer-current-path {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drawer-sort-row select {
  min-height: 30px;
  border: 0;
  padding: 0 24px 0 8px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
}

.drawer-category-list {
  display: grid;
  margin: 3px 0 12px;
}

.drawer-category-list button {
  display: grid;
  min-height: 43px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  padding: 0 9px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
}

.drawer-category-list button:hover,
.drawer-category-list button.is-active {
  background: var(--bg-soft);
  color: var(--text);
}

.drawer-category-list button > span {
  color: var(--text-tertiary);
  font-size: 18px;
}

.drawer-category-list button > small,
.drawer-current-path small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.drawer-current-path {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.drawer-filter-row {
  display: flex;
  gap: 4px;
  margin: 10px 0;
  overflow-x: auto;
}

.drawer-filter-row button,
.assistant-subtabs button,
.timeline-tabs button {
  flex: 0 0 auto;
  border-radius: var(--radius-small);
  padding: 7px 10px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
}

.drawer-filter-row button.is-active,
.assistant-subtabs button.is-active,
.timeline-tabs button.is-active {
  background: var(--bg-strong);
  color: var(--text);
}

.drawer-list,
.drawer-history {
  display: grid;
  gap: 6px;
}

.drawer-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding: 10px 2px;
}

.drawer-asset-preview {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  padding: 0 !important;
  background: var(--bg-strong) !important;
}

.drawer-asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.drawer-list--grid article {
  grid-template-columns: 1fr auto;
  grid-template-rows: 92px auto;
  align-items: end;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px;
}

.drawer-list--grid .drawer-asset-preview {
  width: 100%;
  height: 92px;
  grid-column: 1 / -1;
}

.drawer-list--grid article > div {
  min-width: 0;
}

.drawer-list article > span,
.assistant-result-item > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--bg-strong);
  color: var(--accent);
  font-weight: 800;
}

.drawer-list article div,
.assistant-result-item div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.drawer-list article strong,
.drawer-list article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-list article small,
.drawer-history time,
.assistant-result-item small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.drawer-list article button,
.assistant-result-item button {
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.drawer-history article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 11px 2px;
}

.drawer-history p {
  margin: 5px 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.drawer-history__visual {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--bg-strong);
  color: var(--accent);
  font-weight: 800;
}

.drawer-history__visual i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) var(--progress), transparent var(--progress));
}

.drawer-history__body > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.drawer-history__body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-history__actions {
  display: flex;
  grid-column: 2;
  gap: 5px;
  flex-wrap: wrap;
}

.drawer-history__actions button {
  min-height: 27px;
  border-radius: 6px;
  padding: 0 7px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 9px;
}

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

.drawer-history--grid article {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
}

.drawer-history--grid .drawer-history__visual {
  width: 100%;
  height: 94px;
}

.drawer-history--grid .drawer-history__actions {
  grid-column: 1;
}

.provider-capability-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.provider-capability-panel h3 {
  margin: 0;
  font-size: 13px;
}

.provider-capability-panel > div > p {
  margin: 5px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.provider-capability-list {
  display: grid;
  gap: 6px;
}

.provider-capability-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px;
  background: var(--bg-soft);
}

.provider-capability-list article > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  background: var(--bg-strong);
  color: var(--accent);
  font-weight: 800;
}

.provider-capability-list article > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.provider-capability-list small,
.provider-capability-list p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.4;
}

.provider-capability-list em {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
}

.provider-capability-list em[data-status="blocked"] {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.provider-capability-list em[data-status="pending"] {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.provider-capability-list em[data-status="verified"] {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.drawer-empty {
  display: grid;
  min-height: 150px;
  place-content: center;
  padding: 22px;
  text-align: center;
}

.drawer-empty p {
  max-width: 28ch;
  margin: 7px auto 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.timeline-dock {
  position: absolute;
  z-index: 14;
  right: 14px;
  bottom: 14px;
  left: 72px;
  height: min(360px, 46%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 22px 70px var(--shadow);
}

.timeline-dock__header {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 6px 8px 6px 12px;
}

.timeline-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.timeline-marker-form {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  padding: 5px 12px;
  background: color-mix(in srgb, var(--bg-soft) 60%, var(--bg));
}

.timeline-marker-form > label,
.timeline-marker-empty {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 10px;
  white-space: nowrap;
}

.timeline-marker-form input {
  min-height: 28px;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px;
}

#timelineMarkerTime {
  width: 86px;
}

#timelineMarkerTitle {
  width: 150px;
}

.timeline-marker-form > .text-button {
  min-height: 28px;
  white-space: nowrap;
}

.timeline-marker-list {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 4px;
}

.timeline-marker-list__item {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 7px;
  background: var(--bg-elevated);
  padding: 2px;
}

.timeline-marker-list__item button {
  min-height: 22px;
  border-radius: 5px;
  padding: 0 5px;
  color: var(--text-secondary);
  font-size: 10px;
}

.timeline-marker-list__item button:first-child {
  display: flex;
  align-items: baseline;
  gap: 4px;
  max-width: 154px;
}

.timeline-marker-list__item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-marker-list__item small {
  flex: 0 0 auto;
  color: var(--accent);
}

.timeline-ruler,
.studio-timeline__ruler {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 6px 14px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.timeline-tracks,
.studio-timeline-tracks {
  display: grid;
  min-height: 92px;
  max-height: calc(100% - 84px);
  gap: 1px;
  overflow: auto;
  padding: 6px;
  background: var(--line);
}

.studio-timeline-tracks {
  max-height: 154px;
}

.timeline-track-row {
  display: grid;
  min-width: 820px;
  min-height: 68px;
  grid-template-columns: 190px minmax(620px, 1fr);
  background: var(--bg);
}

.timeline-track-row.is-muted .timeline-track-lane {
  opacity: 0.42;
}

.timeline-track-row.is-locked .timeline-track-lane {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    color-mix(in srgb, var(--line) 50%, transparent) 8px,
    color-mix(in srgb, var(--line) 50%, transparent) 9px
  );
}

.timeline-track-controls {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 6px;
  border-right: 1px solid var(--line);
  padding: 7px 8px;
  background: var(--bg-elevated);
}

.timeline-track-controls > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.timeline-track-controls > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.timeline-track-controls strong,
.timeline-track-controls small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-track-controls strong {
  font-size: 11px;
}

.timeline-track-controls small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.timeline-track-controls button {
  min-height: 26px;
  border-radius: 6px;
  padding: 0 6px;
  background: var(--bg-soft);
  color: var(--text-tertiary);
  font-size: 9px;
}

.timeline-track-lane {
  position: relative;
  min-height: 68px;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--canvas);
  background-size: calc(100% / 20) 100%;
}

.timeline-playhead {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: var(--playhead-left);
  width: 2px;
  pointer-events: none;
  background: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 16%, transparent);
}

.timeline-marker {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: var(--marker-left);
  width: 2px;
  transform: translateX(-1px);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: color-mix(in srgb, var(--warning) 88%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 28%, transparent);
}

.timeline-marker::before {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
  background: inherit;
  content: "";
}

.timeline-playhead::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 0 0 5px 5px;
  background: var(--danger);
  content: "";
  transform: translateX(-50%);
}

.timeline-track-empty {
  display: grid;
  height: 100%;
  place-items: center start;
  padding-left: 12px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.timeline-clip {
  position: relative;
  display: grid;
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: var(--clip-left);
  width: max(72px, var(--clip-width));
  min-width: 0;
  max-width: none;
  align-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-small);
  padding: 9px 26px 9px 10px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft));
  color: var(--text);
  text-align: left;
  cursor: grab;
}

.timeline-clip:active {
  cursor: grabbing;
}

.timeline-clip.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.timeline-clip span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.timeline-clip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-clip small {
  color: var(--text-tertiary);
}

.timeline-clip i {
  position: absolute;
  top: 6px;
  right: 7px;
  color: var(--text-tertiary);
  font-style: normal;
}

.timeline-empty {
  display: grid;
  min-width: 100%;
  place-items: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

.canvas-minimap {
  position: absolute;
  z-index: 8;
  right: 14px;
  bottom: 14px;
  width: 146px;
  height: 96px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  box-shadow: 0 12px 34px var(--shadow);
  cursor: crosshair;
  touch-action: none;
}

.canvas-minimap > span {
  position: absolute;
  top: 6px;
  left: 8px;
  color: var(--text-tertiary);
  font-size: 9px;
}

#minimapNodes {
  position: absolute;
  inset: 0;
}

#minimapNodes i {
  position: absolute;
  min-width: 5px;
  min-height: 4px;
  max-width: 40%;
  max-height: 34%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-strong));
  pointer-events: none;
}

#minimapNodes b {
  position: absolute;
  z-index: 2;
  min-width: 14px;
  min-height: 12px;
  border: 1px solid var(--accent-strong);
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  pointer-events: none;
}

.minimap-empty {
  display: grid;
  height: 100%;
  place-items: center;
}

.canvas-context-menu {
  position: absolute;
  z-index: 30;
  display: grid;
  width: 198px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 5px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 58px var(--shadow);
}

.canvas-context-menu button {
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
}

.canvas-context-menu button:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.canvas-context-menu button.is-danger {
  color: var(--danger);
}

.canvas-search-panel {
  width: min(680px, calc(100vw - 32px));
}

.canvas-search-types {
  margin: 10px 0 4px;
}

.canvas-search-summary {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.canvas-search-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.canvas-search-shortcuts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.canvas-search-shortcuts kbd {
  min-width: 22px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 5px;
  padding: 2px 5px;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font: inherit;
  text-align: center;
}

.canvas-search-results {
  display: grid;
  max-height: 48dvh;
  gap: 4px;
  overflow: auto;
  margin-top: 10px;
}

.canvas-search-results > button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-small);
  padding: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.canvas-search-results > button:hover,
.canvas-search-results > button:focus-visible,
.canvas-search-results > button.is-active {
  background: var(--bg-soft);
}

.canvas-search-results > button > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: var(--bg-strong);
  color: var(--accent);
  font-weight: 800;
}

.canvas-search-results > button div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.canvas-search-results small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-subtabs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.assistant-extra-pane {
  display: grid;
  gap: 12px;
  overflow: auto;
}

.assistant-persona-avatar {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 11px;
  background: var(--bg-soft);
}

.assistant-persona-avatar__preview {
  display: grid;
  width: 76px;
  height: 76px;
  overflow: hidden;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-strong));
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
}

.assistant-persona-avatar__preview img,
.assistant-welcome__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assistant-persona-avatar > div:last-of-type {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.assistant-persona-avatar small {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.5;
}

.assistant-persona-preference {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 11px;
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
}

.assistant-persona-preference legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 760;
}

.assistant-persona-boundary {
  margin: 0;
  border-left: 2px solid var(--accent);
  padding: 7px 9px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.prompt-library-toolbar,
.prompt-library-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 6px;
}

.prompt-library-save {
  grid-template-columns: minmax(0, 1fr) 96px auto;
  align-items: center;
}

.prompt-library-toolbar input,
.prompt-library-toolbar select,
.prompt-library-save input,
.prompt-library-save button {
  min-height: 32px;
  font-size: 10px;
}

#promptLibraryList {
  display: grid;
  gap: 8px;
}

.prompt-library-item {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: var(--bg-soft);
}

.prompt-library-item__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.prompt-library-item__heading > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.prompt-library-item__heading small,
.prompt-library-item > p {
  color: var(--text-tertiary);
  font-size: 9px;
}

.prompt-library-item > p {
  margin: 0;
  line-height: 1.5;
}

.prompt-library-item pre {
  max-height: 110px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.prompt-library-item__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.prompt-library-item__actions button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 7px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
}

.prompt-library-item__actions button:first-child {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--accent);
}

.assistant-welcome {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 18px 8px;
  text-align: center;
}

.assistant-welcome__orb {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--accent-strong) 70%, white), transparent 18%),
    color-mix(in srgb, var(--accent) 18%, var(--bg-strong));
  box-shadow: 0 16px 48px color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-weight: 820;
  overflow: hidden;
}

.assistant-welcome h3 {
  margin: 3px 0 0;
  font-size: 17px;
}

.assistant-welcome p {
  max-width: 32ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.assistant-welcome > button {
  padding: 5px 8px;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
}

.assistant-quick-skills {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.assistant-quick-skills button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10px;
  text-align: left;
}

.assistant-quick-skills button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.assistant-history-list {
  display: grid;
  gap: 7px;
}

.assistant-history-list > button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: var(--bg-soft);
  color: var(--text);
  text-align: left;
}

.assistant-history-list > button.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
}

.assistant-history-list > button > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 10px;
}

.assistant-history-list div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.assistant-history-list strong,
.assistant-history-list p,
.assistant-history-list small {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-history-list p,
.assistant-history-list small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.result-browser-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.assistant-result-toolbar {
  display: grid;
  grid-template-columns: auto 108px minmax(0, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.assistant-result-toolbar .segmented-control {
  display: flex;
}

.assistant-result-toolbar button,
.assistant-result-toolbar select,
.assistant-result-toolbar input {
  min-height: 32px;
  font-size: 10px;
}

.assistant-result-toolbar button.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-soft));
  color: var(--accent);
}

.assistant-result-count {
  display: block;
  margin: 7px 0 2px;
  color: var(--text-tertiary);
  font-size: 9px;
}

#assistantResultsList {
  display: grid;
  gap: 6px;
}

.assistant-result-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.assistant-result-preview {
  position: relative;
  display: grid;
  width: 58px;
  height: 46px;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0;
  background: var(--bg-soft);
  color: var(--accent);
}

.assistant-result-preview img,
.assistant-result-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assistant-result-preview > span {
  font-size: 15px;
  font-weight: 780;
}

.assistant-result-preview > .assistant-result-media-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 9, 10, 0.76);
  color: #fff;
  font-size: 9px;
}

.assistant-result-preview > small {
  display: -webkit-box;
  overflow: hidden;
  padding: 0 5px 5px;
  color: var(--text-tertiary);
  font-size: 8px;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#assistantResultsList[data-view="grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

#assistantResultsList[data-view="grid"] .assistant-result-item {
  grid-template-columns: 1fr;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 8px;
  background: var(--bg-soft);
}

#assistantResultsList[data-view="grid"] .assistant-result-preview {
  width: 100%;
  height: 92px;
}

#assistantResultsList[data-view="grid"] .assistant-result-actions {
  justify-content: flex-start;
}

.assistant-result-item > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.assistant-result-item strong em {
  display: inline-flex;
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
}

.assistant-result-item > div:nth-child(2) p,
.assistant-comparison-history p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.assistant-result-lineage {
  color: var(--accent) !important;
}

.assistant-result-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px !important;
}

.assistant-result-actions button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
}

.assistant-result-preview-body {
  display: grid;
  min-height: 280px;
  max-height: 62vh;
  overflow: auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--canvas);
}

.assistant-result-preview-body img,
.assistant-result-preview-body video {
  max-width: 100%;
  max-height: 58vh;
}

.assistant-result-preview-body audio {
  width: min(520px, 90%);
}

.assistant-result-preview-body pre {
  width: 100%;
  margin: 0;
  padding: 20px;
  color: var(--text);
  font: inherit;
  line-height: 1.7;
  white-space: pre-wrap;
}

.assistant-adjustment-history {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

#assistantAdjustmentHistory {
  display: grid;
  gap: 7px;
}

#assistantAdjustmentHistory > article {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 9px;
  background: var(--bg-soft);
}

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

.assistant-adjustment-line span {
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 9px;
  font-weight: 760;
}

.assistant-adjustment-line strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-adjustment-line i {
  color: var(--text-tertiary);
  font-style: normal;
}

#assistantAdjustmentHistory p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

#assistantAdjustmentHistory small,
.modal-help {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.5;
}

.assistant-comparison {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.assistant-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
}

.assistant-comparison-card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 9px;
  background: var(--bg);
}

.assistant-comparison-card > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.assistant-comparison-card > div span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 9px;
}

.assistant-comparison-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.assistant-comparison-card img,
.assistant-comparison-card video {
  width: 100%;
  max-height: 150px;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
}

.assistant-comparison-card audio {
  width: 100%;
}

.assistant-comparison-card > small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-comparison-note {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.assistant-comparison-form {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.assistant-comparison-history {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

#assistantComparisonHistory {
  display: grid;
  gap: 7px;
}

#assistantComparisonHistory > article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 9px;
  background: var(--bg-soft);
}

#assistantComparisonHistory > article > div:first-child {
  display: grid;
  gap: 4px;
}

#assistantComparisonHistory small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-node-summary {
  display: grid;
  height: 100%;
  align-content: start;
  gap: 9px;
}

.agent-node-command {
  color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px;
}

.agent-node-summary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.agent-contracts,
.agent-output-contracts {
  display: grid;
  gap: 5px;
}

.agent-contracts span,
.agent-output-contracts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.agent-contracts small,
.agent-output-contracts small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.agent-dag-summary {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 9px 10px;
  background: var(--bg-soft);
}

.agent-dag-summary strong {
  color: var(--text);
  font-size: 11px;
}

.agent-dag-summary small {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

.agent-dag-summary[data-status="error"] {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}

.agent-dag-summary[data-status="error"] strong,
.agent-dag-summary[data-status="error"] small {
  color: var(--danger);
}

.agent-workflow-list {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.agent-workflow-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 10px;
  background: var(--bg);
}

.agent-workflow-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agent-workflow-card__heading strong {
  font-size: 11px;
}

.agent-workflow-card__heading span {
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--bg-strong);
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-workflow-card__heading span[data-workflow-status="completed"] {
  color: var(--success);
}

.agent-workflow-card__heading span[data-workflow-status="failed"],
.agent-workflow-card__heading span[data-workflow-status="cancelled"] {
  color: var(--danger);
}

.agent-workflow-card > small,
.agent-workflow-card > p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.agent-workflow-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-strong);
}

.agent-workflow-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}

.agent-workflow-executions {
  display: grid;
  gap: 4px;
  border-left: 2px solid var(--line-strong);
  padding-left: 7px;
}

.agent-workflow-executions small {
  display: block;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.agent-workflow-card .agent-workflow-notice {
  color: var(--warning);
}

.agent-workflow-card .agent-workflow-error {
  color: var(--danger);
}

.agent-run-list,
.agent-run-outputs,
.agent-run-steps,
.agent-run-events,
.assistant-run-center {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.agent-run-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 10px;
  background: var(--bg);
}

.agent-run-card__heading {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.agent-run-card__heading strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-run-card__heading span {
  flex: none;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--bg-strong);
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-run-card__heading span[data-run-status="completed"] {
  color: var(--success);
}

.agent-run-card > small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-run-blocked {
  margin: 0;
  border-left: 2px solid var(--warning);
  padding: 6px 8px;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  color: var(--warning);
  font-size: 10px;
  line-height: 1.5;
}

.script-storyboard-workbench {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 10px;
  padding: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-soft));
}

.script-storyboard-workbench header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.script-storyboard-workbench header > div,
.script-storyboard-workbench label {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.script-storyboard-workbench header strong {
  font-size: 11px;
}

.script-storyboard-workbench header span,
.script-storyboard-workbench > small,
.script-storyboard-workbench label > span {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.script-storyboard-workbench header em {
  flex: none;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font-size: 9px;
  font-style: normal;
}

.script-storyboard-workbench__actions,
.script-storyboard-workbench__form,
.script-storyboard-workbench__review {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px;
}

.script-storyboard-workbench__form label,
.script-storyboard-workbench__review label {
  flex: 1 1 112px;
}

.script-storyboard-workbench__review .is-wide {
  flex-basis: 100%;
}

.script-storyboard-workbench input,
.script-storyboard-workbench select,
.script-storyboard-workbench textarea {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 10px;
}

.script-storyboard-workbench textarea {
  min-height: 58px;
  resize: vertical;
}

.script-storyboard-workbench button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 7px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--text-primary);
  font-size: 9px;
}

.script-storyboard-workbench button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.script-storyboard-workbench[data-storyboard-status="completed"] {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: color-mix(in srgb, var(--success) 7%, var(--bg-soft));
}

.script-storyboard-workbench[data-storyboard-status="batch-failed"],
.script-storyboard-workbench[data-storyboard-status="reconciliation-required"] {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.script-storyboard-workbench.is-compact {
  padding: 8px;
}

.agent-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.agent-run-actions button {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 9px;
}

.agent-run-steps > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.agent-run-steps > div > span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-strong);
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-run-steps > div[data-step-status="completed"] > span {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.agent-run-steps > div[data-step-status="failed"] > span {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.agent-run-steps > div > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agent-run-steps small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-run-steps button {
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 9px;
}

.agent-run-events > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.agent-run-events time {
  white-space: nowrap;
}

.agent-run-outputs > div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.agent-run-outputs span {
  color: var(--accent);
}

.agent-run-outputs strong {
  font-size: 10px;
}

.agent-run-output-copy {
  display: grid;
  gap: 2px;
}

.agent-run-output-copy small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.35;
}

.agent-run-outputs button {
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 9px;
}

.agent-run-character-review {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 9px;
  padding: 9px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-soft));
}

.agent-run-character-review header,
.agent-run-character-review__actions,
.agent-run-character-review__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.agent-run-character-review header span,
.agent-run-character-review small,
.agent-run-character-review label > span {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.agent-run-character-review__fields label,
.agent-run-character-review__note {
  display: grid;
  min-width: 0;
  flex: 1 1 132px;
  gap: 3px;
}

.agent-run-character-review input[type="text"],
.agent-run-character-review input:not([type]),
.agent-run-character-review select,
.agent-run-character-review textarea {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 10px;
}

.agent-run-character-review textarea {
  min-height: 58px;
  resize: vertical;
}

.agent-run-character-review__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}

.agent-run-character-review__checks label,
.agent-run-character-review__confirmation {
  display: flex;
  align-items: start;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.45;
}

.agent-run-character-review input[type="checkbox"] {
  flex: none;
  margin-top: 1px;
  accent-color: var(--accent);
}

.agent-run-character-review__actions {
  justify-content: flex-end;
}

.agent-run-character-review__actions button:last-child {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent);
  color: var(--accent-contrast, #fff);
}

.agent-run-character-review.is-reviewed[data-review-status="approved"] {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: color-mix(in srgb, var(--success) 7%, var(--bg-soft));
}

.agent-run-character-review.is-reviewed[data-review-status="rejected"],
.agent-run-character-review.is-stale {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line));
  background: color-mix(in srgb, var(--warning) 6%, var(--bg-soft));
}

.agent-run-character-review p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .agent-run-character-review__checks {
    grid-template-columns: minmax(0, 1fr);
  }
}

.assistant-run-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 10px;
  background: var(--bg);
}

.assistant-run-card > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
}

.assistant-run-card > div:first-child span {
  grid-row: 1 / span 2;
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--bg-strong);
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-run-card > div:first-child span[data-run-status="completed"] {
  color: var(--success);
}

.assistant-run-card > div:first-child span[data-run-status="failed"] {
  color: var(--danger);
}

.assistant-run-card > div:first-child small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.assistant-run-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.agent-run-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
  gap: 3px;
}

.agent-run-progress i {
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
}

.agent-run-progress i[data-step-status="ready"] {
  background: var(--accent);
}

.agent-run-progress i[data-step-status="completed"] {
  background: var(--success);
}

.agent-run-progress i[data-step-status="failed"] {
  background: var(--danger);
}

.studio-modal {
  z-index: 120;
  padding: 16px;
}

.studio-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1500px, 100%);
  height: min(930px, calc(100dvh - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: 0 28px 90px var(--shadow);
}

.studio-header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 10px 18px;
}

.studio-header h2,
.studio-header p {
  margin: 0;
}

.studio-header p {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.studio-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  grid-template-rows: minmax(0, 1fr) 190px;
}

.studio-library,
.studio-properties {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.studio-library {
  border-right: 1px solid var(--line);
}

.studio-properties {
  border-left: 1px solid var(--line);
}

.studio-library > strong,
.studio-properties > strong {
  display: block;
  margin-bottom: 12px;
}

.studio-library input {
  margin-bottom: 10px;
}

#studioAssetList {
  display: grid;
  gap: 4px;
}

#studioAssetList > button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-small);
  padding: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

#studioAssetList > button:hover {
  background: var(--bg-soft);
}

#studioAssetList > button span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  background: var(--bg-strong);
  color: var(--accent);
}

#studioAssetList > button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-preview {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--canvas);
}

.studio-preview__canvas {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 20px;
}

.studio-preview__canvas img,
.studio-preview__canvas video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.studio-preview__canvas audio {
  width: min(520px, 90%);
}

.studio-preview__canvas pre {
  width: min(660px, 100%);
  max-height: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

.studio-preview__canvas p {
  color: var(--text-tertiary);
}

.studio-transport {
  display: grid;
  grid-template-columns: auto 76px minmax(150px, 1fr) 124px auto 82px 92px minmax(130px, 190px) 110px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  background: var(--bg-elevated);
}

.studio-play-button {
  min-width: 58px;
}

.studio-transport span {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 12px;
}

.studio-scrubber {
  display: grid;
  min-width: 120px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.studio-scrubber > span {
  font-family: inherit;
  font-size: 10px;
}

.studio-scrubber input {
  min-height: 30px;
  padding: 0;
}

.studio-ripple {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 10px;
  white-space: nowrap;
}

.studio-ripple input {
  width: 15px;
  min-height: 15px;
}

.studio-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.studio-volume input {
  min-height: 30px;
  padding: 0;
}

.studio-timeline {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

#studioTimelineTrack > button.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.studio-status {
  min-height: 34px;
  border-top: 1px solid var(--line);
  padding: 8px 16px;
  color: var(--text-secondary);
  font-size: 12px;
}

.canvas-viewport.is-hand-mode .canvas-node {
  pointer-events: none;
}

@media (max-width: 1100px) {
  :root {
    --inspector-width: 310px;
  }

  .topbar {
    grid-template-columns: var(--nav-width) minmax(160px, 260px) 1fr auto;
  }

  .topbar__actions .text-button {
    display: none;
  }

  .topbar__actions #globalAssistantButton {
    display: inline-flex;
    min-height: 32px;
    padding-inline: 8px;
  }

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

  .settings-card:first-child {
    grid-row: auto;
  }

  .studio-grid {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .studio-properties {
    display: none;
  }

  #view-projects .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  :root {
    --nav-width: 0px;
    --topbar-height: 58px;
  }

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

  body.is-home-view .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr) 62px;
  }

  body.is-home-view .topbar {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  body.is-projects-view .topbar,
  body.is-skills-view .topbar {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  body.is-home-view .main {
    grid-column: 1;
    grid-row: 2;
  }

  .topbar {
    grid-template-columns: 48px minmax(120px, 1fr) auto;
  }

  .brand__mark {
    width: 30px;
    height: 30px;
  }

  .project-switcher {
    padding: 0 4px;
  }

  .project-switcher .compact,
  .topbar__status {
    display: none;
  }

  .topbar__actions {
    padding-right: 7px;
  }

  .topbar__actions .icon-button,
  .topbar__actions #shareButton {
    display: none;
  }

  .topbar__actions #globalAssistantButton {
    display: inline-flex;
    min-height: 30px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .navigation {
    position: relative;
    z-index: 50;
    display: grid;
    grid-row: 3;
    grid-template-columns: 1fr 58px;
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .home-content {
    width: min(100% - 24px, 620px);
    padding: 38px 0 92px;
  }

  .home-hero {
    margin-bottom: 52px;
  }

  .home-hero h1 {
    font-size: clamp(34px, 12vw, 52px);
  }

  .home-hero > p {
    font-size: 11px;
  }

  .home-composer {
    min-height: 138px;
    border-radius: 19px;
    padding: 14px;
  }

  .home-starters {
    display: none;
  }

  .home-section {
    margin-top: 42px;
  }

  .home-section__heading {
    align-items: center;
  }

  .home-section__heading .primary-button {
    display: none;
  }

  .home-projects,
  .home-works,
  .home-skills {
    grid-template-columns: 1fr;
  }

  .home-work-discovery {
    display: grid;
  }

  .home-work-search {
    width: 100%;
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }

  .home-work-search .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .home-skill-card {
    min-height: 205px;
  }

  .home-creation-process__grid {
    grid-template-columns: 1fr;
  }

  .canvas-multi-selection {
    right: 10px;
    left: 10px;
    overflow-x: auto;
    transform: none;
  }

  .navigation__items {
    display: flex;
    min-width: 0;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    scroll-snap-type: x proximity;
  }

  .navigation__items .nav-item {
    flex: 0 0 62px;
    scroll-snap-align: start;
  }

  .nav-item,
  .navigation__settings {
    min-height: 52px;
    margin: 0;
  }

  .nav-item__icon {
    width: 21px;
    height: 21px;
  }

  .main {
    grid-row: 2;
  }

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

  .canvas-shell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .canvas-toolbar {
    padding-inline: 8px;
  }

  .tool-group--right button:not(#zoomOutButton):not(#zoomInButton):not(#connectButton):not(#autoLayoutButton):not(#canvasUndoButton):not(#canvasRedoButton):not(#resetViewButton) {
    display: none;
  }

  .canvas-search-trigger {
    min-width: 0;
  }

  .canvas-search-trigger kbd {
    display: none;
  }

  .canvas-rail {
    top: 58px;
    left: 8px;
  }

  .canvas-drawer {
    top: 52px;
    left: 66px;
  }

  .timeline-dock {
    left: 66px;
  }

  .canvas-minimap {
    display: none;
  }

  .studio-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 170px;
  }

  .studio-library,
  .studio-properties {
    display: none;
  }

  .inspector {
    border-top: 0;
  }

  .panel-section {
    padding: 14px;
  }

  .content-view {
    padding: 26px 16px 40px;
  }

  .content-header,
  .filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .content-header {
    margin-bottom: 22px;
  }

  .project-content-header {
    gap: 14px;
  }

  .project-top-tools {
    width: 100%;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .project-top-tools .button-row {
    order: 2;
    overflow-x: auto;
  }

  .project-search-field {
    width: min(100%, 280px);
    flex: 1 1 180px;
  }

  .project-sort-select {
    flex: 0 1 128px;
  }

  .content-header .button-row,
  .content-header > button {
    width: 100%;
  }

  .content-header .button-row > *,
  .content-header > button {
    flex: 1;
  }

  .segmented {
    max-width: 100%;
    overflow-x: auto;
  }

  #view-projects .project-grid,
  .project-grid,
  .asset-grid,
  .skill-grid {
    grid-template-columns: 1fr;
  }

  .task-item {
    grid-template-columns: 1fr auto;
  }

  .task-item p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* 画布是创作系统的主界面，其他能力以浮层编排。 */
body.is-workspace-view {
  --canvas: #090a0a;
  --bg: #0b0c0c;
  --bg-elevated: #151717;
  --bg-soft: #1b1e1f;
  --bg-strong: #22272a;
  --line: #2b2f31;
  --line-strong: #444a4e;
  --text: #f4f5f5;
  --text-secondary: #b2b7ba;
  --text-tertiary: #777f84;
  --accent: #7ea7ff;
  --accent-strong: #9ab9ff;
  --accent-ink: #071121;
}

.is-workspace-view .app-shell {
  display: grid;
  height: 100dvh;
  min-height: 100dvh;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--canvas);
}

.is-workspace-view > .app-shell > .topbar {
  display: none;
}

.is-workspace-view > .app-shell > .navigation {
  display: flex;
  grid-column: 1;
  grid-row: 1;
}

.is-workspace-view > .app-shell > .main {
  grid-column: 2;
  grid-row: 1;
}

.is-workspace-view .main,
.is-workspace-view #view-workspace,
.is-workspace-view .workspace,
.is-workspace-view .canvas-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.is-workspace-view .workspace {
  position: relative;
  display: block;
}

.is-workspace-view .canvas-shell {
  display: block;
  overflow: hidden;
  border: 0;
}

.workspace-canvas-header {
  position: absolute;
  z-index: 29;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-width: 0;
  height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  pointer-events: none;
}

.canvas-interaction-status {
  position: absolute;
  z-index: 24;
  right: 390px;
  bottom: 72px;
  max-width: min(420px, calc(100% - 160px));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  color: var(--text-tertiary);
  box-shadow: var(--shadow-small);
  font-size: 9px;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.canvas-shortcut-modal {
  width: min(620px, calc(100vw - 32px));
}

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

.canvas-shortcut-grid > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
  background: var(--bg-soft);
}

.canvas-shortcut-grid dt,
.canvas-shortcut-grid dd {
  margin: 0;
}

.canvas-shortcut-grid kbd {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 7px;
  background: var(--bg);
  color: var(--text-primary);
  box-shadow: inset 0 -1px 0 var(--line-strong);
  font-family: inherit;
  font-size: 10px;
}

.canvas-shortcut-grid dd {
  color: var(--text-secondary);
  font-size: 11px;
}

.workspace-canvas-header__project,
.workspace-canvas-header__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.workspace-brand-mark,
.workspace-back-button,
.workspace-header-button,
.workspace-project-name {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}

.workspace-brand-mark {
  display: grid;
  width: 40px;
  place-items: center;
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: var(--accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-ink);
  font-weight: 880;
}

.workspace-back-button {
  width: 30px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 26px;
}

.workspace-project-name {
  max-width: min(36vw, 420px);
  overflow: hidden;
  border-color: transparent;
  padding: 0 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-project-name:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 74%, transparent);
}

.workspace-project-name:focus {
  border-color: var(--line-strong);
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 1px;
  background: var(--bg-elevated);
}

.workspace-project-name:disabled {
  cursor: progress;
  opacity: 0.72;
}

.workspace-header-button {
  min-width: 68px;
  border-color: var(--line);
  padding: 0 15px;
  background: rgba(17, 19, 19, 0.8);
  backdrop-filter: blur(16px);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 680;
}

.workspace-header-button:hover,
.workspace-header-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: rgba(31, 34, 35, 0.94);
  color: var(--text);
}

.workspace-header-button--icon {
  min-width: 40px;
  width: 40px;
  padding: 0;
  font-size: 20px;
}

.workspace-header-button--theme {
  min-width: 58px;
  padding-inline: 12px;
}

.workspace-add {
  position: relative;
}

.workspace-add-menu {
  position: absolute;
  top: 46px;
  right: 0;
  display: grid;
  width: 190px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 7px;
  background: rgba(19, 21, 21, 0.98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.workspace-add-menu button {
  min-height: 38px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
}

.workspace-add-menu button:hover {
  background: var(--bg-strong);
  color: var(--text);
}

.is-workspace-view .canvas-viewport {
  position: absolute;
  inset: 0;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, rgba(104, 113, 120, 0.28) 1px, transparent 1px);
  background-size: 32px 32px;
}

.is-workspace-view .canvas-toolbar {
  position: absolute;
  z-index: 28;
  right: auto;
  bottom: 18px;
  left: 50%;
  width: max-content;
  max-width: min(720px, calc(100% - 500px));
  min-height: 52px;
  overflow-x: auto;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(20, 22, 22, 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

.is-workspace-view .canvas-toolbar > .canvas-search-trigger,
.is-workspace-view .canvas-toolbar > .tool-group:first-of-type {
  display: none;
}

.is-workspace-view #connectButton.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.local-entry-warning {
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  max-width: 760px;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: auto;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  box-shadow: 0 20px 60px var(--shadow);
  backdrop-filter: blur(18px);
}

.local-entry-warning div {
  display: grid;
  gap: 3px;
}

.local-entry-warning span {
  color: var(--text-secondary);
  font-size: 12px;
}

.local-entry-warning a {
  flex: 0 0 auto;
  border-radius: 9px;
  padding: 9px 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.is-workspace-view .canvas-toolbar .tool-group--right {
  gap: 2px;
}

.is-workspace-view .canvas-toolbar .tool-group--right button {
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 10px;
}

.is-workspace-view .canvas-toolbar output {
  width: 52px;
}

.is-workspace-view .canvas-rail {
  z-index: 27;
  top: 50%;
  left: 18px;
  width: 52px;
  transform: translateY(-50%);
  border-color: var(--line-strong);
  border-radius: 24px;
  padding: 7px;
  background: rgba(18, 20, 20, 0.93);
  backdrop-filter: blur(18px);
}

.is-workspace-view .canvas-rail button {
  min-height: 40px;
  border-radius: 50%;
}

.is-workspace-view .canvas-rail span {
  font-size: 0;
}

.is-workspace-view .canvas-rail span::after {
  font-size: 15px;
  content: "□";
}

.is-workspace-view .canvas-rail button[data-canvas-tool="timeline"] span::after {
  content: "▣";
}

.is-workspace-view .canvas-rail button[data-canvas-tool="history"] span::after {
  content: "◷";
}

.is-workspace-view .canvas-rail button[data-canvas-tool="properties"] span::after {
  content: "◎";
}

.is-workspace-view .canvas-rail button[data-canvas-tool="versions"] span::after {
  content: "▤";
}

.is-workspace-view .canvas-rail button[data-canvas-tool="edit"] span::after {
  content: "✂";
}

.is-workspace-view .canvas-rail small {
  display: none;
}

.is-workspace-view .canvas-drawer {
  z-index: 26;
  top: 70px;
  bottom: 70px;
  left: 76px;
  width: 350px;
  border-color: var(--line-strong);
  border-radius: 18px;
  background: rgba(20, 22, 22, 0.98);
}

.is-workspace-view .timeline-dock {
  z-index: 25;
  top: 70px;
  right: 410px;
  bottom: auto;
  left: min(468px, 25vw);
  height: 190px;
  border-radius: 18px;
  background: rgba(20, 22, 22, 0.98);
}

.is-workspace-view .canvas-minimap {
  right: auto;
  bottom: 16px;
  left: 16px;
  width: 200px;
  height: 146px;
  border-color: var(--line-strong);
  background: rgba(18, 20, 20, 0.9);
}

.is-workspace-view .inspector {
  position: absolute;
  z-index: 28;
  top: 70px;
  right: 16px;
  bottom: auto;
  width: 370px;
  height: min(680px, calc(100% - 86px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(21, 23, 23, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.is-workspace-view .workspace.is-assistant-collapsed .inspector {
  display: none;
}

.is-workspace-view .inspector:has([data-panel="assistant"].is-active) .panel-tabs {
  display: none;
}

.is-workspace-view .inspector:has([data-panel="assistant"].is-active) [data-panel="assistant"] {
  height: 100%;
}

.is-workspace-view .panel-tabs {
  height: 52px;
  padding: 6px;
  border-bottom-color: var(--line);
}

.is-workspace-view .panel-tabs button {
  border-radius: 9px;
}

.is-workspace-view .panel-tabs button.is-active {
  background: var(--bg-strong);
}

.is-workspace-view .panel-tabs button.is-active::after {
  display: none;
}

.is-workspace-view .panel-section {
  height: calc(100% - 52px);
  padding: 16px;
}

.is-workspace-view [data-panel="assistant"].is-active {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.is-workspace-view [data-panel="assistant"] .panel-heading,
.is-workspace-view [data-panel="assistant"] .assistant-subtabs {
  flex: 0 0 auto;
}

.is-workspace-view [data-panel="assistant"] .panel-heading {
  min-height: 48px;
  align-items: center;
  margin: -16px -16px 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}

.is-workspace-view [data-panel="assistant"] .panel-heading > div {
  min-width: 0;
}

.is-workspace-view [data-panel="assistant"] .panel-heading p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-workspace-view .assistant-subtabs {
  margin-bottom: 8px;
  border: 0;
  padding: 0;
}

.is-workspace-view .assistant-subtabs button {
  min-width: 0;
  min-height: 31px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
}

.is-workspace-view .assistant-subtabs button.is-active {
  background: var(--bg-strong);
  color: var(--text);
}

.is-workspace-view [data-panel="assistant"] .conversation-list,
.is-workspace-view [data-panel="assistant"] .assistant-extra-pane,
.is-workspace-view [data-panel="assistant"] .assistant-skill-picker {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
}

.is-workspace-view [data-panel="assistant"] .conversation-list {
  margin: 0 0 10px;
}

.is-workspace-view [data-panel="assistant"] .assistant-skill-picker {
  flex: 0 0 250px;
  min-height: 180px;
  margin-bottom: 10px;
}

.is-workspace-view [data-panel="assistant"] .assistant-skill-picker__list {
  max-height: none;
}

.is-workspace-view
  [data-panel="assistant"]:has(#assistantSkillPicker:not([hidden]))
  .conversation-list {
  display: none;
}

.is-workspace-view [data-panel="assistant"] .assistant-form {
  flex: 0 0 auto;
  max-height: min(40vh, 296px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  padding: 11px;
  background: var(--bg-soft);
}

.is-workspace-view [data-panel="assistant"] .assistant-form textarea {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  resize: none;
  border-color: transparent;
  background: var(--bg-elevated);
}

.is-workspace-view [data-panel="assistant"] .assistant-form .field {
  gap: 4px;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .field > label {
  font-size: 10px;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .field__hint {
  display: none;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .field:has(#assistantPrompt),
.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-skill-tools,
.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-reference-details,
.is-workspace-view [data-panel="assistant"] .assistant-form .generation-options,
.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-actions,
.is-workspace-view [data-panel="assistant"] .assistant-form .inline-status {
  grid-column: 1 / -1;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .field:has(#confirmationMode),
.is-workspace-view [data-panel="assistant"] .assistant-form .field:has(#generationMode),
.is-workspace-view [data-panel="assistant"] .assistant-form .field:has(#assistantGenerationModel) {
  order: 1;
}

.is-workspace-view [data-panel="assistant"] .assistant-model-field .field__hint {
  display: block;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .field:has(#assistantPrompt) {
  order: 3;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-skill-tools {
  order: 2;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-actions {
  order: 5;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-actions .primary-button {
  grid-column: auto;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .inline-status {
  order: 6;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .assistant-reference-details {
  min-height: 34px;
  order: 4;
}

.is-workspace-view [data-panel="assistant"] .assistant-form .generation-options {
  order: 7;
}

.is-workspace-view [data-panel="assistant"] .reference-box {
  padding: 8px;
  background: var(--bg-elevated);
}

.is-workspace-view [data-panel="assistant"] .assistant-reference-details > summary {
  min-height: 34px;
  padding-block: 6px;
}

.is-workspace-view .panel-heading h2 {
  font-size: 15px;
}

.is-workspace-view .panel-heading p {
  color: var(--text-tertiary);
  font-size: 11px;
}

.is-workspace-view .conversation-list {
  max-height: 34vh;
}

.assistant-floating-surface {
  position: absolute;
  z-index: 31;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(21, 23, 23, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
  color: var(--text);
  backdrop-filter: blur(18px);
}

.workspace.is-assistant-collapsed .assistant-floating-surface {
  display: none !important;
}

.assistant-floating-surface__header {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px 10px 16px;
}

.assistant-floating-surface__header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.assistant-floating-surface__header strong {
  font-size: 14px;
}

.assistant-floating-surface__header small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-floating-surface__body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.assistant-history-popover {
  top: 124px;
  right: 402px;
  width: 352px;
  height: min(560px, calc(100% - 148px));
}

.assistant-history-popover .assistant-floating-surface__body,
.assistant-persona-dialog .assistant-floating-surface__body {
  height: calc(100% - 54px);
}

.assistant-history-popover .assistant-session-toolbar,
.assistant-history-popover .assistant-session-utilities {
  margin-bottom: 10px;
}

.assistant-history-popover .assistant-history-pane > .result-browser-heading {
  display: none;
}

.assistant-persona-dialog {
  top: 92px;
  right: 766px;
  width: min(390px, calc(100% - 790px));
  height: min(580px, calc(100% - 116px));
}

.assistant-persona-dialog .assistant-extra-pane {
  overflow: visible;
}

.assistant-results-drawer {
  --assistant-results-height: 320px;
  right: 402px;
  bottom: 16px;
  left: 82px;
  height: var(--assistant-results-height);
  min-height: 220px;
  max-height: calc(100% - 86px);
}

.assistant-results-drawer .assistant-floating-surface__body {
  height: calc(100% - 82px);
}

.assistant-results-drawer .assistant-extra-pane {
  overflow: visible;
}

.assistant-results-drawer .assistant-extra-pane > .result-browser-heading:first-child {
  display: none;
}

.assistant-results-resize-handle {
  display: grid;
  width: 100%;
  min-height: 28px;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: ns-resize;
  font-size: 9px;
  touch-action: none;
}

.assistant-results-resize-handle::before {
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: var(--line-strong);
  content: "";
}

.assistant-results-resize-handle span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}

.assistant-results-resize-handle:hover::before,
.assistant-results-resize-handle:focus-visible::before,
.assistant-results-resize-handle.is-resizing::before {
  background: var(--accent);
}

.is-workspace-view .canvas-node {
  border-color: #4a5054;
  border-radius: 12px;
  background: #181a1a;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
}

.is-workspace-view .canvas-node[data-node-type="agent"] {
  grid-template-rows: 40px minmax(0, 1fr);
  min-width: 300px;
  min-height: 168px;
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-header {
  overflow: visible;
  border-bottom-color: var(--line);
  background: #171919;
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-type {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: var(--accent);
  color: var(--accent-ink);
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-port {
  position: absolute;
  display: grid;
  top: 50%;
  width: 26px;
  height: 26px;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  padding: 0;
  background: #0d0e0e;
  color: var(--text);
  font-size: 16px;
  font-weight: 620;
  line-height: 1;
  opacity: 1;
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-port__glyph {
  font-size: 18px;
  font-weight: 560;
  transform: translateY(-0.5px);
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-port--input {
  left: -13px;
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-port--output {
  right: -13px;
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-resize {
  opacity: 0;
}

.agent-node-summary {
  gap: 7px;
  padding: 8px 12px 10px;
}

.agent-node-state {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 6px;
}

.agent-node-state > span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
}

.agent-node-state[data-status="running"] > span,
.agent-node-state[data-status="queued"] > span {
  border-color: var(--warning);
  background: var(--warning);
}

.agent-node-state[data-status="succeeded"] > span,
.agent-node-state[data-status="completed"] > span {
  border-color: var(--success);
  background: var(--success);
}

.agent-node-state[data-status="failed"] > span {
  border-color: var(--danger);
  background: var(--danger);
}

.agent-node-state small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.agent-node-skill-card {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  background: #1f2121;
}

.agent-node-skill-card > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

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

.agent-node-skill-card strong {
  font-size: 12px;
}

.agent-node-skill-card button {
  flex: 0 0 auto;
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font-size: 10px;
}

.agent-node-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.agent-node-actions [data-agent-node-workflow-action="retry"] {
  border-color: color-mix(in srgb, var(--danger) 56%, var(--line));
  color: var(--danger);
}

.agent-node-error {
  display: -webkit-box;
  overflow: hidden;
  border-left: 2px solid var(--danger);
  padding-left: 7px;
  color: var(--danger) !important;
  font-size: 9px !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-node-hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 10px;
}

.node-agent-composer {
  position: absolute;
  z-index: 23;
  display: grid;
  min-width: 360px;
  min-height: 340px;
  max-height: calc(100% - 24px);
  grid-template-rows: 48px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: 0 24px 68px var(--shadow);
}

.node-agent-composer__header,
.node-agent-composer__footer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
}

.node-agent-composer__header {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
}

.node-agent-composer__header > div {
  display: flex;
  gap: 4px;
}

.node-agent-composer__header button,
.node-agent-composer__footer button {
  min-height: 28px;
  border-radius: 8px;
  padding: 0 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
}

.node-agent-composer__chip {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  max-width: min(230px, 64vw);
  gap: 4px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(103, 147, 255, 0.1);
  color: var(--text);
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.node-agent-composer__chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-agent-composer__header .node-agent-composer__chip button {
  display: grid;
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
}

.node-agent-composer__header .node-agent-composer__chip button:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}

.node-agent-composer__body {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.node-agent-attachments {
  display: flex;
  gap: 6px;
}

.node-agent-attachments button {
  width: 46px;
  height: 46px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
}

.node-agent-attachments .node-agent-attachment--text {
  width: 62px;
  color: var(--text-secondary);
  font-weight: 700;
}

.node-agent-attachments button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.node-agent-input-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.node-agent-input-summary small {
  line-height: 1.55;
}

.node-agent-input-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 4px;
  padding: 3px 4px 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line-strong));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--text);
  white-space: nowrap;
}

.node-agent-input-chip button {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.node-agent-input-chip button:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text);
}

.node-agent-contract {
  margin: 0;
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.node-agent-workflow-fields[hidden] {
  display: none;
}

.node-agent-workflow-fields details {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.node-agent-workflow-fields summary {
  padding: 9px 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
}

.node-agent-workflow-fields summary small {
  margin-left: 5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.node-agent-workflow-fields details > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.node-agent-workflow-field {
  display: grid;
  grid-template-columns: minmax(112px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 8px;
}

.node-agent-workflow-field > span {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.node-agent-workflow-field > span small {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.node-agent-workflow-field input,
.node-agent-workflow-field select,
.node-agent-workflow-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
}

.node-agent-workflow-field textarea,
.node-agent-composer .node-agent-workflow-field textarea {
  min-height: 52px;
}

.node-agent-workflow-field.is-media strong {
  min-width: 0;
  color: var(--text);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.node-agent-video-recreation {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 11px;
  padding: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.node-agent-video-recreation[hidden] {
  display: none;
}

.node-agent-video-recreation__heading,
.node-agent-video-recreation__timeline-heading,
.node-agent-video-recreation__actions,
.node-agent-video-recreation__boundary {
  display: flex;
  align-items: center;
}

.node-agent-video-recreation__heading {
  justify-content: space-between;
  gap: 10px;
}

.node-agent-video-recreation__heading > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.node-agent-video-recreation__heading strong {
  color: var(--text);
  font-size: 11px;
}

.node-agent-video-recreation__heading small,
.node-agent-video-recreation__timeline > small,
#videoRecreationShotBoundaryList > small,
#videoRecreationControlsStatus {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

#videoRecreationBoundaryMode {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
}

.node-agent-video-recreation__rights {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  border-radius: 8px;
  padding: 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
  cursor: pointer;
}

.node-agent-video-recreation__rights input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.node-agent-video-recreation__timeline {
  display: grid;
  gap: 7px;
}

.node-agent-video-recreation__timeline-heading {
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
}

.node-agent-video-recreation button {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 9px;
}

.node-agent-video-recreation button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--text);
}

.node-agent-video-recreation button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

#videoRecreationShotBoundaryList {
  display: grid;
  max-height: 128px;
  gap: 5px;
  overflow: auto;
}

.node-agent-video-recreation__boundary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 26px;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.node-agent-video-recreation__boundary input {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
}

.node-agent-video-recreation__boundary button {
  width: 26px;
  min-width: 26px;
  padding: 0;
}

.node-agent-video-recreation__actions {
  flex-wrap: wrap;
  gap: 6px;
}

.node-agent-video-recreation__actions button:first-child {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
}

#videoRecreationControlsStatus {
  display: block;
  min-height: 13px;
}

.node-agent-video-recreation__semantics {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 88%, var(--accent) 12%);
}

.node-agent-video-recreation__semantics > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 9px;
  color: var(--text);
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
  list-style: none;
}

.node-agent-video-recreation__semantics > summary::-webkit-details-marker {
  display: none;
}

.node-agent-video-recreation__semantics > summary::before {
  content: "›";
  color: var(--text-tertiary);
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.node-agent-video-recreation__semantics[open] > summary::before {
  transform: rotate(90deg);
}

.node-agent-video-recreation__semantics > summary > span:first-child {
  flex: 1;
}

#videoRecreationShotSemanticStatus {
  color: var(--accent);
  font-size: 9px;
  font-weight: 650;
}

.node-agent-video-recreation__semantic-body,
.node-agent-video-recreation__semantic-fields,
.node-agent-video-recreation__semantic-evidence {
  display: grid;
  gap: 7px;
}

.node-agent-video-recreation__semantic-body {
  border-top: 1px solid var(--line);
  padding: 9px;
}

.node-agent-video-recreation__semantic-nav {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
}

.node-agent-video-recreation__semantic-nav select,
.node-agent-video-recreation__semantic-fields select,
.node-agent-video-recreation__semantic-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
}

.node-agent-video-recreation__semantic-nav select,
.node-agent-video-recreation__semantic-fields select {
  min-height: 30px;
  padding: 0 8px;
}

.node-agent-video-recreation__semantic-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.node-agent-video-recreation__semantic-fields label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 650;
}

.node-agent-video-recreation__semantic-fields label.is-wide {
  grid-column: 1 / -1;
}

.node-agent-video-recreation__semantic-fields textarea {
  min-height: 50px;
  max-height: 112px;
  padding: 7px 8px;
  line-height: 1.45;
  resize: vertical;
}

.node-agent-video-recreation__semantic-reviewed {
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  border-radius: 7px;
  padding: 7px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  cursor: pointer;
}

.node-agent-video-recreation__semantic-reviewed input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.node-agent-video-recreation__semantic-evidence {
  border-left: 2px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  padding: 6px 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  color: var(--text-tertiary);
  font-size: 8px;
  line-height: 1.4;
}

.node-agent-video-recreation__semantic-evidence strong {
  color: var(--text-secondary);
  font-size: 9px;
}

#videoRecreationShotSemanticMessage {
  display: block;
  min-height: 13px;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.node-agent-video-recreation__generation {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.node-agent-video-recreation__generation > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 9px;
  color: var(--text);
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
  list-style: none;
}

.node-agent-video-recreation__generation > summary::-webkit-details-marker {
  display: none;
}

.node-agent-video-recreation__generation > summary::before {
  content: "›";
  color: var(--text-tertiary);
  transition: transform 120ms ease;
}

.node-agent-video-recreation__generation[open] > summary::before {
  transform: rotate(90deg);
}

.node-agent-video-recreation__generation > summary > span:first-child {
  flex: 1;
}

#videoRecreationGenerationSummary {
  color: var(--accent);
  font-size: 9px;
  font-weight: 650;
}

.node-agent-video-recreation__generation-body {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 9px;
}

.node-agent-video-recreation__generation-model {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
}

.node-agent-video-recreation__generation-model select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 28px 0 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
  text-overflow: ellipsis;
}

.node-agent-video-recreation__generation-hint,
.node-agent-video-recreation__generation-recovery {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

#videoRecreationGenerationRuns {
  display: grid;
  max-height: 280px;
  gap: 7px;
  overflow: auto;
}

.node-agent-video-recreation__generation-run {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--bg);
}

.node-agent-video-recreation__generation-run > header,
.node-agent-video-recreation__generation-run > footer,
.node-agent-video-recreation__generation-shot,
.node-agent-video-recreation__generation-shot > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.node-agent-video-recreation__generation-run > header,
.node-agent-video-recreation__generation-run > footer {
  justify-content: space-between;
}

.node-agent-video-recreation__generation-run > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.node-agent-video-recreation__generation-run strong {
  color: var(--text);
  font-size: 10px;
}

.node-agent-video-recreation__generation-run small,
.node-agent-video-recreation__generation-run > header > span {
  color: var(--text-tertiary);
  font-size: 8px;
}

.node-agent-video-recreation__generation-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
}

.node-agent-video-recreation__generation-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 180ms ease;
}

.node-agent-video-recreation__generation-shots {
  display: grid;
  gap: 4px;
}

.node-agent-video-recreation__generation-shot {
  min-height: 28px;
  border-radius: 6px;
  padding: 4px 5px;
  background: color-mix(in srgb, var(--surface) 88%, var(--line) 12%);
  color: var(--text-secondary);
  font-size: 9px;
}

.node-agent-video-recreation__generation-shot > span {
  min-width: 46px;
  font-weight: 700;
}

.node-agent-video-recreation__generation-shot > small {
  flex: 1;
}

.node-agent-video-recreation__generation-shot > p {
  flex-basis: 100%;
  margin: 0;
  color: var(--danger);
  font-size: 8px;
}

.node-agent-video-recreation__generation-shot.is-succeeded {
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.node-agent-video-recreation__generation-shot.is-failed,
.node-agent-video-recreation__generation-shot.is-missing {
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.node-agent-video-recreation__generation-run button {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 7px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 8px;
}

.node-agent-video-recreation__assembly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 7px;
  padding: 7px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.node-agent-video-recreation__assembly > div {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
}

.node-agent-video-recreation__assembly > div:first-child {
  display: grid;
  flex: 1;
  gap: 2px;
}

.node-agent-video-recreation__assembly p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--danger);
  font-size: 8px;
  line-height: 1.45;
}

.node-agent-video-recreation__assembly small.is-current {
  color: var(--success);
}

.node-agent-video-recreation__assembly small.is-stale {
  color: var(--warning);
}

.node-agent-video-recreation__assembly > .node-agent-video-recreation__assembly-review {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  padding-top: 8px;
}

.node-agent-video-recreation__assembly-review > strong,
.node-agent-video-recreation__assembly-review > small,
.node-agent-video-recreation__assembly-review > .is-wide {
  grid-column: 1 / -1;
}

.node-agent-video-recreation__assembly-review label {
  display: grid;
  gap: 3px;
  color: var(--text-secondary);
  font-size: 8px;
}

.node-agent-video-recreation__assembly-review label.is-check {
  display: flex;
  align-items: center;
  gap: 5px;
}

.node-agent-video-recreation__assembly-review input[type="text"],
.node-agent-video-recreation__assembly-review select,
.node-agent-video-recreation__assembly-review textarea {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}

.node-agent-video-recreation__assembly-review textarea {
  min-height: 56px;
  resize: vertical;
}

.node-agent-video-recreation__assembly-review > button {
  justify-self: end;
  grid-column: 1 / -1;
}

.node-agent-video-recreation__assembly.is-succeeded {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.node-agent-video-recreation__assembly.is-failed,
.node-agent-video-recreation__assembly.is-cancelled {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.node-agent-video-recreation__generation-recovery {
  border-left: 2px solid var(--warning);
  padding-left: 7px;
}

.node-agent-video-recreation__generation-empty,
#videoRecreationGenerationStatus {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

#videoRecreationGenerationStatus {
  display: block;
  min-height: 13px;
}

.node-agent-commerce-drama {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 11px;
  padding: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.node-agent-commerce-drama[hidden] {
  display: none;
}

.node-agent-commerce-drama__heading,
.node-agent-commerce-drama__actions,
.node-agent-commerce-drama__evidence-row,
.node-agent-commerce-drama__reviewer {
  display: flex;
  align-items: center;
}

.node-agent-commerce-drama__heading {
  justify-content: space-between;
  gap: 10px;
}

.node-agent-commerce-drama__heading > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.node-agent-commerce-drama__heading strong {
  color: var(--text);
  font-size: 11px;
}

.node-agent-commerce-drama__heading small,
.node-agent-commerce-drama__hint,
.node-agent-commerce-drama__evidence > small,
#commerceDramaFactStatus,
#commerceDramaReviewStatus,
#commerceDramaRunStatus,
#commerceDramaControlsStatus {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

#commerceDramaLedgerState {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
}

.node-agent-commerce-drama__section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 88%, var(--accent) 12%);
}

.node-agent-commerce-drama__section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 9px;
  color: var(--text);
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
  list-style: none;
}

.node-agent-commerce-drama__section > summary::-webkit-details-marker {
  display: none;
}

.node-agent-commerce-drama__section > summary::before {
  content: "›";
  color: var(--text-tertiary);
  transition: transform 120ms ease;
}

.node-agent-commerce-drama__section[open] > summary::before {
  transform: rotate(90deg);
}

.node-agent-commerce-drama__section > summary > span:first-child {
  flex: 1;
}

.node-agent-commerce-drama__section > summary > span:last-child {
  color: var(--accent);
  font-size: 9px;
  font-weight: 650;
}

.node-agent-commerce-drama__body,
.node-agent-commerce-drama__fields,
.node-agent-commerce-drama__evidence,
.node-agent-commerce-drama__confirmations,
#commerceDramaProductionRuns {
  display: grid;
  gap: 7px;
}

.node-agent-commerce-drama__body {
  border-top: 1px solid var(--line);
  padding: 9px;
}

.node-agent-commerce-drama__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.node-agent-commerce-drama__fields label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 650;
}

.node-agent-commerce-drama__fields label.is-wide {
  grid-column: 1 / -1;
}

.node-agent-commerce-drama__fields input,
.node-agent-commerce-drama__fields textarea,
.node-agent-commerce-drama__evidence-row select,
.node-agent-commerce-drama__reviewer input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
}

.node-agent-commerce-drama__fields input,
.node-agent-commerce-drama__evidence-row select,
.node-agent-commerce-drama__reviewer input {
  min-height: 30px;
  padding: 0 8px;
}

.node-agent-commerce-drama__fields textarea {
  min-height: 46px;
  max-height: 110px;
  padding: 7px 8px;
  line-height: 1.45;
  resize: vertical;
}

.node-agent-commerce-drama__rights,
.node-agent-commerce-drama__confirmation {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  border-radius: 7px;
  padding: 7px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.45;
  cursor: pointer;
}

.node-agent-commerce-drama__rights input,
.node-agent-commerce-drama__confirmation input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.node-agent-commerce-drama__evidence {
  border-left: 2px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  padding: 7px 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.node-agent-commerce-drama__evidence > strong {
  color: var(--text-secondary);
  font-size: 9px;
}

#commerceDramaEvidenceList {
  display: grid;
  gap: 5px;
}

.node-agent-commerce-drama__evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 7px;
}

.node-agent-commerce-drama__evidence-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-agent-commerce-drama__reviewer {
  gap: 8px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
}

.node-agent-commerce-drama__reviewer span {
  flex: 0 0 52px;
}

.node-agent-commerce-drama__actions {
  flex-wrap: wrap;
  gap: 6px;
}

.node-agent-commerce-drama button {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 9px;
}

.node-agent-commerce-drama button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--text);
}

.node-agent-commerce-drama button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.node-agent-commerce-drama__actions button:first-child {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
}

.node-agent-commerce-drama__run {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--bg);
}

.node-agent-commerce-drama__run > header,
.node-agent-commerce-drama__stage {
  display: flex;
  align-items: center;
  gap: 7px;
}

.node-agent-commerce-drama__run > header {
  justify-content: space-between;
}

.node-agent-commerce-drama__revision {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 7px;
  padding: 7px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.node-agent-commerce-drama__revision[data-status="paused"],
.node-agent-commerce-drama__revision[data-status="failed"] {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.node-agent-commerce-drama__revision > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-agent-commerce-drama__revision p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.45;
}

.node-agent-commerce-drama__revision button {
  justify-self: start;
}

.node-agent-commerce-drama__candidate-history {
  border-radius: 6px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--surface) 88%, var(--line) 12%);
}

.node-agent-commerce-drama__candidate-history summary {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.node-agent-commerce-drama__candidate-history small {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.node-agent-commerce-drama__run strong,
.node-agent-commerce-drama__stage strong {
  color: var(--text);
  font-size: 9px;
}

.node-agent-commerce-drama__run small,
.node-agent-commerce-drama__stage small {
  color: var(--text-tertiary);
  font-size: 8px;
}

.node-agent-commerce-drama__stage {
  min-height: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
  border-radius: 6px;
  padding: 5px 6px;
  background: color-mix(in srgb, var(--surface) 88%, var(--line) 12%);
}

.node-agent-commerce-drama__stage > div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.node-agent-commerce-drama__model {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 8px;
}

.node-agent-commerce-drama__model select {
  width: 100%;
  min-width: 0;
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 6px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 8px;
}

.node-agent-commerce-drama__stage > span {
  min-width: 42px;
  color: var(--text-tertiary);
  font-size: 8px;
}

.node-agent-commerce-drama__stage.is-succeeded {
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.node-agent-commerce-drama__stage.is-awaiting-review {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.node-agent-commerce-drama__stage.is-failed,
.node-agent-commerce-drama__stage.is-cancelled,
.node-agent-commerce-drama__stage.is-needs-revision {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.node-agent-commerce-drama__stage p {
  flex-basis: 100%;
  margin: 0;
  color: var(--danger);
  font-size: 8px;
}

.node-agent-commerce-drama__shots {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 5px;
}

.node-agent-commerce-drama__shots > div {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) minmax(90px, 1.5fr) auto;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 4px 5px;
  background: color-mix(in srgb, var(--bg) 88%, var(--line) 12%);
}

.node-agent-commerce-drama__shots video {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 180px;
  border-radius: 6px;
  background: #000;
}

.node-agent-commerce-drama__shots button {
  justify-self: end;
}

.node-agent-commerce-drama__run .node-agent-video-recreation__assembly-review {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  margin-top: 3px;
  padding-top: 8px;
}

.node-agent-commerce-drama__stage > .node-agent-video-recreation__assembly-review {
  flex-basis: 100%;
}

.node-agent-commerce-drama__image-review-preview {
  grid-column: 1 / -1;
  width: min(100%, 280px);
  max-height: 360px;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  object-fit: contain;
}

.node-agent-commerce-drama__audio-review audio {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 34px;
}

.node-agent-output-scope {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 9px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}

.node-agent-output-scope[hidden] {
  display: none;
}

.node-agent-output-scope > span {
  color: var(--text);
  font-size: 10px;
  font-weight: 720;
}

.node-agent-output-scope select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 30px 0 9px;
  background-color: var(--bg);
  color: var(--text);
  font-size: 11px;
}

.node-agent-output-scope small {
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}

.node-agent-composer textarea {
  min-height: 96px;
  border: 1px solid var(--line);
  padding: 10px 11px;
  background: var(--bg);
  resize: vertical;
  font-size: 13px;
}

.node-agent-composer__footer {
  display: grid;
  min-height: 58px;
  grid-template-columns: max-content max-content minmax(140px, 1fr) 34px;
  grid-template-rows: auto auto;
  align-items: center;
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 8px 10px;
}

.node-agent-composer__footer label {
  width: auto;
  min-width: 0;
}

.node-agent-composer__footer select {
  width: auto;
  min-height: 30px;
  border: 0;
  padding: 0 24px 0 7px;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}

.node-agent-composer__footer output {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
  white-space: normal;
}

.node-agent-composer__footer output.is-blocked {
  color: var(--danger);
}

.node-agent-composer__footer output.is-ready {
  color: var(--success);
}

.node-agent-composer__footer .node-agent-send {
  grid-column: 4;
  grid-row: 1;
  margin-left: auto;
}

.node-agent-composer__footer label {
  flex: 0 0 auto;
}

.node-agent-composer__footer label:first-child {
  margin-right: 2px;
}

.node-agent-composer__footer .node-agent-model-field {
  grid-column: 3;
  grid-row: 1;
  max-width: 210px;
}

.node-agent-composer__footer .node-agent-model-field select {
  width: 100%;
  max-width: 210px;
  text-overflow: ellipsis;
}

.node-agent-composer__footer .node-agent-send {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  background: var(--text);
  color: #111;
  font-size: 18px;
  font-weight: 820;
}

.node-agent-composer__footer .node-agent-send:disabled {
  background: color-mix(in srgb, var(--text-tertiary) 45%, var(--surface));
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.66;
}

.target-skill-demo {
  width: min(1180px, calc(100vw - 60px));
}

.agent-text-input__paths {
  display: inline-flex;
  gap: 4px;
  margin: 4px 0 16px;
  border-radius: 12px;
  padding: 4px;
  background: var(--bg-soft);
}

.agent-text-input__paths button {
  min-height: 36px;
  border-radius: 9px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-secondary);
}

.agent-text-input__paths button.is-active {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 4px 16px var(--shadow);
}

.agent-text-input__upload {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 28px;
  background: var(--bg-soft);
  text-align: center;
}

.agent-text-input__upload p {
  max-width: 560px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.target-skill-demo__graph {
  display: grid;
  min-height: 420px;
  grid-template-columns: minmax(170px, 0.8fr) auto minmax(190px, 0.8fr) auto minmax(210px, 1.2fr);
  align-items: center;
  gap: 22px;
  overflow: auto;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, rgba(104, 113, 120, 0.28) 1px, transparent 1px);
  background-size: 28px 28px;
}

.target-skill-demo__graph article {
  display: grid;
  min-height: 110px;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
}

.target-skill-demo__graph article.is-agent {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
}

.target-skill-demo__graph article small {
  color: var(--text-tertiary);
}

.target-skill-demo__graph > span {
  color: var(--text-tertiary);
  font-size: 24px;
}

#targetSkillDemoOutputs {
  display: grid;
  gap: 10px;
}

@media (max-width: 1100px) {
  .is-workspace-view .inspector {
    width: 330px;
  }

  .assistant-history-popover,
  .assistant-results-drawer {
    right: 362px;
  }

  .assistant-persona-dialog {
    right: 726px;
    width: min(340px, calc(100% - 750px));
  }

  .is-workspace-view .canvas-toolbar {
    max-width: calc(100% - 390px);
  }

  .is-workspace-view .timeline-dock {
    right: 370px;
    left: 82px;
  }

  .canvas-interaction-status {
    right: 350px;
  }
}

@media (max-width: 900px) {
  .assistant-history-popover,
  .assistant-persona-dialog {
    top: 116px;
    right: 16px;
    width: min(334px, calc(100% - 32px));
    height: calc(100% - 140px);
  }
}

@media (max-width: 780px) {
  .is-workspace-view .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 62px;
  }

  .is-workspace-view > .app-shell > .navigation {
    display: grid;
    grid-column: 1;
    grid-row: 2;
  }

  .is-workspace-view > .app-shell > .main {
    grid-column: 1;
    grid-row: 1;
  }

  .workspace-canvas-header {
    height: 60px;
    gap: 6px;
    padding: 10px;
  }

  .workspace-canvas-header__project,
  .workspace-canvas-header__actions {
    gap: 4px;
  }

  .workspace-brand-mark {
    width: 34px;
  }

  .workspace-back-button {
    width: 24px;
  }

  .workspace-project-name {
    display: none;
  }

  .workspace-header-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .workspace-header-button--theme {
    width: 34px;
    min-width: 34px;
    overflow: hidden;
    padding: 0;
    font-size: 0;
  }

  .workspace-header-button--theme::after {
    font-size: 17px;
    content: "◐";
  }

  #workspaceShareButton,
  #workspaceExportButton,
  #workspaceFeedbackButton,
  #workspaceAssistantToggle {
    font-size: 0;
  }

  #workspaceShareButton::after,
  #workspaceExportButton::after,
  #workspaceFeedbackButton::after,
  #workspaceAssistantToggle::after {
    font-size: 14px;
  }

  #workspaceShareButton::after {
    content: "↗";
  }

  #workspaceExportButton::after {
    content: "⇩";
  }

  #workspaceFeedbackButton::after {
    content: "!";
  }

  #workspaceAssistantToggle::after {
    content: "聊";
  }

  #workspaceAddNodeButton {
    font-size: 0;
  }

  #workspaceAddNodeButton::after {
    font-size: 18px;
    content: "+";
  }

  .is-workspace-view .inspector {
    top: 68px;
    right: 8px;
    bottom: 8px;
    width: min(350px, calc(100% - 16px));
    height: calc(100% - 76px);
  }

  .assistant-history-popover,
  .assistant-persona-dialog {
    top: 116px;
    right: 16px;
    width: min(334px, calc(100% - 32px));
    height: calc(100% - 140px);
  }

  .assistant-results-drawer {
    right: 8px;
    bottom: 70px;
    left: 70px;
    max-height: calc(100% - 150px);
  }

  .is-workspace-view .canvas-toolbar {
    right: 8px;
    bottom: 8px;
    left: auto;
    max-width: calc(100% - 80px);
    transform: none;
  }

  .is-workspace-view .canvas-minimap {
    display: none;
  }

  .node-agent-composer {
    top: auto !important;
    right: 10px !important;
    bottom: 72px;
    left: 74px !important;
    width: auto !important;
    min-width: 0;
    height: min(410px, calc(100% - 154px)) !important;
  }

  .canvas-interaction-status {
    display: none;
  }
}

@media (min-width: 781px) and (max-width: 1440px) {
  .is-workspace-view .inspector {
    top: 70px;
  }

  .is-workspace-view .workspace:not(.is-assistant-collapsed) .canvas-toolbar {
    left: calc((100% - 386px) / 2);
    max-width: calc(100% - 480px);
  }
}

@media (max-width: 1440px) {
  .is-workspace-view .workspace:not(.is-assistant-collapsed) .node-agent-composer {
    display: none;
  }
}

@media (max-width: 520px) {
  .canvas-shortcut-grid {
    grid-template-columns: 1fr;
  }

  .topbar__actions #undoButton,
  .topbar__actions #redoButton,
  .topbar__actions #exportButton {
    display: none;
  }

  .workspace {
    grid-template-rows: minmax(0, 1fr) minmax(230px, 42%);
  }

  .canvas-toolbar {
    min-height: 48px;
  }

  .tool-group button {
    padding-inline: 8px;
  }

  .canvas-empty h1 {
    font-size: 25px;
  }

  .canvas-empty__actions {
    width: 100%;
    flex-direction: column;
  }

  .canvas-empty__actions button {
    width: 100%;
  }

  .field-row,
  .generation-options,
  .data-summary {
    grid-template-columns: 1fr;
  }

  .skill-builder-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-builder-output-row,
  .skill-builder-stage-add {
    grid-template-columns: 1fr;
  }

  .assistant-subtabs button,
  .assistant-session-toolbar select,
  .assistant-session-toolbar button,
  .assistant-attachment-manager select,
  .assistant-attachment-manager button {
    min-height: 44px;
  }

  .assistant-result-toolbar,
  #assistantResultsList[data-view="grid"] {
    grid-template-columns: 1fr;
  }

  .modal {
    align-items: end;
    padding: 0;
  }

  .modal__panel,
  .modal__panel--wide,
  .modal__panel--skill-builder {
    width: 100%;
    max-height: 88dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .canvas-rail {
    width: 44px;
  }

  .canvas-rail small {
    display: none;
  }

  .canvas-drawer,
  .timeline-dock {
    left: 58px;
  }

  .timeline-dock__header {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-modal {
    padding: 0;
  }

  .studio-shell {
    width: 100%;
    height: 94dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .studio-header {
    align-items: flex-start;
  }

  .studio-header p,
  .studio-header .secondary-button {
    display: none;
  }
}

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

@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--bg-elevated);
  }
}