:root{--bg:#F1ECE4;--card:#fff;--line:#E8DFD2;--line-2:#DACFBF;--ink:#1E1B18;--muted:#7D7266;--soft:#A79B8C;--accent:#B4573A;--accent-soft:#F4E3DA;--err:#C2412D;--ok:#5E6B4E}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Cairo',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px 16px;
  background-image:radial-gradient(60rem 40rem at 110% -10%,rgba(180,87,58,.10),transparent 60%),radial-gradient(50rem 36rem at -10% 110%,rgba(94,107,78,.10),transparent 60%)}
button,input{font:inherit;color:inherit}
.box{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 28px 28px;box-shadow:0 24px 60px -24px rgba(60,40,20,.28),0 2px 6px rgba(60,40,20,.05);animation:in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.logo{display:block;width:150px;height:auto;margin:0 auto 18px}
h1{margin:0;font-size:20px;font-weight:800;text-align:center;line-height:1.5}
.sub{margin:2px 0 24px;text-align:center;color:var(--muted);font-size:13.5px}
label{display:block;font-size:13px;font-weight:700;color:#4A4239;margin:0 0 6px}
.field{margin-bottom:14px}
.input{width:100%;border:1px solid var(--line-2);background:#FFFDF9;border-radius:12px;padding:11px 14px;font-size:17px;letter-spacing:.06em;direction:ltr;text-align:center;outline:none;transition:border-color .18s,box-shadow .18s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(180,87,58,.18);background:#fff}
.input.invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(194,65,45,.14);animation:shake .35s}
@keyframes shake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
.btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:800;background:var(--ink);color:#F7F2EA;cursor:pointer;transition:background .18s,opacity .18s}
.btn:hover{background:#2E2925}
.btn:disabled{opacity:.6;cursor:wait}
.link{display:block;margin:16px auto 0;background:none;border:0;color:var(--accent);font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:none;text-align:center}
.link:hover{text-decoration:underline}
.msg{margin:14px 0 0;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.7;text-align:center;display:none}
.msg.show{display:block}
.msg.err{background:#FBEAE6;color:#8E2F20}
.msg.ok{background:#EEF1E8;color:#3F4A33}
.foot{margin-top:22px;text-align:center;color:var(--soft);font-size:12px}