/* delete-account.html page shell (US-17, design §3.8).
   Components come from /oneclap-ui.css; this file only holds the page shell that
   the mockup kept in app-build/design/mockup.css (.mk-* -> .da-*). CSP-safe. */

html, body { margin: 0; background: var(--oc-bg-0, #000); }
body.oc-root { min-height: 100vh; }

.da-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.da-top {
  position: sticky; top: 0; z-index: var(--oc-z-header, 50);
  display: flex; align-items: center; gap: var(--oc-space-4, 16px); flex-wrap: wrap;
  padding: var(--oc-space-3, 12px) var(--oc-gutter, 16px);
  background: rgba(8, 8, 8, 0.96); border-bottom: 1px solid var(--oc-border-gold, rgba(212, 175, 55, 0.3));
}
.da-wordmark { font-family: var(--oc-font-display); font-size: 22px; letter-spacing: 0.04em; color: var(--oc-gold-300, #F5D060); text-decoration: none; }
.oc-root a.da-wordmark { color: var(--oc-gold-300, #F5D060); text-decoration: none; }
.da-top__spacer { flex: 1; }

.da-who { display: flex; align-items: center; gap: var(--oc-space-3); padding: var(--oc-space-3) var(--oc-space-4); border-radius: var(--oc-radius-md); background: var(--oc-surface-1); border: 1px solid var(--oc-border); }
.da-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--oc-surface-3); border: 1px solid var(--oc-border-gold); display: grid; place-items: center; font-weight: var(--oc-fw-bold); color: var(--oc-gold-200); flex: none; }
.da-who__text { flex: 1; min-width: 0; font-size: var(--oc-fs-sm); }
.da-who__name { overflow-wrap: anywhere; }
.da-who__email { color: var(--oc-text-muted); overflow-wrap: anywhere; }

.da-result { text-align: center; display: grid; justify-items: center; gap: var(--oc-space-3); padding: var(--oc-space-10) var(--oc-space-6); }
.da-result .oc-empty__mark { margin: 0; }
.da-result--success .oc-empty__mark { color: var(--oc-success); border-color: var(--oc-success-border); background: var(--oc-success-bg); }
.da-result--warn .oc-empty__mark { color: var(--oc-warning); border-color: var(--oc-warning-border); background: var(--oc-warning-bg); }
.da-result__title { margin: 0; font-size: var(--oc-fs-h4); font-weight: var(--oc-fw-bold); line-height: var(--oc-lh-tight); text-wrap: balance; }
.da-result p { margin: 0; color: var(--oc-text-2); font-size: var(--oc-fs-sm); max-width: 48ch; }
.da-result .oc-row { justify-content: center; }

.da-spinner-lg { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--oc-surface-3); border-top-color: var(--oc-gold-300); animation: oc-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .da-spinner-lg { animation-duration: 2.4s; } }

.da-section-title { margin: 0; }
.da-list-kept svg { color: var(--oc-text-muted); }
.da-panel-gap { display: grid; gap: var(--oc-space-3); }
.da-footer-note { margin-top: var(--oc-space-8); font-size: var(--oc-fs-sm); color: var(--oc-text-muted); }
.da-alert-actions { margin-top: var(--oc-space-3); }
.da-password { display: grid; gap: var(--oc-space-4); text-align: left; width: 100%; max-width: 420px; }

[hidden] { display: none !important; }