:root{--bg:#f4f7f9;--card:#fff;--ink:#10243a;--mut:#5b6f82;--line:#d3dde5;--ac:#5e84ed;--acf:#fff;--gold:#b8862f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1722;--card:#14263a;--ink:#e6eef4;--mut:#93a7b8;--line:#25394a;--ac:#86a3f3;--acf:#081a33;--gold:#d9a94e}}
:root[data-theme="dark"]{--bg:#0b1722;--card:#14263a;--ink:#e6eef4;--mut:#93a7b8;--line:#25394a;--ac:#86a3f3;--acf:#081a33;--gold:#d9a94e}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:400 16px/1.45 "IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif}
#app{position:relative;overflow:hidden;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
header{padding:6px 14px 0}.top{display:flex;align-items:center;gap:6px;height:46px}
#bk{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--card));color:var(--ac);cursor:pointer;border-radius:50%;transition:opacity .2s,transform .15s,background .2s}#bk svg{width:21px;height:21px;display:block}#bk:hover{background:color-mix(in srgb,var(--ac) 22%,var(--card))}#bk:active{transform:scale(.92)}#bk:disabled{opacity:.4;cursor:default}#bk:disabled:hover{background:color-mix(in srgb,var(--ac) 12%,var(--card))}[dir=rtl] #bk{transform:scaleX(-1)}
.brand{flex:1;font-weight:600}
#lang{border:0;background:none;padding:4px;cursor:pointer;border-radius:12px;display:grid;place-items:center;transition:background .2s,transform .15s}#lang:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}#lang:active{transform:scale(.92)}#lang img{width:28px;height:28px;display:block}
#segs{display:flex;gap:5px;margin-top:2px}#segs b{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}#segs i{display:block;height:100%;width:0;background:var(--ac);transition:width .55s cubic-bezier(.2,.8,.2,1)}
#main{flex:1;overflow-y:auto;overflow-x:hidden;padding:28px 18px 16px}#pane{max-width:440px;margin:0 auto}
.stg{color:var(--ac);font-weight:600;font-size:13px;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}
h1{font-size:26px;line-height:1.2;margin:0;font-weight:600}.qh{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px}.num{flex:none;width:40px;height:40px;border-radius:12px;background:var(--ac);color:var(--acf);display:grid;place-items:center;font-weight:600;font-size:18px}
.out{animation:out .2s ease-in forwards}.in{animation:inn .45s cubic-bezier(.2,.8,.2,1) both}.in>*{animation:dk .5s calc(.1s + var(--n,0)*.07s) both}
@keyframes out{to{opacity:0;transform:translateX(calc(var(--s,1)*-40px))}}@keyframes inn{from{opacity:0;transform:translateX(calc(var(--s,1)*52px))}}@keyframes dk{from{opacity:0;transform:translateY(16px)}}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}label{font-size:14px;font-weight:500;color:var(--mut)}
input,select,textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:0 14px;min-height:54px;width:100%}
textarea{padding:12px 14px;min-height:130px;resize:none}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pair.ph{grid-template-columns:1fr 1.5fr}.pair.am{grid-template-columns:1.6fr 1fr}.pair.cur{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.bad input,.bad select,.bad textarea,.bad .up{border-color:#c0392b}.em{color:#c0392b;font-size:13px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:start;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,transform .15s}
.opt:active{transform:scale(.98)}.opt b{display:block;font-size:18px;font-weight:600}.opt span{color:var(--mut);font-size:14px}
.opt i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);transition:.2s}.opt.on{border-color:var(--ac)}.opt.on i{border-color:var(--ac);background:radial-gradient(var(--ac) 45%,transparent 50%)}
.ic{position:relative}.ic>svg{position:absolute;inset-inline-start:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--ac);opacity:.75;pointer-events:none;transition:opacity .2s}.ic:focus-within>svg{opacity:1}
.ic input,.ic select,.ic textarea{padding-inline-start:44px}.ic.ta>svg{top:17px;transform:none}
.ic.pw input{padding-inline-end:54px}.ic.pw>button.eye{position:absolute;inset-inline-end:6px;top:50%;width:42px;height:42px;margin-top:-21px;border:0;border-radius:10px;background:none;color:var(--mut);display:grid;place-items:center;padding:0;cursor:pointer;transition:background .2s,color .2s}.ic.pw>button.eye:hover,.ic.pw>button.eye:focus-visible{background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac);outline:0}.ic.pw>button.eye svg{width:22px;height:22px;display:block;pointer-events:none}
.ic select{appearance:none;-webkit-appearance:none;padding-inline-end:38px;text-overflow:ellipsis}.ic.sel::after{content:"";position:absolute;inset-inline-end:12px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--ac);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.pair.ph{grid-template-columns:1.1fr 1.4fr}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.duo .opt{aspect-ratio:1/1;justify-content:center;flex-direction:column;align-items:center;text-align:center;padding:12px;margin:0;gap:10px;position:relative}.duo .opt b{font-size:17px}.duo .opt span{font-size:12px;line-height:1.3;display:block}.ico{width:60px;height:60px;border-radius:20px;background:var(--bg);color:var(--ac);display:grid;place-items:center;transition:.25s}.ico svg{width:34px;height:34px}.duo .opt.on .ico{background:var(--ac);color:var(--acf)}.duo .opt.on::after{content:"✓";position:absolute;top:10px;inset-inline-end:10px;width:22px;height:22px;border-radius:50%;background:var(--ac);color:var(--acf);font-size:13px;display:grid;place-items:center}
.up{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;border:1.5px dashed var(--line);border-radius:12px;padding:0 14px;background:var(--card);color:var(--ink);cursor:pointer;font-size:16px;font-weight:400}.up input{display:none}.up em{color:var(--ac);font-style:normal;font-weight:600;font-size:20px}.up.has{border-style:solid;border-color:var(--ac)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);font-weight:400}.chk input{width:22px;min-height:22px;margin-top:2px;flex:none}
.rec h3{margin:20px 0 4px;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:var(--ac)}.rec h3:first-child{margin-top:0}
.rec button{display:flex;justify-content:space-between;gap:14px;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0;font:inherit;color:var(--ink);text-align:start;cursor:pointer}.rec span{color:var(--mut);font-size:14px}.rec b{font-weight:500;text-align:end;overflow-wrap:anywhere}
#bar{padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--card)}
#cta{display:block;width:100%;max-width:440px;margin:0 auto;min-height:54px;border:0;border-radius:27px;background:var(--ac);color:var(--acf);font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s}#cta:active{transform:scale(.98)}
.g{min-height:50px;border-radius:25px;border:1.5px solid var(--line);background:none;color:var(--mut);font:inherit;font-weight:500;cursor:pointer;padding:0 20px}
#ok{display:none;position:absolute;inset:0;z-index:5;background:var(--bg);overflow-y:auto;padding:32px 22px 24px;text-align:center}#ok.on{display:block}#ok>*{margin-inline:auto;max-width:420px}
.chk svg{width:104px;height:104px;display:block;margin:8px auto 14px}.chk circle{fill:var(--ac)}.chk path{fill:none;stroke:var(--acf);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#ok h2{margin:0 0 6px;font-size:26px}#ok .sub{color:var(--mut);margin:0 auto 18px}
.ref{display:flex;justify-content:center;gap:10px;align-items:center;border:1.5px dashed var(--gold);border-radius:8px;padding:8px 14px;margin-bottom:18px}.ref span{color:var(--mut);font-size:14px}.ref b{letter-spacing:1px}
.sum{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin-bottom:22px}.rw{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.rw:last-child{border:0}.rw span{color:var(--mut)}.rw b{font-weight:500}
#ok h3{text-align:start;font-size:16px;margin-bottom:10px}#ok ol{list-style:none;padding:0;margin-bottom:26px;text-align:start}#ok li{position:relative;padding-inline-start:30px;padding-bottom:16px}
#ok li::before{content:"";position:absolute;inset-inline-start:0;top:5px;width:12px;height:12px;border-radius:50%;background:var(--gold)}#ok li::after{content:"";position:absolute;inset-inline-start:5px;top:19px;bottom:2px;width:2px;background:var(--line)}#ok li:last-child::after{display:none}
#ok li b{display:block}#ok li span{color:var(--mut);font-size:14px}
.pri{display:block;width:100%;min-height:50px;border:0;border-radius:25px;background:var(--ac);color:var(--acf);font:inherit;font-weight:600;cursor:pointer;margin-bottom:10px}#ok .g{width:100%}
.anim>*{animation:dk .5s calc(.35s + var(--n)*.1s) both}.anim .chk{animation:none}.anim .chk circle{animation:pop .55s cubic-bezier(.2,.9,.3,1.3) both;transform-box:fill-box;transform-origin:center}.anim .chk path{animation:draw .5s .45s ease-out both}
@keyframes pop{from{transform:scale(0)}}@keyframes draw{from{stroke-dashoffset:1}}

#cta,.pri{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 66px;border-radius:14px;font-weight:400;font-size:17px;letter-spacing:.2px}
#cta::before,.pri::before{content:"";position:absolute;inset-inline-end:6px;top:6px;bottom:6px;aspect-ratio:1;border-radius:10px;background:#fff}
#cta::after,.pri::after{content:"";position:absolute;inset-inline-end:6px;top:6px;bottom:6px;aspect-ratio:1;background:var(--ac);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E") center/22px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E") center/22px no-repeat;transition:transform .25s}
#cta:hover::after,.pri:hover::after{transform:translate(2px,-2px)}[dir=rtl] #cta::after,[dir=rtl] .pri::after{transform:scaleX(-1)}[dir=rtl] #cta:hover::after,[dir=rtl] .pri:hover::after{transform:scaleX(-1) translate(2px,-2px)}
.g{border-radius:14px}
.up{display:block}.up .r{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px}.up .r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up .bar{display:none;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:0 0 12px}.up.go .bar,.up.done .bar{display:block}
.up .bar i{display:block;height:100%;width:0;background:var(--ac);border-radius:3px;transition:width .12s linear,background .35s}.up.done .bar i{background:#22a45d}
.up em.pc{font-size:14px;font-weight:600}.up em.ok{width:26px;height:26px;border-radius:50%;background:#22a45d;display:grid;place-items:center;animation:pop .35s cubic-bezier(.2,.9,.3,1.4)}.up.done{border-color:#22a45d}
.acc{background:var(--card);border:1.5px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color .25s}.acc.on{border-color:var(--ac)}
.rec .ah{display:flex;align-items:center;gap:10px;padding:16px;border:0;font-weight:600}.rec .ah span{flex:1;color:var(--ink);font-size:17px}
.ah em{font-style:normal;font-size:13px;font-weight:600;min-width:24px;height:24px;border-radius:12px;background:var(--bg);color:var(--ac);display:grid;place-items:center;padding:0 7px}
.ah::after{content:"";width:18px;height:18px;flex:none;background:var(--ac);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}.acc.on .ah::after{transform:rotate(180deg)}
.ab{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}.acc.on .ab{grid-template-rows:1fr}.ab>div{overflow:hidden;min-height:0;padding:0 16px}.acc.on .ab>div{padding-bottom:6px}.ab button:last-child{border-bottom:0}
.sb{font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;min-height:54px;width:100%;text-align:start;padding-block:0;padding-inline:44px 38px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb.ph{color:var(--mut)}.sb:focus-visible{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}.bad .sb{border-color:#c0392b}
#sh{position:absolute;inset:0;z-index:20;display:none}#sh.show{display:block}.bd{position:absolute;inset:0;background:rgba(8,20,35,.5);opacity:0;transition:opacity .3s}
.pn{position:absolute;inset-inline:0;bottom:0;max-height:78%;display:flex;flex-direction:column;background:var(--card);border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 -8px 30px rgba(0,0,0,.18)}.pn::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
#sh.open .bd{opacity:1}#sh.open .pn{transform:none}
.hd{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 8px}.hd b{font-size:18px}.hd .x{width:36px;height:36px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.pn input[type=search]{margin:4px 20px 8px;width:calc(100% - 40px)}.ls{overflow-y:auto;padding:4px 12px 16px}
.it{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:17px;text-align:start;padding:14px 10px;border-radius:12px;cursor:pointer}.it:hover,.it:active{background:var(--bg)}.it.on{color:var(--ac);font-weight:600}
.pn{background:var(--bg)}.pn input[type=search]{background:var(--card);border:0;border-radius:12px;min-height:44px;font-size:16px}.ls{padding:0 16px 20px}
.lh{position:sticky;top:0;z-index:1;background:var(--bg);padding:12px 6px 6px;font-size:13px;font-weight:600;color:var(--mut)}
.grp{background:var(--card);border-radius:14px;overflow:hidden;margin-bottom:6px}.grp .it{border-radius:0;gap:12px;min-height:56px;padding:8px 14px}.it+.it{border-top:1px solid var(--line)}
.bg{flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--ac);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:600}
.tt{flex:1;overflow:hidden;text-overflow:ellipsis}.tr{font-style:normal;color:var(--mut);font-size:15px}.it img.fl{flex:none;width:26px;height:20px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px var(--line)}
.ck{flex:none;width:20px;height:20px;background:var(--ac);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transition:opacity .2s}
.it.on{color:var(--ink);background:color-mix(in srgb,var(--ac) 9%,var(--card))}.it.on .ck{opacity:1}.it:hover,.it:active{background:var(--bg)}.it.on:hover{background:color-mix(in srgb,var(--ac) 9%,var(--card))}
.cal{padding:2px 0 6px}.ch{display:flex;align-items:center;gap:6px;margin:4px 0 10px}.ch .sp{flex:1}
.cn{width:40px;height:40px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:24px;line-height:1;padding:0 0 3px;cursor:pointer}.cn:disabled{opacity:.3}[dir=rtl] .cn{transform:scaleX(-1)}
.cp{border:0;background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:16px;border-radius:12px;padding:9px 14px;cursor:pointer;text-transform:capitalize}.cp.on{background:color-mix(in srgb,var(--ac) 14%,var(--card));color:var(--ac)}
.gr{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--card);border-radius:14px;padding:10px}.gr.m{grid-template-columns:repeat(3,1fr)}.gr.y{grid-template-columns:repeat(4,1fr)}
.wd{text-align:center;font-size:12px;font-weight:600;color:var(--mut);padding:4px 0}
.dy{aspect-ratio:1;border:0;border-radius:50%;background:none;color:var(--ink);font:inherit;font-size:16px;cursor:pointer;display:grid;place-items:center;padding:0}.gr.m .dy,.gr.y .dy{aspect-ratio:auto;border-radius:12px;min-height:46px}
.dy:hover{background:var(--bg)}.dy.td{box-shadow:inset 0 0 0 1.5px var(--ac)}.dy.on,.dy.on:hover{background:var(--ac);color:var(--acf);font-weight:600}.dy:disabled{opacity:.25;cursor:default}.dy:disabled:hover{background:none}
@media(max-width:400px){.pair,.pair.ph,.pair.am,.pair.cur{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}