:root { --bg:#0b0f19; --card:#121a2b; --text:#e9eefc; --muted:#9aa7c7; --line:#22304e; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
.wrap { max-width:860px; margin:0 auto; padding:24px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.brand .logo { font-weight:800; letter-spacing:0.2px; font-size:22px; }
.brand .sub { color:var(--muted); font-size:13px; margin-top:4px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
h1 { margin:0 0 10px; font-size:22px; }
.muted { color:var(--muted); }
.hr { height:1px; background:var(--line); margin:18px 0; }
.row { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; background:#2a60ff; color:#fff; text-decoration:none; border:1px solid transparent; cursor:pointer; font-weight:600; }
.btn.ghost { background:transparent; border-color:#2a60ff; color:#cfe0ff; }
.foot { margin-top:18px; color:var(--muted); display:flex; gap:10px; align-items:center; }
.foot a { color:var(--muted); text-decoration:none; }
.tg { margin-top:12px; }
.kv { display:grid; grid-template-columns:160px 1fr; gap:10px 14px; }
.k { color:var(--muted); }
.v { font-weight:650; }
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 44px;
  width: auto;
  display: block;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(
      rgba(8, 12, 24, 0.75),
      rgba(8, 12, 24, 0.85)
    ),
    url("/assets/bg/main-bg.png") center / cover no-repeat;
  z-index: -1;
  filter: blur(2px);
  transform: scale(1.03);
}

/* --- Email auth UI --- */
.form { display:grid; gap:10px; margin-top:12px; }
.inp {
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  outline: none;
}
.inp:focus { border-color:#2a60ff; }
.formRow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.formMsg { font-size:13px; color: rgba(255,255,255,0.75); }
.formErr { font-size:13px; color:#ffb4b4; }

/* --- Mobile footer fix (RU/UA long strings) --- */
@media (max-width: 520px) {
  footer, .footer, .siteFooter, #footer {
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
    text-align: center;
  }

  footer a, .footer a, .siteFooter a, #footer a,
  footer span, .footer span, .siteFooter span, #footer span {
    white-space: normal;
    overflow-wrap: anywhere; /* ломает длинные слова/ссылки */
    word-break: break-word;
    font-size: 13px;
    line-height: 1.25;
  }

  /* если в футере есть "левый блок / правый блок" */
  footer > * , .footer > * , .siteFooter > * , #footer > * {
    flex: 0 1 auto;
  }
}