/*
 * polish.css — design layer on top of styles.css (2026-10).
 *
 * Direction: warm paper, ink type, one 虾红 accent used sparingly, hairline
 * rules instead of shadows and rounded cards, icons only where they carry
 * meaning, and the real product output (a command and the card it produces)
 * in the hero. Additive: remove the <link> in index.html to revert.
 */

:root {
  color-scheme: light;
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --paper: #faf8f4;
  --surface: #ffffff;
  --ink: #1d1f22;
  --ink-2: #4a4f55;
  --ink-3: #868b91;
  --rule: #e6e1d8;
  --chip: #f1ede6;
  --accent: #e5533d;      /* 虾红: marks, graphics, large text */
  --accent-ink: #b8402c;  /* ~5.5:1 on white: small accent text */
  --radius: 6px;

  --header-bg: rgba(250, 248, 244, 0.9);
  --footer-bg: #1d1f22;
  --ink-hover: #000;      /* hover for ink-filled buttons */
  --dot: #cfc8bc;         /* address-bar mock dots */

  /* Re-point the template's tokens so untouched rules follow the new palette. */
  --primary-color: var(--ink);
  --primary-hover: #000;
  --primary-soft: rgba(29, 31, 34, 0.06);
  --secondary-color: var(--ink-2);
  --text-color: var(--ink-2);
  --heading-color: var(--ink);
  --text-muted: var(--ink-3);
  --background-light: var(--paper);
  --border-color: var(--rule);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --radius-sm: 4px;
  --radius-md: var(--radius);
  --radius-lg: 8px;
}

/* ---------- Dark theme ----------
   The inline script at the top of index.html sets <html data-theme> before
   first paint: the visitor's saved choice, else the system setting. Rules
   below read these tokens, so only a handful need a dark-specific copy. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151413;
  --surface: #1c1b19;
  --ink: #ecebe6;
  --ink-2: #bdb9b1;       /* 9.4:1 on paper */
  --ink-3: #8e8a82;       /* 5.3:1 on paper */
  --rule: #2e2c29;
  --chip: #262420;
  --accent: #ef6a52;
  --accent-ink: #f4917c;  /* 8:1 on paper */

  --header-bg: rgba(21, 20, 19, 0.86);
  --footer-bg: #0e0d0c;
  --ink-hover: #fff;
  --dot: #4a4741;
  --primary-hover: #fff;
  --primary-soft: rgba(236, 235, 230, 0.08);
}

/* Switch themes in one frame instead of letting each colour transition. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(229, 83, 61, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--accent-ink);
  text-decoration-color: var(--accent);
}

::selection {
  background: rgba(229, 83, 61, 0.18);
}

/* ---------- Header ---------- */
.header {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

.logo-text {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* The logo is black line art on a white square: invert it in the dark
   theme and let the (now black) square drop out against the header. */
:root[data-theme="dark"] .logo-img {
  filter: invert(1);
  mix-blend-mode: screen;
}

.mobile-menu-toggle,
.mobile-menu-toggle:hover {
  color: var(--ink);
}

.main-nav a::after {
  background-color: var(--accent);
}

/* Language link + theme toggle (sun/moon). */
.header-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header .lang-switch,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.header .lang-switch:hover,
.theme-toggle:hover {
  background: var(--chip);
  color: var(--ink);
}

.header .lang-switch:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.theme-toggle i {
  font-size: 0.9375rem;
}

/* Show what a click switches to: moon in light, sun in dark. */
.theme-toggle .fa-sun,
:root[data-theme="dark"] .theme-toggle .fa-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .fa-sun {
  display: inline-block;
}

/* The full nav needs ~1200px: nine links plus language and theme. Below
   that the header used to wrap to two or three rows (iPad, small laptop
   windows), so the menu button takes over from 1199px down, not just on
   phones. */
@media (min-width: 1200px) {
  .main-nav {
    margin-left: auto;
  }

  .header-tools {
    padding-left: 0.75rem;
    border-left: 1px solid var(--rule);
  }

  .main-nav > a > i,
  .nav-upgrade-trigger-label > i {
    display: none;
  }

  .main-nav > a {
    color: var(--ink-2);
    font-weight: 400;
    text-decoration: none;
  }

  .main-nav > a:hover {
    color: var(--ink);
  }

  .nav-upgrade-trigger {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink);
    box-shadow: none;
  }

  /* styles.css fills it with --primary-color (ink) and white text, which
     vanishes once ink turns light in the dark theme. */
  .main-nav .nav-upgrade-trigger:hover,
  .main-nav .nav-upgrade-trigger:focus,
  .main-nav .nav-upgrade-group.open .nav-upgrade-trigger {
    color: var(--paper);
  }
}

@media (min-width: 769px) and (max-width: 1199.98px) {
  /* styles.css collapses the nav into the menu only at <=768px; repeat
     those rules for this range (colours come from the block below). */
  .mobile-menu-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    border-top: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  /* A dropdown under the menu button rather than a 960px-wide sheet. */
  .main-nav {
    left: auto;
    right: 0.75rem;
    width: 20rem;
  }

  .main-nav.active {
    max-height: 80vh;
    padding: 1rem;
    overflow-y: auto;
    border: 1px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .main-nav a {
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.95rem;
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  .main-nav a::after,
  .main-nav .nav-upgrade-trigger::after,
  .main-nav .nav-upgrade-subitems::before {
    display: none;
  }

  .main-nav .nav-upgrade-group {
    width: 100%;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .main-nav .nav-upgrade-trigger,
  .main-nav .nav-upgrade-trigger:hover,
  .main-nav .nav-upgrade-trigger:focus,
  .main-nav .nav-upgrade-group.open .nav-upgrade-trigger {
    width: 100%;
    padding: 0.75rem 1rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.95rem;
    line-height: 1.2;
    transform: none;
  }

  .main-nav .nav-upgrade-subitems,
  .main-nav .nav-upgrade-group:hover .nav-upgrade-subitems {
    display: none;
  }

  .main-nav .nav-upgrade-subitems {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 1rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .main-nav .nav-upgrade-group.open .nav-upgrade-subitems,
  .main-nav .nav-upgrade-group:focus-within .nav-upgrade-subitems {
    display: grid;
  }

  .main-nav .nav-upgrade-link {
    justify-content: center;
    width: 100%;
    font-size: 0.85rem;
  }
}

@media (max-width: 1199.98px) {
  /* One row: logo left, then language/theme, then the menu button. */
  .header-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .header-tools {
    order: 1;
    margin-left: auto;
  }

  .mobile-menu-toggle {
    order: 2;
  }

  /* Drop-down menu: template white and greys → theme tokens. */
  .main-nav {
    background: var(--surface);
  }

  .main-nav.active {
    border-top-color: var(--rule);
  }

  .main-nav a,
  .main-nav .nav-upgrade-group {
    border-bottom-color: var(--rule);
  }

  .main-nav .nav-upgrade-trigger {
    color: var(--ink);
  }

  /* Menu rows and the open 升级版 group were still template teal. */
  .main-nav a:hover,
  .main-nav .nav-upgrade-trigger:hover,
  .main-nav .nav-upgrade-trigger:focus,
  .main-nav .nav-upgrade-group.open .nav-upgrade-trigger {
    background: var(--chip);
    color: var(--ink);
  }
}

/* 升级版 dropdown (desktop panel and mobile menu). */
.main-nav .nav-upgrade-subitems,
.main-nav .nav-upgrade-subitems::before {
  background: var(--surface);
  border-color: var(--rule);
}

.main-nav .nav-upgrade-link {
  background: var(--surface);
  border-color: var(--rule);
}

.main-nav .nav-upgrade-link:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
  color: var(--paper) !important;
  transform: none;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 4.5rem 0 4rem;
}

.hero-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

.hero-text h1.tagline {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 1.25rem;
  /* Wrap only at the <wbr> between the two phrases (一行代码 / 推送手机通知),
     never mid-word ("推送手 / 机通知") or leaving "知" alone on a line. */
  word-break: keep-all;
}

/* English headline (/en/): Latin sets about twice as wide as CJK, so size
   it to the text column (longest line ≈ 8.3em) to keep two lines. */
.hero-text h1.tagline:lang(en) {
  font-size: 2.875rem;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

@media (min-width: 1400px) {
  .hero-text h1.tagline:lang(en) {
    font-size: 3.25rem;
  }
}

@media (max-width: 1199.98px) {
  .hero-text h1.tagline:lang(en) {
    font-size: 2.5rem;
  }
}

@media (max-width: 991.98px) {
  .hero-text h1.tagline:lang(en) {
    font-size: 2.25rem;
  }
}

@media (max-width: 768px) {
  .hero-text h1.tagline:lang(en) {
    font-size: 2rem;
  }
}

/* Hand-drawn underline under 一行代码 / "one line of code". */
.ink-mark {
  white-space: nowrap;
  padding-bottom: 0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5 C 38 4.5, 74 12, 112 7.5 S 172 4, 197 8' fill='none' stroke='%23e5533d' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.32em;
}

.hero-subtitle {
  max-width: 30em;
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink-2);
}

.hero-specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.2rem;
  margin: 0 0 2rem;
  padding: 0;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* Separator dots sit in the gap before each item; when the list wraps, the
   dot of a line's first item falls outside the box and is clipped, so no
   line starts with "·". */
.hero-specs li {
  position: relative;
}

.hero-specs li + li::before {
  content: "·";
  position: absolute;
  left: -0.75rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.btn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-x-primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
}

.btn-x-primary:hover {
  background: var(--ink-hover);
  color: var(--paper);
}

.link-arrow {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.link-arrow span {
  display: inline-block;
  transition: transform 0.15s ease;
}

.link-arrow:hover {
  color: var(--accent-ink);
}

.link-arrow:hover span {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .hero {
    padding: 2.5rem 0 3rem;
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-text {
    text-align: left;
  }

  .hero-text h1.tagline {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

}

/* ---------- Sections: numbered, hairline-separated, no icon titles ---------- */
body {
  counter-reset: xsec;
}

.section {
  padding: 4.5rem 0;
}

.section + .section {
  border-top: 1px solid var(--rule);
}

.section .container > .section-title {
  counter-increment: xsec;
  display: block;
  margin-bottom: 2rem;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
}

.section .container > .section-title::before {
  content: counter(xsec, decimal-leading-zero);
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}

.section-title > i,
.section h4 > i:not(.faq-toggle),
.instructions h6 > i,
#mt5plugin h3 > i {
  display: none;
}

/* Side note (was an inline teal box with an info icon). */
.callout {
  margin: 0.75rem 0 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---------- 使用场景: small colored tiles + list ----------
   One flat colour per scenario (no gradients), dark enough for light text
   (>= 4.5:1). The same colour marks that scenario's lines in the list. */
.c-quant { --c: #2f6f5e; }   /* 墨绿 */
.c-ops { --c: #34507a; }     /* 黛蓝 */
.c-crawler { --c: #9a6312; } /* 赭黄 */
.c-script { --c: #6a4385; }  /* 茄紫 */
.c-agent { --c: #c8452f; }   /* 虾红 */

.uc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.uc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 6.75rem;
  padding: 1.25rem 0.75rem;
  background: var(--c);
  border-radius: 8px;
  color: #faf8f4;
  text-align: center;
}

/* Full-strength tiles glare on the dark page; mute them a step. */
:root[data-theme="dark"] .uc {
  background: color-mix(in srgb, var(--c) 78%, #000);
}

.uc i {
  font-size: 1.25rem;
  opacity: 0.9;
}

.uc h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #faf8f4;
}

.scenarios {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.scenarios li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.scenarios p {
  margin: 0;
  line-height: 1.7;
  color: var(--ink);
}

.dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--c);
  transform: translateY(-0.1em);
}

.scenarios-note {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

@media (max-width: 992px) {
  /* Five tiles on a 6-track grid: 3 + 2, both rows full width, no hole. */
  .uc-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .uc {
    grid-column: span 2;
  }

  .uc:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 640px) {
  .uc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc,
  .uc:nth-child(n + 4) {
    grid-column: auto;
  }

  .uc:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .uc {
    min-height: 5.5rem;
  }
}

/* ---------- Tabs: underline style instead of pill segments ---------- */
.service-tabs,
.push-type-tabs {
  margin-bottom: 3rem;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}

.tab-header,
.push-tab-header {
  gap: 1.75rem;
  background: none;
}

.tab-btn,
.push-tab-btn {
  flex: 0 0 auto;
  margin-bottom: -1px;
  padding: 0.75rem 0;
  background: none !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none !important;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.tab-btn > i:not(.tab-external-icon),
.push-tab-btn > i {
  display: none;
}

.tab-btn:hover,
.push-tab-btn:hover {
  color: var(--ink);
}

.tab-btn.active,
.push-tab-btn.active {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--accent);
}

@media (max-width: 768px) {
  /* One row; scroll sideways rather than clip if it ever runs out of room. */
  .tab-header,
  .push-tab-header {
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab-header::-webkit-scrollbar,
  .push-tab-header::-webkit-scrollbar {
    display: none;
  }

  .tab-btn,
  .push-tab-btn {
    flex-direction: row;
    min-height: 0;
    white-space: nowrap;
    font-size: 0.875rem;
    -webkit-tap-highlight-color: transparent;
  }

  /* styles.css pins the ↗ to the corner of its old card tabs, where it now
     floats above the label like a superscript; keep it after the text. */
  .tab-btn[data-tab] .tab-external-icon {
    position: static;
    margin-left: 0;
    font-size: 0.625rem;
    color: inherit;
    opacity: 0.7;
  }
}

@media (max-width: 640px) {
  /* Phones: all three tabs in view (two are the paid upgrades) instead of
     the last one sliding off-screen. Labels break before "（升级版）" and
     hang from a shared top line. */
  .tab-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    overflow: visible;
  }

  .tab-btn {
    display: block;
    padding: 0.625rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }

  .tab-btn span {
    display: inline;
    font-size: inherit;
    line-height: inherit;
  }

  .tab-btn[data-tab] .tab-external-icon {
    margin-left: 0.25rem;
  }

  /* A <button> centres its content vertically even as a block; pin it to
     the top like the two link tabs. */
  button.tab-btn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* Grid items default to min-width: auto, so a long URL (YOUR_TOKEN, or a
   real token filled in by the WeChat banner) widened the column past a
   phone screen instead of scrolling inside its code block. */
.push-tab-grid > * {
  min-width: 0;
}

/* ---------- Usage steps ---------- */
.instructions {
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: none;
}

.instructions > ol {
  counter-reset: xstep;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.instructions > ol > li {
  counter-increment: xstep;
  position: relative;
  margin: 0;
  padding: 1.5rem 0 1.5rem 3.5rem;
  border-top: 1px solid var(--rule);
}

.instructions > ol > li:first-child {
  padding-top: 0.25rem;
  border-top: 0;
}

.instructions > ol > li::before {
  content: counter(xstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

.instructions > ol > li:first-child::before {
  top: 0.35rem;
}

.qr-code-container img {
  border: 1px solid var(--rule);
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .instructions {
    padding: 1.25rem;
  }

  .instructions > ol > li {
    padding-left: 0;
  }

  .instructions > ol > li::before {
    position: static;
    display: inline-block;
    margin-right: 0.5rem;
  }

  /* styles.css bleeds code blocks with uneven negative margins sized for the
     old list indent; make them flush with both card edges instead. */
  .instructions .code-block,
  .instructions .lang-example-tabs {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* Browser address-bar mock (replaces the annotated screenshot). */
.addressbar-mock {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 640px;
  margin: 0 auto;
  padding: 0.6rem 0.9rem;
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.addressbar-mock .dots {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
}

.addressbar-mock .dots span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
}

.addressbar-mock .url {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.addressbar-mock .url .fa-lock {
  margin-right: 0.45rem;
  color: #2f855a;
}

/* ---------- Code ---------- */
.code-block,
.lang-example-tabs {
  border-radius: 8px;
  box-shadow: none;
}

/* Inline code in prose: quiet chip. :where() keeps specificity at the level
   of the global `code {}` rule, so .code-block / Prism styles still win. */
:where(p, li, td, th, dd, h3, h4, h5, h6) > code {
  display: inline;
  padding: 0.05em 0.35em;
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
}

@media (max-width: 768px) {
  /* The 13 language tabs scroll sideways with a hard cut after PHP, so
     nothing says there's more (MetaTrader is last). Fade the edge; the
     trailing spacer lets the last tab clear the fade. */
  .lang-tab-header {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }

  .lang-tab-header::after {
    content: "";
    flex: 0 0 2rem;
  }
}

/* ---------- Limits table ---------- */
.table-container table {
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.9375rem;
}

@media (min-width: 992px) {
  .table-container table {
    max-width: none;
  }
}

.table-container table thead {
  background: transparent;
  color: var(--ink);
}

.table-container table thead th {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
}

.table-container table th,
.table-container table td {
  border-bottom: 1px solid var(--rule);
}

.table-container table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.table-container table tbody tr:hover {
  background: transparent;
}

.table-container table tbody td:nth-child(2) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (max-width: 768px) {
  /* Three columns squeeze the row labels into 3–4 lines below tablet width
     ("单ip每/日http/请求上/限"). Stack each row instead: label and number
     on one line, the rule underneath. */
  .table-container table,
  .table-container table tbody {
    display: block;
  }

  .table-container table thead {
    display: none;
  }

  .table-container table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--rule);
  }

  .table-container table tbody tr:last-child {
    border-bottom: 0;
  }

  .table-container table tbody th,
  .table-container table tbody td,
  .table-container table tbody tr:last-child td {
    padding: 0;
    border: 0;
  }

  .table-container table tbody td:nth-child(2) {
    font-weight: 600;
    text-align: right;
  }

  .table-container table tbody td:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.7;
  }
}

/* ---------- Upgrade notice (inline styles in HTML, hence !important) ---------- */
.upgrade-notice {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  max-width: none !important;
}

.upgrade-notice .fa-rocket,
.upgrade-notice .fa-infinity,
.upgrade-notice .upgrade-link i {
  display: none !important;
}

.upgrade-notice p {
  color: var(--ink-2) !important;
}

.upgrade-notice p:first-child,
.upgrade-notice strong {
  color: var(--ink) !important;
}

.upgrade-notice .upgrade-link {
  background: var(--ink) !important;
  border: 1px solid var(--ink);
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--paper) !important;
  font-weight: 500 !important;
}

.upgrade-notice .upgrade-link + .upgrade-link {
  background: transparent !important;
  border-color: var(--rule);
  color: var(--ink) !important;
}

/* ---------- FAQ: ruled list, no per-question icons ---------- */
.faq-item {
  margin: 0;
  padding: 1.1rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-item:hover {
  box-shadow: none;
}

.faq-question {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
}

.faq-question:hover {
  color: var(--accent-ink);
}

.faq-question > i:not(.faq-toggle) {
  display: none;
}

.faq-toggle {
  color: var(--ink-3);
}

/* The script swaps an open item's icon to chevron-up *and* styles.css
   rotates it 180°, so open items pointed down like closed ones. Keep one
   glyph and let the rotation show the state. */
.faq-question .faq-toggle::before {
  content: "\f078";
}

/* "为什么使用" answer: template grey boxes with teal icons. */
.features-list .feature-item {
  background: var(--chip);
  border-color: var(--rule);
  color: var(--ink-2);
}

.features-list .feature-item i {
  color: var(--ink-3);
}

.faq-list a {
  color: var(--ink-2);
}

.faq-list a:hover {
  color: var(--accent-ink);
}

.faq-list a > i,
#agentcli li > i {
  display: none;
}

/* ---------- MT5 sub-heading (inline color in HTML) ---------- */
#mt5plugin h3 {
  color: var(--ink) !important;
  font-size: 1.125rem;
}

/* Download buttons: white text on --primary-color (ink) in styles.css. */
.mt5-dl-btn-primary,
.mt5-dl-btn-primary:hover {
  color: var(--paper);
  box-shadow: none;
}

.mt5-dl-btn-primary:hover {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  filter: none;
}

.mt5-dl-btn-outline:hover {
  background: var(--primary-soft);
}

/* ---------- Donate ---------- */
#donate .qr-code-container img {
  border: 1px solid var(--rule);
  box-shadow: none !important;
}

#donate p {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ---------- Floating share buttons: quiet, desktop only ---------- */
.share-btn {
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: var(--surface) !important;
  border: 1px solid var(--rule);
  box-shadow: none;
  text-decoration: none;
}

.share-btn.wechat {
  color: #07c160;
}

.share-btn.weibo {
  color: #e6162d;
}

.share-btn:hover {
  transform: none;
  border-color: var(--ink-3);
}

@media (max-width: 1099.98px) {
  /* Below ~1100px the side margin is narrower than the buttons, so they sit
     on top of content (phones, tablets). WeChat has its own share menu. */
  .share-buttons {
    display: none;
  }
}

/* Share-to-WeChat QR dialog. */
.wechat-qr-content {
  background: var(--surface);
  color: var(--ink-2);
}

.wechat-qr-content h3 {
  color: var(--ink);
}

/* ---------- Footer ---------- */
.footer {
  padding: 2.25rem 0;
  background: var(--footer-bg);
  font-size: 0.8125rem;
}

.footer a {
  text-decoration: none;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(250, 248, 244, 0.1);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-nav a {
  color: rgba(250, 248, 244, 0.72);
}

.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: rgba(250, 248, 244, 0.5);
}

.footer-links {
  gap: 0.5rem 1.5rem;
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .footer-meta {
    justify-content: center;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
  }
}