/* XPhoneUse website - one stylesheet for both languages.
   Brand tokens come from the app itself (src/index.css): tech blue #1677FF,
   dark surface #0f172a, light background #f8f8fa. */

:root {
  --brand: #1677ff;
  --brand-strong: #0958d0;
  --brand-soft: rgba(22, 119, 255, 0.12);

  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --bg-elevated: #ffffff;
  --text: #0b1220;
  --text-muted: #5b6478;
  --text-faint: #8b93a7;
  --border: #e5e9f2;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  --code-bg: #0f172a;
  --code-text: #e8eefc;

  --radius: 14px;
  --maxw: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080b14;
    --bg-soft: #0d1220;
    --bg-elevated: #111726;
    --text: #f3f6fc;
    --text-muted: #a3adc2;
    --text-faint: #76809a;
    --border: #1e2638;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --brand-soft: rgba(22, 119, 255, 0.18);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav-links { display: flex; gap: 20px; margin-inline-start: auto; }
.nav-links a { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.lang {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
}
.lang:hover { color: var(--text); text-decoration: none; border-color: var(--text-faint); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--bg-elevated); }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 9px; }

/* ---------- hero ---------- */
.hero {
  padding: 76px 0 40px;
  background:
    radial-gradient(900px 420px at 12% -10%, var(--brand-soft), transparent 70%),
    var(--bg);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 18px;
}
h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-muted); margin: 0 0 28px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--text-faint); }

.shot-frame {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shot-frame img { width: 100%; }

/* The hero screenshot is a tall phone frame: cap it so the hero stays a
   banner rather than a full page of phone. */
.hero .shot-frame { justify-self: center; }
.hero .shot-frame img { width: auto; max-height: 620px; }

/* ---------- sections ---------- */
section { padding: 72px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 680px; margin-bottom: 40px; }
h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.02em; margin: 0 0 12px; }
.section-head p { color: var(--text-muted); margin: 0; font-size: 16px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
.card .ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 17px;
  margin-bottom: 14px;
}

/* ---------- agent and copilot bands ---------- */
.agent, .copilot { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.agent ul, .copilot ul { margin: 0 0 22px; padding-inline-start: 20px; color: var(--text-muted); }
.agent li, .copilot li { margin-bottom: 6px; }
.copilot-note { font-size: 13px; color: var(--text-faint); margin: 0; }
pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}
pre .c { color: #7c8ba3; }
pre .k { color: #6fb1ff; }

/* ---------- copilot panel (the drawing beside the copilot copy) ----------
   The panel the app floats over the mirror, rebuilt here rather than
   screenshotted: the copy that goes in it lives in i18n.json like every other
   string, and a drawing cannot go stale against a release. Only the tokens
   above are used, so it follows the reader into dark mode. */
.demo-wrap { margin: 0; }
.demo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.demo-head .spark { color: var(--brand); }
.demo-head .dot { width: 8px; height: 8px; border-radius: 50%; background: #d97706; }
.demo-head .status { margin-inline-start: auto; font-size: 12px; color: var(--text-faint); }
.demo-body { padding: 12px 14px 14px; }
.demo-judge { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.demo-judge b { color: var(--text); font-size: 15px; }
.demo-label {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.demo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13.5px;
}
.demo-row:last-child { margin-bottom: 0; }
.demo-row .rank { min-width: 34px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.demo-row .rank b { display: block; color: var(--brand); }
.demo-row .txt { flex: 1; }
.demo-row .fill {
  white-space: nowrap;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
  font-size: 12px;
  color: var(--text-muted);
}
.demo-cap { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--text-faint); }

/* ---------- screens ---------- */
.screens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.screen { text-align: center; }
.screen .shot-frame { display: inline-block; max-width: 380px; }
.screen figcaption { margin-top: 14px; color: var(--text-muted); font-size: 14px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.step h3 { margin: 0 0 6px; font-size: 16px; }
.step p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
th, td { text-align: start; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--bg-soft); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
tbody tr:last-child td { border-bottom: none; }
td strong { font-weight: 600; }

/* ---------- faq ----------
   Scoped to .faq on purpose. These were bare `details`/`summary` rules, which
   turned every <details> on the site into a white card - including the nav
   bar's phone menu, whose button then stood about ten pixels taller than the
   64px bar it lives in and poked out of the top of it. */
.faq { display: grid; gap: 14px; }
.faq details {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
summary { cursor: pointer; }
.faq summary { font-weight: 600; font-size: 15.5px; }
summary::marker { color: var(--brand); }
.faq details p { margin: 12px 0 0; color: var(--text-muted); font-size: 14.5px; }

/* ---------- cta + footer ---------- */
.cta {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 20px;
  padding: 48px;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: #b9c4d8; margin: 0 auto 26px; max-width: 52ch; }

footer { border-top: 1px solid var(--border); padding: 44px 0 30px; background: var(--bg-soft); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
.foot-grid h4 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.foot-grid a { display: block; color: var(--text-muted); font-size: 14.5px; margin-bottom: 8px; }
.foot-grid a:hover { color: var(--text); }
.foot-note { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Contact block on the home page: the QR sits beside its explanation, and the
   channels wrap to one column on a narrow screen. */
.contact { display: flex; align-items: flex-start; gap: 36px; flex-wrap: wrap; }
.contact > div { max-width: 42ch; }
.contact p { margin: 0 0 8px; font-size: 15px; }
.contact a { color: var(--brand); text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact .contact-note { color: var(--text-muted); font-size: 14px; }
/* The QR is meant to be scanned off the screen, so it is sized for that (and
   is not a link): a phone needs a decent square of pixels, not a thumbnail. */
.contact-qr {
  display: block; width: 280px; height: auto; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
}

/* ---------- home showcase ----------
   A strip of case cards inside the page column (not bleed to the window),
   holding its cards several times over: the animation slides it by exactly one
   pass, which is the width of the repeated block, so the loop has no seam.
   Hovering or focusing stops it, and a reader who asked for less motion gets a
   plain horizontal scroll instead of movement. */
.showcase { padding: 40px 0 40px; }
.marquee {
  overflow: hidden; margin-bottom: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.marquee-track {
  display: flex; gap: 18px; width: max-content;
  animation: marquee 60s linear infinite;
  transform: translateX(0);
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--passes, 2))); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
}
.marquee-card { width: 260px; flex: 0 0 auto; }
.marquee-link { display: flex; flex-direction: column; height: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.marquee-link:hover { border-color: var(--brand); transform: translateY(-2px); }
.marquee-shot { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2, var(--bg-elevated)); display: grid; place-items: center; overflow: hidden; }
.marquee-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marquee-placeholder { padding: 0 16px; color: var(--text-muted); font-size: 14px; text-align: center; }
.marquee-play { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 12px; }
.marquee-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.marquee-body h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.marquee-meta { color: var(--text-faint); font-size: 12.5px; }
.case-video { display: inline-block; margin-top: 12px; color: var(--brand); font-size: 14px; text-decoration: none; }
.case-video:hover { text-decoration: underline; }

/* ---------- hardware page ----------
   Two products, one per row: a photo block and its text, alternating nothing -
   the photos are what people came to look at, so they stay on the outside. */
.products { display: flex; flex-direction: column; gap: 40px; }
.product {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 34px; align-items: start;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
}
.product-shot img, .product-gallery img { width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); display: block; }
.product-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-gallery img:first-child { grid-column: 1 / -1; }
.product-body h2 { margin: 6px 0 10px; }
.product-body p { color: var(--text-muted); }
.product-example { margin: 18px 0 4px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); }
.product-example .quote { margin: 8px 0 6px; font-size: 16px; color: var(--text); }
.product-example .note { margin: 0; }
.product-tag {
  display: inline-block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}

/* ---------- responsive ---------- */
/* ---------- the nav on a phone ----------
   Six entries, a language switch and a download button do not fit a phone, so
   below 900px the row gives way to a menu. It is a <details>: the browser
   opens and closes it, and the only script on the page that touches it closes
   the panel when the reader clicks away or presses Escape.

   Hiding the row outright - what this used to do - left a phone with no way to
   reach any page it was not already on: the whole site behind one button. */
.nav-menu {
  display: none;
  /* Not a card. This <details> sits in a 64px bar, so a background, a border
     or vertical padding would push it out of that bar - which is what the
     FAQ's `details` rule used to do before it was scoped to .faq. */
  background: none;
  border: 0;
  padding: 0;
}
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }

@media (max-width: 900px) {
  .hero-grid, .agent, .copilot, .screens, .cards, .steps, .foot-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
  section { padding: 56px 0; }
  .cta { padding: 34px 22px; }
  .nav-links { display: none; }
  /* 22px between the brand and the actions is most of what a phone has. */
  .nav-inner { gap: 10px; }
  /* Full height of the bar, so the panel below it hangs from the bar's bottom
     edge (100% + 10px) rather than from the button's. */
  .nav-menu {
    display: flex;
    align-items: center;
    align-self: stretch;
    position: relative;
    margin-inline-start: auto;
  }
  .nav-menu > summary {
    /* Fixed height and no line-height leading: a <summary>'s box otherwise
       depends on the line the browser gives its marker, and this one has to
       fit a 64px bar on every engine that renders the page. */
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
  }
  .nav-menu > summary:hover { color: var(--text); border-color: var(--text-faint); }
  .nav-menu[open] > summary { color: var(--text); background: var(--bg-soft); }
  .nav-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 30;
    min-width: 200px;
    display: grid;
    gap: 2px;
    padding: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .nav-menu-panel a { padding: 10px 13px; border-radius: 9px; color: var(--text); font-size: 15px; }
  .nav-menu-panel a:hover { background: var(--bg-soft); text-decoration: none; }
  .nav-menu-panel a.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
}

/* Narrower still: the download button in the bar is the first thing to go -
   the menu carries the same link, and the pages have their own. */
@media (max-width: 420px) {
  .nav-actions .btn { display: none; }
}

/* Where the reader is, in the row and in the menu alike. */
.nav-links a.active { color: var(--text); font-weight: 600; }

/* ============================================================
   Dynamic site additions: page heads, download cards, docs,
   community forms and the admin console.
   ============================================================ */

.page-head { padding: 64px 0 8px; background:
  radial-gradient(900px 380px at 12% -20%, var(--brand-soft), transparent 70%), var(--bg); }
.page-head h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 10px; }
.page-head .lead { margin-bottom: 12px; }
.section-tight { padding: 40px 0; }
h2.tight { margin-top: 0; }
.center { text-align: center; margin-top: 28px; }
.muted { color: var(--text-muted); }
.small { font-size: 13.5px; }
.note { color: var(--text-faint); font-size: 13.5px; margin: 18px 0; }
.mark { font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.active { }

.version-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; }
.version-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }

.flash { border-radius: 12px; padding: 13px 18px; margin: 18px 0; font-size: 14.5px; border: 1px solid transparent; }
.flash-ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); color: #15803d; }
.flash-err { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.32); color: #b91c1c; }
@media (prefers-color-scheme: dark) {
  .flash-ok { color: #4ade80; }
  .flash-err { color: #fca5a5; }
}

/* ---------- download ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dl-card { display: flex; flex-direction: column; gap: 16px; }
.dl-head { display: flex; align-items: center; gap: 14px; }
.dl-head .ico { margin: 0; }
.dl-head h3 { margin: 0; }
.dl-meta { display: flex; gap: 26px; margin: 0; flex-wrap: wrap; }
.dl-meta div { display: flex; flex-direction: column; gap: 2px; }
.dl-meta dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.dl-meta dd { margin: 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.dl-card .btn { align-self: flex-start; }
.btn-disabled { background: var(--bg-soft); color: var(--text-faint); border-color: var(--border); cursor: default; }
.btn-disabled:hover { transform: none; }
.btn-danger { background: transparent; border-color: rgba(239, 68, 68, 0.4); color: #dc2626; }
.btn-danger:hover { background: rgba(239, 68, 68, 0.08); }

.download-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.download-row h3 { margin: 0 0 4px; }
.download-row p { margin: 0; }

.ime-card {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 30px;
}
.ime-card + .ime-card { margin-top: 18px; }
.ime-body h2 { margin: 0 0 8px; font-size: 21px; }
.ime-body p { margin: 0; color: var(--text-muted); font-size: 14.5px; max-width: 62ch; }

/* ---------- dongle page ---------- */
.dongle-top { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.dongle-shot { justify-self: center; max-width: 380px; }
.dongle-shot img { width: 100%; }
.dongle-list { margin: 0 0 4px; padding-inline-start: 20px; color: var(--text-muted); font-size: 15.5px; }
.dongle-list li { margin-bottom: 10px; }
.buy-card { padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.buy-card p { margin: 0; color: var(--text-muted); max-width: 56ch; }
.buy-card .note { margin: 0; }

/* ---------- skill ---------- */
.install-card { padding: 28px 30px; }
.install-lead { margin: 0 0 14px; color: var(--text-muted); font-size: 15px; }
.install-cmd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.install-cmd code {
  flex: 1 1 340px; min-width: 0; overflow-wrap: anywhere;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
  padding: 13px 16px; font-family: var(--mono); font-size: 13.4px; color: var(--text);
}
.install-cmd .btn { white-space: nowrap; }
.verify code, .card code, td code, .case-card code {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-family: var(--mono); font-size: 12.8px;
}
.verify { margin-top: 22px; color: var(--text-muted); font-size: 14.5px; }

/* ---------- docs ---------- */
.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; padding-top: 44px; padding-bottom: 60px; }
.docs-side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.docs-side h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.docs-side a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--text-muted); font-size: 14.5px; border-inline-start: 2px solid transparent; }
.docs-side a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.docs-side a.active { color: var(--brand); background: var(--brand-soft); border-inline-start-color: var(--brand); font-weight: 600; }
.docs-main { min-width: 0; }
.docs-toc { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); }
.docs-toc h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.docs-toc a { display: block; color: var(--text-muted); font-size: 13.5px; padding: 3px 0; }
.docs-toc a.lvl-3 { padding-inline-start: 16px; font-size: 13px; }

.prose { max-width: 74ch; }
.prose h1 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; padding-top: 6px; }
.prose h3 { font-size: 18.5px; margin: 28px 0 8px; }
.prose h4 { font-size: 16px; margin: 22px 0 6px; }
.prose p, .prose li { color: var(--text-muted); font-size: 15.5px; }
.prose li { margin-bottom: 5px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: 12px; border: 1px solid var(--border); margin: 18px 0; }
.prose blockquote {
  margin: 20px 0; padding: 4px 20px; border-inline-start: 3px solid var(--brand);
  background: var(--bg-soft); border-radius: 0 10px 10px 0; color: var(--text-muted);
}
.prose table { min-width: 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.prose :not(pre) > code { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-family: var(--mono); font-size: 13.5px; color: var(--text); }
.prose pre { margin: 18px 0; }
.notice { background: var(--brand-soft); color: var(--brand); border-radius: 10px; padding: 10px 16px; font-size: 14px; }

/* ---------- community ---------- */
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.case-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column;
}
/* A card with screenshots drops its own padding so the image runs edge to edge,
   and puts it back on the text below. */
.case-card.has-shots { padding: 0; overflow: hidden; }
.case-card.has-shots .case-body { padding: 18px 20px 20px; }
.case-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case-card h3 { margin: 0; font-size: 17px; }
.case-card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* Screenshots lead the card: one cover, or a cover over a row of tiles. */
.case-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--border); }
.case-shots > a { position: relative; display: block; overflow: hidden; background: var(--bg-soft); }
.case-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; display: block; transition: transform 0.25s ease; }
.case-shots > a:hover img { transform: scale(1.03); }
/* One screenshot gets the whole card, not half of a two-column grid. */
.case-shots.single { grid-template-columns: 1fr; }
.case-shots.single > a img { aspect-ratio: 16 / 10; }
/* Three or more: the first one spans the card, the other two sit below it. */
.case-shots > a:first-child:nth-last-child(n + 3) { grid-column: 1 / -1; }
.case-shots > a:first-child:nth-last-child(n + 3) img { aspect-ratio: 16 / 9; }
.case-shots .more {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(15, 23, 42, 0.72); color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 600;
}
.case-shots.big { grid-template-columns: repeat(2, 1fr); gap: 8px; background: none; }
.case-shots.big > a img { aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--border); }
.case-prompt { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.case-label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 6px; }
.case-prompt code { background: none; border: none; padding: 0; font-family: var(--mono); font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.case-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--text-faint); font-size: 13px; margin-top: auto; flex-wrap: wrap; }
.case-meta .tool { color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 1px 9px; font-weight: 500; }

.forms { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.form-col { min-width: 0; }
.form { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.form label, .doc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.form input, .form textarea, .form select,
.doc-form input, .doc-form textarea, .doc-form select,
.inline-form input {
  font: inherit; font-weight: 400; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; width: 100%;
}
.form input:focus, .form textarea:focus, .doc-form input:focus, .doc-form textarea:focus {
  outline: 2px solid var(--brand-soft); border-color: var(--brand);
}
.form textarea { resize: vertical; }
.form .hint, .hint { font-weight: 400; color: var(--text-faint); font-size: 12.5px; }

/* ============================================================
   Admin console
   ============================================================ */
body.admin { background: var(--bg-soft); }
.admin-bar { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.admin-bar-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.admin-bar nav { display: flex; gap: 4px; margin-inline-start: auto; }
.admin-bar nav a { padding: 7px 12px; border-radius: 8px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.admin-bar nav a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.admin-bar nav a.active { background: var(--brand-soft); color: var(--brand); }
.admin-who { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--text-faint); }
.admin-who a { color: var(--text-muted); }
.admin-who .link { background: none; border: none; color: var(--brand); font: inherit; cursor: pointer; padding: 0; }

.admin-main { padding: 34px 24px 80px; }
.admin-main h1 { font-size: 26px; margin: 0 0 22px; }
.admin-main h2 { font-size: 19px; margin: 34px 0 14px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-head h1 { margin: 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; color: var(--text-muted); border: 1px solid var(--border); }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.stat:hover { text-decoration: none; border-color: var(--brand); }
.stat-n { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-l { color: var(--text-muted); font-size: 13.5px; }
.quick { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }
.pill-ok { background: rgba(34, 197, 94, 0.12); color: #15803d; border-color: rgba(34, 197, 94, 0.3); }
.pill-bad { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-actions form, .inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form.wide { padding: 20px; }
.inline-form input { width: auto; min-width: 180px; }
tr.unread td { font-weight: 600; }
.body-cell { max-width: 44ch; white-space: pre-wrap; }
.admin-note { margin-top: 6px; color: var(--text-faint); font-size: 13px; font-weight: 400; }

.mod-card { margin-bottom: 18px; }
.mod-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mod-card h3 { margin: 0; }
.mod-card .meta { color: var(--text-faint); font-size: 13.5px; margin: 6px 0 14px; }
.mod-card .body { white-space: pre-wrap; color: var(--text-muted); font-size: 14.5px; }
.mod-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.mod-actions input[type=text] { flex: 1; min-width: 200px; font: inherit; border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; background: var(--bg); }

.doc-form { display: flex; flex-direction: column; gap: 20px; }
.doc-form .row { display: grid; grid-template-columns: 2fr 1.4fr 0.9fr 0.7fr auto; gap: 14px; align-items: end; }
.doc-form .check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; font-weight: 500; }
.doc-form .check input { width: auto; }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.editor textarea { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; min-height: 460px; }
.preview-col { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.preview { max-height: 520px; overflow-y: auto; }
.form-actions { display: flex; gap: 12px; }

/* ICP filing line: present on Chinese pages only, muted like the rest of the
   fine print. */
.foot-note .icp { color: var(--text-faint); margin-inline-start: 8px; }
.foot-note .icp:hover { color: var(--text-muted); }

.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; padding: 30px; }
.login-card h1 { font-size: 20px; margin: 0; }
.login-card .brand { margin-bottom: 4px; }

@media (max-width: 900px) {
  .dl-grid, .forms, .stat-grid, .editor, .doc-form .row, .dongle-top, .product { grid-template-columns: 1fr; }
  .docs-layout { grid-template-columns: 1fr; gap: 24px; }
  .docs-side { position: static; max-height: none; }
  .ime-card, .download-row { flex-direction: column; align-items: flex-start; }
  .admin-bar-inner { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .admin-bar nav { margin: 0; flex-wrap: wrap; }
  .nav-links { display: none; }
}