/* Shared visual language for the xk API homepage and New API panel. */
:root {
  --site-background: #090909;
  --site-surface: #111112;
  --site-raised: #19191b;
  --site-text: #eeeeef;
  --site-muted: #99999f;
  --site-border: rgb(255 255 255 / 12%);
  --site-glass: linear-gradient(
    160deg,
    rgb(255 255 255 / 6%),
    rgb(255 255 255 / 1%)
  );
  --site-font:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
}
html.dark:has(body[data-site-panel]),
html.dark body[data-site-panel] {
  --background: var(--site-background);
  --foreground: var(--site-text);
  --card: var(--site-surface);
  --card-foreground: var(--site-text);
  --popover: var(--site-surface);
  --popover-foreground: var(--site-text);
  --primary: #f5f5f5;
  --primary-foreground: #111112;
  --secondary: var(--site-raised);
  --secondary-foreground: var(--site-text);
  --muted: var(--site-raised);
  --muted-foreground: var(--site-muted);
  --accent: #252528;
  --accent-foreground: #ffffff;
  --border: var(--site-border);
  --input: rgb(255 255 255 / 16%);
  --ring: #a685ff;
  --radius: 1rem;
  --font-body: var(--site-font);
  --font-sans: var(--site-font);
  --sidebar: #0d0d0f;
  --sidebar-foreground: var(--site-muted);
  --sidebar-primary: #f5f5f5;
  --sidebar-primary-foreground: #111112;
  --sidebar-accent: #232326;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: var(--site-border);
  --sidebar-ring: #a685ff;
  --table-row: var(--site-surface);
  --table-header: #171719;
  --table-header-hover: #202023;
}
body[data-site-panel] {
  font-family: var(--site-font);
}
body[data-site-panel] [data-slot='card'],
body[data-site-panel] [data-slot='dialog-content'],
body[data-site-panel] [data-slot='sheet-content'],
body[data-site-panel] [data-slot='dropdown-menu-content'],
body[data-site-panel] [data-slot='popover-content'] {
  background: var(--site-glass), var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 1rem;
  box-shadow:
    0 12px 40px rgb(0 0 0 / 20%),
    inset 0 1px rgb(255 255 255 / 4%);
}
body[data-site-panel] [data-slot='button'] {
  border-radius: 999px;
}
body[data-site-panel] [data-slot='input'],
body[data-site-panel] [data-slot='textarea'],
body[data-site-panel] [data-slot='select-trigger'] {
  border-radius: 0.75rem;
  background-color: rgb(255 255 255 / 3%);
}
body[data-site-panel] .sub2api-shell header {
  background: rgb(9 9 9 / 88%);
  backdrop-filter: blur(20px);
}
body[data-site-panel] .sub2api-shell [data-slot='sidebar-menu-button'] {
  border-radius: 0.75rem;
}
.site-public-header > div > div,
.site-public-header nav,
.site-auth-brand {
  background: var(--site-glass), rgb(9 9 9 / 86%);
  border: 1px solid var(--site-border);
  border-radius: 999px;
  backdrop-filter: blur(20px);
}
.site-public-header > div > div {
  margin-top: 10px;
  padding-inline: 16px;
}
.site-public-header a {
  border-radius: 999px;
}
.site-auth-layout {
  background:
    radial-gradient(
      ellipse at 75% 10%,
      rgb(166 133 255 / 10%),
      transparent 45%
    ),
    radial-gradient(ellipse at 10% 80%, rgb(89 219 238 / 5%), transparent 40%),
    var(--site-background);
}
.site-auth-brand {
  padding: 10px 18px;
}
.site-auth-card {
  margin-block: 5rem 2rem;
  padding: 2rem;
  border: 1px solid var(--site-border);
  border-radius: 1.5rem;
  background: var(--site-glass), rgb(17 17 18 / 85%);
  box-shadow: 0 24px 100px rgb(0 0 0 / 35%);
}
#landing-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#landing-account .landing-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 14px var(--site-font);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--site-text);
  background: transparent;
}
#landing-account .landing-account-primary {
  background: #f5f5f5;
  color: #111112;
}
#landing-account .landing-account-avatar {
  padding: 0;
  width: 34px;
}
#landing-account [data-slot='avatar'],
#landing-account [data-slot='avatar-fallback'] {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font: 600 14px var(--site-font);
}
#landing-account .landing-account-button:hover {
  filter: brightness(0.88);
}
#landing-account .landing-account-button:focus-visible {
  outline: 2px solid #a685ff;
  outline-offset: 3px;
}
#landing-account [role='status'] {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #252528;
}
.landing-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 639px) {
  .site-auth-card {
    padding: 1.5rem;
    margin-inline: 0.25rem;
  }
  .landing-header-controls {
    gap: 2px;
  }
  .landing-header-controls #landing-language {
    max-width: 88px;
    padding: 0 2px !important;
    font-size: 12px !important;
  }
  #landing-account .landing-account-button {
    padding: 0 9px;
    font-size: 12px;
  }
  #landing-account .landing-account-avatar {
    padding: 0;
  }
  .landing-header-controls > a {
    display: none;
  }
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/0c1a10e6ed15-2c55a0e60120577a-s.0-dom-5bn10r2.woff2)
    format('woff2');
  unicode-range:
    U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/590cab11fbec-9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)
    format('woff2');
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/f16e9e568305-ad66f9afd8947f86-s.3lvt2whj97whp.woff2)
    format('woff2');
  unicode-range: U+1F??;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/65eec8c8a5c2-5476f68d60460930-s.2uwcyprjm3xu3.woff2)
    format('woff2');
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/b41fdc0acf5a-2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)
    format('woff2');
  unicode-range:
    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/408eb0d0a735-1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)
    format('woff2');
  unicode-range:
    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/landing/assets/2938e802c87f-83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)
    format('woff2');
  unicode-range:
    U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}