/* Plaincite. Near-black field, cool charcoal, off-white type.
   Violet for actions and selected states. Mint for sources and network details.
   The tally mark stays Plaincite’s. Solana is named only as the network. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap");

:root {
  --paper: #07080D !important;
  --paper-deep: #05060A !important;
  --card: #151822 !important;
  --ink: #F4F6FB !important;
  --ink-soft: #A7ABBA !important;
  --soft: #A7ABBA !important;
  --faint: #7C8194 !important;
  --mint: #7DFFD4 !important;
  --violet: #9B7BFF !important;
  --accent: #9B7BFF !important;
  --yellow: #9B7BFF !important;
  --red: #FF5C4A !important;
  --green: #7DFFD4 !important;
  --amber: #E39B2B !important;
  --blue: #8EB4FF !important;
  --pink: #FF8FAB !important;
  --wash: rgba(244, 246, 251, .05) !important;
  --rule: rgba(244, 246, 251, .1) !important;
  --rule-strong: rgba(244, 246, 251, .18) !important;
  --sb: #10121A !important;
  --sb-hi: rgba(155, 123, 255, .14) !important;
  --display: "Outfit", system-ui, sans-serif !important;
  --body: "Outfit", system-ui, sans-serif !important;
  --f-body: "Outfit", system-ui, sans-serif !important;
  --mono: "IBM Plex Mono", ui-monospace, monospace !important;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace !important;
  --space: 8px;
  --radius: 14px;
  color-scheme: dark;
}

html { background: #07080D; color: #F4F6FB; }

body, button, input, textarea, select {
  font-family: "Outfit", system-ui, sans-serif !important;
}
h1, h2, h3, h4 {
  font-family: "Outfit", system-ui, sans-serif !important;
  letter-spacing: -0.03em;
}
h1 em, h2 em { color: #9B7BFF !important; font-style: normal; }
.hall .open { color: #9B7BFF !important; border-color: #9B7BFF !important; }
.hall .open::before { background: #9B7BFF !important; }
code, pre, kbd, samp, .mono, .ca-v, .ca-addr {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
}

:focus-visible {
  outline: 2px solid #9B7BFF !important;
  outline-offset: 3px;
}
.search:focus-within { box-shadow: 0 0 0 2px #9B7BFF !important; }

/* Primary actions. Ghost and text buttons stay quiet. */
a.ask,
a.btn:not(.ghost),
button.btn:not(.ghost),
form button[type="submit"]:not(.ghost),
.cr-buy,
.cr-pay,
.cr-app,
.ask-go,
.ca-buy {
  background: #9B7BFF !important;
  color: #120C22 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

a.ask:hover,
a.btn:not(.ghost):hover,
button.btn:not(.ghost):hover,
form button[type="submit"]:not(.ghost):hover,
.cr-buy:hover,
.cr-pay:hover,
.ask-go:hover,
.ca-buy:hover {
  background: #C4B0FF !important;
  transform: translateY(-1px);
}

a.btn.ghost,
button.btn.ghost {
  background: transparent !important;
  color: #F4F1E8 !important;
  border: 1px solid rgba(244, 241, 232, .28) !important;
  box-shadow: none !important;
}

.nav a[aria-current],
.sb-nav a[aria-current] {
  color: #9B7BFF !important;
  box-shadow: inset 0 -2px 0 #9B7BFF !important;
}

.cr-pack.on,
.cr-net.on,
.tabs button.on,
.seg button.on {
  border-color: #9B7BFF !important;
  color: #9B7BFF !important;
}

/* Citation marks and live dots use the yellow. Errors stay red. */
.hero h1 em::after,
.proof span::before,
.tag.live::before,
.st-live::before,
.seq li.now .dot,
.faq summary::after {
  background: #9B7BFF !important;
  border-color: #9B7BFF !important;
  color: #120C22 !important;
}
.tag.live { border-color: #3DDC97 !important; }

/* Status */
.ask-stamp.good,
.pill.paid,
.tag.live { color: #3DDC97 !important; }
.ask-stamp.warn,
.pill.warn { color: #E39B2B !important; }
.ask-stamp.bad,
.pill.bad,
.card.flag { color: #FF5C4A; }

code, .ca-v, .ca-addr, .ask-share-url {
  overflow-wrap: anywhere;
}

table { border-color: rgba(244, 241, 232, .12); }
th, td { border-color: rgba(244, 241, 232, .1); }

@media (max-width: 900px) {
  .nav {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 8px !important;
    column-gap: 14px !important;
  }
  header.top .wrap {
    height: auto !important;
    min-height: 64px;
    flex-wrap: wrap !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ca-card, .ca-home { max-width: 100%; }
}

.lang-host { display: flex; align-items: center; flex: none; }
header.top .lang-host { margin-left: 8px; }
.sb-top .lang-host, .pane-bar .lang-host { margin-left: auto; }
.lang-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid rgba(155, 123, 255, .45);
  border-radius: 999px;
  background: rgba(155, 123, 255, .1);
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #A7ABBA;
  font: 600 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 6px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch button[aria-pressed="true"] { background: #9B7BFF; color: #120C22; }
.lang-switch button:focus-visible { outline: 2px solid #9B7BFF; outline-offset: 2px; }

html[lang="zh-CN"] body,
html[lang="zh-CN"] button,
html[lang="zh-CN"] input,
html[lang="zh-CN"] textarea,
html[lang="zh-CN"] select {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Outfit", sans-serif !important;
}
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] h4,
html[lang="zh-CN"] .final h1 {
  letter-spacing: 0 !important;
  max-width: none;
}
html[lang="zh-CN"] .lang-switch button {
  font-family: "IBM Plex Mono", "Noto Sans SC", ui-monospace, monospace !important;
}

.ask-srcs a,
.sample .src,
.plct .meta,
a.explorer {
  color: #7DFFD4 !important;
}
button:disabled,
.ca-home:disabled {
  outline-color: #9B7BFF;
}
button:disabled,
.ca-home:disabled {
  opacity: .72;
  cursor: default;
}
.ca-buy[aria-disabled="true"] { display: none; }
