:root {
  --bg: #06060a;
  --card: #10101a;
  --border: #22222f;
  --border-red: rgba(255, 39, 64, .28);
  --red: #ff2740;
  --red-dark: #8f0f1e;
  --red-glow: rgba(255, 39, 64, .35);
  --text: #ececf2;
  --muted: #8b8c9e;
  --green: #2ecc71;
  --orange: #f5a623;
  --code-bg: #0b0b12;
  --sidebar-w: 264px;
  /* How far the floating header sits from the top of the viewport. Declared
     once here so the sidebar can stack under the header without repeating
     the number (it used to hardcode 80px and drifted the moment the header
     changed height). */
  --bar-top: 12px;
  --bar-gap: 24px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.7;
}

/* ---------- header ---------- */
.topbar {
  position: sticky;
  top: var(--bar-top);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 44px);
  max-width: 860px;
  margin: 12px auto 0;
  padding: 7px 16px;
  background: rgba(16, 16, 26, .55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border-red);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 22px var(--red-glow);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand b { font-size: 16px; letter-spacing: 2px; }
.brand b span { color: var(--red); }
.ver {
  font-size: 11px;
  color: var(--red);
  border: 1px solid var(--border-red);
  border-radius: 20px;
  padding: 0 8px;
  white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.topbar a.gh {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--border);
  padding: 4px 11px;
  border-radius: 8px;
}
.topbar a.gh:hover { color: var(--text); border-color: var(--red); }
#nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 16px;
  padding: 3px 10px;
  cursor: pointer;
}

/* ---------- layout ---------- */
/* --topbar-h is the header's real height, published by docs.js through a
   ResizeObserver, so the sidebar stacks under it exactly instead of
   guessing 80px (which drifted the moment the bar wrapped on mobile). */
.layout { display: flex; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: calc(var(--topbar-h, 47px) + var(--bar-top) + var(--bar-gap));
  height: calc(100vh - var(--topbar-h, 47px) - var(--bar-top) - var(--bar-gap) - 14px);
  overflow-y: auto;
  padding: 22px 14px 40px 22px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.sidebar input {
  width: 100%;
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 14px;
}
.sidebar input:focus { outline: none; border-color: var(--red); }
.nav-group { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 16px 6px 6px; }
.sidebar a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  padding: 7px 12px;
  border-radius: 8px;
  border-left: 2px solid transparent;
}
.sidebar a:hover { color: var(--text); background: var(--card); }
.sidebar a.active { color: var(--red); background: var(--card); border-left-color: var(--red); }

.content { flex: 1; min-width: 0; max-width: 1000px; margin-left: var(--sidebar-w); padding: 34px 40px 80px; }
.content h1 { font-size: 32px; margin: 0 0 6px; letter-spacing: .5px; }
.content h1 .z { color: var(--red); }
.content h2 { font-size: 22px; margin: 38px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.content h2::before { content: "▸ "; color: var(--red); }
.content h3 { font-size: 17px; margin: 24px 0 8px; color: var(--text); }
.subtitle { color: var(--muted); margin: 0 0 20px; font-size: 16px; }
.content p, .content li { color: #cfcfda; font-size: 15px; }
.content a { color: var(--red); }
.content ul, .content ol { padding-left: 22px; }
.content li { margin: 5px 0; }

/* ---------- cards / callouts ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
}
.card:hover { border-color: var(--red); box-shadow: 0 0 18px var(--red-glow); }
.card b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.card span { color: var(--muted); font-size: 13.5px; }
.callout {
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14.5px;
  border: 1px solid var(--border);
  background: var(--card);
}
.callout.warn { border-color: var(--orange); }
.callout.warn::before { content: "⚠ "; }
.callout.info { border-color: var(--border-red); }
.callout.info::before { content: "ⓘ "; color: var(--red); }
.callout.ok { border-color: rgba(46, 204, 113, .4); }
.callout.ok::before { content: "✓ "; color: var(--green); }

/* ---------- code / tables ---------- */
pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  position: relative;
  font-size: 13.5px;
}
code { font-family: Consolas, "Cascadia Code", monospace; }
p code, li code, td code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 13px;
  color: #ffb3bb;
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
}
.copy-btn:hover { color: var(--text); border-color: var(--red); }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
th { color: var(--red); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
tr:hover td { background: var(--card); }
.badge {
  display: inline-block;
  font-size: 12px;
  border-radius: 20px;
  padding: 1px 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  margin: 2px 4px 2px 0;
}
.badge.get { color: var(--green); border-color: rgba(46, 204, 113, .4); }
.badge.post { color: var(--orange); border-color: rgba(245, 166, 35, .4); }
.badge.put { color: #5aa9ff; border-color: rgba(90, 169, 255, .4); }
.badge.del { color: var(--red); border-color: var(--border-red); }

.hero {
  text-align: center;
  padding: 50px 20px 30px;
}
.hero img { width: 96px; height: 96px; border-radius: 20px; box-shadow: 0 0 40px var(--red-glow); }
.hero h1 { font-size: 44px; letter-spacing: 10px; margin: 18px 0 6px; }
.hero h1 span { color: var(--red); }
.hero p { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 auto; }
.cta { display: flex; gap: 12px; justify-content: center; margin: 26px 0 10px; flex-wrap: wrap; }
.btn {
  text-decoration: none;
  padding: 11px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}
.btn.primary { background: var(--red); color: #fff !important; box-shadow: 0 0 22px var(--red-glow); }
.btn.primary:hover { background: #ff4056; }
.btn.ghost { border: 1px solid var(--border); color: var(--text) !important; }
.btn.ghost:hover { border-color: var(--red); }
.stats { display: flex; gap: 26px; justify-content: center; margin: 26px 0 6px; flex-wrap: wrap; }
.stats div { text-align: center; }
.stats b { display: block; font-size: 26px; color: var(--red); }
.stats span { font-size: 13px; color: var(--muted); }

footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 22px;
}
footer a { color: var(--red); text-decoration: none; }

/* ---------- landing ---------- */
.landing { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; }
/* Mobile-only dropdown menu (hamburger): just Docs + Changelog. The button
   itself is display:none on desktop, so this can never appear there. */
.sidebar.mob-menu {
  display: none;
  position: fixed;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 32px));
  height: auto;
  max-height: 60vh;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border-red);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 26px var(--red-glow);
  z-index: 60;
}
.sidebar.mob-menu.open { display: block; }
.sidebar.mob-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 16px;
  border-left: none;
}
.sidebar.mob-menu a:hover { background: rgba(255, 39, 64, .1); }
.hero-xl { text-align: center; padding: 64px 16px 34px; }
.hero-xl img { width: 110px; height: 110px; border-radius: 22px; box-shadow: 0 0 46px var(--red-glow); }
.hero-xl h1 { font-size: 52px; letter-spacing: 12px; margin: 20px 0 8px; }
.hero-xl h1 span { color: var(--red); }
.hero-xl .tagline { color: var(--muted); font-size: 18px; margin: 0 0 6px; }
.oneline { max-width: 640px; margin: 22px auto 0; text-align: left; }
.band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; margin: 10px 0 0; }
.proto-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.proto-row .badge { font-size: 13px; padding: 4px 14px; color: var(--text); border-color: var(--border-red); }
.wrap { padding: 44px 8px 0; }
.wrap h2 { text-align: center; font-size: 26px; margin: 0 0 24px; }
.wrap h2::before { content: ""; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.feat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.feat:hover { border-color: var(--red); }
.feat b { font-size: 16px; }
.feat b::before { content: "▸ "; color: var(--red); }
.feat p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: stretch; }
.shots figure { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; background: #000; }
.shots figcaption { padding: 10px 16px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--border); margin-top: auto; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 30px; }
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.step b {
  display: inline-block;
  width: 38px; height: 38px; line-height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
  box-shadow: 0 0 18px var(--red-glow);
}
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  #nav-toggle { display: block; }
  .hero-xl h1 { font-size: 34px; letter-spacing: 7px; }
  .sidebar {
    display: none;
    /* Same measured offset as the desktop rule: the mobile drawer used to
       hardcode 80px, which drifted out of step with the header the moment
       the header changed height. */
    top: calc(var(--topbar-h, 47px) + var(--bar-top) + var(--bar-gap));
    height: calc(100vh - var(--topbar-h, 47px) - var(--bar-top) - var(--bar-gap) - 14px);
    left: 0;
    background: var(--bg);
    z-index: 40;
    box-shadow: 4px 0 24px rgba(0,0,0,.6);
  }
  [dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    box-shadow: -4px 0 24px rgba(0,0,0,.6);
  }
  .sidebar.open { display: block; }
  .content { padding: 24px 18px 60px; margin-left: 0; max-width: none; }
  [dir="rtl"] .content { margin-right: 0; }
  .hero h1 { font-size: 32px; letter-spacing: 6px; }
}

/* ---------- search palette (Ctrl+K) ---------- */
.sp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}
.sp-trigger:hover { color: var(--text); border-color: var(--red); }
.sp-trigger kbd {
  font-family: inherit;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 6px;
  color: var(--muted);
}
.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3, 3, 6, .72);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 18px 18px;
  opacity: 0;
  transition: opacity .18s ease;
}
.sp-overlay.show { opacity: 1; }
.sp-overlay[hidden] { display: none; }
.sp-modal {
  width: min(620px, 100%);
  max-height: 66vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-red);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65), 0 0 34px var(--red-glow);
  overflow: hidden;
  transform: translateY(-14px) scale(.98);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
.sp-overlay.show .sp-modal { transform: none; }
.sp-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sp-input-row svg { flex-shrink: 0; }
.sp-input-row input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
.sp-results { overflow-y: auto; padding: 8px; }
.sp-item {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
}
.sp-item.sel, .sp-item:hover { background: rgba(255, 39, 64, .1); }
.sp-item .sp-sec { color: var(--text); font-size: 14.5px; }
.sp-item .sp-page { color: var(--red); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.sp-item .sp-snip { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-item mark { background: rgba(255, 39, 64, .32); color: #fff; border-radius: 3px; padding: 0 1px; }
.sp-empty { color: var(--muted); text-align: center; padding: 26px; font-size: 14px; }
.sp-foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.sp-foot kbd { font-family: inherit; border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; margin-right: 4px; }

/* ---------- site assistant chat ---------- */
.ai-modal { max-height: 76vh; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; font-size: 16px; }
.ai-x { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; font-size: 16px; cursor: pointer; }
.ai-x:hover { color: var(--text); border-color: var(--red); }
.ai-sub { padding: 0 16px 10px; color: var(--muted); font-size: 12.5px; border-bottom: 1px solid var(--border); }
.ai-msgs { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.ai-msg.user { align-self: flex-end; background: rgba(255, 39, 64, .14); border: 1px solid var(--border-red); border-radius: 10px; padding: 8px 12px; font-size: 14px; max-width: 88%; }
.ai-msg.bot { align-self: stretch; }
.ai-msg.typing { color: var(--muted); }
.ai-entry { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ai-entry + .ai-entry { margin-top: 8px; }
.ai-entry strong { color: var(--red); display: block; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.ai-entry p { margin: 6px 0; white-space: pre-line; }
.ai-wallet { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.ai-wallet b { font-size: 12px; white-space: nowrap; }
.ai-wallet code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #ffb3bb; }
.ai-wallet button { background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; font-size: 12px; padding: 3px 10px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.ai-wallet button:hover { color: var(--text); border-color: var(--red); }
.ai-link { display: inline-block; margin: 6px 8px 0 0; border: 1px solid var(--border-red); color: var(--text); border-radius: 8px; padding: 5px 12px; font-size: 13px; text-decoration: none; }
.ai-link:hover { border-color: var(--red); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; }
.ai-chips button { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 20px; font-size: 12.5px; padding: 5px 12px; cursor: pointer; font-family: inherit; }
.ai-chips button:hover { color: var(--text); border-color: var(--red); }
.ai-form { display: flex; gap: 8px; padding: 12px 16px 16px; }
.ai-form input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 14px; padding: 9px 12px; font-family: inherit; outline: none; min-width: 0; }
.ai-form input:focus { border-color: var(--red); }
.ai-send { background: var(--red); color: #fff; border: none; border-radius: 9px; padding: 0 18px; font-size: 14px; cursor: pointer; font-family: inherit; }

/* ---------- scroll animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
.hero-xl img { animation: drop-in .7s cubic-bezier(.2, .9, .3, 1.25) both; }
.hero-xl h1 { animation: rise-in .6s .1s ease both; }
.hero-xl .tagline { animation: rise-in .6s .2s ease both; }
.hero-xl .cta { animation: rise-in .6s .3s ease both; }
.hero-xl .oneline { animation: rise-in .6s .4s ease both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.card, .feat, .step { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover, .feat:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
body { overflow-x: clip; }
table { display: block; width: 100%; overflow-x: auto; }
.sp-foot { flex-wrap: wrap; gap: 8px 16px; }

@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 6px 10px; border-radius: 14px; flex-wrap: wrap; }  .brand img { width: 24px; height: 24px; }
  .brand b { font-size: 13px; letter-spacing: 1px; }
  .ver { display: none; }
  .lang-sel { max-width: 104px; font-size: 12px; padding: 3px 6px; }
  .topbar a.gh { font-size: 12px; padding: 3px 8px; white-space: nowrap; }
  .topbar a.gh[href="installation.html"], .topbar a.gh[href="changelog.html"], .topbar a.gh[href="donate.html"] { display: none; }
  .sp-trigger { padding: 3px 8px; font-size: 12px; }
  .sp-trigger kbd { display: none; }
  .content h1 { font-size: 25px; }
  .content h2 { font-size: 19px; }
  table { font-size: 13px; }
  th, td { padding: 8px 10px; white-space: nowrap; }
  .stats { gap: 14px; }
  .stats b { font-size: 21px; }
  .stats span { font-size: 12px; }
  .hero-xl { padding: 44px 8px 24px; }
  .hero-xl h1 { letter-spacing: 5px; }
  .hero-xl .tagline { font-size: 15.5px; }
  .hero-xl .tagline br { display: none; }
  .btn { padding: 10px 20px; font-size: 14px; }
  .sp-modal { max-height: 78vh; }
  .sp-overlay { padding: 8vh 12px 12px; }
}

/* ---------- floating support bubble ---------- */
.sup-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-red);
  background: var(--red);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px var(--red-glow);
  transition: transform .2s ease;
  font-family: inherit;
  animation: sup-in .5s .8s ease both;
}
.sup-fab:hover { transform: scale(1.1); }
@keyframes sup-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sup-panel {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 90;
  width: 284px;
  background: var(--card);
  border: 1px solid var(--border-red);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 26px var(--red-glow);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.92) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2), opacity .18s ease;
}
.sup-panel.show { transform: none; opacity: 1; pointer-events: auto; }
.sup-panel[hidden] { display: none; }
.sup-head { padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.sup-head small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.sup-links { padding: 8px; }
.sup-links a, .sup-links button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sup-links a:hover, .sup-links button:hover { background: rgba(255, 39, 64, .1); }
.sup-links .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.sup-links small { margin-left: auto; color: var(--muted); font-size: 11px; }
@media (max-width: 560px) {
  .sup-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 22px; }
  .sup-panel { right: 14px; left: 14px; bottom: 74px; width: auto; }
}

/* ---------- i18n: language switcher + RTL ---------- */
.lang-sel {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.lang-sel:focus { outline: none; border-color: var(--red); }
[dir="rtl"] .content, [dir="rtl"] .landing { direction: rtl; text-align: right; }
[dir="rtl"] .sidebar {
  text-align: right;
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
  padding: 22px 22px 40px 14px;
}
[dir="rtl"] .content { margin-left: 0; margin-right: var(--sidebar-w); }
[dir="rtl"] .sidebar a { border-left: none; border-right: 2px solid transparent; }
[dir="rtl"] .sidebar a.active { border-right-color: var(--red); }
[dir="rtl"] .content ul, [dir="rtl"] .content ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .content h2::before { content: " ▸"; }
[dir="rtl"] .sup-links small { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sp-foot kbd { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .sup-panel { transform-origin: bottom left; }
[dir="rtl"] pre, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; text-align: left; }
[dir="rtl"] table { direction: rtl; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .dn-head button { margin-left: 0; margin-right: auto; }