/* Halaman hapus akun (FRONTEND-RULES C): warna, ukuran huruf, dan sudut dari /tokens.css
   (salinan mockup/shared/tokens.css saat build, scripts/web/build.mjs). Gaya mengikuti
   mockup/aplikasi layar 27 (kartu, kolom, tombol bahaya) dan tombol Google layar 01. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font, system-ui, sans-serif); font-size: var(--fs-md); line-height: 1.5; }
[hidden] { display: none !important; }
.page { max-width: 440px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { margin: 0 0 20px; font-size: var(--fs-xl); color: var(--ink-2); text-align: center; }
p { margin: 0 0 16px; }
.small { font-size: var(--fs-sm); color: var(--muted); }
.small b { color: var(--ink-2); }
ul.small { margin: 0; padding-left: 18px; }
.hero-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; }
.hero-ic svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-ic.danger { background: var(--danger-soft); color: var(--danger); }
.hero-ic.success { background: var(--success-soft); color: var(--success); }
.card { margin-bottom: 12px; padding: 14px; border-radius: var(--r-md); background: var(--bg-2); }
.card-h { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.notice { margin: 12px 0; padding: 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink); }
.notice.danger { background: var(--danger-soft); }
.notice .btn { margin-top: 10px; }
.field { margin: 16px 0; }
.field label { display: block; margin-bottom: 7px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.field input { width: 100%; height: 48px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit; }
.field input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 700; cursor: pointer; }
.btn svg { width: 20px; height: 20px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.danger { background: var(--danger); color: var(--on-primary); }
.btn.ghost { background: var(--btn-2); color: var(--on-btn-2); }
.btn.google { background: var(--google-bg); color: var(--google-ink); box-shadow: inset 0 0 0 1px var(--google-line); }
.btn.sm { width: auto; min-height: 48px; font-size: var(--fs-sm); }
.btn.busy::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.skeleton { height: 72px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--bg-3); animation: pulse 1.2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }