/* Login / recovery pages — design quoted from the Dawri café site: paper background, ink pills, perforated ticket card, Cairo + IBM Plex Sans Arabic */
:root{--ink:#16201B;--ink-2:#38423B;--mint:#9BE7D3;--mint-d:#1F8F7E;--paper:#EEF3F0;--card:#fff;--line:#D9E1DC;--muted:#5F6B64;--coral:#FF5A4E;--coral-d:#B6291F;--coral-bg:#FFE4E1;--ok-bg:#E3F5EC;--ok:#146B49;--fd:'Cairo','Segoe UI',Tahoma,sans-serif;--fb:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.7;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
h1{font-family:var(--fd);line-height:1.25;margin:0}p{margin:0}a{color:var(--mint-d)}
button,input{font:inherit;color:inherit}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:8px}
.nav{background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:900;font-size:24px;color:var(--ink);text-decoration:none}
.brand img{width:36px;height:36px}.grow{flex:1}
.nav .help{font-size:14px;color:var(--muted);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
main{flex:1;display:flex;flex-direction:column;align-items:center;padding:44px 20px 30px}
.chip{display:inline-block;background:var(--ink);color:var(--mint);font-family:var(--fd);font-weight:800;font-size:14px;padding:3px 16px;border-radius:99px}
.title{font-size:36px;font-weight:900;margin:12px 0 22px;text-align:center}
.card{width:100%;max-width:440px;background:var(--card);border:2px solid var(--ink);border-radius:22px;box-shadow:7px 7px 0 var(--ink);overflow:hidden;position:relative}
.card .head{padding:24px 28px 16px}.card .head h2{font-family:var(--fd);font-size:26px;font-weight:900;margin:0}.card .head p{color:var(--muted);margin-top:4px;font-size:15px}
.perf{position:relative;height:0;border-top:2px dashed var(--ink);margin:0 18px}
.perf::before,.perf::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.perf::before{right:-31px;clip-path:inset(0 0 0 50%)}.perf::after{left:-31px;clip-path:inset(0 50% 0 0)}
.card form,.card .box{padding:22px 28px 26px}
.field{display:grid;gap:6px;margin-bottom:16px}.field>label{font-weight:600;font-size:15px}
.in{width:100%;min-height:50px;padding:8px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:17px;direction:ltr;text-align:right;transition:border-color .15s}
.in:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px var(--mint)}
.pw{position:relative}.pw .in{padding-left:50px}.pw button{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:50%}
.pw button:hover{background:var(--paper);color:var(--ink)}
.hint{font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:10px 30px;border-radius:99px;border:2px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;font-size:18px;cursor:pointer;text-decoration:none;width:100%;transition:background .15s,transform .05s}
.btn:hover{background:var(--ink-2)}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.mint{background:var(--mint);color:var(--ink)}.btn.mint:hover{background:#82dcc6}
.alt{text-align:center;margin-top:16px;font-size:15px;color:var(--muted)}
.err{background:var(--coral-bg);color:var(--coral-d);border:1px solid #ffc3bd;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:15px}
.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #b5e3cb;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:15px;line-height:1.7}
.steps{display:flex;gap:10px;margin:0 0 16px;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.big-ic{width:72px;height:72px;border-radius:50%;background:var(--mint);color:var(--ink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border:2px solid var(--ink)}
.foot{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:18px 20px 26px;color:var(--muted);font-size:14px;text-align:center}
.foot svg{vertical-align:-3px}
@media(max-width:520px){main{padding-top:26px}.title{font-size:28px;margin-bottom:16px}.card{box-shadow:5px 5px 0 var(--ink)}.card .head{padding:18px 20px 12px}.card form,.card .box{padding:18px 20px 22px}.nav .help{display:none}}
/* color layer for login / forgot / reset */
body{background:radial-gradient(480px 320px at 10% 8%,rgba(37,99,235,.16),transparent 70%),radial-gradient(520px 340px at 92% 20%,rgba(124,58,237,.14),transparent 70%),radial-gradient(520px 360px at 80% 95%,rgba(245,158,11,.14),transparent 70%),radial-gradient(480px 340px at 6% 90%,rgba(22,163,74,.14),transparent 70%),#eef6f5}
.chip{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}
.btn{background:linear-gradient(135deg,#0ea5a4,#2563eb);border-color:transparent;box-shadow:0 12px 26px rgba(37,99,235,.32)}
.btn:hover{background:linear-gradient(135deg,#0b9493,#1d4fd0)}
.btn.mint{background:linear-gradient(135deg,#16a34a,#0ea5a4);color:#fff}
a{color:#2563eb}