@layer components {
  [data-variant], .btn {
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 500;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  }

  :where(button, input, textarea, select, a):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  [data-variant="default"], .btn:not(.btn-primary):not(.btn-cyan):not(.btn-red) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
  }

  [data-variant="outline"], .btn.btn-cyan, .btn.btn-sm:not(.btn-primary):not(.btn-red) {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
  }

  [data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
  [data-variant="ghost"] { background: transparent; color: var(--foreground); }
  [data-variant="primary"], .btn.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
  [data-variant="destructive"], .btn.btn-red { background: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); }
  [data-variant]:hover, .btn:hover { filter: brightness(.96); }
  [data-variant="ghost"]:hover, [data-variant="outline"]:hover { background: var(--accent); filter: none; }
  [disabled], :disabled { cursor: not-allowed; opacity: .5; }

  .panel, .schema-panel, .editor-panel, .faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  input, textarea, select {
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    color: var(--foreground);
  }

  .tabs { background: var(--muted); border-bottom-color: var(--border); }
  .tab { color: var(--muted-foreground); }
  .tab.active { color: var(--foreground); border-bottom-color: var(--foreground); }
  table { border-color: var(--border); }
  th { background: var(--muted); color: var(--muted-foreground); }
  td { border-color: var(--border); }
}