@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
:root{
  --navy:#3A3550; --accent:#B79A6A; --accent-soft:#D6BF94;
  --bg:#FCFBF8; --surface:#FFFFFF; --ink:#2B2A3F; --muted:#6B6A80; --line:#EEE7DA;
  --danger:#B3403A;
  --font:'Tajawal',Tahoma,'Segoe UI',sans-serif;
  background:var(--bg);
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);min-height:100vh;-webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto}
header{background:#fff;color:var(--navy);border-bottom:1px solid var(--line);padding:calc(18px + env(safe-area-inset-top,0px)) 18px 0}
.logo{height:56px;width:auto;display:block}
h1{font-weight:800;font-size:28px;line-height:1.25;margin:18px 0 6px}
input,select{width:100%;font:400 17px var(--font);padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.art{display:block;background:#fff;border-radius:16px;aspect-ratio:1;overflow:hidden;box-shadow:0 4px 14px rgba(40,40,90,.07)}
.art img{width:100%;height:100%;object-fit:cover;display:block}