:root{
  --bg: #0b0b0d;
  --card: #18181b;
  --card-border: #2a2a2f;
  --input-bg: #212126;
  --input-border: #34343b;
  --text: #ffffff;
  --muted: #8a8a92;
  --accent: #ff5a5a;
  --accent-glow: rgba(255,90,90,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family:'Cairo', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

.page{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  direction:ltr; /* يثبّت الفورم على الشمال واللوجو على اليمين زي الأصل */
}
.left, .right{ direction:rtl; }

/* ====== اللوحة اليسار (الفورم) ====== */
.left{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:var(--bg);
}

.card{
  width:100%;
  max-width:460px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:22px;
  padding:48px 44px;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}

.card-title{
  font-size:30px;
  font-weight:800;
  margin-bottom:34px;
  position:relative;
  display:inline-block;
}
.title-underline{
  display:block;
  width:56px;
  height:4px;
  background:var(--accent);
  border-radius:4px;
  margin-top:10px;
}

.field-label{
  display:block;
  font-size:15px;
  font-weight:600;
  margin-bottom:10px;
  color:#e8e8ec;
}

.input-wrap{
  position:relative;
  margin-bottom:24px;
}
.input-wrap input{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:12px;
  padding:15px 48px 15px 16px;
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input-wrap input::placeholder{ color:var(--muted); }
.input-wrap input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}

.input-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  display:flex;
  align-items:center;
}
.toggle-eye{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
}
.toggle-eye:hover{ color:#cfcfd6; }

.error-msg{
  color:var(--accent);
  font-size:14px;
  font-weight:600;
  min-height:20px;
  margin:-8px 0 14px;
  text-align:center;
  display:none;
}
.error-msg.show{ display:block; }

.btn{
  display:block;
  width:100%;
  text-align:center;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  border-radius:12px;
  padding:15px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .08s, filter .2s, background .2s;
  text-decoration:none;
}
.btn:active{ transform:scale(.99); }

.btn-primary{
  background:var(--accent);
  color:#fff;
  margin-bottom:16px;
  box-shadow:0 8px 24px var(--accent-glow);
}
.btn-primary:hover{ filter:brightness(1.05); }

.btn-secondary{
  background:transparent;
  color:#fff;
  border:1px solid var(--input-border);
  background:#1f1f24;
}
.btn-secondary:hover{ background:#26262c; }

.forgot-link{
  display:block;
  text-align:center;
  color:var(--accent);
  font-weight:600;
  font-size:14px;
  margin-top:22px;
  text-decoration:none;
}
.forgot-link:hover{ text-decoration:underline; }

/* ====== اللوحة اليمين (البراند) ====== */
.right{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 35%, rgba(150,30,30,.55), rgba(90,20,20,.15) 40%, transparent 65%),
    linear-gradient(135deg, #140d0f 0%, #0b0b0d 70%);
}
.right::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 60% 40%, #000 30%, transparent 75%);
}

.brand{
  position:relative;
  text-align:center;
  padding:24px;
}
.brand-logo{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.9), 0 20px 50px rgba(0,0,0,.5);
  margin-bottom:34px;
}
.brand-name{
  font-size:34px;
  font-weight:800;
  line-height:1.5;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

/* ====== موبايل ====== */
@media (max-width: 880px){
  .page{ grid-template-columns:1fr; }
  .right{ order:-1; min-height:260px; }
  .brand-logo{ width:110px; height:110px; margin-bottom:18px; }
  .brand-name{ font-size:24px; }
  .card{ padding:36px 26px; border-radius:18px; }
  .card-title{ font-size:26px; }
}