astro-island,astro-slot,astro-static-slot{display:contents}

  /*
   * All tokens here are real Fern CSS custom properties confirmed from the
   * live developer.shipbob.com stylesheet. No fallbacks needed for the core
   * ones — they are always present on every Fern page.
   *
   * Key variables used:
   *   --accent-9        Primary blue (#175cff light / #3b7fff dark)
   *   --accent-a3       Translucent accent for focus rings
   *   --accent-3        Subtle accent tint for active indicators
   *   --background      Page background (rgba(249,250,251,1) / rgba(26,31,46,1))
   *   --grayscale-a3    Subtle surface fill (inputs, cards)
   *   --grayscale-a4    Slightly raised surfaces (hover, active)
   *   --grayscale-a5    Default border color
   *   --grayscale-11    Muted / secondary text
   *   --grayscale-12    Strong / heading text
   *   --font-body       Fern's body font stack
   *   --font-code       Fern's monospace font stack
   *   --radius          Fern's base radius unit (0.25rem = 4px)
   */
  .qb-wrapper {
    padding: 1.25rem;
    border: 1px solid var(--grayscale-a5);
    border-radius: calc(var(--radius) * 2);
    background: var(--grayscale-a3);
    max-width: 48rem;
    margin: 0 auto;
    font-family: var(--font-body);
    box-sizing: border-box;
  }

  .qb-stack > * + * { margin-top: 1.25rem; }

  /* ── Environment toggle ── */
  .qb-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: 600;
    color: var(--grayscale-12);
  }
  .qb-btn-group { display: flex; gap: 0.25rem; }
  .qb-env-btn {
    padding: 0.375rem 0.75rem;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    border: 1px solid var(--grayscale-a5);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    background: var(--grayscale-a3);
    color: var(--grayscale-12);
    font-family: var(--font-body);
  }
  .qb-env-btn:hover {
    border-color: var(--accent-9);
    color: var(--accent-9);
    background: var(--accent-3);
  }
  .qb-env-btn.active {
    background: var(--accent-9);
    border-color: var(--accent-9);
    color: #fff;
  }

  /* ── Labels ── */
  .qb-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--grayscale-12);
    margin-bottom: 0.35rem;
  }
  .qb-label-sm {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--grayscale-12);
    margin-bottom: 0.25rem;
  }

  /* ── Inputs & selects ── */
  .qb-input, .qb-select {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--grayscale-a5);
    padding: 0.4375rem 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    background: var(--background);
    color: var(--grayscale-12);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
    box-sizing: border-box;
    outline: none;
  }
  .qb-input:hover, .qb-select:hover { border-color: var(--grayscale-a5); }
  .qb-input:focus, .qb-select:focus {
    border-color: var(--accent-9);
    box-shadow: 0 0 0 3px var(--accent-a3);
  }
  .qb-input.error { border-color: var(--red-9, #e5484d); }
  .qb-input.error:focus {
    box-shadow: 0 0 0 3px var(--red-a3, rgba(229,72,77,0.15));
  }
  .qb-select { cursor: pointer; }

  /* ── Helper text ── */
  .qb-hint {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--grayscale-11);
    margin-top: 0.25rem;
  }
  .qb-hint-italic {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--grayscale-11);
    margin-top: 0.25rem;
    font-style: italic;
  }
  .qb-error-msg {
    font-size: var(--text-xs);
    color: var(--red-11, #ce2c31);
    margin-top: 0.25rem;
  }
  .dark .qb-error-msg { color: var(--red-11, #ff6369); }

  /* ── Advanced settings disclosure ── */
  .qb-details { margin-top: 1rem; }
  .qb-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--grayscale-12);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.15s;
  }
  .qb-summary:hover { color: var(--accent-9); }
  .qb-summary::-webkit-details-marker { display: none; }
  .qb-chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--grayscale-11);
    transition: transform 0.2s var(--ease-shift, cubic-bezier(.16,1,.3,1));
    flex-shrink: 0;
  }
  details[open] .qb-chevron { transform: rotate(180deg); }
  .qb-details-body { margin-top: 0.75rem; }
  .qb-details-body > * + * { margin-top: 1rem; }

  /* ── Checkboxes ── */
  .qb-checkbox-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
  .qb-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: calc(var(--radius) * 0.75);
    cursor: pointer;
    accent-color: var(--accent-9);
    flex-shrink: 0;
  }
  .qb-checkbox-label {
    font-size: var(--text-xs);
    color: var(--grayscale-12);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s;
  }
  .qb-checkbox-label:hover { color: var(--accent-9); }

  /* ── Scopes grid ── */
  .qb-scopes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--grayscale-a3);
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    max-height: 16rem;
    overflow-y: auto;
  }
  @media (max-width: 640px) { .qb-scopes-grid { grid-template-columns: 1fr; } }

  /* ── Generated URL output ── */
  .qb-result { margin-top: 1.5rem; }
  .qb-result > * + * { margin-top: 0.75rem; }
  .qb-pre {
    padding: 0.75rem;
    background: var(--grayscale-a3);
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-family: var(--font-code);
    overflow-x: auto;
    color: var(--grayscale-12);
    line-height: 1.625;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
  }

  /* ── Action buttons ── */
  .qb-action-row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
  .qb-btn-primary {
    padding: 0.4375rem 0.875rem;
    background: var(--accent-9);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: var(--font-body);
  }
  .qb-btn-primary:hover:not(:disabled) { opacity: 0.88; }
  .qb-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
  .qb-btn-secondary {
    padding: 0.4375rem 0.875rem;
    background: var(--grayscale-a3);
    color: var(--grayscale-12);
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: var(--font-body);
  }
  .qb-btn-secondary:hover { border-color: var(--accent-9); color: var(--accent-9); background: var(--accent-3); }