/* ITOTP (04.10): «Glassy OTP» — екрани айтішника до пульта (вхід, код, запрошення, анкета). Лише вигляд і анімації; transform/opacity. */
.ia-fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;opacity:0;transition:opacity .9s ease}
.ia-fx.on{opacity:1}
.ia-vig{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 38%,transparent 30%,rgba(2,5,10,.72) 100%),radial-gradient(60% 50% at 85% 100%,rgba(57,226,168,.07),transparent 70%)}
.ia-card.ia-card{position:relative;z-index:2;color:#d3def2;color-scheme:dark;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:0 30px 80px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.12);animation:iaIn .7s cubic-bezier(.2,.8,.2,1) both;text-align:center}
@keyframes iaIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ia-card.ia-card::after{content:"";position:absolute;top:9px;left:50%;width:34px;height:3px;margin-left:-17px;border-radius:3px;background:rgba(255,255,255,.2);pointer-events:none}
.ia-card.ia-card::before{display:block;content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .8s ease;background:radial-gradient(90% 75% at 50% 62%,rgba(47,230,166,.30),rgba(47,230,166,.08) 58%,transparent 80%)}
.ia-card.ok::before{opacity:1}
.ia-card h2,.ia-card h3{color:#eef4ff;transition:color .5s}
.ia-card.ok h2,.ia-card.ok h3{color:#9ff5d3}
.ia-card .sub,.ia-card .hint{color:#8d9dbd}
/* поля */
.ia-card input,#login.it .f input{background:rgba(6,10,18,.55);border:1px solid rgba(255,255,255,.14);color:#e6eefc;border-radius:13px;transition:border-color .25s,box-shadow .25s,background .25s;color-scheme:dark}
.ia-card input:focus,#login.it .f input:focus{outline:none;border-color:#39e2a8;box-shadow:0 0 0 3px rgba(57,226,168,.18),0 0 26px rgba(57,226,168,.18);background:rgba(6,10,18,.7)}
.ia-card input::placeholder{color:#62739a}
.ia-card label{color:#8d9dbd;text-align:left}
.ia-card .btn,#login.it .btn.gold{background:linear-gradient(180deg,#4cf0b8,#2fd69c);border-color:transparent;color:#03231a;font-weight:700;border-radius:999px;transition:transform .2s,box-shadow .25s,opacity .2s;box-shadow:0 8px 24px -10px rgba(57,226,168,.7)}
.ia-card .btn:hover,#login.it .btn.gold:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(57,226,168,.85);color:#03231a;background:linear-gradient(180deg,#4cf0b8,#2fd69c)}
.ia-card .btn:active{transform:scale(.98)}
.ia-card .btn.g{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:#d3def2;box-shadow:none}
.ia-card .btn:disabled{opacity:.55;transform:none}
.ia-card .msg.bad,.ia-card .err{color:#ff8791}.ia-card .msg.ok{color:#5ff0bd}
/* код: шість клітинок */
#login.it .deck{height:76px;gap:8px;margin:14px 0 8px}
#login.it .deck span{flex:0 1 48px;width:48px;min-width:0;height:60px;border-radius:14px;background:rgba(6,10,18,.5);border:1.5px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font:0/0 a;color:transparent;transition:border-color .25s,box-shadow .3s,background .3s,opacity .45s,transform .55s cubic-bezier(.22,1,.36,1)}
#login.it .deck span::before{content:attr(data-d);position:absolute;inset:0;display:grid;place-items:center;font:600 26px/1 "SF Pro Display",-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#f1f6ff;font-variant-numeric:tabular-nums}
#login.it .deck span.filled{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);animation:iaCell .32s cubic-bezier(.2,.9,.3,1.3)}
#login.it .deck span.filled::before{animation:iaDigit .34s cubic-bezier(.2,.9,.3,1.2)}
@keyframes iaCell{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes iaDigit{from{opacity:0;transform:translateY(10px) scale(.7)}to{opacity:1;transform:none}}
#login.it .deck span.cur{border-color:#39e2a8;background:rgba(57,226,168,.07);box-shadow:0 0 0 3px rgba(57,226,168,.16),0 0 28px rgba(57,226,168,.28)}
#login.it .deck span.cur::after{content:"";position:absolute;width:2px;height:26px;border-radius:2px;background:#39e2a8;animation:iaCaret 1s steps(2) infinite}
@keyframes iaCaret{to{opacity:0}}
#login.it .deck.ia-ver span.filled{animation:iaWave .9s ease-in-out infinite;border-color:rgba(57,226,168,.55)}
#login.it .deck.ia-ver span:nth-child(2){animation-delay:.08s}#login.it .deck.ia-ver span:nth-child(3){animation-delay:.16s}#login.it .deck.ia-ver span:nth-child(4){animation-delay:.24s}#login.it .deck.ia-ver span:nth-child(5){animation-delay:.32s}#login.it .deck.ia-ver span:nth-child(6){animation-delay:.4s}
@keyframes iaWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#login.it .deck.bad span{border-color:#ff5d6c;background:rgba(255,93,108,.12);box-shadow:0 0 0 3px rgba(255,93,108,.16),0 0 24px rgba(255,93,108,.25);animation:none}
#login.it .deck.bad{animation:iaShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes iaShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
/* успіх: клітинки зникають до центру, зʼявляється зелена галочка */
#login.it .deck.ia-ok span{opacity:0;transform:scale(.4);pointer-events:none}
#login.it .deck.ia-ok span:nth-child(1){transform:translateX(66px) scale(.4)}#login.it .deck.ia-ok span:nth-child(2){transform:translateX(38px) scale(.4)}#login.it .deck.ia-ok span:nth-child(3){transform:translateX(12px) scale(.4)}
#login.it .deck.ia-ok span:nth-child(4){transform:translateX(-12px) scale(.4)}#login.it .deck.ia-ok span:nth-child(5){transform:translateX(-38px) scale(.4)}#login.it .deck.ia-ok span:nth-child(6){transform:translateX(-66px) scale(.4)}
.ia-chk{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:16px;border:1.5px solid #2fe6a6;background:rgba(47,230,166,.16);box-shadow:0 0 0 4px rgba(47,230,166,.12),0 0 40px rgba(47,230,166,.4);display:grid;place-items:center;opacity:0;transform:scale(.3);animation:iaChk .55s .22s cubic-bezier(.2,.9,.3,1.25) forwards;pointer-events:none}
.ia-chk svg{width:30px;height:30px;fill:none;stroke:#eafff6;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:iaDraw .45s .55s ease-out forwards}
@keyframes iaChk{to{opacity:1;transform:scale(1)}}
@keyframes iaDraw{to{stroke-dashoffset:0}}
.ia-ok-big{display:grid;place-items:center;margin:14px 0 4px;height:76px;position:relative}
/* вхід: тема айтішника */
#login.it{background:#04070d;position:relative;overflow:hidden;color-scheme:dark}
#login.it .card{width:min(400px,100%);padding:42px 30px 28px}
#login.it .wordmark{color:#eef4ff;font-family:"SF Pro Display",-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:800;font-size:26px;letter-spacing:.34em}
#login.it .brand{color:#39e2a8;transition:color .3s}
#login.it .hint,#login.it .foot,#login.it .small{color:#7e8fb2}
#login.it .small b{color:#39e2a8}
#login.it .btn.gold{width:100%;padding:14px}
.ia-in{animation:iaFade .45s ease both}
@keyframes iaFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* it.html: сторінки запрошення й анкети */
body.ia{overflow-x:hidden}
body.ia header{position:relative;z-index:3;background:rgba(8,16,29,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
body.ia main{position:relative;z-index:2}
body.ia .card.ia-card{margin:7vh auto;max-width:480px;padding:34px 26px 24px;text-align:left}
body.ia .card.ia-card h2{text-align:center;font-size:21px;margin:6px 0 8px}
body.ia .card.ia-card>.sub:first-of-type{text-align:center}
.ia-steps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px}
.ia-chip{font-size:12px;border-radius:999px;padding:5px 12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#8d9dbd;transition:background .4s,color .4s,border-color .4s,transform .4s}
.ia-chip.ok{background:rgba(47,230,166,.14);border-color:rgba(47,230,166,.5);color:#7ff3c9;transform:scale(1.04)}
.ia-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);margin:18px 0 6px}
.ia-done{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s}
.ia-card.ok .ia-done{opacity:1}
.ia-card.ok .ia-body{opacity:0;transform:scale(.97);pointer-events:none}
.ia-body{transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.ia-done .ia-chk{position:relative;left:auto;top:auto;margin:0}
.ia-done b{font-size:18px;color:#a9f7d9}.ia-done span{font-size:13px;color:#8fb5a6}
@media(max-width:480px){body.ia .card.ia-card{margin:4vh 12px;padding:30px 18px 20px}#login.it .deck{gap:6px}#login.it .deck span{flex-basis:44px;height:56px}#login.it .deck.ia-ok span:nth-child(1){transform:translateX(58px) scale(.4)}#login.it .deck.ia-ok span:nth-child(2){transform:translateX(34px) scale(.4)}#login.it .deck.ia-ok span:nth-child(3){transform:translateX(11px) scale(.4)}#login.it .deck.ia-ok span:nth-child(4){transform:translateX(-11px) scale(.4)}#login.it .deck.ia-ok span:nth-child(5){transform:translateX(-34px) scale(.4)}#login.it .deck.ia-ok span:nth-child(6){transform:translateX(-58px) scale(.4)}}
@media(prefers-reduced-motion:reduce){.ia-card.ia-card,.ia-in{animation:none}#login.it .deck span,#login.it .deck span::before,#login.it .deck.ia-ver span,#login.it .deck.bad,.ia-chk,.ia-chk svg{animation:none!important;transition:none!important}.ia-chk{opacity:1;transform:none}.ia-chk svg{stroke-dashoffset:0}#login.it .deck.ia-ok span{transform:none!important}.ia-card::before,.ia-body,.ia-chip{transition:none}}
.ia-card.ia-card.shake{animation:iaShake .5s cubic-bezier(.36,.07,.19,.97)}
.ia-card input.bad{border-color:#ff5d6c;box-shadow:0 0 0 3px rgba(255,93,108,.16)}
.ia-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#39e2a8;margin-right:8px;animation:iaDot 1.2s ease-in-out infinite}
@keyframes iaDot{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.ia-card .tg-st{font-size:13px;color:#8d9dbd;min-height:1.4em;margin-top:8px;text-align:center}
.ia-card .ia-field{animation:iaFade .5s both}.ia-card .ia-field:nth-of-type(2){animation-delay:.05s}.ia-card .ia-field:nth-of-type(3){animation-delay:.1s}
@media(prefers-reduced-motion:reduce){.ia-card.ia-card.shake,.ia-dot,.ia-card .ia-field{animation:none}}
#login.it .small,#login.it .foot{transition:opacity .5s}#login.it .card.ok .small,#login.it .card.ok .foot{opacity:0;pointer-events:none}