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

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
}

html,
body{
  width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* =========================================
   THEME VARIABLES
========================================= */

:root{

  /* DARK MODE DEFAULT */

  --bg:#050505;

  --text:#ffffff;

  --secondary:#bcbcbc;

  --glass:rgba(255,255,255,0.05);

  --glass-border:rgba(255,255,255,0.08);

  --header-bg:rgba(0,0,0,0.45);

  --button-bg:#ffffff;

  --button-text:#000000;

  --shadow:
  0 10px 35px rgba(0,0,0,0.35);

  --footer-bg:
  rgba(0,0,0,0.55);
}

/* =========================================
   LIGHT MODE
========================================= */

body.light-mode{

  --bg:#f5f5f5;

  --text:#111111;

  --secondary:#555555;

  --glass:rgba(255,255,255,0.55);

  --glass-border:rgba(0,0,0,0.08);

  --header-bg:rgba(255,255,255,0.6);

  --button-bg:#111111;

  --button-text:#ffffff;

  --shadow:
  0 10px 35px rgba(0,0,0,0.08);

  --footer-bg:
  rgba(0,0,0,0.9);
}

/* =========================================
   BODY
========================================= */

body{

  background:var(--bg);

  color:var(--text);

  transition:
  background 0.4s ease,
  color 0.4s ease;
}

/* =========================================
   HEADER
========================================= */

.header{

  width:100%;

  min-height:90px;

  background:var(--header-bg);

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:20px 5%;

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

  position:sticky;

  top:0;

  z-index:1000;

  backdrop-filter:blur(18px);
}

/* LOGO */

.logo{

  font-size:30px;

  font-weight:bold;

  color:var(--text);

  text-decoration:none;

  min-width:160px;
}

/* NAVIGATION */

.navbar{

  margin-left:40px;
}

.nav-links{

  display:flex;

  align-items:center;

  gap:35px;

  list-style:none;
}

.nav-links a{

  text-decoration:none;

  color:var(--text);

  font-weight:600;

  transition:0.3s;
}

.nav-links a:hover{

  opacity:0.7;
}

/* SEARCH BAR */

.header-search{

  flex:1;

  max-width:420px;

  margin:0 50px;

  height:48px;

  background:var(--glass);

  border-radius:14px;

  display:flex;

  align-items:center;

  overflow:hidden;

  backdrop-filter:blur(18px);

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

.header-search input{

  flex:1;

  height:100%;

  border:none;

  background:transparent;

  padding:0 18px;

  font-size:15px;

  outline:none;

  color:var(--text);
}

.header-search input::placeholder{

  color:var(--secondary);
}

.header-search button{

  width:60px;

  height:100%;

  border:none;

  background:var(--button-bg);

  color:var(--button-text);

  cursor:pointer;

  font-size:18px;

  transition:0.3s;
}

.header-search button:hover{

  opacity:0.8;
}

/* RIGHT SIDE */

.header-icons{

  display:flex;

  align-items:center;

  gap:20px;
}

/* =========================================
   THEME BUTTON
========================================= */

.theme-toggle{

  width:50px;

  height:50px;

  border:none;

  border-radius:50%;

  background:var(--glass);

  backdrop-filter:blur(18px);

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

  color:var(--text);

  cursor:pointer;

  font-size:20px;

  transition:0.3s;
}

.theme-toggle:hover{

  transform:scale(1.08);
}

/* ACCOUNT BUTTON */

.account-btn{

  display:flex;

  align-items:center;

  gap:10px;

  text-decoration:none;

  color:var(--text);

  font-weight:600;

  background:var(--glass);

  padding:10px 18px;

  border-radius:16px;

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

  backdrop-filter:blur(18px);
}

.account-icon{

  width:45px;

  height:45px;

  border-radius:50%;

  background:var(--button-bg);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:20px;

  color:var(--button-text);
}

/* CART */

.cart-icon{

  position:relative;

  font-size:28px;

  cursor:pointer;
}

.cart-count{

  position:absolute;

  top:-8px;

  right:-12px;

  width:22px;

  height:22px;

  border-radius:50%;

  background:var(--button-bg);

  color:var(--button-text);

  font-size:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:bold;
}

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

.account-hero{

  width:100%;

  min-height:calc(100vh - 90px);

  display:flex;

  align-items:center;

  justify-content:center;

  padding:80px 20px;
}

/* CARD */

.profile-card{

  width:100%;

  max-width:500px;

  background:var(--glass);

  backdrop-filter:blur(22px);

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

  padding:60px 50px;

  border-radius:30px;

  text-align:center;

  box-shadow:var(--shadow);
}

/* PROFILE IMAGE */

.profile-image{

  width:120px;

  height:120px;

  margin:auto;

  margin-bottom:30px;

  border-radius:50%;

  background:var(--button-bg);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:60px;

  color:var(--button-text);
}

/* TITLE */

.profile-card h1{

  font-size:40px;

  margin-bottom:20px;

  color:var(--text);
}

/* TEXT */

.profile-card p{

  font-size:18px;

  line-height:1.7;

  color:var(--secondary);

  margin-bottom:40px;
}

/* BUTTONS */

.account-buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;
}

/* BUTTONS */

.login-btn,
.signup-btn{

  padding:15px 35px;

  background:var(--button-bg);

  color:var(--button-text);

  text-decoration:none;

  border-radius:14px;

  font-weight:bold;

  transition:0.3s;
}

.login-btn:hover,
.signup-btn:hover{

  transform:translateY(-4px);

  opacity:0.85;
}

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

.footer{

  margin-top:80px;

  padding:90px 5% 40px;

  background:var(--footer-bg);

  backdrop-filter:blur(20px);

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

.footer-grid{

  display:grid;

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

  gap:50px;

  margin-bottom:50px;
}

.footer-column h3,
.footer-column h4{

  margin-bottom:20px;

  color:white;
}

.footer-column p,
.footer-column a{

  color:#bcbcbc;

  text-decoration:none;

  line-height:1.8;
}

.footer-column a:hover{

  opacity:0.7;
}

.footer-bottom{

  border-top:
  1px solid rgba(255,255,255,0.08);

  padding-top:25px;

  text-align:center;

  color:#999;
}

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

@media(max-width:1100px){

  .header{

    flex-wrap:wrap;

    height:auto;

    padding:20px;
  }

  .navbar{

    order:3;

    width:100%;

    margin-top:20px;

    margin-left:0;
  }

  .nav-links{

    justify-content:center;
  }

  .header-search{

    max-width:100%;

    margin:0 20px;
  }
}

@media(max-width:768px){

  .header{

    flex-direction:column;

    gap:20px;

    padding:20px;
  }

  .nav-links{

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;
  }

  .header-search{

    width:100%;

    margin:0;
  }

  .header-icons{

    width:100%;

    justify-content:center;
  }

  .profile-card{

    padding:50px 25px;
  }

  .profile-card h1{

    font-size:32px;
  }

  .profile-card p{

    font-size:16px;
  }
}

/* =========================================
   ACCOUNT FEATURES
========================================= */

.account-features{

  width:100%;

  padding:40px 5% 80px;

  display:grid;

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

  gap:30px;
}

/* FEATURE CARD */

.feature-card{

  background:var(--glass);

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

  backdrop-filter:blur(18px);

  border-radius:28px;

  padding:35px 30px;

  text-align:center;

  transition:0.4s ease;

  box-shadow:var(--shadow);
}

.feature-card:hover{

  transform:translateY(-8px);
}

.feature-icon{

  width:75px;
  height:75px;

  margin:auto;

  margin-bottom:25px;

  border-radius:20px;

  display:flex;

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

  font-size:34px;

  background:var(--button);

  color:var(--button-text);
}

.feature-card h3{

  font-size:24px;

  margin-bottom:15px;
}

.feature-card p{

  color:var(--secondary);

  line-height:1.7;
}

/* =========================================
   ACCOUNT STATS
========================================= */

.account-stats{

  width:100%;

  padding:0 5% 100px;

  display:grid;

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

  gap:25px;
}

/* STAT CARD */

.stat-card{

  background:var(--glass);

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

  backdrop-filter:blur(18px);

  border-radius:28px;

  padding:40px 20px;

  text-align:center;

  box-shadow:var(--shadow);
}

.stat-card h2{

  font-size:48px;

  margin-bottom:15px;
}

.stat-card p{

  color:var(--secondary);
}

/* =========================================
   RECENT ORDERS
========================================= */

.recent-orders{

  width:100%;

  padding:0 5% 100px;
}

/* TITLE */

.section-title{

  text-align:center;

  margin-bottom:60px;
}

.section-title h2{

  font-size:52px;

  margin-bottom:15px;
}

.section-title p{

  color:var(--secondary);

  font-size:18px;
}

/* GRID */

.orders-grid{

  display:grid;

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

  gap:30px;
}

/* ORDER CARD */

.order-card{

  background:var(--glass);

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

  backdrop-filter:blur(18px);

  border-radius:30px;

  overflow:hidden;

  padding:30px;

  text-align:center;

  transition:0.4s ease;

  box-shadow:var(--shadow);
}

.order-card:hover{

  transform:translateY(-8px);
}

.order-card img{

  width:100%;

  height:220px;

  object-fit:contain;

  margin-bottom:25px;
}

.order-card h3{

  font-size:28px;

  margin-bottom:15px;
}

.order-card span{

  display:inline-block;

  padding:10px 18px;

  border-radius:30px;

  background:var(--button);

  color:var(--button-text);

  font-size:14px;

  font-weight:bold;
}

/* =========================================
   SUPPORT
========================================= */

.support-section{

  width:100%;

  padding:0 5% 120px;
}

.support-card{

  background:
  rgba(0,0,0,0.82);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  border-radius:40px;

  padding:80px 40px;

  text-align:center;
}

body.light-mode .support-card{

  background:
  rgba(0,0,0,0.9);
}

.support-card h2{

  font-size:54px;

  margin-bottom:20px;

  color:white;
}

.support-card p{

  max-width:700px;

  margin:auto;

  color:#d0d0d0;

  line-height:1.8;

  margin-bottom:35px;

  font-size:18px;
}

/* BUTTON */

.support-btn{

  display:inline-block;

  padding:16px 34px;

  border-radius:16px;

  background:white;

  color:black;

  text-decoration:none;

  font-weight:bold;

  transition:0.3s ease;
}

.support-btn:hover{

  transform:translateY(-5px);
}

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

@media(max-width:768px){

  .section-title h2{

    font-size:38px;
  }

  .support-card h2{

    font-size:40px;
  }

}

/* =========================================
   DASHBOARD WRAPPER
========================================= */

.dashboard-wrapper {
  display: flex;
  min-height: calc(100vh - 90px);
  margin-top: 20px;
}

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

.sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar-logo {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 30px;
}

.sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-links li {
  margin-bottom: 12px;
}

.sidebar-links li a {
  display: block;
  text-decoration: none;
  padding: 12px 15px;
  border-radius: 10px;
  color: #334155;
  font-weight: 500;
  transition: 0.3s;
}

.sidebar-links li a:hover {
  background: #f1f5f9;
}

.active-link a {
  background: #2563eb;
  color: white !important;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-bottom button {
  border: none;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

#dark-toggle {
  background: #0f172a;
  color: white;
}

#logout-btn {
  /* Dynamic alignment match to your theme design properties */
  background: #111111; /* Clean black matching your main login/signup UI buttons */
  color: #ffffff;
  border: 1px solid transparent;
  
  /* Sizable text & layout configurations */
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 8px; /* Smooth rounded corners matching your profile/stat cards */
  
  /* Layout constraints */
  cursor: pointer;
  display: inline-block;
  min-width: 160px;
  text-align: center;
  margin-top: 30px;
  
  /* Interactive state tracking engine */
  transition: all 0.25s ease-in-out;
}

#logout-btn:hover {
  background: #333333; /* Soft transition shade on mouse hover */
  transform: translateY(-2px); /* Gentle micro-interaction lift */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Light-Mode Dynamic Adaptation overrides */
body.light-mode #logout-btn {
  background: #ffffff;
  color: #111111;
  border: 1px solid #e0e0e0;
}

body.light-mode #logout-btn:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* =========================================
   MAIN CONTENT
========================================= */

.dashboard-main {
  flex: 1;
  padding: 30px;
  background: #f8fafc;
}

/* =========================================
   DASHBOARD HEADER
========================================= */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.dashboard-header h1 {
  font-size: 30px;
  margin-bottom: 8px;
  color: #0f172a;
}

.dashboard-header p {
  color: #64748b;
}

.dashboard-search {
  display: flex;
  gap: 10px;
}

.dashboard-search input {
  width: 280px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
}

.dashboard-search button {
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

/* =========================================
   STATS
========================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.stat-card h3 {
  margin-bottom: 10px;
  color: #64748b;
}

.stat-card span {
  font-size: 28px;
  font-weight: bold;
  color: #0f172a;
}

/* =========================================
   SECTIONS
========================================= */

.dashboard-section {
  margin-bottom: 40px;
}

.section-title {
  margin-bottom: 15px;
}

.section-title h2 {
  font-size: 24px;
  color: #0f172a;
}

/* =========================================
   PRODUCT GRID
========================================= */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* =========================================
   PRODUCT CARD
========================================= */

.product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin-bottom: 8px;
  color: #0f172a;
}

.product-info p {
  font-weight: bold;
  color: #2563eb;
  margin-bottom: 6px;
}

.product-info small {
  color: #64748b;
}

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

.product-buttons {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.cart-btn,
.product-buttons button {
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}

.cart-btn {
  flex: 1;
  background: #2563eb;
  color: white;
}

.wishlist-btn {
  width: 45px;
  background: #f1f5f9;
}

.wishlist-btn.hearted {
  background: #ef4444;
  color: white;
}

.added-btn {
  background: #16a34a !important;
}

/* =========================================
   FLOATING NOTIFICATION
========================================= */

.floating-notification {
  position: fixed;
  right: 20px;
  top: 100px;
  background: #16a34a;
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 9999;
}

.floating-notification.show {
  opacity: 1;
}

/* =========================================
   DARK MODE
========================================= */

body.dark-mode {
  background: #0f172a;
}

body.dark-mode .dashboard-main {
  background: #0f172a;
}

body.dark-mode .sidebar {
  background: #111827;
  border-right-color: #1f2937;
}

body.dark-mode .sidebar-logo,
body.dark-mode .dashboard-header h1,
body.dark-mode .section-title h2,
body.dark-mode .product-info h3,
body.dark-mode .stat-card span {
  color: white;
}

body.dark-mode .sidebar-links a {
  color: #cbd5e1;
}

body.dark-mode .stat-card,
body.dark-mode .product-card {
  background: #1e293b;
}

body.dark-mode .dashboard-header p,
body.dark-mode .product-info small,
body.dark-mode .stat-card h3 {
  color: #94a3b8;
}

body.dark-mode .dashboard-search input {
  background: #1e293b;
  color: white;
  border-color: #334155;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {
  .dashboard-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .dashboard-search {
    width: 100%;
  }

  .dashboard-search input {
    width: 100%;
  }
}


/* =========================================
   ACCOUNT QUICK LINKS
========================================= */

.account-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 30px 0 40px;
  padding: 0 20px;
}

.account-nav-card {
  background: #ffffff;
  color: #222;
  text-decoration: none;
  padding: 20px;
  border-radius: 16px;

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

  font-size: 1rem;
  font-weight: 600;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.account-nav-card:hover {
  transform: translateY(-5px);
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.account-nav-card:active {
  transform: scale(0.97);
}

/* =========================================
   DARK MODE SUPPORT
========================================= */

body.dark-mode .account-nav-card {
  background: #1f2937;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
}

body.dark-mode .account-nav-card:hover {
  background: #3b82f6;
  color: #ffffff;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {
  .account-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .account-nav-card {
    padding: 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .account-nav {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ANCHOR & CONTAIN THE DASHBOARD OVERALL CANVAS
   ========================================================================== */
#user-view {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto; /* Perfectly centers the board on large screens */
  padding: 30px;
  background: #ffffff; /* Gives the layout a unified structural background card */
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Subtle depth container */
  box-sizing: border-box;
}

/* Light/Dark Mode Adaptation Balance */
body.light-mode #user-view {
  background: #ffffff;
}
/* Optional: If your theme uses dark mode by default, match it here */
body:not(.light-mode) #user-view {
  background: #1a1a1a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   HEADER SECTION TIGHTENING
   ========================================================================== */
.dashboard-top {
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 20px;
}

body:not(.light-mode) .dashboard-top {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   FIX QUICK LINKS FROM WRAPPING IRREGULARLY
   ========================================================================== */
.account-nav {
  display: flex !important;
  flex-wrap: wrap; /* Allows wrap on small screens but stays in a cohesive row block on big ones */
  gap: 12px !important;
  margin: 30px 0 45px 0 !important;
  width: 100%;
}

.account-nav-card {
  flex: 1;
  min-width: 150px; /* Gives the quick links uniform weight and structure */
  text-align: center;
  padding: 12px 15px !important;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-weight: 500;
  transition: all 0.2s ease;
}

body:not(.light-mode) .account-nav-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.04);
}

.account-nav-card:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   CLEAN SEPARATORS FOR LOWER DISPLAY MODULES
   ========================================================================== */
.dashboard-section {
  background: rgba(0, 0, 0, 0.01);
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px !important;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

body:not(.light-mode) .dashboard-section {
  background: rgba(255, 255, 255, 0.01);
  border-color: rgba(255, 255, 255, 0.02);
}

.dashboard-section h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 20px;
}

/* ==========================================================================
   ALIGN LOGOUT TO THE RIGHT HAND SIDE BASE LINE
   ========================================================================== */
#logout-btn {
  float: right; /* Pushes the button to the natural clean grid corner edge */
  margin-top: 10px;
  clear: both;
}

/* ==========================================================================
   CLEAN LOGOUT CONTAINER WITH CLEARANCE
   ========================================================================== */
/* We create a full-width block container for the button so nothing can slide under or over it */
.account-dashboard {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#logout-btn {
  align-self: flex-end; /* Clean, modern alternative to float:right that respects layout heights */
  margin-top: 40px;
  margin-bottom: 20px;
  
  /* Sizable style configurations matching your theme buttons */
  background: #111111;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 35px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  /* Smooth transitions */
  transition: all 0.25s ease-in-out;
}

#logout-btn:hover {
  background: #333333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Light-Mode Color Adjustments */
body.light-mode #logout-btn {
  background: #ffffff;
  color: #111111;
  border: 1px solid #e0e0e0;
}

body.light-mode #logout-btn:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}