/* Layout: minimal centered welcome over a pinball grid: every route carries one light; it leaves dim and glows brighter after it bounces off the edge. */
  :root{
    color-scheme: dark;
    --bg:#0a1220;
    --bg2:#0b1528;
    --text:#e8eef9;
    --muted:#8e9bb3;
    --soft:#5f6e88;
    --blue:#7f9fd0;
    --blue-2:#9dbfee;
    --done:#96e2bd;
    --font:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  *{box-sizing:border-box}
  html,body{width:100%;height:100%;margin:0;overflow-x:hidden}
  body{
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 44%, rgba(40,62,105,.22), transparent 46%),
      linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
    background-color:var(--bg);
    color:var(--text);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
  }

  .page{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    isolation:isolate;
    overflow:hidden;
  }

  canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    animation:fade 1.6s ease-out backwards;
  }

  .vignette{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(circle at center, rgba(0,0,0,0) 34%, rgba(0,0,0,.16) 64%, rgba(0,0,0,.55) 100%);
  }

  .center{
    position:relative;
    z-index:2;
    width:min(420px, calc(100vw - 40px));
    text-align:center;
    padding:24px 10px 18px;
  }

  .logo{
    position:relative;
    width:116px;
    height:116px;
    margin:0 auto 16px;
    animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .logo::before{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:340px;height:340px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(70,105,170,.20), rgba(70,105,170,.07) 38%, rgba(70,105,170,0) 68%);
    opacity:.85;
    z-index:-1;
    pointer-events:none;
  }
  .logo .ic img{display:block;width:100%;height:100%}
  .logo .ic{
    display:block;width:100%;height:100%;border-radius:22.5%;overflow:hidden;
    box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(157,191,238,.14);
  }
  .logo.flash .ic{animation:icoflash .9s ease-out}
  .logo.flash::before{animation:glowflash .9s ease-out}

  .name{
    margin:0 0 22px;
    font-size:21px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--blue-2);
    animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) backwards;
  }

  h1{
    margin:0;
    font-size:clamp(30px, 3.4vw, 40px);
    line-height:1.08;
    letter-spacing:-.045em;
    font-weight:700;
    animation:rise .9s .26s cubic-bezier(.2,.7,.2,1) backwards;
  }

  .cta-wrap{
    margin-top:30px;
    animation:rise .9s .4s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .telegram{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 22px;
    border-radius:14px;
    border:1px solid #2b3a57;
    background:#1b2a44;
    color:#e8eef9;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    box-shadow:0 0 0 rgba(110,150,215,0), inset 0 1px 0 rgba(255,255,255,.08);
    transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, color .18s ease;
  }
  .telegram:hover, .telegram:focus-visible{
    transform:translateY(-1px);
    color:#fff;
    border-color:rgba(157,191,238,.55);
    box-shadow:0 0 28px rgba(110,150,215,.22), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .telegram .arr{display:inline-block;transition:transform .2s ease}
  .telegram:hover .arr, .telegram:focus-visible .arr{transform:translateX(4px)}

  .registered{
    margin-top:28px;
    font-size:14px;
    color:var(--muted);
    letter-spacing:-.01em;
    animation:rise .9s .54s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .login-link{
    margin-left:8px;
    color:var(--text);
    text-decoration:none;
    font-weight:700;
    transition:color .18s ease, text-shadow .18s ease;
  }
  .login-link:hover{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.16)}

  .login-panel{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-4px);
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease, margin-top .22s ease;
    margin-top:0;
  }
  .login-panel.open{
    max-height:220px;
    opacity:1;
    transform:translateY(0);
    margin-top:18px;
  }

  .inline-field{display:block;width:100%;margin:0 auto}
  .inline-field + .inline-field{margin-top:8px}
  .inline-field input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:var(--text);
    text-align:center;
    font:inherit;
    font-size:15px;
    padding:12px 6px;
    box-shadow:inset 0 -1px 0 rgba(140,170,230,.22);
    transition:box-shadow .18s ease;
  }
  .inline-field input::placeholder{color:rgba(160,180,215,.42)}
  .inline-field input:focus{box-shadow:inset 0 -1px 0 rgba(110,150,215,.7)}

  .enter-button{
    appearance:none;
    border:none;
    background:none;
    color:var(--text);
    font:inherit;
    font-size:15px;
    font-weight:700;
    margin-top:14px;
    cursor:pointer;
    transition:color .18s ease, text-shadow .18s ease, transform .18s ease;
  }
  .enter-button:hover{color:#fff;text-shadow:0 0 16px rgba(255,255,255,.14);transform:translateY(-1px)}

  .lang{
    margin-top:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    animation:rise .9s .66s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .lang-btn{
    appearance:none;
    border:0;
    background:none;
    padding:2px 3px;
    font:inherit;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--soft);
    cursor:pointer;
    transition:color .18s ease;
  }
  .lang-btn:hover{color:var(--muted)}
  .lang-btn[aria-pressed="true"]{color:var(--text)}
  .lang-sep{font-size:12px;color:var(--soft);opacity:.5}

  :focus-visible{outline:2px solid var(--blue-2);outline-offset:4px;border-radius:8px}

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes icoflash{
    0%{filter:drop-shadow(0 16px 30px rgba(0,0,0,.45)) brightness(1)}
    35%{filter:drop-shadow(0 0 42px rgba(157,191,238,.7)) brightness(1.28)}
    100%{filter:drop-shadow(0 16px 30px rgba(0,0,0,.45)) brightness(1)}
  }
  @keyframes glowflash{
    0%{transform:translate(-50%,-50%) scale(1);opacity:.85}
    35%{transform:translate(-50%,-50%) scale(1.4);opacity:1}
    100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
  }

  .center::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center, rgba(10,18,32,.88) 0%, rgba(10,18,32,.7) 38%, rgba(10,18,32,0) 70%);display:none}
  @media (max-width:720px){
    html,body,.page{height:100vh;height:100dvh}
    canvas{opacity:.8}
    .center::before{display:block}
    .center{padding:24px 16px 18px}
    .name{font-size:23px;margin-bottom:20px}
    h1{font-size:36px}
    .cta-wrap{margin-top:32px}
    .telegram{display:flex;justify-content:center;width:100%;max-width:340px;margin:0 auto;font-size:18px;padding:17px 24px;border-radius:16px}
    .registered{font-size:17px;margin-top:26px}
    .login-link{display:inline-block;padding:10px 6px}
    .inline-field input,.enter-button{font-size:18px}
    .lang-btn{padding:14px 12px;font-size:15px}
    .lang-sep{font-size:15px}
    .vignette{background:radial-gradient(circle at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.6) 100%)}
    .logo{width:100px;height:100px}
    .logo::before{width:280px;height:280px}
    .telegram{font-size:15px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
  }

  /* login card */
  .login-panel.open{max-height:330px}
  .login-form{max-width:320px;margin:0 auto}
  .login-card{border-radius:18px;border:1px solid rgba(157,191,238,.16);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
  .login-card:focus-within{border-color:rgba(157,191,238,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 4px rgba(127,159,208,.12),0 12px 36px rgba(60,100,170,.22)}
  .field{position:relative;display:block;height:58px}
  .field + .field{border-top:1px solid rgba(157,191,238,.12)}
  .field input{width:100%;height:100%;padding:22px 48px 6px 48px;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;text-align:left;outline:none;box-shadow:none;border-radius:0}
  .field input:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:#fff;transition:background-color 99999s ease-in-out 0s}
  .field .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--soft);transition:color .18s ease;pointer-events:none}
  .field:focus-within .ico{color:var(--blue-2)}
  .field .lbl{position:absolute;left:48px;top:29px;transform:translateY(-50%);color:var(--soft);font-size:16px;font-weight:500;pointer-events:none;transition:top .16s ease,font-size .16s ease,color .16s ease}
  .field input:focus + .lbl,.field input:not(:placeholder-shown) + .lbl{top:16px;font-size:11.5px;color:var(--blue-2)}
  .eye{position:absolute;right:8px;top:9px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--soft);cursor:pointer;transition:color .18s ease,background .18s ease}
  .eye:hover{color:var(--text);background:rgba(157,191,238,.08)}
  .eye svg{width:20px;height:20px}
  .eye .off{display:none}
  .eye.show .on{display:none}.eye.show .off{display:block}
  .enter-button{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-top:12px;border-radius:16px;border:0;background:linear-gradient(180deg,#e6effc,#9dbfee);color:#0a1220;font:inherit;font-size:16px;font-weight:800;letter-spacing:-.01em;cursor:pointer;box-shadow:0 8px 24px rgba(110,150,215,.26),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .18s ease,box-shadow .2s ease,filter .18s ease}
  .enter-button:hover,.enter-button:focus-visible{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 10px 30px rgba(110,150,215,.4),inset 0 1px 0 rgba(255,255,255,.8);text-shadow:none;color:#0a1220}
  .enter-button:active{transform:translateY(0)}

  /* состояния входа */
  .wait{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14px;flex-wrap:wrap}
  .wait[hidden],.err[hidden],.devbox[hidden]{display:none}
  .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(157,191,238,.25);border-top-color:var(--blue-2);animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  .lnk{appearance:none;border:0;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:6px 4px}
  .lnk:hover{color:#fff}
  .err{margin:16px auto 0;max-width:320px;font-size:14px;line-height:1.4;color:#f0a3a3}
  .devbox{margin:22px auto 0;max-width:320px;text-align:left;padding:14px;border-radius:16px;border:1px dashed rgba(157,191,238,.25);font-size:13px;color:var(--muted)}
  .devbox b{color:var(--text)}
  .devbox .row{display:flex;gap:8px;margin:10px 0}
  .devbox input{width:100%;min-width:0;padding:10px;border-radius:10px;border:1px solid rgba(157,191,238,.2);background:rgba(10,18,32,.6);color:var(--text);font:inherit;font-size:16px}
  .devbox button{width:100%;padding:10px;border-radius:10px;border:1px solid #2b3a57;background:#1b2a44;color:var(--text);font:inherit;font-weight:700;cursor:pointer}
  .telegram[aria-busy="true"]{opacity:.7;pointer-events:none}
/* Экран входа закреплён монолитом: ни прокрутки, ни «пружины», ни свайпа страницы. */
  html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
  html{background:radial-gradient(circle at 50% 44%,rgba(40,62,105,.22),transparent 46%) no-repeat,linear-gradient(180deg,var(--bg2),var(--bg)) no-repeat,var(--bg)}
  .page{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  input,button,a{touch-action:manipulation}
  @media (max-height:700px){.logo{width:84px;height:84px}.logo img{width:84px;height:84px}h1{font-size:30px}.name{margin-bottom:12px}.cta-wrap{margin-top:20px}.registered{margin-top:16px}}
.invb{margin:14px auto 0;max-width:340px;padding:10px 14px;border-radius:14px;background:rgba(127,159,208,.12);border:1px solid rgba(157,191,238,.3);color:#dbe6f6;font-size:14px;font-weight:700;text-align:center}
.invb[hidden]{display:none}.invb.bad{color:#f0a3a3;border-color:rgba(240,163,163,.35);background:rgba(240,163,163,.08)}

/* Умеренно компактный вид экрана приветствия и входа */
.center{width:min(340px, calc(100vw - 40px));padding:18px 8px 14px}
.logo{width:84px;height:84px;margin:0 auto 10px}
.logo::before{width:260px;height:260px}
.name{font-size:17px;margin:0 0 12px}
h1{font-size:30px;letter-spacing:-.03em}
.cta-wrap{margin-top:22px}
.telegram{font-size:16px;padding:13px 20px;border-radius:13px;gap:9px}
.registered{margin-top:16px;font-size:14px}
.login-link{margin-left:6px}
.lang-btn{font-size:13px}
.lang-sep{font-size:13px}
@media (max-width:720px){
  .center{width:min(340px, calc(100vw - 40px));padding:18px 12px 14px}
  .logo{width:84px;height:84px}
  .logo::before{width:260px;height:260px}
  .name{font-size:17px;margin-bottom:12px}
  h1{font-size:28px}
  .cta-wrap{margin-top:22px}
  .telegram{width:100%;max-width:300px;font-size:16px;padding:13px 20px;border-radius:13px}
  .registered{font-size:14px;margin-top:16px}
  .login-link{padding:6px 4px}
  .inline-field input,.enter-button{font-size:16px}
  .lang-btn{padding:8px 10px;font-size:13px}
  .lang-sep{font-size:13px}
}
@media (max-height:700px){.logo{width:68px;height:68px}.logo img{width:68px;height:68px}h1{font-size:24px}.name{margin-bottom:8px}.cta-wrap{margin-top:14px}}