/* Link to an external CSS file */
/* <link rel="stylesheet" href="helpbox.css"> */
  .help-box { display:flex; align-items:center; gap:14px; background: var(--surface); padding: 10px 5vw; border-top:1px solid #2c2e34; border-bottom:1px solid #2c2e34; }
  .help-btn { background:#2c2e34; color:#fff; border:1px solid #3b3d45; padding:8px 12px; border-radius:8px; cursor:pointer; }
/*.help-btn { background: #000; color: #fff; border: none; border-radius: 5px; padding: 7px 15px; font-size: 1rem; cursor: pointer; font-weight: 600; margin-left:6px; } */
  .btn { color: #23e37a; text-decoration: none; font-weight: bold; display: flex; align-items: center; gap: 6px; }
  .btn:hover { text-decoration: underline; color: #fe8f22;}

  .help-popup {
  display:none; position:fixed; z-index:1002; left:50%; top:50%; transform:translate(-50%,-50%);
  width:90%; max-width:600px; max-height:80vh; background:#22242b; color:#fff; border-radius:11px;
  box-shadow:0 8px 32px #0009; padding:28px 24px 20px 24px; font-size:1.11rem; text-align:left;
  border:2px solid #A4D8D8;
}
.help-popup .help-close { background: none; border: none; color: #fff; font-size: 1.7rem; position: absolute; top: 10px; right: 18px; cursor:pointer;}
.help-popup .help-title { font-size:1.28rem; color:#ffa500; font-weight:bold; margin-bottom:12px; }
.help-popup .help-content { max-height: calc(80vh - 100px); overflow-y: auto; }
@media (max-width:600px) { .help-popup { min-width:0; padding:16px 8vw 18px 8vw; align-items:left; } }