
body{margin:0;background:#06281C}
a{color:inherit}a:hover{color:#E8C877}
.page{position:relative;overflow:hidden;background:#06281C;color:#F6EFDD;font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.6}
.scene{position:absolute;inset:0}
.sc-base{background:radial-gradient(ellipse 70% 520px at 50% 0,rgba(47,163,116,.5),transparent 70%),radial-gradient(ellipse 90% 420px at 50% 100%,rgba(47,163,116,.28),transparent 70%),#06281C}
.weave{position:absolute;inset:0;width:100%;height:100%;opacity:.09;pointer-events:none}
.inner{position:relative;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.nav a{text-decoration:none;padding:13px 2px;border-bottom:1px solid transparent}
.nav a.cur{color:#E8C877;border-bottom-color:#E8C877}
.lang{background:transparent;border:1px solid rgba(232,200,119,.6);color:#F6EFDD;border-radius:999px;padding:8px 16px;min-height:44px;cursor:pointer;font-size:15px}
.lang.act{background:#E8C877;color:#1A1408;border-color:#E8C877}
.eyebrow{margin:0;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#E8C877}
h1{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(38px,4.6vw,64px);line-height:1.08;text-wrap:balance}
h2{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:30px;line-height:1.2}
h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:24px;line-height:1.25}
p{margin:0}
.lead{font-size:20px;line-height:1.55;color:#EFE6CF;max-width:720px;text-wrap:pretty}
.hero{display:flex;flex-direction:column;gap:16px;padding:44px 0 40px}
.panel{background:rgba(8,10,8,.5);border:1px solid rgba(232,200,119,.45);border-radius:18px;padding:30px;box-sizing:border-box}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:13px 26px;min-height:48px;box-sizing:border-box;font:500 16px 'DM Sans',system-ui,sans-serif;cursor:pointer;text-decoration:none}
.gold{background:#E8C877;color:#1A1408;border:1px solid #E8C877}.gold:hover{background:#F3DDA0;color:#1A1408}
.ghost{background:transparent;color:#F6EFDD;border:1px solid rgba(246,239,221,.6)}
.muted{color:#D6C8A6;font-size:15px}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;box-sizing:border-box;background:repeating-linear-gradient(135deg,rgba(232,200,119,.07) 0 12px,transparent 12px 24px),rgba(8,10,8,.55);border:1px dashed rgba(232,200,119,.6);border-radius:14px;color:#E9DDBF;font-size:14px}
.field{display:flex;flex-direction:column;gap:8px;font-size:15px;color:#E9DDBF}
.field input,.field textarea,.field select{background:rgba(255,255,255,.06);border:1px solid rgba(232,200,119,.5);border-radius:10px;padding:13px 14px;min-height:48px;box-sizing:border-box;color:#F6EFDD;font:400 17px 'DM Sans',system-ui,sans-serif;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field select option{color:#1A1408}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid #E8C877;outline-offset:2px}
.rtl,.rtl *{letter-spacing:0 !important;text-transform:none !important}
.ur{line-height:2.2}
.ur h1,.ur h2,.ur h3,.ur p,.ur a,.ur span,.ur label,.ur input,.ur textarea,.ur select,.ur li,.ur button:not(.lang){font-family:'Noto Nastaliq Urdu','Amiri',serif !important}
.ar h1,.ar h2,.ar h3,.ar p,.ar a,.ar span,.ar label,.ar input,.ar textarea,.ar select,.ar li,.ar button:not(.lang){font-family:'Noto Naskh Arabic','Amiri',serif !important}
.ur h1{line-height:1.9 !important;font-size:clamp(30px,3.6vw,50px) !important}
.ur h2,.ur h3{line-height:2 !important}
.ar h1{line-height:1.45 !important}
.rtl .ltr{font-family:'DM Sans',system-ui,sans-serif !important}

.wcard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 16px 22px;background:#F6EFDD;color:#0D3A2A;border:0;border-radius:22px;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .25s ease;font:400 17px 'DM Sans',system-ui,sans-serif}
.wcard:hover{transform:translateY(-4px)}
.wcard:focus-visible{outline:3px solid #E8C877;outline-offset:3px}
.wcard .pic{display:block;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden}
.wcard .word{font-family:'Amiri','Traditional Arabic',serif !important;font-size:64px;line-height:1.5;color:#0D3A2A}
.wcard .mean{font-size:26px;font-weight:700;line-height:1.3;color:#0D3A2A}
.wcard .vnote{font-size:14px;color:#44574E;line-height:1.5}
.wcard .tap{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#2C5A48;min-height:34px}
.wcard .word.w-en{font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:600;font-size:56px;line-height:1.7}
.wcard .word.w-ur{font-family:'Noto Nastaliq Urdu',serif !important;font-size:44px;line-height:2.2}
.wcard .mean.m-en{font-family:'DM Sans',system-ui,sans-serif !important}
.wcard .mean.m-ur{font-family:'Noto Nastaliq Urdu',serif !important;line-height:2}
.wcard .mean.m-ar{font-family:'Noto Naskh Arabic','Amiri',serif !important;font-size:30px}
@media(prefers-reduced-motion:reduce){.wcard{transition:none}}

.srow{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:10px 14px;min-height:58px;background:transparent;border:1px solid transparent;border-radius:12px;color:#F6EFDD;cursor:pointer;text-align:start;font:400 17px 'DM Sans',system-ui,sans-serif}
.srow:hover{background:rgba(255,255,255,.06)}
.srow.sel{background:rgba(232,200,119,.14);border-color:rgba(232,200,119,.7)}
.srow .num{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(232,200,119,.6);color:#E8C877;font-size:14px}
.srow .sub{font-size:13px;color:#D6C8A6}
.rnd{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:transparent;border:1px solid rgba(246,239,221,.6);color:#F6EFDD;cursor:pointer}
.rnd.big{width:76px;height:76px;background:#E8C877;border-color:#E8C877;color:#1A1408}

[hidden]{display:none !important}
main{display:block;min-height:55vh}
.hdr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:24px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brandtxt{display:flex;flex-direction:column;gap:5px}
.brand .b1{font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:600;font-size:23px;letter-spacing:.14em !important;line-height:1}
.brand .b2{font:500 9px 'DM Sans',system-ui,sans-serif !important;letter-spacing:.5em !important;line-height:1}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.langs{display:flex;gap:8px}
.lshort{display:none}
.ftr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;margin-top:64px;padding:14px 0 30px;border-top:1px solid rgba(232,200,119,.3);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#E9DDBF}
.flinks{display:flex;flex-wrap:wrap;gap:0 26px}
.flinks a{text-decoration:none;padding:12px 0}
.flinks a.cur,.mnav a.cur{color:#E8C877}
.tabbar{display:none}
.formmsg{min-height:1.6em;margin:0;font-size:15px}
.formmsg.ok{color:#9FE0B8}.formmsg.bad{color:#FFB4A2}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.empty{padding:28px 20px;border:1px dashed rgba(232,200,119,.5);border-radius:14px;color:#E9DDBF;text-align:center}
.thumb{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:14px;overflow:hidden;background:#0a0a0a;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#E8C877;color:#1A1408}
.vframe{width:100%;aspect-ratio:9/16;border:0;border-radius:14px;display:block}
.pfig{margin:0;display:flex;flex-direction:column;gap:6px}
.pfig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.pfig figcaption{font-size:13px;color:#D6C8A6}
.btn[disabled],.rnd[disabled]{opacity:.45;cursor:not-allowed}
.acct{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.acct .field{flex:1 1 180px}
.wcard.done{box-shadow:0 0 0 3px #E8C877,0 18px 40px rgba(0,0,0,.35)}
.chip.locked{opacity:.6}
@media(max-width:820px){

.inner{padding:0 18px}
.lang.sm{padding:6px 11px;font-size:13px;min-height:40px}
h1{font-size:34px}
.ur h1{font-size:28px !important}
h2{font-size:25px}
.hero{padding:22px 0 24px;gap:12px}
.lead{font-size:17px}
.panel{padding:20px;border-radius:16px}
.pgrid,.vgrid{grid-template-columns:1fr 1fr !important;gap:12px !important}
img.jarimg{height:330px !important}
.wgrid{grid-template-columns:1fr 1fr !important;gap:12px !important}
.wcard{padding:10px 10px 14px;border-radius:16px;gap:6px}
.wcard .word{font-size:40px}
.wcard .word.w-en{font-size:34px}
.wcard .word.w-ur{font-size:30px}
.wcard .mean{font-size:18px}
.wcard .tap{font-size:12px;gap:5px}
.wcard .vnote{font-size:11px}
.qplayer{order:-1;padding:26px 18px !important}
.tabbar{position:sticky;bottom:0;margin:0 -18px;display:flex;background:#05241A;border-top:1px solid rgba(232,200,119,.45);z-index:5}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px 11px;min-height:58px;box-sizing:border-box;background:none;border:0;color:#E9DDBF;font:500 11px 'DM Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.tab.cur{color:#E8C877}
.mnav{position:absolute;bottom:100%;left:0;right:0;display:flex;flex-direction:column;background:#05241A;border-top:1px solid rgba(232,200,119,.45);padding:6px 18px 10px;box-shadow:0 -18px 40px rgba(0,0,0,.45)}
.mnav a{padding:13px 0;text-decoration:none;border-bottom:1px solid rgba(232,200,119,.15);font-size:16px}

.hdr{padding:14px 0 8px;flex-wrap:nowrap}
.nav{display:none}
.brand svg{width:36px;height:36px}
.brand .b1{font-size:18px}.brand .b2{font-size:8px}
.langs{gap:5px}
.lang{padding:6px 11px;font-size:13px;min-height:40px}
.lfull{display:none}.lshort{display:inline}
.ftr{flex-direction:column;align-items:flex-start;gap:4px;margin-top:40px;padding:14px 0 18px;font-size:12px}
.flinks{display:none}
}
