.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-projects .dashboard-collection-search,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-starred .dashboard-collection-search,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-created .dashboard-collection-search,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-published .dashboard-collection-search {
  min-height: 48px !important;
  border-radius: var(--radius-card) !important;
  background: rgba(9, 9, 10, 0.54) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-projects .dashboard-view-toggle,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-starred .dashboard-view-toggle,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-created .dashboard-view-toggle,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-published .dashboard-view-toggle {
  justify-self: end !important;
  min-height: var(--button-height-prominent) !important;
  border-radius: var(--radius-card) !important;
  background: rgba(9, 9, 10, 0.54) !important;
}

.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-projects .dashboard-collection-subtitle,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-starred .dashboard-collection-subtitle,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-created .dashboard-collection-subtitle,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-published .dashboard-collection-subtitle {
  margin: 0 0 var(--space-6) !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 16px !important;
  font-weight: 520 !important;
  line-height: 1.4 !important;
}

.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-projects .dashboard-project-grid,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-starred .dashboard-project-grid,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-created .dashboard-project-grid,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-published .dashboard-project-grid {
  margin-top: 0 !important;
}

.workspace-rename-dialog {
  width: min(560px, 100%) !important;
}

@media (max-width: 980px) {
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-projects.dashboard-collection-managed,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-starred.dashboard-collection-managed,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-created.dashboard-collection-managed,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-published.dashboard-collection-managed {
    width: min(100% - 32px, 900px) !important;
    margin-top: var(--space-7) !important;
  }

  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-projects .dashboard-collection-toolbar,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-starred .dashboard-collection-toolbar,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-created .dashboard-collection-toolbar,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-published .dashboard-collection-toolbar {
    grid-template-columns: 1fr !important;
  }
}

.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  margin-inline-start: 0 !important;
}

.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-managed .dashboard-project-grid,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-managed .dashboard-resource-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-collection-pagination {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 680;
}

.dashboard-collection-pagination button {
  min-height: var(--button-height-default);
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
  font-weight: 760;
}

.dashboard-collection-pagination button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.dashboard-collection-page-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: rgba(255, 255, 255, 0.58);
}

.dashboard-collection-page-jump input {
  width: 64px;
  min-width: 0;
  height: 34px;
  padding: 0 var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-input);
  outline: none;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 720;
  text-align: center;
}

.dashboard-collection-page-jump input:focus {
  border-color: rgba(29, 155, 240, 0.62);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.14);
}

@media (max-width: 720px) {
  .dashboard-collection-pagination {
    flex-wrap: wrap;
  }
}

.admin-gallery-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.admin-gallery-toggle-field {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.admin-gallery-toggle-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.admin-gallery-textarea {
  min-height: 74px;
  resize: vertical;
}

@media (max-width: 1500px) {
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-managed .dashboard-project-grid,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-managed .dashboard-resource-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-managed .dashboard-project-grid,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-collection-managed .dashboard-resource-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-gallery-number-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Latest prompt pass: low Lovable-style composer, identical height in AI App 2.0 mode. */
.main-hero-intro .main-prompt,
.main-hero-intro .main-prompt.has-ai-app2,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 186px !important;
  padding: var(--space-5) var(--space-6) var(--space-4) !important;
  border-radius: var(--radius-input) !important;
}

.main-hero-intro .main-prompt .main-prompt-field,
.main-prompt.has-ai-app2 .main-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .dashboard-prompt-field {
  min-height: 76px !important;
}

.main-hero-intro .main-prompt textarea,
.main-hero-intro .main-prompt.has-ai-app2 textarea,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt textarea,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 textarea {
  min-height: 76px !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 260;
  line-height: 1.35;
}

.main-hero-intro .main-prompt.has-ai-app2 .main-typewriter-preview,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .main-typewriter-preview,
.ai-app2-inline-fields,
.ai-app2-config-card,
.main-prompt.has-ai-app2 > .ai-app2-config-card,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 > .ai-app2-config-card,
.main-hero-intro .main-prompt .main-model-picker,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-build-mode {
  display: none !important;
}

.main-hero-intro .main-prompt .main-prompt-actions,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  margin-top: var(--space-2) !important;
  min-height: 42px;
  align-items: center;
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-prompt-tools {
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-attach-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  width: 38px !important;
  min-width: 38px !important;
  height: var(--button-height-default) !important;
  min-height: var(--button-height-default) !important;
  margin-inline-start: calc(var(--space-4) * -1) !important;
}

.main-ai-app2-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
  height: var(--button-height-default) !important;
  min-height: var(--button-height-default) !important;
  padding: 0 var(--space-3) !important;
  gap: 0 !important;
}

.ai-app2-footer-fields {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
}

.ai-app2-mini-field {
  height: 34px !important;
  padding: 0 var(--space-2) !important;
  border-radius: 999px !important;
}

.ai-app2-mini-field input {
  width: 118px !important;
  height: 26px !important;
  font-size: 12px !important;
}

.ai-app2-mini-field:not(.ai-app2-id-field) input {
  width: 106px !important;
}

.main-hero-intro .main-prompt .main-submit-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: var(--button-height-prominent) !important;
  min-height: var(--button-height-prominent) !important;
  margin-inline-start: auto !important;
  margin-inline-end: var(--space-4) !important;
}

.main-hero-intro .main-prompt .main-submit-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.main-hero-intro .main-prompt .main-attach-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 980px) {
  .ai-app2-mini-field:not(.ai-app2-id-field) {
    display: none !important;
  }
}

/* Final prompt geometry pass: keep mode height stable and expose all AI App 2.0 inputs. */
.main-hero-intro .main-prompt,
.main-hero-intro .main-prompt.has-ai-app2,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 252px;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-radius: var(--radius-input);
}

.main-hero-intro .main-prompt .main-prompt-field,
.main-prompt.has-ai-app2 .main-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .dashboard-prompt-field {
  min-height: 148px;
}

.ai-app2-inline-fields {
  width: 100%;
  min-height: 148px;
  display: grid;
  grid-template-columns: minmax(210px, 0.46fr) minmax(0, 1fr);
  grid-template-areas:
    "brief brief"
    "id style";
  align-items: start;
  gap: var(--space-3) var(--space-3);
}

.ai-app2-brief-field {
  grid-area: brief;
}

.ai-app2-id-field {
  grid-area: id;
}

.ai-app2-style-field {
  grid-area: style;
}

.ai-app2-inline-fields .ai-app2-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.ai-app2-inline-fields .ai-app2-field span {
  min-height: 17px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 720;
}

.ai-app2-inline-fields .ai-app2-field input,
.ai-app2-inline-fields .ai-app2-field textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 0;
  outline: 0;
  border-radius: var(--radius-input);
  background: rgba(0, 0, 0, 0.17);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.085);
}

.ai-app2-inline-fields .ai-app2-field input {
  height: 40px;
  padding: 0 var(--space-3);
  font-size: 14px;
}

.ai-app2-inline-fields .ai-app2-field textarea {
  height: 40px;
  min-height: 40px;
  max-height: 72px;
  padding: var(--space-2) var(--space-3);
  resize: none;
  font-size: 14px;
  line-height: 1.35;
}

.ai-app2-inline-fields .ai-app2-brief-field textarea {
  height: 42px;
  min-height: 42px;
}

.ai-app2-inline-fields .ai-app2-field input::placeholder,
.ai-app2-inline-fields .ai-app2-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.main-hero-intro .main-prompt .main-attach-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  margin-inline-start: calc(var(--space-2) * -1);
}

.main-hero-intro .main-prompt .main-prompt-actions,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  margin-top: var(--space-2);
}

@media (max-width: 760px) {
  .ai-app2-inline-fields {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brief"
      "id"
      "style";
  }
}

/* Final compact builder: AI App 2.0 must not change prompt height. */
.main-hero-intro .main-prompt,
.main-hero-intro .main-prompt.has-ai-app2,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 176px;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-radius: var(--radius-input);
}

.main-hero-intro .main-prompt .main-prompt-field,
.main-prompt.has-ai-app2 .main-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .dashboard-prompt-field {
  min-height: 70px;
}

.main-hero-intro .main-prompt textarea,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt textarea {
  min-height: 70px;
}

.main-hero-intro .main-prompt.has-ai-app2 textarea,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 textarea {
  min-height: 70px;
}

.main-hero-intro .main-prompt.has-ai-app2 .main-typewriter-preview,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .main-typewriter-preview,
.ai-app2-inline-fields,
.ai-app2-config-card {
  display: none !important;
}

.main-hero-intro .main-prompt .main-prompt-actions,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  margin-top: var(--space-2);
  min-height: 38px;
  align-items: center;
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-prompt-tools,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-attach-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  width: 36px;
  min-width: 36px;
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  margin-inline-start: calc(var(--space-4) * -1);
}

.main-ai-app2-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding: 0 var(--space-3);
}

.ai-app2-footer-fields {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ai-app2-mini-field {
  min-width: 0;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ai-app2-mini-field span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.ai-app2-mini-field input {
  width: 126px;
  min-width: 0;
  height: 28px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 650;
}

.ai-app2-mini-field input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.ai-app2-mini-field input:focus {
  color: #ffffff;
}

.ai-app2-mini-field:focus-within {
  box-shadow: inset 0 0 0 1px rgba(142, 233, 209, 0.34);
}

.ai-app2-mini-field:not(.ai-app2-id-field) input {
  width: 112px;
}

.main-hero-intro .main-prompt .main-submit-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn {
  width: 42px;
  min-width: 42px;
  height: var(--button-height-prominent);
  min-height: var(--button-height-prominent);
  margin-inline-start: auto;
  margin-inline-end: var(--space-2);
}

@media (max-width: 980px) {
  .ai-app2-mini-field:not(.ai-app2-id-field) {
    display: none;
  }
}

/* AI App 2.0 entry for the outer builders. */
.main-hero-intro .main-prompt .main-attach-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  width: 38px;
  min-width: 38px;
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding: 0;
  border-radius: var(--radius-pill);
  justify-content: center;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 10px 30px rgba(0, 0, 0, 0.16);
}

.main-hero-intro .main-prompt .main-attach-btn:hover,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.main-hero-intro .main-prompt .main-submit-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn {
  width: 46px;
  min-width: 46px;
  height: var(--button-height-prominent);
  min-height: var(--button-height-prominent);
  margin-inline-start: auto;
  padding: 0;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(234, 245, 255, 0.86);
  color: #0a1114;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    0 16px 42px rgba(102, 209, 241, 0.18);
}

.main-hero-intro .main-prompt .main-submit-btn span,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.main-hero-intro .main-prompt .main-submit-btn:hover:not(:disabled),
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn:hover:not(:disabled) {
  background: #ffffff;
  transform: translateY(-1px);
}

.main-hero-intro .main-prompt .main-submit-btn:disabled,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn:disabled {
  opacity: 0.58;
  cursor: progress;
}

.main-hero-intro .main-prompt .main-submit-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn svg,
.main-hero-intro .main-prompt .main-attach-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus svg {
  width: 16px;
  height: 16px;
}

.main-ai-app2-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
  box-shadow: none;
}

.main-ai-app2-btn:hover:not(:disabled),
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.main-ai-app2-btn.active,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn.active {
  background: rgba(142, 233, 209, 0.13);
  color: #bdf4e5;
  box-shadow: inset 0 0 0 1px rgba(142, 233, 209, 0.18);
}

.main-ai-app2-logo,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-logo {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.main-hero-intro .main-prompt .main-model-picker,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-build-mode {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding-inline: var(--space-2);
  font-size: 13px;
}

.main-prompt.has-ai-app2,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 288px;
}

.ai-app2-config-card {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-3);
  border-radius: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.72fr);
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 16px 44px rgba(0, 0, 0, 0.14);
}

.ai-app2-config-head {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ai-app2-config-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(142, 233, 209, 0.12);
  color: #a5f0dc;
  box-shadow: inset 0 0 0 1px rgba(142, 233, 209, 0.16);
}

.ai-app2-config-logo svg {
  width: 22px;
  height: 22px;
}

.ai-app2-config-head div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.ai-app2-config-head strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.2;
}

.ai-app2-config-head span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  line-height: 1.35;
}

.ai-app2-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.ai-app2-field span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 680;
}

.ai-app2-field em {
  color: #8ee9d1;
  font-style: normal;
  font-size: 11px;
}

.ai-app2-field input,
.ai-app2-field textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  border-radius: var(--radius-input);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.085);
}

.ai-app2-field input {
  height: 38px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.ai-app2-field textarea {
  min-height: 38px;
  max-height: 96px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  font-size: 13px;
  line-height: 1.4;
}

.ai-app2-field input::placeholder,
.ai-app2-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.ai-app2-field input:focus,
.ai-app2-field textarea:focus {
  box-shadow: inset 0 0 0 1px rgba(142, 233, 209, 0.34);
}

@media (max-width: 760px) {
  .ai-app2-config-card {
    grid-template-columns: 1fr;
  }

  .main-ai-app2-btn span,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn span,
  .main-hero-intro .main-prompt .main-model-picker span,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-build-mode span {
    display: none;
  }

  .main-ai-app2-btn,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }
}

/* Final override: AI App 2.0 is inline, compact, and model-free. */
.main-hero-intro .main-prompt.has-ai-app2,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 218px;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-radius: var(--radius-input);
}

.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 204px;
}

.main-prompt.has-ai-app2 .main-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .dashboard-prompt-field {
  min-height: 106px;
}

.ai-app2-inline-fields {
  width: 100%;
  min-height: 100px;
  display: grid;
  grid-template-columns: minmax(210px, 0.48fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
}

.ai-app2-inline-fields .ai-app2-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.ai-app2-inline-fields .ai-app2-field span {
  min-height: 18px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 720;
}

.ai-app2-inline-fields .ai-app2-field input,
.ai-app2-inline-fields .ai-app2-field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  border-radius: var(--radius-input);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.082);
}

.ai-app2-inline-fields .ai-app2-field input {
  height: 48px;
  padding: 0 var(--space-3);
  font-size: 16px;
}

.ai-app2-inline-fields .ai-app2-field textarea {
  min-height: 48px;
  height: 72px;
  max-height: 98px;
  padding: var(--space-3) var(--space-3);
  resize: none;
  font-size: 15px;
  line-height: 1.45;
}

.main-hero-intro .main-prompt.has-ai-app2 .main-typewriter-preview,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .main-typewriter-preview,
.main-prompt.has-ai-app2 > .ai-app2-config-card,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 > .ai-app2-config-card,
.main-hero-intro .main-prompt .main-model-picker,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-build-mode {
  display: none !important;
}

.main-hero-intro .main-prompt .main-prompt-actions,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  margin-top: var(--space-2);
  align-items: center;
  gap: var(--space-2);
}

.main-hero-intro .main-prompt.has-ai-app2 .main-prompt-actions,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .dashboard-prompt-footer {
  margin-top: var(--space-2);
}

.main-hero-intro .main-prompt .main-prompt-tools,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-attach-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  width: 36px;
  min-width: 36px;
  height: var(--button-height-default);
  min-height: var(--button-height-default);
}

.main-ai-app2-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding: 0 var(--space-3);
  gap: 0;
}

.main-hero-intro .main-prompt .main-submit-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn {
  width: 42px;
  min-width: 42px;
  height: var(--button-height-prominent);
  min-height: var(--button-height-prominent);
  margin-inline-start: auto;
  margin-inline-end: var(--space-3);
}

.main-hero-intro .main-prompt .main-submit-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn svg,
.main-hero-intro .main-prompt .main-attach-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 760px) {
  .ai-app2-inline-fields {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .main-ai-app2-btn,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
    width: auto;
    min-width: 0;
  }
}

/* True final prompt pass: keep the composer low and stable after all legacy overrides. */
.main-hero-intro .main-prompt,
.main-hero-intro .main-prompt.has-ai-app2,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 {
  min-height: 186px !important;
  padding: var(--space-5) var(--space-6) var(--space-4) !important;
  border-radius: var(--radius-input) !important;
}

.main-hero-intro .main-prompt .main-prompt-field,
.main-prompt.has-ai-app2 .main-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-field,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .dashboard-prompt-field {
  min-height: 76px !important;
}

.main-hero-intro .main-prompt textarea,
.main-hero-intro .main-prompt.has-ai-app2 textarea,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt textarea,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 textarea {
  min-height: 76px !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 260;
  line-height: 1.35;
}

.main-hero-intro .main-prompt.has-ai-app2 .main-typewriter-preview,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 .main-typewriter-preview,
.ai-app2-inline-fields,
.ai-app2-config-card,
.main-prompt.has-ai-app2 > .ai-app2-config-card,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt.has-ai-app2 > .ai-app2-config-card,
.main-hero-intro .main-prompt .main-model-picker,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-build-mode {
  display: none !important;
}

.main-hero-intro .main-prompt .main-prompt-actions,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-footer {
  margin-top: var(--space-2) !important;
  min-height: 42px;
  align-items: center;
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-prompt-tools {
  gap: var(--space-2);
}

.main-hero-intro .main-prompt .main-attach-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus {
  width: 38px !important;
  min-width: 38px !important;
  height: var(--button-height-default) !important;
  min-height: var(--button-height-default) !important;
  margin-inline-start: 0 !important;
}

.main-ai-app2-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-ai-app2-btn {
  height: var(--button-height-default) !important;
  min-height: var(--button-height-default) !important;
  padding: 0 var(--space-3) !important;
  gap: 0 !important;
  font-family: var(--font-sans);
  font-weight: 300 !important;
}

.ai-app2-footer-fields {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
}

.ai-app2-mini-field {
  height: 34px !important;
  padding: 0 var(--space-2) !important;
  border-radius: 999px !important;
  font-family: var(--font-sans);
}

.ai-app2-mini-field input {
  width: 118px !important;
  height: 26px !important;
  font-size: 12px !important;
  font-weight: 300 !important;
}

.ai-app2-mini-field:not(.ai-app2-id-field) input {
  width: 106px !important;
}

.main-hero-intro .main-prompt .main-submit-btn,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: var(--button-height-prominent) !important;
  min-height: var(--button-height-prominent) !important;
  margin-inline-start: auto !important;
  margin-inline-end: var(--space-4) !important;
}

.main-hero-intro .main-prompt .main-submit-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-send-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.main-hero-intro .main-prompt .main-attach-btn svg,
.workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .dashboard-prompt-plus svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 980px) {
  .ai-app2-mini-field:not(.ai-app2-id-field) {
    display: none !important;
  }
}


.app-type-toggle {
  height: var(--button-height-default);
  min-width: 0;
  padding: var(--space-1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-type-toggle button {
  height: var(--button-height-compact);
  min-width: 54px;
  border: 0;
  border-radius: 999px;
  padding: 0 var(--space-2);
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.app-type-toggle button.active {
  background: #ffffff;
  color: #101112;
}

.app-type-toggle button:disabled {
  opacity: 0.56;
}

/* 项目可选能力勾选（新建项目弹窗 chips + 能力设置弹窗）。
   Use theme tokens so light mode keeps readable contrast on white surfaces. */
.dashboard-capability-chip {
  height: var(--button-height-compact);
  border: 0;
  border-radius: 999px;
  padding: 0 var(--space-3) 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-default);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.dashboard-capability-chip.active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 55%, transparent);
  color: var(--blue);
}

.dashboard-capability-chip:disabled {
  opacity: 0.56;
}

.workspace-create-capabilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.workspace-create-capabilities > span {
  font-size: 12px;
  font-weight: 720;
  color: var(--text-muted);
}

.workspace-capability-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

.workspace-capability-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workspace-capability-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-default);
  cursor: pointer;
}

.workspace-capability-item.active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent);
}

.workspace-capability-item input {
  margin-top: var(--space-1);
  accent-color: var(--blue);
}

.workspace-capability-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.workspace-capability-copy strong {
  font-size: 13px;
  font-weight: 760;
  color: var(--text-primary);
}

.workspace-capability-builtin {
  width: fit-content;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  font-style: normal;
  line-height: var(--type-caption-line);
}

.workspace-capability-copy small {
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.workspace-capability-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--space-9));
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-dialog);
  gap: 0;
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.workspace-capability-dialog > h2 {
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-4);
  color: var(--text-primary);
  font-size: var(--type-h2-size);
  font-weight: 600;
  line-height: var(--type-h2-line);
  letter-spacing: -0.01em;
}

.workspace-capability-dialog > .workspace-create-close {
  top: var(--space-5);
  inset-inline-end: var(--space-6);
  width: var(--button-height-compact);
  height: var(--button-height-compact);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
}

.workspace-capability-dialog > .workspace-create-close:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text-primary);
}

.workspace-capability-dialog > .workspace-create-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.workspace-capability-dialog > .workspace-create-close:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}

.workspace-capability-dialog .flow-capability-panel {
  display: grid;
  gap: var(--space-4);
  max-height: min(64vh, 640px);
  overflow: auto;
  padding: 0 var(--space-6) var(--space-4);
}

.workspace-capability-dialog .dashboard-flow-picker,
.workspace-capability-dialog .dashboard-custom-caps {
  width: 100%;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.workspace-capability-dialog .dashboard-custom-caps-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.workspace-capability-dialog .dashboard-custom-caps-head > span:first-child {
  color: var(--text-primary);
  font-size: var(--type-label-size);
  font-weight: 600;
  line-height: var(--type-label-line);
}

.workspace-capability-dialog .dashboard-custom-caps-hint,
.workspace-capability-dialog .dashboard-custom-caps-empty {
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

/* 目录没取到时的错误态 + 重试；与 dashboard-custom-caps-empty 的「本流没有能力」区分开。 */
.flow-capability-panel .dashboard-custom-caps-error {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  width: 100%;
}

.flow-capability-panel .dashboard-custom-caps-error > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.flow-capability-panel .dashboard-custom-caps-error > button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.workspace-capability-dialog .dashboard-flow-picker-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.workspace-capability-dialog .dashboard-flow-option {
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.workspace-capability-dialog .dashboard-flow-option:hover:not(:disabled, .is-locked, .is-active) {
  background: var(--surface-3);
}

.workspace-capability-dialog .dashboard-flow-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.workspace-capability-dialog .dashboard-flow-option.is-active,
.workspace-capability-dialog .dashboard-flow-option.is-locked {
  border-color: var(--blue) !important;
  background: var(--blue-soft);
}

.workspace-capability-dialog .dashboard-flow-option:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}

.workspace-capability-dialog .dashboard-flow-option-icon {
  width: var(--button-height-compact);
  height: var(--button-height-compact);
  flex: 0 0 var(--button-height-compact);
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-secondary);
}

.workspace-capability-dialog .dashboard-flow-option:is(.is-active, .is-locked) .dashboard-flow-option-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.workspace-capability-dialog .dashboard-flow-option-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  flex: 1;
}

.workspace-capability-dialog .dashboard-flow-option-label {
  color: var(--text-primary);
  font-size: var(--type-label-size);
  font-weight: 600;
  line-height: var(--type-label-line);
}

.workspace-capability-dialog .dashboard-flow-option-hint {
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-capability-dialog .dashboard-flow-option-check {
  flex: 0 0 auto;
  color: var(--blue);
  opacity: 0;
}

.workspace-capability-dialog .dashboard-flow-option:is(.is-active, .is-locked) .dashboard-flow-option-check {
  opacity: 1;
}

.workspace-capability-dialog .dashboard-custom-caps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.workspace-capability-dialog .dashboard-custom-cap-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.workspace-capability-dialog .dashboard-custom-cap-item:hover:not(.is-locked, .is-checked) {
  background: var(--surface-3);
}

.workspace-capability-dialog .dashboard-custom-cap-item.is-checked {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.workspace-capability-dialog .dashboard-custom-cap-item:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.workspace-capability-dialog .dashboard-custom-cap-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

.workspace-capability-dialog .dashboard-custom-cap-checkbox {
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-1);
  flex: 0 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-control) / 2);
  display: grid;
  place-items: center;
  color: var(--text-on-accent);
}

.workspace-capability-dialog .dashboard-custom-cap-item.is-checked .dashboard-custom-cap-checkbox {
  border-color: var(--blue);
  background: var(--blue);
}

.workspace-capability-dialog .dashboard-custom-cap-item.is-locked,
.dashboard-custom-cap-item.is-locked {
  cursor: default;
}

.workspace-capability-dialog .dashboard-custom-cap-copy,
.dashboard-custom-cap-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  flex: 1;
}

.workspace-capability-dialog .dashboard-custom-cap-label {
  color: var(--text-primary);
  font-size: var(--type-label-size);
  font-weight: 600;
  line-height: var(--type-label-line);
}

.workspace-capability-dialog .dashboard-custom-cap-desc {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-capability-dialog .dashboard-custom-cap-desc:hover,
.workspace-capability-dialog .dashboard-custom-cap-desc:focus-visible {
  color: var(--text-secondary);
}

.workspace-capability-dialog .dashboard-custom-cap-desc:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: calc(var(--radius-control) / 2);
}

.workspace-capability-dialog .dashboard-custom-cap-item.is-expanded .dashboard-custom-cap-desc {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.dashboard-custom-cap-item.is-blocked {
  cursor: pointer;
}

.dashboard-custom-cap-conflict {
  color: var(--red);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.dashboard-custom-cap-item.is-shaking {
  animation: cap-item-shake 0.38s ease;
}

@keyframes cap-item-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-custom-cap-item.is-shaking {
    animation: none;
  }
}

.workspace-capability-apply-status {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.workspace-capability-dialog .workspace-capability-actions {
  margin: 0;
  padding: var(--space-3) var(--space-6) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  align-items: center;
  justify-content: space-between;
}

.workspace-capability-selected-count {
  color: var(--text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-variant-numeric: tabular-nums;
}

.workspace-capability-dialog .workspace-capability-actions > button.primary {
  min-height: var(--button-height-default);
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  background: var(--blue);
  color: var(--text-on-accent);
  font-size: var(--type-label-size);
  font-weight: 500;
}

.workspace-capability-dialog .workspace-capability-actions > button.primary:hover:not(:disabled),
.workspace-capability-dialog .workspace-capability-actions > button.primary:active:not(:disabled) {
  background: var(--blue-hover);
}

.workspace-capability-dialog .workspace-capability-actions > button.primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.workspace-capability-dialog .workspace-capability-actions > button.primary:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}

.workspace-project-capability-dialog > .workspace-create-eyebrow {
  padding: var(--space-5) var(--space-6) 0;
  color: var(--blue);
  font-size: var(--type-caption-size);
}

.workspace-project-capability-dialog > .workspace-create-eyebrow + h2 {
  padding-top: var(--space-2);
}

.workspace-project-capability-dialog > p,
.workspace-project-capability-dialog > .project-runtime-policy {
  margin: 0 var(--space-6) var(--space-4);
}

.workspace-project-capability-dialog > .workspace-create-actions {
  margin: 0;
  padding: var(--space-3) var(--space-6) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
  .workspace-capability-dialog .dashboard-custom-caps-grid,
  .workspace-capability-dialog .dashboard-flow-picker-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dashboard-flow-option.is-locked {
  cursor: default;
}

.project-create-type-toggle,
.workspace-create-type-toggle {
  width: 100%;
  justify-content: stretch;
}

.project-create-type-toggle button,
.workspace-create-type-toggle button {
  flex: 1;
}

.project-type-badge {
  min-height: 18px;
  padding: 0 var(--space-1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(20, 184, 166, 0.16);
  color: #8ce8db;
  font-size: 11px;
  font-weight: 780;
}

.preview-header .preview-wechat-mini-btn {
  background: rgba(20, 184, 166, 0.16);
  color: #7de3d2;
  padding: 0 var(--space-3);
}

.preview-header .preview-wechat-mini-btn:hover:not(:disabled) {
  background: rgba(20, 184, 166, 0.24);
}

@media (max-width: 720px) {
  .main-hero-intro .main-prompt .app-type-toggle,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .app-type-toggle {
    height: var(--button-height-default);
  }

  .main-hero-intro .main-prompt .app-type-toggle button,
  .workspace-page.dashboard-page.lovable-dashboard .dashboard-main-prompt .app-type-toggle button {
    min-width: 45px;
    padding: 0 var(--space-2);
  }
}

/* Mini program preview floating QR and binding drawer. */
.mini-program-preview-float {
  position: absolute;
  inset-inline-end: 26px;
  bottom: 28px;
  z-index: 14;
  width: 176px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  color: var(--text);
  pointer-events: auto;
}

.mini-program-platform-tabs,
.mini-program-config-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.mini-program-platform-tabs button,
.mini-program-config-tabs button {
  height: var(--button-height-compact);
  min-height: var(--button-height-compact);
  border: 0;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

.mini-program-platform-tabs button.active,
.mini-program-config-tabs button.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mini-program-platform-tabs button:disabled,
.mini-program-config-tabs button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.mini-platform-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.mini-platform-dot.wechat {
  background: #20c45a;
}

.mini-platform-dot.douyin {
  background: linear-gradient(135deg, #05f1ff 0%, #111111 48%, #ff2d55 100%);
}

.mini-program-qr-card {
  position: relative;
  min-height: 176px;
  padding: var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    #101112;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.mini-program-qr-card img {
  width: 148px;
  height: 148px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}

.mini-program-qr-placeholder {
  width: 142px;
  height: 142px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 16px, transparent 16px 24px) 0 0 / 32px 32px,
    linear-gradient(rgba(255, 255, 255, 0.09) 16px, transparent 16px 24px) 0 0 / 32px 32px,
    rgba(255, 255, 255, 0.08);
  filter: blur(2px);
  opacity: 0.72;
}

.mini-program-qr-card span {
  position: absolute;
  inset-inline-start: 10px;
  inset-inline-end: 10px;
  bottom: 49px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.mini-program-qr-card button,
.mini-program-regenerate {
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #00160f;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.mini-program-qr-card button {
  position: absolute;
  bottom: 18px;
  left: 50%;
  height: var(--button-height-compact);
  min-height: var(--button-height-compact);
  padding: 0 var(--space-4);
  transform: translateX(-50%);
}

.mini-program-regenerate {
  height: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.mini-program-qr-card button:disabled,
.mini-program-regenerate:disabled {
  opacity: 0.55;
  cursor: wait;
}

.mini-program-preview-float p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.mini-program-tip {
  max-height: 84px;
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: auto;
  background: rgba(16, 17, 18, 0.94);
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.mini-program-tip.is-success {
  color: #31d68a;
}

.mini-program-tip.is-error {
  color: #ff7a85;
}

.mini-program-tip.is-info {
  color: #8ecbff;
}

.mini-program-config-drawer {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: 18;
  width: min(420px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0, rgba(29, 155, 240, 0.1), transparent 240px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
    #101112;
  color: var(--text);
  box-shadow: -22px 0 54px rgba(0, 0, 0, 0.44);
  border-inline-start: 1px solid var(--line);
}

.mini-program-config-drawer header {
  height: 64px;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}

.mini-program-config-drawer h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  letter-spacing: 0;
}

.mini-program-config-drawer header button {
  width: 32px;
  height: var(--button-height-compact);
  min-height: var(--button-height-compact);
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted-strong);
  cursor: pointer;
}

.mini-program-config-drawer header button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.mini-program-config-drawer .mini-program-config-tabs {
  margin: var(--space-3) var(--space-5) 0;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.mini-program-config-body {
  min-height: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: auto;
}

.mini-program-config-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.mini-step-index {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.mini-program-config-step strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 780;
  line-height: 1.45;
}

.mini-program-doc-link {
  color: #8ecbff;
  text-decoration: none;
  border-bottom: 1px solid rgba(142, 203, 255, 0.42);
}

.mini-program-doc-link:hover {
  color: #b8ddff;
  border-bottom-color: rgba(184, 221, 255, 0.72);
}

.mini-program-config-step p {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.mini-program-config-step input {
  width: 100%;
  height: 38px;
  margin-top: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.mini-program-config-step input:focus {
  border-color: rgba(29, 155, 240, 0.56);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
}

.mini-program-config-step input::placeholder {
  color: rgba(184, 184, 184, 0.54);
}

.mini-program-config-step > div > button {
  width: 100%;
  height: var(--button-height-prominent);
  min-height: var(--button-height-prominent);
  margin-top: var(--space-3);
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #00160f;
  font-size: 14px;
  font-weight: 780;
  cursor: pointer;
}

.mini-program-config-step > div > button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.mini-program-config-step small {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.mini-program-permission-warning {
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: 1px solid rgba(244, 33, 46, 0.26);
  border-radius: 8px;
  background: rgba(244, 33, 46, 0.1);
}

.mini-program-permission-warning strong {
  color: #ff8d96;
  font-size: 13px;
}

.mini-program-permission-warning p {
  margin-top: var(--space-1);
  color: #ffc0c5;
  font-size: 12px;
  line-height: 1.55;
}

.mini-program-permission-warning button {
  width: auto;
  min-width: 132px;
  height: var(--button-height-compact);
  min-height: var(--button-height-compact);
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 141, 150, 0.34);
  border-radius: 8px;
  background: rgba(255, 141, 150, 0.14);
  color: #ffd7db;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.mini-program-permission-warning button:hover {
  background: rgba(255, 141, 150, 0.2);
}

.mini-program-guide-card {
  height: 172px;
  margin-top: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 86px 1fr;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}

.mini-guide-sidebar {
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-inline-end: 1px solid var(--line-soft);
}

.mini-guide-sidebar span {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.mini-guide-sidebar span.active {
  height: 24px;
  border: 1px solid rgba(255, 212, 0, 0.42);
  background: rgba(255, 212, 0, 0.1);
}

.mini-guide-content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mini-guide-content b {
  font-size: 14px;
  color: var(--muted-strong);
}

.mini-guide-content i,
.mini-guide-content em {
  height: 22px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.08);
}

.mini-guide-content strong {
  height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid rgba(255, 212, 0, 0.48);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: #ffe891;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 212, 0, 0.08);
}

.mini-program-config-drawer footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.mini-program-auth-layer {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: var(--space-4);
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.mini-program-auth-modal {
  width: min(512px, calc(100% - 36px));
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-dialog);
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.07), transparent 220px),
    #101112;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.mini-program-auth-modal h2 {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-size: 20px;
  font-weight: 820;
  letter-spacing: 0;
}

.mini-program-auth-modal p {
  margin: 0;
  max-width: 420px;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.65;
}

.mini-program-auth-modal button {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  margin-top: var(--space-5);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #00160f;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
}

.mini-program-auth-modal button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.mini-program-transfer-layer {
  z-index: 26;
  justify-content: center;
  padding: var(--space-4);
}

.mini-program-transfer-modal {
  position: relative;
  width: min(480px, calc(100% - 36px));
}

.mini-program-transfer-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted-strong);
}

.mini-program-transfer-close:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.mini-program-transfer-eyebrow {
  display: inline-flex;
  margin-bottom: var(--space-2);
  color: #31d68a;
  font-size: 12px;
  font-weight: 780;
}

.mini-program-transfer-detail {
  margin-top: var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}

.mini-program-transfer-detail > div {
  min-height: 50px;
  padding: var(--space-2) var(--space-3);
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}

.mini-program-transfer-detail > div:last-child {
  border-bottom: 0;
}

.mini-program-transfer-detail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.mini-program-transfer-detail strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.mini-program-transfer-actions {
  margin-top: var(--space-5);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.mini-program-transfer-actions button {
  min-width: 92px;
  margin-top: 0;
}

.mini-program-transfer-actions button.secondary {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.mini-program-transfer-actions button.secondary:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mini-program-deploy-layer {
  z-index: 28;
  background:
    radial-gradient(circle at 48% 16%, rgba(29, 155, 240, 0.12), transparent 360px),
    rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.mini-program-deploy-modal {
  width: min(760px, calc(100% - 28px));
  max-height: min(86vh, 760px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-dialog);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.07), transparent 270px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
    #101112;
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.56);
}

.mini-program-deploy-head {
  height: 54px;
  padding: 0 var(--space-3) 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}

.mini-program-deploy-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
}

.mini-program-deploy-tabs button {
  height: var(--button-height-prominent);
  min-height: var(--button-height-prominent);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 740;
  cursor: pointer;
}

.mini-program-deploy-tabs button.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--green);
}

.mini-program-deploy-close {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted-strong);
  cursor: pointer;
}

.mini-program-deploy-close:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.mini-program-deploy-content {
  width: min(520px, calc(100% - 40px));
  min-height: 0;
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-6);
  overflow: auto;
}

.mini-program-deploy-content h2 {
  margin: 0 0 var(--space-6);
  color: var(--text);
  font-size: 20px;
  font-weight: 820;
  text-align: center;
  letter-spacing: 0;
}

.mini-program-deploy-field {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mini-program-deploy-field > span {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 760;
}

.mini-program-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.mini-program-channel-grid button {
  height: var(--button-height-prominent);
  min-height: var(--button-height-prominent);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
}

.mini-program-channel-grid button.active {
  border-color: rgba(0, 186, 124, 0.7);
  background: rgba(0, 186, 124, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 186, 124, 0.18);
}

.mini-program-channel-grid button svg {
  margin-inline-start: auto;
}

.mini-program-channel-grid button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.mini-program-config-checks {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}

.mini-program-config-check {
  min-height: 54px;
  padding: var(--space-2) var(--space-3);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}

.mini-program-config-check:last-child {
  border-bottom: 0;
}

.mini-program-check-icon {
  width: 18px;
  height: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00160f;
}

.mini-program-config-check.ok .mini-program-check-icon {
  border-style: solid;
  border-color: var(--green);
  background: var(--green);
}

.mini-program-config-check strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.4;
}

.mini-program-config-check small {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mini-program-config-check button,
.mini-program-deploy-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.mini-program-config-check button {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding: 0 var(--space-3);
}

.mini-program-config-check button:hover:not(:disabled),
.mini-program-deploy-actions button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
}

.mini-program-config-check button:disabled,
.mini-program-deploy-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mini-program-deploy-blockers,
.mini-program-deploy-message {
  max-height: 128px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mini-program-deploy-blockers {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-color: rgba(255, 212, 0, 0.22);
  background: rgba(255, 212, 0, 0.1);
  color: #ffe891;
}

.mini-program-deploy-message.is-success {
  border-color: rgba(0, 186, 124, 0.24);
  background: rgba(0, 186, 124, 0.11);
  color: #31d68a;
}

.mini-program-deploy-message.is-error {
  border-color: rgba(244, 33, 46, 0.26);
  background: rgba(244, 33, 46, 0.12);
  color: #ff7a85;
}

.mini-program-deploy-message.is-info {
  border-color: rgba(29, 155, 240, 0.26);
  background: rgba(29, 155, 240, 0.12);
  color: #8ecbff;
}

.mini-program-overview-card {
  padding: var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.mini-program-overview-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mini-program-overview-card span,
.mini-program-overview-card dt {
  color: var(--muted);
  font-size: 12px;
}

.mini-program-overview-card strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 820;
}

.mini-program-overview-card dl {
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}

.mini-program-overview-card dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-3);
}

.mini-program-overview-card dd {
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mini-program-overview-card p {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(244, 33, 46, 0.24);
  border-radius: 8px;
  background: rgba(244, 33, 46, 0.12);
  color: #ff7a85;
  font-size: 13px;
  line-height: 1.5;
}

.mini-program-live-qrcode {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.045);
}

.mini-program-live-qrcode img {
  width: 172px;
  height: 172px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}

.mini-program-live-qrcode span {
  color: var(--muted-strong);
  font-size: 12px;
}

.mini-program-overview-empty {
  padding: var(--space-8) var(--space-4);
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.mini-program-deploy-actions {
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.18);
}

.mini-program-deploy-actions button {
  height: var(--button-height-default);
  min-height: var(--button-height-default);
  padding: 0 var(--space-4);
}

.mini-program-deploy-actions button.primary {
  min-width: 112px;
  border-color: var(--green);
  background: var(--green);
  color: #00160f;
}

@media (max-width: 720px) {
  .mini-program-preview-float {
    inset-inline-end: 14px;
    bottom: 16px;
    width: 158px;
  }

  .mini-program-config-drawer {
    width: 100%;
  }

  .mini-program-auth-layer {
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
  }
}

.dashboard-app-type-badge {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  z-index: 5;
  height: 24px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.72);
  color: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.dashboard-app-type-badge.mini {
  background: rgba(8, 103, 80, 0.78);
}

.dashboard-app-type-badge.web {
  background: rgba(21, 76, 151, 0.76);
}

.dashboard-app-type-badge.agent {
  background: rgba(215, 244, 91, 0.9);
  color: #171a12;
}

.dashboard-project-list-cover .dashboard-app-type-badge,
.inspiration-showcase-cover .dashboard-app-type-badge {
  inset-inline-end: 6px;
  bottom: 6px;
  height: 20px;
  padding: 0 var(--space-2);
  font-size: 10px;
}

.dashboard-project-list-cover,
.inspiration-showcase-cover {
  position: relative;
}

/* ===== 源码在线编辑 (SourceEditorPane) ===================================== */

.preview-view-tabs {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.preview-view-tabs button {
  border: none;
  background: transparent;
  color: var(--text-secondary, #9aa2b1);
  font-size: 13px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.preview-view-tabs button.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary, #f2f4f8);
}

.agent-config-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  color: var(--text-secondary, #9aa2b1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agent-config-refresh {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
  display: inline-flex;
}

.agent-config-items {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  overflow: auto;
}

.agent-config-items button {
  width: 100%;
  text-align: start;
  border: none;
  background: transparent;
  color: var(--text-secondary, #9aa2b1);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.agent-config-items button.active,
.agent-config-items button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f2f4f8);
}

.agent-config-name {
  font-size: 13px;
}

.agent-config-slug {
  font-size: 11px;
  opacity: 0.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.agent-config-file-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agent-config-file-tabs button {
  border: none;
  background: transparent;
  color: var(--text-secondary, #9aa2b1);
  font-size: 12px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.agent-config-file-tabs button.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary, #f2f4f8);
}

.agent-config-skills {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--text-secondary, #9aa2b1);
}

.agent-config-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-secondary, #9aa2b1);
  font-size: 13px;
  padding: var(--space-6);
}

.agent-config-empty button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.source-editor-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #101319;
  position: relative;
}

.source-cc-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  color: #ffd479;
  background: rgba(255, 190, 60, 0.1);
  border-bottom: 1px solid rgba(255, 190, 60, 0.25);
}

.source-notice {
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  color: #9fd6a8;
  background: rgba(70, 180, 100, 0.12);
  border-bottom: 1px solid rgba(70, 180, 100, 0.25);
}

.source-editor-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.source-tree {
  width: 240px;
  min-width: 180px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.source-tree-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.source-tree-toolbar .source-tree-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #9aa2b1);
}

.source-tree-toolbar .source-revision-tag {
  max-width: 112px;
  overflow: hidden;
  color: var(--text-tertiary, #737b89);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-tree-toolbar button {
  border: none;
  background: transparent;
  color: var(--text-secondary, #9aa2b1);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-control);
  display: inline-flex;
}

.source-tree-toolbar button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f2f4f8);
}

.source-tree-scroll {
  flex: 1;
  overflow: auto;
  padding: var(--space-1) 0 var(--space-3);
}

.source-tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-secondary, #b6bdc9);
  font-size: 12.5px;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
}

.source-tree-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.source-tree-file-row.active {
  background: rgba(88, 130, 255, 0.18);
  color: #dbe4ff;
}

/* 选中为上传目标的目录行 */
.source-tree-dir-row.selected {
  background: rgba(88, 130, 255, 0.12);
  color: #c7d5ff;
}

/* 文件行 hover 才显示的删除按钮 */
.source-tree-delete {
  display: none;
  margin-inline-start: auto;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-control);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  flex-shrink: 0;
}

.source-tree-file-row:hover .source-tree-delete,
.source-tree-dir-row:hover .source-tree-delete,
.source-tree-delete:focus {
  display: inline-flex;
}

.source-tree-delete:hover {
  color: #ff8f8f;
  background: rgba(255, 100, 100, 0.12);
}

/* 文件历史按钮与对话框 */
.source-history-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--text-secondary, #b6bdc9);
  font-size: 12px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.source-history-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.source-history-dialog {
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-dialog);
  padding: var(--space-4) var(--space-4);
  width: min(560px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.source-history-dialog h3 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  font-size: 14px;
  color: #e4e9f2;
  word-break: break-all;
}

.source-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.source-history-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}

.source-history-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.source-history-time {
  color: #dbe4ff;
}

.source-history-msg {
  color: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.source-history-deleted {
  color: #ff9f9f;
  font-size: 11.5px;
}

.source-history-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.source-history-actions button,
.source-history-footer button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #cfd6e4;
  font-size: 12px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.source-history-actions button:hover:not(:disabled),
.source-history-footer button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.source-history-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}

.source-history-empty {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.source-history-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.source-tree-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-tree-lock {
  opacity: 0.6;
  flex-shrink: 0;
}

.source-tree-volatile {
  color: #ffb454;
  flex-shrink: 0;
}

.source-dirty-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: #ffb454;
  flex-shrink: 0;
  display: inline-block;
}

.source-tree-error,
.source-tree-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  font-size: 12.5px;
  color: var(--text-secondary, #9aa2b1);
  flex-direction: column;
  text-align: center;
}

.source-tree-error button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: inherit;
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.source-editor-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.source-editor-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.source-editor-path {
  flex: 1;
  font-size: 12.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-primary, #e8ecf3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.source-save-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  border-radius: var(--radius-control);
  background: var(--accent, #4c7dff);
  color: #fff;
  font-size: 12.5px;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.source-save-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.source-readonly-tag,
.source-volatile-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11.5px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #9aa2b1);
}

.source-volatile-tag {
  color: #ffb454;
  background: rgba(255, 180, 84, 0.12);
}

.source-editor-monaco {
  flex: 1;
  min-height: 0;
}

.source-editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-secondary, #9aa2b1);
  font-size: 13px;
}

.source-conflict-mask {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.source-conflict-dialog {
  width: min(440px, 90%);
  background: #171b23;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-dialog);
  padding: var(--space-4) var(--space-5);
  color: var(--text-primary, #e8ecf3);
}

.source-conflict-dialog h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 15px;
  color: #ffce7a;
}

.source-conflict-dialog p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary, #b6bdc9);
}

.source-conflict-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.source-conflict-actions button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: var(--text-primary, #e8ecf3);
  border-radius: 8px;
  padding: var(--space-1) var(--space-3);
  font-size: 12.5px;
  cursor: pointer;
}

.source-conflict-actions .source-conflict-keep {
  background: #c2503a;
  border-color: transparent;
}


/* Personal Agent workspace */
.agent-pane {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 58px 46px minmax(0, 1fr) auto;
  overflow: hidden;
  background: #111312;
  color: #f3f5f2;
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);
}

.agent-setup-gate {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
  height: 100%;
  padding: var(--space-6);
}

.agent-setup-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #d7f45b;
  background: #1b1f1c;
}

.agent-setup-copy {
  display: grid;
  min-width: 0;
  max-width: 360px;
  gap: var(--space-1);
}

.agent-setup-copy strong {
  font-size: 14px;
  font-weight: 650;
  color: #f3f5f2;
}

.agent-setup-copy span {
  font-size: 12px;
  line-height: 1.55;
  color: #a9b0aa;
}

.agent-setup-retry {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  color: #f3f5f2;
  background: transparent;
  cursor: pointer;
}

.agent-setup-retry:hover {
  background: rgba(255, 255, 255, 0.08);
}

.agent-setup-gate > .spin {
  color: #d7f45b;
}

.agent-pane-header,
.agent-session-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agent-pane-header {
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: #151816;
}

.agent-pane-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.agent-pane-title > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.agent-pane-title strong {
  font-size: 14px;
  line-height: 1.2;
}

.agent-pane-title span:not(.agent-pane-mark) {
  max-width: min(38vw, 360px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-pane-mark {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  background: #d7f45b;
  color: #171a12;
}

.agent-health {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.agent-health > span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: #8b928c;
}

.agent-health.healthy {
  color: #a9d8ba;
}

.agent-health.healthy > span {
  background: #57c982;
  box-shadow: 0 0 0 3px rgba(87, 201, 130, 0.12);
}

.agent-session-bar {
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: rgba(255, 255, 255, 0.5);
  background: #101210;
}

.agent-session-bar select {
  min-width: 0;
  height: 32px;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 12px;
}

.agent-session-bar button {
  width: 30px;
  height: var(--button-height-compact);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
}

.agent-session-bar button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.agent-session-bar button:disabled {
  opacity: 0.35;
}

.agent-chat-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-9));
  scroll-behavior: smooth;
}

.agent-message {
  width: min(100%, 760px);
  margin: 0 auto var(--space-5);
}

.agent-message.user {
  width: fit-content;
  max-width: min(680px, 86%);
  margin-inline-start: auto;
  margin-inline-end: max(0, calc((100% - var(--space-10)) / 2));
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  background: #242824;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.agent-message-role {
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 700;
}

.agent-message.user .agent-message-role {
  display: none;
}

.agent-message-content {
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: pre-wrap;
}

.agent-tool-activity,
.agent-error,
.agent-approval {
  width: min(100%, 760px);
  margin: 0 auto var(--space-4);
}

.agent-tool-activity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #b9c2ba;
  font-size: 12px;
}

.agent-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid #e16b5a;
  background: rgba(225, 107, 90, 0.08);
  color: #f0aaa0;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.agent-error button {
  width: 28px;
  height: var(--button-height-compact);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.08);
  color: #f0aaa0;
}

.agent-error button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.agent-approval {
  padding: var(--space-3);
  border: 1px solid rgba(239, 183, 86, 0.28);
  border-radius: 8px;
  background: rgba(239, 183, 86, 0.07);
}

.agent-approval-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #f1c77f;
  font-size: 13px;
}

.agent-approval code {
  display: block;
  max-height: 120px;
  margin: var(--space-2) 0;
  overflow: auto;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.agent-approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.agent-approval-actions button {
  min-height: var(--button-height-compact);
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 12px;
}

.agent-approval-actions button.primary {
  border-color: transparent;
  background: #d7f45b;
  color: #171a12;
}

.agent-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

.agent-empty strong {
  color: rgba(255, 255, 255, 0.68);
}

.agent-composer {
  min-width: 0;
  margin: 0 clamp(var(--space-3), 3vw, var(--space-7)) var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-input);
  background: #1b1e1b;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.agent-composer textarea {
  min-width: 0;
  min-height: 42px;
  max-height: 160px;
  flex: 1;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f6f3;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.agent-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.agent-composer button {
  width: 34px;
  height: var(--button-height-default);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-control);
  background: #d7f45b;
  color: #171a12;
}

.agent-composer button.stop {
  background: #e16b5a;
  color: #fff;
}

.agent-composer button:disabled {
  opacity: 0.35;
}

.dashboard-app-type-badge.agent {
  background: rgba(215, 244, 91, 0.9);
  color: #171a12;
}

@media (max-width: 900px) {
  .app.coding-focus.agent-open {
    min-width: 0;
    grid-template-columns: 0 0 minmax(0, 1fr);
  }

  .app.coding-focus.agent-open > .chat-panel,
  .app.coding-focus.agent-open > .preview-resizer {
    display: none;
  }

  .agent-pane {
    grid-column: 3;
    width: 100vw;
  }

  .agent-chat-body {
    padding-inline: var(--space-4);
  }

  .agent-composer {
    margin: 0 var(--space-3) var(--space-3);
  }
}

/* --- 源码智能导入 --- */
.source-conflict-actions .source-import-primary {
  background: var(--accent, #4f7cff);
  border-color: transparent;
  color: #fff;
}

.source-import-hint {
  margin-top: var(--space-2);
  font-size: 11.5px;
  color: var(--text-secondary, #9aa2b1);
}

.source-import-report p {
  margin: 0 0 var(--space-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-primary, #e8ecf3);
}

.source-import-report code {
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-1);
}

.source-import-warn {
  border-inline-start: 3px solid #d9a13c;
  padding-inline-start: var(--space-2);
  color: #e8cf9a;
}

.source-import-ok {
  border-inline-start: 3px solid #4caf7d;
  padding-inline-start: var(--space-2);
  color: #a9dcbf;
}

.source-import-skips summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #9aa2b1);
}

.source-import-skips ul {
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-4);
  max-height: 180px;
  overflow: auto;
  font-size: 11.5px;
  color: var(--text-secondary, #9aa2b1);
}

.source-import-skips li {
  margin-bottom: var(--space-1);
}

.source-history-footer .source-import-fix {
  background: var(--accent, #4f7cff);
  border-color: transparent;
  color: #fff;
}
.admin-gallery-position-item.has-error {
  box-shadow: inset 0 0 0 1px rgba(255, 92, 92, 0.72);
}

.admin-gallery-position-field {
  display: grid;
  flex: 0 0 72px;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.admin-gallery-position-field input {
  width: 72px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font: inherit;
}

.admin-gallery-position-field input[aria-invalid='true'] {
  border-color: rgba(255, 92, 92, 0.86);
}

.admin-gallery-position-error {
  color: #ff7b7b;
}


/* ===== 应用根外壳（顶部公告横幅的挂载点）=====
   稿 Surfaces.dc.html A 区：横幅通栏顶到浏览器边、高 40，**占布局空间**把整个应用
   （含侧栏）往下推，不是浮层。做法是外壳一列纵向 flex：第一行是横幅（flex: none，
   高度由横幅自己说了算），第二行是整个应用，flex: 1 吃掉剩余。

   稿旁注点名了另一条路的坑，原话：「侧栏现在写死 height: 100vh，横幅一加就会溢出
   一条：正解是外壳改成纵向 flex（横幅一行 + 应用填满剩余），而不是四处改成
   calc(100vh - 40px)——后者一定会漏，且横幅高度一变就全线塌。」
   所以配套改动是把**横幅布局流里**的 100vh 一律换成 100%（.app / .workspace-page /
   .dashboard-sidebar / .dashboard-content / .agent-pane / .main-page 等，散落在本文件
   各处），高度改由外壳逐层传下来：横幅在不在、多高，下面全部不需要知道。

   #root 已经是 height: 100%（见文件头 html, body, #root 那条），所以外壳取 100% 而不是
   100vh —— 多留一处 vh 就多一处会被横幅顶穿的地方。

   position: fixed 的东西（对话框、遮罩、装饰背景）刻意不动：它们本来就该按视口算，
   模态盖住横幅是对的。 */
.app-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-shell-body {
  flex: 1 1 auto;
  /* flex 项的最小尺寸默认是内容尺寸；没有这条，长内容会把外壳撑破反而顶出横幅 */
  min-height: 0;
}

/* ===== 布局根高度的窄屏归属（原先住在 ui-overrides.css）=====
   这两块以前是 ui-overrides.css 里带 !important 的同名声明，和本文件的
   .app / .dashboard-content 互为影子：改本文件不生效，得两处一起改——横幅上线那天
   侧栏多出 40px 溢出就是这么来的。现在整批高度只有本文件一个归属，ui-overrides.css
   里已不存在这两个元素的 height / min-height，所以这里不需要 !important。

   放在文件最末是刻意的：这批规则要靠**源码顺序**赢过前面同特异性的那几条
   （.app 是 0,1,0，和 L1526 的 .app 打平；.dashboard-content 那条是 0,4,0，和
   .workspace-page.dashboard-page.lovable-dashboard .dashboard-content 打平），
   往上挪就会被前面的规则反超。加规则时也请加在这一段里，别再散回去。 */
@media (max-width: 900px) {
  .app,
  .app.preview-open,
  .app.sidebar-collapsed,
  .app.sidebar-collapsed.preview-open,
  .app.coding-focus,
  .app.coding-focus.preview-open,
  .app.coding-focus.preview-open.agent-open {
    height: 100%;
    min-height: 100%;
  }
}

@media (max-width: 760px) {
  /* 顺序敏感：本块必须在上面的 ≤900 块之后。两块都命中时，
     .app（0,1,0）取本块的后来者，.app.coding-focus.preview-open（0,3,0）仍取上面那块，
     和挪家之前 ui-overrides 里 !important 之间的胜负关系逐条一致。 */
  .app,
  .app.coding-focus {
    height: 100%;
    min-height: 0;
  }

  .workspace-page.dashboard-page.lovable-dashboard .dashboard-content {
    height: 100%;
    min-height: 100%;
  }
}


/* ===== 顶部通栏公告 =====
   稿（Surfaces.dc.html A 区）的定义是「一个挂载点，两种皮肤」，高 40：
   - A1（.is-promo，severity = info / success）：暖色渐变，文案居中且**整行可点**，
     没有独立 CTA 元素也没有箭头——稿注写明「40px 高放不下第三个交互元素」。
   - A2（.is-tone，severity = warning / critical）：同位置同高度，换成该档 tone 的
     淡底 + 一枚图标，图标不再钉在最左，跟着文案一起居中。
   - A3 是 A1 的亮色态，也是这次设计的来源形态：明暗两套都必须成立。

   分两种皮肤的理由（稿旁注原话）：四档共用一条暖渐变，「节点维护」会长得和促销
   一模一样，正好违背底部那条打扰梯度。

   **不再有 3px 色条**（稿旁注）：通栏之后色条会贴在屏幕最左缘，读起来像浏览器边框
   而不是语义标记；语义改由底色和图标承担。 */
.announcement-banner {
  /* .is-tone 用的两个变量。info / success 在当前划分下走 A1，这里的默认值是给
     将来扩档兜底的：新档没配 tone 也得有个中性底色，不能透出后面的内容。 */
  --tone-tint: var(--surface-2);
  --tone-icon: var(--text-muted);
  position: relative;
  /* 装饰背景（.dashboard-silk-background 等）是 position: fixed 且盖满视口，不给
     层级就会浮到横幅上。30 只需高过 .dashboard-content 的 z-index: 2。 */
  z-index: 30;
  /* 外壳的第一行：不参与伸缩，高度就是稿上的 40 */
  flex: none;
  height: 40px;
  display: flex;
  align-items: center;
  /* 14 是稿 A 区的 padding-inline，落在 --space-3(12) 与 --space-4(16) 之间。
     40px 高的一条上这 2px 看得出来，取稿值而不是就近取整到令牌。 */
  padding-inline: 14px;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
}

/* 文案（A2 连图标）作为一组居中。两侧 padding 同为 24px = 关闭按钮的宽度：
   一样多才不会把中轴挤偏，同时保证长标题在撞到关闭按钮之前就先省略。 */
.announcement-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: 24px;
}

.announcement-banner-text {
  min-width: 0;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  /* 通栏永远单行：文案再长也不许把应用顶下去 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-banner-text:hover {
  text-decoration: underline;
}

/* A1 是「整行可点」：链接自己撑满一行并居中文案，点到空白处也进 CTA。
   A2 只有文案本身可点——那一档旁边还有图标，整组已经由 body 居中。 */
.announcement-banner.is-promo .announcement-banner-text {
  flex: 1;
  text-align: center;
}

/* 图标继承当前档的 tone 色；语义由标题文案承载，图标只做视觉分档 */
.announcement-banner-icon {
  flex: none;
  color: var(--tone-icon);
}

/* 关闭 × 绝对定位到行尾，**不参与居中计算**——否则文案会被挤偏半个按钮宽
   （稿 A1 的注解写明了这一点）。用 inset-inline-end 而不是 right：RTL 下连
   **点击热区**一起换边，不是只把图标挪过去（稿 D 区点名的三处之一）。 */
.announcement-banner-close {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

/* hover 底色从当前前景色现算：A1 在渐变上、A2 在淡底上，两种皮肤两套主题都成立，
   不用像 --surface-3 那样赌背景亮度。 */
.announcement-banner-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.announcement-banner-text:focus-visible,
.announcement-banner-close:focus-visible {
  outline: none;
  border-radius: var(--radius-control);
  box-shadow: var(--focus-ring);
}

/* ── A1 / A3：促销 / 告知 ──
   这组暖色是本次设计新引入的，不在既有语义令牌里，也不该复用 --yellow / --red
   （那两个是状态色，拿来做促销底会和警示档撞语义），所以只在横幅作用域内声明，
   明暗两套各一份。 */
.announcement-banner.is-promo {
  --promo-edge: rgba(255, 92, 148, 0.22);
  --promo-mid: rgba(255, 184, 64, 0.24);
  --promo-core: rgba(255, 214, 120, 0.26);
  --promo-base: var(--surface-1);
  --promo-text: #ffdca8;
  color: var(--promo-text);
  background-color: var(--promo-base);
  background-image: linear-gradient(
    to right,
    var(--promo-edge) 0%,
    var(--promo-mid) 33%,
    var(--promo-core) 50%,
    var(--promo-mid) 67%,
    var(--promo-edge) 100%
  );
}

/* 稿 A3：亮色态是这次设计的来源形态。底色换成不透明的柔和实色渐变，文字换成
   能在暖底上站住的深玫红——深色那套 #ffdca8 放到亮底上对比度不够（稿 C 区旁注 ③
   说的正是这件事：药丸/前景色不能沿用深色 hex）。 */
:root[data-theme='light'] .announcement-banner.is-promo {
  --promo-edge: #ffc9de;
  --promo-mid: #ffe3a4;
  --promo-core: #fff2c6;
  /* 亮色渐变本身不透明，不需要垫底色 */
  --promo-base: transparent;
  --promo-text: #8f2d4d;
}

:root[data-theme='light'] .announcement-banner.is-promo .announcement-banner-close {
  opacity: 0.65;
}

/* 稿 D 区点名的新坑，原话：linear-gradient 只认物理方向，没有 to inline-end 这种
   写法，逻辑属性表达不了，LTR 写 to right 之后必须另给一条 RTL 的 to left。
   当前这组色标（edge/mid/core/mid/edge，0/33/50/67/100）左右对称，翻过来肉眼一样
   ——但这条规则必须在：色标一旦改成不对称，没有它就会在阿语下静默画反，而那正是
   「色条时代不存在、换成渐变才有」的那个新问题。 */
[dir='rtl'] .announcement-banner.is-promo {
  background-image: linear-gradient(
    to left,
    var(--promo-edge) 0%,
    var(--promo-mid) 33%,
    var(--promo-core) 50%,
    var(--promo-mid) 67%,
    var(--promo-edge) 100%
  );
}

/* ── A2：警示 / 严重 ──
   该档 tone 的淡底 + 同色图标，前景保持主文本色（不给每档各配一套白字：那等于
   赌背景亮度，弹窗提示条已经在这上面栽过一次）。 */
.announcement-banner.is-tone {
  color: var(--text-primary);
  background-color: var(--tone-tint);
}

/* 淡底用 color-mix 从 --yellow / --red 现算 13%（稿 A2 上画的 rgba(255,212,0,.13)），
   而不是直接用 --yellow-soft(0.11)：0.11 是给大面积卡片调的，摊在 40px 高的一条上
   淡到看不见。亮色主题的 --yellow / --red 是另一组 hex（#9a6700 / #d1242f），
   color-mix 跟着令牌走，两套主题各自成立。 */
.announcement-banner.severity-warning {
  --tone-tint: color-mix(in srgb, var(--yellow) 13%, transparent);
  --tone-icon: var(--yellow);
}

/* critical 是唯一用红的一档。红在本设计系统里只表示「出事了/会失败」，
   给它之外的任何档上红，红本身就贬值了。 */
.announcement-banner.severity-critical {
  --tone-tint: color-mix(in srgb, var(--red) 13%, transparent);
  --tone-icon: var(--red);
}


@media (max-width: 768px) {
  /* 窄屏仍是通栏，只把两侧留白收到 8：省下来的宽度全部给标题。
     关闭按钮跟着收，否则它会离行尾越来越远。 */
  .announcement-banner {
    padding-inline: var(--space-2);
  }

  .announcement-banner-close {
    inset-inline-end: var(--space-2);
  }
}

/* ===== 内容政策页(Acceptable Use Policy)===== */
.legal-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(5, 20, 30, 0.88), rgba(0, 0, 0, 0.96)),
    #061722;
  color: rgba(255, 255, 255, 0.88);
}

.legal-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(4, 14, 22, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-nav-inner {
  width: min(1160px, calc(100vw - clamp(36px, 7vw, 136px)));
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.legal-brand-mark {
  width: 30px;
  height: 22px;
  object-fit: contain;
}

/* 此前缺失，SVG 按固有尺寸铺满整屏（AUP 页同样受影响）。 */
.legal-brand-wordmark {
  width: 78px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.legal-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.legal-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  cursor: pointer;
}

.legal-nav-link:hover {
  color: #fff;
}

.legal-article {
  width: min(860px, calc(100vw - clamp(36px, 7vw, 136px)));
  margin-inline: auto;
  padding: clamp(var(--space-7), 6vh, var(--space-9)) 0 var(--space-10);
}

.legal-head h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: 0.01em;
}

.legal-version {
  margin: 0 0 var(--space-7);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.legal-section {
  margin: 0 0 var(--space-8);
}

.legal-section h2 {
  margin: 0 0 var(--space-3);
  font-size: 19px;
  color: #7bd7f6;
}

.legal-section h3 {
  margin: 0 0 var(--space-1);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.94);
}

.legal-section p {
  margin: 0 0 var(--space-3);
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.76);
}

.legal-subhead {
  margin-top: var(--space-5) !important;
}

/* Terms / Privacy / Cookie 公开页（L0-LEGAL-01A）：治理语言提示、条目列表、版本历史、相关政策 */
.legal-governing {
  margin: calc(-1 * var(--space-5)) 0 var(--space-7);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid rgba(123, 215, 246, 0.6);
  border-radius: 8px;
  background: rgba(123, 215, 246, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.7;
}

.legal-bullet-list {
  margin: 0 0 var(--space-3);
  padding-inline-start: 1.25em;
  display: grid;
  gap: var(--space-2);
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.76);
}

.legal-bullet-list li::marker {
  color: rgba(123, 215, 246, 0.8);
}

.legal-history strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.legal-related a {
  color: #7bd7f6;
  text-decoration: none;
}

.legal-related a:hover,
.legal-related a:focus-visible {
  text-decoration: underline;
}

.legal-prohibited-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.legal-prohibited-list li {
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.legal-prohibited-list p {
  margin: 0;
}

.legal-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.legal-level-card {
  padding: var(--space-4) var(--space-5);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.legal-level-card p {
  margin: 0;
}

.legal-level-card.is-l1 {
  border-color: rgba(123, 215, 246, 0.28);
}

.legal-level-card.is-l2 {
  border-color: rgba(255, 193, 94, 0.32);
}

.legal-level-card.is-l3 {
  border-color: rgba(255, 107, 107, 0.34);
}

@media (max-width: 760px) {
  .legal-level-grid {
    grid-template-columns: 1fr;
  }
}

.publish-policy-note {
  margin: var(--space-2) var(--space-3) 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.publish-policy-note a {
  color: var(--blue);
  text-decoration: none;
}

.publish-policy-note a:hover {
  text-decoration: underline;
}

/* 404 页面：未知路由。状态码由 preview 中间件给，这里只管可读性。 */
.not-found-page {
  /* 两个挂载点都成立：App 里在 .app-shell-body 内（横幅已扣除），
     GlobalRoot 里直接挂 #root（本身就是 height: 100%） */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
}
.not-found-code {
  margin: 0;
  font-size: clamp(56px, 12vw, 104px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.22);
}
.not-found-title {
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
}
.not-found-desc {
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}
.not-found-primary,
.not-found-secondary {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.not-found-primary {
  background: rgba(255, 255, 255, 0.92);
  color: #101012;
  border-color: transparent;
}
.not-found-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
}

.flow-policy-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-block: 0.65rem;
  padding-inline: 0.85rem;
  margin-block: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5;
}
.flow-policy-notice span { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.flow-policy-notice button { flex-shrink: 0; cursor: pointer; }
.flow-policy-notice button:disabled { cursor: wait; opacity: 0.6; }

/* ==========================================================================
   公开更新日志 /changelog（L0-ADMIN-06B 波2）
   稿：.design/announcements/Changelog.dc.html
   清爽时间线，不是卡片墙：分隔线承担节奏，条目本身不给底色与圆角。
   ========================================================================== */

.changelog-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.changelog-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(15, 16, 17, 0.72);
  border-bottom: 1px solid var(--border-subtle);
}

.changelog-nav-inner {
  width: min(1140px, calc(100vw - clamp(32px, 7vw, 120px)));
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.changelog-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.changelog-brand-mark {
  width: 30px;
  height: 22px;
  object-fit: contain;
}

.changelog-brand-wordmark {
  width: 78px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.changelog-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.changelog-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  cursor: pointer;
}

.changelog-body {
  width: min(880px, calc(100vw - clamp(32px, 7vw, 120px)));
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-10);
}

.changelog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.changelog-title {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.changelog-subtitle {
  margin: 10px 0 0;
  font-size: var(--type-body-size);
  line-height: 22px;
  color: var(--text-secondary);
}

/* RSS 是次级动作：描边按钮，不与页面上任何主行动竞争。 */
.changelog-rss {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  height: 36px;
  padding-inline: var(--space-4);
  margin-top: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-size: var(--type-label-size);
  font-weight: 500;
  text-decoration: none;
}

/* 月份小标题贴在产品头下沿，滚动时始终告诉读者现在看到的是哪个月。 */
.changelog-month-label {
  position: sticky;
  top: 64px;
  margin: 0;
  padding: var(--space-5) 0 10px;
  background: rgba(8, 9, 10, 0.9);
  font-size: var(--type-label-size);
  line-height: var(--space-5);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.changelog-entry {
  display: flex;
  gap: 28px;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

/* 严重度不占一个药丸位——它和分类不是同一维度，并排出现会让读者以为要各读一遍。
   只给 warning/critical 一条起始边强调；ar 是 RTL，用 border-inline-start 自动换边。 */
.changelog-entry[data-severity='warning'],
.changelog-entry[data-severity='critical'] {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--yellow);
}

.changelog-entry[data-severity='critical'] {
  border-inline-start-color: var(--red, var(--yellow));
}

.changelog-entry-date {
  width: 76px;
  flex: none;
  padding-top: 1px;
  font-family: var(--font-mono);
  font-size: var(--type-label-size);
  line-height: 22px;
  color: var(--text-muted);
}

.changelog-entry-main {
  flex: 1;
  min-width: 0;
}

.changelog-entry-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.changelog-entry-fallback {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-muted);
  font-style: italic;
}

.changelog-entry-title {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.changelog-entry-summary {
  margin: var(--space-2) 0 0;
  font-size: var(--type-body-size);
  line-height: 22px;
  color: var(--text-secondary);
}

/* 正文复用受限 Markdown 的 .announcement-md-* 段落样式，这里只给块本身留间距。 */
.changelog-entry-detail {
  margin-top: var(--space-3);
}

.changelog-entry-detail strong {
  color: var(--text-primary);
  font-weight: 650;
}

.changelog-entry-detail a {
  color: var(--blue);
}

.changelog-entry-cta {
  display: inline-block;
  margin-top: 10px;
  color: var(--blue);
  font-size: var(--type-label-size);
  line-height: var(--space-5);
  font-weight: 500;
  text-decoration: none;
}

.changelog-empty {
  padding-block: var(--space-10);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--type-body-size);
}

.changelog-more-row {
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.changelog-more {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-label-size);
  cursor: pointer;
}

.changelog-more:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* 铃铛面板底部的「查看全部更新 →」。整行贴底，是面板的出口：
   稿上它居中、用面板里链接统一的 --blue（同 .announcement-center-detail a），
   靠细分割线与上下留白跟列表分开，而不是靠颜色抢注意力。

   居中是这条规则存在的主要理由：不居中它就贴在圆角卡片的左下角，
   看起来像掉在卡片外面的一条浏览器默认链接。 */
.announcement-center-viewall {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--blue);
  font-size: var(--type-label-size);
  line-height: var(--space-5);
  text-align: center;
  text-decoration: none;
}

/* hover 抬的是整行底色而不是把蓝字压暗：--blue-hover 是实心按钮的配对色（更深），
   放在暗色面板的文字上反而更闷。 */
.announcement-center-viewall:hover {
  background: var(--surface-3);
}

/* 本轮实扣收据随对话保存，右对齐且保持弱提示层级。 */
.conversation-turn-credits {
  align-self: stretch;
  margin-block: 0.35rem 1rem;
  padding-inline: 0.25rem;
  color: var(--text-muted, #8b8b8b);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
  font-variant-numeric: tabular-nums;
}