:root {
  --club-login-ink: #111111;
  --club-login-paper: #f6f0e5;
  --club-login-pink: #efafd5;
  --club-login-blue: #aec6e9;
}

body[data-path="login"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at 86% 14%, var(--club-login-blue) 0 13rem, transparent 13.1rem),
    radial-gradient(circle at 4% 92%, var(--club-login-pink) 0 16rem, transparent 16.1rem),
    var(--club-login-paper);
  color: var(--club-login-ink);
}

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] .page-breadcrumbs {
  display: none !important;
}

body[data-path="login"] .web-page,
body[data-path="login"] .page_content {
  max-width: none !important;
  padding: 0 !important;
}

body[data-path="login"] .for-login,
body[data-path="login"] .for-forgot,
body[data-path="login"] .for-signup,
body[data-path="login"] .for-email-login {
  width: min(100% - 32px, 480px);
  margin: clamp(32px, 9vh, 96px) auto;
}

body[data-path="login"] .page-card {
  border: 0 !important;
  border-radius: 28px !important;
  padding: clamp(24px, 5vw, 48px) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.12) !important;
}

body[data-path="login"] .page-card-head::before {
  content: "Клуб ПсиХакинг";
  display: block;
  margin-bottom: 28px;
  color: var(--club-login-ink);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

body[data-path="login"] .app-logo,
body[data-path="login"] .page-card-head img[src*="frappe"] {
  content: url("/assets/club_core/images/favicon.ico");
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 18px !important;
  object-fit: contain;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .indicator {
  color: var(--club-login-ink) !important;
  font-size: clamp(26px, 4.5vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}

body[data-path="login"] .form-control {
  min-height: 52px;
  border: 1px solid #b8b1a7 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--club-login-ink) !important;
}

body[data-path="login"] .btn {
  min-height: 48px;
  border-radius: 999px !important;
  font-weight: 750 !important;
}

body[data-path="login"] .btn-primary {
  border-color: var(--club-login-ink) !important;
  background: var(--club-login-ink) !important;
  color: #fff !important;
}

body[data-path="login"] a {
  color: var(--club-login-ink) !important;
  font-weight: 650;
}

body[data-path="me"] {
  min-height: 100vh;
  background: radial-gradient(circle at 92% 8%, var(--club-login-blue) 0 12rem, transparent 12.1rem), radial-gradient(circle at 2% 96%, var(--club-login-pink) 0 15rem, transparent 15.1rem), var(--club-login-paper);
  color: var(--club-login-ink);
}

body[data-path="me"] .navbar,
body[data-path="me"] .web-footer,
body[data-path="me"] .page-breadcrumbs { display: none !important; }
body[data-path="me"] .web-page { max-width: none !important; padding: 0 !important; }
body[data-path="me"] .page_content { width: min(100% - 32px, 820px); margin: 0 auto; padding: clamp(28px, 7vw, 72px) 0 80px !important; }
body[data-path="me"] .my-account-container::before { content: "Клуб ПсиХакинг"; display: block; margin-bottom: 40px; font-size: 16px; font-weight: 850; letter-spacing: -.02em; }
body[data-path="me"] .my-account-header { margin: 0 0 24px; color: var(--club-login-ink); font-size: clamp(40px, 7vw, 64px); line-height: .95; letter-spacing: -.055em; font-weight: 800; }
body[data-path="me"] .account-info { gap: 12px; }
body[data-path="me"] .account-info > .col { min-height: 88px; padding: 20px 22px !important; border: 0 !important; border-radius: 20px; background: #fff; }
body[data-path="me"] .account-info > .col:first-child { min-height: 112px; background: var(--club-login-pink); }
body[data-path="me"] .account-info > .col:nth-child(2) { background: #f5d762; }
body[data-path="me"] .account-info > .col:nth-child(3) { background: var(--club-login-blue); }
body[data-path="me"] .my-account-name { color: var(--club-login-ink); font-size: 22px; font-weight: 800; }
body[data-path="me"] .my-account-avatar .avatar { width: 52px; height: 52px; border: 2px solid var(--club-login-ink); }
body[data-path="me"] .my-account-item { color: var(--club-login-ink); font-size: 18px; font-weight: 800; }
body[data-path="me"] .my-account-item-desc { margin-top: 4px; color: #514d46; }
body[data-path="me"] .my-account-item-link a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border-radius: 999px; background: var(--club-login-ink); color: #fff !important; font-weight: 750; text-decoration: none; }
body[data-path="me"] .my-account-item-link svg { color: #fff !important; stroke: currentColor; }

@media (max-width: 600px) {
  body[data-path="login"] {
    background:
      radial-gradient(circle at 106% 0, var(--club-login-blue) 0 9rem, transparent 9.1rem),
      var(--club-login-paper);
  }

  body[data-path="login"] .for-login,
  body[data-path="login"] .for-forgot,
  body[data-path="login"] .for-signup,
  body[data-path="login"] .for-email-login {
    margin: 24px auto;
  }

  body[data-path="login"] .page-card {
    border-radius: 20px !important;
    padding: 28px 20px !important;
  }

  body[data-path="me"] { background: radial-gradient(circle at 112% -2%, var(--club-login-blue) 0 8rem, transparent 8.1rem), var(--club-login-paper); }
  body[data-path="me"] .page_content { padding-top: 24px !important; }
  body[data-path="me"] .my-account-container::before { margin-bottom: 48px; }
  body[data-path="me"] .account-info > .col { align-items: flex-start !important; gap: 16px; padding: 20px !important; }
  body[data-path="me"] .account-info > .col:not(:first-child) { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-path="login"] *,
  body[data-path="login"] *::before,
  body[data-path="login"] *::after {
    animation: none !important;
    transition: none !important;
  }
  body[data-path="me"] *,
  body[data-path="me"] *::before,
  body[data-path="me"] *::after {
    animation: none !important;
    transition: none !important;
  }
}