.stbc-wrapper {
      --stbc-primary: #007bff;
      --stbc-primary-hover: #0056b3;
      --stbc-background: #ffffff;
      --stbc-text: #333333;
      --stbc-border: #dddddd;
      --stbc-success: #28a745;
      --stbc-error: #dc3545;
      --stbc-info-bg: #e7f3fe;
      --stbc-output-bg: #e9ecef;
      --stbc-shadow: rgba(0, 0, 0, 0.1);
      
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      line-height: 1.6;
      color: var(--stbc-text);
      width: 100%;
      max-width: 800px;
      margin: 2em auto;
      padding: 1.5em;
      background: var(--stbc-background);
      border-radius: 8px;
      box-shadow: 0 2px 15px var(--stbc-shadow);
    }

    .stbc-wrapper * {
      box-sizing: border-box;
    }

    .stbc-title {
  /* Example using a common, clean Google Font - ensure you import it! */
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.9em;
  color: var(--stbc-primary);
  margin: 0 0 1em;
  text-align: center;
  font-weight: 500; /* Medium weight - not too bold, not too light */
  letter-spacing: 0.015em;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased; /* Smoother text rendering on WebKit browsers */
  -moz-osx-font-smoothing: grayscale; /* Smoother text rendering on Firefox/MacOS */
}
    .stbc-info {
      font-size: 0.9em;
      color: var(--stbc-text);
      background: var(--stbc-info-bg);
      border-left: 4px solid var(--stbc-primary);
      padding: 1em;
      margin-bottom: 1.5em;
      border-radius: 4px;
    }

    .stbc-label {
      display: block;
      font-weight: 600;
      margin-bottom: 0.5em;
    }

    .stbc-textarea {
      width: 100%;
      min-height: 200px;
      padding: 1em;
      margin-bottom: 1em;
      border: 1px solid var(--stbc-border);
      border-radius: 5px;
      font-size: 1em;
      resize: vertical;
      font-family: inherit;
    }

    .stbc-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75em 1.5em;
      font-size: 1em;
      font-weight: 600;
      color: white;
      background: var(--stbc-primary);
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .stbc-button:hover {
      background: var(--stbc-primary-hover);
    }

    .stbc-button svg {
      margin-right: 0.5em;
    }

    .stbc-controls {
      display: flex;
      gap: 1em;
      margin-bottom: 1.5em;
      flex-wrap: wrap;
    }

    .stbc-output {
      margin-top: 1.5em;
    }

    .stbc-tabs {
      border-bottom: 1px solid var(--stbc-border);
      margin-bottom: 1em;
      display: flex;
      gap: 0.5em;
    }

    .stbc-tab {
      padding: 0.75em 1.5em;
      border: none;
      background: none;
      cursor: pointer;
      font-weight: 600;
      color: var(--stbc-text);
      opacity: 0.7;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
    }

    .stbc-tab.active {
      opacity: 1;
      border-bottom-color: var(--stbc-primary);
      color: var(--stbc-primary);
    }

    .stbc-tab-content {
      display: none;
    }

    .stbc-tab-content.active {
      display: block;
    }

    .stbc-output-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1em;
      flex-wrap: wrap;
      gap: 1em;
    }

    .stbc-output-title h2 {
      margin: 0;
      font-size: 1.2em;
    }

    .stbc-output-content {
      background: var(--stbc-output-bg);
      padding: 1em;
      border: 1px solid var(--stbc-border);
      border-radius: 5px;
      white-space: pre-wrap;
      word-wrap: break-word;
      min-height: 150px;
      font-family: monospace;
      font-size: 0.95em;
    }

    .stbc-preview-content {
      background: white;
      padding: 1em;
      border: 1px solid var(--stbc-border);
      border-radius: 5px;
      min-height: 150px;
    }

    .stbc-preview-content blockquote {
      margin: 1em 0;
      padding: 1em;
      border-left: 4px solid var(--stbc-primary);
      background: var(--stbc-info-bg);
    }

    .stbc-copy-button {
      padding: 0.5em 1em;
      font-size: 0.9em;
      background: transparent;
      border: 1px solid var(--stbc-primary);
      color: var(--stbc-primary);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .stbc-copy-button:hover {
      background: var(--stbc-primary);
      color: white;
    }

    .stbc-message {
      padding: 0.75em;
      margin: 1em 0;
      border-radius: 4px;
      display: none;
    }

    .stbc-message.success {
      display: block;
      background: #d4edda;
      color: var(--stbc-success);
      border: 1px solid #c3e6cb;
    }

    .stbc-message.error {
      display: block;
      background: #f8d7da;
      color: var(--stbc-error);
      border: 1px solid #f5c6cb;
    }

    @media (max-width: 600px) {
      .stbc-wrapper {
        padding: 1em;
        margin: 1em auto;
      }

      .stbc-controls {
        flex-direction: column;
      }

      .stbc-button {
        width: 100%;
      }

      .stbc-output-title {
        flex-direction: column;
        align-items: flex-start;
      }

      .stbc-copy-button {
        width: 100%;
      }
    }