/*! Mehmannavaz v2.0.0 — Persian RTL auth UI kit
   Sections: 1 tokens · 2 base · 3 layout · 4 components · 5 pages · 6 motion · 7 effects · 8 states & accessibility */
@font-face{font-family:"Vazirmatn Local";src:local("Vazirmatn"),url(../fonts/Vazirmatn-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--font:"Vazirmatn","Vazirmatn Local",Tahoma,system-ui,sans-serif;
--bg:#f6f8f7;--surface:#fff;--surface-2:#eef3f2;--ink:#0d2a2e;--ink-2:#4b6266;--line:#d8e2e0;
--brand:#0b7a75;--brand-ink:#fff;--gold:#d99a1e;--ok:#1a8f5a;--err:#c8383f;
--r-m:14px;--r-l:24px;--sh-2:0 18px 40px -18px rgba(13,42,46,.28);
--ease:cubic-bezier(.22,1,.36,1);--t:.35s;--sp:clamp(1rem,3vw,2rem)}
[data-theme=dark]{--bg:#081a1d;--surface:#0f2a2e;--surface-2:#143338;--ink:#e8f3f1;--ink-2:#93adb0;--line:#1f4046;--brand:#35c2b8;--brand-ink:#04201f;--gold:#f0b94a;--sh-2:0 18px 40px -18px #000}
*,*::before,*::after{box-sizing:border-box;margin:0}
body{font:400 1rem/1.8 var(--font);background:var(--bg);color:var(--ink);min-height:100dvh;transition:background var(--t),color var(--t)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px;border-radius:6px}
a{color:var(--brand);text-decoration:none;font-weight:500}a:hover{text-decoration:underline;text-underline-offset:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.shell{display:grid;min-height:100dvh;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.shell{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.brand-panel{display:none;position:relative;overflow:hidden;color:#eafaf8;padding:3rem;background:radial-gradient(120% 80% at 80% 0,#12948c,transparent 60%),#07403f;isolation:isolate}
@media(min-width:960px){.brand-panel{display:flex;flex-direction:column;justify-content:space-between}}
.brand-panel h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.5;font-weight:700;max-width:16ch}
.brand-panel p{opacity:.8;max-width:38ch;margin-top:1rem}
.khatam{position:absolute;inset-inline-start:-18%;bottom:-22%;width:min(78vw,640px);aspect-ratio:1;background:#f0c35a;opacity:.25;z-index:-1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8'%3E%3Crect x='22' y='22' width='56' height='56'/%3E%3Crect x='22' y='22' width='56' height='56' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Cpath d='M50 8v84M8 50h84'/%3E%3C/g%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 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8'%3E%3Crect x='22' y='22' width='56' height='56'/%3E%3Crect x='22' y='22' width='56' height='56' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Cpath d='M50 8v84M8 50h84'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;animation:spin 120s linear infinite}
.khatam.b{inset-inline-start:auto;inset-inline-end:-10%;top:-12%;bottom:auto;width:360px;opacity:.15;animation-duration:80s;animation-direction:reverse}
.stage{display:grid;place-items:center;padding:5rem var(--sp) var(--sp);position:relative}
.topbar{position:absolute;inset:1rem 1rem auto;display:flex;justify-content:space-between;align-items:center}
.logo{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem;color:inherit}
.logo i{width:2rem;height:2rem;border-radius:9px;background:var(--gold);display:grid;place-items:center;color:#3a2600;font-style:normal}
.card{width:min(100%,27rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.5rem,4vw,2.4rem);box-shadow:var(--sh-2);animation:enter .7s var(--ease) both;transition:background var(--t),border-color var(--t)}
.card.center{text-align:center}.card.wide{width:min(100%,34rem)}
.card h1{font-size:1.6rem;line-height:1.5;font-weight:800;margin-bottom:.35rem}
.lead{color:var(--ink-2);margin-bottom:1.6rem;font-size:.95rem}
.stack>*+*{margin-top:1.1rem}
.field{position:relative}
.field input{width:100%;height:3.4rem;padding:1.15rem 1rem .2rem 3rem;font:inherit;color:var(--ink);background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-m);transition:border-color .25s,box-shadow .25s,background .25s}
.field input[dir=ltr]{text-align:right}
.field label{position:absolute;inset-inline-start:1rem;top:50%;translate:0 -50%;color:var(--ink-2);pointer-events:none;transition:all .25s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:.8rem;font-size:.72rem;color:var(--brand)}
.field input:hover{border-color:var(--line)}
.field input:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.field.err input{border-color:var(--err)}.field.ok input{border-color:var(--ok)}.field.err{animation:shake .4s}
.eye{position:absolute;inset-inline-end:.5rem;top:.5rem;width:2.4rem;height:2.4rem;border:0;background:none;border-radius:10px;cursor:pointer;font-size:1.05rem;transition:background .2s}.eye:hover{background:var(--line)}
.msg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease);font-size:.8rem;color:var(--err)}
.msg>span{overflow:hidden;padding-inline:.4rem}.err .msg{grid-template-rows:1fr}
.meter{display:flex;gap:4px;margin-top:.5rem}.meter i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.meter[data-s="1"] i:nth-child(-n+1){background:var(--err)}.meter[data-s="2"] i:nth-child(-n+2){background:var(--gold)}
.meter[data-s="3"] i:nth-child(-n+3){background:#8cb83a}.meter[data-s="4"] i{background:var(--ok)}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem}
.check{display:flex;gap:.6rem;align-items:center;cursor:pointer}.check input{accent-color:var(--brand);width:1.1rem;height:1.1rem}
.btn{--b:var(--brand);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;height:3.3rem;border:1.5px solid var(--b);border-radius:var(--r-m);background:var(--b);color:var(--brand-ink);font:700 1rem var(--font);cursor:pointer;text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px var(--b)}.btn:active{transform:scale(.98)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);translate:120% 0;transition:translate .7s var(--ease)}.btn:hover::after{translate:-120% 0}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{border-color:var(--brand);box-shadow:none}
.btn[disabled]{opacity:.65;pointer-events:none}
.btn .spin{display:none;width:1.2rem;height:1.2rem;border:2.5px solid currentColor;border-inline-start-color:transparent;border-radius:50%;animation:spin .7s linear infinite}.btn.loading .spin{display:block}
.btn.done{--b:var(--ok);color:#fff}
.social{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.social .btn{height:3rem;font-weight:500;font-size:.9rem}
.or{display:flex;align-items:center;gap:1rem;color:var(--ink-2);font-size:.85rem}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.foot{margin-top:1.6rem;text-align:center;font-size:.92rem;color:var(--ink-2)}
.otp{display:flex;gap:.55rem;justify-content:center;direction:ltr}
.otp input{width:3.1rem;height:3.7rem;text-align:center;font:700 1.5rem var(--font);color:var(--ink);background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-m);transition:all .25s var(--ease)}
.otp input:focus{border-color:var(--brand);background:var(--surface);transform:translateY(-3px);box-shadow:0 8px 18px -10px var(--brand)}
.otp input.filled{border-color:var(--brand)}.otp.bad{animation:shake .4s}.otp.bad input{border-color:var(--err)}
.otp.good input{border-color:var(--ok);animation:pop .4s var(--ease) backwards;animation-delay:calc(var(--i)*60ms)}
.timer{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:.9rem;margin-top:1.2rem}
.linkbtn{background:none;border:0;font:600 .9rem var(--font);color:var(--brand);cursor:pointer}.linkbtn:disabled{color:var(--ink-2);cursor:default}
.steps{display:flex;gap:.5rem;margin-bottom:1.6rem}.steps i{flex:1;height:5px;border-radius:5px;background:var(--line);overflow:hidden;position:relative}
.steps i::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}.steps i.on::after{transform:scaleX(1)}
.panel{display:none}.panel.on{display:block;animation:slide .5s var(--ease) both}.panel.back.on{animation-name:slideb}
.actions{display:flex;gap:.7rem;margin-top:1.4rem}.actions .btn:first-child{flex:2}.actions .btn.ghost{flex:1}
.badge{width:5rem;height:5rem;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:color-mix(in srgb,var(--c,var(--brand)) 14%,transparent);color:var(--c,var(--brand));position:relative}
.badge::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--c,var(--brand));opacity:0;animation:ring 2.4s ease-out infinite}
.badge.ok{--c:var(--ok)}.badge.err{--c:var(--err)}.badge.warn{--c:var(--gold)}
.badge svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;animation:draw .7s .2s var(--ease) backwards}
.code{font-size:5rem;font-weight:800;line-height:1.2;color:var(--brand)}
.cd{display:flex;gap:.6rem;justify-content:center;margin:1.4rem 0}.cd div{min-width:4.2rem;padding:.6rem;background:var(--surface-2);border-radius:var(--r-m)}
.cd b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}.cd small{color:var(--ink-2);font-size:.72rem}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:1.2rem 0}.bar i{display:block;height:100%;width:60%;background:var(--brand);border-radius:6px;animation:load 2.4s var(--ease) infinite alternate}
.theme{width:2.6rem;height:2.6rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.1rem;transition:transform .4s var(--ease)}.theme:hover{transform:rotate(25deg)}
.toasts{position:fixed;inset:auto 1rem 1rem auto;display:grid;gap:.6rem;z-index:50;width:min(22rem,calc(100vw - 2rem))}
.toast{padding:.9rem 1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-inline-start:4px solid var(--c,var(--brand));border-radius:var(--r-m);box-shadow:var(--sh-2);animation:toast .45s var(--ease) both;font-size:.9rem}
.toast.ok{--c:var(--ok)}.toast.err{--c:var(--err)}.toast.out{animation:toastout .3s forwards}
.modal{position:fixed;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(4,20,22,.55);backdrop-filter:blur(6px);z-index:40;opacity:0;visibility:hidden;transition:.3s}
.modal.open{opacity:1;visibility:visible}.modal .card{animation:none;transform:translateY(18px) scale(.97);transition:transform .45s var(--ease)}.modal.open .card{transform:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;width:min(100%,70rem)}
.tile{display:block;padding:1.3rem;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none!important;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--sh-2)}.tile b{display:block}.tile span{color:var(--ink-2);font-size:.85rem}
.hero{text-align:center;max-width:42rem;margin:0 auto 2.5rem}.hero h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.4;font-weight:800}.hero p{color:var(--ink-2)}
@keyframes enter{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes slide{from{opacity:0;transform:translateX(30px)}}@keyframes slideb{from{opacity:0;transform:translateX(-30px)}}
@keyframes shake{25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(3px)}}
@keyframes pop{50%{transform:scale(1.12)}}@keyframes spin{to{rotate:360deg}}
@keyframes ring{from{opacity:.7;scale:.9}to{opacity:0;scale:1.35}}@keyframes draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
@keyframes toast{from{opacity:0;transform:translateX(-30px)}}@keyframes toastout{to{opacity:0;transform:translateX(-30px)}}
@keyframes load{to{width:96%}}
@media(max-width:480px){.otp input{width:2.6rem;height:3.2rem}.social{grid-template-columns:1fr}.actions{flex-direction:column-reverse}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== 7. Effects — depth, aurora background, staggered entrance ===== */
::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}
input{caret-color:var(--brand)}
html{scrollbar-color:var(--line) transparent}
/* aurora background */
.stage{isolation:isolate;overflow:hidden;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 0) 0 0/26px 26px}
.stage::before,.stage::after{content:"";position:absolute;z-index:-1;width:28rem;height:28rem;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none}
.stage::before{top:-9rem;inset-inline-end:-7rem;background:color-mix(in srgb,var(--brand) 38%,transparent);animation:drift 18s ease-in-out infinite alternate}
.stage::after{bottom:-10rem;inset-inline-start:-6rem;background:color-mix(in srgb,var(--gold) 34%,transparent);animation:drift 23s ease-in-out -8s infinite alternate-reverse}
[data-theme=dark] .stage::before,[data-theme=dark] .stage::after{opacity:.32}
/* brand panel mesh + orbs */
.brand-panel{background:radial-gradient(55% 45% at 12% 88%,rgba(240,195,90,.2),transparent 70%),radial-gradient(110% 80% at 85% 0,#14a39a,transparent 62%),linear-gradient(160deg,#0a5552,#052f31)}
.brand-panel::before,.brand-panel::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(50px);pointer-events:none}
.brand-panel::before{width:20rem;height:20rem;top:30%;inset-inline-end:-6rem;background:rgba(80,220,205,.28);animation:drift 14s ease-in-out infinite alternate}
.brand-panel::after{width:14rem;height:14rem;bottom:8%;inset-inline-start:30%;background:rgba(240,195,90,.2);animation:drift 19s ease-in-out -5s infinite alternate-reverse}
.khatam{animation:spin 120s linear infinite,breathe 7s ease-in-out infinite}
.brand-panel :is(h2,p,small){animation:rise .9s var(--ease) .35s backwards}.brand-panel p{animation-delay:.5s}
.brand-panel h2{text-shadow:0 8px 30px rgba(0,0,0,.25)}
/* card: gradient edge, depth, light */
.card{position:relative;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 4px rgba(13,42,46,.05),0 30px 60px -28px rgba(13,42,46,.35);backdrop-filter:blur(14px)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 55%,transparent),transparent 38%,transparent 62%,color-mix(in srgb,var(--gold) 60%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(22rem circle at var(--mx,50%) var(--my,0),color-mix(in srgb,var(--brand) 9%,transparent),transparent 65%);opacity:0;transition:opacity .4s}
.card:hover::after{opacity:1}
[data-theme=dark] .card{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 70px -34px #000}
.card h1{letter-spacing:-.01em}
/* staggered entrance (zero specificity so state animations still win) */
:where(.card>*,.card>form>*,.card .panel>*){animation:rise .65s var(--ease) backwards}
:where(.card>*:nth-child(1),.card>form>*:nth-child(1)){animation-delay:.12s}
:where(.card>*:nth-child(2),.card>form>*:nth-child(2)){animation-delay:.18s}
:where(.card>*:nth-child(3),.card>form>*:nth-child(3)){animation-delay:.24s}
:where(.card>*:nth-child(4),.card>form>*:nth-child(4)){animation-delay:.3s}
:where(.card>*:nth-child(5),.card>form>*:nth-child(5)){animation-delay:.36s}
:where(.card>*:nth-child(n+6),.card>form>*:nth-child(n+6)){animation-delay:.42s}
/* logo + theme */
.logo i{background:linear-gradient(135deg,#f6cf72,var(--gold));box-shadow:0 6px 14px -6px var(--gold),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .5s var(--ease)}
.logo:hover i{transform:rotate(-12deg) scale(1.1)}.logo:hover{text-decoration:none}
.theme{box-shadow:0 2px 8px -4px rgba(13,42,46,.3)}.theme:active{transform:rotate(180deg) scale(.9)}
/* inputs */
.field input{box-shadow:inset 0 1px 2px rgba(13,42,46,.07);height:3.5rem}
.field input:hover{background:color-mix(in srgb,var(--surface-2) 70%,var(--surface))}
.field input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent),0 10px 24px -14px var(--brand);transform:translateY(-1px)}
.field input:focus+label{letter-spacing:.01em}
.field.ok:not(:has(.eye))::after{content:"";position:absolute;inset-inline-end:1rem;top:1rem;color:var(--ok);font-weight:800;animation:pop .45s var(--ease)}
.field.err label{color:var(--err)}
.msg{font-weight:500}.err .msg{padding-top:.3rem}
.meter i{transition:background .3s,transform .35s var(--ease)}.meter[data-s="1"] i:nth-child(1),.meter[data-s="2"] i:nth-child(-n+2),.meter[data-s="3"] i:nth-child(-n+3),.meter[data-s="4"] i{transform:scaleY(1.5)}
/* buttons */
.btn{background:linear-gradient(135deg,color-mix(in srgb,var(--b) 86%,#fff),var(--b) 55%,color-mix(in srgb,var(--b) 80%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px var(--b)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px -12px var(--b)}
.btn.ghost{background:transparent;box-shadow:none}.btn.ghost:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.btn.done{animation:pop .5s var(--ease)}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);width:10px;height:10px;translate:-50% -50%;pointer-events:none;animation:ripple .65s ease-out forwards}
.btn.ghost .rip{background:color-mix(in srgb,var(--brand) 25%,transparent)}
.check input{transition:transform .2s var(--ease)}.check input:active{transform:scale(.8)}
/* otp */
.otp input{box-shadow:inset 0 1px 2px rgba(13,42,46,.07)}.otp input.filled{animation:pop .3s var(--ease);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.otp input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent),0 12px 22px -12px var(--brand)}
/* status badges */
.badge{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c,var(--brand)) 26%,transparent),color-mix(in srgb,var(--c,var(--brand)) 10%,transparent));animation:badgein .8s var(--ease) backwards,bob 4s ease-in-out .8s infinite;box-shadow:0 14px 30px -14px var(--c,var(--brand))}
.badge::after{content:"";position:absolute;inset:50% auto auto 50%;width:6px;height:6px;margin:-3px;border-radius:50%;opacity:0;pointer-events:none}
.badge.ok::after{box-shadow:0 -52px var(--ok),37px -37px var(--gold),52px 0 var(--ok),37px 37px var(--gold),0 52px var(--ok),-37px 37px var(--gold),-52px 0 var(--ok),-37px -37px var(--gold);animation:burst .9s .35s var(--ease) both}
.code{background:linear-gradient(120deg,var(--brand),var(--gold),var(--brand));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite,bob 5s ease-in-out infinite}
.cd div{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);border:1px solid var(--line)}
.cd b{display:inline-block;animation:tick 1s steps(1) infinite}
.bar i{background:linear-gradient(90deg,var(--brand),var(--gold),var(--brand));background-size:200% 100%;animation:load 2.4s var(--ease) infinite alternate,shine 2s linear infinite}
/* toast */
.toast{position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.toast::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c,var(--brand));transform-origin:right;animation:drain 3.6s linear forwards}
/* showcase */
.hero h1{background:linear-gradient(100deg,var(--brand),var(--gold) 50%,var(--brand));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite,rise .9s var(--ease) backwards}
.hero p{animation:rise .9s var(--ease) .15s backwards}
.tile{position:relative;overflow:hidden;animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--n,0)*50ms + .2s)}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(14rem circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.tile:hover::before{opacity:1}.tile b{font-size:1.05rem;margin-bottom:.15rem}
.tile:active{transform:translateY(-1px) scale(.985)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes drift{to{translate:60px 40px;scale:1.2}}
@keyframes breathe{50%{opacity:.34}}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes badgein{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
@keyframes burst{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.25)}}
@keyframes shine{to{background-position:-200% 0}}
@keyframes ripple{to{width:420px;height:420px;opacity:0}}
@keyframes drain{to{transform:scaleX(0)}}
@keyframes tick{0%{transform:translateY(-3px);opacity:.6}8%{transform:none;opacity:1}}

/* ===== 8. States & accessibility — icons, alerts, toasts, reduced motion, forced colors ===== */
:root{--ok:#13744a;--err-ink:#a82a31;--warn-ink:#8a5a00;color-scheme:light}
[data-theme=dark]{color-scheme:dark;--err:#ff8a8f;--ok:#4fd69a;--err-ink:#ffa3a7;--warn-ink:#f6cf72}
[hidden]{display:none!important}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.theme{display:grid;place-items:center}.theme .ic{width:1.2rem;height:1.2rem}.theme .sun,[data-theme=dark] .theme .moon{display:none}[data-theme=dark] .theme .sun{display:block}
.eye{display:grid;place-items:center;color:var(--ink-2)}.eye .ic{width:1.15rem;height:1.15rem}
.badge .ic{width:2.3rem;height:2.3rem;stroke-width:1.6;stroke-dasharray:none;animation:none}
.field.ok:not(:has(.eye))::after{content:"";width:1.1rem;height:1.1rem;top:1.15rem;background:var(--ok);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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='%23000' 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}
.btn{background:linear-gradient(135deg,color-mix(in srgb,var(--b) 94%,#fff),var(--b) 55%,color-mix(in srgb,var(--b) 82%,#000))}
.alert,.note{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem .9rem;border-radius:var(--r-m);font-size:.88rem;line-height:1.7;animation:alertin .45s var(--ease)}
.alert .ic,.note .ic{margin-top:.3rem}
.alert{background:color-mix(in srgb,var(--err) 10%,transparent);color:var(--err-ink);border:1px solid color-mix(in srgb,var(--err) 35%,transparent)}
.alert.err{animation:alertin .45s var(--ease),shake .4s .1s}
.alert.warn,.note{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--warn-ink);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.note{margin-top:.5rem;padding:.45rem .7rem;font-size:.8rem}
.mtext{display:block;margin-top:.35rem;font-size:.78rem;color:var(--ink-2);transition:color .3s}
.mtext[data-s="1"]{color:var(--err-ink)}.mtext[data-s="2"]{color:var(--warn-ink)}.mtext[data-s="4"]{color:var(--ok)}
.cb .msg{margin-top:.2rem}.cb.err .check{color:var(--err-ink)}
.toast{display:flex;align-items:center;gap:.7rem;padding-inline-end:.4rem}.toast>.ic{width:1.3rem;height:1.3rem;color:var(--c,var(--brand))}.toast span{flex:1}
.toast .x{border:0;background:none;color:var(--ink-2);width:2rem;height:2rem;border-radius:8px;cursor:pointer;display:grid;place-items:center}.toast .x:hover{background:var(--surface-2)}
.toast::after{animation-duration:4s}.toast.err::after{animation-duration:8s}.toast.hold::after{animation-play-state:paused}
.otp input{font-variant-numeric:tabular-nums}
@keyframes alertin{from{opacity:0;transform:translateY(-8px)}}
@media(hover:none){.btn:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px var(--b)}.btn:hover::after{translate:120% 0}.tile:hover,.theme:hover,.logo:hover i{transform:none}}
@media(forced-colors:active){.btn,.field input,.otp input,.card{border:1.5px solid ButtonText}.badge{border:1px solid CanvasText}}
.modal{transition:opacity .3s,visibility 0s .3s}.modal.open{transition-delay:0s}

/* skip link */
.skip{position:fixed;z-index:100;inset-block-start:.6rem;inset-inline-start:.6rem;padding:.55rem 1rem;border-radius:var(--r-m);background:var(--brand);color:var(--brand-ink);font-weight:700;translate:0 -200%;transition:translate .2s var(--ease)}
.skip:focus{translate:0 0;text-decoration:none}
/* showcase extras */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
.chips span{padding:.3rem .85rem;border-radius:99px;font-size:.82rem;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.showfoot{margin-top:2.5rem;text-align:center;color:var(--ink-2);font-size:.85rem}
.ver{display:inline-block;margin-inline-start:.4rem;padding:.05rem .55rem;border-radius:99px;font-size:.7rem;font-weight:700;vertical-align:middle;background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--warn-ink)}
@media print{.stage::before,.stage::after,.brand-panel,.topbar,.theme,.toasts{display:none!important}.card{box-shadow:none;border-color:#999}}