/* ==========================================
ROOT VARIABLES
========================================== */

:root{

--bg:#070b16;

--card:#101827;
--card-light:#18233d;

--accent:#eb6835;
--accent2:#7c5cff;

--text:#ffffff;
--muted:#9ca3af;

--border:
rgba(255,255,255,.08);

--sidebar-width:260px;

--radius:30px;

}

/* ==========================================
RESET
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{

background:var(--accent2);

border-radius:999px;

}

/* ==========================================
SIDEBAR
========================================== */

.sidebar{

position:fixed;

left:0;
top:0;

width:260px;
height:100vh;

background:
linear-gradient(
180deg,
#111827,
#0d1322
);

border-right:
1px solid var(--border);

padding:24px;

z-index:1000;

display:flex;
flex-direction:column;
justify-content:space-between;

}

.sidebar-brand{

display:flex;
align-items:center;

gap:12px;

}

.brand-icon{

width:50px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

border-radius:18px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

font-size:1.2rem;

}

.blog-card,
.trending-card,
.pick-card,
.story-card,
.author-card {
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.blog-card:hover,
.trending-card:hover,
.pick-card:hover,
.story-card:hover,
.author-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

.radial-progress{
  width:140px;
  height:140px;
  border-radius:50%;

  background:
  conic-gradient(
      #7c5cff 68%,
      #1f2235 68%
  );

  display:grid;
  place-items:center;
}

.timeline-item{
  opacity:0;
  transform:translateX(-50px);
}

.timeline-item.in-view{
  opacity:1;
  transform:none;
}

body,
.blog-card,
.sidebar,
.navbar{
  transition:
    background .4s ease,
    color .4s ease,
    border-color .4s ease;
}



.navbar{

  position:fixed;

  top:0;
  left:250px;
  right:0;

  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 30px;
.brand-text{

font-size:1.8rem;

font-weight:800;

font-family:'Syne',sans-serif;

}

.sidebar-nav ul{

list-style:none;

margin-top:40px;

}

.sidebar-nav li{

margin-bottom:8px;

}

.sidebar-nav a{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

border-radius:16px;

color:#aeb6c7;

text-decoration:none;

transition:.3s ease;

}

.sidebar-nav a:hover{

background:
rgba(255,255,255,.05);

color:white;

}

.sidebar-nav .active a{

background:
rgba(124,92,255,.15);

color:white;

}

.sidebar-footer{

display:flex;

gap:10px;

}

.sidebar-footer a{

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

border-radius:14px;

background:#162033;

color:white;

text-decoration:none;

}

.blog-card,
.trending-card,
.pick-card,
.story-card,
.author-card {
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.blog-card:hover,
.trending-card:hover,
.pick-card:hover,
.story-card:hover,
.author-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

.radial-progress{
  width:140px;
  height:140px;
  border-radius:50%;

  background:
  conic-gradient(
      #7c5cff 68%,
      #1f2235 68%
  );

  display:grid;
  place-items:center;
}

.timeline-item{
  opacity:0;
  transform:translateX(-50px);
}

.timeline-item.in-view{
  opacity:1;
  transform:none;
}

body,
.blog-card,
.sidebar,
.navbar{
  transition:
    background .4s ease,
    color .4s ease,
    border-color .4s ease;
}

/* ======================================================
/* ==========================================
NAVBAR
========================================== */

.navbar{

position:fixed;

top:0;
left:260px;
right:0;

height:80px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 30px;

background:
rgba(7,11,22,.9);

backdrop-filter:blur(18px);

border-bottom:
1px solid var(--border);

z-index:999;

}

.nav-left{

display:flex;
align-items:center;

gap:18px;

}

.menu-btn{

width:48px;
height:48px;

border:none;

border-radius:14px;

background:#162033;

color:white;

cursor:pointer;

}

.search-bar{

width:420px;

display:flex;
align-items:center;

gap:12px;

padding:14px 18px;

border-radius:999px;

background:#111827;

border:
1px solid var(--border);

}

.search-bar input{

width:100%;

background:none;

border:none;

outline:none;

color:white;

}

.nav-right{

display:flex;

gap:12px;

}

/* ==========================================
BUTTONS
========================================== */

.primary-btn{

padding:14px 24px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

font-weight:700;

cursor:pointer;

text-decoration:none;

display:inline-flex;
align-items:center;
justify-content:center;

}

.secondary-btn,
.outline-btn{

padding:14px 24px;

border-radius:16px;

border:
1px solid var(--border);

background:none;

color:white;

cursor:pointer;

text-decoration:none;

display:inline-flex;
align-items:center;
justify-content:center;

}

/* ==========================================
MAIN PAGE
========================================== */

.blog-page{

margin-left:260px;

padding-top:110px;

}

/* ==========================================
HERO
========================================== */

.blog-hero{

max-width:1400px;

margin:auto;

padding:60px 40px;

text-align:center;

}

.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:999px;

background:
rgba(124,92,255,.15);

border:
1px solid rgba(124,92,255,.25);

color:#d5ccff;

font-weight:700;

margin-bottom:25px;

}

.blog-hero h1{

font-size:
clamp(
3rem,
8vw,
6rem
);

font-family:'Syne',sans-serif;

line-height:1.05;

margin-bottom:20px;

}

.blog-hero h1 span{

background:
linear-gradient(
90deg,
var(--accent),
var(--accent2)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.blog-hero p{

max-width:850px;

margin:auto;

font-size:1.1rem;

line-height:1.9;

color:var(--muted);

}

.hero-buttons{

display:flex;

justify-content:center;

gap:14px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-stats{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

margin-top:60px;

}

.hero-stats div{

padding:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

border-radius:24px;

border:
1px solid var(--border);

}

.hero-stats h3{

font-size:2.5rem;

margin-bottom:8px;

font-family:'Syne',sans-serif;

}

.hero-stats span{

color:var(--muted);

}
/* ==========================================
SECTION HEADERS
========================================== */
.section-header { margin-bottom: 40px; }
.section-header span { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
.section-header h2 { font-size: 2.5rem; font-family: 'Syne', sans-serif; margin-top: 10px; }

/* ==========================================
FEATURED SECTION
========================================== */
.featured-section { max-width: 1400px; margin: auto; padding: 60px 40px; }
.featured-article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; align-items: center; }
.featured-image { height: 100%; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }
.featured-content { padding: 40px; }
.article-category { display: inline-block; padding: 8px 16px; background: rgba(124,92,255,.15); color: #d5ccff; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 20px; border: 1px solid rgba(124,92,255,.25); }
.featured-content h2 { font-size: 2.2rem; font-family: 'Syne', sans-serif; margin-bottom: 20px; line-height: 1.2; }
.featured-content p { color: var(--muted); line-height: 1.8; font-size: 1.1rem; margin-bottom: 30px; }
.featured-meta { display: flex; justify-content: space-between; align-items: center; }
.author { display: flex; align-items: center; gap: 15px; }
.avatar { width: 45px; height: 45px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.author h4 { font-size: 16px; margin-bottom: 4px; }
.author span { color: var(--muted); font-size: 14px; }
.read-btn { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 600; transition: .3s; }
.read-btn:hover { color: var(--accent); }

/* ==========================================
CATEGORIES
========================================== */
.categories { max-width: 1400px; margin: auto; padding: 60px 40px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.category-card { background: var(--card); border: 1px solid var(--border); padding: 30px; border-radius: 24px; text-align: center; transition: .3s; cursor: pointer; }
.category-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.2); background: var(--card-light); }
.category-card i { font-size: 2.5rem; color: var(--accent2); margin-bottom: 20px; }
.category-card h3 { font-size: 1.5rem; font-family: 'Syne', sans-serif; margin-bottom: 10px; }
.category-card p { color: var(--muted); }

/* ==========================================
BLOG POSTS
========================================== */
.blog-posts { max-width: 1400px; margin: auto; padding: 60px 40px; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.blog-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; transition: .3s; }
.blog-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.2); }
.blog-card-image { position: relative; height: 220px; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-tag { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,.6); backdrop-filter: blur(10px); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.blog-card-content { padding: 25px; }
.blog-meta { display: flex; gap: 20px; color: var(--muted); font-size: 14px; margin-bottom: 15px; }
.blog-meta i { margin-right: 6px; }
.blog-card-content h3 { font-size: 1.4rem; font-family: 'Syne', sans-serif; margin-bottom: 15px; line-height: 1.4; }
.blog-card-content p { color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.read-link { color: var(--accent2); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: .3s; }
.read-link:hover { color: var(--accent); }
/* ==========================================
TRENDING SECTION
========================================== */

.trending-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.trending-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(320px,1fr)
);

gap:24px;

}

.trending-card{

padding:35px;

border-radius:30px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

border:
1px solid var(--border);

position:relative;

overflow:hidden;

transition:.35s ease;

}

.trending-card:hover{

transform:
translateY(-10px);

}

.trending-card::before{

content:"";

position:absolute;

width:220px;
height:220px;

border-radius:50%;

top:-100px;
right:-100px;

background:
rgba(124,92,255,.12);

}

.trending-card h3{

font-size:1.8rem;

margin-bottom:14px;

font-family:'Syne',sans-serif;

position:relative;

z-index:2;

}

.trending-card p{

color:var(--muted);

line-height:1.8;

position:relative;

z-index:2;

}

/* ==========================================
NEWSLETTER
========================================== */

.newsletter-section{

max-width:1400px;

margin:auto;

padding:80px 40px;

}

.newsletter-card{

padding:70px;

border-radius:40px;

text-align:center;

background:
linear-gradient(
135deg,
#eb6835,
#7c5cff,
#00c2ff
);

position:relative;

overflow:hidden;

}

.newsletter-card::before{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

background:
rgba(255,255,255,.08);

top:-140px;
right:-120px;

}

.newsletter-card h2{

font-size:3rem;

font-family:'Syne',sans-serif;

margin-bottom:18px;

position:relative;

z-index:2;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.9;

opacity:.95;

position:relative;

z-index:2;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

flex-wrap:wrap;

position:relative;

z-index:2;

}

.newsletter-form input{

width:360px;

padding:16px 18px;

border:none;

outline:none;

border-radius:16px;

}

.newsletter-form button{

padding:16px 24px;

border:none;

border-radius:16px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

}

/* ==========================================
FOOTER
========================================== */

.footer{

margin-top:100px;

background:#050816;

border-top:
1px solid var(--border);

}

.footer-container{

max-width:1400px;

margin:auto;

padding:70px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr 2fr;

gap:40px;

}

.footer-brand h2{

font-size:2rem;

font-family:'Syne',sans-serif;

color:var(--accent);

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

color:var(--muted);

}

.footer-socials{

display:flex;

gap:12px;

margin-top:20px;

}

.footer-socials a{

width:44px;
height:44px;

display:flex;
align-items:center;
justify-content:center;

border-radius:14px;

background:#162033;

color:white;

text-decoration:none;

}

.footer-col h3{

margin-bottom:18px;

font-family:'Syne',sans-serif;

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:10px;

}

.footer-col a{

text-decoration:none;

color:var(--muted);

transition:.3s ease;

}

.footer-col a:hover{

color:white;

padding-left:4px;

}

.footer-newsletter{

display:flex;
flex-direction:column;

gap:12px;

margin-top:18px;

}

.footer-newsletter input{

padding:15px;

border:none;

border-radius:16px;

background:#162033;

color:white;

}

.footer-newsletter button{

padding:15px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:white;

font-weight:700;

cursor:pointer;

}

.footer-bottom{

text-align:center;

padding:25px;

border-top:
1px solid var(--border);

color:var(--muted);

}

/* ==========================================
BACKGROUND BLOBS
========================================== */

body::before{

content:"";

position:fixed;

width:500px;
height:500px;

border-radius:50%;

background:
rgba(124,92,255,.12);

top:-150px;
left:-120px;

filter:blur(120px);

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:450px;
height:450px;

border-radius:50%;

background:
rgba(0,194,255,.08);

bottom:-150px;
right:-120px;

filter:blur(120px);

z-index:-1;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1200px){

.hero-stats{
grid-template-columns:repeat(2,1fr);
}

.featured-article{
grid-template-columns:1fr;
}

.footer-container{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:900px){

.sidebar{

transform:
translateX(-100%);

transition:.35s ease;

}

.sidebar.active{

transform:
translateX(0);

}

.navbar{

left:0;

}

.blog-page{

margin-left:0;

}

.search-bar{

display:none;

}

}

@media(max-width:768px){

.blog-hero,
.featured-section,
.categories,
.blog-posts,
.trending-section,
.newsletter-section{

padding-left:20px;
padding-right:20px;

}

.hero-stats{

grid-template-columns:1fr;

}

.posts-grid{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

padding:50px 20px;

}

.newsletter-card{

padding:40px 25px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.blog-hero h1{

font-size:3rem;

}

.featured-content{

padding:30px;

}

.featured-content h2{

font-size:2rem;

}

}

@media(max-width:500px){

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

}

.section-header h2{

font-size:2rem;

}

.newsletter-card h2{

font-size:2rem;

}

}
/* ============================================================
   THEME STYLING OVERRIDES
   Navbar, Sidebar, and Footer theme colors:
   - Light Mode: White background, dark text/icons
   - Dark Mode: Black background, light/white text/icons
   ============================================================ */

/* ==========================================
   1. LIGHT MODE SPECIFIC (body:not(.dark-mode))
   ========================================== */
body:not(.dark-mode) .navbar,
body:not(.dark-mode) header.navbar,
body:not(.dark-mode) nav.navbar,
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) aside.sidebar,
body:not(.dark-mode) .footer,
body:not(.dark-mode) footer.footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Ensure text, icons, links inside these components are dark */
body:not(.dark-mode) .navbar *,
body:not(.dark-mode) header.navbar *,
body:not(.dark-mode) nav.navbar *,
body:not(.dark-mode) .sidebar *,
body:not(.dark-mode) aside.sidebar *,
body:not(.dark-mode) .footer *,
body:not(.dark-mode) footer.footer * {
  color: #334155 !important;
}

/* Titles and major headings */
body:not(.dark-mode) .navbar .logo,
body:not(.dark-mode) .sidebar .sidebar-brand,
body:not(.dark-mode) .sidebar h2,
body:not(.dark-mode) .sidebar .brand-text,
body:not(.dark-mode) .footer h2,
body:not(.dark-mode) .footer h3,
body:not(.dark-mode) .footer-logo {
  color: #0f172a !important;
}

/* Sidebar navigation links */
body:not(.dark-mode) .sidebar-nav li a,
body:not(.dark-mode) .sidebar ul li a,
body:not(.dark-mode) .sidebar a {
  background: transparent !important;
  color: #475569 !important;
}

/* Sidebar active link and hover states */
body:not(.dark-mode) .sidebar-nav li.active a,
body:not(.dark-mode) .sidebar-nav li a:hover,
body:not(.dark-mode) .sidebar ul li.active a,
body:not(.dark-mode) .sidebar ul li a:hover,
body:not(.dark-mode) .sidebar a:hover,
body:not(.dark-mode) .sidebar .active a {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark-mode) .sidebar-nav li.active a *,
body:not(.dark-mode) .sidebar-nav li a:hover *,
body:not(.dark-mode) .sidebar ul li.active a *,
body:not(.dark-mode) .sidebar ul li a:hover *,
body:not(.dark-mode) .sidebar a:hover *,
body:not(.dark-mode) .sidebar .active a * {
  color: #0f172a !important;
}

/* Footer links hover */
body:not(.dark-mode) .footer a:hover,
body:not(.dark-mode) footer.footer a:hover {
  color: #4f46e5 !important; /* Premium brand indigo */
}

/* Search bar inside navbar */
body:not(.dark-mode) .search-bar input {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .search-bar input::placeholder {
  color: #64748b !important;
}

/* Outline and secondary buttons inside light navbar/sidebar */
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn,
body:not(.dark-mode) .navbar .outline-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
body:not(.dark-mode) .navbar .nav-btn.outline-nav-btn:hover,
body:not(.dark-mode) .navbar .outline-btn:hover {
  background-color: #f1f5f9 !important;
}


/* ==========================================
   2. DARK MODE SPECIFIC (body.dark-mode)
   ========================================== */
body.dark-mode .navbar,
body.dark-mode header.navbar,
body.dark-mode nav.navbar,
body.dark-mode .sidebar,
body.dark-mode aside.sidebar,
body.dark-mode .footer,
body.dark-mode footer.footer {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
}

/* Ensure text, icons, links inside these components are light */
body.dark-mode .navbar *,
body.dark-mode header.navbar *,
body.dark-mode nav.navbar *,
body.dark-mode .sidebar *,
body.dark-mode aside.sidebar *,
body.dark-mode .footer *,
body.dark-mode footer.footer * {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Titles and major headings */
body.dark-mode .navbar .logo,
body.dark-mode .sidebar .sidebar-brand,
body.dark-mode .sidebar h2,
body.dark-mode .sidebar .brand-text,
body.dark-mode .footer h2,
body.dark-mode .footer h3,
body.dark-mode .footer-logo {
  color: #ffffff !important;
}

/* Sidebar navigation links */
body.dark-mode .sidebar-nav li a,
body.dark-mode .sidebar ul li a,
body.dark-mode .sidebar a {
  background: transparent !important;
  color: #94a3b8 !important;
}

/* Sidebar active link and hover states */
body.dark-mode .sidebar-nav li.active a,
body.dark-mode .sidebar-nav li a:hover,
body.dark-mode .sidebar ul li.active a,
body.dark-mode .sidebar ul li a:hover,
body.dark-mode .sidebar a:hover,
body.dark-mode .sidebar .active a {
  background-color: #1e293b !important; /* slate-800 */
  color: #ffffff !important;
}

body.dark-mode .sidebar-nav li.active a *,
body.dark-mode .sidebar-nav li a:hover *,
body.dark-mode .sidebar ul li.active a *,
body.dark-mode .sidebar ul li a:hover *,
body.dark-mode .sidebar a:hover *,
body.dark-mode .sidebar .active a * {
  color: #ffffff !important;
}

/* Footer links hover */
body.dark-mode .footer a:hover,
body.dark-mode footer.footer a:hover {
  color: #818cf8 !important; /* Indigo-400 */
}

/* Search bar inside navbar */
body.dark-mode .search-bar input {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
}
body.dark-mode .search-bar input::placeholder {
  color: #475569 !important;
}

/* Secondary/outline buttons in dark navbar */
body.dark-mode .navbar .nav-btn.outline-nav-btn,
body.dark-mode .navbar .outline-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
body.dark-mode .navbar .nav-btn.outline-nav-btn:hover,
body.dark-mode .navbar .outline-btn:hover {
  background-color: #0f172a !important;
}


/* ==========================================
   3. THEME TOGGLE BUTTON STYLING (GLOBAL)
   ========================================== */
.theme-toggle,
#darkModeToggle,
#theme-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

body:not(.dark-mode) .theme-toggle,
body:not(.dark-mode) #darkModeToggle,
body:not(.dark-mode) #theme-toggle {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .theme-toggle:hover,
body:not(.dark-mode) #darkModeToggle:hover,
body:not(.dark-mode) #theme-toggle:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  transform: scale(1.05);
}

body.dark-mode .theme-toggle,
body.dark-mode #darkModeToggle,
body.dark-mode #theme-toggle {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}
body.dark-mode .theme-toggle:hover,
body.dark-mode #darkModeToggle:hover,
body.dark-mode #theme-toggle:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
  transform: scale(1.05);
}

/* Floating theme toggle button (for pages without navbar/sidebar) */
.theme-toggle-floating {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
body.dark-mode .theme-toggle-floating {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Sidebar list item toggle button */
.sidebar .theme-toggle-sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  width: calc(100% - 32px) !important;
  margin: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: none !important;
  background-color: transparent !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar {
  color: #475569 !important;
  background-color: #f1f5f9 !important;
}
body:not(.dark-mode) .sidebar .theme-toggle-sidebar:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar {
  color: #cbd5e1 !important;
  background-color: #1e293b !important;
}
body.dark-mode .sidebar .theme-toggle-sidebar:hover {
  color: #ffffff !important;
  background-color: #334155 !important;
}