/* Aynoor tester website. Same calm, light look as the app. No pure white anywhere. */
@font-face{font-family:"Vazirmatn";font-weight:400;font-display:swap;src:url(app/fonts/vazirmatn-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Vazirmatn";font-weight:400;font-display:swap;src:url(app/fonts/vazirmatn-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Vazirmatn";font-weight:500;font-display:swap;src:url(app/fonts/vazirmatn-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Vazirmatn";font-weight:500;font-display:swap;src:url(app/fonts/vazirmatn-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Vazirmatn";font-weight:700;font-display:swap;src:url(app/fonts/vazirmatn-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Vazirmatn";font-weight:700;font-display:swap;src:url(app/fonts/vazirmatn-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
:root{color-scheme:light;--page:#F8F4EF;--card:#F2EDE7;--cream:#FCF9F5;--line:#E6DFD7;--blush:#FFCFDB;--sky:#D7ECFF;--mist:#D3E5E9;--rose:#D79CAA;--lav:#BBB2CE;--dusty:#CB9DA2;--ink:#3B3346;--muted:#655C70;--mark:#4A3F5C;--green:#3AAF3A}
*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;background:var(--page);color:var(--ink);font-family:"Vazirmatn",Tahoma,system-ui,sans-serif;font-size:17px;line-height:1.7}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 140px;padding-top:env(safe-area-inset-top,0px)}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;flex-wrap:wrap}
.brand{font-weight:700;font-size:24px;color:var(--ink);text-decoration:none}
.langsw{display:inline-flex;border:1.5px solid var(--lav);border-radius:60px;overflow:hidden;background:var(--cream)}
.langsw button{border:0;background:transparent;min-height:44px;padding:6px 14px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--blush)}
h1{font-size:28px;line-height:1.35;margin:8px 0 12px}h2{font-size:20px;margin:0 0 8px;line-height:1.4}
p{margin:0 0 10px}
.small{font-size:14px;color:var(--muted)}
.tag{display:inline-block;background:var(--cream);border:1.5px solid var(--dusty);border-radius:60px;padding:2px 12px;font-size:14px;font-weight:500}
.card{background:var(--card);border-radius:22px;padding:18px;margin:14px 0}
.hero{background:var(--blush);border-radius:22px;padding:22px 18px;margin:8px 0 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:60px;border:0;padding:12px 22px;font:inherit;font-weight:500;font-size:17px;color:var(--ink);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--blush)}
.hero .btn.primary{background:var(--cream);border:1.5px solid var(--mark)}
.btn.soft{background:var(--cream);border:1.5px solid var(--lav)}
.btn.block{width:100%}
.btn svg,.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .flip{transform:scaleX(-1)}
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s}
ol.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:8px 0}
ol.steps li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream);border:1.5px solid var(--lav);display:grid;place-items:center;font-weight:700;font-size:15px}
[lang="fa-AF"] ol.steps li::before,[lang="ps"] ol.steps li::before{content:counter(s,persian)}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blush);vertical-align:middle;margin-inline-end:8px}
ul.checks{list-style:none;margin:0;padding:0}
ul.checks li{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
ul.checks svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
footer{display:flex;flex-wrap:wrap;gap:6px 18px;padding:18px 0;border-top:1px solid var(--line);margin-top:24px}
footer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--dusty);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
#cbox{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1.5px solid var(--lav);padding:16px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));z-index:10;max-height:80vh;overflow:auto}
#cbox>*{max-width:560px;margin-left:auto;margin-right:auto}
#cbox .brow{display:flex;flex-wrap:wrap;gap:8px}
#cbox .brow .btn{flex:1 1 140px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.switch{width:56px;height:32px;border-radius:16px;border:1.5px solid var(--lav);background:var(--cream);position:relative;flex:none;cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:23px;height:23px;border-radius:50%;background:var(--mark);transition:inset-inline-start .15s}
.switch.on{background:var(--rose);border-color:var(--rose)}
.switch.on::after{inset-inline-start:27px;background:var(--cream)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
