/* صفحات الحساب (طلب حذف الحساب /delete-account)
 * تُحمَّل بعد landing.css وتعيد استعمال خطوطه ورموزه (--green، --paper، .btn …).
 * ملف خارجي لأن CSP تمنع أي تنسيق مضمَّن (style-src 'self').
 */

.acct{min-height:100vh;display:flex;flex-direction:column}
.acct{--danger:#E0564F;--danger-dark:#C2413B;--danger-soft:#FCEDEC}

/* ═══════════════ الشريط العلوي ═══════════════ */
.acct-top{background:radial-gradient(900px 300px at 50% -40%,#3C6342 0%,#2A4530 50%,#16241B 100%);
  padding:18px 24px 96px}
.acct-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:900;font-size:18px;max-width:640px;width:100%;margin:0 auto}
.acct-brand img{width:40px;height:40px;border-radius:11px}
.acct-brand:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:10px}

/* ═══════════════ البطاقة ═══════════════ */
.acct-main{flex:1;padding:0 16px 64px}
.acct-card{max-width:640px;margin:-64px auto 0;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:36px 32px}
.acct-card h1{font-weight:900;font-size:clamp(24px,3.4vw,30px);line-height:1.35;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:14px}
.acct-card h2{font-weight:900;font-size:17px;color:var(--green-dark);margin:22px 0 8px}
.acct-lead{font-size:16px;color:var(--ink-2)}
.acct-muted{font-size:14px;color:var(--ink-2)}
.acct-muted b{color:var(--ink)}
.acct-card a:not(.btn){color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.acct-list{list-style:none;display:grid;gap:8px;margin:4px 0 18px}
.acct-list li{position:relative;padding-inline-start:22px;font-size:15px;color:var(--ink)}
.acct-list li::before{content:'';position:absolute;inset-inline-start:4px;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--green)}

.acct-warn{background:var(--danger-soft);color:var(--danger-dark);border-radius:var(--radius-s);
  padding:12px 16px;font-size:14.5px;font-weight:700;margin:14px 0}
.acct-alert{background:var(--danger-soft);color:var(--danger-dark);border:1px solid rgba(224,86,79,.35);
  border-radius:var(--radius-s);padding:12px 16px;font-size:15px;font-weight:700;margin-bottom:16px}

/* ═══════════════ النموذج ═══════════════ */
.acct-form{display:grid;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--hair)}
.acct-form label{font-weight:700;font-size:15px}
.acct-form input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--hair);border-radius:14px;padding:12px 16px;width:100%;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.acct-form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(72,116,78,.18)}
.acct-form input[dir="ltr"]{text-align:left}
.acct-form input.acct-code{font-size:26px;font-weight:900;letter-spacing:.45em;text-align:center;
  font-variant-numeric:tabular-nums}
.acct-form .btn{font-family:inherit;justify-self:start;margin-top:6px}

.acct-email{font-weight:700;color:var(--ink);background:var(--green-soft);border-radius:12px;
  padding:8px 14px;margin:12px 0 0;text-align:left;word-break:break-all}
.acct-again{margin-top:18px}

.btn.acct-danger{background:var(--danger);box-shadow:0 8px 22px rgba(224,86,79,.32)}
.btn.acct-danger:hover{background:var(--danger-dark);box-shadow:0 12px 28px rgba(224,86,79,.42)}

/* ═══════════════ النجاح ═══════════════ */
.acct-done{display:grid;justify-items:center;text-align:center;gap:12px;padding:8px 0}
.acct-done-ic{width:56px;height:56px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900}
.acct-done-msg{font-weight:900;font-size:18px;color:var(--ink)}

/* ═══════════════ التذييل ═══════════════ */
.acct-foot{padding:26px 24px}
.acct-foot .foot-copy{margin-top:0;align-items:center}
.acct-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.acct-foot-links a{color:#93A296;text-decoration:none;font-weight:700;transition:color .2s var(--ease-out)}
.acct-foot-links a:hover,.acct-foot-links a:focus-visible{color:#fff}

@media (max-width:520px){
  .acct-card{padding:28px 20px}
  .acct-form .btn{justify-self:stretch}
}