:root {
  color-scheme: dark;
  --page: #07080d;
  --surface: #0b0c12;
  --border: #1f2230;
  --text: #f0f2f7;
  --muted: #aab0bf;
  --subtle: #949bab;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
}

html { background: var(--page); }

body {
  position: relative;
  overflow-x: hidden;
  --glow-primary: rgb(59 130 246 / 16%);
  --glow-secondary: rgb(100 76 255 / 11%);
  --glow-center: rgb(35 83 170 / 9%);
  background:
    radial-gradient(circle at 28% 22%, var(--glow-primary), transparent 31%),
    radial-gradient(circle at 76% 72%, var(--glow-secondary), transparent 29%),
    radial-gradient(circle at 54% 48%, var(--glow-center), transparent 37%),
    var(--page);
  background-size: 125% 125%, 132% 132%, 118% 118%, auto;
  background-position: 0% 0%, 100% 100%, 50% 50%, 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: -230px;
  left: 50%;
  width: 620px;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgb(59 130 246 / 7%), transparent 68%);
  transform: translateX(-50%);
}

body > .w-full.max-w-\[420px\] { max-width: 400px; }
body > .w-full.max-w-\[420px\] > .text-center { margin-bottom: 14px; }
body > .w-full.max-w-\[420px\] > .text-center svg { height: 27px; }

a[aria-label="Deslove"] svg path,
a[aria-label="Deslove"] svg rect,
a[aria-label="Deslove"] svg polygon:not(.logo-beat) {
  transition: fill .12s ease;
}

a[aria-label="Deslove"]:hover svg path,
a[aria-label="Deslove"]:hover svg rect,
a[aria-label="Deslove"]:hover svg polygon:not(.logo-beat),
a[aria-label="Deslove"]:focus-visible svg path,
a[aria-label="Deslove"]:focus-visible svg rect,
a[aria-label="Deslove"]:focus-visible svg polygon:not(.logo-beat) {
  fill: var(--accent);
}

body > .w-full.max-w-\[420px\] > .text-center p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.01em;
  transform: translateY(-3px);
}

body > .w-full.max-w-\[420px\] > .bg-\[\#0b0c12\] {
  padding: 29px 30px;
  background: linear-gradient(
    180deg,
    #101322 0%,
    #0c0e18 100%
  );
  border-color: rgb(203 213 225 / 11%);
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgb(0 0 0 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 3%);
}

h1 {
  margin-bottom: 14px !important;
  color: var(--text) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em;
}

h1 + .flex,
h1 + .flex + .flex,
h1 + .flex + .flex + .flex {
  gap: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

h1 + .flex + .flex { margin-top: 7px; }

h1 + .flex img,
h1 + .flex + .flex img {
  object-fit: contain;
  opacity: .9;
}

h1 + .flex img {
  width: 9px;
  height: 12px;
  margin-left: 2px;
  margin-right: 2px;
}

h1 + .flex + .flex img {
  width: 12.5px;
  height: 12.5px;
}

a[href*="/auth/google/redirect"] {
  min-height: 46px;
  margin-top: 21px;
  padding: 11px 18px;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgb(255 255 255 / 15%);
  transition: background-color .12s ease;
}

a[href*="/auth/google/redirect"]:hover {
  background-color: #f1f4f8;
}

a[href*="/auth/google/redirect"] svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.my-5 {
  margin-top: 19px;
  margin-bottom: 17px;
}

.my-5 .h-px { background: var(--border); }

.my-5 span {
  color: var(--subtle);
  font-size: 11.5px;
}

.bg-\[\#0b0c12\] > p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.bg-\[\#0b0c12\] + p {
  margin-top: 12px;
  color: var(--subtle);
  font-size: 11.5px;
  line-height: 1.5;
}

.bg-\[\#0b0c12\] + p a {
  color: #a7adbc;
  text-decoration-color: #505669;
  transition: color .12s ease, text-decoration-color .12s ease;
}

.bg-\[\#0b0c12\] + p a:hover {
  color: #e3e6ee;
  text-decoration-color: #8c93a5;
}

a.back-to-deslove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  transform: translateY(-6px);
  transition: color .12s ease;
}

a.back-to-deslove:hover { color: var(--accent-hover); }

a.back-to-deslove .back-arrow {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

body > .w-full.max-w-\[420px\] > .flex.justify-center {
  margin-top: 11px;
  gap: 8px;
  transform: translateY(-6px);
}

body > .w-full.max-w-\[420px\] > .flex.justify-center button {
  width: 50px;
  height: 34px;
  border-radius: 9px;
  font-size: 12px;
  transition-duration: .12s;
}

/* Light theme override */
body.theme-light {
  color-scheme: light;
  --glow-primary: rgb(59 130 246 / 11%);
  --glow-secondary: rgb(100 76 255 / 7%);
  --glow-center: rgb(35 83 170 / 4%);
  --page: #f3f7fd;
  --surface: #fbfdff;
  --border: #dce6f3;
  --text: #283852;
  --muted: #62728b;
  --subtle: #687990;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  color: var(--text);
  background:
    radial-gradient(circle at 28% 22%, var(--glow-primary), transparent 31%),
    radial-gradient(circle at 76% 72%, var(--glow-secondary), transparent 29%),
    radial-gradient(circle at 54% 48%, var(--glow-center), transparent 37%),
    var(--page);
}

body.theme-light::before { display: none; }

body.theme-light a[aria-label="Deslove"] svg path,
body.theme-light a[aria-label="Deslove"] svg rect,
body.theme-light a[aria-label="Deslove"] svg polygon:not(.logo-beat) {
  fill: var(--text);
}

body.theme-light a[aria-label="Deslove"]:hover svg path,
body.theme-light a[aria-label="Deslove"]:hover svg rect,
body.theme-light a[aria-label="Deslove"]:hover svg polygon:not(.logo-beat),
body.theme-light a[aria-label="Deslove"]:focus-visible svg path,
body.theme-light a[aria-label="Deslove"]:focus-visible svg rect,
body.theme-light a[aria-label="Deslove"]:focus-visible svg polygon:not(.logo-beat) {
  fill: var(--accent);
}

body.theme-light > .w-full.max-w-\[420px\] > .text-center p { color: var(--muted); }

body.theme-light > .w-full.max-w-\[420px\] > .bg-\[\#0b0c12\] {
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgb(63 91 132 / 4%);
}

body.theme-light h1 { color: var(--text) !important; }

body.theme-light h1 + .flex,
body.theme-light h1 + .flex + .flex,
body.theme-light h1 + .flex + .flex + .flex { color: var(--muted); }

body.theme-light a[href*="/auth/google/redirect"] {
  color: #283852;
  background: #fff;
  border-color: #d7e1ee;
  box-shadow: 0 2px 8px rgb(74 102 143 / 3%);
}

body.theme-light a[href*="/auth/google/redirect"]:hover {
  background: #f1f5fa;
}

body.theme-light .my-5 .h-px { background: var(--border); }
body.theme-light .my-5 span { color: var(--subtle); }

body.theme-light .bg-\[\#0b0c12\] > p { color: var(--muted); }
body.theme-light .bg-\[\#0b0c12\] + p { color: var(--subtle); }

body.theme-light .bg-\[\#0b0c12\] + p a {
  color: #62799f;
  text-decoration-color: #afbdd1;
}

body.theme-light .bg-\[\#0b0c12\] + p a:hover {
  color: #344967;
  text-decoration-color: #71809a;
}

/* Style language state, never its position in the switcher. */
body [data-locale-switch] button.bg-transparent {
  color: var(--muted);
  background: rgb(154 159 174 / 5%);
  border-color: rgb(154 159 174 / 20%);
}

body [data-locale-switch] button.bg-transparent:hover {
  color: var(--text);
  background: rgb(154 159 174 / 10%);
  border-color: rgb(154 159 174 / 34%);
}

body.theme-light [data-locale-switch] button.bg-transparent {
  color: var(--muted);
  background: rgb(255 255 255 / 45%);
  border-color: var(--border);
}

body.theme-light [data-locale-switch] button.bg-transparent:hover {
  color: var(--text);
  background: var(--surface);
  border-color: #bdccdf;
}

body [data-locale-switch] button.bg-accent {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

body [data-locale-switch] button.bg-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

body [data-locale-switch] button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Mobile: keep the card vertically centered (don't stick to top) */
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { transition: none !important; }
}

@media (max-width: 480px) {
  body::before {
    top: -260px;
    width: 460px;
  }
  body > .w-full.max-w-\[420px\] { max-width: 390px; }
  body > .w-full.max-w-\[420px\] > .bg-\[\#0b0c12\] {
    padding: 25px 22px;
    border-radius: 16px;
  }
  body > .w-full.max-w-\[420px\] > .text-center p {
    margin-top: 2px;
    font-size: 15px;
  }
}