:root {
  --ink: #17212b;
  --muted: #6d7884;
  --line: #dfe5e8;
  --bg: #f5f7f8;
  --card: #fff;
  --teal: #087f78;
  --teal2: #dff3ef;
  --red: #b42318;
  --shadow: 0 10px 30px #17212b0d;
}
* { box-sizing: border-box; }
/* Keep the server-provided text visible while translations load. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.nav {
  height: 70px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 max(24px, calc((100% - 1120px) / 2));
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  text-decoration: none;
}
.brand span { color: var(--teal); }
.brand em {
  font-style: normal;
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
}
.nav nav { display: flex; gap: 22px; flex: 1; }
.nav nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 23px 0;
  border-bottom: 2px solid transparent;
}
.nav nav a.active { color: var(--ink); border-color: var(--teal); }
.langSwitch { position: relative; margin-left: auto; flex: 0 0 auto; }
.langToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  background: #fff;
  color: var(--ink);
  font: 13px/1.2 inherit;
  cursor: pointer;
}
.langToggle svg, .button svg, .iconButton svg { width: 16px; height: 16px; flex: 0 0 auto; }
.langToggle:hover, .langSwitch.open .langToggle { border-color: var(--teal); }
.globeIcon {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.globeIcon::before { content: ""; position: absolute; inset: 2px 5px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; border-radius: 50%; }
.globeIcon::after { content: ""; position: absolute; left: 1px; right: 1px; top: 6px; border-top: 1px solid currentColor; }
.langChevron { font-size: 15px; color: var(--muted); transform: translateY(-1px); }
.langChevron { transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.langSwitch.open .langChevron { transform: rotate(180deg); }
.langMenu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 180px;
  max-height: min(360px, calc(100vh - 92px));
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 14px 30px #17212b1a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.96);
  transform-origin: top right;
  transition: opacity 260ms cubic-bezier(.16, 1, .3, 1), transform 360ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 360ms;
}
.langSwitch.open .langMenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.themeControl { display: inline-flex; align-items: center; margin: 0 0 0 8px; font-size: 13px; color: inherit; }
.themeControl select {
  width: auto;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  font: 13px/1.2 inherit;
  box-sizing: border-box;
}
.langOption {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  padding: 9px 8px;
  text-align: left;
  font: 13px/1.2 inherit;
  cursor: pointer;
}
.langOption:hover, .langOption.active { background: var(--teal2); color: var(--teal); font-weight: 700; }
.langBtn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 12px/1.2 inherit;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.langBtn.active { color: var(--ink); background: var(--teal2); font-weight: 700; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.shell { max-width: 1120px; margin: 0 auto; padding: 48px 24px; }
.heroBanner {
  background: linear-gradient(180deg, #e8f4f2 0%, var(--bg) 100%);
  padding: 88px 0 48px;
  text-align: center;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: var(--teal);
  margin: 0 0 10px;
}
.heroBanner h1, .pageHead h1, .docs h1 {
  font-size: 46px;
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: -1px;
}
.lead, .pageHead .muted { max-width: 640px; color: var(--muted); margin: 0 auto 28px; font-size: 18px; }
.pageHead .muted { margin-left: 0; }
.heroActions, .actions, .inline { display: flex; align-items: center; gap: 10px; justify-content: center; }
.heroStats {
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 640px;
  gap: 16px;
}
.heroStats strong { display: block; font-size: 28px; }
.heroStats span { color: var(--muted); font-size: 13px; }
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 48px;
}
.features article, .stat, .panel, .modelCard {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.features article { padding: 22px; }
.features h3 { margin: 0 0 8px; font-size: 16px; }
.features p { margin: 0; color: var(--muted); }
.sectionHead, .panelHead, .pageHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.sectionHead h2, .panel h2, .docs h2 { margin: 0 0 8px; font-size: 28px; }
.modelGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 56px; }
.modelCard { padding: 20px; min-height: 112px; }
.modelCard .modelLogo { display: block; margin-bottom: 12px; }
.modelCard strong { display: block; font-size: 18px; margin-bottom: 6px; }
.modelCard span { color: var(--muted); font-size: 13px; }
.ctaBand {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: center;
  padding: 28px 0 64px;
}
.ctaBand h2 { margin: 0 0 8px; }
.ctaBand p { margin: 0; color: var(--muted); }
.ctaBand code, .docs code { color: var(--teal); }
.siteFoot {
  border-top: 1px solid var(--line);
  padding: 22px 0 36px;
  color: var(--muted);
  font-size: 13px;
}
.siteFoot .wrap { display: flex; justify-content: space-between; }
.siteFoot a { color: var(--teal); text-decoration: none; }
.themeControl { display: inline-flex; align-items: center; }
.themeControl select, .themeSelect { border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; background: var(--card); color: var(--ink); font: 13px/1.2 inherit; transition: background-color 420ms cubic-bezier(.16, 1, .3, 1), color 420ms cubic-bezier(.16, 1, .3, 1), border-color 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms cubic-bezier(.16, 1, .3, 1); }
html.themeChanging body, html.themeChanging .nav, html.themeChanging .panel, html.themeChanging .modelCard, html.themeChanging .features article, html.themeChanging input, html.themeChanging textarea, html.themeChanging select, html.themeChanging .langToggle, html.themeChanging .langMenu {
  transition: background-color 420ms cubic-bezier(.16, 1, .3, 1), color 420ms cubic-bezier(.16, 1, .3, 1), border-color 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms cubic-bezier(.16, 1, .3, 1);
}
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.button.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.rechargeOptions { display: flex; flex-wrap: wrap; gap: 10px; }
.packagePreview { margin: 18px 0 20px; padding: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; }
.packagePreviewHead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.packagePreviewHead h3 { margin: 0 0 4px; font-size: 20px; }
.packagePreviewHead p { margin: 0; }
.packageGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.packageCard { min-width: 0; display: flex; flex-direction: column; padding: 16px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; }
.packageCard:hover { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.packageTop { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.packageLabel { font-weight: 700; }
.packageSave { color: var(--teal); font-size: 12px; white-space: nowrap; }
.packagePrice { margin-top: 16px; font-size: 28px; line-height: 1; }
.packageCredit { margin-top: 8px; color: var(--teal); font-weight: 700; }
.packageCard p { min-height: 38px; margin: 12px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.packageCard .packageButton {
  width: 100%;
  margin-top: auto;
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
  transition: translate 420ms cubic-bezier(.34, 1.56, .64, 1), scale 420ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 420ms cubic-bezier(.34, 1.56, .64, 1), background-color 220ms ease, border-color 220ms ease, color 220ms ease, filter 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .packageCard .packageButton:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    box-shadow: 0 14px 28px #087f7830;
    translate: 0 -4px;
    scale: 1.05;
    filter: brightness(1.04);
  }
}
.packageCard .packageButton:active {
  translate: 0 1px;
  scale: .93;
  box-shadow: 0 2px 8px #17212b1a;
  transition-duration: 90ms;
}
.packageCard .packageButton.packagePurchased:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.modelLogo { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; background: var(--card); padding: 4px; }
.providerLogo { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; background: var(--card); padding: 2px; flex: 0 0 auto; }
[data-theme="dark"] :is(.modelLogo, .providerLogo)[src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/openai.svg"],
[data-theme="dark"] :is(.modelLogo, .providerLogo)[src="https://www.zhipuai.cn/logo.svg"] {
  background: #fff;
}
.filter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 900px) { .packageGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .packagePreview { padding: 14px; }.packagePreviewHead { display: block; }.packagePreviewHead .pill { display: inline-block; margin-top: 10px; }.packageGrid { grid-template-columns: 1fr; } }
.paymentHelp { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.referralRow { display: flex; align-items: end; gap: 12px; }
.referralRow label { flex: 1; margin: 0; }
.referralRow input { font-size: 13px; }
.redeemRow { display: flex; gap: 12px; margin-top: 14px; }
.redeemRow input { flex: 1; }
.paymentHelp { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.rechargeChannels { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 24px; margin: 0 0 14px; }
.channelOption { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 112px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.channelOption:has(input:checked) { border-color: var(--teal); background: var(--teal); color: #fff; }
.channelOption:hover { border-color: var(--teal); color: var(--teal); }
.channelOption:has(input:checked):hover { color: #fff; }
.channelOption input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.channelOption input[type="radio"]:focus { transform: none; box-shadow: none; }
.rechargeOption { min-width: 92px; }
.rechargeOption:hover { border-color: var(--teal); color: var(--teal); }
.hidden { display: none !important; }
@media (max-width: 560px) {
  .rechargeChannels { gap: 16px; }
  .rechargeOptions { align-items: stretch; }
  .customRecharge { flex-basis: 100%; }
}
[data-theme="dark"] { --ink: #e7eef1; --muted: #9aadb7; --line: #30414a; --bg: #0f171c; --card: #162229; --teal: #54d2bd; --teal2: #173b3a; --red: #ff9f96; --shadow: 0 10px 30px #0005; }
[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] .nav, [data-theme="dark"] .langToggle, [data-theme="dark"] .button, [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--card); color: var(--ink); }
[data-theme="dark"] .panel, [data-theme="dark"] .stat { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .tableRow.header { background: #1b2a31; }
.banner { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.banner.warn { background: #fff6e8; border-color: #f0d7a8; color: #7a4b00; }
.button.danger { color: var(--red); border-color: #f1c0bb; }
.button.lg { padding: 12px 20px; }
.button.full { width: 100%; margin-top: 12px; text-align: center; }
.button, button, .iconButton, .langToggle, .langOption {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
  transition:
    translate 420ms cubic-bezier(.34, 1.56, .64, 1),
    scale 420ms cubic-bezier(.34, 1.56, .64, 1),
    rotate 420ms cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 420ms cubic-bezier(.34, 1.56, .64, 1),
    border-color 220ms ease,
    background-color 220ms ease,
    filter 220ms ease;
}
.button:active, button:active, .langToggle:active, .iconButton:active {
  translate: 0 1px;
  scale: .93;
  box-shadow: 0 2px 8px #17212b1a;
  transition-duration: 90ms;
}
.button:focus-visible, .iconButton:focus-visible, .langToggle:focus-visible, .langOption:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #087f7840;
  outline-offset: 3px;
}
.ripple {
  position: absolute !important;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffffcc 0%, #087f7866 42%, transparent 72%);
  pointer-events: none;
  transform: scale(0);
  animation: rippleOut 620ms cubic-bezier(.16, 1, .3, 1) forwards;
  z-index: 1;
}
@keyframes rippleOut {
  0% { transform: scale(0); opacity: .85; }
  70% { opacity: .35; }
  100% { transform: scale(1); opacity: 0; }
}
.interaction-pop {
  animation: interactionPop 560ms cubic-bezier(.34, 1.56, .64, 1);
  transition-property: box-shadow, border-color, background-color, filter, rotate, color;
}
@keyframes interactionPop {
  28% { scale: .94; }
  68% { scale: 1.04; }
}
.button > span:not(.ripple), .button > svg, button > span:not(.ripple), button > svg { position: relative; z-index: 2; }
.button svg { vertical-align: -3px; margin-right: 6px; }
.features article, .modelCard, .stat, .panel {
  transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 420ms cubic-bezier(.34, 1.56, .64, 1), border-color 220ms ease;
}
.features article:active, .modelCard:active, .stat:active, .panel:active { transform: translateY(-1px) scale(.985); }
.field-focus { color: var(--teal); transform: translateX(4px); transition: color 220ms ease, transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
label { transition: color 220ms ease, transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
input, select, textarea { transition: border-color 220ms ease, box-shadow 420ms cubic-bezier(.34, 1.56, .64, 1), transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
input:focus, select:focus, textarea:focus { transform: translateY(-3px) scale(1.01); }
.nav nav a { transition: color 220ms ease, transform 420ms cubic-bezier(.34, 1.56, .64, 1), border-color 220ms ease; }
.siteFoot a { transition: color 220ms ease, transform 420ms cubic-bezier(.34, 1.56, .64, 1); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .button:hover, button:hover, .langToggle:hover {
    translate: 0 -4px;
    scale: 1.05;
    box-shadow: 0 14px 28px #087f7830;
    filter: brightness(1.04);
  }
  .iconButton:hover { rotate: 18deg; scale: 1.16; }
  .features article:hover, .modelCard:hover, .stat:hover, .panel:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 18px 36px #17212b18; border-color: #8ec7c0; }
  input:hover, select:hover, textarea:hover { border-color: #91bdb8; transform: translateY(-2px); }
  .nav nav a:hover { color: var(--ink); transform: translateY(-3px); }
  .siteFoot a:hover { color: var(--ink); transform: translateY(-3px); }
}
.reveal { opacity: 0; transform: translateY(18px) scale(.985); }
.reveal.is-visible { animation: revealIn 720ms var(--reveal-delay, 0ms) cubic-bezier(.16, 1, .3, 1) both; }
@keyframes revealIn {
  0% { opacity: 0; transform: translateY(18px) scale(.985); }
  72% { opacity: 1; transform: translateY(-2px) scale(1.002); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.heroBanner .eyebrow, .heroBanner h1, .heroBanner .lead, .heroActions, .heroStats { animation: heroIn 760ms cubic-bezier(.16, 1, .3, 1) both; }
.heroBanner h1 { animation-delay: 70ms; }
.heroBanner .lead { animation-delay: 130ms; }
.heroActions { animation-delay: 190ms; }
.heroStats { animation-delay: 250ms; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.muted { color: var(--muted); }
.grid { display: grid; gap: 18px; margin-bottom: 20px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: 1fr 1fr; }
.stat { padding: 22px 24px; }
.stat span, .stat small { display: block; color: var(--muted); }
.stat strong { display: block; font-size: 25px; margin: 8px 0; }
.smallValue { font-size: 17px !important; overflow-wrap: anywhere; }
.panel { padding: 26px; margin-bottom: 20px; }
.panel h2 { font-size: 20px; }
.tag, .pill { border-radius: 99px; padding: 4px 10px; font-size: 12px; }
.tag { background: #f0f3f4; color: var(--muted); }
.pill { background: var(--teal2); color: var(--teal); }
.pill.neutral { background: #eef1f2; color: var(--muted); }
.pill.bad { background: #fee4e2; color: var(--red); }
label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 15px; }
input, select, textarea {
  font: inherit;
  width: 100%;
  border: 1px solid #cbd5d9;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  margin-top: 6px;
  border-radius: 5px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px #087f781a;
}
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.fieldBlock { display: block; color: var(--muted); font-size: 13px; margin-bottom: 15px; }
.secretField { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.secretField input { width: auto; flex: 1 1 auto; min-width: 0; padding-right: 12px; }
.secretField input:hover,
.secretField input:focus { transform: none; }
.secretField input::-ms-reveal,
.secretField input::-ms-clear { display: none; }
.secretToggle { position: relative; z-index: 3; flex: 0 0 auto; overflow: visible; pointer-events: auto; }
.formGrid input, .formGrid select {
  height: 44px;
  min-height: 44px;
  padding: 11px 12px;
  line-height: 1.2;
  border-radius: 5px;
  box-sizing: border-box;
}
.formGrid select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236d7884' d='M1.2 1.2 6 6l4.8-4.8' stroke='%236d7884' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
[data-theme="dark"] .formGrid select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23aeb5c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.2 1.2 6 6l4.8-4.8'/></svg>");
}
.apiKeyHelp { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; color: var(--teal); font-size: 13px; text-decoration: none; }
.apiKeyHelp svg { width: 15px; height: 15px; }
.apiKeyHelp:hover { text-decoration: underline; }
.inline { justify-content: flex-start; }
.inline input { margin: 0; flex: 1; }
.output, .code {
  background: #142027;
  color: #dce8e8;
  border-radius: 5px;
  padding: 16px;
  white-space: pre-wrap;
  overflow: auto;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 18px 0 0;
}
.output { min-height: 80px; max-height: 360px; }
.code { color: #cde5de; }
.iconButton { border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--teal); }
.keyActions { display: inline-flex; align-items: center; gap: 4px; }
.keyChip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  padding: 4px 6px 4px 0;
  border-radius: 999px;
  background: var(--bg);
}
.keyChip.is-open {
  max-width: none;
  min-width: max-content;
  position: relative;
  z-index: 6;
}
.keyValue {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  padding: 0 4px 0 12px;
  overflow: hidden;
  transition: width 560ms cubic-bezier(.16, 1, .3, 1);
}
.keyValue code {
  min-width: 0;
  white-space: nowrap;
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.keyValue.is-open {
  max-width: none;
}
.keyValue.is-open code {
  white-space: nowrap;
}
.keyAction { flex: 0 0 auto; width: 26px; height: 26px; padding: 5px; font-size: 0; border: 0; border-radius: 50%; color: var(--muted); overflow: visible; position: relative; z-index: 2; pointer-events: auto; }
.keyAction:hover { background: var(--teal2); color: var(--teal); }
.keyAction.danger { color: var(--red); }
.keyAction.danger:hover { background: #fee4e2; border-color: var(--red); }
.keyAction:disabled { opacity: .55; cursor: not-allowed; }
.table { border: 1px solid var(--line); }
.tableRow {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.table.cols4 .tableRow { grid-template-columns: 1.25fr 1.5fr 0.8fr 0.65fr; align-items: center; overflow: visible; }
.table.cols5 .tableRow { grid-template-columns: 1.4fr 1fr 1fr 0.8fr 1.1fr; }
.table.cols6 .tableRow { grid-template-columns: 0.8fr 0.9fr 0.8fr 1.4fr 1.1fr 0.8fr; }
.table.cols7 .tableRow { grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1.4fr 1.1fr 0.8fr; }
.table.cols8 .tableRow { grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1.1fr; }
.usageSummary { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 16px; color: var(--muted); }
.usageSummary b { color: var(--ink); margin-left: 4px; }
.tableToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 148px;
  min-height: 36px;
  padding: 8px 12px;
  box-sizing: border-box;
  white-space: nowrap;
}
.tableToggle svg { width: 16px; height: 16px; margin: 0; }
.collapsibleTable {
  transform-origin: top center;
}
.collapsibleTable.is-animating {
  overflow: hidden;
  will-change: height, opacity, transform;
}
.collapsibleTable[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .collapsibleTable { transition: none; }
}
.button.tiny { padding: 6px 10px; font-size: 12px; }
.tableRow:last-child { border-bottom: 0; }
.tableRow.header { font-weight: 700; background: #f7f9f9; color: var(--muted); font-size: 12px; }
.docs .lead { margin-left: 0; }
.endpointList { border-top: 1px solid var(--line); }
.endpointList > div {
  display: grid;
  grid-template-columns: 58px minmax(260px, 1fr) minmax(100px, .5fr);
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.endpointList code { overflow-wrap: anywhere; color: var(--ink); }
.method {
  width: 52px;
  padding: 4px 0;
  border-radius: 4px;
  text-align: center;
  font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.method.get { color: #0866a8; background: #e5f2fb; }
.method.post { color: #087f78; background: var(--teal2); }
.apiExamples .panelHead { margin-bottom: 14px; }
.apiExamples .panelHead p { margin: 0; }
.copyCode.copied { color: #18794e; }
.codeTabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid #34434b;
  background: #142027;
  padding: 8px 8px 0;
}
.codeTab {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  background: transparent;
  color: #9fb0b7;
  padding: 9px 12px;
  font: 600 12px/1.2 inherit;
  cursor: pointer;
}
.codeTab.active { color: #fff; border-bottom-color: #35b8aa; background: #1d2c34; }
.codePanels { background: #142027; }
.codePanel { min-height: 330px; margin: 0; border-radius: 0 0 5px 5px; }
.codePanel[hidden] { display: none; }
.empty { color: var(--muted); padding: 20px; border: 1px dashed var(--line); text-align: center; }
.billingNote { padding: 14px 16px; border-left: 3px solid var(--teal); background: var(--teal2); }
.tutorial .panelHead { align-items: center; }
.tutorialSteps { display: grid; gap: 14px; margin: 22px 0; }
.tutorialStep { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.tutorialStep h3 { margin: 0 0 4px; font-size: 16px; }
.tutorialStep p { margin: 0; color: var(--muted); }
.tutorialNumber { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #071b19; font-weight: 800; }
.billingNote { display: flex; gap: 8px; flex-wrap: wrap; }
.billingNote span { color: var(--muted); }
.billingList { color: var(--muted); line-height: 1.8; padding-left: 22px; }
.billingList strong { color: var(--ink); }
.keyModal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: #071016cc; }
.keyModal.hidden { display: none; }
.keyModalCard { position: relative; width: min(560px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); box-shadow: 0 24px 80px #0008; }
.keyModalCard h3 { margin: 0 0 10px; font-size: 22px; }
.keyModalCard p { color: var(--muted); line-height: 1.7; }
.keyModalCard code { display: block; margin: 18px 0; padding: 14px; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); color: var(--teal); font: 700 14px/1.6 ui-monospace, monospace; }
.keyModalClose { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--muted); font-size: 26px; cursor: pointer; }
[data-theme="dark"] .button:not(.primary), [data-theme="dark"] .channelOption, [data-theme="dark"] .langToggle, [data-theme="dark"] .langOption { background: var(--card); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .button.primary, [data-theme="dark"] .channelOption:has(input:checked) { background: var(--teal); color: #071b19; border-color: var(--teal); }
[data-theme="dark"] .button.danger { background: transparent; color: var(--red); border-color: #a85e57; }
[data-theme="dark"] .button:not(.primary):hover, [data-theme="dark"] .channelOption:hover, [data-theme="dark"] .langToggle:hover { background: #20343b; color: var(--teal); border-color: var(--teal); }
[data-theme="dark"] .channelOption:has(input:checked):hover { background: var(--teal); color: #071b19; }
[data-theme="dark"] .nav { background: var(--card); }
[data-theme="dark"] .heroBanner { background: #142b2c; }
[data-theme="dark"] .langMenu, [data-theme="dark"] .features article, [data-theme="dark"] .modelCard { background: var(--card); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { border-color: var(--line); }
[data-theme="dark"] .tag { background: #20343b; color: var(--muted); }
[data-theme="dark"] .pill.neutral { background: #20343b; }
[data-theme="dark"] .pill.bad { background: #482b2b; }
[data-theme="dark"] .output, [data-theme="dark"] .code, [data-theme="dark"] .codeTabs, [data-theme="dark"] .codePanels { background: #0d191e; }
[data-theme="dark"] .tableRow.header { background: #1b2a31; }
[data-theme="dark"] .banner.warn { background: #3c301c; border-color: #765d2b; color: #ffd788; }
@media (max-width: 800px) {
  .nav { min-height: 64px; height: auto; gap: 10px; padding: 10px 16px; flex-wrap: wrap; }
  .nav nav { order: 3; flex: 1 0 100%; gap: 18px; overflow-x: auto; }
  .nav nav a { padding: 4px 0 8px; white-space: nowrap; }
  .nav .button { padding: 9px 11px; white-space: nowrap; }
  .langToggle { min-height: 36px; padding: 7px 8px; }
  .langCurrent { display: none; }
  .langMenu { right: 0; width: 174px; }
  .heroBanner h1, .pageHead h1, .docs h1 { font-size: 32px; }
  .heroBanner { padding: 58px 0 38px; }
  .heroBanner .lead, .docs .lead, .pageHead .muted { font-size: 16px; }
  .heroActions { flex-wrap: wrap; }
  .heroStats, .features, .modelGrid, .ctaBand, .grid.three, .grid.two, .formGrid { grid-template-columns: 1fr; }
  .sectionHead, .pageHead { display: block; }
  .sectionHead .button { margin-top: 8px; }
  .panelHead { align-items: flex-start; gap: 12px; }
  .panel { padding: 20px 16px; }
  .referralRow { align-items: stretch; flex-direction: column; }
  .inline { align-items: stretch; flex-direction: column; }
  .inline input { min-width: 0; }
  .actions { flex-wrap: wrap; justify-content: flex-start; }
  .output, .code { font-size: 12px; padding: 12px; }
  .endpointList { overflow-x: auto; }
  .endpointList > div { min-width: 570px; }
  .codePanel { min-height: 360px; }
  .table { overflow-x: auto; }
  .tableRow { min-width: 560px; }
  .table.cols5 .tableRow { min-width: 680px; }
  .table.cols6 .tableRow { min-width: 760px; }
  .shell { padding: 32px 16px; }
  .siteFoot .wrap { gap: 10px; flex-direction: column; }
}

@media (max-width: 420px) {
  .brand { font-size: 22px; }
  .nav .button { font-size: 12px; }
  .nav nav { gap: 14px; }
  .heroBanner h1, .pageHead h1, .docs h1 { font-size: 28px; }
  .heroStats strong { font-size: 24px; }
}

@media (max-width: 720px) {
  .nav { width: calc(100% - 20px); margin-top: 10px; padding: 0 12px; gap: 8px; }
  .nav .brand { flex: 0 0 auto; }
  .nav .langSwitch { margin-left: auto; }
  .nav .themeControl { flex: 0 0 auto; margin-left: 0; }
  .nav .themeControl select { max-width: 112px; height: 36px; min-height: 36px; padding: 7px 8px; font-size: 12px; }
  .nav nav { width: 100%; min-width: 0; padding-bottom: 2px; gap: 4px; scrollbar-width: thin; }
  .nav nav a { flex: 0 0 auto; padding: 8px 10px; }
  .navBalance, #navAccount { min-width: 88px; }
}

@media (max-width: 420px) {
  .nav { width: calc(100% - 12px); padding: 0 8px; }
  .nav .themeControl select { max-width: 86px; }
  .nav nav a { padding-right: 8px; padding-left: 8px; }
  .navBalance, #navAccount { min-width: 82px; }
  .navBalance { gap: 4px; }
  .navBalance strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .heroBanner .eyebrow, .heroBanner h1, .heroBanner .lead, .heroActions, .heroStats, .interaction-pop {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .keyValue { transition: none; }
}

/* The operator surface has its own visual language and layout. */
.ops, .opsAuth { background: #10161c; color: #e5edf2; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.opsSide { position: fixed; inset: 0 auto 0 0; width: 238px; padding: 28px 18px; background: #151e26; border-right: 1px solid #26343d; display: flex; flex-direction: column; }
.opsBrand { color: #f3f7f9; font-size: 22px; font-weight: 800; text-decoration: none; }
.opsBrand span, .opsMark span { color: #54d2bd; font-size: 11px; letter-spacing: 1.5px; margin-left: 6px; }
.opsSideLabel, .opsKicker { color: #6f8794; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.opsSideLabel { margin: 52px 12px 12px; }
.opsSide nav { display: grid; gap: 4px; }
.opsSide nav a { color: #9aadb7; padding: 11px 12px; text-decoration: none; border-left: 2px solid transparent; }
.opsSide nav a:hover, .opsSide nav a.selected { color: #fff; background: #1d2a33; border-left-color: #54d2bd; }
.opsSideFoot { margin-top: auto; border-top: 1px solid #26343d; padding: 18px 12px 0; display: grid; gap: 12px; color: #9aadb7; font-size: 12px; }
.opsSideFoot button { color: #54d2bd; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.opsMain { margin-left: 238px; max-width: 1420px; padding: 42px 46px 80px; }
.opsTop, .opsPanelHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.opsTop { border-bottom: 1px solid #26343d; padding-bottom: 28px; margin-bottom: 24px; }
.ops h1 { font-size: 34px; margin: 6px 0 0; letter-spacing: 0; }
.ops h2 { font-size: 18px; margin: 4px 0 0; }
.opsTopRight, .opsActions { display: flex; align-items: center; gap: 10px; }
.opsStatus { display: inline-flex; border: 1px solid #40515a; color: #b1c0c7; padding: 7px 10px; font: 11px ui-monospace, monospace; }
.opsStatus.ok { color: #65dfc7; border-color: #276e63; }.opsStatus.warn { color: #ffc66d; border-color: #805d2c; }
.opsNotice { color: #8ea4af; min-height: 22px; }.opsStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.opsStats article, .opsPanel { background: #151e26; border: 1px solid #26343d; }.opsStats article { padding: 19px 20px; }.opsStats span, .opsStats small { color: #8ea4af; display: block; font-size: 12px; }.opsStats strong { display: block; color: #fff; font: 28px ui-monospace, monospace; margin: 12px 0 6px; }
.opsGrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-bottom: 14px; }.opsPanel { padding: 22px; margin-bottom: 14px; }.opsPanel .opsKicker { margin: 0; }.opsPanelHead { margin-bottom: 20px; }
.ops label { display: grid; gap: 7px; color: #9aadb7; font-size: 12px; margin-bottom: 14px; }.ops input { width: 100%; background: #0e1419; border: 1px solid #344650; color: #fff; padding: 11px 12px; font: inherit; }.ops input:focus { outline: 1px solid #54d2bd; border-color: #54d2bd; }
.opsButton { border: 1px solid #54d2bd; background: #54d2bd; color: #0d171b; padding: 10px 15px; font-weight: 800; cursor: pointer; }.opsButton.secondary { color: #b9c8ce; background: transparent; border-color: #40515a; }.opsButton.danger { color: #ffc1b9; background: transparent; border-color: #88483f; }.opsButton:hover { filter: brightness(1.1); }
.ops pre { overflow: auto; background: #0d1318; border: 1px solid #26343d; color: #9ed9d0; padding: 14px; font: 12px/1.6 ui-monospace, monospace; min-height: 150px; }.opsKeyOutput { min-height: 50px !important; overflow-wrap: anywhere; }
.opsTable { overflow-x: auto; }.opsTableRow { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr; gap: 14px; border-top: 1px solid #26343d; padding: 13px 4px; color: #bdcbd1; font-size: 12px; min-width: 760px; }.opsTableRow.header { color: #6f8794; border-top: 0; padding-top: 0; text-transform: uppercase; letter-spacing: .8px; font-size: 10px; }.opsTableSpaced { margin-top: 24px; }.opsEmpty { color: #6f8794; padding: 18px 4px; }
.opsAuth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }.opsAuthCard { width: min(430px, 100%); background: #151e26; border: 1px solid #2c3e48; padding: 38px; box-shadow: 0 24px 80px #0008; }.opsMark { color: #f3f7f9; font-size: 25px; font-weight: 800; }.opsAuthCard h1 { margin: 42px 0 8px; font-size: 29px; }.opsMuted { color: #8ea4af; font-size: 13px; margin-bottom: 28px; }.opsError { min-height: 22px; color: #ff9c91; font-size: 13px; }.opsBack { color: #6f8794; font-size: 12px; text-decoration: none; }.opsBack:hover { color: #54d2bd; }
@media (max-width: 850px) { .opsSide { position: static; width: auto; min-height: auto; padding: 18px; }.opsSideLabel { margin-top: 26px; }.opsSideFoot { margin-top: 24px; }.opsMain { margin-left: 0; padding: 28px 16px 60px; }.opsTop, .opsPanelHead { display: block; }.opsTopRight { margin-top: 18px; }.opsStats, .opsGrid { grid-template-columns: 1fr; }.opsStats strong { font-size: 24px; } }

/* Separate product surfaces: model directory, account, and dark workbench. */
.modelsPage { background: #f6f7f9; color: #18202b; }
.modelsPage .nav { background: #fff; }
.plaza { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 70px); max-width: 1480px; margin: 0 auto; }
.filterRail { background: #fff; border-right: 1px solid #e2e6eb; padding: 28px 18px; }.filterTitle { display:flex; justify-content:space-between; align-items:center; font-size:18px; font-weight:800; margin-bottom:28px; }.filterRail h3 { border-top:1px solid #e5e8ec; margin:22px 0 12px; padding-top:22px; font-size:14px; }.filterOptions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.filter { border:1px solid #e2e6eb; border-radius:8px; background:#fff; padding:9px 7px; color:#46515e; cursor:pointer; }.filter.active { background:var(--teal2); color:var(--teal); border-color:#9ed8cf; font-weight:700; }
.plazaMain { padding:22px 28px 60px; min-width:0; }.plazaBanner { background:linear-gradient(110deg,#076b67,#0b9187); color:#fff; border-radius:10px; padding:28px 30px; box-shadow:0 14px 30px #087f7830; }.plazaBanner .eyebrow { color:#bde9e2; }.plazaBanner h1 { margin:0 0 8px; font-size:32px; }.plazaBanner p:last-child { margin:0; color:#def5f1; }.plazaToolbar { display:flex; gap:14px; align-items:center; margin:14px 0; }.plazaToolbar input { flex:1; border:1px solid #e0e4e9; border-radius:8px; padding:12px 14px; background:#fff; }.plazaToolbar span { color:#6d7682; white-space:nowrap; }.plazaGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.plazaCard { min-height:152px; display:flex; gap:14px; padding:20px; background:#fff; border:1px solid #e1e5e9; border-radius:10px; box-shadow:0 5px 14px #17212b0a; }.modelIcon { flex:0 0 42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#f0f1f4; color:#4d5663; font-size:20px; font-weight:800; }.modelInfo { min-width:0; flex:1; }.modelName { display:flex; gap:8px; align-items:flex-start; justify-content:space-between; }.modelName strong { min-width:0; white-space:normal; overflow-wrap:anywhere; font-size:17px; line-height:1.4; }.modelName .iconButton { flex:0 0 28px; width:28px; height:28px; padding:0; }.modelInfo p { color:#697482; font-size:12px; margin:12px 0; }.priceTag { display:inline-block; color:var(--teal); background:var(--teal2); padding:3px 8px; border-radius:999px; font-size:11px; }
[data-theme="dark"] .modelsPage { background:#111316; color:#e9edf2; } [data-theme="dark"] .modelsPage .nav { background:#17191d; border-color:#2c3037; } [data-theme="dark"] .modelsPage .filterRail, [data-theme="dark"] .modelsPage .plazaCard { background:#1a1d21; border-color:#30343b; } [data-theme="dark"] .modelsPage .filterRail { color:#e9edf2; } [data-theme="dark"] .modelsPage .filter, [data-theme="dark"] .modelsPage .plazaToolbar input { background:#121417; border-color:#363b44; color:#f4f6f8; } [data-theme="dark"] .modelsPage .filter.active { background:#173b3a; border-color:#2b6965; color:#7ee7d8; } [data-theme="dark"] .modelsPage .priceTag { background:#173b3a; color:#7ee7d8; } [data-theme="dark"] .modelsPage .plazaToolbar span, [data-theme="dark"] .modelsPage .modelInfo p { color:#aeb5c0; } [data-theme="dark"] .modelsPage .modelIcon { background:#2a3037; color:#cbd5dc; }
.authShell { max-width:1040px; min-height:calc(100vh - 70px); margin:0 auto; padding:80px 24px; display:grid; grid-template-columns:1fr 390px; gap:80px; align-items:center; }.authIntro h1 { font-size:44px; line-height:1.12; margin:0 0 16px; }.authIntro > p:not(.eyebrow) { color:var(--muted); font-size:18px; max-width:480px; }.authBullets { display:grid; gap:12px; margin-top:34px; color:var(--teal); font-weight:700; }.authBullets span::before { content:"✓"; margin-right:10px; }.authCard,.authAside { background:var(--card); border:1px solid var(--line); padding:30px; border-radius:12px; box-shadow:0 20px 50px #17212b12; }.authCard h2 { margin-top:0; }.authFine { color:var(--muted); font-size:12px; line-height:1.6; }
.dashboardHero { background:var(--console-hero); color:var(--console-hero-ink); border-radius:14px; padding:32px 36px; margin-bottom:18px; }.dashboardHero .eyebrow { color:var(--console-accent); }.dashboardHero h1 { font-size:34px; margin:0 0 8px; }.dashboardHero .muted { color:var(--console-muted); margin:0; }.dashboardStats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--console-line); border:1px solid var(--console-line); border-radius:12px; overflow:hidden; margin-bottom:18px; }.dashboardStats .stat { border:0; border-radius:0; box-shadow:none; padding:22px; background:var(--console-stat); color:var(--console-hero-ink); }.dashboardStats .stat span,.dashboardStats .stat small { color:var(--console-muted); }.dashboardStats .stat strong { color:var(--console-accent); font-size:27px; }.app { --console-hero:#f0f3f6; --console-hero-ink:#17212b; --console-stat:#fff; --console-muted:#6d7884; --console-line:#dfe5e8; --console-accent:#087f78; background:var(--bg); color:var(--ink); }.app .nav { background:var(--card); border-color:var(--line); }.app .panel,.app .stat { background:var(--card); border-color:var(--line); color:var(--ink); }.app .muted,.app label,.app .panel p { color:var(--muted); }.app input,.app select,.app textarea { background:var(--card); border-color:var(--line); color:var(--ink); }.app .panel h2 { color:var(--ink); }.walletPanel { border-top:2px solid var(--console-accent) !important; }
@media (max-width:980px) { .plazaGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }.authShell { gap:30px; } } @media (max-width:720px) { .plaza { display:block; }.filterRail { border-right:0; border-bottom:1px solid #e2e6eb; }.plazaMain { padding:16px; }.plazaGrid,.dashboardStats,.authShell { grid-template-columns:1fr; }.authShell { padding:40px 18px; }.authIntro h1 { font-size:34px; } }
.modelsPage .nav { gap:14px; }.modelsPage .nav nav { min-width:0; }.modelsPage .plazaBanner.reveal, .modelsPage .plazaToolbar.reveal { animation-duration:600ms; }
[data-theme="dark"] .app { --console-hero:#17191d; --console-hero-ink:#fff; --console-stat:#202329; --console-muted:#aeb5c0; --console-line:#30343b; --console-accent:#54d2bd; background:#111316; color:#e9edf2; }
[data-theme="dark"] .app .nav { background:#17191d; border-color:#2c3037; }
[data-theme="dark"] .app .panel, [data-theme="dark"] .app .stat { background:#1a1d21; border-color:#30343b; color:#e9edf2; }
[data-theme="dark"] .app input, [data-theme="dark"] .app select, [data-theme="dark"] .app textarea { background:#121417; border-color:#363b44; color:#f4f6f8; }
[data-theme="dark"] .app .panel h2 { color:#f5f7fa; }
@media (max-width:720px) { .modelsPage { overflow-x:hidden; }.modelsPage .nav { flex-wrap:wrap; padding:10px 12px; }.modelsPage .nav > .button { display:none; }.modelsPage .nav nav { order:3; flex-basis:100%; overflow-x:auto; gap:4px; }.modelsPage .nav nav a { padding:8px 10px; white-space:nowrap; }.modelsPage .langSwitch { margin-left:auto; }.modelsPage .themeControl select { max-width:96px; }.modelsPage .filterOptions { grid-template-columns:repeat(2,minmax(0,1fr)); }.modelsPage .filter { min-width:0; overflow-wrap:anywhere; }.modelsPage .plazaMain { width:100%; min-width:0; padding-top:20px; }.modelsPage .plazaBanner { max-width:100%; padding:24px 20px; overflow:hidden; }.modelsPage .plazaBanner h1 { font-size:28px; }.modelsPage .plazaBanner p { overflow-wrap:anywhere; }.modelsPage .plazaToolbar { min-width:0; }.modelsPage .plazaToolbar input { min-width:0; } }
@media (prefers-reduced-motion: reduce) {
  .langMenu, .langChevron, .themeControl select, .themeSelect, html.themeChanging body, html.themeChanging .nav, html.themeChanging .panel, html.themeChanging .modelCard, html.themeChanging .features article, html.themeChanging input, html.themeChanging textarea, html.themeChanging select, html.themeChanging .langToggle, html.themeChanging .langMenu { transition-duration: 1ms; }
}
.activationWarning { display:grid; gap:4px; margin:18px 0; padding:14px 16px; border:1px solid #e6a23c; border-left:4px solid #e6a23c; border-radius:8px; background:#fff7e6; color:#7a4b00; }
.activationWarning strong { font-size:14px; }.activationWarning span { font-size:13px; line-height:1.6; }.app .activationWarning { background:#2b2112; border-color:#b77a24; color:#ffd98a; }

/* Keep the public product surfaces on one floating, theme-aware navigation. */
.nav {
  width: min(1120px, calc(100% - 32px));
  height: 68px;
  margin: 14px auto 0;
  padding: 0 18px 0 22px;
  gap: 18px;
  top: 14px;
  border: 1px solid #ffffffb8;
  border-radius: 18px;
  background: #ffffffc9;
  box-shadow: 0 14px 34px #17212b18, inset 0 1px 0 #ffffffb8;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.nav nav { gap: 4px; position: relative; }
.navMarker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 10px;
  background: var(--teal2);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0);
  transition: transform 480ms cubic-bezier(.16, 1, .3, 1), width 480ms cubic-bezier(.16, 1, .3, 1), height 480ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease;
}
.navMarker.is-on { opacity: 1; }
.nav nav a {
  position: relative;
  z-index: 1;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  white-space: nowrap;
}
.nav nav a.active, .nav nav a:hover {
  color: var(--ink);
  background: var(--teal2);
}
.nav:has(.navMarker.is-on) nav a.active,
.nav:has(.navMarker.is-on) nav a.active:hover {
  background: transparent;
}
#wallet { scroll-margin-top: 110px; }
.navBalance, #navAccount { min-width: 92px; text-align: center; }
.navBalance { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.navBalance strong { color: var(--teal); font-size: 12px; font-variant-numeric: tabular-nums; }
#navAccount { overflow: hidden; text-overflow: ellipsis; }
.themeControl { margin-left: 0; margin-bottom: 0; }
#navAccount { min-width: 110px; }
#navAccount.navAccountPending { color: transparent; pointer-events: none; }
.themeControl select, .themeSelect { cursor: pointer; width: auto; height: 38px; min-height: 38px; margin: 0; padding: 7px 10px; font: 13px/1.2 inherit; border-radius: 6px; box-sizing: border-box; translate: 0 0; scale: 1; transition: translate 420ms cubic-bezier(.34, 1.56, .64, 1), scale 420ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 420ms cubic-bezier(.34, 1.56, .64, 1), border-color 220ms ease, background-color 220ms ease, color 220ms ease; }
.themeControl select:active, .themeSelect:active { translate: 0 1px; scale: .93; box-shadow: 0 2px 8px #17212b1a; transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) { .themeControl select:hover, .themeSelect:hover { translate: 0 -4px; scale: 1.05; box-shadow: 0 14px 28px #087f7830; filter: brightness(1.04); } }
[data-theme="dark"] .nav {
  border-color: #ffffff1c;
  background: #162229c9;
  box-shadow: 0 14px 34px #00000040, inset 0 1px 0 #ffffff12;
}
[data-theme="dark"] .navMarker { background: #173b3a; }
[data-theme="dark"] .nav nav a.active, [data-theme="dark"] .nav nav a:hover { background: #173b3a; }
[data-theme="dark"] .nav:has(.navMarker.is-on) nav a.active,
[data-theme="dark"] .nav:has(.navMarker.is-on) nav a.active:hover { background: transparent; }
@media (max-width: 800px) {
  .nav { width: calc(100% - 20px); height: auto; min-height: 64px; margin-top: 10px; padding: 10px 12px; top: 10px; border-radius: 16px; }
  .nav nav { gap: 4px; }
  .nav nav a { padding: 7px 10px; }
}

/* Keep the mobile header compact and give its menus a clear stacking context. */
@media (max-width: 720px) {
  .nav {
    position: sticky;
    z-index: 100;
    width: calc(100% - 24px);
    min-height: 58px;
    margin: 8px 12px 0;
    padding: 8px 10px;
    gap: 8px;
    align-items: center;
  }
  .nav .brand { font-size: 22px; }
  .nav nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px 0 0;
    border-top: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { flex: 0 0 auto; padding: 7px 10px; font-size: 14px; }
  .nav .langSwitch { position: relative; z-index: 110; margin-left: auto; }
  .nav .themeControl select { width: 92px; max-width: 92px; height: 36px; min-height: 36px; padding: 6px 7px; font-size: 12px; }
  .nav > .button { display: none; }
  .langToggle { min-height: 36px; padding: 7px 8px; }
  .langCurrent { display: none; }
  .langMenu {
    z-index: 120;
    right: -4px;
    top: calc(100% + 8px);
    width: min(220px, calc(100vw - 32px));
    max-height: min(320px, calc(100vh - 110px));
    padding: 8px;
    gap: 4px;
    box-shadow: 0 18px 40px #17212b26;
  }
  .langOption { min-height: 40px; padding: 8px 7px; font-size: 14px; }
  .modelsPage .plaza { min-height: 0; }
  .modelsPage .filterRail { position: relative; z-index: 1; padding: 16px; border-bottom: 1px solid #d9dfe4; }
  .modelsPage .filterTitle { margin-bottom: 16px; }
  .modelsPage .filterRail h3 { margin: 16px 0 10px; padding-top: 16px; }
  .modelsPage .filterOptions { gap: 8px; }
  .modelsPage .filter { min-height: 42px; padding: 8px 7px; }
  .modelsPage .plazaMain { position: relative; z-index: 0; padding: 16px 12px 40px; }
  .modelsPage .plazaBanner { padding: 20px 18px; border-radius: 8px; }
  .modelsPage .plazaBanner h1 { font-size: 26px; }
  .modelsPage .plazaToolbar { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
  .modelsPage .plazaToolbar span { font-size: 13px; }
  .modelsPage .plazaGrid { grid-template-columns: 1fr; gap: 10px; }
  .modelsPage .plazaCard { min-height: 0; padding: 16px; }
  .modelsPage .modelName strong { font-size: 16px; }
}

@media (max-width: 420px) {
  .nav { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; padding-left: 8px; padding-right: 8px; }
  .nav .themeControl select { width: 82px; max-width: 82px; }
  .modelsPage .plazaMain { padding-left: 10px; padding-right: 10px; }
}
.packageButton.packagePurchased { border-color: var(--teal); color: var(--teal); }
.packageCard .packageButton.packagePurchased:hover { background: var(--teal); color: #fff; }
.packageCard.packagePurchased { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.app .formGrid input, .app .formGrid select {
  height: 44px;
  min-height: 44px;
  padding: 11px 12px;
  line-height: 1.2;
  border-radius: 5px;
  box-sizing: border-box;
}
.app .secretField input { width: auto; flex: 1 1 auto; min-width: 0; padding-right: 12px; }
.app .formGrid select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236d7884' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.2 1.2 6 6l4.8-4.8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
[data-theme="dark"] .app .formGrid select {
  background-color: #121417;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23aeb5c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.2 1.2 6 6l4.8-4.8'/></svg>");
}
@media (hover: hover) and (pointer: fine) {
  .packageCard .packageButton:hover,
  [data-theme="dark"] .packageCard .packageButton:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    box-shadow: 0 14px 28px #087f7830;
  }
  [data-theme="dark"] .packageCard .packageButton:hover {
    color: #071b19;
  }
}