:root {
  --zeroapi-primary: #2563eb;
  --zeroapi-primary-hover: #1d4ed8;
  --zeroapi-coral: #c93f2f;
  --zeroapi-coral-soft: #fff0ec;
  --zeroapi-green: #059669;
  --zeroapi-ink: #172033;
  --zeroapi-muted: #667085;
  --zeroapi-border: #e4e7ec;
  --zeroapi-surface: #ffffff;
  --zeroapi-canvas: #f7f8fb;
  --zeroapi-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  color-scheme: light;
}

* {
  letter-spacing: 0 !important;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Microsoft YaHei", sans-serif;
}

html:not(.dark) body {
  color: var(--zeroapi-ink);
  background: var(--zeroapi-canvas);
}

html:not(.dark) .card,
html:not(.dark) .card-glass {
  border: 1px solid var(--zeroapi-border) !important;
  border-radius: 8px !important;
  background: var(--zeroapi-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
  backdrop-filter: none !important;
}

html:not(.dark) .card:hover {
  border-color: #d0d5dd !important;
  box-shadow: var(--zeroapi-shadow) !important;
}

html:not(.dark) .btn-primary {
  border-radius: 8px !important;
  border: 1px solid var(--zeroapi-primary) !important;
  background: var(--zeroapi-primary) !important;
  box-shadow: none !important;
}

html:not(.dark) .btn-primary:hover {
  border-color: var(--zeroapi-primary-hover) !important;
  background: var(--zeroapi-primary-hover) !important;
}

html:not(.dark) .btn-secondary,
html:not(.dark) .input {
  border-color: var(--zeroapi-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html:not(.dark) .input:focus,
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  border-color: #84a9ff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

html:not(.dark) .text-gradient {
  background: linear-gradient(90deg, var(--zeroapi-primary), var(--zeroapi-coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html:not(.dark) .glass {
  border-color: rgba(228, 231, 236, 0.9) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
}

html:not(.dark) .bg-mesh-gradient {
  background: #fbfcfe !important;
}

/* Public home */
html:not(.dark) body.zeroapi-home #app > div {
  background: #fbfcfe !important;
}

html:not(.dark) body.zeroapi-home header {
  border-bottom: 1px solid rgba(228, 231, 236, 0.9) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px);
}

html:not(.dark) body.zeroapi-home .group[class*="rounded-2xl"] {
  border: 1px solid var(--zeroapi-border) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
  backdrop-filter: none !important;
}

html:not(.dark) body.zeroapi-home .group[class*="rounded-2xl"]:hover {
  border-color: #cfd7e6 !important;
  box-shadow: var(--zeroapi-shadow) !important;
  transform: translateY(-2px);
}

html:not(.dark) body.zeroapi-home [class*="bg-primary-500"],
html:not(.dark) body.zeroapi-home [class*="from-primary-500"] {
  background: var(--zeroapi-primary) !important;
}

html:not(.dark) body.zeroapi-home footer {
  border-color: var(--zeroapi-border) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

/* Login and registration */
body.zeroapi-auth #app > div {
  min-height: 100vh;
}

html:not(.dark) body.zeroapi-auth #app > div {
  background: #f8fafc !important;
}

.zeroapi-auth-intro {
  display: none;
}

html:not(.dark) body.zeroapi-auth .card-glass {
  padding: 28px !important;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08) !important;
}

body.zeroapi-auth .cf-turnstile,
body.zeroapi-auth [class*="turnstile"] {
  min-height: 65px;
}

@media (min-width: 960px) {
  body.zeroapi-auth #app > div {
    display: grid !important;
    grid-template-columns: minmax(340px, 500px) minmax(390px, 460px);
    gap: clamp(56px, 8vw, 136px);
    padding: 48px 7vw !important;
  }

  body.zeroapi-auth #app > div > .relative.z-10 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .zeroapi-auth-intro {
    z-index: 10;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
    max-width: 500px;
  }

  .zeroapi-auth-intro__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--zeroapi-muted);
    font-size: 15px;
    font-weight: 700;
  }

  .zeroapi-auth-intro__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--zeroapi-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
  }

  .zeroapi-auth-intro h1 {
    margin: 0;
    color: #1b2233;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 800;
  }

  .zeroapi-auth-intro h1 span {
    display: block;
    color: var(--zeroapi-coral);
  }

  .zeroapi-auth-intro p {
    margin: 24px 0 0;
    color: var(--zeroapi-muted);
    font-size: 18px;
    line-height: 1.7;
  }
}

/* Authenticated user and admin surfaces */
html:not(.dark) body.zeroapi-app #app > div {
  background: var(--zeroapi-canvas) !important;
}

html:not(.dark) body.zeroapi-app aside {
  border-right-color: var(--zeroapi-border) !important;
  background: #fff !important;
}

html:not(.dark) body.zeroapi-app header,
html:not(.dark) body.zeroapi-app .glass.sticky {
  border-bottom-color: var(--zeroapi-border) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

html:not(.dark) body.zeroapi-app .sidebar-nav [class*="bg-primary-50"] {
  background: var(--zeroapi-coral-soft) !important;
  color: var(--zeroapi-coral) !important;
}

html:not(.dark) body.zeroapi-app main {
  background: transparent !important;
}

html:not(.dark) body.zeroapi-app [class~="card"],
html:not(.dark) body.zeroapi-app [class*="rounded-xl"],
html:not(.dark) body.zeroapi-app [class*="rounded-2xl"] {
  border-radius: 8px !important;
}

html:not(.dark) body.zeroapi-app .btn,
html:not(.dark) body.zeroapi-app button:not([class*="rounded-full"]),
html:not(.dark) body.zeroapi-app [role="button"]:not([class*="rounded-full"]) {
  border-radius: 8px !important;
}

html:not(.dark) body.zeroapi-app input,
html:not(.dark) body.zeroapi-app textarea,
html:not(.dark) body.zeroapi-app select {
  border-color: var(--zeroapi-border) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
}

html:not(.dark) body.zeroapi-app [role="dialog"] {
  border-color: var(--zeroapi-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.14) !important;
}

html:not(.dark) body.zeroapi-app [role="tablist"] {
  border-color: var(--zeroapi-border) !important;
}

html:not(.dark) body.zeroapi-app [role="tab"][aria-selected="true"] {
  color: var(--zeroapi-primary) !important;
}

html:not(.dark) body.zeroapi-app [class*="divide-"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--zeroapi-border) !important;
}

html:not(.dark) body.zeroapi-app table {
  border-color: var(--zeroapi-border) !important;
}

html:not(.dark) body.zeroapi-app thead {
  background: #f9fafb !important;
}

html:not(.dark) body.zeroapi-app tbody tr:hover {
  background: #f8fafc !important;
}

html:not(.dark) body.zeroapi-app code,
html:not(.dark) body.zeroapi-app pre {
  border-color: var(--zeroapi-border) !important;
  border-radius: 8px !important;
}

html:not(.dark) body.zeroapi-app ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:not(.dark) body.zeroapi-app ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #cbd5e1;
  background-clip: padding-box;
}

@media (max-width: 959px) {
  body.zeroapi-auth #app > div {
    padding: 20px !important;
  }

  html:not(.dark) body.zeroapi-auth .card-glass {
    padding: 22px !important;
  }

  html:not(.dark) body.zeroapi-home [class*="text-6xl"] {
    font-size: 2.75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}