/* DoggoVPN — page CSS. Requires base.css loaded first. */

body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }.container { max-width:1280px; margin:0 auto; padding:0 32px; width:100%; }

/* NAV */
nav {
  position:sticky; top:0; z-index:50;
  background:rgba(253,250,242,0.95); backdrop-filter:blur(14px);
  height:84px; display:flex; align-items:center;
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 32px;
  width:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-back {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px;
  background:var(--bg-card); border:1.5px solid var(--border);
  font-size:15px; font-weight:600; color:var(--text);
  transition:all .2s;
}
.nav-back:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-light); }

/* AUTH PAGE */
main.auth {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px 80px;
}
.auth-card {
  width:100%;
  max-width:460px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:24px;
  padding:48px 40px;
  box-shadow:0 8px 40px rgba(20,20,20,0.04);
}
.auth-mascot {
  width:88px; height:88px;
  border-radius:50%; object-fit:cover;
  margin:0 auto 20px;
  display:block;
  border:3px solid var(--gold-light);
}
.auth-title {
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:28px;
  text-align:center;
  margin-bottom:10px;
  color:var(--text);
}
.auth-sub {
  text-align:center;
  color:var(--text-2);
  font-size:15px;
  margin-bottom:28px;
  line-height:1.55;
}
.field { margin-bottom:18px; }
.field label {
  display:block;
  font-size:13px; font-weight:600;
  color:var(--text-2);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.field input {
  width:100%;
  padding:14px 16px;
  font-size:16px;
  font-family:inherit;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  color:var(--text);
  transition:all .2s;
  outline:none;
}
.field input:focus {
  border-color:var(--gold);
  background:var(--bg-card);
  box-shadow:0 0 0 4px var(--gold-light);
}
.field input.input-mono { font-family:'JetBrains Mono', 'Courier New', monospace; letter-spacing:0.05em; }
.field input.input-readonly { background:var(--bg-section); color:var(--text-2); cursor:default; }

/* Password input with show/hide toggle — used by login.html /
   register.html / set-password.html which all load auth.css.
   The account.css modal scope re-declares this with higher specificity
   so it also wins inside .chgemail-modal cascading. */
.pwd-field { position:relative; }
.pwd-field input { padding-right:48px; }
.pwd-toggle {
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:0;
  border-radius:10px;
  font-size:18px; line-height:1;
  color:var(--text-2);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.pwd-toggle:hover { background:var(--bg-section); color:var(--text); }
.pwd-toggle:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Бейдж "Письмо отправлено" */
.email-sent-badge {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg, rgba(29,158,117,0.08), rgba(29,158,117,0.03));
  border:1.5px solid rgba(29,158,117,0.25);
  border-radius:12px;
  margin-bottom:18px;
  font-size:14px; line-height:1.5;
  color:var(--text);
  animation:slideIn .35s ease-out;
}
.email-sent-badge .icon { font-size:20px; flex-shrink:0; }
.email-sent-badge .text strong { color:var(--green); display:block; margin-bottom:2px; }
.email-sent-badge .text span { color:var(--text-2); font-size:13px; }

.btn-primary {
  width:100%;
  padding:15px 20px;
  font-size:16px; font-weight:700;
  font-family:inherit;
  background:var(--gold);
  color:var(--gold-text);
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:hover { background:var(--gold-hover); transform:translateY(-1px); box-shadow:0 8px 20px rgba(232,184,0,0.25); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-oauth-google {
  width:100%;
  padding:15px 20px;
  margin-bottom:18px;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  background:#fff;
  color:var(--text);
  border:1.5px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.btn-oauth-google:hover {
  border-color:var(--gold);
  background:var(--bg);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(20,20,20,0.05);
}
.oauth-google-mark {
  width:20px;
  height:20px;
  flex-shrink:0;
  display:inline-block;
}
.oauth-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:2px 0 18px;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.oauth-divider::before,
.oauth-divider::after {
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

.btn-link {
  display:block; width:100%;
  margin-top:10px;
  padding:10px;
  background:transparent;
  border:none;
  color:var(--text-2);
  font-size:13px; font-weight:600;
  font-family:inherit;
  cursor:pointer;
  text-align:center;
  transition:color .2s;
}
.btn-link:hover { color:var(--gold); }

.auth-switch {
  margin-top:22px;
  text-align:center;
  font-size:14px;
  color:var(--text-2);
}
.auth-switch a { color:var(--gold); font-weight:600; }
.auth-switch a:hover { text-decoration:underline; }

.error-msg {
  margin-top:10px;
  padding:10px 14px;
  background:rgba(216,90,48,0.08);
  border:1px solid rgba(216,90,48,0.25);
  border-radius:10px;
  color:var(--red);
  font-size:13px;
  font-weight:500;
  display:none;
}
.error-msg.show { display:block; animation:shake .35s; }

@keyframes slideIn {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}

/* ===== ЛК ===== */
.account-wrap { padding:48px 0 80px; flex:1; }
.account-head {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  margin-bottom:32px;
}
.account-greeting h1 {
  font-family:'Nunito',sans-serif;
  font-weight:900; font-size:32px;
  margin-bottom:4px;
}
.account-greeting p { color:var(--text-2); font-size:15px; }
.btn-logout {
  padding:10px 18px; border-radius:999px;
  background:var(--bg-card); border:1.5px solid var(--border);
  font-size:14px; font-weight:600; color:var(--text-2);
  cursor:pointer; transition:all .2s; font-family:inherit;
}
.btn-logout:hover { border-color:var(--red); color:var(--red); }

.account-empty {
  text-align:center;
  padding:48px 24px;
  background:var(--bg-card);
  border:1.5px dashed var(--border);
  border-radius:18px;
  color:var(--text-2);
}

/* ===== Страж — гейт авторизации ===== */
.guard {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
}
.guard-card {
  text-align:center;
  max-width:420px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:24px;
  padding:48px 40px;
  box-shadow:0 8px 40px rgba(20,20,20,0.04);
}
.guard-card .emoji { font-size:56px; margin-bottom:12px; line-height:1; }
.guard-card h2 {
  font-family:'Nunito',sans-serif;
  font-weight:900; font-size:24px;
  margin-bottom:8px;
}
.guard-card p { color:var(--text-2); font-size:15px; margin-bottom:24px; line-height:1.55; }
.guard-card .btn-primary { margin-bottom:8px; }

@media (max-width:768px) {
  .container { padding:0 18px; }
  .nav-inner { padding:0 18px; }
  nav { height:64px; }
  .nav-logo img { width:38px; height:38px; }
  .nav-logo-name { font-size:18px; }
  .nav-back { padding:8px 14px; font-size:13px; }
  .auth-card { padding:32px 24px; border-radius:18px; }
  .auth-title { font-size:24px; }
  .auth-mascot { width:72px; height:72px; }
  .account-greeting h1 { font-size:24px; }
  .guard-card { padding:36px 24px; }
}

/* SPEC-054 — login-method pill toggle (password ↔ TG-OTP) */

.login-method-pill {
  position:relative;
  display:flex;
  background:var(--bg-section, rgba(0,0,0,0.04));
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:4px;
  margin:0 0 18px;
  user-select:none;
}
.login-method-btn {
  flex:1;
  position:relative; z-index:2;
  padding:10px 16px;
  background:transparent;
  border:none;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--text-2);
  cursor:pointer;
  border-radius:999px;
  transition:color .2s ease;
  white-space:nowrap;
}
.login-method-btn.is-active { color:var(--gold-text); }
.login-method-glider {
  position:absolute;
  top:4px; left:4px;
  height:calc(100% - 8px);
  width:calc(50% - 4px);
  background:var(--gold);
  border-radius:999px;
  transition:transform .25s ease;
  box-shadow:0 2px 8px rgba(232,184,0,0.20);
  z-index:1;
}
.login-method-pill[data-active="tgotp"] .login-method-glider {
  transform:translateX(100%);
}