/* Nanke API — chrome v27 · plaza speed + marketing */



:root,

.dark {

  --nk-cream: #f3e6c8;

  --nk-gold: #e0b35a;

  --nk-gold-deep: #c4922e;

  --nk-mint: #8fd9c6;

  --nk-teal: #3db8a8;

  --nk-ink: #f3ebe0;

  --nk-void: #0c0a09;

  --nk-btn-ink: #1a1206;

  --primary: 42 70% 55%;

  --ring: 42 70% 55%;

  --sidebar-primary: 42 70% 55%;

  --sidebar-ring: 42 70% 55%;

}



/* Homepage iframe — match floating 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;

  background: #0c0a09 !important;

  box-sizing: border-box !important;

}



/* ========== Header: always floating pill (no scroll morph / square sides) ========== */

header.fixed {

  z-index: 50 !important;

}



/* Kill New-API scroll shrink (max-w 52rem) + square unscrolled state */

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;

  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;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  ring: none !important;

  outline: none !important;

  transition: none !important;

  overflow: visible !important;

}



/* Brand */

header.fixed a[href="/"] {

  gap: 0.5rem !important;

  margin-right: 0.25rem !important;

  border-radius: 999px !important;

}

header.fixed a[href="/"] img,

header.fixed img[alt="logo"],

header.fixed img[src*="nanke-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;

}

header.fixed a[href="/"] > div,

header.fixed a[href="/"] .size-7 {

  width: 1.7rem !important;

  height: 1.7rem !important;

  border-radius: 0.4rem !important;

}

header.fixed a[href="/"] span {

  font-weight: 700 !important;

  font-size: 0.88rem !important;

  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;

}



/* Links */

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:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta):hover {

  color: #f3ebe0 !important;

  background: rgba(224, 179, 90, 0.1) !important;

}

header.fixed nav a[aria-current="page"],

header.fixed nav a.nk-active {

  color: #e0b35a !important;

  background: rgba(224, 179, 90, 0.14) !important;

}



/* Icon buttons round */

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;

}



/* Dropdown / popover panels — match brand, always rounded */

[data-radix-popper-content-wrapper] > *,

[data-slot="popover-content"],

[role="menu"],

[data-slot="dropdown-menu-content"],

[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;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;

}



/* CTA pill */

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"]) {

  background: #e0b35a !important;

  background-image: none !important;

  color: #1a1206 !important;

  border: 0 !important;

  border-radius: 999px !important;

  font-weight: 700 !important;

  font-size: 0.76rem !important;

  height: 2rem !important;

  padding: 0 0.85rem !important;

  box-shadow: 0 6px 16px rgba(224, 179, 90, 0.28) !important;

  white-space: nowrap !important;

}

header.fixed a.nk-cta:hover,

header.fixed a[href="/sign-up"]:hover,

header.fixed a[href="/sign-in"]:hover {

  background: #ebc06a !important;

  color: #1a1206 !important;

}



body:has(input[autocomplete="current-password"]) form button[type="submit"],

body:has(input[autocomplete="new-password"]) form button[type="submit"] {

  background: #e0b35a !important;

  background-image: none !important;

  color: #1a1206 !important;

  border: 0 !important;

  font-weight: 700 !important;

  border-radius: 999px !important;

}



body {

  background-color: var(--nk-void);

}

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:

    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(224, 179, 90, 0.11), transparent 55%),

    radial-gradient(ellipse 40% 30% at 95% 20%, rgba(110, 184, 168, 0.06), transparent 50%);

}

#root {

  position: relative;

  z-index: 1;

}



[data-slot="card"],

.bg-card {

  border-color: rgba(224, 179, 90, 0.14) !important;

  background: rgba(18, 14, 12, 0.78) !important;

  border-radius: 16px !important;

}



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;

}



body [class*="max-w-3xl"] h1 {

  background: linear-gradient(120deg, #f3e6c8 8%, #e0b35a 40%, #8fd9c6 78%, #3db8a8 100%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.sticky [data-slot="card"],

aside [data-slot="card"] {

  border: 1px solid rgba(224, 179, 90, 0.16) !important;

  border-radius: 16px !important;

}



main a[href*="/pricing/"] [data-slot="card"]:hover,

main [class*="grid"] [data-slot="card"]:hover {

  border-color: rgba(224, 179, 90, 0.4) !important;

  box-shadow: 0 0 0 1px rgba(224, 179, 90, 0.12), 0 16px 40px rgba(0, 0, 0, 0.35) !important;

}



/* ========== Model Plaza (/pricing) ========== */

body.nk-pricing {

  --nk-pricing: 1;

  background: #0c0a09 !important;

  color: #f3ebe0 !important;

  color-scheme: dark;

}

body.nk-pricing #root,

body.nk-pricing main {

  background: transparent !important;

}

/* Light-mode leftovers: keep plaza surfaces dark */

html:not(.dark) body.nk-pricing,

html body.nk-pricing {

  background: #0c0a09 !important;

}

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;

}

body.nk-pricing header.max-w-3xl > p {

  color: rgba(243, 235, 224, 0.72) !important;

}

.nk-pricing-banner {

  margin: 0.75rem auto 0;

  max-width: 40rem;

  padding: 0.85rem 1rem 0.75rem;

  border-radius: 16px;

  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);

  text-align: center;

}

.nk-pricing-banner .nk-pitch {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.55rem;

}

.nk-pricing-banner .nk-pitch div {

  padding: 0.35rem 0.25rem;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.03);

}

.nk-pricing-banner .nk-pitch b {

  display: block;

  font-size: 0.86rem;

  font-weight: 700;

  color: #e0b35a;

  margin-bottom: 0.15rem;

}

.nk-pricing-banner .nk-pitch span {

  display: block;

  font-size: 0.68rem;

  line-height: 1.35;

  color: rgba(243, 235, 224, 0.68);

}

.nk-pricing-banner .nk-cta-line {

  margin: 0.65rem 0 0;

  font-size: 0.76rem;

  color: rgba(243, 235, 224, 0.7);

}

.nk-pricing-banner a {

  color: #e0b35a;

  font-weight: 700;

  text-decoration: none;

}

.nk-pricing-banner a:hover {

  text-decoration: underline;

}

@media (max-width: 640px) {

  .nk-pricing-banner .nk-pitch {

    grid-template-columns: 1fr;

  }

}



/* Real pricing cards are plain bordered divs, not data-slot=card */

body.nk-pricing main .grid > div.rounded-xl.border,

body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {

  border-color: rgba(224, 179, 90, 0.16) !important;

  background: rgba(16, 13, 11, 0.82) !important;

  border-radius: 16px !important;

  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;

}

body.nk-pricing main .grid > div.rounded-xl.border:hover,

body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border:hover {

  border-color: rgba(224, 179, 90, 0.42) !important;

  box-shadow: 0 0 0 1px rgba(224, 179, 90, 0.12), 0 16px 36px rgba(0, 0, 0, 0.35) !important;

  transform: translateY(-2px);

}

body.nk-pricing main .grid > div.rounded-xl.border h3 {

  color: #f3ebe0 !important;

}

body.nk-pricing main .grid > div.rounded-xl.border p[class*="line-clamp"] {

  color: rgba(185, 174, 160, 0.95) !important;

}

body.nk-pricing aside.sticky {

  border-radius: 16px;

}



/* Track badges: corner ribbon on plaza cards */

body.nk-pricing main .grid > div.rounded-xl.border,

body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {

  position: relative !important;

  overflow: visible !important;

  padding-top: 0.35rem;

}

/* Reserve a top strip so badge never covers vendor logo or Details */

body.nk-pricing main .grid > div.rounded-xl.border,

body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {

  padding-top: 1.85rem !important;

}

.nk-track-badge {

  position: absolute;

  top: 0.4rem;

  left: 0.55rem;

  right: auto;

  z-index: 3;

  font-size: 0.68rem;

  font-weight: 750;

  line-height: 1;

  padding: 0.32rem 0.58rem;

  border-radius: 999px;

  letter-spacing: 0.02em;

  pointer-events: none;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

}

@media (max-width: 640px) {

  body.nk-pricing main .grid > div.rounded-xl.border,

  body.nk-pricing main [class*="grid-cols"] > div.rounded-xl.border {

    padding-top: 1.7rem !important;

  }

  .nk-track-badge {

    font-size: 0.62rem;

    padding: 0.28rem 0.5rem;

  }

}

.nk-track-badge.eco {

  color: #0c1f1a;

  background: linear-gradient(120deg, #8fd9c6, #3db8a8);

  border: 1px solid rgba(143, 217, 198, 0.7);

}

.nk-track-badge.off {

  color: #1a1206;

  background: linear-gradient(120deg, #f0d08a, #e0b35a);

  border: 1px solid rgba(224, 179, 90, 0.75);

}

.nk-track-badge.rp {

  color: #f3ebe0;

  background: linear-gradient(120deg, #6b635a, #4a433c);

  border: 1px solid rgba(185, 174, 160, 0.55);

}

/* Footer tag pills */

span.nk-tag-pill {

  display: inline-flex !important;

  align-items: center;

  font-size: 0.68rem !important;

  font-weight: 700 !important;

  padding: 0.12rem 0.42rem !important;

  border-radius: 6px !important;

  line-height: 1.2 !important;

}

span.nk-tag-pill.eco {

  color: #8fd9c6 !important;

  background: rgba(61, 184, 168, 0.16) !important;

  border: 1px solid rgba(143, 217, 198, 0.4) !important;

}

span.nk-tag-pill.off {

  color: #e0b35a !important;

  background: rgba(224, 179, 90, 0.14) !important;

  border: 1px solid rgba(224, 179, 90, 0.42) !important;

}

span.nk-tag-pill.rp {

  color: #d8cfc3 !important;

  background: rgba(185, 174, 160, 0.12) !important;

  border: 1px solid rgba(185, 174, 160, 0.35) !important;

}

/* Sidebar track filters */

button.nk-track-filter,

[role="button"].nk-track-filter {

  outline: 1px solid rgba(224, 179, 90, 0.35) !important;

  background: rgba(224, 179, 90, 0.08) !important;

  font-weight: 700 !important;

}

button.nk-track-filter.eco,

[role="button"].nk-track-filter.eco {

  outline-color: rgba(143, 217, 198, 0.45) !important;

  background: rgba(61, 184, 168, 0.12) !important;

  color: #8fd9c6 !important;

}

button.nk-track-filter.off,

[role="button"].nk-track-filter.off {

  outline-color: rgba(224, 179, 90, 0.5) !important;

  background: rgba(224, 179, 90, 0.12) !important;

  color: #e0b35a !important;

}

button.nk-track-filter.rp,

[role="button"].nk-track-filter.rp {

  outline-color: rgba(185, 174, 160, 0.45) !important;

  color: #d8cfc3 !important;

}

/* Table tags column: make track words bold/colored even if truncated */

body.nk-pricing td .nk-tag-pill,

body.nk-pricing [data-slot="table-cell"] .nk-tag-pill {

  margin-right: 0.25rem;

}



input[type="search"],

input[placeholder*="Search"],

input[placeholder*="搜索"],

input[placeholder*="model" i] {

  border-color: rgba(224, 179, 90, 0.2) !important;

  background: rgba(12, 10, 9, 0.7) !important;

  border-radius: 999px !important;

}

input:focus,

textarea:focus {

  outline: none;

  border-color: rgba(224, 179, 90, 0.5) !important;

  box-shadow: 0 0 0 3px rgba(224, 179, 90, 0.16) !important;

}



[role="tablist"] [role="tab"][aria-selected="true"],

[role="tablist"] button[data-state="active"] {

  color: #e0b35a !important;

  border-color: #e0b35a !important;

}



table thead,

[data-slot="table-header"] {

  background: rgba(224, 179, 90, 0.06) !important;

}

table tbody tr:hover,

[data-slot="table-row"]:hover {

  background: rgba(224, 179, 90, 0.06) !important;

}



/* sidebar rules moved to theme contrast fix v27 */




footer .custom-footer a {

  color: #e0b35a !important;

}

footer {

  border-top-color: rgba(224, 179, 90, 0.12) !important;

}



[data-slot="badge"] {

  border-color: rgba(224, 179, 90, 0.28) !important;

  border-radius: 999px !important;

}



*::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}

*::-webkit-scrollbar-thumb {

  background: rgba(224, 179, 90, 0.28);

  border-radius: 999px;

}



@media (prefers-reduced-motion: reduce) {

  * {

    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}

/* ========== Theme contrast fix v27 (mobile+desktop light/dark) ========== */

/* Always-dark floating pill: force readable ink */
header.fixed nav a,
header.fixed nav button,
header.fixed nav [data-slot="button"],
header.fixed nav span,
header.fixed nav svg {
  color: #f3ebe0 !important;
}
header.fixed nav a:not([href="/sign-in"]):not([href="/sign-up"]):not(.nk-cta) {
  color: rgba(243, 235, 224, 0.82) !important;
}
header.fixed nav a[aria-current="page"],
header.fixed nav a.nk-active {
  color: #e0b35a !important;
}
header.fixed a[href="/sign-in"],
header.fixed a[href="/sign-up"],
header.fixed a.nk-cta,
header.fixed a.nk-cta span,
header.fixed button:has(a[href="/sign-in"]),
header.fixed button:has(a[href="/sign-up"]) {
  color: #1a1206 !important;
}

/* ----- Light mode page chrome ----- */
html:not(.dark) body:not(.nk-pricing) {
  background-color: #f6f1ea !important;
  color: #1c1917 !important;
  color-scheme: light;
}
html:not(.dark) body:not(.nk-pricing)::before {
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(224, 179, 90, 0.08), transparent 55%),
    radial-gradient(ellipse 40% 30% at 95% 20%, rgba(110, 184, 168, 0.05), transparent 50%) !important;
}
html:not(.dark) body:not(.nk-pricing) [data-slot="card"],
html:not(.dark) body:not(.nk-pricing) .bg-card {
  background: rgba(255, 252, 247, 0.92) !important;
  border-color: rgba(28, 25, 23, 0.1) !important;
  color: #1c1917 !important;
}

/* Light dropdowns / menus (were forced dark → invisible text) */
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"] {
  background: #fffcf7 !important;
  border-color: rgba(28, 25, 23, 0.12) !important;
  color: #1c1917 !important;
  box-shadow: 0 16px 40px rgba(28, 25, 23, 0.12) !important;
}
html:not(.dark) [role="menuitem"],
html:not(.dark) [data-slot="dropdown-menu-item"],
html:not(.dark) [data-slot="select-item"] {
  color: #1c1917 !important;
}

/* ----- Sidebar + mobile drawer: DARK theme ----- */
html.dark [data-slot="sidebar"],
html.dark [data-sidebar="sidebar"],
.dark [data-slot="sidebar"],
.dark [data-sidebar="sidebar"],
html.dark [data-slot="sheet-content"],
html.dark [data-sidebar="sidebar"][data-mobile="true"],
.dark [data-sidebar="sidebar"][data-mobile="true"] {
  background: linear-gradient(180deg, rgba(14, 12, 10, 0.98), rgba(10, 8, 7, 0.98)) !important;
  color: #f3ebe0 !important;
  border-color: rgba(224, 179, 90, 0.12) !important;
}
html.dark [data-sidebar="group-label"],
html.dark [data-slot="sidebar-group-label"],
.dark [data-sidebar="group-label"],
.dark [data-slot="sidebar-group-label"] {
  color: rgba(243, 235, 224, 0.55) !important;
}
html.dark [data-sidebar="menu-button"],
html.dark [data-slot="sidebar-menu-button"],
html.dark [data-sidebar="menu-button"] span,
html.dark [data-slot="sidebar-menu-button"] span,
html.dark [data-sidebar="menu-button"] svg,
html.dark [data-slot="sidebar-menu-button"] svg,
.dark [data-sidebar="menu-button"],
.dark [data-slot="sidebar-menu-button"] {
  color: rgba(243, 235, 224, 0.88) !important;
}
html.dark [data-sidebar="menu-button"][data-active="true"],
html.dark [data-slot="sidebar-menu-button"][data-active="true"],
.dark [data-sidebar="menu-button"][data-active="true"],
.dark [data-slot="sidebar-menu-button"][data-active="true"] {
  background: rgba(224, 179, 90, 0.16) !important;
  color: #e0b35a !important;
}

/* ----- Sidebar + mobile drawer: LIGHT theme (daytime fix) ----- */
html:not(.dark) [data-slot="sidebar"],
html:not(.dark) [data-sidebar="sidebar"],
html:not(.dark) [data-slot="sheet-content"],
html:not(.dark) [data-sidebar="sidebar"][data-mobile="true"] {
  background: linear-gradient(180deg, #fffcf7 0%, #f3eee6 100%) !important;
  color: #1c1917 !important;
  border-color: rgba(28, 25, 23, 0.1) !important;
}
html:not(.dark) [data-sidebar="group-label"],
html:not(.dark) [data-slot="sidebar-group-label"],
html:not(.dark) [data-slot="sheet-content"] [class*="text-muted"],
html:not(.dark) [data-sidebar="sidebar"] .text-muted-foreground {
  color: rgba(28, 25, 23, 0.55) !important;
}
html:not(.dark) [data-sidebar="menu-button"],
html:not(.dark) [data-slot="sidebar-menu-button"],
html:not(.dark) [data-sidebar="menu-button"] span,
html:not(.dark) [data-slot="sidebar-menu-button"] span,
html:not(.dark) [data-sidebar="menu-button"] svg,
html:not(.dark) [data-slot="sidebar-menu-button"] svg,
html:not(.dark) [data-slot="sheet-content"] a,
html:not(.dark) [data-slot="sheet-content"] button,
html:not(.dark) [data-slot="sheet-content"] span,
html:not(.dark) [data-sidebar="sidebar"] a,
html:not(.dark) [data-sidebar="sidebar"] button {
  color: #1c1917 !important;
}
html:not(.dark) [data-sidebar="menu-button"][data-active="true"],
html:not(.dark) [data-slot="sidebar-menu-button"][data-active="true"] {
  background: rgba(224, 179, 90, 0.2) !important;
  color: #8a6418 !important;
}
html:not(.dark) [data-sidebar="menu-button"]:hover,
html:not(.dark) [data-slot="sidebar-menu-button"]:hover {
  background: rgba(28, 25, 23, 0.06) !important;
}

/* Sheet overlay text / close button */
html:not(.dark) [data-slot="sheet-content"] [data-slot="sheet-title"],
html:not(.dark) [data-slot="sheet-content"] [data-slot="sheet-description"] {
  color: #1c1917 !important;
}
html.dark [data-slot="sheet-content"] [data-slot="sheet-title"],
html.dark [data-slot="sheet-content"] [data-slot="sheet-description"] {
  color: #f3ebe0 !important;
}

/* Inputs: theme aware outside pricing */
html:not(.dark) body:not(.nk-pricing) input[type="search"],
html:not(.dark) body:not(.nk-pricing) input[placeholder*="Search"],
html:not(.dark) body:not(.nk-pricing) input[placeholder*="搜索"],
html:not(.dark) body:not(.nk-pricing) input[placeholder*="model" i] {
  background: #fff !important;
  border-color: rgba(28, 25, 23, 0.14) !important;
  color: #1c1917 !important;
}
html.dark input[type="search"],
html.dark input[placeholder*="Search"],
html.dark input[placeholder*="搜索"],
html.dark input[placeholder*="model" i] {
  background: rgba(12, 10, 9, 0.7) !important;
  color: #f3ebe0 !important;
}

/* Tables */
html:not(.dark) body:not(.nk-pricing) table thead,
html:not(.dark) body:not(.nk-pricing) [data-slot="table-header"] {
  background: rgba(224, 179, 90, 0.1) !important;
  color: #1c1917 !important;
}
html:not(.dark) body:not(.nk-pricing) table tbody tr:hover,
html:not(.dark) body:not(.nk-pricing) [data-slot="table-row"]:hover {
  background: rgba(224, 179, 90, 0.08) !important;
}

/* ========== Extra mobile/daytime sidebar readability v28b ========== */
html:not(.dark) [data-slot="sidebar"] .text-foreground,
html:not(.dark) [data-sidebar="sidebar"] .text-foreground,
html:not(.dark) [data-slot="sheet-content"] .text-foreground,
html:not(.dark) [data-slot="sidebar"] [class*="text-foreground"],
html:not(.dark) [data-sidebar="sidebar"] [class*="text-foreground"] {
  color: #1c1917 !important;
}
html:not(.dark) [data-slot="sidebar"] .text-muted-foreground,
html:not(.dark) [data-sidebar="sidebar"] .text-muted-foreground,
html:not(.dark) [data-slot="sheet-content"] .text-muted-foreground,
html:not(.dark) [data-sidebar="group-label"],
html:not(.dark) [data-slot="sidebar-group-label"] {
  color: rgba(28, 25, 23, 0.58) !important;
}

/* Semi Design leftovers (if present) */
html:not(.dark) .semi-navigation,
html:not(.dark) .semi-navigation-vertical,
html:not(.dark) .semi-sidesheet-body {
  background: #fffcf7 !important;
  color: #1c1917 !important;
}
html:not(.dark) .semi-navigation-item,
html:not(.dark) .semi-navigation-item-text,
html:not(.dark) .semi-navigation-sub-title,
html:not(.dark) .semi-sidesheet-title {
  color: #1c1917 !important;
}
html.dark .semi-navigation,
html.dark .semi-navigation-vertical,
html.dark .semi-sidesheet-body {
  background: #0c0a09 !important;
  color: #f3ebe0 !important;
}
html.dark .semi-navigation-item,
html.dark .semi-navigation-item-text,
html.dark .semi-navigation-sub-title,
html.dark .semi-sidesheet-title {
  color: #f3ebe0 !important;
}

/* Mobile sheet portal */
html:not(.dark) [data-slot="sheet-content"] {
  background: #fffcf7 !important;
  color: #1c1917 !important;
}
html.dark [data-slot="sheet-content"] {
  background: #0c0a09 !important;
  color: #f3ebe0 !important;
}


/* ========== Agreement checkbox: clear checked vs unchecked (v30) ========== */
button[role="checkbox"],
[data-slot="checkbox"],
[role="checkbox"]:not(input),
button[role="checkbox"].peer,
span[data-slot="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  border-radius: 999px !important;
  border: 2.5px solid #5c4a36 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.12) !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.78rem !important;
  height: 0.78rem !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"],
button[role="checkbox"][data-state="on"],
[data-slot="checkbox"][data-state="on"] {
  background: #c4922e !important;
  border-color: #8f6a18 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(196, 146, 46, 0.4) !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,
button[role="checkbox"][data-state="on"] svg,
[data-slot="checkbox"][data-state="on"] 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.2rem !important;
  height: 1.2rem !important;
  accent-color: #c4922e !important;
  opacity: 1 !important;
  cursor: pointer !important;
  filter: none !important;
}

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

/* Login/register agreement block: always visible container */
body:has(input[autocomplete="current-password"]) label:has([role="checkbox"]),
body:has(input[autocomplete="current-password"]) label:has([data-slot="checkbox"]),
body:has(input[autocomplete="new-password"]) label:has([role="checkbox"]),
body:has(input[autocomplete="new-password"]) label:has([data-slot="checkbox"]),
body:has(input[autocomplete="current-password"]) div:has(> [role="checkbox"]),
body:has(input[autocomplete="current-password"]) div:has(> [data-slot="checkbox"]) {
  border: 1px solid rgba(92, 74, 54, 0.28) !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Dark theme */
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.4) !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,
html.dark button[role="checkbox"][aria-checked="true"] svg,
.dark button[role="checkbox"][aria-checked="true"] svg {
  color: #1a1206 !important;
  stroke: #1a1206 !important;
  opacity: 1 !important;
}

/* Icon-as-checkbox fallback (CircleCheck always painted) */
body:has(input[autocomplete="current-password"]) button:has(svg.lucide-circle-check),
body:has(input[autocomplete="current-password"]) button:has(svg.lucide-check-circle),
body:has(input[autocomplete="current-password"]) button:has(svg.lucide-circle-check-big),
body:has(input[autocomplete="new-password"]) button:has(svg.lucide-circle-check),
body:has(input[autocomplete="new-password"]) button:has(svg.lucide-check-circle) {
  color: #5c4a36 !important;
}
body:has(input[autocomplete="current-password"]) button[data-state="checked"]:has(svg),
body:has(input[autocomplete="current-password"]) button[aria-checked="true"]:has(svg),
body:has(input[autocomplete="new-password"]) button[data-state="checked"]:has(svg),
body:has(input[autocomplete="new-password"]) button[aria-checked="true"]:has(svg) {
  color: #c4922e !important;
}