/* Qendryx CI for the existing auth view. Intentionally no application logic.
   The structural selector also supports the currently deployed Auth component. */
@font-face {
  font-family: 'Sonic Manrope';
  src: url('/auth-ci/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
#root div:has(> main > section #auth-seo-overview) {
  --auth-ink: #17212b;
  --auth-muted: #526171;
  --auth-line: #dce2e7;
  --auth-teal: #087f83;
  background: #f7f8fa;
  color: var(--auth-ink);
  color-scheme: light;
  font-family: 'Sonic Manrope', sans-serif;
  scroll-behavior: smooth;
}
#root div:has(> main > section #auth-seo-overview) > .pointer-events-none {
  display: none;
}
#root main:has(#auth-seo-overview) {
  max-width: 1440px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  align-items: start;
}
#root main:has(#auth-seo-overview) > section {
  padding: 36px clamp(28px, 4vw, 64px) 40px;
  gap: 40px;
}
#root main:has(#auth-seo-overview) img {
  width: 142px;
  height: auto;
  max-height: 86px;
  object-fit: contain;
}
#root main:has(#auth-seo-overview) h1 {
  color: var(--auth-ink);
  font-size: clamp(36px, 4.1vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
#root main:has(#auth-seo-overview) h2 {
  color: var(--auth-ink);
  letter-spacing: -.035em;
}
#root main:has(#auth-seo-overview) :is(.text-slate-300, .text-slate-400, .text-slate-500) {
  color: var(--auth-muted);
}
#root main:has(#auth-seo-overview) :is(.text-cyan-200, .text-slate-200) {
  color: var(--auth-teal);
}
#root main:has(#auth-seo-overview) > section > div:has(> h1) {
  display: grid;
  padding-block: 0;
}
#root main:has(#auth-seo-overview) > section > div:has(> h1) > .inline-flex {
  justify-self: start;
  margin-bottom: 22px;
  background: #e9f3f2;
  border-color: #cddfdf;
  color: #126269;
  font-size: 12px;
}
#root main:has(#auth-seo-overview) h1 + p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 60ch;
}
#root main:has(#auth-seo-overview) > section > div:has(> h1)::after {
  content: '';
  display: block;
  grid-row: 4;
  height: clamp(170px, 18vw, 245px);
  margin-block: 18px 0;
  background: url('/auth-ci/sonic-ring.webp') center / contain no-repeat;
  animation: sonic-auth-arrive 1s ease-out both;
  pointer-events: none;
}
#root main:has(#auth-seo-overview) > section > div > .grid:has(.lucide-mic) {
  gap: 0;
  margin-top: 26px;
  border-block: 1px solid var(--auth-line);
}
#root main:has(#auth-seo-overview) .grid:has(> div > .lucide-mic) > div {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 22px 16px;
}
#root main:has(#auth-seo-overview) .grid:has(> div > .lucide-mic) > div:first-child { padding-left: 0; }
#root main:has(#auth-seo-overview) .grid:has(> div > .lucide-mic) > div + div { border-left: 1px solid var(--auth-line); }
#root main:has(#auth-seo-overview) .grid:has(> div > .lucide-mic) p { font-size: 12px; line-height: 1.7; }
#root main:has(#auth-seo-overview) section[aria-labelledby='auth-seo-overview'] {
  margin-top: 42px;
  font-size: 14px;
  line-height: 1.9;
}
#root main:has(#auth-seo-overview) nav h2 {
  text-transform: none;
  letter-spacing: -.02em;
  color: var(--auth-ink);
}
#root main:has(#auth-seo-overview) nav a {
  border-color: var(--auth-line);
  background: #fff;
  color: var(--auth-ink);
  font-size: 12px;
  border-radius: 10px;
}
#root main:has(#auth-seo-overview) > aside {
  background: #edf2f4;
  border-color: var(--auth-line);
  padding: 40px 28px;
  min-height: 100dvh;
  height: auto;
  max-height: 100dvh;
  overflow-y: auto;
  align-items: safe center;
  backdrop-filter: none;
}
#root main:has(#auth-seo-overview) > aside > div > div {
  background: #fff;
  border: 1px solid var(--auth-line);
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 18px 55px -30px #17212b40;
}
#root main:has(#auth-seo-overview) > aside > div > div > div {
  background: transparent;
  border: 0;
  padding: clamp(24px, 2.5vw, 36px);
  border-radius: inherit;
}
#root main:has(#auth-seo-overview) aside h2 { font-size: 29px; font-weight: 600; line-height: 1.2; }
#root main:has(#auth-seo-overview) aside .border-t,
#root main:has(#auth-seo-overview) aside [class*='border-white/'] { border-color: var(--auth-line); }
#root main:has(#auth-seo-overview) aside [class*='bg-cyan-300/'] { background: #e9f3f2; border-color: #cddfdf; }
#root main:has(#auth-seo-overview) aside label { color: var(--auth-ink); font-weight: 600; }
#root main:has(#auth-seo-overview) aside input {
  background: #f7f8fa;
  border: 1px solid #c7d1d9;
  border-radius: 10px;
  color: var(--auth-ink);
  font-size: 16px;
  box-shadow: none;
  height: 48px;
}
#root main:has(#auth-seo-overview) aside input::placeholder { color: #697887; }
#root main:has(#auth-seo-overview) aside button[type='submit'] {
  background: #087f83;
  color: #fff;
  border-radius: 10px;
  height: 48px;
  box-shadow: none;
}
#root main:has(#auth-seo-overview) aside button[type='submit']:hover { background: #06676a; }
#root main:has(#auth-seo-overview) aside button:disabled { opacity: .55; cursor: wait; }
#root main:has(#auth-seo-overview) aside button:has(> svg[viewBox='0 0 24 24']):not([type='submit']) {
  background: #fff;
  border: 1px solid #c7d1d9;
  border-radius: 10px;
  color: var(--auth-ink);
  height: 48px;
}
#root main:has(#auth-seo-overview) aside button:has(> svg):not([type='submit']):hover { background: #f0f5f5; }
#root main:has(#auth-seo-overview) aside .relative span[class*='bg-'] { background: #fff; color: var(--auth-muted); }
#root main:has(#auth-seo-overview) :is(a, button, input):focus-visible {
  outline: 3px solid #087f83;
  outline-offset: 4px;
  --tw-ring-color: transparent;
}
@keyframes sonic-auth-arrive {
  from { opacity: 0; transform: perspective(800px) translateY(12px) rotateY(-12deg); }
  to { opacity: 1; transform: perspective(800px) translateY(0) rotateY(0); }
}
@media (max-width: 1023px) {
  #root main:has(#auth-seo-overview) { grid-template-columns: 1fr; }
  #root main:has(#auth-seo-overview) > aside { min-height: auto; max-height: none; padding: 28px 20px 36px; }
  #root main:has(#auth-seo-overview) > section { padding: 36px 24px; gap: 28px; }
  #root main:has(#auth-seo-overview) > section > button:has(img) { display: none; }
  #root main:has(#auth-seo-overview) aside > div > button { margin: 0 auto 24px; }
  #root main:has(#auth-seo-overview) h1 { font-size: clamp(34px, 6vw, 52px); }
  #root main:has(#auth-seo-overview) > section > div:has(> h1)::after { height: 210px; }
}
@media (max-width: 639px) {
  #root main:has(#auth-seo-overview) .grid:has(> div > .lucide-mic) > div { padding: 18px 0; }
  #root main:has(#auth-seo-overview) .grid:has(> div > .lucide-mic) > div + div { border-left: 0; border-top: 1px solid var(--auth-line); }
}
@media (prefers-reduced-motion: reduce) {
  #root div:has(> main > section #auth-seo-overview) { scroll-behavior: auto; }
  #root main:has(#auth-seo-overview) > section > div:has(> h1)::after { animation: none; }
}