#helpModal .modal-card {
      width: min(1180px, calc(100vw - 32px));
      max-height: calc(100vh - 24px);
      overflow: auto;
      padding: 16px 18px;
    }

    #helpModal .modal-head {
      margin-bottom: 10px;
    }

    #helpModal .help-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    #helpModal .help-title svg,
    #helpModal .help-section-title svg,
    #helpModal .help-control-icon {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #helpModal .help-intro-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 8px;
    }

    #helpModal .help-info-card {
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-2);
    }

    #helpModal .help-section-title {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0 0 5px;
      font-size: 13px;
      font-weight: 750;
    }

    #helpModal .help-info-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    #helpModal .help-expand-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 3px 0 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      user-select: none;
    }

    #helpModal .help-expand-hint svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #helpModal .help-groups {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      align-items: start;
    }

    #helpModal .help-group {
      min-width: 0;
      align-self: start;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
    }

    #helpModal .help-group summary {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 10px;
      cursor: pointer;
      user-select: none;
      list-style: none;
      font-size: 13px;
      font-weight: 750;
    }

    #helpModal .help-group summary::-webkit-details-marker {
      display: none;
    }

    #helpModal .help-group summary::before {
      content: "+";
      width: 19px;
      height: 19px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--border-strong);
      border-radius: 5px;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
    }

    #helpModal .help-group[open] summary::before {
      content: "−";
    }

    #helpModal .help-group[open] summary {
      border-bottom: 1px solid var(--border);
    }

    #helpModal .help-controls {
      display: grid;
      padding: 5px 9px 8px;
    }

    #helpModal .help-control {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 7px;
      align-items: start;
      padding: 5px 1px;
    }

    #helpModal .help-control + .help-control {
      border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    }

    #helpModal .help-control-copy {
      min-width: 0;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.32;
    }

    #helpModal .help-control-copy strong {
      color: var(--text);
      font-weight: 750;
    }

    #helpModal .help-mini-note {
      display: block;
      margin-top: 3px;
    }

    @media (max-width: 900px) {
      #helpModal .modal-card {
        overflow: auto;
      }

      #helpModal .help-intro-grid,
      #helpModal .help-groups {
        grid-template-columns: 1fr;
      }
    }