/*
 * 帧场统一界面系统
 * 默认使用浅色，系统模式由 app.js 解析为 light / dark。
 */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fa;
  --bg-elevated: #ffffff;
  --bg-soft: #eef1f6;
  --bg-strong: #e2e7ef;
  --canvas: #f0f2f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1f6;
  --text: #151922;
  --text-primary: #151922;
  --text-secondary: #4f5868;
  --text-tertiary: #7d8798;
  --line: #dfe4ec;
  --line-strong: #c7ced9;
  --accent: #4e6af3;
  --accent-strong: #3d56d8;
  --accent-soft: #e8ecff;
  --accent-ink: #ffffff;
  --danger: #c44848;
  --warning: #a96f14;
  --success: #237a53;
  --shadow: rgb(26 35 52 / 8%);
  --shadow-small: 0 1px 2px rgb(26 35 52 / 6%), 0 4px 12px rgb(26 35 52 / 5%);
  --shadow-strong: 0 1px 2px rgb(26 35 52 / 8%), 0 18px 50px rgb(26 35 52 / 12%);
  --radius: 14px;
  --radius-small: 10px;
  --radius-large: 20px;
  --topbar-height: 60px;
  --nav-width: 72px;
  --inspector-width: 360px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11141a;
  --bg-elevated: #181c23;
  --bg-soft: #20252e;
  --bg-strong: #2a303b;
  --canvas: #0e1116;
  --surface: #181c23;
  --surface-raised: #1d222a;
  --surface-sunken: #11151b;
  --text: #f2f4f8;
  --text-primary: #f2f4f8;
  --text-secondary: #b7bfca;
  --text-tertiary: #858f9e;
  --line: #2d3440;
  --line-strong: #424b59;
  --accent: #8fa2ff;
  --accent-strong: #a9b7ff;
  --accent-soft: #293253;
  --accent-ink: #111626;
  --danger: #f08b8b;
  --warning: #e2ba72;
  --success: #79c9a5;
  --shadow: rgb(0 0 0 / 34%);
  --shadow-small: 0 1px 2px rgb(0 0 0 / 28%), 0 4px 14px rgb(0 0 0 / 20%);
  --shadow-strong: 0 1px 2px rgb(0 0 0 / 40%), 0 22px 64px rgb(0 0 0 / 38%);
}

html,
body {
  background: var(--bg);
}

body {
  font-size: 14px;
}

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

input,
textarea,
select {
  border-color: var(--line);
  background: var(--surface);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--line-strong);
}

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

.app-shell {
  background: var(--bg);
}

.topbar {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 1px 0 rgb(20 27 38 / 3%);
  backdrop-filter: blur(18px);
}

.brand__mark,
.workspace-brand-mark {
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-ink);
}

.topbar__actions {
  gap: 3px;
}

.topbar-utility-button,
.text-button,
.icon-button {
  border-radius: 9px;
}

.theme-mode-button {
  width: auto;
  min-width: 52px;
  padding-inline: 10px;
  font-size: 12px;
}

.topbar-popover,
.modal__dialog {
  border-color: var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow-strong);
}

.navigation {
  border-color: var(--line);
  background: var(--surface);
}

.navigation__items,
.navigation__settings {
  padding-inline: 8px;
}

.nav-item {
  min-height: 56px;
  border-radius: 12px;
  color: var(--text-tertiary);
}

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

.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.nav-item__icon {
  border-color: color-mix(in srgb, var(--line-strong) 82%, transparent);
  border-radius: 8px;
  background: var(--surface);
}

.nav-item.is-active .nav-item__icon {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.main {
  background: var(--bg);
}

.home-content {
  width: min(calc(100% - 64px), 1180px);
  padding: 48px 0 72px;
}

.home-hero {
  max-width: 820px;
  margin: 0 auto 48px;
}

.home-hero h1 {
  color: var(--text);
  font-size: clamp(38px, 4.5vw, 58px);
  letter-spacing: -0.055em;
  line-height: 1.05;
}

.home-hero > p {
  max-width: 610px;
  margin-inline: auto;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.home-composer {
  min-height: 144px;
  border-color: var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(28 36 50 / 4%), 0 18px 50px rgb(28 36 50 / 7%);
}

.home-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    0 20px 54px rgb(28 36 50 / 9%);
}

.home-composer textarea {
  min-height: 78px;
  padding: 18px 18px 8px;
  background: transparent;
  font-size: 15px;
}

.home-composer__footer {
  padding: 8px 12px 12px;
}

.home-composer-tools > button {
  border-color: var(--line);
  background: var(--bg);
}

.home-submit {
  background: var(--accent);
  color: var(--accent-ink);
}

.home-starters {
  margin-top: 12px;
}

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

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

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

.home-section__heading {
  margin-bottom: 14px;
}

.home-section__heading > div > span,
.settings-card__eyebrow {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-section__heading h2,
.content-header h1 {
  letter-spacing: -0.035em;
}

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

.home-project-card,
.home-empty-state,
.home-skill-card,
.project-card,
.project-create-card,
.skill-card,
.settings-card,
.task-item,
.asset-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(20 27 38 / 3%);
}

.home-project-card:hover,
.home-skill-card:hover,
.project-card:hover,
.project-create-card:hover,
.skill-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 10px 28px rgb(28 36 50 / 8%);
  transform: translateY(-1px);
}

.home-project-card__preview,
.project-card__preview {
  background-color: var(--canvas);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-tertiary) 24%, transparent) 1px, transparent 1px);
}

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

.home-skill-card {
  min-height: 190px;
  padding: 18px;
}

.home-skill-card__top > span {
  border-radius: 10px;
  background: color-mix(in srgb, var(--skill-tone) 12%, var(--surface));
}

.home-skill-card p {
  color: var(--text-secondary);
  line-height: 1.65;
}

.content-view {
  width: min(100%, 1480px);
  margin-inline: auto;
  padding: 40px clamp(24px, 4vw, 64px) 64px;
}

.content-header {
  margin-bottom: 26px;
}

.content-header p,
.project-heading-main p {
  color: var(--text-secondary);
}

.content-header__eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-view {
  max-width: 1320px;
}

.model-view.is-active {
  display: flex;
  flex-direction: column;
}

.model-view .model-public-catalog {
  order: 1;
}

.model-view .model-layout {
  order: 2;
}

.model-view .model-overview {
  order: 3;
}

.model-view .model-execution-access {
  order: 4;
}

.model-view .model-acceptance {
  order: 5;
}

.model-view:not(.show-model-details) .model-detail-section {
  display: none;
}

.model-view__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.model-view__actions {
  flex: 0 0 auto;
}

.model-overview__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.model-view [data-model-advanced="true"] {
  display: none;
}

.model-view.show-advanced-tools [data-model-advanced="true"] {
  display: block;
}

.model-view.show-advanced-tools .model-acceptance {
  display: grid;
}

.model-overview {
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(20 27 38 / 3%);
}

.model-overview__intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 20px 22px;
}

.model-overview__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 780;
}

.model-overview__intro h2,
.model-overview__intro p {
  margin: 0;
}

.model-overview__intro h2 {
  font-size: 18px;
  letter-spacing: -0.025em;
}

.model-overview__intro p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.model-overview__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.model-overview__stats article {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 18px 22px 20px;
}

.model-overview__stats article + article {
  border-left: 1px solid var(--line);
}

.model-overview__stats span,
.model-overview__stats small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-overview__stats strong {
  color: var(--text);
  font-size: 20px;
  letter-spacing: -0.03em;
}

.model-layout {
  display: grid;
  gap: 18px;
}

.model-layout .settings-card--managed {
  order: -1;
}

.model-layout > .settings-card {
  padding: 24px;
}

.model-acceptance {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.model-acceptance__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.model-acceptance__header h2,
.model-acceptance__runs h3 {
  margin: 5px 0 6px;
  letter-spacing: -0.025em;
}

.model-acceptance__header p,
.model-acceptance__runs p {
  max-width: 820px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
}

.model-acceptance__notice {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line));
  border-radius: 11px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--warning) 6%, var(--bg));
}

.model-acceptance__notice strong {
  color: var(--warning);
  font-size: 11px;
  white-space: nowrap;
}

.model-acceptance__notice span {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.model-acceptance__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.model-acceptance__summary article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.model-acceptance__summary article + article {
  border-left: 1px solid var(--line);
}

.model-acceptance__summary span {
  color: var(--text-secondary);
  font-size: 10px;
}

.model-acceptance__summary strong {
  font-size: 18px;
}

.model-acceptance__plan {
  display: grid;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: var(--bg);
}

.model-acceptance__plan > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.model-acceptance__plan h3 {
  margin: 0 0 5px;
  font-size: 14px;
  letter-spacing: -0.015em;
}

.model-acceptance__plan > header p,
.model-acceptance__plan-footnote {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.model-acceptance__plan-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.model-acceptance__plan-toolbar .field {
  max-width: none;
}

.model-acceptance__plan-toolbar button {
  min-height: 38px;
}

.model-acceptance__plan-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.model-acceptance__plan-summary article {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.model-acceptance__plan-summary article + article {
  border-left: 1px solid var(--line);
}

.model-acceptance__plan-summary span {
  color: var(--text-secondary);
  font-size: 9px;
}

.model-acceptance__plan-summary strong {
  font-size: 14px;
}

.model-acceptance__plan-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.model-acceptance__plan-modes article {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
}

.model-acceptance__plan-modes article > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.model-acceptance__plan-modes article > div,
.model-acceptance__plan-modes article > p {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin: 0;
}

.model-acceptance__plan-modes strong,
.model-acceptance__plan-modes b {
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-acceptance__plan-modes small,
.model-acceptance__plan-modes p span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-acceptance__plan-modes em {
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.model-acceptance__plan-modes em[data-status="ready"] {
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  color: var(--success);
}

.model-acceptance__plan-modes button {
  min-height: 28px;
  white-space: nowrap;
}

.model-acceptance-card.is-guided {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.model-acceptance__prompt {
  max-width: none;
}

.model-acceptance__prompt textarea {
  min-height: 82px;
}

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

.model-acceptance-card {
  display: grid;
  min-width: 0;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  background: var(--bg);
}

.model-acceptance-card > header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.model-acceptance-card > header > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-weight: 800;
}

.model-acceptance-card > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.model-acceptance-card small,
.model-acceptance-card > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
}

.model-acceptance-card em {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--text-secondary);
  font-size: 9px;
  font-style: normal;
}

.model-acceptance-card em[data-status="qualified"] {
  border-color: color-mix(in srgb, var(--success) 38%, var(--line));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.model-acceptance-card em[data-status="pending"] {
  border-color: color-mix(in srgb, var(--warning) 32%, var(--line));
  color: var(--warning);
}

.model-acceptance-card__gates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.model-acceptance-card__gates span {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--bg-strong);
  color: var(--text-tertiary);
  font-size: 9px;
}

.model-acceptance-card__gates span[data-gate-status="passed"] {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}

.model-acceptance-card__model {
  display: grid;
  gap: 6px;
}

.model-acceptance-card__model > span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
}

.model-acceptance-card__model select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 32px 0 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
}

.model-acceptance-card__next {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.model-acceptance-card__next strong {
  color: var(--text);
  font-size: 10px;
}

.model-acceptance-card__next span {
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.5;
}

.model-acceptance-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.model-acceptance-card__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.model-acceptance-card__actions button {
  min-height: 30px;
  white-space: nowrap;
}

.model-acceptance__runs {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 17px;
}

#providerAcceptanceRuns {
  display: grid;
  gap: 7px;
}

#providerAcceptanceRuns > article {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
}

#providerAcceptanceRuns > article > span {
  border-radius: 7px;
  padding: 5px 8px;
  background: var(--bg-strong);
  color: var(--accent);
  font-size: 9px;
}

#providerAcceptanceRuns > article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#providerAcceptanceRuns > article > .model-acceptance-run__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

#providerAcceptanceRuns strong,
#providerAcceptanceRuns small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#providerAcceptanceRuns small {
  color: var(--text-secondary);
  font-size: 9px;
}

#providerAcceptanceRuns em {
  color: var(--text-secondary);
  font-size: 9px;
  font-style: normal;
}

#providerAcceptanceRuns em[data-status="succeeded"] {
  color: var(--success);
}

#providerAcceptanceRuns em[data-status="failed"],
#providerAcceptanceRuns em[data-status="cancelled"] {
  color: var(--danger);
}

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

#view-projects .project-card,
#view-projects .project-create-card {
  min-height: 250px;
}

.project-top-tools,
.filter-bar,
.skill-market-header {
  border-color: var(--line);
}

.segmented,
.skill-market-switch,
.skill-category-chips {
  border-color: var(--line);
  background: var(--bg-soft);
}

.segmented button.is-active,
.skill-market-switch button.is-active,
.skill-category-chips button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-small);
}

.skill-grid {
  gap: 16px;
}

.skill-card {
  overflow: hidden;
}

.skill-card__poster {
  background: color-mix(in srgb, var(--skill-poster-tone) 12%, var(--bg-soft));
}

.skill-card__poster::before,
.skill-card__poster::after {
  opacity: 0.34;
}

.skill-detail-hero,
.skill-detail-section,
.skill-detail-aside > section,
.skill-detail-actions {
  border-color: var(--line);
  background: var(--surface);
}

.settings-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 18px;
  align-items: start;
}

.settings-card {
  padding: 22px;
}

.settings-card--managed {
  grid-column: 1 / -1;
}

.settings-card__heading {
  gap: 5px;
}

.settings-card__heading--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.settings-card__heading h2 {
  letter-spacing: -0.025em;
}

.status-pill {
  display: inline-flex;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
}

.status-pill[data-status="ready"] {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  color: var(--success);
}

.status-pill[data-status="blocked"] {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
  color: var(--warning);
}

.managed-provider-lock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
}

.managed-provider-lock .primary-button {
  min-height: 40px;
}

.model-online-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line));
  border-radius: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.model-online-entry[hidden] {
  display: none;
}

.model-online-entry > div {
  display: grid;
  gap: 4px;
}

.model-online-entry strong {
  color: var(--text);
  font-size: 13px;
}

.model-online-entry span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.model-online-entry .primary-button {
  flex: 0 0 auto;
  text-decoration: none;
}

.managed-provider-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.model-setup-session[hidden] {
  display: none;
}

.model-setup-session span {
  display: grid;
  gap: 3px;
}

.model-setup-session strong {
  color: var(--text);
  font-size: 13px;
}

.model-setup-session small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.model-setup-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
  border-radius: 11px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.model-connected-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line));
  border-radius: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.model-connected-summary .button-row {
  justify-content: flex-end;
}

.model-connected-summary[hidden] {
  display: none;
}

.model-connected-summary__mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--success);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.model-connected-summary > div:not(.button-row) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.model-connected-summary strong {
  color: var(--text);
  font-size: 14px;
}

.model-connected-summary small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.model-quick-connect {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 18px;
  background: var(--surface);
}

.model-quick-connect__intro {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.model-quick-connect__intro > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}

.model-quick-connect__intro > div {
  display: grid;
  gap: 3px;
}

.model-quick-connect__intro strong {
  color: var(--text);
  font-size: 13px;
}

.model-quick-connect__intro small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.model-setup-card {
  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.managed-provider-quick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.managed-provider-quick-grid .field {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
}

.managed-provider-quick-grid input {
  min-height: 44px;
}

.managed-provider-quick-grid .field > label,
.model-setup-card__label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 740;
}

.managed-provider-quick-grid .field[hidden] {
  display: none;
}

.model-setup-card--custom-url {
  grid-column: 1 / -1;
}

.model-provider-choice {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.model-provider-choice > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
}

.model-provider-choice > summary::-webkit-details-marker {
  display: none;
}

.model-provider-choice > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: -3px;
}

.model-provider-choice > summary::after {
  content: "选择";
  color: var(--accent-strong);
  font-weight: 760;
}

.model-provider-choice[open] > summary::after {
  content: "收起";
}

.model-provider-choice[data-status="required"] {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--line));
}

.model-provider-choice[data-status="required"] > summary {
  color: var(--warning);
}

.model-provider-choice[data-status="confirmed"] > summary {
  color: var(--success);
}

.model-provider-choice .model-setup-card--provider {
  margin: 0 12px 12px;
  background: var(--surface);
}

.model-provider-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.model-provider-preset {
  display: grid;
  min-width: 0;
  min-height: 58px;
  gap: 3px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.model-provider-preset:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.model-provider-preset.is-selected,
.model-provider-preset[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
}

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

.model-provider-preset strong {
  font-size: 11px;
}

.model-provider-preset small {
  color: var(--text-secondary);
  font-size: 9px;
}

.model-api-key-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.model-api-key-control .text-button {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.model-credential-import {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 10px;
  padding: 9px;
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.model-credential-import.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.model-credential-import .text-button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
}

.model-credential-import > span {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 10px;
}

.model-credential-import small {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.model-credential-import small[data-status="success"] {
  color: var(--success);
}

.model-credential-import small[data-status="error"] {
  color: var(--danger);
}

.model-view.is-offline-preview .model-overview,
.model-view.is-offline-preview .model-public-catalog,
.model-view.is-offline-preview .model-execution-access,
.model-view.is-offline-preview .model-acceptance,
.model-view.is-offline-preview .model-view__actions,
.model-view.is-offline-preview #providerForm {
  display: none;
}

.model-view.is-offline-preview .model-layout {
  order: 1;
}

.model-view.is-offline-preview #managedProviderCard {
  max-width: 760px;
  margin-inline: auto;
}

.model-setup-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.model-quick-connect .model-setup-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding-inline: 26px;
}

.model-quick-connect[data-status="ready"] {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
}

.managed-provider-quick-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 11px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.managed-provider-quick-summary strong {
  color: var(--accent-strong);
  font-size: 11px;
}

.managed-provider-quick-summary span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.managed-provider-advanced {
  margin-top: 0;
}

.managed-provider-advanced[open] {
  padding-bottom: 14px;
}

.model-admin-dialog {
  width: min(92vw, 440px);
  margin: auto;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 80px rgb(15 23 42 / 22%);
}

.model-admin-dialog::backdrop {
  background: rgb(15 23 42 / 46%);
  backdrop-filter: blur(3px);
}

.model-admin-dialog form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.model-admin-dialog header {
  display: grid;
  gap: 6px;
}

.model-admin-dialog h3,
.model-admin-dialog p {
  margin: 0;
}

.model-admin-dialog h3 {
  color: var(--text);
  font-size: 19px;
  letter-spacing: -0.02em;
}

.model-admin-dialog header p,
.model-admin-dialog .field small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.model-admin-dialog .field {
  display: grid;
  gap: 7px;
}

.model-admin-dialog .field label {
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
}

.model-admin-dialog .field input {
  min-height: 44px;
}

.model-admin-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.managed-provider-advanced > .field-row,
.managed-provider-advanced > .field,
.managed-provider-advanced > .advanced-settings {
  margin: 14px 14px 0;
}

.managed-provider-model-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.managed-provider-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

.managed-provider-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.managed-provider-list:empty,
#managedProviderStatus:empty {
  display: none;
}

.managed-provider-list article {
  display: grid;
  min-width: 0;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
}

.managed-provider-list article[data-active="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.managed-provider-list__header,
.managed-provider-list__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.managed-provider-list__header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

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

.managed-provider-list small,
.managed-provider-list p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.managed-provider-list__models {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.managed-provider-list__models span {
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--bg-strong);
  color: var(--text-secondary);
  font-size: 10px;
}

.managed-provider-list__catalog-summary {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--surface);
}

.managed-provider-list__catalog-summary[data-discovery-status="ready"] {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.managed-provider-list__catalog-summary[data-discovery-status="unavailable"] {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--danger);
}

.managed-provider-list__actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.managed-provider-list__actions button {
  min-height: 32px;
  border-radius: 8px;
  padding-inline: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11px;
}

.model-setup-submit {
  min-width: 180px;
}

.model-setup-footnote {
  margin: -6px 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.55;
}

.model-public-catalog {
  margin-bottom: var(--space-5);
}

.model-execution-access {
  margin-bottom: var(--space-5);
}

.managed-provider-lock--execution .button-row {
  justify-content: flex-end;
  margin: 0;
}

.model-public-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-3);
}

.model-public-catalog__grid > .empty-state {
  grid-column: 1 / -1;
}

.model-public-provider {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.model-public-provider[data-active="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 58%
    ),
    var(--bg-soft);
}

.model-public-provider > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.model-public-provider > header > div {
  min-width: 0;
}

.model-public-provider > header strong,
.model-public-provider > header small {
  display: block;
}

.model-public-provider > header strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-public-provider > header small,
.model-public-provider > p {
  color: var(--text-tertiary);
}

.model-public-provider__eligibility {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.model-public-provider__eligibility > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-subtle));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised));
}

.model-public-provider__eligibility span,
.model-public-provider__eligibility small {
  display: block;
  min-width: 0;
}

.model-public-provider__eligibility b {
  overflow-wrap: anywhere;
}

.model-public-provider__eligibility small {
  margin-top: 2px;
  color: var(--text-muted);
}

.model-public-provider__eligibility .text-button {
  flex: 0 0 auto;
}

@media (max-width: 780px) {
  .model-public-provider__eligibility > div {
    align-items: stretch;
    flex-direction: column;
  }
}

.model-public-provider > header > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.model-public-provider > header > span[data-status="ready"] {
  border-color: color-mix(in srgb, var(--success) 38%, var(--line));
  color: var(--success);
}

.model-public-provider__counts,
.model-public-provider__defaults {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.model-public-provider__counts strong,
.model-public-provider__counts span,
.model-public-provider__defaults span {
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
}

.model-public-provider__counts strong {
  color: var(--text);
}

.model-public-provider__counts strong small {
  margin-left: 4px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.model-public-provider__defaults span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-public-provider > p {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  line-height: 1.55;
}

/* 无限画布沿用同一套明暗令牌，不再强制深色。 */
body.is-workspace-view {
  --canvas: var(--surface-sunken);
  --bg: var(--surface-sunken);
  --bg-elevated: var(--surface);
  --bg-soft: color-mix(in srgb, var(--surface-sunken) 72%, var(--surface));
  --bg-strong: color-mix(in srgb, var(--line) 72%, var(--surface));
  --text: #151922;
  --text-primary: #151922;
  --text-secondary: #4f5868;
  --text-tertiary: #7d8798;
  --line: #dfe4ec;
  --line-strong: #c7ced9;
  --accent: #4e6af3;
  --accent-strong: #3d56d8;
  --accent-ink: #ffffff;
  --danger: #c44848;
  --warning: #a96f14;
  --success: #237a53;
  --shadow: rgb(26 35 52 / 8%);
}

:root[data-theme="dark"] body.is-workspace-view {
  --text: #f2f4f8;
  --text-primary: #f2f4f8;
  --text-secondary: #b7bfca;
  --text-tertiary: #858f9e;
  --line: #2d3440;
  --line-strong: #424b59;
  --accent: #8fa2ff;
  --accent-strong: #a9b7ff;
  --accent-ink: #111626;
  --danger: #f08b8b;
  --warning: #e2ba72;
  --success: #79c9a5;
  --shadow: rgb(0 0 0 / 34%);
}

.is-workspace-view .canvas-viewport {
  background-color: var(--canvas);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-tertiary) 28%, transparent) 1px, transparent 1px);
}

.workspace-header-button,
.is-workspace-view .canvas-toolbar,
.is-workspace-view .canvas-rail,
.is-workspace-view .canvas-drawer,
.is-workspace-view .timeline-dock,
.is-workspace-view .canvas-minimap,
.is-workspace-view .inspector,
.assistant-floating-surface {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(18px);
}

.workspace-header-button:hover,
.workspace-header-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: var(--surface);
}

.workspace-add-menu {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

.is-workspace-view .canvas-toolbar {
  box-shadow: var(--shadow-small);
}

.is-workspace-view .canvas-node {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--shadow) 90%, transparent);
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-header {
  background: var(--bg-soft);
}

.is-workspace-view .canvas-node[data-node-type="agent"] .node-port {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.agent-node-skill-card,
.node-agent-composer,
.node-agent-composer__header {
  border-color: var(--line);
  background: var(--surface);
}

.node-agent-composer {
  box-shadow: var(--shadow-strong);
}

.node-agent-composer__header {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.node-agent-composer__footer .node-agent-send {
  background: var(--accent);
  color: var(--accent-ink);
}

.target-skill-demo__graph {
  background-color: var(--canvas);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-tertiary) 28%, transparent) 1px, transparent 1px);
}

.settings-card--managed .empty-state {
  min-height: 104px;
  padding: 24px;
}

@media (max-width: 1180px) {
  .home-projects,
  #view-projects .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .managed-provider-model-grid,
  .managed-provider-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-content {
    width: min(calc(100% - 32px), 760px);
    padding-top: 36px;
  }

  .home-projects,
  #view-projects .project-grid,
  .home-skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .model-overview__stats article:nth-child(3) {
    border-left: 0;
  }

  .model-overview__stats article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .settings-card--managed {
    grid-column: auto;
  }

  .managed-provider-quick-grid {
    grid-template-columns: 1fr;
  }

  .model-setup-actions {
    grid-template-columns: 1fr;
  }

  .model-setup-actions .model-setup-submit {
    width: 100%;
  }

  .model-provider-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .home-content {
    width: min(calc(100% - 24px), 560px);
    padding: 28px 0 96px;
  }

  .home-hero {
    margin-bottom: 34px;
  }

  .home-hero h1 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .home-projects,
  #view-projects .project-grid,
  .home-skills,
  .managed-provider-model-grid,
  .managed-provider-path-grid {
    grid-template-columns: 1fr;
  }

  .model-provider-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-setup-submit {
    width: 100%;
  }

  .content-view {
    padding: 24px 14px 84px;
  }

  .model-view__header,
  .model-overview__intro {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .model-overview__actions,
  .model-connected-summary .button-row {
    width: 100%;
    justify-content: flex-start;
  }

  .model-view__header .secondary-button {
    align-self: flex-start;
  }

  .model-view__actions,
  .model-online-entry,
  .model-connected-summary {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .model-connected-summary {
    grid-template-columns: 1fr;
  }

  .model-connected-summary__mark {
    width: 32px;
    height: 32px;
  }

  .model-connected-summary .button-row,
  .model-connected-summary .button-row button {
    width: 100%;
  }

  .model-credential-import {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .model-credential-import small {
    grid-column: auto;
  }

  .model-view__actions button,
  .model-online-entry .primary-button {
    width: 100%;
  }

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

  .model-overview__stats article + article,
  .model-overview__stats article:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .settings-card {
    padding: 18px;
  }

  .settings-card__heading--row,
  .managed-provider-lock,
  .model-acceptance__header {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .model-acceptance {
    padding: 18px;
  }

  .model-acceptance__notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .model-acceptance__plan > header,
  .model-acceptance__plan-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .model-acceptance__plan-toolbar button {
    width: 100%;
  }

  .model-acceptance__plan-summary,
  .model-acceptance__plan-modes {
    grid-template-columns: 1fr;
  }

  .model-acceptance__plan-summary article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .model-acceptance__plan-modes article {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .model-acceptance__plan-modes article > p {
    grid-column: 2 / -1;
  }

  .model-acceptance__plan-modes article > button {
    grid-column: 2 / -1;
    justify-self: start;
  }

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

  .model-acceptance__summary article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .model-acceptance-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .model-acceptance-card__actions {
    width: 100%;
    justify-content: flex-start;
  }

  #providerAcceptanceRuns > article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #providerAcceptanceRuns > article > .model-acceptance-run__actions {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

@media (max-width: 360px) {
  .model-provider-presets {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-project-card:hover,
  .home-skill-card:hover,
  .project-card:hover,
  .project-create-card:hover,
  .skill-card:hover {
    transform: none;
  }
}
.task-item__error,
.model-acceptance-run__error {
  color: var(--danger);
  overflow-wrap: anywhere;
}

.workflow-hub-view {
  max-width: 1320px;
}

.workflow-hub-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.workflow-hub-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    var(--surface);
  box-shadow: var(--shadow-small);
}

.workflow-hub-overview > article {
  min-width: 0;
  padding: 20px;
}

.workflow-hub-overview > article + article {
  border-left: 1px solid var(--line);
}

.workflow-hub-overview span,
.workflow-hub-overview small {
  display: block;
  color: var(--text-secondary);
}

.workflow-hub-overview strong {
  display: block;
  margin: 6px 0 3px;
  font-size: 25px;
  letter-spacing: -0.04em;
}

.workflow-hub-boundary {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--line));
  border-radius: 14px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  color: var(--text-secondary);
}

.workflow-hub-boundary strong {
  flex: 0 0 auto;
  color: var(--text);
}

.workflow-hub-admin {
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: var(--bg-soft);
}

.workflow-hub-unlock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}

.workflow-hub-unlock[hidden] {
  display: none;
}

.workflow-hub-unlock .inline-status {
  grid-column: 1 / -1;
}

.workflow-hub-admin__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#workflowBatchImportForm {
  grid-column: 1 / -1;
}

.workflow-hub-card .check-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.workflow-hub-card .check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  margin-top: 3px;
  padding: 0;
  accent-color: var(--accent);
}

.workflow-ownership-confirmation {
  align-items: flex-start;
}

.workflow-hub-card,
.workflow-source-list > article {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--surface);
}

.workflow-hub-card h2,
.workflow-hub-card p {
  margin: 0;
}

.workflow-hub-card p {
  margin-top: 5px;
  color: var(--text-secondary);
}

.workflow-source-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.workflow-source-list > article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.workflow-source-list p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.workflow-source-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.workflow-hub-filters {
  margin: 18px 0;
}

.workflow-hub-result-summary {
  margin: -8px 0 14px;
  color: var(--text-secondary);
  font-size: 13px;
}

.workflow-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.workflow-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(20 27 38 / 3%);
}

.workflow-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 12px 30px rgb(28 36 50 / 8%);
}

.workflow-card__top,
.workflow-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-card__footer {
  align-items: flex-end;
  flex-wrap: wrap;
}

.workflow-card__footer .button-row {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.workflow-card__favorite[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent);
}

.workflow-card__type,
.workflow-card__category {
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 12px;
}

.workflow-card h2,
.workflow-card p {
  margin: 0;
}

.workflow-card h2 {
  font-size: 18px;
}

.workflow-card p {
  flex: 1;
  color: var(--text-secondary);
  line-height: 1.65;
}

.workflow-card__contract {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-card__contract span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.workflow-card__preset {
  display: grid;
  gap: 6px;
}

.workflow-card__preset span {
  color: var(--text-secondary);
  font-size: 12px;
}

.workflow-card__preset select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-primary);
}

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

.workflow-card__fields summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}

.workflow-card__fields ul {
  display: grid;
  gap: 7px;
  max-height: 220px;
  margin: 10px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.workflow-card__fields li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-radius: 9px;
  padding: 7px 9px;
  background: var(--bg-soft);
}

.workflow-card__fields li strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.workflow-card__fields li span,
.workflow-card__fields > small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.workflow-hub-load-more {
  display: flex;
  justify-content: center;
  padding: 22px 0 4px;
}

.workflow-hub-load-more[hidden] {
  display: none;
}

.workflow-card__footer small {
  color: var(--text-tertiary);
}

@media (max-width: 1060px) {
  .workflow-hub-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-hub-overview > article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .workflow-hub-admin__grid,
  .workflow-hub-grid {
    grid-template-columns: 1fr;
  }

  .workflow-source-list > article {
    grid-template-columns: 1fr;
  }

  .workflow-source-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .workflow-hub-header,
  .workflow-hub-boundary {
    align-items: flex-start;
    flex-direction: column;
  }

  .workflow-hub-overview {
    grid-template-columns: 1fr;
  }
}