/* ==========================================================================
   Shell — everything that lives outside #stage and survives page changes:
   dock, mobile sheet, language popover, login gate, tab bar, progress bar, toasts,
   plus the footer ("base") that closes every page.
   ========================================================================== */

.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic--up{transform:rotate(-90deg)}

/* ----------------------------------------------------------------- progress */
.nprog{position:fixed;inset:0 0 auto 0;height:2.5px;z-index:500;pointer-events:none;opacity:0;transition:opacity .3s}
.nprog i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--ice) 40%,#fff);box-shadow:0 0 16px rgba(168,220,255,.8)}
.nprog.is-on{opacity:1}
html[dir=rtl] .nprog i{transform-origin:100% 50%}

/* --------------------------------------------------------------------- dock */
.dock{
  position:fixed;z-index:200;top:14px;left:50%;transform:translateX(-50%);
  width:min(1240px,calc(100% - 24px));
}
.dock__bar{
  position:relative;display:flex;align-items:center;gap:6px;height:var(--dock-h);padding:0 10px 0 18px;
  border-radius:999px;
  background:linear-gradient(160deg,rgba(40,42,48,.62),rgba(22,23,27,.58));
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 50px -22px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  transition:background .3s,box-shadow .3s;
}
.dock.is-scrolled .dock__bar{background:linear-gradient(160deg,rgba(34,36,41,.82),rgba(16,17,20,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px -20px rgba(0,0,0,.95)}
.dock__brand{display:flex;align-items:center;gap:11px;margin-inline-end:10px;font-weight:650;font-size:17px;letter-spacing:-.03em;white-space:nowrap}
.dock__brand img{width:30px;height:30px;filter:drop-shadow(0 0 12px rgba(168,220,255,.35))}
.dock__nav{display:none;align-items:center;gap:2px;flex:1;min-width:0}
.dock__link{
  position:relative;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 15px;border-radius:999px;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;
  transition:color .2s,background .25s,box-shadow .25s;
}
.dock__link .ic{width:14px;height:14px;opacity:.7;transition:transform .3s var(--ease)}
.dock__link>.ic:first-child{width:17px;height:17px;opacity:.85;flex:none}
.dock__link:hover>.ic:first-child,.dock__link.is-on>.ic:first-child,.dock__group.is-on>.dock__link>.ic:first-child{opacity:1;color:var(--ice)}
.dock__link--accent>.ic:first-child{color:var(--ice);opacity:1}
.dock__link--accent::before{display:none}
.dock__link:hover,.dock__group:focus-within>.dock__link{color:#fff;background:rgba(255,255,255,.07)}
.dock__link.is-on,.dock__group.is-on>.dock__link{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 6px 18px -8px rgba(0,0,0,.8)}
.dock__link--accent{color:var(--ice)}
.dock__link--accent::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice)}
.dock__group{position:relative}
.dock__group.is-open>.dock__trigger .ic{transform:rotate(180deg)}
.dock__menu{
  position:absolute;top:calc(100% + 18px);left:50%;
  width:max-content;max-width:calc(100vw - 32px);padding:10px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,10px) scale(.98);transform-origin:50% 0;
  transition:opacity .22s,transform .3s var(--ease),visibility 0s .3s;
  background:linear-gradient(160deg,#22242a,#0f1014)!important;
  -webkit-backdrop-filter:blur(32px) saturate(1.3);backdrop-filter:blur(32px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px -30px #000;
}
.dock__menu::before{inset:-1px}
.dock__menu::after{content:"";position:absolute;left:0;right:0;top:-22px;height:22px;background:transparent;opacity:1}
.dock__group.is-open>.dock__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition:opacity .22s,transform .3s var(--ease),visibility 0s}
@media(hover:hover){.dock__group:hover>.dock__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition:opacity .22s,transform .3s var(--ease),visibility 0s}.dock__group:hover>.dock__trigger .ic{transform:rotate(180deg)}}
.dock__menu-grid{display:grid;gap:2px}
.dock__menu-grid--slim{grid-template-columns:minmax(300px,340px)}
.dock__menu-grid--wide{grid-template-columns:repeat(2,minmax(240px,280px))}
.dock__entry{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:16px;transition:background .2s}
.dock__entry:hover,.dock__entry:focus-visible{background:rgba(255,255,255,.08)}
.dock__entry.is-on{background:rgba(255,255,255,.1)}
.dock__entry-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid var(--edge);color:var(--ice)}
.dock__entry-ic .ic{width:19px;height:19px}
.dock__entry-tx{display:grid;gap:2px;min-width:0}
.dock__entry-tx b{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.dock__entry-tx small{font-size:12.5px;line-height:1.4;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dock__badge{display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:999px;font:600 11px/1.5 var(--ff-mono);font-style:normal;letter-spacing:.02em;color:#04131f;background:linear-gradient(180deg,#d4eeff,#8dd0ff);vertical-align:1px}
.dock__tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.dock__live{display:none;align-items:center;gap:9px;padding:0 12px;height:36px;border-radius:999px;font:500 12px/1 var(--ff-mono);color:var(--ink-3);transition:color .2s}
.dock__live:hover{color:#fff}
.dock__burger{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--edge)}
.dock__burger i{position:absolute;left:14px;right:14px;height:1.8px;border-radius:2px;background:#fff;transition:transform .4s var(--ease),top .4s var(--ease)}
.dock__burger i:first-child{top:18px}.dock__burger i:last-child{top:25px}
.dock__burger[aria-expanded=true] i:first-child{top:21.5px;transform:rotate(45deg)}
.dock__burger[aria-expanded=true] i:last-child{top:21.5px;transform:rotate(-45deg)}
@media(min-width:1080px){
  .dock__nav{display:flex}
  .dock__burger{display:none}
  .dock__tools{margin-inline-start:0}
}
@media(min-width:1560px){.dock__live{display:inline-flex}}
@media(max-width:1079px){.dock__tools .tongue{display:none}.dock__login{display:none}}
@media(max-width:520px){.dock{top:10px;width:calc(100% - 16px)}.dock__bar{padding:0 8px 0 14px;height:58px}.dock__brand{font-size:16px}.dock__brand img{width:26px;height:26px}.dock__burger{width:40px;height:40px}.dock__burger i{left:12px;right:12px}.dock__burger i:first-child{top:16px}.dock__burger i:last-child{top:22px}.dock__burger[aria-expanded=true] i{top:19px!important}}
@media(max-width:1200px) and (min-width:1080px){.dock__link{padding:0 10px;font-size:14px;gap:5px}.dock__link>.ic:first-child{display:none}}

/* -------------------------------------------------------------------- sheet */
.sheet{
  position:fixed;inset:0;z-index:190;padding:92px 14px 28px;
  background:rgba(7,8,10,.97);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .3s,transform .45s var(--ease),visibility 0s .45s;
}
.sheet.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .45s var(--ease),visibility 0s}
.sheet__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;max-width:560px;margin:0 auto;padding-bottom:40px;display:grid;gap:8px;align-content:start;grid-auto-rows:max-content}
.sheet__top{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:10px}
.sheet__link{display:flex;align-items:center;padding:16px 18px;border-radius:18px;font-size:19px;font-weight:600;letter-spacing:-.03em;background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.sheet__link.is-on{background:rgba(255,255,255,.12)}
.sheet__link--accent{color:var(--ice)}
.sheet__group{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--edge);overflow:hidden}
.sheet__group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:19px;font-weight:600;letter-spacing:-.03em;cursor:pointer}
.sheet__group>summary::-webkit-details-marker{display:none}
.sheet__group>summary .ic{transition:transform .35s var(--ease);opacity:.6}
.sheet__group[open]>summary .ic{transform:rotate(180deg)}
.sheet__items{display:grid;padding:2px 8px 10px}
.sheet__items a{display:flex;align-items:center;gap:13px;padding:12px 10px;border-radius:12px;font-size:16px;color:var(--ink-2)}
.sheet__items a .ic{color:var(--ice);width:19px;height:19px}
.sheet__items a.is-on,.sheet__items a:hover{background:rgba(255,255,255,.08);color:#fff}
.sheet__items--langs{grid-template-columns:1fr 1fr}
.sheet__lang-cur{display:inline-flex;align-items:center;gap:11px}
.tongue__flag{width:22px;height:16px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
/* mobile menu v2: quick tiles, accordion sections with icons and descriptions */
.sheet__quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.sheet__quick a{display:grid;justify-items:center;gap:7px;padding:14px 4px 12px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--edge);font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);text-align:center}
.sheet__quick a .ic{width:22px;height:22px;color:var(--ice)}
.sheet__quick a.is-accent{background:linear-gradient(160deg,rgba(168,220,255,.18),rgba(168,220,255,.06));border-color:rgba(168,220,255,.35);color:#fff}
.sheet__quick a.is-on,.sheet__quick a:active{background:rgba(255,255,255,.12);color:#fff}
.sheet__group>summary{gap:12px;padding:14px 16px;font-size:17px}
.sheet__gic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(168,220,255,.1);border:1px solid rgba(168,220,255,.22);flex:none}
.sheet__gic .ic{width:19px;height:19px;color:var(--ice);opacity:1;transform:none!important}
.sheet__gt{flex:1}
.sheet__cnt{font:500 11.5px var(--ff-mono);font-style:normal;color:var(--ink-3);padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.07)}
.sheet__group[open]{background:rgba(255,255,255,.07);border-color:rgba(168,220,255,.3)}
.sheet__items{padding:2px 8px 10px;gap:2px}
.sheet__items a{align-items:flex-start;padding:11px 10px}
.sheet__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--edge);flex:none}
.sheet__ic .ic{width:18px;height:18px}
.sheet__tx{display:grid;gap:2px;min-width:0}
.sheet__tx b{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sheet__tx small{font-size:12.5px;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sheet__lang>summary{font-size:15px}
.sheet__top{margin-bottom:12px}
@media(min-width:1080px){.sheet{display:none}}
@media(max-width:420px){.sheet__top{grid-template-columns:1fr}.sheet__items--langs{grid-template-columns:1fr}}

/* ------------------------------------------------------------ language pick */
.tongue{position:relative}
.tongue__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:999px;font:500 13px/1 var(--ff-mono);letter-spacing:.04em;color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid var(--edge);transition:background .2s,color .2s}
.tongue__btn:hover,.tongue__btn[aria-expanded=true]{background:rgba(255,255,255,.12);color:#fff}
.tongue__btn .ic{width:13px;height:13px;opacity:.6}
.tongue__pop{position:absolute;inset-inline-end:0;top:calc(100% + 16px);width:290px;padding:10px;z-index:30;background:linear-gradient(160deg,rgba(38,40,46,.96),rgba(18,19,23,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px -30px #000;transform-origin:100% 0;animation:pop-in .28s var(--ease)}
html[dir=rtl] .tongue__pop{transform-origin:0 0}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
.tongue__search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;margin-bottom:8px;border-radius:13px;background:rgba(0,0,0,.3);border:1px solid var(--edge)}
.tongue__search .ic{width:16px;height:16px;color:var(--ink-3)}
.tongue__search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px;color:var(--ink)}
.tongue__list{max-height:min(340px,52vh);overflow-y:auto;display:grid;gap:2px}
.tongue__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:14.5px;color:var(--ink-2);transition:background .15s,color .15s}
.tongue__item span{flex:1}
.tongue__item .ic{width:16px;height:16px;color:var(--ice)}
.tongue__item:hover,.tongue__item:focus-visible{background:rgba(255,255,255,.09);color:#fff}
.tongue__item.is-on{color:#fff;background:rgba(255,255,255,.07)}
.tongue__none{padding:16px;text-align:center;font-size:13px;color:var(--ink-3)}

/* --------------------------------------------------------------------- gate */
.gate{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,5,7,.62);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;
}
.gate.is-open{opacity:1;visibility:visible;transition:opacity .25s}
.gate__card{
  width:100%;max-width:452px;max-height:calc(100dvh - 40px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  padding:22px;border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(44,46,53,.94),rgba(17,18,22,.97));
  opacity:0;transform:translateY(18px) scale(.97);
  transition:transform .45s var(--ease),opacity .3s,margin-bottom .25s;
}
.gate__card::-webkit-scrollbar{display:none}
.gate.is-open .gate__card{opacity:1;transform:none}
.gate__card.is-shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.gate__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.gate__brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:650;letter-spacing:-.03em}
.gate__logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04));border:1px solid var(--edge-2);box-shadow:0 0 30px -6px rgba(168,220,255,.5)}
.gate__close{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--edge);color:var(--ink-2);transition:background .2s,color .2s,transform .3s var(--ease)}
.gate__close:hover{background:rgba(255,255,255,.14);color:#fff;transform:rotate(90deg)}
.gate__close .ic{width:16px;height:16px}
.gate__card.is-locked .gate__close{visibility:hidden}
.gate__card.is-locked .gate__tabs{opacity:.4;pointer-events:none}
.gate__tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:22px;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid var(--edge);transition:opacity .2s}
.gate__thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09));border:1px solid var(--edge-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -10px #000;transition:transform .45s var(--ease)}
.gate__tabs[data-tab=signup] .gate__thumb{transform:translateX(100%)}
html[dir=rtl] .gate__tabs[data-tab=signup] .gate__thumb{transform:translateX(-100%)}
.gate__tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-3);transition:color .25s}
.gate__tab .ic{width:16px;height:16px}
.gate__tab.is-on{color:#fff}
.gate__panel{display:none}
.gate__panel.is-on{display:block;animation:fade-up .45s var(--ease)}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}}
.gate__head{margin-bottom:20px}
.gate__head h2{font-size:28px;letter-spacing:-.045em;margin-bottom:8px}
.gate__head p{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.gate__head strong{color:var(--amber)}
.gate__err{display:none;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:16px;border-radius:14px;font-size:13.5px;line-height:1.45;color:#ffd0d0;background:rgba(255,100,100,.1);border:1px solid rgba(255,120,120,.3)}
.gate__err.is-on{display:flex}
.gate__err .ic{width:17px;height:17px;margin-top:1px;color:var(--rose)}
.gate__input{position:relative;display:flex;align-items:center;gap:10px;height:56px;padding:0 8px 0 18px;border-radius:18px;background:rgba(0,0,0,.35);border:1px solid var(--edge-2);box-shadow:inset 0 2px 10px rgba(0,0,0,.3);transition:border-color .2s,box-shadow .2s}
.gate__input:focus-within{border-color:rgba(168,220,255,.7);box-shadow:inset 0 2px 10px rgba(0,0,0,.3),0 0 0 4px rgba(168,220,255,.14)}
.gate__input>.ic{color:var(--ice);width:19px;height:19px}
.gate__in{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font:500 16px/1 var(--ff-mono);letter-spacing:.08em;color:var(--ink)}
.gate__in::placeholder{color:var(--ink-4);letter-spacing:.08em}
.gate__paste{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--ink-3);transition:background .2s,color .2s}
.gate__paste:hover{background:rgba(255,255,255,.1);color:#fff}
.gate__paste .ic{width:18px;height:18px}
.gate__code{height:56px;font-family:var(--ff-mono);letter-spacing:.12em;font-size:17px}
.gate__foot{margin-top:18px;text-align:center;font-size:14px;color:var(--ink-3)}
.gate__foot a{color:var(--ice);font-weight:550}
.gate__foot a:hover{color:#fff}
.gate__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;font-size:13.5px;font-weight:550;color:var(--ink-3);transition:color .2s}
.gate__back:hover{color:#fff}
.gate__back .ic{width:16px;height:16px}
.gate__badge{display:grid;place-items:center;width:54px;height:54px;margin-bottom:16px;border-radius:18px;color:var(--ice);background:rgba(168,220,255,.1);border:1px solid rgba(168,220,255,.25)}
.gate__badge .ic{width:26px;height:26px}
.gate__perks{display:grid;gap:10px;margin-bottom:22px}
.gate__perks li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;font-size:14.5px;color:var(--ink-2);background:rgba(255,255,255,.045);border:1px solid var(--edge)}
.gate__perks li span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--ice);background:rgba(168,220,255,.1);flex:none}
.gate__perks .ic{width:17px;height:17px}
.gate__step{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;font:500 11.5px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
.gate__step i{width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice)}
.gate__token{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 18px;margin-bottom:14px;border-radius:18px;background:rgba(0,0,0,.4);border:1px dashed rgba(168,220,255,.4)}
.gate__token code{font:600 clamp(15px,4.4vw,19px)/1 var(--ff-mono);letter-spacing:.07em;color:#fff;user-select:all;word-break:break-all}
.gate__copy{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid var(--edge-2);transition:background .2s;flex:none}
.gate__copy:hover{background:rgba(255,255,255,.18)}
.gate__copy .ic{width:15px;height:15px}
.gate__copy.is-ok{background:rgba(116,240,196,.16);border-color:rgba(116,240,196,.4);color:var(--mint)}
.gate__warn{display:flex;gap:12px;padding:14px;margin-bottom:14px;border-radius:16px;font-size:13.5px;line-height:1.5;color:#ffe3b8;background:rgba(255,196,112,.08);border:1px solid rgba(255,196,112,.28)}
.gate__warn .ic{color:var(--amber);flex:none;margin-top:1px}
.gate__warn p{color:inherit}
.gate__warn strong{color:#fff}
.gate__check{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.gate__check input{position:absolute;opacity:0;pointer-events:none}
.gate__box{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid var(--edge-3);background:rgba(0,0,0,.3);color:transparent;transition:all .25s var(--ease)}
.gate__box .ic{width:14px;height:14px;stroke-width:3}
.gate__check.is-checked .gate__box{background:linear-gradient(180deg,#d4eeff,#8dd0ff);border-color:transparent;color:#04131f;transform:scale(1.06)}
.gate__check:focus-within .gate__box{box-shadow:0 0 0 4px rgba(168,220,255,.2)}
.gate__hint{margin:6px 0 16px;font-size:13px;color:var(--ink-3);text-align:center}
.gate__hint.is-done{color:var(--mint)}
/* generated email + password login */
.gate__in--plain{letter-spacing:.01em;font:500 15.5px/1 var(--ff-mono)}
.gate__in--plain::placeholder{letter-spacing:0;font-size:14px}
.gate__paste[aria-pressed=true]{color:var(--ice)}
.gate__legacy{margin-top:10px;text-align:center;font-size:12.5px}
.gate__legacy a{color:var(--ink-4);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--edge-2);transition:color .2s}
.gate__legacy a:hover{color:var(--ink-2)}
.gate__perks li p{min-width:0;line-height:1.4}
.gate__perks li b{color:#fff;font-weight:650}
.gate__creds{margin-bottom:14px;padding:6px;border-radius:20px;background:rgba(0,0,0,.4);border:1px dashed rgba(168,220,255,.4);transition:opacity .25s}
.gate__creds.is-busy{opacity:.45;pointer-events:none}
.gate__cred{padding:10px 10px 10px 12px;border-radius:15px}
.gate__cred+.gate__cred{border-top:1px solid var(--edge);border-radius:0}
.gate__cred-k{display:flex;align-items:center;gap:7px;margin-bottom:7px;font:500 11px/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.gate__cred-k .ic{width:13px;height:13px;color:var(--ice)}
.gate__cred-v{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gate__cred-v code{min-width:0;font:600 clamp(14px,4vw,17px)/1.35 var(--ff-mono);letter-spacing:.02em;color:#fff;user-select:all;overflow-wrap:break-word;word-break:normal}
.gate__creds.is-new .gate__cred-v code{animation:cred-in .5s var(--ease)}
@keyframes cred-in{from{opacity:0;filter:blur(6px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}
.gate__copy--sm{height:34px;padding:0 12px;font-size:12.5px}
.gate__cred-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 4px 4px;border-top:1px solid var(--edge)}
.gate__act{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:6px 8px;border-radius:12px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid var(--edge);transition:background .2s,color .2s,border-color .2s}
.gate__act:hover{background:rgba(255,255,255,.12);color:#fff}
.gate__act:disabled{opacity:.5;cursor:default}
.gate__act .ic{width:15px;height:15px;flex:none}
.gate__act.is-ok{background:rgba(116,240,196,.14);border-color:rgba(116,240,196,.4);color:var(--mint)}
#gateRegen{color:var(--ice);border-color:rgba(168,220,255,.3);background:rgba(168,220,255,.08)}
#gateRegen:hover{background:rgba(168,220,255,.16);color:#fff}
#gateRegen.is-spin .ic{animation:spin .7s linear infinite}
.gate__privacy{display:flex;gap:12px;padding:14px;margin-bottom:10px;border-radius:16px;font-size:13.5px;line-height:1.5;color:#cdeeff;background:rgba(168,220,255,.07);border:1px solid rgba(168,220,255,.25)}
.gate__privacy .ic{color:var(--mint);flex:none;margin-top:1px}
.gate__privacy b{color:#fff}
.gate__head p strong{color:var(--amber)}
@media(max-width:400px){
  .gate__cred-actions{grid-template-columns:1fr 1fr}
  #gateRegen{grid-column:1/-1}
  .gate__copy--sm span{display:none}
  .gate__copy--sm{width:38px;padding:0;justify-content:center}
}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.2px solid rgba(0,0,0,.2);border-top-color:currentColor;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.gate{align-items:flex-end;padding:10px}.gate__card{padding:18px;border-radius:30px;max-height:calc(100dvh - 20px)}.gate__head h2{font-size:25px}}

/* ------------------------------------------------------------------ tab bar */
.tabbar{
  position:fixed;z-index:180;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:none;width:min(440px,calc(100% - 20px));padding:6px;
  grid-template-columns:repeat(6,1fr);gap:2px;
  border-radius:26px;background:linear-gradient(160deg,rgba(40,42,48,.78),rgba(18,19,23,.82));border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px -16px #000;
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
}
.tabbar__item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 8px;border-radius:20px;font-size:10.5px;font-weight:550;letter-spacing:0;color:var(--ink-3);transition:color .2s,background .3s}
.tabbar__item .ic{width:21px;height:21px}
.tabbar__item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar__item.is-on{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.tabbar__item.is-on .ic{color:var(--ice)}
/* phone: no bottom tab bar, navigation lives in the top menu */
@media(max-width:899px){.tabbar{display:none!important}}

/* ------------------------------------------------------------------- toasts */
.toasts{position:fixed;z-index:2147483000;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;width:min(392px,calc(100vw - 40px));pointer-events:none}
.toast{
  --tc:var(--ice);
  position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:12px;padding:14px 12px 16px 16px;pointer-events:auto;
  border-radius:20px;font:550 14px/1.45 var(--ff);color:#fff;
  background:linear-gradient(160deg,rgba(46,48,55,.94),rgba(20,21,25,.96));border:1px solid var(--edge-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px -16px #000;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;transform:translateX(26px) scale(.97);transition:opacity .28s,transform .45s var(--ease);
}
.toast.is-in{opacity:1;transform:none}
.toast.is-out{opacity:0;transform:translateX(26px) scale(.97)}
.toast--error{--tc:var(--rose)}.toast--warn{--tc:var(--amber)}.toast--success{--tc:var(--mint)}.toast--info{--tc:var(--ice)}
.toast__ic{display:flex;flex:none;width:22px;height:22px;margin-top:1px;color:var(--tc)}
.toast__ic svg{width:22px;height:22px}
.toast__tx{flex:1;min-width:0;overflow-wrap:anywhere;padding-top:1px}
.toast__x{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-top:-3px;border-radius:50%;color:var(--ink-3);transition:background .2s,color .2s}
.toast__x:hover,.toast__x:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.toast__x svg{width:14px;height:14px}
.toast__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tc);opacity:.6;transform-origin:0 50%;animation:toast-bar 3s linear forwards}
.toast:hover .toast__bar{animation-play-state:paused}
.toast.is-shake{animation:shake .3s}
@keyframes toast-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
html[dir=rtl] .toast__bar{transform-origin:100% 50%}
@media(max-width:640px){.toasts{left:12px;right:12px;width:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}.toasts.has-tabbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}.toast{transform:translateY(20px)}.toast.is-out{transform:translateY(20px)}}

/* ----------------------------------------------------------------- footer */
.base{position:relative;margin-top:clamp(16px,2vw,28px);padding:0 0 30px;overflow:hidden;border-top:1px solid var(--edge);
  background:radial-gradient(900px 360px at 8% 0,rgba(108,196,255,.07),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.045))}

/* top row: statement + payment rail */
.base__top-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(30px,4.2vw,50px) 0 clamp(26px,3.6vw,40px);border-bottom:1px solid var(--edge)}
.base__say h2{max-width:13ch;font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.05em;margin-bottom:16px}
.base__say p{max-width:44ch;margin-bottom:28px;font-size:clamp(15px,1.5vw,17.5px);line-height:1.65;color:var(--ink-2)}
.ftpay{border-radius:var(--r-lg);border:1px solid var(--edge-2);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));overflow:hidden}
.ftpay__head{display:flex;flex-direction:column;gap:5px;padding:18px 22px;border-bottom:1px solid var(--edge)}
.ftpay__head b{font-size:16px;font-weight:620;letter-spacing:-.02em;color:var(--ink)}
.ftpay__head span{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.ftpay__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ftpay__cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 18px;border-inline-end:1px solid var(--edge);border-bottom:1px solid var(--edge);transition:background .3s}
.ftpay__cell:nth-child(4n){border-inline-end:0}
.ftpay__cell:nth-last-child(-n+4){border-bottom:0}
.ftpay__cell::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.ftpay__cell:hover{background:color-mix(in srgb,var(--c) 9%,transparent)}
.ftpay__cell:hover::after{transform:scaleX(1)}
.ftpay__cell img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 22px -10px var(--c);filter:saturate(.9);transition:filter .3s,transform .4s var(--ease-spring)}
.ftpay__cell:hover img{filter:none;transform:rotate(-8deg) scale(1.06)}
.ftpay__t b{display:block;font:600 15px/1 var(--ff-mono);letter-spacing:-.01em;color:var(--ink)}
.ftpay__t em{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--ink-3)}

/* middle: link columns + locations */
.base__main{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding:clamp(26px,3.4vw,40px) 0}
.base__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.base__col h4,.where h4{margin-bottom:18px;font-size:14px;font-weight:620;letter-spacing:-.01em;color:var(--ink)}
.base__col ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.base__col a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-3);transition:color .2s,transform .25s var(--ease)}
.base__col a:hover{color:#fff;transform:translateX(3px)}
html[dir=rtl] .base__col a:hover{transform:translateX(-3px)}
.base__badge{font:600 10.5px/1.6 var(--ff-mono);font-style:normal;padding:1px 8px;border-radius:999px;color:#04131f;background:linear-gradient(180deg,#d4eeff,#8dd0ff)}
.base__badge--free{background:linear-gradient(180deg,#b9ffe3,#6fe8b9)}
.where{padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);border:1px solid var(--edge);background:rgba(255,255,255,.03);align-self:start}
.where__list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0 0 6px;padding:0;list-style:none}
.where__list a{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--edge);font-size:14px;color:var(--ink-2);transition:color .2s,padding .25s var(--ease)}
.where__list a:hover{color:#fff;padding-inline-start:5px}
.where__list .cc{flex:none;width:22px;height:15px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.where__all{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ice)}
.where__all .ic{width:15px;height:15px;transition:transform .3s var(--ease)}
.where__all:hover .ic{transform:translateX(4px)}
html[dir=rtl] .where__all .ic{transform:scaleX(-1)}

/* oversized wordmark */
.base__mark{margin:0 -.04em;text-align:center;white-space:nowrap;user-select:none;pointer-events:none;
  font-size:clamp(40px,12vw,176px);line-height:.85;font-weight:700;letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.24);font-variant-ligatures:none;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%);
  padding-bottom:.04em;margin-bottom:clamp(8px,1.5vw,20px)}

/* legal line */
.base__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 28px;padding-top:24px;border-top:1px solid var(--edge);font-size:13.5px;color:var(--ink-3)}
.base__legal{display:grid;gap:5px;min-width:0}
.base__logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px;font-size:17px;font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.base__legal p{margin:0;color:var(--ink-3);max-width:70ch}
.base__legal b{color:var(--ink);font-weight:600}
.base__mute{font-size:12.5px;color:var(--ink-4)!important}
.base__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.base__links>a{color:var(--ink-3);transition:color .2s}
.base__links>a:hover{color:#fff}
.base__status{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:999px;font:500 12px/1 var(--ff-mono);color:var(--ink-2)!important;background:rgba(116,240,196,.07);border:1px solid rgba(116,240,196,.22);transition:background .2s}
.base__status:hover{background:rgba(116,240,196,.14)}
.base__top{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--edge);color:var(--ink-2);transition:background .2s,transform .3s var(--ease)}
.base__top:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-3px)}

@media(max-width:1020px){
  .base__top-row,.base__main{grid-template-columns:minmax(0,1fr)}
  .base__say h2{max-width:none}
}
@media(max-width:700px){
  .base__cols{grid-template-columns:1fr 1fr}
  .base__col:nth-child(3),.base__col:last-child{grid-column:1/-1}
  .ftpay__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftpay__cell:nth-child(4n){border-inline-end:1px solid var(--edge)}
  .ftpay__cell:nth-child(2n){border-inline-end:0}
  .ftpay__cell:nth-last-child(-n+4){border-bottom:1px solid var(--edge)}
  .ftpay__cell:nth-last-child(-n+2){border-bottom:0}
  .where__list{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.ftpay__cell::after,.ftpay__cell img{transition:none}}

/* ------------------------------------------------------- page transitions */
/* content area fades out, swaps while invisible, then fades in (router.js). The dock and backdrop never move. */
#stage{transition:opacity .13s ease}
#stage.is-leaving{opacity:0;pointer-events:none}
#stage.is-entering{animation:stage-in .26s ease-out both}
@keyframes stage-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.vx-busy,html.vx-busy *{cursor:progress}
#stage{min-height:70vh}
@media(prefers-reduced-motion:reduce){#stage,#stage.is-entering{transition:none;animation:none}}

/* desktop: bigger, readable logo */
@media(min-width:900px){.dock__brand{gap:12px;font-size:19px}.dock__brand img{width:46px;height:46px;flex:none}}
@media(min-width:1080px) and (max-width:1200px){.dock__brand img{width:40px;height:40px}.dock__brand{font-size:17px}}
@media(min-width:1201px) and (max-width:1560px){.dock__link{padding:0 10px;gap:5px}.dock__brand{margin-inline-end:4px;font-size:18px}.dock__brand img{width:42px;height:42px}}

/* words captcha (login + sign-up) */
.gate__cap{margin:14px 0 4px}
.gate__cap-row{display:flex;align-items:center;gap:8px;margin:6px 0 8px}
.gate__cap-img{display:block;flex:1;min-width:0;max-width:240px;width:100%;height:auto;aspect-ratio:240/76;border-radius:12px;background:#f3f4f8;border:1px solid rgba(255,255,255,.12)}
.gate__cap-row .gate__act{flex:none;width:44px;height:44px;min-height:44px}
.gate__cap-in{width:100%;height:46px;padding:0 14px;border-radius:12px;font-size:16px;letter-spacing:.08em;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--ink)}
.gate__cap-in:focus{border-color:rgba(116,240,196,.6)}