:root{--navy:#061d34;--navy2:#03172a;--gold:#df9514;--gold2:#efb44c;--cream:#fbf6ee;--ink:#071b32}
html,body{margin:0;min-height:100%;background:var(--cream)}
body.alf347-login{min-height:100vh;min-height:100dvh;background:var(--cream);color:var(--ink);font-family:Arial,"Helvetica Neue",sans-serif;overflow:hidden}
body.alf347-login *{box-sizing:border-box}

/* ===================== DESKTOP ===================== */
.alf347-shell{width:100vw;height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,72%) minmax(390px,28%);background:var(--cream);overflow:hidden}
.alf347-hero{min-width:0;height:100%;display:grid;grid-template-columns:minmax(345px,37%) minmax(540px,63%);background:var(--navy);overflow:hidden}
.alf347-brand{min-width:0;height:100%;padding:22px 34px 26px;background:radial-gradient(circle at 50% 0,#0b3152 0,#061d34 43%,#03172a 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;z-index:2}
.alf347-logo{display:block;width:min(235px,74%);height:auto;margin:0 auto 7px;border-radius:18px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
.alf347-orn{width:min(300px,100%);display:flex;align-items:center;gap:10px;color:#e7aa33;margin:7px auto 12px}.alf347-orn span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#d99b2a 30%,#d99b2a 70%,transparent)}.alf347-orn b{font-size:17px}
.alf347-ar{width:min(310px,100%);text-align:center;margin:0 auto}.alf347-ar h2{margin:0;color:#efb03a;font:700 34px/1.25 Georgia,"Times New Roman",serif}.alf347-ar p{margin:8px 0 0;color:#fff7e8;font-size:15px;line-height:1.75}
.alf347-de{width:min(310px,100%);margin:0 auto}.alf347-de h1{margin:0 0 14px;color:#fff;font:700 clamp(38px,3.3vw,61px)/.98 Georgia,"Times New Roman",serif}.alf347-de h1 strong{color:#efb03a}.alf347-de p{margin:0;color:#fff;font-size:15px;line-height:1.65}
.alf347-hours{width:min(310px,100%);margin-top:auto;border:1px solid #d6971f;border-radius:18px;padding:15px 18px;background:rgba(3,20,36,.5)}.alf347-hours h3{margin:0 0 11px;color:#f0aa2e;font-size:14px}.alf347-hours>div{display:flex;gap:12px;align-items:flex-start;margin:8px 0}.alf347-hours>div>b{color:#f0aa2e;font-size:22px;line-height:1}.alf347-hours span{display:grid;gap:2px}.alf347-hours strong{font-size:13px}.alf347-hours small{font-size:12px;color:#fff}

/* Middle artwork: NO CSS crop/clip. The target arch is a prebuilt image, so it cannot become a polygon or cut the mosque. */
.alf347-middle{min-width:0;height:100%;display:flex;align-items:center;justify-content:flex-start;background:linear-gradient(90deg,#061d34 0%,#0a2a49 6%,#efe3d5 17%,#fbf6ee 47%,#fbf6ee 100%);overflow:hidden;position:relative;padding:0 20px 0 0}
.alf347-desktop-arch{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin:0 auto 0 0;filter:drop-shadow(0 14px 26px rgba(25,18,11,.10))}
.alf347-mobile-mosque{display:none}

.alf347-access{min-width:0;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:24px 24px 24px 0;background:var(--cream)}
.alf347-card{width:min(100%,410px);padding:32px 28px 28px;border:1px solid #ead4ad;border-radius:24px;background:rgba(255,252,248,.98);box-shadow:0 18px 44px rgba(42,29,14,.11);text-align:center}
.alf347-user{width:54px;height:54px;margin:0 auto 10px;border:1px solid #ead5ae;border-radius:50%;display:grid;place-items:center;background:#fffaf2}.alf347-user svg{width:24px;height:24px;fill:none;stroke:#d88c13;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.alf347-card h1{margin:0;font:700 40px/1.05 Georgia,"Times New Roman",serif;color:#081d35}.alf347-card>p{margin:8px 0;color:#667586;font-size:14px}.alf347-title-rule{height:18px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;color:#d88c13}.alf347-title-rule span{width:28px;height:1px;background:#e6c991}.alf347-title-rule b{font-size:11px}
.alf347-form{text-align:left;display:grid;gap:15px}.alf347-form label{font-weight:700;font-size:12.5px;color:#071a2e;display:grid;gap:7px}.alf347-password{grid-template-columns:1fr auto;column-gap:8px}.alf347-password>.alf347-field{grid-column:1/-1}.alf347-password>a{color:#c87805;text-decoration:none;font-size:12px;font-weight:700;align-self:end}.alf347-field{height:52px;border:1px solid #d7dee7;border-radius:9px;background:#fff;display:flex;align-items:center;overflow:hidden}.alf347-field>svg:first-child{width:20px;height:20px;margin:0 12px;flex:0 0 auto;fill:none;stroke:#d68c17;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.alf347-field input{width:100%;height:100%;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0 8px 0 0;font:14px Arial,sans-serif;color:#182838}.alf347-field input::placeholder{color:#7e8b98;opacity:1}.alf347-eye{width:19px!important;height:19px!important;margin:0 12px 0 5px!important;fill:none!important;stroke:#466078!important;stroke-width:1.6!important}.alf347-remember{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important;font-weight:400!important;font-size:13px!important}.alf347-remember input{width:16px;height:16px;margin:0;accent-color:#d88c13}.alf347-submit{height:52px;border:0;border-radius:8px;background:linear-gradient(90deg,#e2a327,#d98200);color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(211,135,8,.24)}.alf347-submit span{font-size:24px;margin-left:14px;vertical-align:-1px}.alf347-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#53677b;font-size:12px}.alf347-divider:before,.alf347-divider:after{content:"";height:1px;flex:1;background:#d7dee6}.alf347-secure{height:66px;border:1.5px solid #dd9c2b;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:10px;color:#b96b00}.alf347-secure svg{width:22px;height:22px;fill:none;stroke:#e28d0a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.alf347-secure span{display:grid;text-align:left;gap:2px}.alf347-secure b{font-size:15px}.alf347-secure small{font-size:11px;color:#647486}body.alf347-login .error{margin:0;padding:10px 12px;border-radius:8px;background:#fff0f1;color:#a40c34;font-size:13px}

@media(max-width:1260px) and (min-width:761px){
 .alf347-shell{grid-template-columns:minmax(0,70%) minmax(350px,30%)}
 .alf347-hero{grid-template-columns:minmax(285px,37%) minmax(430px,63%)}
 .alf347-brand{padding:18px 22px 22px}.alf347-logo{width:min(185px,70%)}.alf347-ar h2{font-size:27px}.alf347-ar p,.alf347-de p{font-size:13px}.alf347-de h1{font-size:44px}.alf347-middle{padding-right:10px}.alf347-card{padding:26px 22px}
}

/* ===================== MOBILE ===================== */
@media(max-width:760px){
 body.alf347-login{overflow-y:auto;background:#fbf6ee}
 .alf347-shell{display:block;width:100%;height:auto;min-height:100dvh;overflow:visible;background:#fbf6ee}
 .alf347-hero{display:block;height:auto;background:#061d34;overflow:visible}
 .alf347-brand{height:auto;min-height:0;padding:16px 14px 8px;background:radial-gradient(circle at 50% 10%,#0b3152 0,#061d34 52%,#03172a 100%)}
 .alf347-logo{width:min(210px,55vw);max-width:210px;margin:0 auto;border-radius:0;filter:none}
 .alf347-orn,.alf347-ar,.alf347-de,.alf347-hours{display:none}
 .alf347-middle{display:block;height:auto;min-height:0;padding:0;background:#061d34;overflow:hidden;position:relative}
 .alf347-middle:before{content:"";position:absolute;z-index:2;left:-5%;right:-5%;top:-19px;height:36px;background:#061d34;border-bottom:4px solid #df9514;border-radius:0 0 50% 50%/0 0 100% 100%;pointer-events:none}
 .alf347-desktop-arch{display:none}
 /* full panoramic image, no fixed height and no cover: the mosque is never cut in half */
 .alf347-mobile-mosque{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center center;margin:0}
 .alf347-access{display:block;height:auto;min-height:0;padding:0 8px 24px;margin-top:-16px;background:#fbf6ee;position:relative;z-index:5}
 .alf347-card{width:100%;max-width:none;padding:30px 14px 16px;border-radius:28px 28px 18px 18px;box-shadow:0 13px 28px rgba(33,23,12,.13)}
 .alf347-user{width:54px;height:54px;margin:-52px auto 11px;background:#fffaf4}
 .alf347-card h1{font-size:32px}.alf347-card>p{font-size:11.5px;margin:4px 0 6px}.alf347-title-rule{height:15px;margin-bottom:8px}.alf347-form{gap:11px}.alf347-form label{font-size:11px;gap:5px}.alf347-password>a{font-size:10.6px}.alf347-field{height:48px;border-radius:8px}.alf347-field>svg:first-child{width:17px;height:17px;margin:0 10px}.alf347-field input{font-size:12.5px;padding-right:5px}.alf347-eye{width:16px!important;height:16px!important;margin-right:9px!important}.alf347-remember{font-size:11px!important;gap:7px!important}.alf347-remember input{width:14px;height:14px}.alf347-submit{height:48px;font-size:14px}.alf347-submit span{font-size:20px;margin-left:10px}.alf347-divider{margin:11px 0;font-size:10.5px}.alf347-secure{height:54px}.alf347-secure svg{width:18px;height:18px}.alf347-secure b{font-size:12.5px}.alf347-secure small{font-size:9px}
}
@media(max-width:390px){.alf347-logo{width:min(190px,54vw)}.alf347-card{padding-inline:11px}.alf347-card h1{font-size:29px}}