:root{
  --bg1:#3b82f6;      /* أزرق */
  --bg2:#c026d3;      /* بنفسجي/وردي */
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 20px 60px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
}

/* خلفية متدرجة وتوسيط */
.wrap{
  min-height:100svh;
  background: linear-gradient(135deg, var(--bg1), var(--bg2)) fixed;
  display:grid; place-items:center;
  padding:16px;
}

/* البطاقة البيضاء */
.card{
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.title{
  margin:0; text-align:center; font-size:32px; font-weight:700;
  padding:18px 20px 14px; border-bottom:1px solid var(--border);
}

.form{ padding:22px 24px 26px; }
.label{ display:block; margin:14px 0 6px; color:#374151; }

/* حقول بخط سفلي فقط */
.line-input{
  width:100%;
  border:0; outline:0;
  border-bottom:2px solid #c7cad1;
  padding:10px 4px 8px;
  background:transparent; color:var(--text);
  transition: border-color .2s ease;
}
.line-input:focus{ border-color:#2b6df6; }

/* زر إظهار/إخفاء كلمة المرور */
.pass-row{ position:relative }
.toggle{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-size:12px; color:#6b7280; border:0; background:transparent; cursor:pointer;
}

/* روابط/نصوص */
.muted{ color:var(--muted) }
.small{ font-size:13px }
.center{ text-align:center }
.link{ color:#2563eb; text-decoration:none }
.link:hover{ text-decoration:underline }

/* زر بيضاوي */
.btn-pill{
  width:100%; margin:18px 0 10px;
  height:48px; border-radius:999px;
  border:1px solid #111;          /* حافة سوداء خفيفة مثل الشكل */
  background:#ebebeb; color:#111; font-weight:700;
  cursor:pointer; transition:.15s;
}
.btn-pill:hover{ filter:brightness(1.03) }
.btn-pill:active{ transform:translateY(1px) }

/* تحسينات موبايل */
@media (max-width:420px){
  .title{ font-size:28px }
  .form{ padding:18px }
}
@media (max-width:360px){
  .title{ font-size:24px }
  .btn-pill{ height:44px; font-size:15px }
}

/* تحسين autofill للكروم */
input:-webkit-autofill{
  box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: var(--text) !important;
}