/* Nanke API — chrome v17 — light/dark safe contrast */

:root {
  --nk-cream: #f3e6c8;
  --nk-gold: #e0b35a;
  --nk-gold-deep: #c4922e;
  --nk-mint: #8fd9c6;
  --nk-teal: #3db8a8;
  --nk-btn-ink: #1a1206;
  --primary: 42 70% 48%;
  --ring: 42 70% 48%;
  --sidebar-primary: 42 70% 48%;
  --sidebar-ring: 42 70% 48%;
}

.dark {
  --nk-ink: #f3ebe0;
  --nk-void: #0c0a09;
  --primary: 42 70% 55%;
  --ring: 42 70% 55%;
  --sidebar-primary: 42 70% 55%;
  --sidebar-ring: 42 70% 55%;
}

/* ========== Shared: readable form controls ========== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
[data-slot="input"],
[data-slot="textarea"],
[role="textbox"] {
  color: inherit !important;
  caret-color: currentColor !important;
  border-color: rgba(196, 146, 46, 0.35) !important;
  border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder,
[data-slot="input"]::placeholder {
  opacity: 0.55 !important;
}

/* Light mode inputs */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) [data-slot="input"],
html:not(.dark) [data-slot="textarea"] {
  background: #ffffff !important;
  color: #1a1612 !important;
  border-color: rgba(26, 22, 18, 0.18) !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #6b635a !important;
  opacity: 1 !important;
}

/* Dark mode inputs */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark textarea,
html.dark select,
html.dark [data-slot="input"],
html.dark [data-slot="textarea"],
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark textarea,
.dark select,
.dark [data-slot="input"],
.dark [data-slot="textarea"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f3ebe0 !important;
  border-color: rgba(224, 179, 90, 0.35) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
  color: rgba(243, 235, 224, 0.55) !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
[data-slot="input"]:focus,
[data-slot="textarea"]:focus {
  outline: none !important;
  border-color: rgba(224, 179, 90, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(224, 179, 90, 0.22) !important;
}

/* Login / legal text contrast */
html.dark body:has(input[autocomplete="current-password"]) label,
html.dark body:has(input[autocomplete="new-password"]) label,
.dark body:has(input[autocomplete="current-password"]) label,
.dark body:has(input[autocomplete="new-password"]) label,
html.dark body:has(input[autocomplete="current-password"]) p,
.dark body:has(input[autocomplete="current-password"]) p,
html.dark body:has(input[autocomplete="current-password"]) span,
.dark body:has(input[autocomplete="current-password"]) span {
  color: rgba(243, 235, 224, 0.88) !important;
}
html:not(.dark) body:has(input[autocomplete="current-password"]) label,
html:not(.dark) body:has(input[autocomplete="new-password"]) label {
  color: #3a342e !important;
}

/* ========== Header pill (v20, restore for 模型广场/排行榜) ========== */
header.fixed {
  z-index: 50 !important;
}
header.fixed > div {
  max-width: 72rem !important;
  width: calc(100% - 1.5rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0.7rem 0 0 !important;
  transition: none !important;
}
header.fixed > div > nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 3.2rem !important;
  min-height: 3.2rem !important;
  max-height: 3.2rem !important;
  padding: 0 0.45rem 0 0.85rem !important;
  gap: 0.25rem !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: none !important;
  overflow: visible !important;
}

html.dark header.fixed > div > nav,
.dark header.fixed > div > nav {
  background: rgba(12, 10, 9, 0.92) !important;
  border: 1px solid rgba(224, 179, 90, 0.22) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}
html.dark header.fixed nav a:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta),
.dark header.fixed nav a:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta) {
  color: rgba(243, 235, 224, 0.88) !important;
}

html:not(.dark) header.fixed > div > nav {
  background: rgba(255, 252, 247, 0.94) !important;
  border: 1px solid rgba(196, 146, 46, 0.28) !important;
  box-shadow: 0 8px 24px rgba(26, 18, 6, 0.08) !important;
}
html:not(.dark) header.fixed nav a:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta) {
  color: #2a241c !important;
}

header.fixed a[href="/"] {
  gap: 0.5rem !important;
  margin-right: 0.25rem !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
header.fixed a[href="/"] img,
header.fixed img[alt="logo"],
header.fixed img[alt="Logo"],
header.fixed img[src*="nanke-logo"],
header.fixed img[src*="logo"] {
  width: 1.7rem !important;
  height: 1.7rem !important;
  max-width: none !important;
  border-radius: 0.4rem !important;
  object-fit: contain !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}
header.fixed a[href="/"] span {
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  background: linear-gradient(120deg, #c4922e 8%, #e0b35a 42%, #3db8a8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.dark header.fixed a[href="/"] span,
.dark header.fixed a[href="/"] span {
  background: linear-gradient(120deg, #f3e6c8 8%, #e0b35a 42%, #8fd9c6 78%, #3db8a8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

header.fixed nav a:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta) {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
}
header.fixed nav a[aria-current="page"],
header.fixed nav a.nk-active {
  color: #c4922e !important;
  background: rgba(224, 179, 90, 0.16) !important;
}
html.dark header.fixed nav a[aria-current="page"],
.dark header.fixed nav a.nk-active {
  color: #e0b35a !important;
}

header.fixed nav button,
header.fixed nav [data-slot="button"]:not(.nk-cta):not(:has(a[href="/sign-up"])):not(:has(a[href="/sign-in"])) {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  border-radius: 999px !important;
}

header.fixed a[href="/sign-in"],
header.fixed a[href="/sign-up"],
header.fixed a.nk-cta,
header.fixed button:has(a[href="/sign-in"]),
header.fixed button:has(a[href="/sign-up"]),
header.fixed [data-slot="button"]:has(a[href="/sign-in"]),
header.fixed [data-slot="button"]:has(a[href="/sign-up"]),
body:has(input[autocomplete="current-password"]) form button[type="submit"],
body:has(input[autocomplete="new-password"]) form button[type="submit"],
button.bg-primary,
a.bg-primary,
[data-slot="button"].bg-primary {
  background: #e0b35a !important;
  background-image: none !important;
  color: #1a1206 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Homepage iframe under pill header */
#root > div > iframe.h-screen,
#root iframe.h-screen.w-full {
  display: block !important;
  margin: 0 !important;
  margin-top: 4.25rem !important;
  width: 100% !important;
  height: calc(100dvh - 4.25rem) !important;
  max-height: calc(100dvh - 4.25rem) !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

/* ========== Header responsive ========== */
@media (max-width: 1100px) {
  header.fixed > div {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
  }
  header.fixed nav a:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta) {
    padding: 0.28rem 0.4rem !important;
    font-size: 0.74rem !important;
  }
}
@media (max-width: 860px) {
  header.fixed > div {
    padding-top: 0.45rem !important;
    width: calc(100% - 0.75rem) !important;
  }
  header.fixed > div > nav {
    height: 2.9rem !important;
    min-height: 2.9rem !important;
    max-height: 2.9rem !important;
    gap: 0.1rem !important;
    padding: 0 0.35rem 0 0.55rem !important;
  }
  /* hide lower-priority links on narrow screens */
  header.fixed nav a[href="/ranking"],
  header.fixed nav a[href="/rankings"],
  header.fixed nav a[href*="ranking"],
  header.fixed nav a[href="/about"],
  header.fixed nav a[href="/docs"],
  header.fixed nav a[href*="landing/about"],
  header.fixed nav a[href*="landing/docs"] {
    display: none !important;
  }
  #root > div > iframe.h-screen,
  #root iframe.h-screen.w-full {
    margin-top: 3.5rem !important;
    height: calc(100dvh - 3.5rem) !important;
    max-height: calc(100dvh - 3.5rem) !important;
  }
}
@media (max-width: 560px) {
  header.fixed a[href="/"] span {
    font-size: 0.78rem !important;
  }
  header.fixed nav a[href="/pricing"],
  header.fixed nav a[href="/pricing/"] {
    display: none !important;
  }
}

/* ========== Cards / panels ========== */
html:not(.dark) [data-slot="card"],
html:not(.dark) .bg-card {
  background: #ffffff !important;
  border-color: rgba(26, 22, 18, 0.1) !important;
  color: #1a1612 !important;
  border-radius: 16px !important;
}
html.dark [data-slot="card"],
html.dark .bg-card,
.dark [data-slot="card"],
.dark .bg-card {
  background: rgba(22, 18, 15, 0.92) !important;
  border-color: rgba(224, 179, 90, 0.18) !important;
  color: #f3ebe0 !important;
  border-radius: 16px !important;
}

/* Model plaza cards */
body.nk-pricing main .grid > div.rounded-xl.border,
body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {
  border-radius: 16px !important;
}
html:not(.dark) body.nk-pricing main .grid > div.rounded-xl.border,
html:not(.dark) body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {
  background: #fffefb !important;
  border-color: rgba(26, 22, 18, 0.12) !important;
  color: #1a1612 !important;
}
html:not(.dark) body.nk-pricing main .grid > div.rounded-xl.border h3,
html:not(.dark) body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border h3 {
  color: #1a1612 !important;
}
html:not(.dark) body.nk-pricing main .grid > div.rounded-xl.border p,
html:not(.dark) body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border p,
html:not(.dark) body.nk-pricing main .grid > div.rounded-xl.border span {
  color: #5a5248 !important;
}

html.dark body.nk-pricing main .grid > div.rounded-xl.border,
html.dark body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border,
.dark body.nk-pricing main .grid > div.rounded-xl.border,
.dark body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {
  background: rgba(18, 14, 12, 0.9) !important;
  border-color: rgba(224, 179, 90, 0.22) !important;
  color: #f3ebe0 !important;
}
html.dark body.nk-pricing main .grid > div.rounded-xl.border h3,
.dark body.nk-pricing main .grid > div.rounded-xl.border h3 {
  color: #f3ebe0 !important;
}
html.dark body.nk-pricing main .grid > div.rounded-xl.border p,
html.dark body.nk-pricing main .grid > div.rounded-xl.border span,
.dark body.nk-pricing main .grid > div.rounded-xl.border p,
.dark body.nk-pricing main .grid > div.rounded-xl.border span {
  color: rgba(243, 235, 224, 0.78) !important;
}

body.nk-pricing header.max-w-3xl h1 {
  background: linear-gradient(120deg, #c4922e 8%, #e0b35a 42%, #3db8a8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html.dark body.nk-pricing header.max-w-3xl h1,
.dark body.nk-pricing header.max-w-3xl h1 {
  background: linear-gradient(120deg, #f3e6c8 8%, #e0b35a 42%, #8fd9c6 78%, #3db8a8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.nk-pricing-banner {
  margin: 0.75rem auto 0;
  max-width: 40rem;
  padding: 0.85rem 1rem 0.75rem;
  border-radius: 16px;
  text-align: center;
}
html:not(.dark) .nk-pricing-banner {
  border: 1px solid rgba(196, 146, 46, 0.28);
  background: linear-gradient(180deg, #fff9ef, #fff);
  color: #2a241c;
}
html.dark .nk-pricing-banner,
.dark .nk-pricing-banner {
  border: 1px solid rgba(224, 179, 90, 0.24);
  background:
    radial-gradient(ellipse 80% 80% at 10% 0%, rgba(224, 179, 90, 0.14), transparent 55%),
    rgba(12, 10, 9, 0.65);
  color: #f3ebe0;
}
.nk-pricing-banner .nk-pitch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.nk-pricing-banner .nk-pitch b {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: #c4922e;
  margin-bottom: 0.15rem;
}
html.dark .nk-pricing-banner .nk-pitch b,
.dark .nk-pricing-banner .nk-pitch b {
  color: #e0b35a;
}
.nk-pricing-banner .nk-pitch span {
  display: block;
  font-size: 0.68rem;
  line-height: 1.35;
  opacity: 0.8;
}
.nk-pricing-banner .nk-cta-line a {
  color: #c4922e !important;
  font-weight: 600;
}
html.dark .nk-pricing-banner .nk-cta-line a,
.dark .nk-pricing-banner .nk-cta-line a {
  color: #e0b35a !important;
}

/* Sidebar */
html:not(.dark) [data-slot="sidebar"],
html:not(.dark) [data-sidebar="sidebar"] {
  background: #faf7f2 !important;
  border-right-color: rgba(26, 22, 18, 0.08) !important;
  color: #1a1612 !important;
}
html.dark [data-slot="sidebar"],
html.dark [data-sidebar="sidebar"],
.dark [data-slot="sidebar"],
.dark [data-sidebar="sidebar"] {
  border-right-color: rgba(224, 179, 90, 0.12) !important;
  background: linear-gradient(180deg, rgba(14, 12, 10, 0.98), rgba(10, 8, 7, 0.98)) !important;
  color: #f3ebe0 !important;
}
[data-sidebar="menu-button"][data-active="true"],
[data-slot="sidebar-menu-button"][data-active="true"] {
  background: rgba(224, 179, 90, 0.16) !important;
  color: #c4922e !important;
  border-radius: 10px !important;
}
html.dark [data-sidebar="menu-button"][data-active="true"],
.dark [data-sidebar="menu-button"][data-active="true"] {
  color: #e0b35a !important;
}

/* Popovers */
html:not(.dark) [data-radix-popper-content-wrapper] > *,
html:not(.dark) [data-slot="popover-content"],
html:not(.dark) [role="menu"],
html:not(.dark) [data-slot="dropdown-menu-content"],
html:not(.dark) [data-slot="select-content"] {
  border-radius: 14px !important;
  border-color: rgba(26, 22, 18, 0.12) !important;
  background: #ffffff !important;
  color: #1a1612 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}
html.dark [data-radix-popper-content-wrapper] > *,
html.dark [data-slot="popover-content"],
html.dark [role="menu"],
html.dark [data-slot="dropdown-menu-content"],
html.dark [data-slot="select-content"],
.dark [data-radix-popper-content-wrapper] > *,
.dark [data-slot="popover-content"],
.dark [role="menu"],
.dark [data-slot="dropdown-menu-content"],
.dark [data-slot="select-content"] {
  border-radius: 14px !important;
  border-color: rgba(224, 179, 90, 0.22) !important;
  background: rgba(16, 13, 11, 0.96) !important;
  color: #f3ebe0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}


footer .custom-footer a {
  color: #c4922e !important;
}
html.dark footer .custom-footer a,
.dark footer .custom-footer a {
  color: #e0b35a !important;
}

[data-slot="badge"] {
  border-radius: 999px !important;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(224, 179, 90, 0.35);
  border-radius: 999px;
}

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


/* ========== Agreement checkbox: clear checked vs unchecked (v18) ========== */
button[role="checkbox"],
[data-slot="checkbox"],
[role="checkbox"]:not(input) {
  width: 1.2rem !important;
  height: 1.2rem !important;
  min-width: 1.2rem !important;
  min-height: 1.2rem !important;
  border-radius: 999px !important;
  border: 2px solid #7a654f !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(26, 18, 6, 0.08) !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
  color: transparent !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

button[role="checkbox"] svg,
[data-slot="checkbox"] svg,
[role="checkbox"]:not(input) svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  opacity: 0 !important;
  color: transparent !important;
  stroke: transparent !important;
}

button[role="checkbox"][data-state="checked"],
[data-slot="checkbox"][data-state="checked"],
[role="checkbox"][data-state="checked"],
button[role="checkbox"][aria-checked="true"],
[data-slot="checkbox"][aria-checked="true"],
[role="checkbox"][aria-checked="true"] {
  background: #c4922e !important;
  border-color: #8f6a18 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(196, 146, 46, 0.35) !important;
}

button[role="checkbox"][data-state="checked"] svg,
[data-slot="checkbox"][data-state="checked"] svg,
[role="checkbox"][data-state="checked"] svg,
button[role="checkbox"][aria-checked="true"] svg,
[data-slot="checkbox"][aria-checked="true"] svg,
[role="checkbox"][aria-checked="true"] svg {
  opacity: 1 !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  display: block !important;
}

/* Native fallback */
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  accent-color: #c4922e !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Agreement row: stronger cue when checked */
label:has([role="checkbox"][data-state="checked"]),
label:has([data-slot="checkbox"][data-state="checked"]),
div:has(> [role="checkbox"][data-state="checked"]),
div:has(> [data-slot="checkbox"][data-state="checked"]) {
  border-color: rgba(196, 146, 46, 0.55) !important;
  background: rgba(224, 179, 90, 0.12) !important;
}

html.dark button[role="checkbox"],
html.dark [data-slot="checkbox"],
.dark button[role="checkbox"],
.dark [data-slot="checkbox"] {
  background: #1c1712 !important;
  border-color: #d6b36a !important;
  box-shadow: inset 0 0 0 1px rgba(224, 179, 90, 0.12) !important;
}

html.dark button[role="checkbox"][data-state="checked"],
html.dark [data-slot="checkbox"][data-state="checked"],
.dark button[role="checkbox"][data-state="checked"],
.dark [data-slot="checkbox"][data-state="checked"],
html.dark button[role="checkbox"][aria-checked="true"],
.dark button[role="checkbox"][aria-checked="true"] {
  background: #e0b35a !important;
  border-color: #e0b35a !important;
  color: #1a1206 !important;
  box-shadow: 0 0 0 3px rgba(224, 179, 90, 0.35) !important;
}

html.dark button[role="checkbox"][data-state="checked"] svg,
html.dark [data-slot="checkbox"][data-state="checked"] svg,
.dark button[role="checkbox"][data-state="checked"] svg,
.dark [data-slot="checkbox"][data-state="checked"] svg {
  color: #1a1206 !important;
  stroke: #1a1206 !important;
  opacity: 1 !important;
}