:root {
  --yi-bg: #f3f6f8;
  --yi-surface: #ffffff;
  --yi-muted-surface: #f7f9fa;
  --yi-line: #dfe6eb;
  --yi-line-strong: #cbd7df;
  --yi-text: #173042;
  --yi-muted: #667b89;
  --yi-brand: #176b78;
  --yi-brand-strong: #0f5360;
  --yi-navy: #193d59;
  --yi-radius: 8px;
  --yi-shadow-sm: 0 1px 2px rgba(20, 48, 66, 0.06);
  --yi-shadow-md: 0 10px 28px rgba(20, 48, 66, 0.08);
}

html.dark {
  --yi-bg: #11191f;
  --yi-surface: #182229;
  --yi-muted-surface: #202c34;
  --yi-line: #2f3c45;
  --yi-line-strong: #40515c;
  --yi-text: #ecf3f5;
  --yi-muted: #a2b2bc;
  --yi-brand: #55b9b0;
  --yi-brand-strong: #82d0c8;
  --yi-navy: #8fc1df;
  --yi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --yi-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.26);
}

body {
  color: var(--yi-text) !important;
  background: var(--yi-bg) !important;
  font-family:
    "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Custom home navigation shown in the public landing page. */
.syn-topbar {
  width: min(1480px, calc(100% - 32px)) !important;
  min-height: 58px !important;
  margin: 0 auto 18px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--yi-line) !important;
  border-radius: var(--yi-radius) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--yi-shadow-sm) !important;
  backdrop-filter: blur(14px);
}

.syn-brand {
  gap: 10px !important;
  color: var(--yi-text) !important;
}

.syn-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--yi-radius) !important;
  border-color: #cfe0e4 !important;
  background: #f6fbfb !important;
  box-shadow: var(--yi-shadow-sm) !important;
}

.syn-mark img {
  width: 22px !important;
  height: 22px !important;
}

.syn-brand-copy strong {
  color: var(--yi-text) !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

.syn-brand-copy span {
  color: var(--yi-muted) !important;
}

.syn-nav {
  gap: 5px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.syn-nav button {
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--yi-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease !important;
}

.syn-nav button:hover {
  border-color: #cfe0e4 !important;
  background: #f1f7f7 !important;
  color: var(--yi-brand-strong) !important;
}

.syn-nav button.is-active {
  border-color: #b9dcd9 !important;
  background: #e8f3f2 !important;
  color: #155c65 !important;
  box-shadow: inset 0 -2px 0 #2f8b84 !important;
}

/* Existing classic shell selectors, kept compatible with the shipped bundle. */
.app-layout,
.app-layout > .semi-layout,
.app-layout .semi-layout-content,
.classic-page-fill,
.public-page-content {
  background: var(--yi-bg) !important;
}

header.sticky {
  height: 64px !important;
  border-bottom: 1px solid var(--yi-line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 4px 18px rgba(20, 48, 66, 0.05) !important;
  backdrop-filter: blur(14px);
}

.dark header.sticky {
  border-bottom-color: var(--yi-line) !important;
  background: rgba(24, 34, 41, 0.94) !important;
}

header.sticky nav a {
  min-height: 36px !important;
  padding: 0 11px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: var(--yi-muted) !important;
  font-size: 13px !important;
}

header.sticky nav a:hover,
header.sticky nav a[aria-current="page"] {
  border-color: #cfe0e4 !important;
  background: #e8f3f2 !important;
  color: #155c65 !important;
}

.app-sider,
.sidebar-container,
.sidebar-nav {
  background: var(--yi-surface) !important;
}

.app-sider {
  border-right: 1px solid var(--yi-line) !important;
  box-shadow: 5px 0 18px rgba(20, 48, 66, 0.035) !important;
}

.sidebar-nav-item {
  min-height: 38px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
}

.sidebar-nav-item:hover {
  border-color: var(--yi-line) !important;
  background: var(--yi-muted-surface) !important;
}

.semi-navigation-item-selected,
.sidebar-nav-item-selected {
  border-color: #cce3e2 !important;
  background: #eaf4f3 !important;
}

.app-content .semi-card,
.pricing-layout .semi-card,
.semi-modal-content,
.semi-sidesheet-inner,
.semi-popover-content {
  border: 1px solid var(--yi-line) !important;
  border-radius: var(--yi-radius) !important;
  background: var(--yi-surface) !important;
  box-shadow: var(--yi-shadow-sm) !important;
}

.app-content .semi-card:hover,
.pricing-layout .semi-card:hover {
  border-color: var(--yi-line-strong) !important;
}

.app-content .semi-table-container {
  overflow: hidden;
  border: 1px solid var(--yi-line);
  border-radius: var(--yi-radius);
  background: var(--yi-surface);
}

.app-content .semi-table-thead > .semi-table-row > .semi-table-row-head {
  height: 44px;
  border-bottom: 1px solid var(--yi-line);
  background: var(--yi-muted-surface);
  color: var(--yi-muted);
  font-size: 12px;
  font-weight: 700;
}

.semi-button {
  min-height: 34px !important;
  border-radius: 7px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.semi-button-primary.semi-button-solid {
  background: var(--yi-brand) !important;
}

.semi-button-primary.semi-button-solid:hover {
  background: var(--yi-brand-strong) !important;
}

.semi-input-wrapper,
.semi-select,
.semi-input-textarea-wrapper,
.semi-datepicker-range-input,
.semi-tagInput {
  border-color: var(--yi-line-strong) !important;
  border-radius: 7px !important;
  background: var(--yi-surface) !important;
}

.pricing-layout,
.pricing-content,
.pricing-sidebar,
.pricing-search-header,
.pricing-view-container,
.pricing-view-container-mobile {
  background: var(--yi-bg) !important;
}

.pricing-sidebar {
  border-right: 1px solid var(--yi-line) !important;
}

.pricing-search-header .semi-card-cover {
  background: var(--yi-navy) !important;
}

.site-footer-shell,
footer.semi-layout-footer,
.site-footer {
  border-top: 1px solid var(--yi-line) !important;
  background: var(--yi-surface) !important;
}

/* The configured home document contains a hidden runtime bridge. Keep its
   fallback script text from becoming a visible paragraph in the renderer. */
.custom-home-content > .syn-home ~ p,
.custom-home-content > .syn-home ~ pre {
  display: none !important;
}

@media (max-width: 760px) {
  .syn-topbar {
    width: calc(100% - 20px) !important;
    align-items: flex-start !important;
    padding: 8px !important;
  }

  .syn-nav {
    width: 100%;
    margin-top: 4px !important;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .syn-nav button {
    flex: 0 0 auto;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

/* New default frontend shell. These selectors intentionally use stable
   semantic utility tokens and data-slot attributes instead of generated
   class names, so the visual layer survives bundle rebuilds. */
body {
  min-height: 100vh;
  color: var(--yi-text) !important;
  background: var(--yi-bg) !important;
  font-family:
    "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 30%),
    var(--yi-bg) !important;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header.pointer-events-none {
  z-index: 50;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header > div.pointer-events-auto {
  padding-top: 10px !important;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav {
  height: 58px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(203, 215, 223, 0.9) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 24px rgba(20, 48, 66, 0.08) !important;
  backdrop-filter: blur(18px);
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav > a:first-child {
  color: var(--yi-text) !important;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav > a:first-child img {
  border: 1px solid #cfe0e4;
  border-radius: 8px;
  background: #f4fbfb;
  padding: 3px;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav > div.hidden > a {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--yi-muted) !important;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav > div.hidden > a:hover {
  border-color: #cfe0e4;
  background: #f1f7f7;
  color: var(--yi-brand-strong) !important;
  transform: translateY(-1px);
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav > div.hidden > a[aria-current="page"],
body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav > div.hidden > a.active {
  border-color: #afd5d2;
  background: #e7f3f2;
  color: #155c65 !important;
  box-shadow: inset 0 -2px 0 #2f8b84;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav [data-slot="button"],
body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav a[data-slot="button"] {
  border-radius: 8px !important;
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] [data-slot="button"][class~="bg-primary"],
body > #root > div[class~="bg-background"][class~="min-h-svh"] a[data-slot="button"][class~="bg-primary"] {
  background: var(--yi-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(23, 107, 120, 0.18);
}

body > #root > div[class~="bg-background"][class~="min-h-svh"] [data-slot="button"][class~="bg-primary"]:hover,
body > #root > div[class~="bg-background"][class~="min-h-svh"] a[data-slot="button"][class~="bg-primary"]:hover {
  background: var(--yi-brand-strong) !important;
}

/* Shared controls and framed surfaces across public and authenticated views. */
[data-slot="input"],
[data-slot="textarea"],
[data-slot="select-trigger"],
[data-slot="combobox-trigger"] {
  min-height: 40px;
  border-color: var(--yi-line-strong) !important;
  border-radius: 8px !important;
  background: var(--yi-surface) !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

[data-slot="input"]:hover,
[data-slot="textarea"]:hover,
[data-slot="select-trigger"]:hover,
[data-slot="combobox-trigger"]:hover {
  border-color: #a9c4cb !important;
}

[data-slot="input"]:focus,
[data-slot="textarea"]:focus,
[data-slot="select-trigger"]:focus-visible,
[data-slot="combobox-trigger"]:focus-visible {
  border-color: var(--yi-brand) !important;
  box-shadow: 0 0 0 3px rgba(23, 107, 120, 0.12) !important;
}

[data-slot="button"] {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

[data-slot="card"],
[data-slot="dialog-content"],
[data-slot="sheet-content"],
[data-slot="popover-content"] {
  border-color: var(--yi-line) !important;
  border-radius: 12px !important;
  background: var(--yi-surface) !important;
  box-shadow: var(--yi-shadow-md) !important;
}

/* Authenticated console shell. The sidebar primitives expose data-slot
   markers, which keeps this styling independent of the selected layout mode. */
[data-slot="sidebar-inner"] {
  border-right: 1px solid var(--yi-line) !important;
  background: var(--yi-surface) !important;
  box-shadow: 5px 0 18px rgba(20, 48, 66, 0.04) !important;
}

[data-slot="sidebar-header"],
[data-slot="sidebar-footer"] {
  border-color: var(--yi-line) !important;
}

[data-slot="sidebar-group-label"] {
  color: var(--yi-muted) !important;
  letter-spacing: 0.04em;
}

[data-slot="sidebar-menu-button"] {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px !important;
  color: var(--yi-muted) !important;
}

[data-slot="sidebar-menu-button"]:hover {
  border-color: var(--yi-line) !important;
  background: var(--yi-muted-surface) !important;
  color: var(--yi-text) !important;
}

[data-slot="sidebar-menu-button"][data-active="true"] {
  border-color: #c7e0df !important;
  background: #e8f3f2 !important;
  color: #155c65 !important;
  box-shadow: inset 3px 0 0 #2f8b84;
}

[data-slot="sidebar-inset"] {
  background: var(--yi-bg) !important;
}

[data-slot="table-container"] {
  overflow: hidden;
  border: 1px solid var(--yi-line) !important;
  border-radius: 10px !important;
  background: var(--yi-surface) !important;
  box-shadow: var(--yi-shadow-sm);
}

[data-slot="table-header"] {
  background: var(--yi-muted-surface) !important;
  color: var(--yi-muted) !important;
}

[data-slot="table-head"] {
  height: 42px;
  color: var(--yi-muted) !important;
  font-size: 12px;
  font-weight: 700;
}

[data-slot="table-row"] {
  border-color: var(--yi-line) !important;
  transition: background 140ms ease;
}

[data-slot="table-row"]:hover {
  background: var(--yi-muted-surface) !important;
}

/* Model plaza: retain provider marks and names while making comparison cards
   quieter and easier to scan. */
body:has(input[aria-label="搜索模型"]) [class~="grid"][class~="xl:grid-cols-[330px_minmax(0,1fr)]"] > aside {
  border-color: var(--yi-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: var(--yi-shadow-sm) !important;
}

body:has(input[aria-label="搜索模型"]) [class~="group"][class~="relative"][class~="flex"][class~="flex-col"][class~="rounded-xl"] {
  border-color: var(--yi-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 2px 8px rgba(20, 48, 66, 0.035) !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

body:has(input[aria-label="搜索模型"]) [class~="group"][class~="relative"][class~="flex"][class~="flex-col"][class~="rounded-xl"]:hover {
  border-color: #b8d1d5 !important;
  box-shadow: 0 10px 24px rgba(20, 48, 66, 0.08) !important;
  transform: translateY(-2px);
}

body:has(input[aria-label="搜索模型"]) input[aria-label="搜索模型"] {
  min-height: 44px;
  border-color: var(--yi-line-strong) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 4px 14px rgba(20, 48, 66, 0.04);
}

body:has(input[aria-label="搜索模型"]) [class~="group"][class~="inline-flex"][class~="rounded-md"][class~="border"] {
  border-color: var(--yi-line) !important;
}

/* Auth pages: keep the existing form fields and copy, but give the entry
   surface the same quiet enterprise treatment as the rest of the site. */
body:has(input[name="username"]) {
  background:
    radial-gradient(circle at 12% 10%, rgba(142, 211, 214, 0.2), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(177, 211, 235, 0.24), transparent 30%),
    var(--yi-bg) !important;
}

body:has(input[name="username"]) [class~="container"][class~="flex"][class~="items-center"] > div[class~="mx-auto"] {
  max-width: 520px !important;
  padding: 34px 32px !important;
  border: 1px solid rgba(203, 215, 223, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(20, 48, 66, 0.1);
  backdrop-filter: blur(14px);
}

body:has(input[name="username"]) [data-slot="form-item"] label {
  color: var(--yi-text) !important;
}

body:has(input[name="username"]) [data-slot="form-control"] {
  min-height: 42px;
  border-color: var(--yi-line-strong) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

body:has(input[name="username"]) [data-slot="form-control"]:focus {
  border-color: var(--yi-brand) !important;
  box-shadow: 0 0 0 3px rgba(23, 107, 120, 0.12) !important;
}

body:has(input[name="username"]) form > [data-slot="button"][type="submit"] {
  min-height: 42px;
  margin-top: 8px;
  background: var(--yi-brand) !important;
  box-shadow: 0 8px 16px rgba(23, 107, 120, 0.18);
}

/* Policy and agreement pages are content-first, but should still feel part
   of the same product instead of an unframed browser document. */
body:has(.prose) [class~="max-w-6xl"] {
  margin-top: 28px;
  margin-bottom: 40px;
  border: 1px solid var(--yi-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--yi-shadow-sm);
}

body:has(.prose) .prose {
  color: var(--yi-text);
}

body:has(.prose) .prose h1,
body:has(.prose) .prose h2,
body:has(.prose) .prose h3 {
  color: var(--yi-navy);
}

@media (max-width: 760px) {
  body > #root > div[class~="bg-background"][class~="min-h-svh"] > header > div.pointer-events-auto {
    width: calc(100% - 20px) !important;
    padding-top: 8px !important;
  }

  body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav {
    height: 54px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
  }

  body:has(input[name="username"]) [class~="container"][class~="flex"][class~="items-center"] > div[class~="mx-auto"] {
    margin: 0 14px;
    padding: 26px 18px !important;
    border-radius: 14px;
  }

  body:has(input[aria-label="搜索模型"]) [class~="grid"][class~="xl:grid-cols-[330px_minmax(0,1fr)]"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html.dark body > #root > div[class~="bg-background"][class~="min-h-svh"] > header nav,
html.dark body:has(input[name="username"]) [class~="container"][class~="flex"][class~="items-center"] > div[class~="mx-auto"],
html.dark body:has(input[aria-label="搜索模型"]) [class~="group"][class~="relative"][class~="flex"][class~="flex-col"][class~="rounded-xl"],
html.dark body:has(input[aria-label="搜索模型"]) [class~="grid"][class~="xl:grid-cols-[330px_minmax(0,1fr)]"] > aside,
html.dark body:has(.prose) [class~="max-w-6xl"] {
  border-color: var(--yi-line) !important;
  background: rgba(24, 34, 41, 0.92) !important;
  box-shadow: var(--yi-shadow-md) !important;
}