.account-app {
  --app-canvas: #f2f6f5;
  --app-surface: #ffffff;
  --app-surface-raised: #f7faf9;
  --app-surface-muted: #edf4f2;
  --app-border: #d5e0dd;
  --app-border-strong: #80918d;
  --app-text: #10231f;
  --app-muted: #526662;
  --app-accent: #15745f;
  --app-accent-strong: #0f5b4a;
  --app-accent-soft: #e3f3ed;
  --app-action: #126652;
  --app-action-hover: #0d5142;
  --app-on-action: #ffffff;
  --app-danger: #a9342b;
  --app-danger-soft: #fff0ee;
  --app-warning: #80540f;
  --app-warning-soft: #fff5df;
  --app-success: #0f735b;
  --app-success-soft: #e7f6f0;
  --app-shadow: 0 1px 2px rgba(14, 57, 48, 0.06), 0 18px 48px -38px rgba(14, 57, 48, 0.48);
  min-block-size: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-accent-soft) 72%, transparent), transparent 28rem),
    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 {
  --app-canvas: #081411;
  --app-surface: #10201d;
  --app-surface-raised: #172a26;
  --app-surface-muted: #1b312c;
  --app-border: #2c443f;
  --app-border-strong: #71847f;
  --app-text: #edf7f4;
  --app-muted: #afc0bc;
  --app-accent: #76d9b8;
  --app-accent-strong: #9ae7ce;
  --app-accent-soft: #173c32;
  --app-action: #58c9a3;
  --app-action-hover: #78dab9;
  --app-on-action: #071713;
  --app-danger: #ffaaa3;
  --app-danger-soft: #3b211f;
  --app-warning: #f2c66e;
  --app-warning-soft: #382d1b;
  --app-success: #76d9b8;
  --app-success-soft: #173c32;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 20px 52px -38px rgba(0, 0, 0, 0.88);
  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: 0.1875rem solid var(--app-accent);
  outline-offset: 0.1875rem;
}

.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: 1.5rem;
  align-items: end;
  padding-block-end: 1.65rem;
  border-block-end: 1px solid var(--app-border);
}

.app-page-heading h1 {
  max-inline-size: 22ch;
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.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: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: var(--app-surface);
  color: var(--app-text);
  font: 600 0.8125rem/1.2 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: 1.75rem 2rem;
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  background: var(--app-border);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

.app-summary-metric {
  min-inline-size: 0;
  padding: 1.15rem 1.25rem;
  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: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.app-summary-metric dd {
  margin: 0.3rem 0 0;
  font: 600 1.35rem/1.2 var(--font-mono);
  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: 1.75rem;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

.app-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.1rem;
  padding-block-end: 0.85rem;
  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: 0.75rem;
  background: var(--app-surface);
}

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

.app-table :where(th, td) {
  padding: 0.85rem 0.75rem;
  border-block-end: 1px solid var(--app-border);
  text-align: start;
  vertical-align: middle;
}

.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: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.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;
}

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

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

.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: 0.78rem;
  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: 0.8125rem;
  font-weight: 700;
}

.app-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  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: 0.75rem;
}

.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-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: 2.75rem;
  max-inline-size: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: var(--app-surface);
  color: var(--app-text);
  font: 600 0.8125rem/1.2 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: 0.75rem;
  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: 2.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  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;
}

.auth-context {
  display: grid;
  position: relative;
  align-content: end;
  padding: clamp(2rem, 6vw, 6rem);
  border-inline-end: 1px solid color-mix(in srgb, var(--app-accent) 20%, transparent);
  background:
    radial-gradient(circle at 84% 14%, rgba(88, 201, 163, 0.2), transparent 17rem),
    linear-gradient(150deg, #102d28 0%, #0b211e 62%, #0a191c 100%);
  color: #edf8f4;
  overflow: hidden;
}

.auth-context::after {
  position: absolute;
  inset-block-start: clamp(3rem, 9vw, 8rem);
  inset-inline-end: clamp(-8rem, -4vw, -3rem);
  inline-size: clamp(14rem, 34vw, 32rem);
  aspect-ratio: 1;
  border: 1px solid rgba(118, 217, 184, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(118, 217, 184, 0.035), 0 0 0 7rem rgba(118, 217, 184, 0.02);
  content: "";
  pointer-events: none;
}

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

.auth-context .app-brand {
  margin-block-end: clamp(3rem, 10vh, 8rem);
  padding-inline: 0;
}

.auth-context .app-brand-context {
  color: #b8d2ca;
}

.auth-context h1 {
  max-inline-size: 12ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: #f2faf7;
}

.auth-context p {
  max-inline-size: 42ch;
  margin: 1.25rem 0 0;
  color: #bdd0cb;
  font-size: 1.02rem;
}

.auth-panel {
  display: grid;
  position: relative;
  align-content: center;
  justify-items: start;
  padding: clamp(2rem, 7vw, 7rem);
  background: var(--app-surface);
}

.auth-utility {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
}

.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 2rem;
  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;
  }

  .auth-context {
    min-block-size: 14rem;
    padding: 2rem 1rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--app-border);
  }

  .auth-context .app-brand {
    margin-block-end: 2.5rem;
  }

  .auth-context h1 {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .auth-panel {
    padding: 2.5rem 1rem 4rem;
  }

  .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 {
    background: Highlight;
    color: HighlightText;
  }
}

/* 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-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);
}

.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: 0.8rem;
}

.app-summary-strip {
  border-radius: 0.75rem;
}

.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: 1.25rem;
  align-items: center;
  min-inline-size: 0;
  padding-block: 1.15rem;
  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;
}

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

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

.app-project-meta,
.app-check-row dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem 1rem;
  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: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.app-project-meta dd,
.app-check-row dd {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  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: 1.25rem;
  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: 0.75rem;
}

.app-project-menu {
  display: none;
  margin-block-end: 1.5rem;
  border: 1px solid var(--app-border);
  border-radius: 0.7rem;
  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-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%; }
}