body .app-main{
  padding-top:0;
  padding-bottom:0;
}

.keys-page{
  --bg:#eceae6;
  --card:#fff;
  --line:#e0ddd8;
  --line2:#d0cdc8;
  --muted:#9a9893;
  --dim:#5a5855;
  --ink:#1a1c2e;
  --blue:#3557e6;
  min-height:calc(100vh - 74px);
  width:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Mona Sans Variable','Mona Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 32px;
}

.keys-page .page{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.keys-page .enter-wrap{
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:16px;
  animation:up .5s ease both;
}
.keys-page .enter-title{font-size:22px;font-weight:700;letter-spacing:-.03em}
.keys-page .enter-sub{font-size:13px;color:var(--muted);line-height:1.55;margin-top:4px}
.keys-page .field-input{
  width:100%;padding:13px 16px;border-radius:12px;
  border:1.5px solid var(--line2);background:var(--card);
  font-family:inherit;font-size:14px;font-weight:500;
  color:var(--ink);outline:none;letter-spacing:.08em;
  transition:border-color .18s,box-shadow .18s;
}
.keys-page .field-input::placeholder{color:var(--muted);letter-spacing:0;font-weight:400}
.keys-page .field-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,87,230,.1)}
.keys-page .field-input.err{border-color:#b83232}
.keys-page .btn-main{
  width:100%;padding:13px;border-radius:12px;
  background:var(--blue);color:#fff;
  font-family:inherit;font-size:14px;font-weight:600;
  border:none;cursor:pointer;text-align:center;
  transition:background .18s,transform .18s;
}
.keys-page .btn-main:hover{background:#2944c4;transform:translateY(-1px)}
.keys-page .btn-main:active{transform:scale(.98)}
.keys-page .btn-main[disabled]{opacity:.82;cursor:wait;transform:none}
.keys-page .keys-auth-link{text-decoration:none}

.keys-page .keys-wrap{
  width:100%;max-width:680px;
  display:flex;flex-direction:column;
  align-items:center;gap:56px;
  animation:up .5s ease both;
}

.keys-page .main-block{
  display:flex;flex-direction:column;
  align-items:center;gap:16px;
  width:100%;
}
.keys-page .main-key{
  font-size:clamp(18px,4.5vw,42px);
  font-weight:700;letter-spacing:.15em;
  color:var(--ink);text-align:center;
  line-height:1.35;white-space:nowrap;
  cursor:pointer;
  transition:filter .3s ease,opacity .3s ease;
}
.keys-page .main-key.blur{filter:blur(12px);opacity:.35;user-select:none}
.keys-page .main-hint{
  font-size:12px;font-weight:500;color:var(--muted);
  display:flex;align-items:center;gap:5px;
  cursor:pointer;user-select:none;
  transition:color .18s;
}
.keys-page .main-hint:hover{color:var(--ink)}

.keys-page .divider{
  width:100%;
  display:flex;align-items:center;gap:16px;
}
.keys-page .divider-line{flex:1;height:1px;background:var(--line)}
.keys-page .divider-label{
  font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}

.keys-page .inv-list{
  width:100%;
  display:flex;flex-direction:column;
  gap:28px;
  align-items:center;
}
.keys-page .inv-item{
  display:flex;flex-direction:column;
  align-items:center;gap:8px;
  width:100%;
}
.keys-page .inv-key{
  font-size:clamp(16px,3.5vw,26px);
  font-weight:600;letter-spacing:.18em;
  color:var(--ink);text-align:center;
  line-height:1.4;word-break:break-all;
  cursor:pointer;
  transition:filter .3s ease,opacity .3s ease;
}
.keys-page .inv-key.blur{filter:blur(8px);opacity:.35;user-select:none}
.keys-page .inv-activated{
  font-size:clamp(16px,3.5vw,26px);
  font-weight:500;letter-spacing:-.01em;
  color:var(--muted);text-align:center;
}
.keys-page .inv-hint{
  font-size:11.5px;font-weight:500;color:var(--muted);
  cursor:pointer;user-select:none;
  transition:color .18s,opacity .3s;
}
.keys-page .inv-hint:hover{color:var(--ink)}
.keys-page .inv-hint.copied{color:#1e7a48}
.keys-page .inv-empty{
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:860px){
  .keys-page{
    min-height:calc(100vh - 68px);
    padding:34px 20px;
  }
}