/* code custom UI layer for New API. Loaded by Nginx, no app bundle changes. */
:root {
  --code-ivory: #f7f4ee;
  --code-paper: #fffdf8;
  --code-ink: #111111;
  --code-muted: #68645f;
  --code-line: #ded8ce;
  --code-graphite: #252525;
  --code-blue: #dbe9f6;
  --code-sage: #dfeadc;
  --code-gold: #c8ad72;
  --code-lavender: #e8e1f4;
  --code-coral: #f1d4c8;
}

html,
body {
  background:
    radial-gradient(circle at 78% 16%, rgba(219, 233, 246, .72), transparent 28rem),
    radial-gradient(circle at 10% 78%, rgba(223, 234, 220, .64), transparent 25rem),
    linear-gradient(135deg, var(--code-paper), var(--code-ivory)) !important;
  color: var(--code-ink) !important;
}

body,
body .semi-always-light {
  --semi-color-primary: #151515;
  --semi-color-primary-hover: #2a2a2a;
  --semi-color-primary-active: #000000;
  --semi-color-primary-light-default: rgba(200, 173, 114, .14);
  --semi-color-primary-light-hover: rgba(200, 173, 114, .22);
  --semi-color-primary-light-active: rgba(200, 173, 114, .30);
  --semi-color-focus-border: #c8ad72;
  --semi-color-link: #1d1d1d;
  --semi-color-link-hover: #765f2c;
  --semi-color-bg-0: rgba(255, 253, 248, .92);
  --semi-color-bg-1: rgba(250, 247, 239, .88);
  --semi-color-bg-2: rgba(246, 241, 231, .9);
  --semi-color-border: rgba(89, 78, 62, .16);
  --semi-color-text-0: #111111;
  --semi-color-text-1: rgba(17, 17, 17, .78);
  --semi-color-text-2: rgba(17, 17, 17, .56);
  --semi-color-fill-0: rgba(17, 17, 17, .045);
  --semi-color-fill-1: rgba(17, 17, 17, .075);
  --semi-color-fill-2: rgba(17, 17, 17, .11);
  --semi-shadow-elevated: 0 20px 60px rgba(50, 43, 30, .13), inset 0 0 0 1px rgba(255, 255, 255, .72);
}

body {
  letter-spacing: 0 !important;
}

#root {
  min-height: 100vh;
  isolation: isolate;
}

#root::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(17, 17, 17, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, .028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%);
}

a[href="/"] h4,
a[href="/"] .semi-typography,
a[href="/"] {
  letter-spacing: .01em;
}

a[href="/"] h4 {
  font-size: 22px !important;
  font-weight: 760 !important;
  color: var(--code-ink) !important;
}

a[href="/"] img[alt="logo"] {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(35, 27, 12, .16);
}

header,
.semi-navigation,
.semi-navigation-list-wrapper {
  background: rgba(255, 253, 248, .78) !important;
  border-color: rgba(89, 78, 62, .12) !important;
  backdrop-filter: blur(18px) saturate(1.12);
}

nav a,
.semi-navigation-item,
.semi-navigation-item-text {
  color: rgba(17, 17, 17, .72) !important;
  font-weight: 560 !important;
}

nav a:hover,
.semi-navigation-item:hover,
.semi-navigation-item-selected {
  color: var(--code-ink) !important;
  background: rgba(200, 173, 114, .12) !important;
}

main {
  position: relative;
  overflow: hidden;
}

main::before {
  content: "";
  position: absolute;
  top: 9rem;
  right: clamp(1rem, 8vw, 9rem);
  width: min(35vw, 520px);
  aspect-ratio: 1.18;
  pointer-events: none;
  opacity: .82;
  background:
    radial-gradient(circle at 72% 26%, rgba(200, 173, 114, .55) 0 5px, transparent 6px),
    radial-gradient(circle at 42% 52%, rgba(126, 160, 186, .54) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 76%, rgba(133, 165, 126, .48) 0 5px, transparent 6px),
    radial-gradient(circle at 20% 38%, rgba(219, 142, 112, .38) 0 4px, transparent 5px),
    linear-gradient(28deg, transparent 0 21%, rgba(17, 17, 17, .18) 21.4% 21.8%, transparent 22.2%),
    linear-gradient(137deg, transparent 0 36%, rgba(200, 173, 114, .34) 36.3% 36.8%, transparent 37.2%),
    linear-gradient(82deg, transparent 0 52%, rgba(17, 17, 17, .16) 52.2% 52.6%, transparent 53%),
    linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
  border: 1px solid rgba(89, 78, 62, .13);
  border-radius: 28px;
  box-shadow: 0 32px 90px rgba(55, 45, 26, .12), inset 0 0 0 1px rgba(255, 255, 255, .72);
  transform: rotate(-4deg);
  backdrop-filter: blur(8px);
}

main::after {
  content: "路由  模型  用量  稳定性";
  position: absolute;
  top: 31rem;
  right: clamp(2rem, 10vw, 12rem);
  color: rgba(17, 17, 17, .42);
  font-size: 12px;
  letter-spacing: .22em;
  pointer-events: none;
}

h1,
.semi-typography h1 {
  color: var(--code-ink) !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

p,
.semi-typography,
.semi-typography-paragraph {
  color: var(--code-muted) !important;
}

input,
.semi-input,
.semi-input-wrapper,
.semi-select,
.semi-select-selection,
.semi-tagInput,
.semi-datepicker-range-input {
  background: rgba(255, 253, 248, .78) !important;
  border-color: rgba(89, 78, 62, .18) !important;
  color: var(--code-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

main .semi-input-wrapper:has(input[aria-label="API 地址"]) {
  width: clamp(300px, 34vw, 460px) !important;
  min-width: min(82vw, 300px) !important;
}

main div:has(> .semi-input-wrapper input[aria-label="API 地址"]) {
  width: min(92vw, 620px) !important;
  margin-left: auto;
  margin-right: auto;
}

main input[aria-label="API 地址"] {
  font-variant-numeric: tabular-nums;
}

.semi-input-wrapper:hover,
.semi-select:hover {
  border-color: rgba(200, 173, 114, .55) !important;
}

.semi-button {
  border-radius: 10px !important;
  font-weight: 650 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}

.semi-button:hover {
  transform: translateY(-1px);
}

.semi-button-primary,
.semi-button.semi-button-primary {
  background: linear-gradient(180deg, #2d2d2d, #101010) !important;
  border-color: #101010 !important;
  color: #fffdf8 !important;
  box-shadow: 0 14px 32px rgba(17, 17, 17, .20);
}

.semi-button-light,
.semi-button-secondary,
.semi-button-tertiary {
  background: rgba(255, 253, 248, .7) !important;
  border: 1px solid rgba(89, 78, 62, .16) !important;
}

.semi-card,
.semi-modal-content,
.semi-popover-wrapper,
.semi-dropdown,
.semi-table,
.semi-table-container {
  background: rgba(255, 253, 248, .72) !important;
  border-color: rgba(89, 78, 62, .14) !important;
  box-shadow: 0 18px 55px rgba(52, 43, 25, .09), inset 0 0 0 1px rgba(255, 255, 255, .68) !important;
  backdrop-filter: blur(14px);
}

.semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background: rgba(247, 244, 238, .78) !important;
}

.semi-tag {
  border-radius: 999px !important;
  border-color: rgba(89, 78, 62, .14) !important;
}

img[alt="OpenAI"],
img[alt="Claude"],
img[alt="Gemini"],
img[alt="DeepSeek"],
img[alt="Minimax"],
img[alt="Qwen"],
img[alt="AzureAI"],
img[alt="Midjourney"],
img[alt="MoonshotAI"],
img[alt="Grok"],
img[alt="Zhipu"],
img[alt="Cohere"] {
  filter: none !important;
  opacity: 1 !important;
}

main img[alt]:not([alt="logo"]) {
  background: rgba(255, 253, 248, .76);
  border: 1px solid rgba(89, 78, 62, .11);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(52, 43, 25, .08);
}

.blur-ball,
.with-pastel-balls::before {
  opacity: .28 !important;
  filter: blur(90px) saturate(.82) !important;
}

.custom-footer,
footer {
  color: rgba(17, 17, 17, .48) !important;
}

@media (max-width: 900px) {
  main::before,
  main::after {
    display: none;
  }

  h1 {
    font-size: clamp(2.3rem, 12vw, 4.2rem) !important;
  }
}

@media (max-width: 600px) {
  main div:has(> .semi-input-wrapper input[aria-label="API 地址"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  main .semi-input-wrapper:has(input[aria-label="API 地址"]) {
    width: 100% !important;
    min-width: 0 !important;
  }

  main div:has(> .semi-select) {
    justify-content: center !important;
    width: 100% !important;
  }

  nav a[href="https://docs.newapi.pro"],
  nav a[href="/about"] {
    display: none !important;
  }
}