/* ---------- Help Overlay / Onboarding ---------- */
body.help-open{ overflow:hidden; }
.help-overlay{
  position:fixed; inset:0; z-index:140;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
.help-overlay[hidden]{ display:none; }
.help-dialog{
  width:min(820px, 94vw);
  max-height:92vh;
  overflow:auto;
  background:var(--panel);
  color:var(--ink);
  border-radius:28px;
  border:1px solid color-mix(in oklab, var(--panel-border) 78%, transparent 22%);
  box-shadow:0 32px 80px rgba(15,23,42,.38);
  padding:34px 42px 42px;
}
.help-dialog h2{ margin:0 0 10px; font-size:26px; letter-spacing:.4px; }
.help-dialog h3{ margin:0 0 12px; font-size:20px; letter-spacing:.2px; }
.help-dialog h4{ margin:18px 0 10px; font-size:16px; letter-spacing:.15px; }
.help-dialog p{ margin:0 0 14px; line-height:1.72; font-size:15px; }
.help-dialog ul, .help-dialog ol{ margin:0 0 18px 22px; line-height:1.68; font-size:15px; }
.help-dialog li + li{ margin-top:8px; }
.help-dialog .lead{ font-size:15.5px; color:color-mix(in oklab, var(--ink) 88%, var(--muted) 12%); }
.help-hero{
  padding:24px 26px 26px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent-2) 48%, transparent 52%), color-mix(in oklab, var(--accent-3) 42%, var(--panel) 58%));
  border-radius:20px;
  border:1px solid color-mix(in oklab, var(--panel-border) 65%, transparent 35%);
  box-shadow:0 18px 42px rgba(15,23,42,.22);
  margin-bottom:24px;
}
.help-hero p{ margin-bottom:16px; }
.help-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.help-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  background:color-mix(in oklab, var(--panel) 40%, rgba(255,255,255,.88) 60%);
  color:color-mix(in oklab, var(--ink) 90%, var(--muted) 10%);
  font-weight:600;
  font-size:13px;
  letter-spacing:.3px;
  border:1px solid color-mix(in oklab, var(--panel-border) 72%, rgba(255,255,255,.55) 28%);
  box-shadow:0 6px 18px rgba(15,23,42,.18);
}
.help-pill svg{ width:16px; height:16px; }
.help-pill span{ display:inline-block; }
.help-toc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:14px;
  margin:-4px 0 26px;
  padding:10px 16px;
  background:color-mix(in oklab, var(--panel) 70%, rgba(148,163,184,.18) 30%);
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--panel-border) 68%, transparent 32%);
}
.help-toc span{ font-weight:700; color:color-mix(in oklab, var(--ink) 84%, var(--muted) 16%); margin-right:6px; }
.help-toc a{
  color:color-mix(in oklab, var(--accent-1) 70%, var(--ink) 30%);
  font-weight:600;
  text-decoration:none;
  padding:4px 10px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.help-toc a:hover,
.help-toc a:focus-visible{
  background:color-mix(in oklab, var(--accent-1) 20%, transparent 80%);
  color:color-mix(in oklab, var(--accent-1) 50%, var(--ink) 50%);
  outline:none;
}
.help-section{
  margin:0 0 28px;
  padding:22px 26px 24px;
  border-radius:18px;
  background:color-mix(in oklab, var(--panel) 82%, rgba(226,232,240,.45) 18%);
  border:1px solid color-mix(in oklab, var(--panel-border) 72%, transparent 28%);
  box-shadow:0 12px 32px rgba(15,23,42,.12);
}
.help-section.accent{
  background:color-mix(in oklab, var(--panel) 70%, rgba(236,233,252,.55) 30%);
}
.help-section ul,
.help-section ol{ margin-bottom:14px; }
.help-why{
  font-size:14px;
  color:color-mix(in oklab, var(--ink) 78%, var(--muted) 22%);
  padding:10px 14px;
  border-left:3px solid color-mix(in oklab, var(--accent-1) 65%, var(--accent-2) 35%);
  background:color-mix(in oklab, var(--panel) 65%, rgba(255,255,255,.6) 35%);
  border-radius:12px;
  margin:16px 0 6px;
}
.term-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  margin-top:16px;
}
.term-card{
  padding:16px 18px;
  border-radius:16px;
  background:color-mix(in oklab, var(--panel) 72%, rgba(148,163,184,.16) 28%);
  border:1px solid color-mix(in oklab, var(--panel-border) 68%, transparent 32%);
  box-shadow:0 8px 22px rgba(15,23,42,.1);
}
.term-card h4{ margin:0 0 8px; font-size:15px; letter-spacing:.12px; }
.term-card p{ margin:0; font-size:14px; line-height:1.62; }
.help-support{ margin:24px 0 0; text-align:center; }
.help-support-note{ margin-bottom:12px; font-size:14px; color:var(--muted); }
.help-support-link{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease; }
.help-support-link img{ display:block; height:42px; }
.help-support-link:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); }
.help-support-link:focus-visible{ outline:2px solid var(--ring); outline-offset:4px; }
.help-close-affix{
  position:sticky;
  top:8px;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:-20px -6px 18px;
  pointer-events:none;
}
.help-close,
.help-top{
  appearance:none;
  border:0;
  background:color-mix(in oklab, var(--panel) 72%, rgba(15,23,42,.12) 28%);
  color:color-mix(in oklab, var(--ink) 82%, var(--muted) 18%);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  box-shadow:0 12px 28px rgba(15,23,42,.16);
  transition:color .15s ease, background .15s ease, transform .15s ease;
  pointer-events:auto;
}
.help-close:hover,
.help-top:hover{
  color:var(--ink);
  background:color-mix(in oklab, var(--panel) 58%, rgba(255,255,255,.78) 42%);
  transform:translateY(-1px);
}
.help-close:focus-visible,
.help-top:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}
.help-top{
  font-size:24px;
  line-height:1;
}
.help-footer{ margin-top:18px; font-size:13px; color:var(--muted); }

kbd{
  display:inline-block;
  padding:2px 6px;
  border-radius:6px;
  background:color-mix(in oklab, var(--panel) 72%, var(--accent-2) 28%);
  border:1px solid color-mix(in oklab, var(--panel-border) 70%, var(--accent-2) 30%);
  font-size:12px;
  font-weight:700;
  color:var(--ink);
}

/* ---------- Docs ---------- */
.docs{ margin:18px 0 24px; background:rgba(255,255,255,.1); border-radius:14px; border:1px solid rgba(255,255,255,.24); }
.docs > summary{
  cursor:pointer; padding:12px 14px; font-weight:800; letter-spacing:.2px; list-style:none;
}
.docs[open] > summary{ border-bottom:1px solid rgba(255,255,255,.15); }
.docs-body{ padding:12px 14px 16px; }
.docs-body h3{ margin:12px 0 6px; }
.docs-body p, .docs-body li{ color:rgba(255,255,255,.92); }
.docs-body ul{ margin:6px 0 10px 18px; }
.docs-body ol{ margin:6px 0 10px 18px; }

/* ---------- Footer / Misc ---------- */
.footer{ color:color-mix(in oklab, var(--text) 70%, var(--muted) 30%); padding:30px 0; text-align:center; }
.spinner{
  display:inline-block; width:1em; height:1em; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; margin-right:.5em;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }