/* Екран входу. Планшет тримають однією рукою — клавіатура по центру,
   клавіші такі ж великі, як плитки на самій панелі. */

.login-body{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;grid-template-columns:none;
}

.login{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:32px 36px 36px;border-radius:26px;
  border:1px solid var(--ace-border);
  background:color-mix(in srgb,var(--ace-bg) 70%,transparent);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.login-brand{font-size:44px;line-height:1}
.login h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.login-hint{margin:0;color:var(--ace-muted);font-size:14px;min-height:20px;text-align:center}
.login-hint.bad{color:var(--bad)}

.dots{display:flex;gap:14px;margin:6px 0 10px}
.dots i{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--ace-border);background:transparent;
  transition:background .12s,border-color .12s,transform .12s;
}
.dots i.on{background:var(--ace-fg);border-color:var(--ace-fg);transform:scale(1.12)}
.dots.bad i{border-color:var(--bad)}
.dots.bad{animation:shake-pin .32s}
@keyframes shake-pin{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pad button{
  width:96px;height:96px;border-radius:24px;
  border:1px solid var(--ace-border);background:var(--card);
  color:inherit;font:inherit;font-size:30px;font-weight:600;cursor:pointer;
  transition:transform .07s,background .15s;
}
.pad button:active{transform:scale(.92);background:var(--ace-fg);color:var(--ace-bg)}
.pad button.ghost{font-size:24px;color:var(--ace-muted);background:transparent}
.pad button:disabled{opacity:.35;pointer-events:none}

@media (max-height:700px){
  .pad button{width:78px;height:78px;font-size:26px;border-radius:20px}
  .login{padding:22px 26px 26px}
  .login-brand{font-size:34px}
}