.brand-attesta {
  --panel: var(--surface-card);
  --line: var(--border);
  --muted: var(--text-secondary);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --shadow: 0 14px 36px rgba(21, 27, 46, 0.1);
}

.brand-attesta body,
.brand-attesta .app-main { background: var(--surface-page); color: var(--text-primary); }
.brand-attesta .app-accent-bar { position: relative; z-index: 20; }
.brand-attesta .app-header {
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  background: var(--brand-ink);
  box-shadow: none;
}
.brand-attesta .app-brand img { width: 146px; max-height: 36px; object-fit: contain; }
.brand-attesta .app-brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.brand-attesta .app-nav { color: var(--header-nav-muted); }
.brand-attesta .app-nav > span { color: var(--header-nav-muted); font-size: 12px; }
.brand-attesta .app-nav .button {
  min-height: 32px;
  padding: 6px 12px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: transparent;
}
.brand-attesta .app-nav .button:hover { background: rgba(255, 255, 255, 0.1); }

.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.login-signin > .theme-toggle {
  float: right;
  color: var(--brand-ink);
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}
.run-state > .theme-toggle {
  color: var(--brand-ink);
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}
.login-signin > .theme-toggle:hover { background: var(--brand-tint); }
.run-state > .theme-toggle:hover { background: var(--brand-tint); }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: inline; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

.brand-attesta .page-shell,
.brand-attesta .panel,
.brand-attesta .project-card,
.brand-attesta .admin-console-header,
.brand-attesta .admin-hero,
.brand-attesta .admin-panel,
.brand-attesta .admin-page-tabs,
.brand-attesta .login-frame,
.brand-attesta .login-feature,
.brand-attesta .login-right,
.brand-attesta input,
.brand-attesta select,
.brand-attesta textarea {
  color: var(--text-primary);
  border-color: var(--border);
  background-color: var(--surface-card);
}
.brand-attesta .panel,
.brand-attesta .project-card,
.brand-attesta .admin-panel { border-radius: var(--radius-card); box-shadow: none; }
.brand-attesta .page-heading,
.brand-attesta .project-hero,
.brand-attesta .admin-hero {
  border-top-color: var(--brand-fill);
  background-image: linear-gradient(135deg, var(--brand-tint), transparent 54%);
  background-color: var(--surface-card);
}
.brand-attesta .admin-hero h2,
.brand-attesta .project-hero h1,
.brand-attesta .project-hero h2,
.brand-attesta h1,
.brand-attesta h2,
.brand-attesta h3,
.brand-attesta label { color: var(--text-primary); }
.brand-attesta p,
.brand-attesta .body-copy,
.brand-attesta .helper,
.brand-attesta .muted { color: var(--text-secondary); }
.brand-attesta .button,
.brand-attesta button,
.brand-attesta input,
.brand-attesta select,
.brand-attesta textarea { border-radius: var(--radius-control); }
.brand-attesta button {
  appearance: none;
  -webkit-appearance: none;
}
.brand-attesta .solid-button {
  color: var(--on-brand);
  background-color: var(--brand-fill);
}
.brand-attesta .button.primary,
.brand-attesta button.primary,
.brand-attesta .login-signin .button.microsoft {
  color: var(--on-brand);
  border-color: var(--brand-fill);
  background: var(--brand-fill);
}
.brand-attesta .button.primary:hover,
.brand-attesta button.primary:hover,
.brand-attesta .login-signin .button.microsoft:hover { background: var(--brand-fill-hover); }
.brand-attesta a:not(.button):not(.app-brand) { text-decoration-color: var(--brand-fill); }
.brand-attesta .ghost-button,
.brand-attesta .text-link { color: var(--brand-text); border-color: var(--border-strong); }
.brand-attesta .metric-card,
.brand-attesta .summary-card { border-top-color: var(--brand-fill); background: var(--surface-card); }
.brand-attesta .metric-card:first-child { border-left: 3px solid var(--brand-fill); }
.brand-attesta .status.success { color: var(--status-success-fg); background: var(--status-success-bg); }
.brand-attesta .status.warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.brand-attesta .status.error,
.brand-attesta .status.failed { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.brand-attesta .status.info { color: var(--status-info-fg); background: var(--status-info-bg); }

.brand-attesta .brand-logo-link {
  width: 288px;
  min-height: 64px;
}
.brand-attesta .brand-logo {
  width: 288px;
  max-height: 64px;
  object-fit: contain;
}
.brand-attesta .project-header,
.brand-attesta .topbar,
.brand-attesta .admin-console-header {
  min-height: 96px;
}
.brand-attesta .brand-title-row { display: flex; align-items: center; gap: 12px; }
.brand-attesta .brand-title-icon { width: 34px; height: 34px; object-fit: contain; }

.brand-attesta.login-page .app-accent-bar,
.brand-attesta .login-page .app-accent-bar { display: none; }
.brand-attesta .login-frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-fill);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(21, 27, 46, 0.14);
}
.brand-attesta .login-left {
  background: linear-gradient(145deg, var(--brand-tint), var(--surface-card) 58%);
}
.brand-attesta .login-left::before { display: none; }
.brand-attesta .login-logo-stack { width: 220px; min-height: 64px; }
.brand-attesta .login-logo-stack img { width: 200px; }
.brand-attesta .login-logo-dark { display: none; }
[data-theme="dark"] .login-logo-light { display: none; }
[data-theme="dark"] .login-logo-dark { display: block; }
.brand-attesta .login-copy-block h1 { font-size: clamp(44px, 4.5vw, 70px); font-weight: var(--fw-medium); }
.brand-attesta .login-copy-block p,
.brand-attesta .login-feature span,
.brand-attesta .login-signin p { color: var(--text-secondary); font-weight: var(--fw-regular); }
.brand-attesta .login-feature {
  min-height: 164px;
  border-top: 3px solid var(--brand-fill);
  border-radius: var(--radius-card);
}
.brand-attesta .login-feature strong { color: var(--text-primary); font-weight: var(--fw-medium); }
.brand-attesta .login-feature img,
.brand-attesta .metric-icon,
.brand-attesta .row-status-icon,
.brand-attesta .project-empty-icon,
.brand-attesta .project-loading-icon,
.brand-attesta .pending-agent-icon { filter: none; }

[data-theme="dark"] body,
[data-theme="dark"] .app-main { background: var(--surface-page); }
[data-theme="dark"] .page-shell,
[data-theme="dark"] .panel,
[data-theme="dark"] .project-card,
[data-theme="dark"] .admin-console-header,
[data-theme="dark"] .admin-hero,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .admin-page-tabs,
[data-theme="dark"] .login-frame,
[data-theme="dark"] .login-feature,
[data-theme="dark"] .login-right,
[data-theme="dark"] .workflow-table th,
[data-theme="dark"] .workflow-table td {
  color: var(--text-primary);
  border-color: var(--border);
  background-color: var(--surface-card);
}
[data-theme="dark"] img:not(.app-brand img):not(.brand-logo):not(.login-logo-stack img) { opacity: 0.9; }
[data-theme="dark"] .brand-logo {
  content: url("../assets/attesta/logo-attesta-header.973c421c9686.svg");
}
[data-theme="dark"] .run-state > .theme-toggle {
  color: #fff;
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}
[data-theme="dark"] .project-header,
[data-theme="dark"] .project-metric,
[data-theme="dark"] .project-list-panel,
[data-theme="dark"] .project-form-panel,
[data-theme="dark"] .project-card,
[data-theme="dark"] .project-empty,
[data-theme="dark"] .project-loading-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .requirement-home-summary,
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .icon-button {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--surface-card);
}
[data-theme="dark"] .project-hero {
  color: var(--text-primary);
  border-color: var(--border);
  background:
    linear-gradient(90deg, rgba(22, 24, 29, .97), rgba(22, 24, 29, .9)),
    url("../assets/attesta/favicon.bb20a2746199.svg") left top / 330px auto no-repeat;
}
[data-theme="dark"] .project-hero-icons img,
[data-theme="dark"] .metric-card img {
  border-color: var(--border);
  background: var(--surface-subtle);
}
[data-theme="dark"] .project-loading-overlay { background: rgba(15, 17, 20, .82); }
[data-theme="dark"] .project-loading-bar { background: var(--surface-subtle); }
[data-theme="dark"] .hero-panel,
[data-theme="dark"] .phase-hero,
[data-theme="dark"] .workflow-panel-banner,
[data-theme="dark"] .workspace-banner,
[data-theme="dark"] .workflow-phase-content.is-loading::after {
  color: var(--text-primary);
  border-color: var(--border);
  background:
    linear-gradient(90deg, rgba(22, 24, 29, .97), rgba(22, 24, 29, .9)),
    url("../assets/attesta/favicon.bb20a2746199.svg") left top / 330px auto no-repeat;
}
[data-theme="dark"] .project-workspace-page .workflow-tab,
[data-theme="dark"] .project-workspace-page .framework-shell,
[data-theme="dark"] .project-workspace-page .framework-card,
[data-theme="dark"] .project-workspace-page .agent-progress-step,
[data-theme="dark"] .project-workspace-page .subservice-form,
[data-theme="dark"] .project-workspace-page .subservice-card,
[data-theme="dark"] .project-workspace-page .empty-state,
[data-theme="dark"] .project-workspace-page .cc-cell {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--surface-card);
  background-color: var(--surface-card);
}
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .tiny-button {
  color: var(--text-primary);
  background: var(--surface-card);
  background-color: var(--surface-card);
}
[data-theme="dark"] .project-workspace-page input,
[data-theme="dark"] .project-workspace-page select,
[data-theme="dark"] .project-workspace-page textarea {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--surface-card);
}

@media (max-width: 1200px) {
  .brand-attesta .brand-logo-link,
  .brand-attesta .brand-logo { width: 220px; }
}

@media (max-width: 760px) {
  .brand-attesta .app-header { padding: 10px 14px; }
  .brand-attesta .app-brand img { width: 122px; }
  .brand-attesta .app-nav > span { display: none; }
  .brand-attesta .brand-logo-link,
  .brand-attesta .brand-logo { width: 160px; max-height: 48px; }
  .brand-attesta .project-header,
  .brand-attesta .topbar,
  .brand-attesta .admin-console-header { min-height: 76px; }
  .theme-toggle { width: 32px; height: 32px; }
}