body {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--primary, var(--bg));
  transition: background-color 0.3s ease, background-image 0.3s ease;
  background-image: var(--custom-bg);
}

.sidebar {
  background-color: var(--sidebar-bg);
  transition: background-color 0.3s ease, background-image 0.3s ease;
}

:root.theme-dark,
html.theme-dark {
  --bg: #0f0f18 !important;
  --primary: #0f0f18 !important;
  --secondary: #0e0e1a !important;
  --accent: #0099ff !important;
  --accent-glow: rgba(0, 153, 255, 0.3) !important;
  --accent-soft: rgba(0, 153, 255, 0.1) !important;
  --searchbar: #14141e !important;
  --iconbg: #1c1c28 !important;
  --sidebar-bg: #0b0b12 !important;
  --topbar-bg: #0b0b12 !important;
  --card-bg: #14141e !important;
  --card-hover: #1c1c28 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(255,255,255,0.07) !important;
}

:root.theme-amoled,
html.theme-amoled {
  --bg: #111111 !important;
  --primary: #111111 !important;
  --secondary: #1a1a1a !important;
  --accent: #ffffff !important;
  --accent-glow: rgba(255,255,255,0.15) !important;
  --accent-soft: rgba(255,255,255,0.06) !important;
  --searchbar: #1a1a1a !important;
  --iconbg: #222222 !important;
  --sidebar-bg: #0d0d0d !important;
  --topbar-bg: #0d0d0d !important;
  --card-bg: #1a1a1a !important;
  --card-hover: #222222 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.65) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(255,255,255,0.08) !important;
}

:root.theme-void,
html.theme-void {
  --bg: #000000 !important;
  --primary: #000000 !important;
  --secondary: #0a0a0a !important;
  --accent: #888888 !important;
  --accent-glow: rgba(136,136,136,0.2) !important;
  --accent-soft: rgba(136,136,136,0.08) !important;
  --searchbar: #0a0a0a !important;
  --iconbg: #111111 !important;
  --sidebar-bg: #000000 !important;
  --topbar-bg: #000000 !important;
  --card-bg: #0a0a0a !important;
  --card-hover: #111111 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.65) !important;
  --font-muted: rgba(255,255,255,0.35) !important;
  --border: rgba(255,255,255,0.06) !important;
}

:root.theme-ocean,
html.theme-ocean {
  --bg: #0d1117 !important;
  --primary: #0d1117 !important;
  --secondary: #161b22 !important;
  --accent: #1f6feb !important;
  --accent-glow: rgba(31,111,235,0.3) !important;
  --accent-soft: rgba(31,111,235,0.1) !important;
  --searchbar: #161b22 !important;
  --iconbg: #21262d !important;
  --sidebar-bg: #161b22 !important;
  --topbar-bg: #161b22 !important;
  --card-bg: #161b22 !important;
  --card-hover: #21262d !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(255,255,255,0.08) !important;
}

:root.theme-lavendar,
html.theme-lavendar {
  --bg: #1a1428 !important;
  --primary: #1a1428 !important;
  --secondary: #221a34 !important;
  --accent: #c4b5fd !important;
  --accent-glow: rgba(196,181,253,0.3) !important;
  --accent-soft: rgba(196,181,253,0.1) !important;
  --searchbar: #221a34 !important;
  --iconbg: #2d2244 !important;
  --sidebar-bg: #150f22 !important;
  --topbar-bg: #150f22 !important;
  --card-bg: #221a34 !important;
  --card-hover: #2d2244 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(196,181,253,0.1) !important;
}

:root.theme-midnight,
html.theme-midnight {
  --bg: #0c0c1d !important;
  --primary: #0c0c1d !important;
  --secondary: #131328 !important;
  --accent: #a5b4fc !important;
  --accent-glow: rgba(165,180,252,0.3) !important;
  --accent-soft: rgba(165,180,252,0.1) !important;
  --searchbar: #131328 !important;
  --iconbg: #1c1c38 !important;
  --sidebar-bg: #090918 !important;
  --topbar-bg: #090918 !important;
  --card-bg: #131328 !important;
  --card-hover: #1c1c38 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(165,180,252,0.08) !important;
}

:root.theme-forest,
html.theme-forest {
  --bg: #0d1a0d !important;
  --primary: #0d1a0d !important;
  --secondary: #142414 !important;
  --accent: #4ade80 !important;
  --accent-glow: rgba(74,222,128,0.3) !important;
  --accent-soft: rgba(74,222,128,0.1) !important;
  --searchbar: #142414 !important;
  --iconbg: #1e321e !important;
  --sidebar-bg: #0a140a !important;
  --topbar-bg: #0a140a !important;
  --card-bg: #142414 !important;
  --card-hover: #1e321e !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(74,222,128,0.08) !important;
}

:root.theme-sunset,
html.theme-sunset {
  --bg: #1a0d0d !important;
  --primary: #1a0d0d !important;
  --secondary: #241414 !important;
  --accent: #fb923c !important;
  --accent-glow: rgba(251,146,60,0.3) !important;
  --accent-soft: rgba(251,146,60,0.1) !important;
  --searchbar: #241414 !important;
  --iconbg: #322020 !important;
  --sidebar-bg: #140a0a !important;
  --topbar-bg: #140a0a !important;
  --card-bg: #241414 !important;
  --card-hover: #322020 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(251,146,60,0.08) !important;
}

:root.theme-crimson,
html.theme-crimson {
  --bg: #1a0a0a !important;
  --primary: #1a0a0a !important;
  --secondary: #241010 !important;
  --accent: #f43f5e !important;
  --accent-glow: rgba(244,63,94,0.3) !important;
  --accent-soft: rgba(244,63,94,0.1) !important;
  --searchbar: #241010 !important;
  --iconbg: #321818 !important;
  --sidebar-bg: #140808 !important;
  --topbar-bg: #140808 !important;
  --card-bg: #241010 !important;
  --card-hover: #321818 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(244,63,94,0.08) !important;
}

:root.theme-monochrome,
html.theme-monochrome {
  --bg: #111111 !important;
  --primary: #111111 !important;
  --secondary: #1a1a1a !important;
  --accent: #999999 !important;
  --accent-glow: rgba(153,153,153,0.2) !important;
  --accent-soft: rgba(153,153,153,0.08) !important;
  --searchbar: #1a1a1a !important;
  --iconbg: #252525 !important;
  --sidebar-bg: #0d0d0d !important;
  --topbar-bg: #0d0d0d !important;
  --card-bg: #1a1a1a !important;
  --card-hover: #252525 !important;
  --font: #e0e0e0 !important;
  --font-dim: rgba(224,224,224,0.65) !important;
  --font-muted: rgba(224,224,224,0.4) !important;
  --border: rgba(255,255,255,0.08) !important;
}

:root.theme-macchiato,
html.theme-macchiato {
  --bg: #24273a !important;
  --primary: #24273a !important;
  --secondary: #1e2030 !important;
  --accent: #8aadf4 !important;
  --accent-glow: rgba(138,173,244,0.3) !important;
  --accent-soft: rgba(138,173,244,0.1) !important;
  --searchbar: #1e2030 !important;
  --iconbg: #363a4f !important;
  --sidebar-bg: #1e2030 !important;
  --topbar-bg: #1e2030 !important;
  --card-bg: #1e2030 !important;
  --card-hover: #363a4f !important;
  --font: #cad3f5 !important;
  --font-dim: rgba(202,211,245,0.7) !important;
  --font-muted: rgba(202,211,245,0.45) !important;
  --border: rgba(202,211,245,0.1) !important;
}

:root.theme-mocha,
html.theme-mocha {
  --bg: #1e1e2e !important;
  --primary: #1e1e2e !important;
  --secondary: #181825 !important;
  --accent: #89b4fa !important;
  --accent-glow: rgba(137,180,250,0.3) !important;
  --accent-soft: rgba(137,180,250,0.1) !important;
  --searchbar: #181825 !important;
  --iconbg: #313244 !important;
  --sidebar-bg: #181825 !important;
  --topbar-bg: #181825 !important;
  --card-bg: #181825 !important;
  --card-hover: #313244 !important;
  --font: #cdd6f4 !important;
  --font-dim: rgba(205,214,244,0.7) !important;
  --font-muted: rgba(205,214,244,0.45) !important;
  --border: rgba(205,214,244,0.1) !important;
}

:root.theme-blood,
html.theme-blood {
  --bg: #120808 !important;
  --primary: #120808 !important;
  --secondary: #1a0c0c !important;
  --accent: #dc2626 !important;
  --accent-glow: rgba(220,38,38,0.35) !important;
  --accent-soft: rgba(220,38,38,0.1) !important;
  --searchbar: #1a0c0c !important;
  --iconbg: #261212 !important;
  --sidebar-bg: #0e0606 !important;
  --topbar-bg: #0e0606 !important;
  --card-bg: #1a0c0c !important;
  --card-hover: #261212 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(220,38,38,0.12) !important;
}

:root.theme-blossom,
html.theme-blossom {
  --bg: #1a0f1a !important;
  --primary: #1a0f1a !important;
  --secondary: #241624 !important;
  --accent: #f9a8d4 !important;
  --accent-glow: rgba(249,168,212,0.3) !important;
  --accent-soft: rgba(249,168,212,0.1) !important;
  --searchbar: #241624 !important;
  --iconbg: #302030 !important;
  --sidebar-bg: #140c14 !important;
  --topbar-bg: #140c14 !important;
  --card-bg: #241624 !important;
  --card-hover: #302030 !important;
  --font: #ffffff !important;
  --font-dim: rgba(255,255,255,0.62) !important;
  --font-muted: rgba(255,255,255,0.38) !important;
  --border: rgba(249,168,212,0.1) !important;
}

#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}