/* ================================================================
   AI SEO & Marketing Manager — Premium Dark Theme v3
   Fix: Explicit dark colors everywhere (no transparent)
   Higher specificity with html body prefix
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── VARIABLES ────────────────────────────────────────────────── */
:root {
  --bg0: #020617;
  --bg1: #0b1120;
  --bg2: #0f172a;
  --bg3: #1a2540;
  --bg4: #1e293b;
  --bg5: #263044;
  --p6:  #7c3aed;
  --p5:  #8b5cf6;
  --p4:  #a78bfa;
  --p3:  #c4b5fd;
  --t0:  #f8fafc;
  --t1:  #e2e8f0;
  --t2:  #cbd5e1;
  --t3:  #94a3b8;
  --t4:  #64748b;
  --t5:  #475569;
  --brd: rgba(139,92,246,.15);
  --brd2:rgba(139,92,246,.25);
}

/* ── FOUNDATION ───────────────────────────────────────────────── */
html {
  background: var(--bg0) !important;
  color: var(--t1) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  color-scheme: dark !important;
}

body {
  background: var(--bg0) !important;
  color: var(--t1) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  min-height: 100vh !important;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 15% -5%,  rgba(124,58,237,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 110%, rgba(76,29,149,.18) 0%, transparent 60%);
}

/* Subtle grid */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(139,92,246,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.025) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* Root stays on top of pseudo elements */
#root { position: relative; z-index: 1; }

/* ── CORE BG CLASSES — explicit dark, no transparent ─────────── */

/* The key fix: use explicit colors, NEVER transparent */
html body .bg-white      { background-color: var(--bg2) !important; }
html body .bg-gray-50    { background-color: var(--bg0) !important; }
html body .bg-gray-100   { background-color: var(--bg4) !important; }
html body .bg-gray-200   { background-color: var(--bg5) !important; }
html body .bg-gray-300   { background-color: #334155  !important; }
html body .bg-gray-400   { background-color: #475569  !important; }
html body .bg-gray-600   { background-color: #475569  !important; }
html body .bg-gray-700   { background-color: #334155  !important; }
html body .bg-gray-800   { background-color: var(--bg2) !important; }
html body .bg-gray-900   { background-color: var(--bg0) !important; }

/* Purple variants */
html body .bg-purple-50  { background-color: rgba(124,58,237,.09) !important; }
html body .bg-purple-100 { background-color: rgba(124,58,237,.16) !important; }
html body .bg-purple-200 { background-color: rgba(124,58,237,.22) !important; }
html body .bg-purple-600 { background-color: var(--p6) !important; }
html body .bg-purple-700 { background-color: #6d28d9  !important; }

/* Blue → Purple */
html body .bg-blue-50    { background-color: rgba(124,58,237,.08) !important; }
html body .bg-blue-100   { background-color: rgba(124,58,237,.14) !important; }
html body .bg-blue-600   { background-color: var(--p6) !important; }
html body .bg-blue-700   { background-color: #6d28d9  !important; }

/* Status */
html body .bg-green-50   { background-color: rgba(22,163,74,.07) !important; }
html body .bg-green-100  { background-color: rgba(22,163,74,.13) !important; }
html body .bg-green-600  { background-color: #16a34a !important; }
html body .bg-red-50     { background-color: rgba(239,68,68,.07) !important; }
html body .bg-red-100    { background-color: rgba(239,68,68,.13) !important; }
html body .bg-red-600    { background-color: #dc2626 !important; }
html body .bg-yellow-50  { background-color: rgba(234,179,8,.06) !important; }
html body .bg-yellow-100 { background-color: rgba(234,179,8,.12) !important; }
html body .bg-yellow-500 { background-color: #ca8a04 !important; }

/* Opacity variants */
html body .bg-opacity-50 { opacity: .5 !important; }

/* ── LAYOUT ───────────────────────────────────────────────────── */

/* Full-height flex wrapper (SPA root) */
html body #root > div,
html body #root > div > div {
  background: transparent !important;
}

/* Top navigation bar */
html body header,
html body nav,
html body [class*="navbar"] {
  background-color: rgba(11,17,32,.95) !important;
  border-bottom: 1px solid var(--brd) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Sidebar */
html body aside {
  background-color: var(--bg1) !important;
  border-right: 1px solid var(--brd) !important;
}

/* Main content area */
html body main {
  background-color: transparent !important;
}

/* Generic content wrapper divs */
html body .min-h-screen {
  background-color: var(--bg0) !important;
}

/* ── CARDS — dark with subtle border ──────────────────────────── */

/* Any white/gray card with border */
html body .border.rounded-xl,
html body .border.rounded-lg,
html body .border.rounded-2xl {
  background-color: var(--bg2) !important;
  border-color: var(--brd) !important;
}

/* Shadow-based cards */
html body .shadow-sm:not(button):not(input),
html body .shadow:not(button):not(input),
html body .shadow-md:not(button):not(input),
html body .shadow-lg:not(button):not(input) {
  background-color: var(--bg2) !important;
  border: 1px solid var(--brd) !important;
}

/* Grid stat cards */
html body .grid .rounded-xl,
html body .grid .rounded-lg {
  background-color: var(--bg3) !important;
  border: 1px solid var(--brd) !important;
}

/* ── SIDEBAR ITEMS ────────────────────────────────────────────── */

html body aside a,
html body aside button,
html body aside li {
  color: var(--t3) !important;
  border-radius: 8px !important;
}

html body aside a:hover,
html body aside button:hover {
  background-color: rgba(124,58,237,.12) !important;
  color: var(--t1) !important;
}

/* Active item */
html body aside .bg-purple-100,
html body aside [class*="bg-purple-1"],
html body aside [class*="active"],
html body aside button[class*="bg-purple"] {
  background-color: rgba(124,58,237,.2) !important;
  color: var(--p3) !important;
  position: relative;
}

html body aside .bg-purple-100::before,
html body aside button[class*="bg-purple"]::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--p5);
  border-radius: 0 3px 3px 0;
}

html body aside .text-purple-700,
html body aside [class*="text-purple"] {
  color: var(--p3) !important;
}

/* Sidebar icon colors */
html body aside svg { color: var(--t4) !important; }
html body aside a:hover svg,
html body aside button:hover svg { color: var(--p4) !important; }
html body aside [class*="bg-purple"] svg { color: var(--p4) !important; }

/* ── TYPOGRAPHY ───────────────────────────────────────────────── */

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  color: var(--t0) !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: -.02em !important;
}

html body p, html body span:not([class*="bg-"]),
html body div:not([class*="bg-"]) {
  font-family: 'DM Sans', sans-serif !important;
}

html body .text-gray-900 { color: var(--t0) !important; }
html body .text-gray-800 { color: var(--t1) !important; }
html body .text-gray-700 { color: var(--t2) !important; }
html body .text-gray-600 { color: var(--t3) !important; }
html body .text-gray-500 { color: var(--t4) !important; }
html body .text-gray-400 { color: var(--t5) !important; }
html body .text-gray-300 { color: #334155  !important; }

html body .text-white    { color: var(--t0) !important; }

/* Blue → Purple */
html body .text-blue-600  { color: var(--p4) !important; }
html body .text-blue-700  { color: var(--p3) !important; }
html body .text-blue-800,
html body .text-blue-900  { color: var(--p3) !important; }
html body .text-indigo-600,
html body .text-indigo-700 { color: var(--p4) !important; }

/* Purple */
html body .text-purple-600 { color: var(--p5) !important; }
html body .text-purple-700 { color: var(--p4) !important; }
html body .text-purple-800,
html body .text-purple-900 { color: var(--p3) !important; }
html body .text-purple-100,
html body .text-purple-200,
html body .text-purple-300 { color: var(--p3) !important; }

/* Status */
html body .text-green-600, html body .text-green-700 { color: #4ade80 !important; }
html body .text-green-800, html body .text-green-900 { color: #86efac !important; }
html body .text-red-600,   html body .text-red-700   { color: #f87171 !important; }
html body .text-yellow-600,html body .text-yellow-700 { color: #fbbf24 !important; }
html body .text-yellow-800 { color: #fde68a !important; }

/* ── BORDERS ──────────────────────────────────────────────────── */

html body .border               { border-color: var(--brd)  !important; }
html body .border-gray-100,
html body .border-gray-200,
html body .border-gray-300      { border-color: var(--brd)  !important; }
html body .border-gray-400,
html body .border-gray-500      { border-color: var(--brd2) !important; }
html body .border-purple-200,
html body .border-purple-300    { border-color: var(--brd2) !important; }
html body .border-blue-200,
html body .border-blue-300      { border-color: var(--brd2) !important; }
html body .border-green-200     { border-color: rgba(34,197,94,.22) !important; }
html body .border-red-200       { border-color: rgba(239,68,68,.22)  !important; }
html body .border-yellow-200,
html body .border-yellow-500    { border-color: rgba(234,179,8,.22)  !important; }

html body hr,
html body .divide-y > * + *,
html body .divide-gray-200 > * + * { border-color: var(--brd) !important; }

/* ── INPUTS ───────────────────────────────────────────────────── */

html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]),
html body textarea,
html body select {
  background-color: var(--bg4) !important;
  border: 1px solid rgba(139,92,246,.22) !important;
  color: var(--t0) !important;
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 8px !important;
}

html body input:focus,
html body textarea:focus,
html body select:focus {
  outline: none !important;
  border-color: var(--p5) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.2) !important;
}

html body input::placeholder,
html body textarea::placeholder { color: var(--t5) !important; }

html body select option {
  background: var(--bg4) !important;
  color: var(--t0) !important;
}

/* ── BUTTONS ──────────────────────────────────────────────────── */

/* Purple primary */
html body button.bg-purple-600,
html body a.bg-purple-600,
html body button[class*="bg-purple-6"] {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.35) !important;
}

html body button.bg-purple-600:hover,
html body button.bg-purple-700:hover {
  background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
  box-shadow: 0 6px 20px rgba(124,58,237,.5) !important;
  transform: translateY(-1px) !important;
}

/* Blue → Purple */
html body button.bg-blue-600,
html body a.bg-blue-600,
html body button[class*="bg-blue-6"] {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.3) !important;
}

html body button.bg-green-600 { background-color: #16a34a !important; color: #fff !important; }
html body button.bg-red-600   { background-color: #dc2626 !important; color: #fff !important; }

/* Ghost/outline buttons */
html body button.bg-gray-100,
html body button.bg-gray-200,
html body button[class*="bg-gray-1"],
html body button[class*="bg-gray-2"] {
  background-color: rgba(255,255,255,.07) !important;
  border: 1px solid var(--brd) !important;
  color: var(--t2) !important;
}

html body button.bg-gray-100:hover,
html body button.bg-gray-200:hover {
  background-color: rgba(255,255,255,.12) !important;
  color: var(--t0) !important;
}

/* White border buttons */
html body button.border-gray-200,
html body button.border-gray-300,
html body button.border {
  background-color: rgba(255,255,255,.05) !important;
  border-color: var(--brd) !important;
  color: var(--t2) !important;
}

html body button.border:hover {
  background-color: rgba(255,255,255,.1) !important;
  color: var(--t0) !important;
}

html body .hover\:bg-purple-700:hover { background-color: #6d28d9 !important; }
html body .hover\:bg-blue-700:hover   { background-color: #6d28d9 !important; }
html body .hover\:bg-gray-100:hover   { background-color: rgba(255,255,255,.07) !important; }
html body .hover\:bg-gray-200:hover   { background-color: rgba(255,255,255,.1)  !important; }
html body .hover\:bg-green-700:hover  { background-color: #15803d !important; }
html body .hover\:bg-red-700:hover    { background-color: #b91c1c !important; }

html body button:disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* ── BADGES / PILLS ───────────────────────────────────────────── */

html body .bg-green-100[class*="text-green"],
html body .bg-green-100.text-green-800 {
  background-color: rgba(22,163,74,.12) !important;
  color: #86efac !important;
}

html body .bg-red-100[class*="text-red"],
html body .bg-red-100.text-red-800 {
  background-color: rgba(239,68,68,.12) !important;
  color: #fca5a5 !important;
}

html body .bg-yellow-100[class*="text-yellow"],
html body .bg-yellow-100.text-yellow-800 {
  background-color: rgba(234,179,8,.1) !important;
  color: #fde68a !important;
}

html body .bg-blue-100[class*="text-blue"],
html body .bg-purple-100[class*="text-purple"] {
  background-color: rgba(124,58,237,.15) !important;
  color: var(--p3) !important;
}

html body .bg-gray-100[class*="text-gray"] {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--t2) !important;
}

/* Admin badge top right */
html body header .bg-purple-100,
html body nav .bg-purple-100 {
  background-color: rgba(124,58,237,.2) !important;
  color: var(--p3) !important;
}

/* ── TABLES ───────────────────────────────────────────────────── */

html body table { border-collapse: collapse !important; width: 100% !important; }

html body thead,
html body thead tr { background-color: rgba(11,17,32,.9) !important; }

html body th {
  color: var(--t3) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--brd) !important;
  padding: 10px 14px !important;
  background-color: rgba(11,17,32,.8) !important;
}

html body td {
  color: var(--t1) !important;
  border-bottom: 1px solid rgba(139,92,246,.08) !important;
  padding: 10px 14px !important;
  background-color: transparent !important;
}

html body tr { background-color: transparent !important; }
html body tr:hover td { background-color: rgba(124,58,237,.05) !important; }
html body tbody tr:nth-child(even) td { background-color: rgba(15,23,42,.35) !important; }

/* ── HISTORY CARDS — explicit fix ─────────────────────────────── */

/* History items often use bg-white or bg-gray-50 with borders */
html body [class*="history"] .bg-white,
html body [class*="history"] .border.rounded-xl,
html body [class*="history"] .border.rounded-lg {
  background-color: var(--bg3) !important;
}

/* Any card-like div that uses violet/purple tint */
html body .bg-violet-50 { background-color: rgba(124,58,237,.09) !important; }
html body .bg-violet-100 { background-color: rgba(124,58,237,.15) !important; }

/* ── MODALS ───────────────────────────────────────────────────── */

html body .fixed.inset-0[class*="bg-black"],
html body .fixed.inset-0[class*="bg-opacity"],
html body [class*="overlay"] {
  background-color: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(4px) !important;
}

/* Any modal panel */
html body .fixed.inset-0 > div > div,
html body [role="dialog"],
html body [role="dialog"] > div {
  background-color: var(--bg2) !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.65) !important;
  color: var(--t1) !important;
}

/* cmpModal, genModal from index.html */
html body #cmpModalWrap > div,
html body #genModalWrap > div {
  background-color: var(--bg2) !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.65) !important;
  color: var(--t1) !important;
}

html body #genModalWrap textarea {
  background-color: var(--bg4) !important;
  color: var(--t1) !important;
  border-color: var(--brd) !important;
}

/* ── ALERTS ───────────────────────────────────────────────────── */

html body .bg-yellow-50.border-yellow-200 {
  background-color: rgba(234,179,8,.07) !important;
  border-color: rgba(234,179,8,.25) !important;
}
html body .bg-red-50[class*="border-red"] {
  background-color: rgba(239,68,68,.07) !important;
  border-color: rgba(239,68,68,.25) !important;
}
html body .bg-green-50[class*="border-green"] {
  background-color: rgba(22,163,74,.07) !important;
  border-color: rgba(22,163,74,.25) !important;
}
html body .bg-blue-50[class*="border-blue"],
html body .bg-purple-50[class*="border-purple"] {
  background-color: rgba(124,58,237,.07) !important;
  border-color: rgba(139,92,246,.22) !important;
}

/* ── LOGIN PAGE ───────────────────────────────────────────────── */

html body .min-h-screen.flex.items-center.justify-center {
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(124,58,237,.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 110%, rgba(76,29,149,.24) 0%, transparent 60%),
    var(--bg0) !important;
}

html body .min-h-screen.flex.items-center.justify-center .bg-white,
html body .min-h-screen.flex.items-center.justify-center [class*="shadow"] {
  background: rgba(15,23,42,.88) !important;
  border: 1px solid rgba(139,92,246,.22) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.1) inset !important;
  backdrop-filter: blur(20px) !important;
}

html body .min-h-screen h1,
html body .min-h-screen h2 {
  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 45%, #f0abfc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── OZIT CUSTOM COMPONENTS ───────────────────────────────────── */

/* Override the white background set by injected style from custom-tools.js */
.ozit-modal {
  background: var(--bg2) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.65) !important;
  color: var(--t1) !important;
}

.ozit-modal-overlay {
  background: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(6px) !important;
}

.ozit-outputs-box {
  background: rgba(15,23,42,.5) !important;
  border: 1px dashed rgba(139,92,246,.2) !important;
  border-radius: 12px !important;
}

.ozit-outputs-title { color: var(--t0) !important; }

.ozit-output-item {
  background: var(--bg4) !important;
  border: 1px solid rgba(139,92,246,.12) !important;
  border-radius: 8px !important;
}

.ozit-output-label { color: var(--t3) !important; }

.ozit-output-ta {
  background: var(--bg4) !important;
  color: var(--t1) !important;
  border: 1px solid rgba(139,92,246,.12) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
}

.ozit-admin-panel {
  background: var(--bg2) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  border-radius: 14px !important;
}

.ozit-admin-title { color: var(--t0) !important; }

.ozit-input {
  background: var(--bg4) !important;
  border: 1px solid rgba(139,92,246,.22) !important;
  color: var(--t0) !important;
}

.ozit-input:focus {
  border-color: var(--p5) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.2) !important;
}

.ozit-tabs { border-bottom: 1px solid rgba(139,92,246,.15) !important; }

.ozit-tab { color: var(--t4) !important; background: none !important; border: none !important; }
.ozit-tab:hover { color: var(--t2) !important; }
.ozit-tab.active { color: var(--p4) !important; border-bottom-color: var(--p5) !important; }

.ozit-type-btn {
  background: var(--bg4) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  color: var(--t4) !important;
}
.ozit-type-btn.active {
  background: var(--p6) !important;
  border-color: var(--p6) !important;
  color: #fff !important;
}

.ozit-checkbox-row { color: var(--t2) !important; }
.ozit-label { color: var(--t3) !important; font-size: 12px !important; font-weight: 500 !important; }

.ozit-field label { color: var(--t3) !important; }

/* Buttons inside ozit modal */
.ozit-btn.ozit-btn-purple {
  background: linear-gradient(135deg, var(--p6), var(--p5)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(124,58,237,.35) !important;
}
.ozit-btn.ozit-btn-outline {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--brd) !important;
  color: var(--t2) !important;
}

/* ozit toast */
.ozit-toast { font-family: 'DM Sans', sans-serif !important; }

/* ── SVGs ─────────────────────────────────────────────────────── */

html body aside svg path,
html body aside svg circle,
html body aside svg line,
html body aside svg polyline,
html body aside svg rect:not([fill]) {
  stroke: var(--t4) !important;
}

html body aside a:hover svg path,
html body aside button:hover svg path {
  stroke: var(--p4) !important;
}

html body aside [class*="bg-purple"] svg path,
html body aside [class*="text-purple"] svg path {
  stroke: var(--p4) !important;
}

/* Chart SVG backgrounds */
html body svg rect[fill="white"],
html body svg rect[fill="#ffffff"],
html body svg rect[fill="#fff"] { fill: var(--bg4) !important; }

html body svg text[fill="#6B7280"],
html body svg text[fill="#374151"] { fill: var(--t4) !important; }

html body svg line[stroke="#e5e7eb"],
html body svg line[stroke="#E5E7EB"] { stroke: var(--brd) !important; }

/* ── CODE ─────────────────────────────────────────────────────── */

html body code, html body pre, html body kbd,
html body [class*="font-mono"] {
  font-family: 'DM Mono', monospace !important;
  background: rgba(15,23,42,.6) !important;
  color: var(--p3) !important;
  border-radius: 5px !important;
}

/* ── SCROLLBAR ────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.7); }

/* ── SHADOWS ──────────────────────────────────────────────────── */

html body .shadow-sm { box-shadow: 0 1px 6px rgba(0,0,0,.45) !important; }
html body .shadow    { box-shadow: 0 2px 12px rgba(0,0,0,.45) !important; }
html body .shadow-md { box-shadow: 0 4px 20px rgba(0,0,0,.5)  !important; }
html body .shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,.55) !important; }
html body .shadow-xl { box-shadow: 0 16px 48px rgba(0,0,0,.6) !important; }

/* ── FOCUS ────────────────────────────────────────────────────── */

html body *:focus-visible {
  outline: 2px solid var(--p5) !important;
  outline-offset: 2px !important;
}

/* ── LINKS ────────────────────────────────────────────────────── */

html body a:not([class*="bg-"]):not([class*="btn"]) {
  color: var(--p4) !important;
}
html body a:not([class*="bg-"]):hover { color: var(--p3) !important; }

/* ── TRANSITIONS ──────────────────────────────────────────────── */

html body button, html body a,
html body input, html body select, html body textarea {
  transition: all .15s ease !important;
}

/* ── GLOBAL MODEL PANEL (from index.html script) ──────────────── */

#ozit-global-models {
  background: var(--bg2) !important;
  border: 1px solid var(--brd) !important;
  color: var(--t1) !important;
}

#ozit-global-models h3, #ozit-global-models h4 { color: var(--t0) !important; }

#ozit-gm-anthropic, #ozit-gm-openai,
#ozit-gm-functions select {
  background: var(--bg4) !important;
  border: 1px solid rgba(139,92,246,.22) !important;
  color: var(--t0) !important;
}

/* ── PRODUCT IMAGE PLACEHOLDER ────────────────────────────────── */

html body img[alt] { border-radius: 6px !important; }

/* ── SIDEBAR BADGE (Produkty count) ───────────────────────────── */

[data-sidebar-products-count] {
  background: rgba(124,58,237,.25) !important;
  color: var(--p3) !important;
}

/* ── MISC ─────────────────────────────────────────────────────── */

/* Dropdown menus */
html body [role="listbox"],
html body [role="menu"],
html body [class*="dropdown"] {
  background: var(--bg3) !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}

html body [role="option"],
html body [class*="dropdown"] li,
html body [class*="dropdown"] a {
  color: var(--t1) !important;
}

html body [role="option"]:hover { background: rgba(124,58,237,.12) !important; }

/* Tooltips */
html body [class*="tooltip"] {
  background: var(--bg3) !important;
  color: var(--t0) !important;
  border: 1px solid var(--brd) !important;
}

/* Horizontal rule */
html body hr { border-color: var(--brd) !important; }

/* Label tag */
html body label { color: var(--t3) !important; }