:root{--hdr-bg:#0f7b4f;--hdr-fg:#fff;--info-bg:#fff;--info-fg:#14261d;--info-head:#0a5c3a;--info-align:start;--info-size:18px;--btn-bg:#0f7b4f;--btn-fg:#fff;--btn-radius:16px;--btn-size:21px;--profile1-size:92px;--profile1-bc:#fff;--profile1-bw:4px;--profile2-size:92px;--profile2-bc:#fff;--profile2-bw:4px;--p2-size:18px;--g:#0f7b4f;--g2:#0a5c3a;--mint:#e8f5ee;--ink:#14261d;--mut:#5b6f64;--line:#d5e6dc}
*{box-sizing:border-box}
body{margin:0;background:#f7fbf8;color:var(--ink);font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Jameel Noori Nastaleeq",Tahoma,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.9;font-size:18px;word-spacing:normal;letter-spacing:normal}
.top{display:flex;align-items:center;gap:14px;background:var(--hdr-bg);color:var(--hdr-fg);padding:18px 18px 34px;border-radius:0 0 28px 28px;box-shadow:0 8px 22px rgba(15,123,79,.25)}
.logo{width:56px;height:56px;border-radius:50%;background:#fff;flex:none}
.brand{min-width:0}.top h1{margin:0;font-size:26px;line-height:1.3;overflow-wrap:anywhere}
.top p{margin:0;font-size:15px;opacity:.92}
main{max-width:520px;margin:-18px auto 0;padding:0 16px 24px}
.notice{background:#fff8e1;border:1px solid #f1dc9a;border-radius:14px;padding:10px 14px;font-size:15px;margin:0 0 14px;text-align:center}
.people{display:flex;justify-content:center;gap:22px;margin:6px 0 -6px;position:relative;z-index:1}
.people{align-items:center}.people img{border-radius:50%;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.14);background:var(--mint);max-width:42vw;max-height:42vw}.people .p1{width:var(--profile1-size);height:var(--profile1-size);border:var(--profile1-bw) solid var(--profile1-bc)}.people .p2{width:var(--profile2-size);height:var(--profile2-size);border:var(--profile2-bw) solid var(--profile2-bc)}
.card{background:#fff;border-radius:22px;padding:20px;margin-top:16px;box-shadow:0 6px 24px rgba(20,38,29,.08);border:1px solid var(--line)}
.info{padding-top:26px;min-height:200px;background:var(--info-bg);color:var(--info-fg);text-align:var(--info-align);font-size:clamp(18px,var(--info-size),22px);line-height:1.85;overflow-wrap:break-word}
.p2card{background:var(--p2-bg);color:var(--p2-fg);text-align:var(--p2-align);font-size:clamp(18px,var(--p2-size),22px);line-height:1.85}
.p2card h2{margin:0 0 8px;font-size:clamp(24px,6vw,28px);line-height:1.6;color:var(--p2-head)}
.p2card p{margin:0 0 8px;overflow-wrap:break-word}
.p2people{margin-bottom:4px}
.p2img{width:var(--p2img-size);height:var(--p2img-size);border-radius:50%;object-fit:cover;border:var(--p2img-bw) solid var(--p2img-bc);box-shadow:0 6px 16px rgba(0,0,0,.14);background:var(--mint);max-width:42vw;max-height:42vw}
.p2name{text-align:center;font-weight:700;margin:2px 0 0;font-size:clamp(15px,4vw,18px);line-height:1.7;color:var(--info-head)}
.p2list{margin:4px 0 0;display:grid;gap:10px;font-size:clamp(15px,4vw,18px);line-height:1.7}
.p2list>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:8px;flex-wrap:wrap}
.p2list>div:last-child{border-bottom:0;padding-bottom:0}
.p2list dt{margin:0;color:var(--mut);flex:1 1 auto;min-width:40%}
.p2list dd{margin:0;font-weight:700;text-align:end;flex:1 1 auto;min-width:40%}
.p2notice{background:#fff8e1;border:1px solid #f1dc9a;font-size:clamp(15px,4vw,17px);line-height:1.7}

.info h2{margin:0 0 8px;font-size:clamp(24px,6vw,28px);line-height:1.6;color:var(--info-head)}
.info p{margin:0 0 8px}
label{display:block;font-weight:700;margin-bottom:8px}
[hidden]{display:none!important}.notice,.hint,.status,label,footer{overflow-wrap:anywhere}input{width:100%;font:inherit;font-size:20px;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:#fbfdfc;text-align:center;transition:border-color .2s,box-shadow .2s}
input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 4px rgba(15,123,79,.15)}
.hint{font-size:14px;color:var(--mut);margin:10px 0 16px;line-height:1.7}
.btn{width:100%;font:inherit;font-weight:700;font-size:var(--btn-size);color:var(--btn-fg);background:var(--btn-bg);border:0;border-radius:var(--btn-radius);padding:15px;cursor:pointer;box-shadow:0 6px 14px rgba(15,123,79,.3);transition:transform .15s,background .2s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;box-shadow:none;cursor:not-allowed}
.p2btn{background:var(--p2btn-bg);color:var(--p2btn-fg);border-radius:var(--p2btn-radius);font-size:var(--p2btn-size)}

/* ===== صفحہ 3 ===== */
.p3people{margin-bottom:4px}
.p3img{width:var(--p3img-size,140px);height:var(--p3img-size,140px);border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.14);background:var(--mint);max-width:55vw;max-height:55vw;display:block;margin:0 auto}
.p3contact,.p3audioCard{text-align:center}
.p3phoneLabel,.p3audioLabel{margin:0 0 8px;font-size:clamp(15px,4vw,18px);line-height:1.7;color:var(--mut);font-weight:700}
.p3phone{display:inline-block;font-size:clamp(20px,5.5vw,26px);font-weight:700;color:var(--g2);text-decoration:none;direction:ltr;unicode-bidi:isolate;padding:6px 10px;border-radius:12px;transition:background .2s}
.p3phone:active{background:var(--mint)}
.p3audio{width:100%;display:block;border-radius:12px}
a.btn.p3btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box;margin-top:4px}
@media (prefers-color-scheme:dark){.p3audio{color-scheme:light}}
.status{text-align:center;font-weight:600;color:var(--g2);margin:12px 0 0;min-height:1.9em}
.status.err{color:#b3261e}
.bar{height:8px;background:var(--mint);border-radius:8px;overflow:hidden;opacity:0;transition:opacity .3s}
.bar.on{opacity:1}
.bar span{display:block;height:100%;width:0;background:var(--g);border-radius:8px;transition:width 1s linear}
footer{text-align:center;color:var(--mut);font-size:13px;padding:8px 0 24px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
