:root{
    --bg: #ffffff;            /* أبيض */
    --card: #ffffff;          /* كارد أبيض */
    --text: #111827;          /* نص داكن */
    --muted:#6b7280;          /* نص ثانوي */
    --primary:#ef4444;        /* أحمر أساسي */
    --primary-600:#dc2626;    /* أحمر أغمق */
    --ring: 0 0 0 3px rgba(239,68,68,.25);
    --radius: 16px;
    --shadow: 0 20px 40px rgba(0,0,0,.08);
    --border:#f3f4f6;
    --input:#f9fafb;
    --error:#dc2626;
    --success:#059669;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:
      radial-gradient(1000px 500px at 120% -10%, rgba(239,68,68,.08), transparent 60%),
      radial-gradient(900px 500px at -10% 120%, rgba(239,68,68,.06), transparent 60%),
      var(--bg);
    color:var(--text);
    min-height:100vh; margin:0; display:grid; place-items:center; padding:24px;
  }
  
  .card{
    width:100%; max-width:420px; background:var(--card);
    border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:28px; position:relative; overflow:hidden;
  }
  .card:before{
    content:""; position:absolute; inset: -1px; border-radius:calc(var(--radius) + 1px);
    padding:1px; background:linear-gradient(135deg, rgba(239,68,68,.45), rgba(239,68,68,.25), rgba(239,68,68,.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
  }
  
  .header{display:flex; gap:12px; align-items:center; margin-bottom:12px}
  .logo{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--primary), var(--primary-600)); color:#fff; font-weight:700;
    box-shadow:0 10px 25px rgba(239,68,68,.35), inset 0 1px rgba(255,255,255,.65);
  }
  .title{font-size:22px; font-weight:700}
  .subtitle{color:var(--muted); font-size:14px; margin-bottom:18px}
  
  .field{display:flex; flex-direction:column; gap:8px; margin:14px 0}
  label{font-size:14px; color:#374151}
  .input{
    background:var(--input); color:var(--text); border:1px solid #e5e7eb;
    border-radius:12px; padding:12px 14px; outline:none; transition:.2s ease;
  }
  .input:focus{ box-shadow: var(--ring); border-color: rgba(239,68,68,.55) }
  .input[aria-invalid="true"]{ border-color: var(--error) }
  
  .btn{
    width:100%; padding:12px 16px; border:none; border-radius:12px; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--primary-600)); color:white; font-weight:700;
    transition: transform .06s ease, filter .2s ease;
  }
  .btn:active{ transform: translateY(1px) }
  .btn[disabled]{opacity:.6; cursor:not-allowed}
  
  .links{display:flex; justify-content:space-between; gap:8px; margin-top:14px}
  .link{color:var(--primary-600); text-decoration:none; font-size:14px}
  .link:hover{text-decoration:underline}
  
  .alert{
    display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; font-size:14px; margin-bottom:12px;
    background:#fff; border:1px solid #fde2e2;
  }
  .alert.success{border-color: rgba(5,150,105,.35); background: #ecfdf5}
  .alert.error{border-color: rgba(220,38,38,.35); background:#fef2f2}
  .alert .dot{width:10px; height:10px; border-radius:50%}
  .alert.success .dot{background:var(--success)}
  .alert.error .dot{background:var(--error)}
  .footer-note{color:var(--muted); font-size:12px; margin-top:18px; text-align:center}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  
  .inline{
    display:flex; align-items:center; gap:8px;
  }
  .help{font-size:12px; color:var(--muted)}
  .strength{height:6px; border-radius:999px; background:#eee; overflow:hidden}
  .strength > i{display:block; height:100%; width:0; background:var(--primary); transition:width .25s}