/* Paart Security 0.1.30 — approved Paart Gallery desktop/mobile design */
:root{--paart-yellow:#ffce00;--paart-gold:#f5b900;--paart-dark:#111;--paart-white:#fff;--paart-border:#f6cd00}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:auto}
body{margin:0;min-height:100vh;color:var(--paart-dark);background:#fff url('desktop-surround.webp') center top / cover no-repeat;font-family:Tahoma,"Segoe UI",Arial,sans-serif;text-align:center;direction:rtl}
body:before{content:"";position:fixed;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(circle at 50% 5%,#fff 0,#fff8 66%,#fff 90%)}
.site-shell{padding:10px 20px 40px;max-width:1320px;margin:0 auto;position:relative}
.paart-brand{margin:0 auto 12px;display:flex;justify-content:center;align-items:center;gap:14px;line-height:1.17}
.paart-brand:before,.paart-brand:after{content:"";height:3px;width:106px;border-radius:2px;background:var(--paart-yellow);margin:0 26px}
.paart-brand-title{font-size:34px;letter-spacing:-1px;font-weight:900;white-space:nowrap}
.paart-brand-subtitle{display:block;font-size:12px;font-weight:800;color:#555;margin-top:4px}
.paart-brand-bag{width:62px;height:62px;flex:none}
.paart-brand-bag svg{width:100%;height:100%;display:block}
.panel{max-width:976px;margin:0 auto;background:rgba(255,255,255,.985);border:1px solid #ededed;border-radius:40px;box-shadow:0 18px 46px rgba(0,0,0,.13);padding:5px 52px 24px}
.hero{height:326px;display:flex;justify-content:center;align-items:center;margin:0 auto 2px;overflow:hidden}
.hero picture{display:block;width:510px;max-width:100%;line-height:0}
.hero img{display:block;width:100%;height:auto;max-height:326px;object-fit:contain;margin:auto}
.page-title{font-size:30px;line-height:1.8;font-weight:900;letter-spacing:-.7px;margin:0 auto 4px;max-width:920px}
.page-title mark{background:var(--paart-yellow);border-radius:23px;padding:0 .26em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;color:#000}
.instruction{position:relative;font-size:18px;line-height:2;margin:4px auto 12px;font-weight:600;color:#343434;max-width:720px}
.instruction-text{display:inline-block;max-width:630px;padding:0 4px}
.vpn-icon{width:58px;height:58px;vertical-align:middle;margin-right:10px;display:inline-block}
.vpn-icon svg{width:100%;height:100%}
.captcha-form{max-width:680px;margin:0 auto;display:flex;align-items:stretch;flex-direction:column;gap:13px}
.captcha-line{display:flex;align-items:center;justify-content:center;gap:15px;direction:ltr}
.captcha-art{display:block;width:420px;max-width:calc(100% - 85px);height:91px;border:2px solid #f7ce39;border-radius:16px;overflow:hidden;background:#fff;line-height:0}
.captcha-art svg{width:100%;height:100%;display:block}
.refresh-button{width:78px;height:70px;display:flex;align-items:center;justify-content:center;flex:none;background:linear-gradient(135deg,#fff55d,#ffc600);border:1px solid #e4bb00;border-radius:19px;box-shadow:0 3px 8px rgba(0,0,0,.14);text-decoration:none;color:#111}
.refresh-button svg{width:39px;height:39px}
.code-input{font:600 23px Tahoma,Arial,sans-serif;direction:ltr;unicode-bidi:plaintext;letter-spacing:7px;text-align:center;width:100%;height:66px;border:3px solid #ffcf00;background:#fff;border-radius:17px;padding:10px 50px;color:#151515;box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
.code-input:focus{outline:3px solid rgba(255,207,0,.28);outline-offset:2px}
.code-input::placeholder{letter-spacing:0;direction:rtl;opacity:1;color:#858585;font-size:19px;font-weight:400}
.input-wrap{position:relative;display:block}
.input-icon{pointer-events:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);width:30px;height:30px;color:#111}
.input-icon svg{width:100%;height:100%}
.submit-button{width:100%;height:70px;border:0;border-radius:23px;background:linear-gradient(180deg,#ffdf00,#f9b800);color:#080808;box-shadow:0 6px 12px rgba(111,92,0,.21),inset 0 -2px 0 rgba(0,0,0,.13);font:900 25px Tahoma,Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:15px}
.submit-button:hover{background:linear-gradient(180deg,#ffe844,#ffca13)}
.submit-button:focus-visible,.refresh-button:focus-visible{outline:3px solid #222;outline-offset:3px}
.submit-icon{width:38px;height:38px}
.warn{background:#fff1ed;border:1px solid #ffa28a;color:#913620;padding:10px;border-radius:12px;font-size:14px;margin:0 auto 10px;max-width:680px;line-height:1.8}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);margin:24px auto 0;padding-top:16px;border-top:1px solid #ddd;max-width:790px;direction:rtl}
.trust-item{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;min-width:0}
.trust-item:not(:last-child){border-left:1px solid #aaa}
.trust-icon{width:43px;height:43px;flex:none}
.trust-icon svg{height:100%;width:100%}
.trust-item span{font-weight:800;font-size:15px;line-height:1.65;text-align:center}
@media(max-width:750px){
 body{background:#fff;min-width:280px}
 body:before{inset:0;z-index:-1;background:radial-gradient(ellipse at -15% -5%,#ffda00 0,#fff1a8 14%,transparent 39%),radial-gradient(ellipse at 110% 110%,#ffda00 0,#fff5cc 16%,transparent 40%)}
 .site-shell{padding:22px 12px 26px}
 .paart-brand{margin-bottom:21px;gap:8px}
 .paart-brand:before,.paart-brand:after{width:18px;margin:0 4px;height:2px}
 .paart-brand-bag{width:54px;height:54px}
 .paart-brand-title{font-size:clamp(24px,7vw,33px)}
 .paart-brand-subtitle{font-size:10px;line-height:1.6}
 .panel{padding:8px 15px 24px;border-radius:38px;box-shadow:0 14px 34px rgba(0,0,0,.14)}
 .hero{height:auto;margin:5px auto 12px}
 .hero picture{width:100%;max-width:440px}
 .hero img{max-height:none}
 .page-title{font-size:clamp(17px,4.95vw,25px);letter-spacing:-.4px;line-height:1.9;margin:0 auto 7px}
 .page-title mark{border-radius:12px;padding:0 .15em .03em}
 .instruction{font-size:clamp(12px,3.5vw,16px);line-height:1.85;margin:4px auto 16px}
 .instruction-text{max-width:calc(100% - 60px);padding:0}
 .vpn-icon{width:48px;height:48px;margin-right:6px}
 .captcha-form{gap:15px}
 .captcha-line{gap:11px}
 .captcha-art{height:clamp(67px,21vw,99px);border-radius:15px;max-width:calc(100% - 72px)}
 .refresh-button{width:63px;height:63px;border-radius:17px}
 .refresh-button svg{width:32px;height:32px}
 .code-input{height:62px;font-size:24px;border-width:3px;border-radius:15px}
 .code-input::placeholder{font-size:clamp(13px,4vw,17px)}
 .input-icon{right:12px;width:25px;height:25px}
 .submit-button{height:65px;border-radius:19px;font-size:clamp(20px,5.3vw,26px);gap:10px}
 .submit-icon{width:34px;height:34px}
 .trust-row{margin-top:22px;padding-top:19px}
 .trust-item{flex-direction:column;gap:7px;padding:0 4px}
 .trust-icon{width:40px;height:40px}
 .trust-item span{font-size:clamp(10px,2.95vw,14px);line-height:1.55}
}
@media(max-width:370px){.paart-brand:before,.paart-brand:after{display:none}.panel{padding:6px 11px 22px}.instruction-text{max-width:calc(100% - 50px)}.vpn-icon{width:41px;height:41px}.refresh-button{width:51px;height:55px;border-radius:14px}.captcha-art{max-width:calc(100% - 62px)}.captcha-line{gap:9px}.trust-icon{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Paart Security 0.1.31: viewport-fit layout; visual-only overrides.
   Older and accessibility-enhanced browsers can scroll when an input is focused. */
html{height:100%;height:100dvh;overflow-x:hidden}
body{min-height:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.site-shell{width:100%;flex:0 0 auto;padding:clamp(3px,.7dvh,10px) 18px}
.paart-brand{margin-bottom:clamp(3px,.6dvh,8px);gap:10px}
.paart-brand-bag{width:clamp(43px,6.4dvh,59px);height:clamp(43px,6.4dvh,59px)}
.paart-brand-title{font-size:clamp(25px,3.5dvh,34px)}
.paart-brand-subtitle{font-size:clamp(10px,1.3dvh,12px)}
.panel{padding:clamp(2px,.5dvh,7px) clamp(16px,3vw,52px) clamp(8px,1.35dvh,20px)}
.hero{height:clamp(110px,27dvh,291px);max-height:27dvh;margin:0 auto 0;overflow:hidden}
.hero picture{height:100%;max-width:100%;width:510px;display:flex;justify-content:center;align-items:center}
.hero img{height:100%;width:100%;object-fit:contain;max-height:none}
.page-title{font-size:clamp(21px,3dvh,30px);line-height:1.5;margin:1px auto 0}
.instruction{font-size:clamp(13px,1.75dvh,18px);line-height:1.6;margin:0 auto clamp(3px,.85dvh,9px)}
.vpn-icon{width:clamp(35px,5.5dvh,54px);height:clamp(35px,5.5dvh,54px);margin-right:clamp(4px,.7dvh,8px)}
.captcha-form{gap:clamp(5px,.85dvh,11px)}
.captcha-art{height:clamp(52px,9dvh,81px)}
.refresh-button{height:clamp(47px,8dvh,68px);width:clamp(50px,8dvh,75px)}
.refresh-button svg{width:clamp(27px,4dvh,38px);height:clamp(27px,4dvh,38px)}
.code-input{height:clamp(48px,7.8dvh,62px);font-size:clamp(19px,2.6dvh,23px)}
.submit-button{height:clamp(49px,8.5dvh,67px);font-size:clamp(20px,2.7dvh,25px)}
.trust-row{margin-top:clamp(6px,1.65dvh,18px);padding-top:clamp(6px,1.2dvh,13px)}
.trust-icon{width:clamp(31px,4.6dvh,43px);height:clamp(31px,4.6dvh,43px)}
.trust-item span{font-size:clamp(12px,1.65dvh,15px);line-height:1.45}
@media(max-width:750px){
 .site-shell{padding:clamp(2px,.55dvh,7px) clamp(5px,2.2vw,11px)}
 .paart-brand{margin:0 auto clamp(4px,.85dvh,11px);gap:6px}
 .paart-brand:before,.paart-brand:after{width:clamp(8px,2.5vw,20px);margin:0 2px}
 .paart-brand-bag{width:clamp(35px,5.8dvh,50px);height:clamp(35px,5.8dvh,50px)}
 .paart-brand-title{font-size:clamp(19px,5.9vw,29px)}
 .paart-brand-subtitle{font-size:clamp(9px,1.18dvh,11px)}
 .panel{padding:clamp(2px,.5dvh,7px) clamp(9px,3.3vw,17px) clamp(8px,1.7dvh,19px);border-radius:clamp(22px,6vw,35px)}
 .hero{height:clamp(95px,23.5dvh,220px);max-height:23.5dvh;margin:0 auto clamp(2px,.6dvh,8px)}
 .hero picture{width:100%;max-width:440px}
 .hero img{height:100%;max-height:none;object-fit:contain}
 .page-title{font-size:clamp(16px,4.45vw,22px);line-height:1.5;margin:0 auto clamp(1px,.4dvh,5px)}
 .instruction{font-size:clamp(11px,3.25vw,14px);line-height:1.5;margin:0 auto clamp(5px,1.05dvh,11px)}
 .instruction-text{max-width:calc(100% - 44px)}
 .vpn-icon{width:clamp(32px,5.3dvh,43px);height:clamp(32px,5.3dvh,43px);margin-right:4px}
 .captcha-form{gap:clamp(5px,1dvh,10px)}
 .captcha-line{gap:8px}
 .captcha-art{height:clamp(49px,8.5dvh,74px);max-width:calc(100% - 59px)}
 .refresh-button{height:clamp(46px,7.7dvh,58px);width:clamp(43px,7.3dvh,57px);border-radius:14px}
 .refresh-button svg{width:28px;height:28px}
 .code-input{height:clamp(45px,7.8dvh,58px);border-width:2px;border-radius:13px;font-size:22px;padding-left:32px;padding-right:32px}
 .code-input::placeholder{font-size:clamp(12px,3.7vw,16px)}
 .input-icon{right:10px;width:22px;height:22px}
 .submit-button{height:clamp(47px,8.3dvh,60px);font-size:clamp(18px,4.9vw,24px);border-radius:16px}
 .submit-icon{height:29px;width:29px}
 .trust-row{margin-top:clamp(6px,1.35dvh,14px);padding-top:clamp(5px,.9dvh,10px)}
 .trust-item{gap:4px;padding:0 2px}
 .trust-icon{width:clamp(29px,4.5dvh,37px);height:clamp(29px,4.5dvh,37px)}
 .trust-item span{font-size:clamp(9.2px,2.55vw,12.5px);line-height:1.38}
}
/* The viewport-fitting script normally keeps everything visible. Accessibility and
   soft-keyboard input take priority over a hard no-scroll promise. */
html.paart-input-focused,html.paart-input-focused body{height:auto;min-height:100%;overflow-y:auto}
html.paart-input-focused body{display:block}
@media print{html,body{height:auto!important;overflow:visible!important}body{display:block!important}.site-shell{zoom:1!important}}

/* 0.1.32: Stable desktop focus and uncropped side artwork. */
body:before{display:none!important}
@media(min-width:751px){
 body{background-color:#fff;background-image:url('desktop-surround.webp');background-position:center center;background-repeat:no-repeat;background-size:100% 100%}
 /* Focus never changes display, scroll state, or positioning on desktop. */
 html.paart-input-focused,html.paart-input-focused body{height:100dvh!important;min-height:0;overflow:hidden!important}
 html.paart-input-focused body{display:flex!important;align-items:center!important;justify-content:center!important}
}
@media(max-width:750px){
 /* Allow keyboard access without switching to block layout or changing the initial card position. */
 html.paart-input-focused, html.paart-input-focused body{height:100dvh;min-height:100dvh;overflow-y:auto}
 html.paart-input-focused body{display:flex;align-items:center;justify-content:center}
}