/* Qari Sho authentication — aligned with the main site's teal / violet / gold identity */
:root{--auth-bg:#071c2a;--auth-panel:#102b3b;--auth-panel-2:#0b2332;--auth-ink:#f4f7ff;--auth-muted:#b5c8d5;--auth-line:#ffffff1c;--auth-teal:#42d6ce;--auth-gold:#f1cf78;--auth-violet:#9875ee;--auth-shadow:0 32px 100px #020b16a6}
[data-theme="light"]{--auth-bg:#eef4f8;--auth-panel:#fff;--auth-panel-2:#f7fbff;--auth-ink:#152d40;--auth-muted:#637b8b;--auth-line:#dbe6ee;--auth-shadow:0 32px 85px #183c551c}
[data-theme="dark"]{--auth-bg:#071c2a;--auth-panel:#102b3b;--auth-panel-2:#0b2332;--auth-ink:#f4f7ff;--auth-muted:#b5c8d5;--auth-line:#ffffff1c;--auth-shadow:0 32px 100px #020b16a6}
body{min-height:100svh;display:grid;place-items:center;padding:clamp(12px,3vw,36px);background:radial-gradient(ellipse at 7% 10%,#31cfc51f,transparent 32%),radial-gradient(ellipse at 91% 83%,#8458d923,transparent 33%),var(--auth-bg);color:var(--auth-ink);font-family:var(--f-body,Tahoma,"Segoe UI",sans-serif);transition:background .25s ease}
.layout{position:relative;isolation:isolate;width:min(1120px,100%);min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.88fr);overflow:hidden;border:1px solid var(--auth-line);border-radius:32px;background:var(--auth-panel);box-shadow:var(--auth-shadow)}
.layout:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(115deg,#42d6ce06,transparent 45%,#9875ee0b)}
.visual{position:relative;isolation:isolate;overflow:hidden;min-height:650px;padding:clamp(28px,4vw,54px);display:flex;flex-direction:column;justify-content:space-between;color:#f9fbff;background:radial-gradient(ellipse at 20% 24%,#42d6ce3d,transparent 34%),radial-gradient(ellipse at 84% 78%,#9875ee45,transparent 36%),linear-gradient(145deg,#0a2037 0%,#123f57 52%,#302454 100%)}
.visual:before{content:"";position:absolute;z-index:-1;width:470px;height:470px;border:1px solid #ffffff20;border-radius:50%;inset-inline-end:-190px;bottom:-160px;box-shadow:0 0 0 26px #ffffff05,0 0 0 54px #ffffff04,0 0 0 92px #ffffff03}
.visual:after{content:"";position:absolute;z-index:-1;width:260px;height:260px;inset-inline-start:-115px;top:23%;border-radius:50%;background:radial-gradient(circle,#f1cf7824,transparent 69%)}
.brand{display:inline-flex;align-items:center;gap:14px;font-size:27px;font-weight:950;color:#fff;letter-spacing:-.4px;text-decoration:none}
.logo{display:grid;place-items:center;width:58px;height:58px;border:1px solid #f1cf78a8;border-radius:20px;background:linear-gradient(145deg,#42d6ce2b,#9875ee35);box-shadow:0 10px 30px #030d1d55,inset 0 1px #ffffff30;backdrop-filter:blur(8px)}.logo svg{width:35px;height:35px;color:#f1cf78}
.auth-inline-001{display:block;margin-top:2px;color:#b8dce4;font-size:9px;font-weight:700;letter-spacing:2px;line-height:1.4}
.visual .pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:8px 13px;border:1px solid #ffffff2a;border-radius:99px;background:#ffffff0d;color:#e8ffff;font-size:12px;box-shadow:inset 0 1px #ffffff12;backdrop-filter:blur(8px)}
.visual h2{max-width:520px;margin:0 0 17px;font-size:clamp(31px,3.8vw,48px);line-height:1.55;font-weight:950;letter-spacing:-.8px;text-wrap:balance}.visual p{max-width:430px;color:#d0e6ed;font-size:15px;line-height:2.15}
.visual .auth-inline-002{position:relative;z-index:1;color:#bad2df;font-size:11px;letter-spacing:.25px}
/* Editorial calligraphy motif — CSS and typography only, no stock imagery */
.calligraphy-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;width:min(100%,380px);height:205px;margin:0 auto 12px;isolation:isolate;color:#f1cf78}
.calligraphy-art:before{content:"";position:absolute;z-index:-1;width:170px;height:170px;border:1px solid #42d6ce52;border-radius:50%;box-shadow:0 0 0 13px #42d6ce0a,0 0 0 28px #9875ee0a,0 0 65px #42d6ce15}
.calligraphy-orbit{position:absolute;width:235px;height:95px;border:1px solid #f1cf7838;border-radius:50%;transform:rotate(-25deg)}.orbit-two{width:255px;height:110px;border-color:#42d6ce4a;transform:rotate(34deg)}
.calligraphy-word{font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,5vw,68px);font-weight:700;letter-spacing:2px;text-shadow:0 5px 35px #f1cf7833}.calligraphy-caption{margin-top:7px;color:#c9e9e9;font-family:Georgia,"Times New Roman",serif;font-size:13px;letter-spacing:.6px}.calligraphy-line{width:65px;height:2px;margin-top:14px;border-radius:9px;background:linear-gradient(90deg,#42d6ce,#f1cf78,#9875ee)}
.password-meter{margin:12px 0 17px;padding:14px;border:1px solid var(--auth-line);border-radius:16px;background:linear-gradient(145deg,var(--auth-panel-2),color-mix(in srgb,var(--auth-panel-2) 86%,var(--auth-teal)));}
.meter-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--auth-ink)}.meter-heading span{color:var(--auth-muted);font-size:10px}
.meter-track{height:6px;margin:11px 0 12px;overflow:hidden;border-radius:20px;background:var(--auth-line)}.meter-track span{display:block;width:0;height:100%;border-radius:inherit;background:#e56d73;transition:width .22s ease,background .22s ease}.meter-track span[data-score="2"]{background:#e5aa52}.meter-track span[data-score="3"]{background:#d7c45b}.meter-track span[data-score="4"],.meter-track span[data-score="5"]{background:linear-gradient(90deg,#35c6a4,#42d6ce)}
.password-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;list-style:none;padding:0;margin:0}.password-rules li{display:flex;align-items:center;gap:7px;min-width:0;color:var(--auth-muted);font-size:10px;line-height:1.7}.rule-check{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border:1px solid var(--auth-line);border-radius:50%;color:transparent;font-size:11px;background:var(--auth-panel)}.password-rules li.passed{color:var(--auth-teal)}.password-rules li.passed .rule-check{border-color:#42d6ce77;background:#42d6ce1a;color:var(--auth-teal)}
@media(max-width:740px){.calligraphy-art{height:125px;width:220px;margin:7px auto 0}.calligraphy-art:before{width:100px;height:100px}.calligraphy-orbit{width:160px;height:62px}.orbit-two{width:180px;height:72px}.calligraphy-word{font-size:43px}.calligraphy-caption{font-size:10px}.calligraphy-line{margin-top:8px}.visual .auth-inline-002{margin-top:7px}.visual{gap:14px}.password-rules{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.password-meter{padding:11px}.password-rules{grid-template-columns:1fr}.meter-heading{align-items:flex-start;flex-direction:column;gap:2px}.calligraphy-art{height:105px}}

.content{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(25px,4.4vw,58px);background:var(--auth-panel)}
.toolbar{position:absolute;top:22px;inset-inline-end:24px;display:flex;align-items:center;gap:8px}.tool{min-height:39px;padding:7px 11px;border:1px solid var(--auth-line);border-radius:12px;background:var(--auth-panel-2);color:var(--auth-ink);font:inherit;font-size:12px;cursor:pointer;transition:border-color .2s,transform .2s}.tool:hover{border-color:var(--auth-teal);transform:translateY(-1px)}
.content h1{margin:52px 0 8px;color:var(--auth-ink);font-size:clamp(27px,3vw,36px);line-height:1.45;font-weight:950;letter-spacing:-.5px}.content>.muted{margin:0 0 22px;color:var(--auth-muted);font-size:13px;line-height:2}
.content form{display:block}.field{margin:17px 0}.field label{display:block;margin-bottom:7px;color:var(--auth-ink);font-size:12px;font-weight:850}.field input,.field select,.field textarea{display:block;width:100%;min-height:51px;padding:12px 15px;border:1px solid var(--auth-line);border-radius:14px;background:var(--auth-panel-2);color:var(--auth-ink);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.field input::placeholder{color:var(--auth-muted);opacity:.75}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--auth-teal);box-shadow:0 0 0 4px #42d6ce18;background:var(--auth-panel)}
.field input[type=password]{letter-spacing:.08em}.check{display:flex;align-items:flex-start;gap:10px;margin:18px 0;color:var(--auth-muted);font-size:12px;line-height:1.9}.check input{margin-top:7px;accent-color:var(--auth-teal)}
.btn{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin-top:22px;padding:12px 18px;border:1px solid #f1cf785c;border-radius:15px;background:linear-gradient(110deg,#0b8c91,#16b7b0 55%,#7760b7);color:#fff;font-weight:950;box-shadow:0 12px 26px #087e8b2b,inset 0 1px #ffffff3d;cursor:pointer;transition:transform .2s,filter .2s,box-shadow .2s}.btn:after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:14px;background:linear-gradient(100deg,#ffffff12,transparent 50%)}.btn:hover{transform:translateY(-2px);filter:saturate(1.12) brightness(1.05);box-shadow:0 16px 32px #087e8b3a}.btn:active{transform:translateY(0)}
.links{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:12px}.links a{color:var(--auth-muted);text-decoration:none;transition:color .2s}.links a:last-child{color:var(--auth-teal);font-weight:850}.links a:hover{color:var(--auth-gold);text-decoration:none}
.security{display:flex;align-items:center;gap:9px;margin-top:28px;padding-top:17px;border-top:1px solid var(--auth-line);color:var(--auth-muted);font-size:10px;line-height:1.8}.security svg{flex:0 0 20px;width:20px;color:var(--auth-teal)}
.err{padding:12px 14px;margin:0 0 16px;border:1px solid #ed77775c;border-radius:13px;background:#e94e4e12;color:#e46e73;font-size:12px;line-height:1.9}
@media(min-width:741px){.layout:after{content:"";position:absolute;top:0;bottom:0;left:calc(53.2% - 1px);width:1px;background:linear-gradient(transparent,var(--auth-line) 15%,var(--auth-line) 85%,transparent);pointer-events:none}}
@media(max-width:740px){body{padding:12px}.layout{width:min(100%,520px);min-height:0;grid-template-columns:1fr;border-radius:25px}.visual{min-height:0;padding:22px 24px 24px}.visual h2{max-width:430px;margin:15px 0 7px;font-size:clamp(22px,6vw,30px);line-height:1.55}.visual p{margin:0;font-size:12px;line-height:1.9}.visual .pill{margin-bottom:12px}.visual .auth-inline-002{margin-top:18px}.visual .book-art{width:95px;height:80px;inset-inline-end:18px;bottom:20px;opacity:.32}.brand{font-size:21px}.logo{width:46px;height:46px;border-radius:15px}.logo svg{width:29px}.content{padding:24px}.content h1{margin-top:42px;font-size:27px}.content>.muted{margin-bottom:16px}.field{margin:14px 0}.field input{min-height:48px}.toolbar{top:14px;inset-inline-end:15px}}
@media(max-width:380px){.content{padding:19px}.links{flex-direction:column;align-items:flex-start}.visual{padding:19px}.visual p{max-width:300px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Typography parity with the public Qari Sho site */
body{font-family:'Baloo Bhaijaan 2','Cairo',sans-serif!important;font-weight:500;letter-spacing:0}
html:lang(ar) body{font-family:'Cairo','Baloo Bhaijaan 2',sans-serif!important}
html:lang(en) body{font-family:'Poppins','Baloo Bhaijaan 2',sans-serif!important}
input,button,select,textarea{font-family:inherit!important}
/* Stable registration composition from compact phones to wide desktops */
.layout{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);width:min(1080px,100%);min-height:0;align-items:stretch}
.visual,.content{min-width:0}
.content{padding:clamp(22px,4vw,48px)}
.content h1{font-size:clamp(27px,3vw,38px);line-height:1.45;overflow-wrap:anywhere}
.field input{min-width:0;max-width:100%}
.password-meter{min-width:0;overflow:hidden}
.password-rules{padding-inline-start:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.password-rules li{min-width:0;overflow-wrap:anywhere}
@media(max-width:820px){.layout{grid-template-columns:minmax(0,1fr);width:min(590px,100%);border-radius:24px}.visual{min-height:0;padding:22px 24px 12px;gap:14px}.visual>div:nth-child(2){max-width:100%}.visual h2{font-size:clamp(20px,5vw,27px);line-height:1.6}.calligraphy-art{min-height:95px;max-height:115px;margin:0}.calligraphy-word{font-size:47px}.calligraphy-caption{font-size:10px}.content{padding:23px 24px 28px}.layout:before{opacity:.6}}
@media(max-width:480px){body{padding:10px!important}.layout{border-radius:19px}.visual{padding:17px 17px 8px}.visual .brand{font-size:19px}.visual h2{margin:8px 0;font-size:21px}.visual p{font-size:12px;line-height:1.9}.visual .pill{font-size:10px}.content{padding:18px 16px 22px}.content h1{font-size:26px}.password-rules{grid-template-columns:minmax(0,1fr);gap:5px}.password-rules li{font-size:11px}.toolbar{gap:6px}.toolbar .tool{min-height:37px}}
@media(max-width:360px){body{padding:7px!important}.content{padding:15px 12px 18px}.visual{padding:14px 13px 6px}.visual h2{font-size:19px}.content h1{font-size:23px}.field input{padding-inline:10px}.check{align-items:flex-start}}