:root{--a:#7c7cff;--c:#22d3ee;--m:#8e8e98;--e:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}[hidden]{display:none!important}
html,body{height:100%}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif;background:#050508;color:#f5f5f7;overflow:hidden;-webkit-font-smoothing:antialiased}
/* вимикає zoom по двотапу на мобільних (pinch-zoom лишається доступним) */
html,body{touch-action:manipulation}
.bg i{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;animation:d 22s ease-in-out infinite alternate}
.bg i:nth-child(1){width:46vmax;height:46vmax;background:#4f46e5;top:-16vmax;left:-10vmax}
.bg i:nth-child(2){width:38vmax;height:38vmax;background:#0891b2;bottom:-14vmax;right:-8vmax;animation-delay:-8s}
.bg i:nth-child(3){width:26vmax;height:26vmax;background:#9333ea;top:35%;left:55%;animation-delay:-14s;opacity:.3}
.bg i:nth-child(4){width:18vmax;height:18vmax;background:#22d3ee;bottom:10%;left:20%;animation-delay:-4s;opacity:.22}
.bg i{transition:translate .5s var(--e)}
@keyframes d{to{transform:translate3d(6vmax,-4vmax,0) scale(1.15)}}
nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:20px 26px;z-index:5}
.logo{letter-spacing:.35em;font-size:14px;font-weight:700;background:linear-gradient(135deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
main{height:100%;display:grid;place-items:center;padding:24px;perspective:1300px}
.card{position:relative;overflow:hidden;width:100%;max-width:440px;padding:40px 34px;border-radius:32px;background:rgba(30,30,38,.5);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--e);animation:in 1.1s var(--e) backwards}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),transparent 45%)}
.card>*{animation:up .9s var(--e) backwards}
.card>:nth-child(1){animation-delay:.15s}.card>:nth-child(2){animation-delay:.22s}.card>:nth-child(3){animation-delay:.29s}.card>:nth-child(4){animation-delay:.36s}.card>:nth-child(5){animation-delay:.43s}.card>:nth-child(6){animation-delay:.5s}
@keyframes in{from{opacity:0;transform:translateY(50px) rotateX(16deg) scale(.95)}}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.sub{color:var(--m);font-size:15px;margin-bottom:26px}
.st{list-style:none;margin-bottom:28px}
.st li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.st li:first-child{border:0}
.st b{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:13px;color:var(--c);background:rgba(255,255,255,.06)}
.btn{width:100%;padding:16px;border:0;border-radius:18px;font:600 16px inherit;font-family:inherit;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--a),#4f8cff 60%,var(--c));box-shadow:0 10px 30px rgba(99,102,241,.4);transition:transform .4s var(--e),box-shadow .4s var(--e),opacity .3s}
.btn:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 18px 44px rgba(99,102,241,.55)}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.55;pointer-events:none}
#cp{margin-top:0;background:rgba(255,255,255,.08);box-shadow:none}
.foot{margin-top:20px;text-align:center;font-size:12px;color:var(--m)}
.err{margin-top:16px;padding:12px 14px;border-radius:14px;font-size:13px;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);animation:up .5s var(--e)}
.pg{display:flex;gap:8px;margin-bottom:22px}
.pg i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.pg i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--a),var(--c));transform-origin:left;animation:fill 1.1s .4s var(--e) backwards}
@keyframes fill{from{transform:scaleX(0)}}
.badge{display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;color:#34d399;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3)}
.k{perspective:700px;text-align:center;padding:20px 10px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font:600 20px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;color:var(--c);word-break:break-all}
.k span{display:inline-block;animation:flip .9s var(--e) backwards;animation-delay:calc(var(--n)*50ms)}
@keyframes flip{from{opacity:0;transform:rotateX(-100deg) translateY(12px)}}
#lang{position:relative}
#lang button{display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;color:inherit;cursor:pointer;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:background .3s,border-radius .4s var(--e)}
#lang button:hover{background:rgba(255,255,255,.13)}
#lang .car{font-size:10px;display:inline-block;transition:transform .4s var(--e);opacity:.7}
#lang.o .car{transform:rotate(180deg)}
#lang.o button{border-radius:18px 18px 0 0}
/* плавне "розкриття" панелі мов — висота росте від 0, а не просто fade.
   overflow:hidden + max-height на самій .dd (а не лише на ul) прибирає
   "хвостик" з рамки/бордера ul, який лишався видимим у згорнутому стані
   при старому grid-template-rows:0fr трюку.
   ВАЖЛИВО: dd має ширину РІВНО як у кнопки (width:100% від #lang, а не
   max-content) — інакше список виглядає як окремий ширший блок, а не
   продовження тієї ж пігулки, що просто розкрилась вниз. */
#lang .dd{position:absolute;left:0;right:0;top:100%;overflow:hidden;max-height:0;transition:max-height .45s var(--e);z-index:6;pointer-events:none}
#lang.o .dd{max-height:min(420px,70vh);pointer-events:auto}
#lang .dd ul{list-style:none;padding:6px;border-radius:18px;transition:border-radius .4s var(--e);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-top:0;box-shadow:0 24px 50px rgba(0,0,0,.5);max-height:min(420px,70vh);overflow-y:auto}
#lang.o .dd ul{border-radius:0 0 18px 18px}
#lang li{white-space:nowrap;padding:10px 12px;border-radius:11px;cursor:pointer;font-size:14px;transition:background .2s,transform .2s}
#lang li:hover{background:rgba(255,255,255,.09);transform:translateX(2px)}#lang li.s{color:var(--c)}

/* перемикання видів (стартовий екран / активний ключ / ключ недоступний) */
.loadbox{display:flex;justify-content:center;padding:30px 0}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--c);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.view{animation:up .6s var(--e) backwards}
.badge.gone{color:#fca5a5;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3)}

/* блок таймера, що показує скільки лишилось часу дії ключа */
.tbox{text-align:center;margin:16px 0}
.tval{font:700 26px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.03em;background:linear-gradient(135deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}

/* невеликий "3D" декоративний елемент — плавно обертова орбіта над бейджем */
.orb3d{display:flex;justify-content:center;margin-bottom:6px;perspective:300px}
.orb3d i{width:34px;height:34px;border-radius:50%;position:relative;background:conic-gradient(from 0deg,var(--a),var(--c),var(--a));animation:spin3d 5s linear infinite;box-shadow:0 0 26px rgba(124,124,255,.55)}
.orb3d i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0a0a10}
@keyframes spin3d{from{transform:rotateY(0) rotateX(55deg)}to{transform:rotateY(360deg) rotateX(55deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}