GEOPro.icon('edit') // 16px default
GEOPro.icon('edit', { size: 24 }) // custom size
GEOPro.icon('sun', { size: 20, color: '#d97706' }) // fill-mode icon + color

GEOPro.button({ label: 'Action', icon: 'enhance', accent: 'gold', size: 'xs' })
// sizes: xs | sm | md | md-lg | lg | xl
// variants: filled | outline | pure-outline | ghost

GEOPro.iconButton({ icon: 'edit', accent: 'sky', title: 'Edit' })
GEOPro.iconButton({ icon: 'delete', accent: 'slate', hoverAccent: 'red', title: 'Delete' })

GEOPro.actionGroup([
  { icon: 'enhance', accent: 'gold', title: 'Enhance' },
  { icon: 'edit', accent: 'sky', title: 'Edit' },
  { icon: 'eye', accent: 'teal', title: 'View' },
  { icon: 'delete', accent: 'slate', hoverAccent: 'red', title: 'Delete' }
])

GEOPro.badge({ label: 'Recommended', accent: 'gold' })
GEOPro.badge({ label: 'New', accent: 'emerald', size: 'xs' })

<span data-geopro-icon="globe" data-size="20" data-color="#0ea5e9"></span>
<span data-geopro-button data-label="Save" data-icon="check" data-accent="emerald"></span>
<span data-geopro-icon-btn data-icon="delete" data-accent="slate" data-hover-accent="red"></span>

// Re-scan after dynamic content:
GEOPro.UI.init()

<button class="db-tab tab-active">
  <span data-geopro-icon="building" data-size="16"></span>
  <span>Company</span>
</button>

Active tabs follow the filled accent button light/dark rule:
• Light bg: color: #0f172a; border: rgba(30,41,59,0.2)
• Dark bg: color: #ffffff; border: rgba(255,255,255,0.25)
• Icons inherit text color via currentColor

<button class="db-subtab active">Overview</button>
<button class="db-subtab">Scans</button>

Active state: tinted accent bg + accent border via --tab-accent-light and --tab-accent.
Used for analytics sub-tabs, install platform tabs, upload platform tabs, and API Usage/Performance sub-tabs.

Tab accent (CSS var):
.tab-accent-header { border-left: 3px solid var(--tab-accent); padding-left: 0.75rem; }
.tab-accent-border-l { border-left: 3px solid var(--tab-accent); }

Rainbow (border-image):
.rainbow-border-l {
  border-style: solid;
  border-width: 0 0 0 3px;
  border-image: linear-gradient(to bottom, #FF0000, #FF8800, #FFDD00, #00CC44, #0088FF, #AA00FF) 1;
  padding-left: 0.75rem;
}

Rainbow item (background-image):
.rainbow-item {
  background-image: linear-gradient(to bottom, #FF0000, #FF8800, #FFDD00, #00CC44, #0088FF, #AA00FF);
  background-size: 3px 100%;
  background-position: left center;
  background-repeat: no-repeat;
  background-origin: border-box;
}

Tab accent item (background-image):
.tab-accent-item {
  background-image: linear-gradient(var(--tab-accent), var(--tab-accent));
  /* same size/position/repeat/origin as .rainbow-item */
}

Rules:
• Tab accent border = standard modules (Company, Install, AI Visibility, API Usage, Token Usage, Recommendations)
• Rainbow border = AI-enhanceable modules (Products, Content, FAQs, Blogs, GEO Files, Schemas)
• Pink (#ec4899) and Lime (#84cc16) = progress bars only

<button class="w-full bg-slate-50 dark:bg-slate-500/30 px-4 py-3 flex items-center justify-between hover:bg-slate-100 dark:hover:bg-slate-700/50 transition cursor-pointer">
  ...icon + heading + chevron...
</button>

Full-width, bg-slate-50 background. Hover: bg-slate-100 (light) / bg-slate-700/50 (dark).
Contains icon + heading text + chevron. NOT a db-btn.

<button class="db-btn db-btn-xs text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300">Refresh</button>
<button class="db-btn db-btn-xs text-slate-600 dark:text-slate-400 hover:underline">Copy</button>

No background, no border. db-btn db-btn-xs provides consistent sizing (gap, padding, font-size).
Color: text-slate-500 default, hover:text-slate-700 on hover.

// Active page
<button class="db-btn db-btn-sm w-8 h-8 justify-center bg-amber-500 text-slate-900 border border-amber-600/20">2</button>

// Inactive page
<button class="db-btn db-btn-sm w-8 h-8 justify-center border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300">1</button>

Modal header: background: linear-gradient(to right, #F9A832, #e09520) (Gold gradient)
Header text: #0f172a (dark on Gold)
Primary CTA: background: #F9A832; color: #0f172a (Gold filled)
Enterprise CTA: background: #ED3C80; color: #ffffff (Pink filled)
RECOMMENDED badge: background: #ED3C80; color: #ffffff (Pink filled)
Close button: color: rgba(15,23,42,0.7) (dark text on Gold bg)

Overlay bg: rgba(249,168,50,0.12) + backdrop-filter: blur(8px)
CTA button: Gold filled (#F9A832 bg, #0f172a text)

.file-card-disabled::after {
  background: rgba(15,23,42,0.75);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.5);
  font-size: 0.7rem; font-weight: 600;
  content: "Upgrade Required";
}

Dark bg overlay → white text + white/50 border (follows universal dark-bg rule).

Color thresholds (inline styles, purge-safe):
  Green #10b981 — >50% remaining
  Amber #f59e0b — 20-50% remaining
  Red #ef4444 — <20% remaining
  Gray #9ca3af — 0 tokens (depleted)

Free Setup badge shown when setup_complete=0. Click navigates to Usage tab.

Gated buttons: opacity: 0.45; cursor: not-allowed; pointer-events: none
Prepend lock icon (12px, #9ca3af) + tooltip with cost/balance info.
applyTokenGating() runs after every loadTokenBalance() call.
Skipped entirely during free setup (setup_complete=0).