/* =========================================================
   Logto Login V19.0 (File-based override)
   ========================================================= */

/* 1. Global and background */
html,
body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

div.logto_page-container {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to right, #050505 45%, #fcfcfc 45%) !important;
  z-index: 1;
  overflow: hidden !important;
}

/* 2. Right form container */
main.logto_main-content {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 55% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 14% !important;
  box-sizing: border-box !important;
  z-index: 100 !important;

  /* De-purple brand tokens inside login panel */
  --color-brand-default: #0f172a !important;
  --color-brand-hover: #1e293b !important;
  --color-brand-pressed: #020617 !important;
  --color-type-link: #334155 !important;
  --color-overlay-brand-focused: rgba(15, 23, 42, 0.22) !important;
}

/* Keep password page content vertically centered (desktop) */
@media (min-width: 769px) {
  main.logto_main-content > div[class$="_wrapper"],
  main.logto_main-content > .Se2C6G_wrapper {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  main.logto_main-content > div[class$="_wrapper"] > div[class$="_container"],
  main.logto_main-content > .Se2C6G_wrapper > .Se2C6G_container {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 48px !important;
  }

  main.logto_main-content > div[class$="_wrapper"] > div[class$="_navBar"],
  main.logto_main-content > .Se2C6G_wrapper > .YrdfMG_navBar {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  main.logto_main-content > div[class$="_wrapper"] > div[class$="_container"] > form,
  main.logto_main-content > .Se2C6G_wrapper > .Se2C6G_container > .jWjpkG_form {
    margin-top: 0 !important;
  }
}

/* 3. Hide signature */
div.logto_signature,
.logto_signature {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  bottom: -9999px !important;
}

/* 4. Left panel content */
div.logto_page-container::before {
  content: "Quintessential";
  position: absolute;
  left: 6%;
  top: 25%;
  font-family: "Playfair Display", serif;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;
  z-index: 10;
  opacity: 0;
  animation: fadeInDown 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
}

div.logto_page-container::after {
  content: "/ ˌkwɪn.tɪˈsen.ʃəl /";
  position: absolute;
  left: 6%;
  top: 36%;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: #666;
  z-index: 10;
  opacity: 0;
  animation: fadeInRight 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
}

main.logto_main-content::before {
  content: "Representing the most perfect or typical \A example of a quality or class.";
  white-space: pre-wrap;
  position: absolute;
  left: -71% !important;
  top: 45%;
  width: 55%;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: #a3a3a3;
  z-index: 200;
  pointer-events: none;
  text-align: left;
  opacity: 0;
  animation: fadeInLeft 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
}

main.logto_main-content::after {
  content: "\201C Sheep's milk cheese is the quintessential ingredient in \A this regional dish.\201D";
  white-space: pre-wrap;
  position: absolute;
  left: -71% !important;
  top: 60%;
  width: 50%;
  border-left: 2px solid #b91c1c;
  padding-left: 24px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.8;
  color: #e5e5e5;
  z-index: 200;
  pointer-events: none;
  text-align: left;
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
}

form::after {
  content: "精髓的，典型的";
  position: absolute;
  left: -71% !important;
  top: calc(60% + 85px);
  width: 50%;
  padding-left: 26px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #666;
  z-index: 200;
  pointer-events: none;
  text-align: left;
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.25s;
}

form {
  position: static !important;
}

form::before {
  content: "Shine English";
  position: absolute;
  left: calc(-71% - 10px) !important;
  top: 50px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #fff;
  z-index: 999;
}

/* 5. Right side components */
main.logto_main-content img[alt="app logo"] {
  display: block !important;
  margin: 0 auto 30px auto !important;
  max-height: 48px !important;
  width: auto !important;
  position: relative !important;
  z-index: 101 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

main.logto_main-content div[class*="_logo"] {
  display: flex !important;
  justify-content: center !important;
}

main.logto_main-content div[class$="_header"] {
  text-align: center !important;
}

main.logto_main-content div[class$="_header"] > img[alt="app logo"],
main.logto_main-content div[class$="_container"] > img[alt="app logo"],
main.logto_main-content form img[alt="app logo"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

button[type="submit"] {
  background-color: #0f172a !important;
  color: #fff !important;
  height: 56px !important;
  border-radius: 99px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 20px -10px rgba(15, 23, 42, 0.5) !important;
  border: none !important;
  position: relative !important;
  margin-top: 20px !important;
}

button[type="submit"]::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
}

input {
  border-radius: 8px !important;
  background-color: #f3f4f6 !important;
  border: 1px solid transparent !important;
  height: 50px !important;
}

main.logto_main-content input:focus,
main.logto_main-content input:focus-visible {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25) !important;
  outline: none !important;
}

main.logto_main-content .Ljn7Ea_primary {
  background-color: #0f172a !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 20px -10px rgba(15, 23, 42, 0.5) !important;
}

main.logto_main-content .Ljn7Ea_primary:active {
  background-color: #020617 !important;
}

main.logto_main-content .Ljn7Ea_primary:hover {
  background-color: #1e293b !important;
}

main.logto_main-content a[class*="_primary"],
main.logto_main-content a[class*="_switch"],
main.logto_main-content div[class$="_navButton"] {
  color: #475569 !important;
}

main.logto_main-content a[class*="_primary"]:hover,
main.logto_main-content a[class*="_switch"]:hover {
  color: #334155 !important;
}

main.logto_main-content .R5EY3G_primary,
main.logto_main-content .jWjpkG_switch,
main.logto_main-content .YrdfMG_navButton {
  color: #475569 !important;
}

main.logto_main-content .R5EY3G_primary:hover,
main.logto_main-content .jWjpkG_switch:hover,
main.logto_main-content .YrdfMG_navButton:hover {
  color: #334155 !important;
}

/* Registration policy note (shown under WeChat continue button) */
.se-signup-policy-note-inline {
  width: 100%;
  margin-top: 8px;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #9ca3af;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile */
@media (max-width: 768px) {
  div.logto_page-container {
    background: #fff !important;
  }

  main.logto_main-content {
    left: 0 !important;
    width: 100% !important;
    padding: 20px !important;
  }

  .se-signup-policy-note-inline {
    margin-top: 6px;
    font-size: 10px;
  }

  div.logto_page-container::before,
  div.logto_page-container::after,
  main.logto_main-content::before,
  main.logto_main-content::after,
  form::before,
  form::after {
    display: none !important;
  }
}