/* Help page needs its own scrolling; the main app stylesheet disables body scroll */
html{ height:auto; }
body{ height:auto; overflow:auto; }

/* Layout */
.helpWrap{ max-width:1100px; margin:18px auto; padding:0 16px 28px; }
.helpCard{ border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); border-radius:18px; padding:16px; }

/* Title row */
.helpTitleRow{
  display:flex;
  align-items:center;
  gap:12px;
}
.helpLogo{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:inline-block;
}
.helpH1{ margin:0; font-size:22px; font-weight:900; letter-spacing:0.2px; }
.helpSub{ margin:6px 0 0 0; color:rgba(243,246,255,0.78); font-size:13px; line-height:1.45; }

/* Sections */
.helpSection{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.10); }
.helpSection h2{
  margin:0 0 8px 0;
  font-size:16px;
  font-weight:900;
  color:rgba(212,175,55,0.95); /* gold */
  scroll-margin-top: 18px; /* nicer when jumping to anchors */
}
.helpSection p, .helpSection li{ color:rgba(243,246,255,0.86); line-height:1.55; font-size:14px; }
.helpSection ul{ margin:8px 0 0 18px; padding:0; }

/* Notes */
.helpNote{
  margin-top:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  color:rgba(243,246,255,0.86);
  font-size:13px;
  line-height:1.55;
}

/* Inline bits */
.kbd{
  display:inline-block;
  padding:2px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  font-weight:800;
  font-size:12px;
  letter-spacing:0.1px;
  font-variant-numeric:tabular-nums;
}
.smallPrint{ margin-top:14px; color:rgba(243,246,255,0.70); font-size:12px; line-height:1.55; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(212,175,55,0.45);
  background:rgba(212,175,55,0.15);
  width:fit-content;
  font-size:12px; font-weight:900; color:rgba(243,246,255,0.95);
  margin-top:8px;
}

/* Contents menu */
.helpTOC{
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  border-radius:16px;
  padding:10px 12px;
}
.helpTOC summary{
  cursor:pointer;
  list-style:none;
  font-weight:900;
  color:rgba(243,246,255,0.92);
  user-select:none;
}
.helpTOC summary::-webkit-details-marker{ display:none; }
.helpTOCSub{
  margin-top:8px;
  color:rgba(243,246,255,0.72);
  font-size:12px;
  line-height:1.45;
}
.helpTOCGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 14px;
}
.helpTOCGrid a{
  color:rgba(243,246,255,0.88);
  text-decoration:none;
  font-size:13px;
  line-height:1.35;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.10);
}
.helpTOCGrid a:hover{
  border-color:rgba(212,175,55,0.30);
  background:rgba(212,175,55,0.10);
}

/* Optional UI bits (kept for future) */
.ghostBtn{
  position:absolute;
  top:8px;
  left:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:rgba(243,246,255,0.92);
  padding:6px 10px;
  border-radius:12px;
  font-weight:900;
  letter-spacing:0.1px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.ghostBtn:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.20); }
.svgIcon{ width:18px; height:18px; }