@layer components {
  .button, button:not(.nav-item), .secondary-link, .row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: auto;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 670;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  }
  :where(.button, button:not(.nav-item), .secondary-link, .row-action):hover:not(:disabled) { border-color: #60758f; background: #213047; color: #fff; }
  :where(.button, button:not(.nav-item), .secondary-link, .row-action):active:not(:disabled) { transform: translateY(1px); }
  :where(.button, button:not(.nav-item), .row-action):disabled { border-color: var(--color-border); background: #111923; color: #6f7e91; cursor: not-allowed; opacity: 0.78; }
  .button--primary, .row-action.primary, form > button[type="submit"], #startDeploymentApply, #uploadSourceButton {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }
  :where(.button--primary, .row-action.primary, form > button[type="submit"], #startDeploymentApply, #uploadSourceButton):hover:not(:disabled) { border-color: #a5effb; background: #8de8f7; color: #051317; }
  .button--quiet { background: transparent; }
  .button--danger { border-color: #a9555e; background: #9f414b; color: #fff; }
  .button--danger:hover:not(:disabled) { border-color: #d4767f; background: #b94d58; color: #fff; }
  .row-action.warn { border-color: #856c37; background: var(--color-warning-bg); color: var(--color-warning); }
  .row-action.danger, #restoreWorkspaceBackup, #startDeploymentRollback { border-color: #8e4850; background: var(--color-danger-bg); color: var(--color-danger); }
  .row-action { min-height: 34px; padding: 7px 10px; font-size: 0.72rem; white-space: nowrap; }
  .is-loading { position: relative; color: transparent !important; pointer-events: none; }
  .is-loading::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 650ms linear infinite; color: var(--color-accent); }
  @keyframes spin { to { transform: rotate(360deg); } }

  .manager-card {
    min-width: 0;
    margin: var(--space-5) 0;
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(155deg, rgb(25 36 52 / 0.72), rgb(18 26 38 / 0.97) 36%);
    box-shadow: var(--shadow-panel);
  }
  .manager-card > p { max-width: 82ch; }
  .manager-card > p + p { margin-top: var(--space-3); }
  .manager-card h2 { margin: 0 0 var(--space-4); }
  .manager-card.callout-card { border-left: 3px solid var(--color-accent); background: linear-gradient(135deg, rgb(102 217 239 / 0.08), var(--color-surface) 45%); }
  .manager-card.muted-card { border-style: dashed; box-shadow: none; }
  .card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
  .card-title h2 { margin: 3px 0 var(--space-1); }
  .card-title p:not(.eyebrow) { color: var(--color-text-muted); font-size: 0.86rem; }

  .content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-5) 0; }
  .content-grid > .manager-card { margin: 0; }

  .manager-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
  .manager-form.inline { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .manager-form label, .settings-grid label, .settings-row label {
    display: grid;
    flex: 1;
    gap: 7px;
    min-width: 170px;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 600;
  }
  :where(.manager-form, .settings-grid, .settings-row) :where(input, select, textarea) {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-deep);
    color: var(--color-text);
    font-size: 0.84rem;
    font-weight: 450;
  }
  :where(.manager-form, .settings-grid, .settings-row) textarea { min-height: 92px; resize: vertical; }
  :where(.manager-form, .settings-grid, .settings-row) :where(input, select, textarea):hover { border-color: #5b708b; }
  :where(.manager-form, .settings-grid, .settings-row) :where(input, select, textarea):disabled { background: #0d131c; color: var(--color-text-faint); cursor: not-allowed; }
  .manager-form input[type="file"] { max-width: 460px; padding: 7px; }
  .manager-form input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 9px; border: 0; border-radius: 4px; background: var(--color-surface-raised); color: var(--color-text); }
  .manager-form small { color: var(--color-text-faint); font-size: 0.7rem; }
  .manager-form .field-error { min-height: 1em; color: var(--color-danger); font-weight: 620; }
  :where(.manager-form, .settings-grid, .settings-row) :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 2px rgb(240 113 120 / 0.14); }
  .manager-form .check-label, .check-label { display: flex; flex: 0 1 auto; align-items: center; gap: 9px; min-width: 150px; min-height: 40px; padding: 0; }
  .manager-form .check-label input, .check-label input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--color-accent-strong); }
  .form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-3); }
  .editor-section { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgb(7 11 17 / 0.36); }
  .editor-section legend { padding: 0 var(--space-2); color: var(--color-text); font-size: 0.88rem; font-weight: 690; }
  .editor-section legend span { margin-right: 7px; color: var(--color-accent); font: 700 0.68rem/1 var(--font-mono); }
  .editor-review { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid rgb(102 217 239 / 0.22); border-radius: var(--radius-md); background: rgb(102 217 239 / 0.055); }
  .editor-review strong, .editor-review span { display: block; }
  .editor-review strong { color: var(--color-text); font-size: 0.82rem; }
  .editor-review span { margin-top: 3px; color: var(--color-text-muted); font-size: 0.74rem; }

  .table-wrap { max-width: 100%; max-height: 440px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-deep); }
  .table-wrap.large { max-height: 640px; }
  table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.78rem; }
  th, td { padding: 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; white-space: pre-line; }
  th { position: sticky; z-index: 2; top: 0; background: #141e2c; color: var(--color-text-muted); font: 720 0.66rem/1.3 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
  th:first-child { border-top-left-radius: var(--radius-md); }
  th:last-child { border-top-right-radius: var(--radius-md); }
  tbody tr { background: rgb(11 16 24 / 0.36); transition: background var(--transition-fast); }
  tbody tr:hover { background: rgb(102 217 239 / 0.045); }
  tbody tr:last-child td { border-bottom: 0; }
  td { max-width: 340px; color: #d3dce8; overflow-wrap: anywhere; }
  .primary-cell strong, .primary-cell small { display: block; }
  .primary-cell strong { color: var(--color-text); }
  .primary-cell small { margin-top: 3px; color: var(--color-text-muted); }
  .row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

  .state-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 8px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-neutral-bg); color: var(--color-text-muted); font: 720 0.64rem/1.2 var(--font-mono); letter-spacing: 0.035em; text-transform: uppercase; white-space: nowrap; }
  .state-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .state-badge.healthy { border-color: #2d7757; background: var(--color-success-bg); color: var(--color-success); }
  .state-badge.warning { border-color: #80632f; background: var(--color-warning-bg); color: var(--color-warning); }
  .state-badge.danger { border-color: #88424b; background: var(--color-danger-bg); color: var(--color-danger); }

  .operation-result { min-height: 52px; margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-deep); color: var(--color-text-muted); font-size: 0.78rem; overflow-wrap: anywhere; }
  .operation-result strong { display: block; margin-bottom: 6px; color: var(--color-text); }
  .operation-result p { margin: 7px 0; }
  .operation-result .success-text { color: var(--color-success); }
  .operation-result a { margin-top: 6px; }

  .toast { position: fixed; z-index: 120; right: var(--space-6); bottom: var(--space-6); width: min(420px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid #2d7757; border-radius: var(--radius-md); background: #12271f; color: #a8f4ce; box-shadow: var(--shadow-dialog); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); }
  .toast.visible { opacity: 1; transform: none; }
  .toast.error { border-color: #88424b; background: var(--color-danger-bg); color: #ffc1c5; }

  .confirmation-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: transparent; color: var(--color-text); box-shadow: var(--shadow-dialog); }
  .confirmation-dialog::backdrop { background: rgb(3 6 10 / 0.76); backdrop-filter: blur(4px); }
  .dialog-surface { padding: clamp(20px, 4vw, 30px); background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface)); }
  .dialog-heading h2 { margin-top: 5px; }
  .dialog-message { margin: var(--space-5) 0; color: var(--color-text-muted); white-space: pre-line; }
  .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

  #sourceUploadProgress { display: block; width: 100%; height: 8px; margin: var(--space-3) 0; accent-color: var(--color-success); }
  #sourceUploadProgress[hidden] { display: none; }
  #cancelSourceUpload { border-color: #80632f; background: var(--color-warning-bg); color: var(--color-warning); }

  @media (max-width: 1180px) { .form-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } }
  @media (max-width: 760px) { .content-grid { grid-template-columns: 1fr; } .card-title { align-items: flex-start; flex-direction: column; } }
  @media (max-width: 620px) {
    .form-grid { grid-template-columns: 1fr; }
    .manager-form.inline { display: grid; }
    .manager-form label { min-width: 0; }
    .manager-form.inline > button { width: 100%; }
    .dialog-actions { flex-direction: column-reverse; }
    .editor-section { padding: var(--space-4); }
    .editor-review { align-items: stretch; flex-direction: column; }
    .editor-review button { width: 100%; }
    .dialog-actions button { width: 100%; }
    .toast { right: var(--space-4); bottom: var(--space-4); }
  }
}