@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../fonts/cairo-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../fonts/cairo-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(../fonts/cairo-arabic-800.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(../fonts/cairo-latin-400.woff2) format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(../fonts/cairo-latin-700.woff2) format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(../fonts/cairo-latin-800.woff2) format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC}
:root{--navy:#0A1F58;--navy-deep:#061233;--blue:#1E6FF0;--gold:#F6C453;--gold-deep:#9A6609;--ink:#14213D;--muted:#55627D;--line:#DDE5F2;--tint:#F3F7FD;--white:#fff;--radius:16px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:Cairo,system-ui,sans-serif;font-size:17px;line-height:1.7;color:var(--ink);background:var(--white)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
a{color:var(--blue)}
.icon{flex:none}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.wrap--narrow{width:min(800px,100% - 40px)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--navy);color:var(--white);padding:8px 16px;border-radius:8px;z-index:100}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:8px 28px;border-radius:12px;font-weight:800;font-size:18px;text-decoration:none;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 4px 0 var(--gold-deep)}
.btn--ghost{border:2px solid rgba(255,255,255,.7);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--block{display:flex;width:100%}
.topbar{position:sticky;top:0;z-index:50;background:var(--white);border-block-end:1px solid var(--line)}
.topbar__row{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{height:48px;width:auto;max-width:120px;object-fit:contain;flex:none}
.brand__mark{font-size:28px;font-weight:800;line-height:1}
.brand__name{white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap}
.nav a:hover{color:var(--blue)}
.nav__langs{display:flex;align-items:center;gap:8px;padding-inline-start:18px;border-inline-start:1px solid var(--line);color:var(--muted)}
.nav__langs a{font-weight:400;padding:4px 2px}
.nav__langs a.is-current{font-weight:800;color:var(--blue)}
.nav-toggle{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:10px;color:var(--navy);cursor:pointer}
.hero{background:var(--navy);background-image:radial-gradient(700px 420px at 75% 40%,#174AB5 0,transparent 70%);color:var(--white)}
[dir=rtl] .hero{background-image:radial-gradient(700px 420px at 25% 40%,#174AB5 0,transparent 70%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:32px;padding-block-start:56px}
.hero__copy{padding-block-end:60px}
.hero__slogan{font-weight:700;color:#BFD3F7;font-size:17px;letter-spacing:.5px;text-align:start}
[dir=rtl] .hero__slogan,[dir=rtl] .hero__name{text-align:right}
.hero__name{font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1.15;margin-block:4px 8px}
.hero__name span{color:var(--gold)}
.hero__eyebrow{color:var(--gold);font-weight:800;font-size:24px}
.hero__title{font-size:clamp(20px,2.3vw,26px);font-weight:700;line-height:1.55;margin-block-start:8px}
.hero__lead{color:#D5E1F8;margin-block-start:10px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:26px}
.hero__mascot{justify-self:center;display:block}
[dir=ltr] .hero__mascot{transform:scaleX(-1)}
.section{padding-block:72px}
.section--tint{background:var(--tint)}
.section__title{font-size:clamp(26px,3.4vw,36px);font-weight:800;color:var(--navy);text-align:center;line-height:1.3}
.section__lead{text-align:center;color:var(--muted);margin-block-start:6px}
.grid{display:grid;gap:20px;margin-block-start:36px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.world{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .18s ease,box-shadow .18s ease}
.world:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(10,31,88,.1)}
.world__icon{display:flex;width:60px;height:60px;align-items:center;justify-content:center;border-radius:14px;color:var(--white);margin-block-end:14px}
.world--computer-basics .world__icon{background:#1E7BFF}
.world--word .world__icon{background:#5B4FE0}
.world--excel .world__icon{background:#0B9A6D}
.world--powerpoint .world__icon{background:#E2591B}
.world h3{font-size:20px;font-weight:800;color:var(--navy);line-height:1.35}
.world p{color:var(--muted);font-size:16px;margin-block-start:6px}
[dir=rtl] .world h3{text-align:right}
.feature{display:flex;gap:14px;background:var(--white);border-radius:var(--radius);padding:22px}
.feature__icon{display:flex;width:48px;height:48px;flex:none;align-items:center;justify-content:center;border-radius:12px;background:#E5EEFE;color:var(--blue)}
.feature h3{font-size:18px;font-weight:800;color:var(--navy);line-height:1.4}
.feature p{color:var(--muted);font-size:16px;margin-block-start:2px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-block-start:36px}
.step{text-align:center;padding:12px}
.step__no{display:flex;width:56px;height:56px;margin:0 auto 12px;align-items:center;justify-content:center;border-radius:50%;background:var(--navy);color:var(--gold);font-size:24px;font-weight:800}
.step h3{font-size:20px;font-weight:800;color:var(--navy)}
.step p{color:var(--muted);font-size:16px}
.plans{align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.plan h3{font-size:21px;font-weight:800;color:var(--navy);line-height:1.35}
.plan__price{font-size:24px;font-weight:800;color:var(--blue);margin-block:6px 14px;line-height:1.4}
.plan__price small{display:block;font-size:14px;font-weight:400;color:var(--muted)}
.plan__pending{font-size:16px;font-weight:700;color:var(--muted)}
.plan__features{display:grid;gap:8px;flex:1;margin-block-end:18px}
.plan__features li{display:flex;gap:8px;font-size:16px;line-height:1.45}
.plan__features .icon{color:#0B9A6D;margin-block-start:3px}
.plan__soon{text-align:center;font-weight:700;color:var(--muted);font-size:15px;padding:12px;background:var(--tint);border-radius:10px}
.plan--featured{background:var(--navy);border-color:var(--gold);border-width:2px;color:var(--white)}
.plan--featured h3{color:var(--gold)}
.plan--featured .plan__features .icon{color:var(--gold)}
.plan--featured .plan__price,.plan--featured .plan__pending{color:var(--white)}
.plan--featured .plan__soon{background:rgba(255,255,255,.12);color:var(--white)}
.plan__ribbon{align-self:flex-start;background:var(--gold);color:var(--navy-deep);font-weight:800;font-size:14px;padding:2px 12px;border-radius:99px;margin-block-end:8px}
.faq{border-block-end:1px solid var(--line);padding-block:14px}
.faq:first-of-type{margin-block-start:28px}
.faq summary{cursor:pointer;font-weight:800;color:var(--navy);font-size:18px}
.faq p{color:var(--muted);margin-block-start:8px}
.footer{background:var(--navy-deep);color:#C9D6EF;padding-block:48px 24px;font-size:16px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.footer__brand{color:var(--white);font-weight:800;font-size:20px}
[dir=rtl] .footer__brand,[dir=rtl] .footer__motto{text-align:right}
.footer__motto{color:var(--gold);font-weight:700;margin-block-start:6px}
.footer__head{color:var(--white);font-weight:800}
.footer__links a{color:#C9D6EF;text-decoration:none;display:inline-block;padding-block:3px}
.footer__links a:hover{color:var(--white)}
.footer__legal{border-block-start:1px solid #24345E;margin-block-start:28px;padding-block-start:16px;font-size:14px}
.error-page{text-align:center}
.error-page__code{font-size:64px;font-weight:800;color:var(--blue);line-height:1}
.error-page h1{color:var(--navy);font-size:30px}
.error-page .btn{margin-block-start:18px}
.error-page__detail{text-align:left;white-space:pre-wrap;background:var(--tint);padding:12px;border-radius:8px;font-size:14px}
.world{display:block;text-decoration:none;color:inherit}
.world h2{font-size:20px;font-weight:800;color:var(--navy);line-height:1.35;margin:0}
[dir=rtl] .world h2,[dir=rtl] .world-head h1,[dir=rtl] .lesson-row__text strong{text-align:right}
.section--compact{padding-block:40px 64px}
.btn--small{min-height:44px;padding:4px 22px;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.btn--line{border:2px solid var(--line);color:var(--navy)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
button.btn{border:0;cursor:pointer;font-family:inherit}
.world-head{color:var(--white);background:var(--navy);padding-block:36px}
.world-head--computer-basics{background:#0F52BD}.world-head--word{background:#4238B8}.world-head--excel{background:#087A56}.world-head--powerpoint{background:#B9440F}
.world-head__row{display:flex;gap:20px;align-items:flex-start}
.world-head__icon{display:flex;width:76px;height:76px;flex:none;align-items:center;justify-content:center;border-radius:18px;background:rgba(255,255,255,.18)}
.world-head h1{margin:0;font-size:clamp(26px,3.6vw,36px);font-weight:800;line-height:1.3}
.world-head__text{flex:1;min-width:0}
.world-head__progress{font-size:15px;margin-block-start:4px}
.crumb{color:var(--white);font-size:15px}
.progress{height:10px;margin-block-start:12px;background:rgba(255,255,255,.28);border-radius:5px;overflow:hidden;max-width:420px}
.progress__bar{display:block;height:100%;background:var(--gold);border-radius:5px;width:0}
.progress__bar--0{width:0%}.progress__bar--5{width:5%}.progress__bar--10{width:10%}.progress__bar--15{width:15%}.progress__bar--20{width:20%}.progress__bar--25{width:25%}.progress__bar--30{width:30%}.progress__bar--35{width:35%}.progress__bar--40{width:40%}.progress__bar--45{width:45%}.progress__bar--50{width:50%}.progress__bar--55{width:55%}.progress__bar--60{width:60%}.progress__bar--65{width:65%}.progress__bar--70{width:70%}.progress__bar--75{width:75%}.progress__bar--80{width:80%}.progress__bar--85{width:85%}.progress__bar--90{width:90%}.progress__bar--95{width:95%}.progress__bar--100{width:100%}
.notice{background:var(--tint);border-radius:12px;padding:12px 16px;font-size:16px;color:var(--ink)}
.level{margin-block-start:32px}
.level__title{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--navy);line-height:1.35}
.level__no{display:flex;width:36px;height:36px;flex:none;align-items:center;justify-content:center;border-radius:50%;background:var(--navy);color:var(--gold);font-size:17px}
.lesson-list{display:grid;gap:10px;margin-block-start:14px}
.lesson-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);transition:transform .15s ease,border-color .15s ease}
a.lesson-row:hover{transform:translateY(-2px);border-color:var(--blue)}
.lesson-row__icon{display:flex;width:42px;height:42px;flex:none;align-items:center;justify-content:center;border-radius:50%;background:#E5EEFE;color:var(--blue)}
.lesson-row__text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.lesson-row__text strong{font-size:17px;color:var(--navy);font-weight:800}
.lesson-row__text small{font-size:14.5px;color:var(--muted)}
.lesson-row__state{flex:none;font-size:14.5px;font-weight:700;color:var(--blue)}
.lesson-row--completed .lesson-row__icon{background:#DDF5EC;color:#087A56}.lesson-row--completed .lesson-row__state{color:#087A56}
.lesson-row--paid .lesson-row__icon{background:#FDF0CD;color:#8A5A05}.lesson-row--paid .lesson-row__state{color:#8A5A05}
.lesson-row--locked,.lesson-row--coming{background:var(--tint)}
.lesson-row--locked .lesson-row__icon,.lesson-row--coming .lesson-row__icon{background:#E4E9F2;color:var(--muted)}
.lesson-row--locked .lesson-row__state,.lesson-row--coming .lesson-row__state{color:var(--muted);font-weight:400}
.world-head--lesson p{margin-block-start:4px}
.block{margin-block-end:26px}
.block h2,.quiz h2,.paywall h2{font-size:22px;font-weight:800;color:var(--navy);line-height:1.4;margin-block-end:8px}
.block p+p{margin-block-start:12px}
.block--objectives{background:var(--tint);border-radius:var(--radius);padding:20px 22px}
.block--objectives ul{display:grid;gap:6px}
.block--objectives li{display:flex;gap:8px}
.block--objectives .icon{color:#087A56;margin-block-start:5px}
.block--example{background:#FFF8E5;border-radius:var(--radius);padding:20px 22px}
.block--image{margin-inline:0;text-align:center}
.block--image img{display:block;width:100%;max-width:640px;margin-inline:auto}
.block--image figcaption{color:var(--muted);font-size:15px;margin-block-start:8px}
.quiz{border-block-start:2px solid var(--line);padding-block-start:28px;margin-block-start:36px}
.quiz__hint{color:var(--muted);margin-block-end:18px}
.question{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-block-end:16px}
.question fieldset{border:0;margin:0;padding:0;min-width:0}
.question legend{display:flex;gap:10px;font-weight:800;color:var(--navy);padding:0;margin-block-end:12px;line-height:1.5}
.question__no{display:flex;width:30px;height:30px;flex:none;align-items:center;justify-content:center;border-radius:50%;background:#E5EEFE;color:var(--blue);font-size:15px}
.option{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px;border:1px solid var(--line);border-radius:10px;margin-block-end:8px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.option:hover{border-color:var(--blue)}
.option:has(input:checked){border-color:var(--blue);background:#EEF4FF}
.option input{width:18px;height:18px;flex:none;accent-color:var(--blue);margin:0}
.feedback,.result{margin-block-start:12px;border-radius:10px;padding:10px 14px;font-weight:700}
.feedback--ok,.result--ok{background:#DDF5EC;color:#065A40}
.feedback--bad,.result--bad{background:#FDE7E3;color:#8E2A12}
.result{font-size:19px;padding:18px}
.result__actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:14px}
.tag{display:inline-flex;align-items:center;gap:6px;background:#FDF0CD;color:#7A5004;font-weight:800;font-size:15px;padding:4px 14px;border-radius:99px;margin-block-end:20px}
.paywall{background:var(--tint);border-radius:var(--radius);padding:26px;text-align:center}
.paywall__plan{font-weight:800;color:var(--navy);margin-block:8px 16px}
.paywall .btn{margin:6px}
@media (max-width:640px){.lesson-row{flex-wrap:wrap}.lesson-row__state{width:100%;padding-inline-start:56px}.world-head__row{flex-direction:column}}
.section--promo{padding-block:0 8px}
.section--promo .game-promo{margin-block-end:40px}
.game-promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--navy);color:var(--white);border-radius:var(--radius);padding:22px 26px}
.game-promo h2{font-size:22px;font-weight:800;color:var(--gold);line-height:1.4;margin:0}
.game-promo--spaced{margin-block:18px 26px}
.question__hint{color:var(--muted);font-size:15px;margin-block-end:10px}
.dnd{margin-block-end:12px}
.dnd-pool{min-height:60px;padding:10px;background:var(--tint);border-radius:12px;display:flex;flex-wrap:wrap;gap:8px;margin-block-end:10px}
.dnd-chip{min-height:44px;padding:6px 14px;background:var(--white);color:var(--navy);border:2px solid var(--line);border-radius:10px;font:inherit;font-weight:700;font-size:15.5px;cursor:grab;touch-action:none;user-select:none}
.dnd-chip.is-selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,196,83,.4)}
.dnd-chip.is-dragging{opacity:.35}
.dnd-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dnd-zone-box{border:2px dashed #AFC0DD;border-radius:12px;padding:8px;min-height:92px}
.dnd-zone__target{display:block;width:100%;min-height:36px;background:none;border:0;font:inherit;font-weight:800;color:var(--navy);cursor:pointer;margin-block-end:4px}
.dnd-zone__items{display:flex;flex-wrap:wrap;gap:6px}
.match-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-block:8px;border-block-end:1px solid var(--line);font-weight:700}
.match-row select{min-height:44px;min-width:200px;max-width:100%;font:inherit;padding:4px 8px;border:1px solid #AFC0DD;border-radius:8px;background:var(--white)}
.order-list{display:grid;gap:8px;margin-block-end:12px}
.order-item{display:flex;align-items:center;gap:8px;min-height:50px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.order-item span{flex:1}
.order-item button{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--tint);color:var(--navy);font-size:18px;cursor:pointer}
.fill-input,.kb-input{width:100%;min-height:48px;font:inherit;padding:6px 12px;border:1px solid #AFC0DD;border-radius:10px;margin-block-end:12px}
.kb-target{font-weight:800;font-size:22px;background:var(--tint);padding:10px 14px;border-radius:10px;margin-block:8px;text-align:center;user-select:none}
.mouse-lab{display:grid;gap:12px;margin-block-end:12px}
.mouse-step{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:64px;padding:10px;border:1px solid var(--line);border-radius:12px}
.mouse-step__label{flex:1 1 180px;font-weight:700}
.mouse-step.is-done{background:#DDF5EC;border-color:#0B9A6D}
.mouse-btn{min-height:48px;padding:6px 18px;border:2px solid var(--blue);border-radius:10px;background:var(--white);color:var(--blue);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}
.mouse-drag-chip{cursor:grab;touch-action:none}
.mouse-drop{min-width:110px;min-height:56px;display:flex;align-items:center;justify-content:center;border:2px dashed #AFC0DD;border-radius:10px;color:var(--muted);font-weight:700}
.question.is-solved button:not(.dnd-chip){pointer-events:none}
.xp-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px!important;background:var(--navy);color:var(--white)!important;border-radius:99px;font-size:14.5px!important;white-space:nowrap}
.xp-chip:hover{color:var(--gold)!important}
.xp-chip__star{display:inline-flex;align-items:center;gap:3px;color:var(--gold)}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{background:var(--tint);border-radius:14px;padding:14px;text-align:center}
.stat strong{display:block;font-size:30px;font-weight:800;color:var(--navy);line-height:1.2}
.stat span{font-size:15px;color:var(--muted)}
.level-next{margin-block:16px 0;font-weight:700;color:var(--navy)}
.progress--light{background:#DDE5F2;max-width:none}
.progress-head{margin-block:28px 12px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.badge{padding:16px;background:var(--tint);border-radius:14px;text-align:center}
.badge__icon{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:50%;background:#E4E9F2;color:var(--muted)}
.badge h3{font-size:16.5px;font-weight:800;color:var(--navy);line-height:1.35;margin-block-start:8px}
.badge p{font-size:14.5px;color:var(--muted);line-height:1.5}
.badge.is-earned{background:#FFF8E5}
.badge.is-earned .badge__icon{background:var(--gold);color:var(--navy-deep)}
.notice--spaced{margin-block:24px 16px}
.sim-actions--center{justify-content:center}
.rank-table{width:100%;border-collapse:collapse}
.rank-table th,.rank-table td{padding:10px 12px;border-block-end:1px solid var(--line);text-align:start}
.rank-table th{color:var(--muted);font-size:14.5px}
.rank-table .is-top td{font-weight:800;color:var(--navy)}
.challenge-list{display:grid;gap:12px}
.challenge-list[hidden]{display:none}
.challenge{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px}
.challenge.is-done{background:#EEF9F4}
.challenge__text{flex:1 1 240px;min-width:0}
.challenge__type{font-size:14px;font-weight:800;color:var(--blue)}
.challenge h2{font-size:19px;font-weight:800;color:var(--navy);line-height:1.35;margin:0}
.challenge__meta{font-size:14.5px;color:var(--muted)}
.challenge-timer{position:sticky;top:76px;z-index:10;background:var(--navy);color:var(--gold);font-weight:800;text-align:center;padding:8px;border-radius:10px;margin-block-end:12px}
.challenge-timer.is-low{background:#B3261E;color:#fff}
#challenge-form fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 14px;min-width:0}
@media (max-width:640px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nav__account{font-size:14.5px!important;font-weight:400!important;color:var(--muted)!important}
.auth{max-width:460px}
.auth h1{font-size:30px;font-weight:800;color:var(--navy);margin:0;line-height:1.3}
.auth__lead{color:var(--muted);margin-block-end:16px}
.auth__switch{text-align:center;margin-block-start:14px}
.field{margin-block-end:14px}
.field label{display:block;font-weight:700;color:var(--navy);margin-block-end:4px}
.field input{width:100%;min-height:48px;padding:6px 12px;border:1px solid #AFC0DD;border-radius:10px;font:inherit}
.field__err{color:#8E2A12;font-size:15px;font-weight:700;margin-block-start:4px}
.field__err--box{background:#FDE7E3;padding:10px 14px;border-radius:10px;margin-block-end:12px}
.check{display:flex;gap:10px;align-items:flex-start;background:var(--tint);padding:12px;border-radius:10px;margin-block-end:14px;cursor:pointer;line-height:1.5}
.check input{width:20px;height:20px;flex:none;margin-block-start:3px;accent-color:var(--blue)}
.account-mail{text-align:start;opacity:.9}
[dir=rtl] .account-mail{text-align:right}
.transfer-box{background:#FFF8E5;padding:14px 16px;border-radius:12px;margin-block-end:16px}
.transfer-box .btn{margin-block-start:10px}
@media (max-width:980px){.grid--4,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1140px){.nav-toggle{display:flex}.nav{display:none;position:absolute;inset-inline:0;top:68px;background:var(--white);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;border-block-end:1px solid var(--line);box-shadow:0 12px 20px rgba(10,31,88,.1)}.nav.is-open{display:flex}.nav>a{padding:12px 0;border-block-end:1px solid var(--line)}.nav__langs{border:0;padding:12px 0 0}.nav__langs a{min-height:44px;display:flex;align-items:center;padding-inline:8px}}
@media (max-width:640px){body{font-size:16px}.hero__grid{grid-template-columns:1fr;padding-block-start:32px;gap:0}.hero__copy{padding-block-end:20px}.hero__mascot{width:230px}.grid--4,.grid--3,.steps{grid-template-columns:1fr}.section{padding-block:48px}.btn{flex:1 1 100%}.footer__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.notice--ok{background:#E3F7EE;color:#0B5C43}
.pay-methods{border:0;padding:0;margin:18px 0 16px;min-width:0}
.pay-methods legend{font-weight:800;color:var(--navy);margin-block-end:8px;padding:0}
.pay-method{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:2px solid var(--line);border-radius:12px;margin-block-end:8px;cursor:pointer}
.pay-method:has(input:checked){border-color:var(--blue);background:var(--tint)}
.pay-method input{margin-block-start:7px;flex:none;width:18px;height:18px}
.pay-method strong{display:block;color:var(--navy)}
.pay-method small{display:block;color:var(--muted);font-size:15px;line-height:1.5}
.pay-summary{margin:16px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pay-summary div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;align-items:center}
.pay-summary div+div{border-block-start:1px solid var(--line)}
.pay-summary dt{color:var(--muted)}
.pay-summary dd{margin:0;font-weight:700;text-align:end;min-width:0;overflow-wrap:anywhere}
.pay-ref{font-size:15px}
.pay-status{display:inline-block;padding:1px 12px;border-radius:99px;font-size:15px;font-weight:700;white-space:nowrap}
.pay-status--pending{background:#FFF3D1;color:#6B4700}
.pay-status--approved{background:#E3F7EE;color:#0B5C43}
.pay-status--rejected{background:#FDE7E3;color:#8E2A12}
.pay-status--cancelled{background:var(--tint);color:var(--muted)}
.pay-h2{font-size:21px;font-weight:800;color:var(--navy);margin-block:24px 10px}
.pay-instructions{background:var(--tint);border-radius:12px;padding:12px 16px;margin-block-end:16px;overflow-wrap:anywhere}
.pay-cancel{margin-block-start:8px}
.field input[type=file]{padding:10px 12px}
.pay-notes li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-block-end:1px solid var(--line)}
.pay-notes li.is-new{background:var(--tint);font-weight:700}
.pay-notes time{color:var(--muted);font-size:15px;white-space:nowrap;font-weight:400}
.pay-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.pay-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.pay-table th,.pay-table td{padding:9px 12px;text-align:start;border-block-end:1px solid var(--line);white-space:nowrap}
.pay-table th{background:var(--tint);color:var(--navy)}
.pay-table tr:last-child td{border-block-end:0}
button.btn--line{background:transparent;cursor:pointer;font-family:inherit}
.pay-actions{display:grid;gap:8px;margin-block-start:8px}

.dash-head{display:flex;align-items:center;gap:16px}
.dash-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);flex:none;background:var(--white)}
.dash-photo--empty{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:var(--navy)}
.dash-plan{opacity:.9}
.stat-row--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-block-start:10px}
.world-bar{margin-block-end:12px}
.world-bar__top{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.world-bar__top a{color:var(--navy);text-decoration:none}
.world-bar progress{width:100%;height:10px;accent-color:var(--blue)}
.cert-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-block-end:8px}
.cert-row strong{display:block;color:var(--navy)}
.cert-row small{color:var(--muted);font-size:14px}
.cert-row__actions{display:flex;flex-wrap:wrap;gap:8px}
.dash-badges{display:flex;flex-wrap:wrap;gap:8px}
.dash-badges li{display:flex;align-items:center;gap:6px;background:var(--tint);padding:4px 12px;border-radius:99px;font-size:15px;color:var(--navy)}
.dash-badges .icon{color:var(--gold-deep)}
.dash-score{display:flex;gap:10px;white-space:nowrap}
.dash-links{margin-block-start:24px}
.verify-form{margin-block-start:18px}
.nav__badge{display:inline-block;min-width:20px;padding:0 5px;border-radius:99px;background:#C8341A;color:#fff;font-size:13px;line-height:20px;text-align:center;font-weight:700}
button.btn--line{border:2px solid var(--line)}
.dash-plan span{white-space:nowrap}

.topbar .wrap{width:min(1360px,100% - 32px)}
@media (max-width:1500px){.brand__name--with-logo{display:none}}
@media (max-width:1400px){.nav{gap:15px}.nav a{font-size:15px}.nav__langs{padding-inline-start:12px}}
.topbar__tools{display:none;align-items:center;gap:8px}
.top-lang{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding-inline:12px;border:1px solid var(--line);border-radius:10px;color:var(--navy);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
@media (max-width:1140px){.topbar__tools{display:flex}.nav__langs{display:none}}
@media (max-width:560px){.brand__name{display:none}.brand img{max-width:90px;height:44px}.top-lang{padding-inline:10px}}
@media (max-width:640px){.hero__mascot{width:min(340px,100%)}}
.install-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--tint);border-block-end:1px solid var(--line)}
.install-bar[hidden]{display:none}
.install-bar img{border-radius:10px;flex:none}
.install-bar p{flex:1;font-size:15px;line-height:1.45;color:var(--navy);min-width:0}
.install-bar .btn{min-height:40px;padding:2px 16px;font-size:15px;flex:none;border:0;cursor:pointer;font-family:inherit}
.install-bar__close{background:none;border:0;color:var(--muted);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.install-bar .btn[hidden]{display:none}

/* Intro: once a day, only when JS confirms it; otherwise never displayed */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 42%,#1E5FD8 0,#0A1F58 62%);color:#fff;overflow:hidden;transition:opacity .45s ease}
.intro.is-leaving{opacity:0}
.intro__stage{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;width:min(560px,100%)}
.intro__logo{animation:introPop .7s cubic-bezier(.2,1.4,.4,1) both;position:relative;overflow:hidden;border-radius:14px}
.intro__logo span{display:block;font-size:clamp(56px,14vw,96px);font-weight:800;letter-spacing:2px;line-height:1}
.intro__logo img{display:block;height:clamp(64px,14vw,96px);width:auto;max-width:260px;background:#fff;border-radius:14px;padding:6px 10px}
.intro__logo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:introShine .9s .7s ease both}
.intro__hero{width:min(300px,72vw);height:auto;margin-block:14px 6px;animation:introRise .8s .55s cubic-bezier(.2,1.2,.4,1) both}
.intro__title{font-size:clamp(20px,5vw,30px);font-weight:800;animation:introFade .5s 1.15s both}
.intro__title b{color:var(--gold)}
.intro__tag{font-size:clamp(18px,4.5vw,24px);font-weight:700;color:var(--gold);margin-block-start:6px;animation:introReveal .8s 1.5s ease both}
.intro__skip{position:absolute;inset-block-end:24px;inset-inline-end:20px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:99px;padding:8px 20px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.intro__skip:hover,.intro__skip:focus-visible{background:rgba(255,255,255,.25)}
@keyframes introPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes introShine{to{transform:translateX(120%)}}
@keyframes introRise{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes introFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes introReveal{from{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0)}}
[dir=ltr] .intro__tag{animation-name:introRevealLtr}
@keyframes introRevealLtr{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){html.intro-on .intro{display:none}html.intro-on{overflow:auto}}