.account-app {
  --app-canvas: var(--er-canvas);
  --app-surface: var(--er-surface);
  --app-surface-raised: var(--er-surface-raised);
  --app-surface-muted: var(--er-surface-muted);
  --app-border: var(--er-border);
  --app-border-strong: var(--er-border-strong);
  --app-text: var(--er-text);
  --app-muted: var(--er-text-secondary);
  --app-accent: var(--er-accent);
  --app-accent-strong: var(--er-accent-hover);
  --app-accent-soft: var(--er-accent-soft);
  --app-action: var(--er-action);
  --app-action-hover: var(--er-action-hover);
  --app-on-action: var(--er-on-action);
  --app-danger: var(--er-danger);
  --app-danger-soft: var(--er-danger-soft);
  --app-warning: var(--er-warning);
  --app-warning-soft: var(--er-warning-soft);
  --app-success: var(--er-success);
  --app-success-soft: var(--er-success-soft);
  --app-shadow: var(--er-shadow);
  min-block-size: 100dvh;
  margin: 0;
  background: var(--app-canvas);
  color: var(--app-text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[data-bs-theme="dark"] .account-app { color-scheme: dark; }

.account-app *,
.account-app *::before,
.account-app *::after {
  box-sizing: border-box;
}

.account-app :where(h1, h2, h3) {
  margin-block-start: 0;
  color: var(--app-text);
  font-family: var(--font-display);
  text-wrap: balance;
}

.account-app :where(p, li, dd) {
  text-wrap: pretty;
}

.account-app :where(p) {
  max-inline-size: 68ch;
}

.account-app :where(a) {
  color: var(--app-accent);
  text-underline-offset: 0.18em;
}

.account-app :where(button, input, select, textarea, summary, a):focus-visible {
  outline: var(--er-focus-width) solid var(--app-accent);
  outline-offset: var(--er-focus-offset);
}

.account-app :where(button, .app-button):active {
  transform: translateY(1px);
}

.app-skip-link:focus {
  position: fixed !important;
  z-index: 10;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  inline-size: auto !important;
  block-size: auto !important;
  padding: 0.7rem 0.9rem !important;
  clip: auto !important;
  border: 2px solid var(--app-accent);
  border-radius: 0.5rem;
  background: var(--app-surface);
  color: var(--app-text);
  font-weight: 700;
}

.app-shell {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  min-block-size: 100dvh;
}

.app-sidebar {
  display: flex;
  position: sticky;
  inset-block-start: 0;
  flex-direction: column;
  align-self: start;
  min-block-size: 100dvh;
  padding: 1.65rem 1.25rem 1.25rem;
  border-inline-end: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface) 96%, var(--app-accent-soft));
}

.app-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-block-size: 2.75rem;
  padding: 0.2rem 0.65rem;
  color: var(--app-text);
  font: 700 1rem/1.2 var(--font-display);
  text-decoration: none;
}

.app-brand:hover {
  color: var(--app-text);
}

.app-brand-logo {
  display: block;
  inline-size: 7.625rem;
  block-size: auto;
  max-inline-size: 100%;
}

.app-brand-context {
  color: var(--app-muted);
  font: 600 0.6875rem/1.2 var(--font-mono);
  letter-spacing: 0.02em;
}

.app-nav {
  display: grid;
  gap: 0.25rem;
  margin-block-start: 2rem;
}

.app-nav-label {
  margin: 1.25rem 0.65rem 0.4rem;
  color: var(--app-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 2.75rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  color: var(--app-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.app-nav-link:hover {
  border-color: var(--app-border);
  background: var(--app-surface-raised);
  color: var(--app-text);
}

.app-nav-link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  box-shadow: inset 0.1875rem 0 var(--app-accent);
}

.app-sidebar-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin-block-start: auto;
  padding: 1.25rem 0.65rem 0.25rem;
  border-block-start: 1px solid var(--app-border);
}

.app-sidebar-footer a {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.app-main {
  min-inline-size: 0;
}

.app-topbar {
  display: flex;
  position: sticky;
  z-index: 2;
  inset-block-start: 0;
  align-items: center;
  justify-content: space-between;
  min-block-size: 5rem;
  padding-inline: clamp(1rem, 3vw, 3rem);
  border-block-end: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-canvas) 94%, transparent);
  backdrop-filter: blur(0.75rem);
}

.app-user,
.app-topbar-actions {
  display: flex;
  align-items: center;
}

.app-user {
  min-inline-size: 0;
  gap: 0.7rem;
}

.app-user-avatar {
  display: grid;
  flex: 0 0 auto;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
  border-radius: 0.7rem;
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  font: 700 0.9rem/1 var(--font-display);
}

.app-user-copy {
  display: grid;
  min-inline-size: 0;
}

.app-user-copy strong,
.app-user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user-copy strong {
  font-size: 0.85rem;
}

.app-user-copy span {
  color: var(--app-muted);
  font-size: 0.72rem;
}

.app-topbar-actions {
  flex: 0 0 auto;
  gap: 0.55rem;
}

.app-topbar-actions form {
  margin: 0;
}

.app-content {
  inline-size: min(100%, 92rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 3rem) 5rem;
}

.app-content > .app-alert {
  margin-block-end: 0.75rem;
}

.app-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--er-space-6);
  align-items: end;
  padding-block-end: var(--er-space-6);
  border-block-end: 1px solid var(--app-border);
}

.app-page-heading h1 {
  max-inline-size: 22ch;
  margin: 0;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.app-page-heading p {
  max-inline-size: 65ch;
  margin: 0.65rem 0 0;
  color: var(--app-muted);
}

.app-page-heading + :where(.app-alert, .app-secondary-text) {
  margin-block-start: 1.5rem;
}

.app-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: var(--er-target);
  padding: var(--er-control-padding-block) var(--er-control-padding-inline);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--er-control-radius);
  background: var(--app-surface);
  color: var(--app-text);
  font: 600 var(--er-control-type)/1.25 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--app-text) 8%, transparent);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.app-button:hover {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.app-button.is-primary {
  border-color: var(--app-action);
  background: var(--app-action);
  color: var(--app-on-action);
  box-shadow: 0 0.5rem 1.2rem -0.75rem color-mix(in srgb, var(--app-action) 70%, transparent);
}

.app-button.is-primary:hover {
  border-color: var(--app-action-hover);
  background: var(--app-action-hover);
  color: var(--app-on-action);
}

.app-button.is-quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--app-muted);
}

.app-button.is-danger {
  border-color: color-mix(in srgb, var(--app-danger) 60%, var(--app-border));
  color: var(--app-danger);
}

.app-button.is-danger:hover {
  border-color: var(--app-danger);
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

.app-button:disabled,
.app-button[aria-disabled="true"] {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
}

.app-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  margin-block: var(--er-space-6) var(--er-space-8);
  border: 1px solid var(--app-border);
  border-radius: var(--er-radius-md);
  background: var(--app-border);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

.app-summary-metric {
  min-inline-size: 0;
  padding: var(--er-space-4);
  background: var(--app-surface);
}

.app-project-summary {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.app-project-summary > .app-summary-metric {
  grid-column: span 3;
}

.app-project-summary > .app-summary-metric:nth-child(n + 5) {
  grid-column: span 4;
}

.app-summary-metric dt {
  color: var(--app-muted);
  font-size: var(--er-type-small);
  font-weight: 700;
  letter-spacing: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.app-summary-metric dd {
  margin: 0.3rem 0 0;
  font: 600 1.125rem/1.35 var(--font-sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.app-verification-panel {
  display: grid;
  grid-template-columns: minmax(16rem, 1.15fr) minmax(18rem, 0.85fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
  margin-block: 1.75rem 2rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--app-warning) 28%, var(--app-border));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--app-warning-soft) 48%, var(--app-surface));
  box-shadow: var(--app-shadow);
}

.app-verification-panel h2 {
  margin-block-end: 0.65rem;
  font-size: 1.25rem;
}

.app-verification-panel form {
  grid-column: 2;
}

.app-verification-values {
  display: grid;
  gap: 0.9rem;
  min-inline-size: 0;
  margin: 0;
}

.app-verification-values div {
  min-inline-size: 0;
}

.app-verification-values dt {
  margin-block-end: 0.3rem;
  color: var(--app-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-verification-values dd {
  min-inline-size: 0;
  margin: 0;
}

.app-verification-values code {
  display: block;
  padding: 0.65rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-verification-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-block: 1.5rem 2rem;
}

.app-section {
  margin-block-start: var(--er-space-6);
  padding: clamp(var(--er-space-4), 2.2vw, var(--er-space-6));
  border: 1px solid var(--app-border);
  border-radius: var(--er-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

.app-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--er-space-4);
  margin-block-end: var(--er-space-4);
  padding-block-end: var(--er-space-3);
  border-block-end: 1px solid var(--app-border);
}

.app-section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.app-totp-setup-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(20rem, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.app-totp-scan-panel {
  display: grid;
  min-inline-size: 0;
  gap: 1rem;
  justify-items: center;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  background: var(--app-surface-raised);
}

.app-totp-scan-panel > .app-kicker {
  justify-self: start;
  margin-block-end: 0;
}

.app-totp-qr-frame {
  inline-size: min(100%, 20rem);
  padding: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: #ffffff;
}

.app-totp-qr {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
}

.app-totp-account {
  display: grid;
  gap: 0.15rem;
  max-inline-size: 100%;
  margin: 0;
  text-align: center;
}

.app-totp-account span {
  color: var(--app-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.app-totp-steps {
  display: grid;
  inline-size: 100%;
  gap: 0.65rem;
  margin: 0;
  padding-inline-start: 1.35rem;
  color: var(--app-muted);
  font-size: 0.875rem;
}

.app-totp-confirm-panel {
  display: grid;
  min-inline-size: 0;
  gap: 1.5rem;
  padding-block-start: 0.25rem;
}

.app-totp-confirm-panel h3 {
  margin-block-end: 0.5rem;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
}

.app-totp-confirm-panel p:last-child {
  margin-block-end: 0;
  color: var(--app-muted);
}

.app-totp-manual {
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--app-border);
}

.app-totp-manual > summary {
  min-block-size: 2.75rem;
  padding-block: 0.85rem;
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.app-totp-manual > summary:hover {
  color: var(--app-accent-strong);
}

.app-totp-manual-content {
  max-inline-size: 52rem;
  padding-block: 0.25rem 0.5rem;
}

.app-totp-manual-content > :first-child {
  margin-block-start: 0;
}

.app-totp-manual-content dl {
  display: grid;
  gap: 0;
  margin-block: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.app-totp-manual-content dl > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.3fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem;
  border-block-end: 1px solid var(--app-border);
}

.app-totp-manual-content dl > div:last-child {
  border-block-end: 0;
}

.app-totp-manual-content dt {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-totp-manual-content dd {
  min-inline-size: 0;
  margin: 0;
}

.app-totp-manual-content code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-table-region {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--er-radius-md);
  background: var(--app-surface);
}

.app-table {
  inline-size: 100%;
  min-inline-size: 46rem;
  border-collapse: collapse;
}

.app-table :where(th, td) {
  padding: var(--er-space-3) var(--er-space-4);
  border-block-end: 1px solid var(--app-border);
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.app-table tbody tr {
  transition: background-color 140ms ease;
}

.app-table tbody tr:hover {
  background: var(--app-surface-raised);
}

.app-table thead th {
  color: var(--app-muted);
  font-size: var(--er-type-small);
  font-weight: 700;
  letter-spacing: normal;
}

.app-table tbody th {
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.app-table tbody tr:last-child td,
.app-table tbody tr:last-child th {
  border-block-end: 0;
}

.app-primary-cell {
  display: grid;
  min-inline-size: 14rem;
  gap: 0.2rem;
  max-inline-size: 24rem;
  overflow-wrap: anywhere;
}

.app-primary-cell a {
  color: var(--app-text);
  font-weight: 600;
}

.app-user-policy-table {
  min-inline-size: 65rem;
}

.app-user-policy-table .app-policy-form {
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 12rem;
}

.app-quota-policy-form {
  min-inline-size: 14rem;
}

.app-user-policy-table .app-button {
  overflow-wrap: normal;
}

.app-quota-account-context,
.app-policy-account-context {
  display: none;
}

@media (max-width: 767px) {
  .app-quota-account-context,
  .app-policy-account-context {
    display: block;
    margin: 0;
  }
}

.app-policy-form,
.app-policy-checkbox {
  display: flex;
  align-items: center;
}

.app-policy-form {
  gap: 0.85rem;
}

.app-policy-checkbox {
  gap: 0.5rem;
  min-inline-size: 10.5rem;
  min-block-size: 2.75rem;
  color: var(--app-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.app-policy-checkbox input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  accent-color: var(--app-accent);
}

.app-secondary-text {
  color: var(--app-muted);
  font-size: var(--er-type-small);
  overflow-wrap: anywhere;
}

.app-status {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  background: var(--app-surface-raised);
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.app-status.is-success {
  border-color: color-mix(in srgb, var(--app-success) 42%, var(--app-border));
  background: var(--app-success-soft);
  color: var(--app-success);
}

.app-status.is-warning {
  border-color: color-mix(in srgb, var(--app-warning) 42%, var(--app-border));
  background: var(--app-warning-soft);
  color: var(--app-warning);
}

.app-status.is-danger {
  border-color: color-mix(in srgb, var(--app-danger) 42%, var(--app-border));
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

.app-form {
  display: grid;
  max-inline-size: 46rem;
  gap: 1.2rem;
}

.app-field {
  display: grid;
  gap: 0.4rem;
}

fieldset.app-field {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.app-field > legend {
  float: none;
  inline-size: auto;
  margin: 0 0 0.4rem;
  padding: 0;
}

.app-field label,
.app-legend {
  color: var(--app-text);
  font-size: var(--er-type-small);
  font-weight: 700;
}

.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  inline-size: 100%;
  min-block-size: var(--er-target);
  padding: var(--er-control-padding-block) var(--er-control-padding-inline);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--er-control-radius);
  background: var(--app-surface);
  color: var(--app-text);
  font: inherit;
  line-height: 1.25;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-border-strong));
}

.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea)[aria-invalid="true"],
.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea).is-invalid {
  border-color: var(--app-danger);
}

.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):disabled {
  border-color: var(--app-border);
  background: var(--app-surface-muted);
  color: var(--app-muted);
  opacity: 1;
}

.app-field textarea {
  min-block-size: 7rem;
  resize: vertical;
}

.app-help,
.app-error {
  margin: 0;
  font-size: var(--er-type-small);
}

.app-help {
  color: var(--app-muted);
}

.app-error {
  color: var(--app-danger);
  font-weight: 600;
}

.app-error:empty {
  display: none;
}

.app-error :where(ul, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-alert {
  padding: 0.85rem 1rem;
  border: 1px solid var(--app-border);
  border-inline-start-width: 0.25rem;
  border-radius: 0.65rem;
  background: var(--app-surface);
}

.app-alert :where(p, ul):last-child {
  margin-block-end: 0;
}

.app-alert.is-error {
  border-inline-start-color: var(--app-danger);
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

.app-alert.is-success {
  border-inline-start-color: var(--app-success);
  background: var(--app-success-soft);
  color: var(--app-success);
}

.app-alert.is-warning {
  border-inline-start-color: var(--app-warning);
  background: var(--app-warning-soft);
  color: var(--app-warning);
}

.app-project-tabs,
.app-filter-nav {
  display: flex;
  gap: 0.25rem;
  margin-block-end: 2rem;
  padding-inline: 0.25rem;
  overflow-x: auto;
  border-block-end: 1px solid var(--app-border);
  scrollbar-width: thin;
}

.app-project-tabs a,
.app-filter-nav a {
  flex: 0 0 auto;
  min-block-size: 2.75rem;
  padding: 0.7rem 0.85rem;
  border-block-end: 2px solid transparent;
  color: var(--app-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.app-project-tabs a:hover,
.app-filter-nav a:hover {
  color: var(--app-text);
}

.app-project-tabs a[aria-current="page"],
.app-filter-nav a[aria-current="page"] {
  border-block-end-color: var(--app-accent);
  color: var(--app-accent-strong);
}

.app-choice {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  min-block-size: 2.75rem;
  padding: 0.7rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.app-choice input {
  flex: 0 0 1.125rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  min-block-size: 1.125rem;
  margin: 0.1rem 0 0;
  padding: 0;
  accent-color: var(--app-accent-strong);
}

.app-choice:has(input:focus-visible) {
  color: var(--app-accent-strong);
}

.app-layout-choices {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.app-layout-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.app-layout-additional > summary { padding-block: 0.65rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.app-layout-additional > summary:focus-visible { outline: var(--er-focus-width) solid var(--app-accent-strong); outline-offset: 3px; }
.app-layout-additional .app-layout-group { margin-bottom: 0.75rem; }

.app-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.5rem;
}

.app-choice.app-layout-choice {
  display: grid;
  grid-template-columns: 1.125rem 2rem minmax(0, 1fr);
  align-items: center;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--app-border);
  border-radius: var(--er-control-radius);
  cursor: pointer;
}

.app-layout-choice input { margin: 0; }
.app-layout-icon { color: var(--app-muted); font-size: 1.5rem; line-height: 1; text-align: center; }
.app-layout-choice-title { display: block; }
.app-layout-choice > span small { display: block; margin-top: 0.15rem; color: var(--app-muted); font-size: 0.75rem; line-height: 1.5; font-weight: 400; }
.app-layout-choice:has(input:checked) { border-color: var(--app-accent-strong); background: var(--app-accent-soft); }
.app-layout-choice:has(input:checked) .app-layout-icon { color: var(--app-accent-strong); }
.app-layout-choice:has(input:focus-visible) { outline: var(--er-focus-width) solid var(--app-accent-strong); outline-offset: 3px; }
.app-layout-choice:has(input:disabled) { opacity: 0.65; cursor: default; }

.app-manual-list {
  display: grid;
  gap: 0.85rem;
  margin-block-start: 1.5rem;
}

.app-manual-item {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

.app-manual-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.app-manual-heading > div {
  min-inline-size: 0;
}

.app-manual-heading .app-secondary-text {
  overflow-wrap: anywhere;
}

.app-manual-heading h2 {
  margin: 0.55rem 0 0;
  font-size: 1.05rem;
}

.app-manual-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
}

.app-manual-note {
  flex: 1 1 20rem;
}

.app-manual-context {
  max-inline-size: 72ch;
}

.app-manual-context > :last-child {
  margin-block-end: 0;
}

.app-manual-impact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: baseline;
  margin-block-end: 0.55rem;
  font-weight: 600;
}

.app-manual-impact span {
  color: var(--app-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-evidence-disclosure {
  inline-size: min(100%, 72rem);
}

.app-evidence-disclosure > summary::-webkit-details-marker {
  display: none;
}

.app-disclosure-trigger {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto 0.8rem;
  gap: 0.55rem;
  align-items: center;
  min-block-size: var(--er-target);
  max-inline-size: 100%;
  padding: var(--er-control-padding-block) var(--er-control-padding-inline);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--er-control-radius);
  background: var(--app-surface);
  color: var(--app-text);
  font: 600 var(--er-control-type)/1.25 var(--font-sans);
  list-style: none;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.app-disclosure-trigger:hover {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.app-disclosure-trigger:active {
  transform: translateY(1px);
}

.app-disclosure-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.app-disclosure-count {
  min-inline-size: 1.6rem;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
  background: var(--app-surface-raised);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.app-disclosure-icon {
  display: block;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform 140ms ease;
}

.app-evidence-disclosure[open] > .app-disclosure-trigger {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.app-evidence-disclosure[open] > .app-disclosure-trigger .app-disclosure-icon {
  transform: rotate(225deg) translate(-0.05rem, -0.05rem);
}

.app-evidence-body {
  padding-block: 1rem 0.25rem;
}

.app-evidence-list {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  padding: 0;
  border-block-start: 1px solid var(--app-border);
  list-style: none;
}

.app-evidence-list > li {
  min-inline-size: 0;
  padding-block: 1rem;
  border-block-end: 1px solid var(--app-border);
}

.app-evidence-list h3 {
  margin-block-end: 0.8rem;
  font-size: 0.8rem;
}

.app-evidence-field {
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
  margin-block-start: 0.75rem;
}

.app-evidence-field > span {
  color: var(--app-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-evidence-field :where(code, p, li) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-evidence-field ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-inline-start: 1.15rem;
}

.app-evidence-field pre {
  max-inline-size: 100%;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-evidence-field p,
.app-evidence-limit {
  margin: 0;
}

.app-evidence-limit {
  padding-block-start: 0.8rem;
  color: var(--app-muted);
  font-size: 0.8rem;
}

.app-plain-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--er-radius-md);
  overflow: hidden;
  list-style: none;
}

.app-plain-list li {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-block-size: 3.25rem;
  padding: 0.65rem 0.75rem;
  border-block-end: 1px solid var(--app-border);
}

.app-plain-list li:last-child {
  border-block-end: 0;
}

.app-report-page {
  min-block-size: 100dvh;
}

.app-report-topbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-block-size: 5rem;
  padding: 0.75rem clamp(1rem, 3vw, 3rem);
  border-block-end: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface) 94%, var(--app-accent-soft));
}

.app-kicker {
  margin: 0 0 0.5rem;
  color: var(--app-accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.app-inline-form :where(input, select),
.app-share-result input {
  min-block-size: var(--er-target);
  padding: var(--er-control-padding-block) var(--er-control-padding-inline);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--er-control-radius);
  background: var(--app-surface);
  color: var(--app-text);
}

.app-inline-form :where(input, select) {
  min-inline-size: min(100%, 13rem);
}

.app-recipient-form {
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--app-border);
}

.app-share-result {
  display: grid;
  gap: 0.65rem;
  margin-block-end: 1rem;
}

.app-share-result input {
  inline-size: 100%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.app-share-list span:first-child {
  display: grid;
  gap: 0.2rem;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(22rem, 1.2fr);
  min-block-size: 100dvh;
  background: var(--app-surface);
}

.auth-context {
  display: grid;
  position: relative;
  align-content: start;
  min-inline-size: 0;
  padding: clamp(var(--er-space-6), 4vw, var(--er-space-12));
  border-inline-end: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  color: var(--app-text);
}

.auth-context::after {
  content: none;
}

.auth-context > div {
  position: relative;
  z-index: 1;
}

.auth-context .app-brand {
  margin-block-end: var(--er-space-8);
  padding-inline: 0;
}

.auth-context .app-brand-context {
  color: var(--app-muted);
}

.auth-context h1 {
  max-inline-size: 18ch;
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--app-text);
}

.auth-context p {
  max-inline-size: 42ch;
  margin: var(--er-space-3) 0 0;
  color: var(--app-muted);
  font-size: var(--er-type-body);
}

.auth-panel {
  display: grid;
  position: relative;
  align-content: center;
  justify-items: start;
  min-inline-size: 0;
  padding: clamp(var(--er-space-6), 4vw, var(--er-space-12));
  background: var(--app-surface);
}

.auth-utility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--er-space-2);
  inline-size: min(100%, 28rem);
  margin-block-end: var(--er-space-4);
}

.auth-utility .app-button {
  min-inline-size: 0;
  padding-inline: var(--er-space-2);
  white-space: normal;
}

.auth-panel-inner {
  inline-size: min(100%, 28rem);
}

.auth-panel h2 {
  margin-block-end: 0.4rem;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  letter-spacing: -0.035em;
}

.auth-panel-intro {
  margin: 0 0 var(--er-space-4);
  color: var(--app-muted);
}

.auth-panel .app-form > .app-button {
  inline-size: 100%;
}

.auth-panel-inner > form + form {
  margin-block-start: 0.75rem;
}

.auth-footer {
  display: grid;
  gap: 0.65rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--app-border);
  color: var(--app-muted);
  font-size: 0.72rem;
}

.auth-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.auth-footer a {
  color: var(--app-muted);
  font-weight: 600;
}

.app-empty-state {
  display: grid;
  min-block-size: 15rem;
  place-items: center;
  padding: 2rem;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--app-accent-soft) 36%, var(--app-surface));
  text-align: center;
}

.app-empty-state > div {
  max-inline-size: 34rem;
}

.app-empty-state h2 {
  margin-block-end: 0.5rem;
}

@media (max-width: 62rem) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    min-block-size: auto;
    padding: 1rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--app-border);
  }

  .app-nav {
    display: flex;
    margin-block-start: 0.5rem;
    overflow-x: auto;
  }

  .app-sidebar-footer {
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
  }

  .app-nav-label {
    display: none;
  }

  .app-nav-link {
    flex: 0 0 auto;
  }

  .app-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-project-summary > .app-summary-metric:nth-child(n) {
    grid-column: auto;
  }

  .app-summary-strip:has(> .app-summary-metric:last-child:nth-child(odd)) > .app-summary-metric:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.99rem) {
  .auth-layout {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .auth-context {
    min-block-size: auto;
    padding: var(--er-space-4);
    border-inline-end: 0;
    border-block-end: 1px solid var(--app-border);
  }

  .auth-context .app-brand {
    margin-block-end: var(--er-space-3);
  }

  .auth-context h1 {
    font-size: 1.5rem;
    max-inline-size: 24ch;
  }

  .auth-context p {
    font-size: var(--er-type-small);
  }

  .auth-panel {
    padding: var(--er-space-4) var(--er-space-4) var(--er-space-12);
    align-content: start;
  }

  .auth-panel h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .app-topbar,
  .app-report-topbar,
  .app-page-heading,
  .app-section-header,
  .app-manual-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-topbar {
    position: static;
    gap: 0.85rem;
    padding-block: 0.9rem;
  }

  .app-topbar-actions {
    inline-size: 100%;
  }

  .app-topbar-actions form,
  .app-topbar-actions .app-button {
    flex: 1 1 0;
  }

  .app-topbar-actions form .app-button {
    inline-size: 100%;
  }

  .app-user {
    max-inline-size: 100%;
  }

  .app-page-heading {
    display: flex;
  }

  .app-heading-actions {
    inline-size: 100%;
    justify-content: flex-start;
  }

  .app-heading-actions .app-button {
    flex: 1 1 auto;
  }

  .app-section {
    border-radius: 0.8rem;
  }

  .app-section-header {
    gap: 0.45rem;
  }

  .app-totp-setup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-totp-confirm-panel {
    padding-block-start: 0;
  }

  .app-plain-list li {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-inline-form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .app-inline-form :where(input, select),
  .app-inline-form .app-button {
    inline-size: 100%;
  }

  .app-manual-actions .app-button {
    flex: 1 1 9rem;
  }

  .app-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-verification-panel {
    grid-template-columns: 1fr;
  }

  .app-verification-panel form {
    grid-column: 1;
  }

  .app-summary-metric {
    padding: 1rem;
  }

  .app-summary-metric dd {
    font-size: 1.1rem;
  }
}

@media (max-width: 28rem) {
  .app-user-copy span {
    display: none;
  }

  .app-topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .app-heading-actions,
  .app-heading-actions .app-button,
  .app-manual-actions .app-button {
    inline-size: 100%;
  }

  .app-manual-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-totp-scan-panel {
    padding: 0.75rem;
  }

  .app-totp-qr-frame {
    padding: 0.5rem;
  }

  .app-totp-manual-content dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-app *,
  .account-app *::before,
  .account-app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .app-button,
  .app-disclosure-trigger,
  .app-nav-link,
  .app-status,
  .app-totp-qr-frame,
  .app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    border-color: ButtonText;
  }

  .app-nav-link[aria-current="page"],
  .app-evidence-disclosure[open] > .app-disclosure-trigger,
  .app-button.is-primary {
    border-color: Highlight;
    background: Canvas;
    color: ButtonText;
  }
}

/* Compact application shell and project workspace */
.account-app {
  background: var(--app-canvas);
}

.account-app [hidden] {
  display: none !important;
}

.app-shell {
  display: block;
  min-block-size: 100dvh;
}

.app-global-header {
  position: sticky;
  z-index: 5;
  inset-block-start: 0;
  border-block-end: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-canvas) 91%, transparent);
  backdrop-filter: blur(1rem);
}

.app-global-header :is(a, button, summary) { transition: none; }

.app-global-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  inline-size: min(100%, 92rem);
  min-block-size: 4.75rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 3rem);
}

.app-global-header .app-brand {
  flex-direction: row;
  gap: 0.55rem;
  align-items: center;
  padding: 0;
}

.app-global-header .app-brand-logo {
  inline-size: 6.7rem;
}

.app-global-header .app-brand-context {
  padding-inline-start: 0.55rem;
  border-inline-start: 1px solid var(--app-border);
}

.app-global-nav {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.app-global-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.55rem;
  color: var(--app-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  text-decoration: none;
}

.app-global-nav a:hover {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.app-global-nav a[aria-current="page"] {
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.app-account-menu {
  position: relative;
}

.app-account-menu > summary {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.2rem 0.4rem 0.2rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  cursor: pointer;
  list-style: none;
}

.app-account-menu > summary::-webkit-details-marker {
  display: none;
}

.app-account-menu > summary::after {
  inline-size: 0.42rem;
  block-size: 0.42rem;
  margin-inline: 0.2rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  color: var(--app-muted);
  content: "";
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 160ms ease;
}

.app-account-menu[open] > summary,
.app-account-menu > summary:hover {
  border-color: var(--app-border);
  background: var(--app-surface);
}

.app-account-menu[open] > summary::after {
  transform: rotate(225deg) translate(-0.1rem, -0.05rem);
}

.app-account-menu-panel {
  display: grid;
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-end: 0;
  gap: 0.55rem;
  inline-size: min(20rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: var(--app-surface);
  box-shadow: 0 1.2rem 3rem -1.8rem rgba(5, 35, 28, 0.55);
  max-block-size: calc(100dvh - 6rem);
  overflow-y: auto;
}

.app-account-menu-panel p {
  display: grid;
  gap: 0.1rem;
  min-inline-size: 0;
  margin: 0 0 0.25rem;
  padding: 0.25rem 0.35rem 0.7rem;
  border-block-end: 1px solid var(--app-border);
}

.app-account-menu-panel p span {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account-menu-panel .app-button,
.app-account-menu-panel form .app-button {
  inline-size: 100%;
}

.app-account-menu-panel form {
  margin: 0;
}

.app-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(100dvh - 4.75rem), 1fr) auto;
}

.app-global-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  inline-size: min(100%, 92rem);
  margin-inline: auto;
  padding: 1.25rem clamp(1rem, 3vw, 3rem) 2rem;
  border-block-start: 1px solid var(--app-border);
  color: var(--app-muted);
  font-size: 0.72rem;
}

.app-global-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.app-global-footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
  color: var(--app-muted);
  font-weight: 600;
}

.app-section,
.app-summary-strip,
.app-manual-item,
.app-verification-panel {
  box-shadow: none;
}

.app-section {
  border-radius: var(--er-radius-md);
}

.app-summary-strip {
  border-radius: var(--er-radius-md);
}

.app-settings-section,
.app-narrow-panel {
  max-inline-size: 58rem;
}

.app-narrow-panel {
  max-inline-size: 44rem;
}

.app-sensitive-section {
  border-inline-start: 0.25rem solid color-mix(in srgb, var(--app-warning) 55%, var(--app-border));
  background: color-mix(in srgb, var(--app-warning-soft) 22%, var(--app-surface));
}

.app-field-label-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.app-field-label-row a {
  font-size: 0.75rem;
  font-weight: 650;
}

.auth-secondary {
  margin-block-start: 1.25rem;
  color: var(--app-muted);
  font-size: 0.875rem;
  text-align: center;
}

.app-choice > span {
  display: grid;
  min-inline-size: 0;
  gap: 0.1rem;
}

.app-choice > span small {
  color: var(--app-muted);
  font-weight: 400;
  line-height: 1.45;
}

.app-project-list {
  margin-block-start: 1.75rem;
}

.app-project-list .app-section-header {
  margin: 0;
  padding: 0 0 0.85rem;
}

.app-project-rows,
.app-check-list {
  display: grid;
}

.app-project-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1.15fr) minmax(30rem, 2fr) auto;
  gap: var(--er-space-6);
  align-items: center;
  min-inline-size: 0;
  padding-block: var(--er-space-4);
  border-block-end: 1px solid var(--app-border);
}

.app-project-identity {
  display: grid;
  min-inline-size: 0;
  gap: 0.2rem;
}

.app-project-identity a:first-child {
  color: var(--app-text);
  font: 650 1rem/1.3 var(--font-display);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.app-project-identity a:first-child:hover {
  color: var(--app-accent-strong);
}

.app-project-identity span {
  color: var(--app-muted);
  font-size: var(--er-type-small);
  overflow-wrap: anywhere;
}

.app-project-meta,
.app-check-row dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--er-space-3) var(--er-space-4);
  min-inline-size: 0;
  margin: 0;
}

.app-check-row dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-project-meta div,
.app-check-row dl div {
  min-inline-size: 0;
}

.app-project-meta dt,
.app-check-row dt {
  color: var(--app-muted);
  font-size: var(--er-type-small);
  font-weight: 600;
  letter-spacing: normal;
}

.app-project-meta dd,
.app-check-row dd {
  margin: 0.25rem 0 0;
  font-size: var(--er-type-small);
  overflow-wrap: anywhere;
}

.app-project-open {
  white-space: nowrap;
}

.app-check-row {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(20rem, 1.5fr);
  gap: var(--er-space-6);
  align-items: center;
  padding-block: 1rem;
  border-block-end: 1px solid var(--app-border);
}

.app-check-row > .app-alert {
  grid-column: 1 / -1;
  margin: 0;
}

.app-text-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-block-size: 1.5rem;
  font-weight: 600;
  text-decoration-color: var(--app-border-strong);
  text-decoration-thickness: 1px;
}

.app-text-link:hover,
.app-text-link:focus-visible {
  color: var(--app-accent-strong);
  text-decoration-color: currentColor;
}

.app-check-row > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.app-check-row > div:first-child strong {
  font-family: var(--font-display);
}

.app-check-row > div:first-child span {
  color: var(--app-muted);
  font-size: var(--er-type-small);
}

.app-project-menu {
  display: none;
  margin-block-end: 1.5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--er-radius-md);
  background: var(--app-surface);
}

.app-project-menu > summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-block-size: 3rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  list-style: none;
}

.app-project-menu > summary::-webkit-details-marker {
  display: none;
}

.app-project-menu > summary span {
  color: var(--app-muted);
  font-size: 0.72rem;
}

.app-project-menu nav {
  display: grid;
  padding: 0.35rem;
  border-block-start: 1px solid var(--app-border);
}

.app-project-menu nav a {
  padding: 0.7rem 0.6rem;
  border-radius: 0.45rem;
  color: var(--app-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  text-decoration: none;
}

.app-project-menu nav a:hover,
.app-project-menu nav a[aria-current="page"] {
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.app-empty-state.is-compact {
  min-block-size: 10rem;
  justify-items: start;
  padding: 1.5rem;
  text-align: start;
}

@media (max-width: 62rem) {
  .app-global-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .app-project-row {
    grid-template-columns: minmax(12rem, 1fr) auto;
  }

  .app-project-meta {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .app-project-open {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 47.99rem) {
  .app-global-header {
    position: static;
  }

  .app-global-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.75rem;
    padding-block: 0.65rem;
  }

  .app-global-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
    border-block-start: 1px solid var(--app-border);
    padding-block-start: 0.35rem;
  }

  .app-global-nav a {
    flex: 1 0 auto;
    justify-content: center;
  }

  .app-account-menu .app-user-copy {
    display: none;
  }

  .app-main {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .app-content {
    min-inline-size: 0;
    padding-block-start: 1.25rem;
  }

  .app-section,
  .app-table-region {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .app-global-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-project-tabs {
    display: none;
  }

  .app-project-menu {
    display: block;
  }

  .app-project-row,
  .app-check-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .app-project-meta,
  .app-project-open {
    grid-column: 1;
    grid-row: auto;
  }

  .app-project-meta,
  .app-check-row dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-project-open,
  .app-check-row > .app-button {
    inline-size: 100%;
  }
}

@media (max-width: 28rem) {
  .app-global-header .app-brand-context {
    display: none;
  }

  .app-project-meta > div:first-child,
  .app-project-meta > div:last-child {
    grid-column: 1 / -1;
  }

  .app-field-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }
}

@media (forced-colors: active) {
  .app-global-nav a[aria-current="page"],
  .app-project-menu nav a[aria-current="page"] {
    background: Highlight;
    color: HighlightText;
  }

  .app-account-menu > summary,
  .app-project-menu {
    border-color: ButtonText;
  }
}

/* Saved report evidence uses the same keyboard-native disclosure as manual review. */
.app-report-evidence {
  min-width: 0;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--app-border);
  overflow-wrap: anywhere;
}

.app-report-evidence :where(h3, h4, h5) {
  margin: 0 0 0.75rem;
}

.app-report-evidence h4 {
  font-size: 1rem;
}

.app-report-evidence h5 {
  font-size: 0.9375rem;
}

.app-report-evidence > .app-evidence-disclosure + .app-evidence-disclosure {
  margin-block-start: 0.75rem;
}

.app-section > :where(.app-form, .app-inline-form) + :where(p, .app-plain-list),
.app-section > .app-alert + .app-form {
  margin-block-start: 1.25rem;
}

.app-section > p:last-child,
.app-section-header p:last-child {
  margin-block-end: 0;
}

.app-pagination-position {
  align-self: center;
  padding-inline: 0.5rem;
}

/* Project context and operational summaries follow the existing panel layout. */
.app-project-context { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.app-project-context > div { display: grid; min-inline-size: 0; gap: .25rem; }
.app-project-context > div > a { font-weight: 700; }
.app-project-context span { font-size: .875rem; }
.app-context-links { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .875rem; }
.app-settings-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-block: 1rem; }
.app-settings-links a { display: grid; gap: .4rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: .5rem; overflow-wrap: anywhere; }
.app-settings-links span { color: var(--app-muted); font-size: .875rem; }
.app-settings-guide [id], .app-settings-section [id], #recentChecksTitle, #ownershipTitle { scroll-margin-block-start: 6rem; }
.app-project-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; margin-block: 1.5rem; }
.app-project-filters .app-field { flex: 1 1 14rem; }
.app-progress-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }
.app-progress-engines progress { width: 100%; accent-color: var(--app-accent, #176c55); }
.app-delivery-list > li { align-items: flex-start; }
.app-delivery-list p { margin: .4rem 0; }
.app-share-result { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.app-share-result input { min-width: 0; flex: 1 1 20rem; }
.app-share-result [data-copy-feedback] { flex-basis: 100%; }
@media (max-width: 640px) {
  .app-project-context { flex-direction: column; align-items: flex-start; }
  .app-progress-engines { grid-template-columns: 1fr; }
  .app-project-filters .app-field { flex-basis: 100%; }
}

.app-table-help {
  margin-block-end: var(--er-space-3);
}

.app-scan-defaults {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--er-space-4);
  margin-block: var(--er-space-4);
}

.app-scan-defaults dt {
  color: var(--app-muted);
  font-size: var(--er-type-small);
}

.app-scan-defaults dd {
  margin: var(--er-space-1) 0 0;
  overflow-wrap: anywhere;
}

.app-selected-pages,
.app-profile-advanced {
  margin-block: var(--er-space-4);
}

.app-selected-pages summary,
.app-profile-advanced summary {
  min-block-size: var(--er-target);
  padding-block: var(--er-space-3);
  color: var(--app-accent);
  font-weight: 600;
}

.app-selected-pages code {
  overflow-wrap: anywhere;
  color: var(--app-text);
}

.app-expert-fields code {
  color: var(--app-text);
  overflow-wrap: anywhere;
}

.app-field-error {
  color: var(--app-danger);
  margin: 0;
  font-weight: 600;
}

.app-report-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--er-space-3) var(--er-space-6);
}

.app-report-context {
  margin-block-start: var(--er-space-4);
}

.app-report-context > summary {
  min-block-size: var(--er-target);
  padding-block: var(--er-space-3);
  color: var(--app-accent);
  font-weight: 600;
}

.app-report-coverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--er-space-3);
  margin-block: var(--er-space-4);
  padding-block: var(--er-space-4);
  border-block: 1px solid var(--app-border);
}

.app-report-coverage dt {
  color: var(--app-muted);
  font-size: var(--er-type-small);
  overflow-wrap: anywhere;
}

.app-report-priority h3 {
  font-size: var(--er-type-body);
  font-weight: 600;
  margin-block: var(--er-space-4);
}

.app-report-coverage dd {
  margin: var(--er-space-2) 0 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

@media (max-width: 47.99rem) {
  .app-report-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.app-profile-advanced > .app-form {
  padding-block-start: var(--er-space-4);
}

@media (max-width: 35.99rem) {
  .app-scan-defaults { grid-template-columns: 1fr; }
}

.app-table-region:focus-visible {
  outline: var(--er-focus-width) solid var(--app-accent);
  outline-offset: var(--er-focus-offset);
}

@media (forced-colors: active) {
  .app-table-region:focus-visible {
    outline-color: Highlight;
  }
}

/* Personal sections retain the shared account geometry and native anchors. */
.app-account-sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--er-space-2);
  margin-block-end: var(--er-space-4);
}

.app-account-settings-form .app-section {
  margin-block-end: var(--er-space-4);
}

.app-account-settings-form h2, #security-heading {
  scroll-margin-block-start: 6rem;
}

[data-appearance-feedback]:empty {
  display: none;
}

/* Login is the public-to-workspace entry: reuse the selected Studio identity. */
.account-app.is-login-studio {
  --app-canvas: var(--er-studio-canvas);
  --app-surface: var(--er-studio-input);
  --app-border: var(--er-studio-line);
  --app-border-strong: var(--er-studio-control-border);
  --app-text: var(--er-studio-text);
  --app-muted: var(--er-studio-muted);
  --app-accent: var(--er-studio-accent);
  --app-accent-strong: var(--er-studio-accent);
  --app-accent-soft: var(--er-studio-tint);
  --app-action: var(--er-studio-action);
  --app-action-hover: var(--er-studio-action-hover);
  --app-on-action: #fff;
}

.login-studio {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 100dvh;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.login-studio-header,
.login-studio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--er-space-6);
  inline-size: min(100%, 75rem);
  margin-inline: auto;
}

.login-studio-header {
  min-block-size: 4.3125rem;
  border-block-end: 1px solid var(--app-border);
}

.login-studio-header .app-brand {
  padding: 0;
  justify-content: center;
}

.login-studio-header .app-brand-logo {
  inline-size: 9.25rem;
}

.login-return {
  display: inline-flex;
  align-items: center;
  gap: var(--er-space-2);
  min-block-size: var(--er-target);
  color: var(--app-muted);
  font-size: var(--er-type-small);
  font-weight: 500;
  text-decoration: none;
}

.login-return:hover { color: var(--app-accent); }

.login-studio-content {
  align-self: center;
  inline-size: min(100%, 28rem);
  margin-inline: auto;
  padding-block: var(--er-space-12);
}

.login-studio-heading {
  margin-block-end: var(--er-space-6);
  text-align: center;
}

.login-kicker {
  margin: 0 0 var(--er-space-3);
  color: var(--app-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-studio-heading h1 {
  margin: 0 0 var(--er-space-3);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.login-studio-heading > p:last-child {
  margin: 0;
  color: var(--app-muted);
  font-size: var(--er-type-body);
}

.login-studio-card {
  padding: var(--er-space-8);
  border: 1px solid var(--app-border);
  border-radius: 0.625rem;
  background: var(--app-surface);
}

.is-login-studio .app-form { gap: var(--er-space-6); }

.login-studio-card .app-alert {
  margin-block-end: var(--er-space-6);
}

.is-login-studio .app-field input {
  min-block-size: 3.25rem;
  padding: var(--er-space-3) var(--er-space-4);
  border-radius: 0.625rem;
  font-size: var(--er-type-body);
}

.is-login-studio .app-field input:focus {
  box-shadow: none;
}

.is-login-studio .app-field-label-row {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem var(--er-space-3);
}

.is-login-studio .app-field-label-row a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--er-target);
  font-size: 0.8125rem;
  font-weight: 500;
}

.is-login-studio .app-form > .app-button {
  inline-size: 100%;
  min-block-size: 3.25rem;
  border-radius: 0.625rem;
  box-shadow: none;
  font-size: var(--er-type-body);
  font-weight: 600;
}

.is-login-studio .auth-secondary {
  margin: var(--er-space-6) 0 0;
  color: var(--app-muted);
  font-size: var(--er-type-small);
  text-align: center;
}

.is-login-studio .auth-secondary a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--er-target);
}

.login-studio-footer {
  padding-block: var(--er-space-4);
  border-block-start: 1px solid var(--app-border);
  color: var(--app-muted);
  font-size: 0.8125rem;
}

.login-studio-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--er-space-4);
}

.login-studio-footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--er-target);
  color: var(--app-muted);
}

.is-login-studio .login-appearance {
  min-inline-size: var(--er-target);
  min-block-size: var(--er-target);
  padding: var(--er-space-3);
  border-radius: 0.625rem;
  font-size: 0;
}

.login-appearance::before {
  content: '';
  inline-size: 1.125rem;
  block-size: 1.125rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2v14a7 7 0 0 1 0-14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 40rem) {
  .login-studio-header {
    min-block-size: 3.8125rem;
    gap: var(--er-space-3);
  }
  .login-studio-header .app-brand-logo { inline-size: 8rem; }
  .login-return { font-size: 0.8125rem; gap: 0.25rem; }
  .login-studio-content { padding-block: var(--er-space-8); }
  .login-studio-card { padding: var(--er-space-6); }
  .login-studio-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--er-space-2);
  }
  .login-studio-footer nav { gap: var(--er-space-3); }
}

@media (max-width: 22rem) {
  .login-studio-card { padding: var(--er-space-4); }
}

@media (forced-colors: active) {
  .is-login-studio .app-button.is-primary {
    border-color: Highlight;
    background: Canvas;
    color: ButtonText;
  }
  .is-login-studio .login-appearance::before { background: ButtonText; }
}

/* Shared Studio navigation owns the shell. */
.app-shell.is-global-studio-shell,
.auth-global-shell {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

.app-shell.is-global-studio-shell > .app-main {
  display: block;
  flex: 1 0 auto;
}

.auth-global-shell > main { flex: 1 0 auto; }
.auth-global-shell .auth-layout { min-block-size: 0; }
.auth-global-shell .auth-context,
.auth-global-shell .auth-panel { padding-block: clamp(2rem, 5vw, 4rem); }

.account-app :is([data-site-navigation], .studio-footer) {
  --app-accent: var(--er-studio-accent);
  --app-text: var(--er-studio-text);
  --app-muted: var(--er-studio-muted);
}

.is-login-studio .login-studio { padding-inline: 0; }
.is-login-studio .login-studio-content { inline-size: min(28rem, calc(100% - 2.5rem)); }

/* Project overview/settings extend Studio without changing other workspace surfaces. */
.account-app.is-project-studio {
  --app-canvas: var(--er-studio-canvas);
  --app-surface: var(--er-studio-input);
  --app-surface-raised: var(--er-studio-input);
  --app-surface-muted: var(--er-studio-tint);
  --app-border: var(--er-studio-line);
  --app-border-strong: var(--er-studio-control-border);
  --app-text: var(--er-studio-text);
  --app-muted: var(--er-studio-muted);
  --app-accent: var(--er-studio-accent);
  --app-accent-strong: var(--er-studio-accent);
  --app-accent-soft: var(--er-studio-tint);
  --app-action: var(--er-studio-action);
  --app-action-hover: var(--er-studio-action-hover);
  --app-on-action: #fff;
  line-height: 1.625;
}
.is-project-studio .app-content { inline-size: 100%; max-inline-size: 1200px; padding: 48px 20px 64px; }
.is-project-studio .app-project-context { align-items: flex-start; margin-block-end: 24px; }
.is-project-studio .app-project-context > div > a { font-size: 14px; font-weight: 600; }
.is-project-studio .app-project-context span, .is-project-studio .app-context-links { font-size: 13px; }
.is-project-studio .app-project-context > .app-button { border-color: transparent; background: transparent; color: var(--app-accent); }
.is-project-studio .app-project-context > .app-button:hover { background: var(--app-accent-soft); }
.is-project-studio .app-context-links a { display: inline-flex; align-items: center; min-block-size: 44px; }
.is-project-studio .app-project-tabs { gap: 4px; margin-block-end: 40px; padding: 6px; border: 0; }
.is-project-studio .app-project-tabs a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 12px; border: 0; border-radius: 7px; font-size: 14px; font-weight: 600; }
.is-project-studio .app-project-tabs a[aria-current="page"] { background: var(--app-accent-soft); color: var(--app-accent); }
.is-project-studio .app-page-heading { align-items: start; padding: 0; margin-block-end: 32px; border: 0; }
.is-project-studio .app-page-heading > div { min-inline-size: 0; }
.is-project-studio .app-page-heading h1 { max-inline-size: none; font-size: 44px; font-weight: 500; line-height: 1.15; }
.is-project-studio .app-page-heading p { font-size: 16px; margin-block-start: 16px; }
.is-project-studio .app-heading-actions { justify-content: flex-start; align-items: center; gap: 12px; }
.is-project-studio .app-button { min-block-size: 44px; min-inline-size: 44px; max-inline-size: 100%; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: normal; box-shadow: none; transition: none; }
.is-project-studio :where(button, .app-button, summary):is(:hover, :focus-visible, :active) { transform: none; }
.is-project-studio .app-button.is-primary { background: var(--app-action); border-color: var(--app-action); color: var(--app-on-action); box-shadow: none; }
.is-project-studio .app-button.is-primary:hover { background: var(--app-action-hover); border-color: var(--app-action-hover); color: var(--app-on-action); }
.is-project-studio .app-section { margin-block-start: 32px; padding: 24px; border-radius: 10px; box-shadow: none; }
.is-project-studio .app-section-header { align-items: flex-start; margin-block-end: 24px; padding: 0; border: 0; }
.is-project-studio .app-section-header h2 { font-size: 24px; line-height: 1.3; font-weight: 500; }
.is-project-studio .app-section h3 { font-size: 18px; line-height: 1.4; font-weight: 600; }
.is-project-studio .app-help, .is-project-studio .app-secondary-text { color: var(--app-muted); font-size: 14px; line-height: 1.625; }
.is-project-studio .app-next-check .app-heading-actions { margin-block-start: 24px; }
.is-project-studio .app-next-check .app-heading-actions > .app-text-link { display: inline-flex; align-items: center; min-block-size: 44px; }
.is-project-studio .app-scan-defaults { gap: 24px; margin-block: 24px; }
.is-project-studio .app-scan-defaults dt { font-size: 13px; font-weight: 600; }
.is-project-studio .app-scan-defaults dd { margin-block-start: 8px; font-size: 15px; line-height: 1.625; }
.is-project-studio .app-selected-pages summary { inline-size: fit-content; max-inline-size: 100%; min-block-size: 44px; padding: 10px 8px; border-radius: 7px; font-size: 14px; }
.is-project-studio .app-selected-pages summary:hover { background: var(--app-accent-soft); }
.is-project-studio .app-summary-strip { margin-block: 32px; border-radius: 10px; box-shadow: none; }
.is-project-studio .app-summary-metric { padding: 20px; }
.is-project-studio .app-summary-metric dt { font-size: 13px; font-weight: 500; }
.is-project-studio .app-summary-metric dd { margin-block-start: 12px; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.3; }
.is-project-studio .app-check-row { padding-block: 20px; }
.is-project-studio .app-check-row .app-text-link { display: inline-flex; align-items: center; min-block-size: 44px; font-size: 15px; }
.is-project-studio .app-check-row dt { font-weight: 500; font-size: 13px; }
.is-project-studio .app-verification-panel { padding: 24px; border-radius: 10px; box-shadow: none; }
.is-project-studio .app-verification-panel h2 { font-size: 24px; font-weight: 500; }
.is-project-studio .app-verification-values dt { font-size: 13px; letter-spacing: normal; text-transform: none; }
.is-project-studio .app-verification-state { margin-block: 24px 32px; }
.is-project-studio .app-settings-guide { max-inline-size: 920px; padding: 0; border: 0; background: transparent; }
.is-project-studio .app-settings-guide .app-section-header { margin-block-end: 16px; }
.is-project-studio .app-settings-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-block: 16px; }
.is-project-studio .app-settings-links a { min-block-size: 44px; gap: 6px; padding: 16px 8px; border: 0; border-block-end: 1px solid var(--app-border); border-radius: 0; text-decoration: none; }
.is-project-studio .app-settings-links strong { color: var(--app-accent); font-size: 16px; font-weight: 600; }
.is-project-studio .app-settings-links span { font-size: 14px; line-height: 1.625; }
.is-project-studio .app-settings-links a:hover { background: var(--app-accent-soft); }
.is-project-studio .app-settings-links a:hover strong { text-decoration: underline; }
.is-project-studio .app-settings-section { max-inline-size: 920px; }
.is-project-studio .app-sensitive-section { border: 1px solid var(--app-border); background: var(--app-surface); }
.is-project-studio .app-sensitive-section > .app-alert { padding: 16px; border: 1px solid var(--app-border); background: var(--app-surface-muted); }
.is-project-studio .app-form { max-inline-size: 640px; gap: 24px; }
.is-project-studio .app-field { min-inline-size: 0; gap: 8px; }
.is-project-studio .app-field label { font-size: 14px; font-weight: 600; }
.is-project-studio .app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { min-block-size: 44px; padding: 10px 12px; border-radius: 10px; }
.is-project-studio .app-project-menu { margin-block-end: 32px; border-color: var(--app-border); border-radius: 10px; background: var(--app-surface); }
.is-project-studio .app-project-menu > summary { min-block-size: 44px; padding: 12px 16px; gap: 12px; }
.is-project-studio .app-project-menu > summary > strong { min-inline-size: 0; text-align: end; overflow-wrap: anywhere; }
.is-project-studio .app-project-menu nav a { min-block-size: 44px; padding: 10px 12px; border-radius: 7px; }
@media (max-width: 767.98px) {
  .is-project-studio .app-content { padding: 32px 20px 48px; }
  .is-project-studio .app-project-context { flex-direction: column; align-items: flex-start; gap: 8px; }
  .is-project-studio .app-page-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-block-end: 24px; }
  .is-project-studio .app-page-heading h1 { font-size: clamp(28px, 7.5vw, 36px); }
  .is-project-studio .app-page-heading p { margin-block-start: 12px; }
  .is-project-studio .app-section, .is-project-studio .app-verification-panel { padding: 20px; margin-block-start: 24px; }
  .is-project-studio .app-section-header h2, .is-project-studio .app-verification-panel h2 { font-size: 22px; }
  .is-project-studio .app-settings-guide { padding: 0; }
  .is-project-studio .app-settings-links { grid-template-columns: minmax(0, 1fr); }
  .is-project-studio .app-summary-metric { padding: 16px; }
  .is-project-studio .app-summary-metric dd { font-size: 22px; }
  .is-project-studio .app-check-row .app-text-link { font-size: 14px; }
  .is-project-studio .app-form { gap: 20px; }
  .is-project-studio .app-project-menu > summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .is-project-studio .app-project-menu > summary > strong { text-align: start; overflow-wrap: normal; }
}
@media (forced-colors: active) {
  .account-app.is-project-studio { --app-canvas: Canvas; --app-surface: Canvas; --app-surface-raised: Canvas; --app-surface-muted: Canvas; --app-border: ButtonBorder; --app-border-strong: ButtonBorder; --app-text: CanvasText; --app-muted: CanvasText; --app-accent: LinkText; --app-accent-strong: LinkText; --app-accent-soft: Canvas; --app-action: ButtonFace; --app-action-hover: ButtonFace; --app-on-action: ButtonText; }
  .is-project-studio .app-project-tabs a[aria-current="page"], .is-project-studio .app-project-menu nav a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .is-project-studio :where(button, input, select, summary, a):focus-visible { outline-color: Highlight; }
}

/* Studio is the default authority for every account, security and saved-report page.
   Keep operational tables and QR panels in their existing layouts. */
.account-app.is-workspace-studio {
  --app-canvas: var(--er-studio-canvas);
  --app-surface: var(--er-studio-input);
  --app-surface-raised: var(--er-studio-input);
  --app-surface-muted: var(--er-studio-tint);
  --app-border: var(--er-studio-line);
  --app-border-strong: var(--er-studio-control-border);
  --app-text: var(--er-studio-text);
  --app-muted: var(--er-studio-muted);
  --app-accent: var(--er-studio-accent);
  --app-accent-strong: var(--er-studio-accent);
  --app-accent-soft: var(--er-studio-tint);
  --app-action: var(--er-studio-action);
  --app-action-hover: var(--er-studio-action-hover);
  --app-on-action: #fff;
  --app-shadow: none;
  line-height: 1.625;
}
.is-workspace-studio .app-content { inline-size: 100%; max-inline-size: 1200px; padding: 48px 20px 64px; }
.is-workspace-studio .app-page-heading { align-items: start; padding: 0; margin-block-end: 32px; border: 0; }
.is-workspace-studio .app-page-heading > div { min-inline-size: 0; }
.is-workspace-studio .app-page-heading h1 { max-inline-size: none; font-size: 44px; font-weight: 500; line-height: 1.15; }
.is-workspace-studio .app-page-heading p { margin-block-start: 16px; font-size: 16px; }
.is-workspace-studio .app-heading-actions { gap: 12px; align-items: center; }
.is-workspace-studio .app-button { min-block-size: 44px; min-inline-size: 44px; max-inline-size: 100%; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: normal; box-shadow: none; transition: none; }
.is-workspace-studio :where(button, .app-button, summary):is(:hover, :focus-visible, :active) { transform: none; }
.is-workspace-studio .app-section { margin-block-start: 32px; padding: 24px; border-radius: 10px; box-shadow: none; }
.is-workspace-studio .app-section-header { align-items: flex-start; margin-block-end: 24px; padding: 0; border: 0; }
.is-workspace-studio .app-section-header h2 { font-size: 24px; line-height: 1.3; font-weight: 500; }
.is-workspace-studio .app-section-header > * { min-inline-size: 0; max-inline-size: 100%; }
.is-workspace-studio .app-section-header h2 { overflow-wrap: anywhere; }
.is-workspace-studio .app-project-meta dt { overflow-wrap: anywhere; }
.is-workspace-studio .app-project-meta .app-status { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
.is-workspace-studio .app-section h3 { font-size: 18px; line-height: 1.4; font-weight: 600; }
.is-workspace-studio .app-help, .is-workspace-studio .app-secondary-text { font-size: 14px; line-height: 1.625; }
.is-workspace-studio .app-field { min-inline-size: 0; gap: 8px; }
.is-workspace-studio .app-field label { font-size: 14px; font-weight: 600; }
.is-workspace-studio .app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea),
.is-workspace-studio .app-inline-form :where(input:not([type="hidden"]), select),
.is-workspace-studio .app-share-result input { min-block-size: 44px; padding: 10px 12px; border-radius: 10px; }
.is-workspace-studio .app-summary-strip, .is-workspace-studio .app-empty-state { border-radius: 10px; box-shadow: none; }
.is-workspace-studio .app-empty-state { border-style: solid; background: var(--app-surface); }
.is-workspace-studio .app-summary-metric { padding: 20px; }
.is-workspace-studio .app-summary-metric dt { font-size: 13px; font-weight: 500; }
.is-workspace-studio .app-summary-metric dd { margin-block-start: 12px; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.3; }
.is-workspace-studio .app-project-context { align-items: flex-start; margin-block-end: 24px; }
.is-workspace-studio .app-context-links a, .is-workspace-studio .app-text-link { display: inline-flex; align-items: center; min-block-size: 44px; }
.is-workspace-studio .app-project-tabs { gap: 4px; margin-block-end: 40px; padding: 6px; border: 0; }
.is-workspace-studio .app-project-tabs a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 12px; border: 0; border-radius: 7px; font-size: 14px; font-weight: 600; }
.is-workspace-studio .app-project-tabs a[aria-current="page"] { background: var(--app-accent-soft); color: var(--app-accent); }
.is-workspace-studio .app-project-menu { margin-block-end: 32px; border-radius: 10px; }
.is-workspace-studio .app-project-menu > summary { min-block-size: 44px; padding: 12px 16px; }
.is-workspace-studio .app-project-menu nav a { display: flex; align-items: center; min-block-size: 44px; padding: 10px 12px; border-radius: 7px; }
.is-workspace-studio .app-report-page { min-block-size: 0; }
.is-workspace-studio .app-report-topbar { flex-wrap: wrap; min-block-size: 0; gap: 12px; padding: 24px 20px 0; max-inline-size: 1200px; margin-inline: auto; border: 0; background: transparent; }
.is-workspace-studio .app-kicker { color: var(--app-muted); }

/* The concrete authentication task comes before supporting security context. */
.is-auth-studio .auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; inline-size: min(32rem, calc(100% - 40px)); margin: 48px auto 64px; background: transparent; }
.is-auth-studio .auth-panel { display: block; padding: 32px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface); }
.is-auth-studio .auth-panel-inner { inline-size: 100%; }
.is-auth-studio .auth-panel h1 { margin: 0 0 16px; font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; }
.is-auth-studio .auth-context { display: block; padding: 0 8px; border: 0; background: transparent; }
.is-auth-studio .auth-context h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.is-auth-studio .auth-context p { margin-block-start: 8px; font-size: 14px; }
.is-auth-studio .auth-panel .app-form { gap: 20px; }
.is-auth-studio .auth-panel .app-field input { min-block-size: 52px; }
.is-auth-studio .auth-secondary { margin-block-start: 24px; font-size: 14px; }
.is-auth-studio .auth-panel .app-alert { margin-block-end: 20px; }

@media (max-width: 767.98px) {
  .is-workspace-studio .app-content { padding: 32px 20px 48px; }
  .is-workspace-studio .app-page-heading { gap: 20px; margin-block-end: 24px; }
  .is-workspace-studio .app-page-heading h1 { font-size: clamp(28px, 7.5vw, 36px); }
  .is-workspace-studio .app-section { padding: 20px; margin-block-start: 24px; }
  .is-workspace-studio .app-section-header h2 { font-size: 22px; }
  .is-workspace-studio .app-summary-metric { padding: 16px; }
  .is-workspace-studio .app-summary-metric dd { font-size: 22px; }
  .is-workspace-studio .app-project-menu > summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .is-auth-studio .auth-layout { margin-block: 32px 48px; }
  .is-auth-studio .auth-panel { padding: 20px; }
  .is-auth-studio .auth-panel h1 { font-size: 28px; }
}
@media (max-width: 360px) {
  .is-workspace-studio .app-project-meta,
  .is-workspace-studio .app-totp-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .account-app.is-workspace-studio { --app-canvas: Canvas; --app-surface: Canvas; --app-surface-raised: Canvas; --app-surface-muted: Canvas; --app-border: ButtonBorder; --app-border-strong: ButtonBorder; --app-text: CanvasText; --app-muted: CanvasText; --app-accent: LinkText; --app-accent-strong: LinkText; --app-accent-soft: Canvas; --app-action: ButtonFace; --app-action-hover: ButtonFace; --app-on-action: ButtonText; }
  .is-workspace-studio .app-project-tabs a[aria-current="page"], .is-workspace-studio .app-project-menu nav a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .is-workspace-studio :where(button, input, select, summary, a):focus-visible { outline-color: Highlight; }
}