:root{
  --amber:#F59E0B; --amber-2:#D97706; --ink:#1C1917; --ink-2:#44403C;
  --paper:#FAFAF7; --line:#E7E2D9; --err:#DC2626; --ok:#16A34A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Tajawal',sans-serif;background:var(--paper);color:var(--ink);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
body::before{
  content:"";position:fixed;inset:0;opacity:.05;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 9px,
             var(--ink) 9px 11px,transparent 11px 22px);
  mask:linear-gradient(180deg,transparent 55%,#000);
  -webkit-mask:linear-gradient(180deg,transparent 55%,#000);
}
.card{
  width:100%;max-width:420px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:36px 32px;box-shadow:0 20px 50px -20px rgba(28,25,23,.18);
  position:relative;
}
.brand{text-align:center;margin-bottom:26px}
.brand .logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:26px}
.brand .logo .mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#fff;font-size:20px;
}
.brand p{color:var(--ink-2);font-size:14px;margin-top:6px}
label{display:block;font-size:14px;font-weight:700;margin:14px 0 6px}
input{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;font-size:15px;background:#FCFBF8;transition:border .15s,box-shadow .15s;
}
input:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.15)}
.pw-wrap{position:relative}
.pw-wrap input{padding-left:46px}
.eye{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;font-size:19px;padding:6px;
  line-height:1;opacity:.65;
}
.eye:hover{opacity:1}
.btn{
  width:100%;margin-top:22px;padding:14px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--amber),var(--amber-2));
  box-shadow:0 8px 20px -8px rgba(217,119,6,.6);transition:transform .12s;
}
.btn:active{transform:scale(.98)}
.err{
  background:#FEF2F2;border:1px solid #FECACA;color:var(--err);border-radius:12px;
  padding:11px 14px;font-size:14px;font-weight:500;margin-bottom:6px;
}
.ok{
  background:#F0FDF4;border:1px solid #BBF7D0;color:#15803D;border-radius:12px;
  padding:11px 14px;font-size:14px;font-weight:500;margin-bottom:6px;
}
.foot{text-align:center;margin-top:20px;font-size:14px;color:var(--ink-2)}
.foot a{color:var(--amber-2);font-weight:700;text-decoration:none}
.home{position:absolute;top:18px;left:18px;font-size:13px;color:var(--ink-2);text-decoration:none}
.home:hover{color:var(--amber-2)}