:root {
  --primary-color: #ff00c8;
  --secondary-color: #00cfff;
  --bg-gradient-start: #050505; /* Darker black */
  --bg-gradient-mid: #1a1a1a;   /* Dark grey */
  --bg-gradient-end: #0a0a0a;   /* Black */
  --text-color: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.03); /* More transparent */
  --glass-border: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(5, 5, 5, 0.9);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #050505; /* Flat dark background */
  color: var(--text-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Background Elements (Floating Shapes) */
.background-elements {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: float 25s infinite linear;
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: #ff00c8;
  top: -100px;
  left: -100px;
  animation-duration: 35s;
}

.shape-2 {
  width: 300px;
  height: 300px;
  background: #00cfff;
  bottom: -50px;
  right: -50px;
  animation-duration: 40s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  background: #ff8a00;
  top: 30%;
  right: 20%;
  animation-duration: 30s;
}

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(100px, -100px) rotate(90deg); }
  50% { transform: translate(-100px, 100px) rotate(180deg); }
  75% { transform: translate(100px, 100px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* Particle Animation */
.particle {
    position: fixed;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: particleFloat 15s infinite linear;
    z-index: 1;
    pointer-events: none;
}

@keyframes particleFloat {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}

.particle:nth-child(1) { top: 10%; left: 10%; width: 20px; height: 20px; animation-duration: 25s; }
.particle:nth-child(2) { top: 20%; left: 80%; width: 15px; height: 15px; animation-duration: 30s; }
.particle:nth-child(3) { top: 70%; left: 20%; width: 25px; height: 25px; animation-duration: 35s; }
.particle:nth-child(4) { top: 80%; left: 70%; width: 10px; height: 10px; animation-duration: 40s; }
.particle:nth-child(5) { top: 40%; left: 50%; width: 30px; height: 30px; animation-duration: 45s; }


/* Main Content Wrapper */
.app-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  flex: 1; /* Let it grow to fill the body */
}

/* The 'main' rule was removed as it was causing layout issues */


a {
  text-decoration: none;
  color: inherit;
}

/* ================= Navbar ================= */
.navbar {
  backdrop-filter: blur(12px);
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.site-title {
  font-weight: 700;
  font-size: 1.5rem;
  background: linear-gradient(45deg, #ff00c8, #00cfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap; /* Prevent text wrapping */
}

.nav-link {
  color: rgba(255,255,255,0.8) !important;
  transition: color 0.3s;
}

.nav-link:hover, .nav-link.active {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 0, 200, 0.5);
}

/* Specific fix for nav-tabs to ensure background contrast in dark mode */
.nav-tabs .nav-link {
    background-color: transparent !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    background-color: rgba(255,255,255,0.05) !important; /* Slightly visible dark background */
    border-color: rgba(255,255,255,0.1) !important;
}



/* Profile Dropdown Specific Styles */
.navbar .dropdown-menu.profile-panel {
  background: rgba(30, 30, 30, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 15px; /* Add internal padding */
  min-width: 250px; /* Ensure a decent width */
}

.profile-panel .panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-panel .profile-picture {
    margin-bottom: 15px;
    width: 80px; /* Size of the container */
    height: 80px;
    border-radius: 50%;
    overflow: hidden; /* Ensure image/SVG stays within circle */
    border: 3px solid var(--primary-color); /* Highlight border */
    box-shadow: 0 0 15px rgba(255, 0, 200, 0.6); /* Neon glow */
    display: flex; /* For centering SVG */
    align-items: center;
    justify-content: center;
}

.profile-panel .profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-panel .profile-picture svg {
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.7); /* Color for default icon */
}

.profile-panel .email-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.profile-panel .greeting-text {
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.profile-panel .btn {
  width: 100%; /* Make button full width of the panel */
}

/* Common style for nav icon buttons (e.g., favorites, theme toggle) */
.nav-icon-button {
    background: rgba(255, 255, 255, 0.1); /* Glassy background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; /* Default icon color */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular shape */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Subtle frost */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05); /* Subtle glow */
    cursor: pointer;
}

.nav-icon-button:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px); /* Lift effect */
}

.nav-icon-button i {
    font-size: 1.2rem; /* Icon size */
    color: var(--primary-color); /* Neon color for icons */
    text-shadow: 0 0 8px var(--primary-color), 0 0 12px rgba(255, 0, 200, 0.7);
}

.nav-icon-button:hover i {
    text-shadow: 0 0 12px var(--primary-color), 0 0 20px rgba(255, 0, 200, 0.8);
}


/* Light mode adjustments for profile dropdown */
body.light-mode .navbar .dropdown-menu.profile-panel {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

body.light-mode .profile-panel .profile-picture {
  border-color: var(--secondary-color);
  box-shadow: 0 0 15px rgba(0, 207, 255, 0.4);
}

body.light-mode .profile-panel .profile-picture svg {
  color: rgba(0,0,0,0.7);
}

body.light-mode .profile-panel .email-text {
  color: rgba(0,0,0,0.6);
}

body.light-mode .profile-panel .greeting-text {
  color: #212529;
}

/* Light mode adjustments for nav icon buttons */
body.light-mode .nav-icon-button {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    box-shadow: none;
}

body.light-mode .nav-icon-button:hover {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

body.light-mode .nav-icon-button i {
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--secondary-color), 0 0 12px rgba(0, 207, 255, 0.7);
}

body.light-mode .nav-icon-button:hover i {
    text-shadow: 0 0 12px var(--secondary-color), 0 0 20px rgba(0, 207, 255, 0.8);
}

/* ================= Auth / Login ================= */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px); /* Fill remaining height */
    padding: 20px;
}

.login-container {
    position: relative;
    z-index: 10;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 40px 50px;
    width: 420px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    transform: perspective(1000px) rotateY(0deg); /* Simplification: removed 5deg for better usability */
    transition: all 0.4s ease;
}

.login-container:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.logo-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-header h1 {
    color: white;
    font-size: 2.5rem;
    background: linear-gradient(45deg, #ff00c8, #00cfff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    margin: 0;
}

.input-group-custom {
    margin-bottom: 25px;
    position: relative;
}

.input-group-custom input {
    width: 100%;
    padding: 18px 20px 18px 50px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white !important; /* Reverted to white for dark mode readability */
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s ease;
}

.input-group-custom input:focus {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.input-group-custom input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.3rem;
    z-index: 2;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remember-me input {
    accent-color: #ff00c8;
    width: 16px;
    height: 16px;
}

.forgot-password {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.forgot-password:hover {
    color: #ff00c8;
    text-decoration: underline;
}

.btn-custom-login {
    width: 100%;
    padding: 18px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(45deg, #ff00c8, #00cfff);
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    outline: none;
    display: block;
    text-align: center;
}

.btn-custom-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 0, 200, 0.4);
    color: white;
}

.btn-custom-login:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    background: linear-gradient(45deg, #444, #666); /* Darker, less vibrant gradient */
}

/* ================= Cards / Dashboard / General ================= */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    color: #fff !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.card-header, .card-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--glass-border) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

/* ================= Gallery Grid (Masonry / Pinterest Style) ================= */
.gallery-grid {
  column-count: 4;
  column-gap: 24px;
  padding-bottom: 40px;
}

/* Responsive Columns */
@media (max-width: 1200px) {
  .gallery-grid { column-count: 3; }
}
@media (max-width: 900px) {
  .gallery-grid { column-count: 2; }
}
@media (max-width: 600px) {
  .gallery-grid { column-count: 1; }
}

.image-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    /* Removed aspect-ratio: 1 to allow variable heights */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    border: none;
    
    /* Masonry specific: prevent breaking across columns and add bottom spacing */
    break-inside: avoid; 
    margin-bottom: 24px;
    display: block; /* Ensure block display */
}

.image-card:hover {
    transform: translateY(-5px);
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.image-card img,
.image-card video {
    width: 100%;
    height: auto; /* Natural height for masonry effect */
    display: block; /* Removes bottom whitespace */
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-card:hover img,
.image-card:hover video {
    transform: scale(1.05); /* Subtle zoom */
}

.image-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: row; /* Horizontal layout */
    justify-content: space-between; /* Push to edges */
    align-items: flex-end; /* Align to bottom */
    padding: 20px;
}

.image-card:hover .overlay {
    opacity: 1;
}

.image-card .actions {
    display: flex;
    gap: 8px; /* Spacing between buttons in the same group */
}

/* Clean Favorite Icon */
.favorite-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    opacity: 0; /* Hidden by default */
    transform: translateY(-10px);
}

.image-card:hover .favorite-icon {
    opacity: 1;
    transform: translateY(0);
}

.favorite-icon:hover, .favorite-icon.active {
    background: rgba(255, 0, 200, 0.2);
    color: #ff00c8;
    transform: scale(1.1);
}

.badge-edited {
    background: rgba(0, 207, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.action-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 10px; /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 8px;
}

.action-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
}

.action-btn.delete-action-btn:hover {
    background: rgba(255, 0, 0, 0.7); /* Red background on hover */
    color: #fff;
    transform: translateY(-2px);
}

/* ================= Footer ================= */
.footer {
    background: rgba(15, 12, 41, 0.9);
    color: rgba(255,255,255,0.6);
    padding: 20px 0;
    text-align: center;
    backdrop-filter: blur(5px);
    border-top: 1px solid var(--glass-border);
}

/* ================= Helper Utilities ================= */
.text-muted {
    color: rgba(255,255,255,0.5) !important;
}

.form-control, .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important; /* Reverted to white !important for dark mode readability */
}

/* Specific styles for dropdown options in night mode */
select.form-select,
select.form-select option {
  color: white;
  background-color: #212529; /* Dark background for dropdown options */
}

.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 15px rgba(0, 207, 255, 0.3) !important;
    border-color: rgba(0, 207, 255, 0.5) !important;
}

/* Alert Boxes */
.alert-danger {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff8b94;
}

.alert-success {
    background: rgba(25, 135, 84, 0.2);
    border: 1px solid rgba(25, 135, 84, 0.4);
    color: #75b798;
}

/* ================= Zoom Slider (Vertical Right) ================= */
#zoomContainer {
    position: absolute;
    right: 20px;
    left: auto;
    bottom: 60%;
    top: auto;
    transform: translateY(0);
    z-index: 2000;
    
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
    height: 220px; /* Increased height slightly */
    width: 44px;   /* Fixed width */
    
    /* Remove flex flow, use manual positioning */
    display: block; 
}

/* Zoom In Icon (+) - Top */
#zoomContainer .bi-zoom-in {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,0.8);
    pointer-events: none;
}

/* Zoom Out Icon (-) - Bottom */
#zoomContainer .bi-zoom-out {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,0.8);
    pointer-events: none;
}

/* The Slider */
#zoomRange {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px; /* Length of slider */
    height: 20px;
    margin: 0;
    
    /* Center and Rotate */
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
}

#zoomRange::-webkit-slider-thumb {
    background: #ff00c8;
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.5);
    cursor: grab;
}
#zoomRange::-moz-range-thumb {
    background: #ff00c8;
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.5);
    cursor: grab;
}
#zoomRange:active::-webkit-slider-thumb {
    cursor: grabbing;
}

#lightboxModal .modal-content {
    background: rgba(255, 255, 255, 0.05) !important; /* Very transparent */
    backdrop-filter: blur(25px) !important; /* Strong frost effect */
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly clearer border */
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: visible; /* Allow image shadow to spill out */
}

#lightboxModal .modal-body {
    padding: 0;
    position: relative;
    background: transparent !important; /* Ensure body is clear */
}

#lightboxMediaContainer {
    background: transparent !important; 
    min-height: 400px;
    padding: 40px; /* More space for shadow */
    overflow: visible; /* Ensure shadow isn't clipped here either */
}

.lightbox-details {
    background: rgba(0, 0, 0, 0.2); /* Very subtle tint for text area */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    text-align: left;
}

#lightboxPrompt {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#lightboxInfo {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem;
}

/* Close Button (Floating) */
#lightboxCloseBtn {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 10px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

#lightboxCloseBtn:hover {
    background-color: rgba(255, 0, 200, 0.8);
    transform: rotate(90deg);
}

/* Copy Prompt Button - "Login Button" Style */
.copy-prompt-btn {
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0;
    padding: 15px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(45deg, #ff00c8, #00cfff);
    color: white !important;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    outline: none;
    display: block;
    text-align: center;
    box-shadow: 0 10px 25px rgba(255, 0, 200, 0.3);
}

.copy-prompt-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 0, 200, 0.5);
}

/* Button Pulse Animation */
@keyframes pulseBtn {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.copy-prompt-btn {
    animation: pulseBtn 3s infinite;
}

.copy-prompt-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: all 0.6s ease;
    pointer-events: none;
}

.copy-prompt-btn:hover::after {
    transform: rotate(30deg) translate(20%, 20%);
}

/* Navigation Arrows */
.lightbox-nav {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.lightbox-nav:hover {
    background: rgba(255, 0, 200, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* Lightbox specific fixes */
#lightboxMediaContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* Changed from #000 to transparent for glass effect */
  min-height: 300px;
}

#lightboxImage, #lightboxVideo {
  max-height: 85vh; /* Fit within viewport height */
  max-width: 100%;  /* Fit within viewport width */
  width: auto;      /* Maintain aspect ratio */
  height: auto;
  object-fit: contain; /* Ensure full image is visible */
  border-radius: 16px; /* Smooth rounded corners */
  /* 3D Depth Effect: Deep shadow + Subtle highlight border */
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.7), /* Main depth shadow */
    0 0 0 1px rgba(255, 255, 255, 0.1);   /* Subtle rim light */
  transform: translateZ(0); /* Hardware accel */
}

.lightbox-details {
  background: rgba(15, 12, 41, 0.95);
  border-top: 1px solid var(--glass-border);
}

/* Base Neon Button Style */
.btn-neon {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    color: white !important;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    outline: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn-neon:hover {
    transform: translateY(-3px);
}

.btn-neon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: all 0.6s ease;
    pointer-events: none;
}

.btn-neon:hover::after {
    transform: rotate(30deg) translate(20%, 20%);
}

/* Pink/Blue Neon Modifier */
.btn-neon-primary {
    background: linear-gradient(45deg, #ff00c8, #00cfff);
    box-shadow: 0 5px 15px rgba(255, 0, 200, 0.3);
}

.btn-neon-primary:hover {
    box-shadow: 0 8px 25px rgba(255, 0, 200, 0.5);
}

/* Green Neon Modifier */
.btn-neon-green {
    background: linear-gradient(45deg, #00ff80, #00cfff);
    box-shadow: 0 5px 15px rgba(0, 255, 128, 0.3);
}

.btn-neon-green:hover {
    box-shadow: 0 8px 25px rgba(0, 255, 128, 0.5);
}


/* Navigation Arrows */
.lightbox-nav {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.lightbox-nav:hover {
    background: rgba(255, 0, 200, 0.8);
    transform: translateY(-50%) scale(1.1);
}

/* Log viewer specific styles */
#logViewer {
    background: #1a1a1a; /* Dark background for logs */
    color: #e0e0e0; /* Light grey text */
}

#logViewer pre {
    font-family: 'Consolas', 'Monaco', 'monospace';
    font-size: 0.9em;
    background: transparent; /* Ensure it inherits parent's background */
    color: inherit; /* Ensure it inherits parent's text color */
    white-space: pre-wrap;
    word-break: break-all;
}


body.light-mode .text-muted {
    color: #6c757d !important; /* Bootstrap's default muted color */
}
body.light-mode {
    --bg-gradient-start: #f8f9fa;
    --bg-gradient-mid: #e9ecef;
    --bg-gradient-end: #dee2e6;
    --text-color: #212529;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.9);
    background: #f4f7f6; /* Flat elegant light bg */
    color: #212529;
}

body.light-mode .navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

body.light-mode .nav-link {
    color: rgba(0,0,0,0.6) !important;
}

body.light-mode .nav-link:hover, 
body.light-mode .nav-link.active {
    color: #ff00c8 !important; /* Keep primary accent */
    text-shadow: none;
}

body.light-mode .glass-card,
body.light-mode .card, 
body.light-mode .login-container {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    color: #212529 !important;
}

body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4, 
body.light-mode h5, 
body.light-mode h6 {
    color: #1a1a1a !important;
}

body.light-mode .form-control, 
body.light-mode .form-select,
body.light-mode .input-group-custom input {
    background: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
}

body.light-mode .form-control:focus,
body.light-mode .input-group-custom input:focus {
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(0, 207, 255, 0.1) !important;
    border-color: #00cfff !important;
}

body.light-mode .input-icon {
    color: #6c757d;
}

body.light-mode .input-group-custom input::placeholder,
body.light-mode .form-control::placeholder {
    color: #6c757d !important;
}

/* Light Mode Gallery */
body.light-mode .image-card {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

body.light-mode .image-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

body.light-mode .footer {
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.05);
    color: #6c757d;
}

/* Invert icons in light mode if needed */
body.light-mode .btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
}
body.light-mode .btn-outline-secondary:hover {
    background: #e9ecef;
    color: #212529;
}

body.light-mode .invert-in-light-mode {
    filter: invert(1);
}

/* Light Mode for action-btn (for categories page) */
body.light-mode .action-btn {
    background: rgba(0, 0, 0, 0.05); /* Light background for contrast */
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6c757d; /* Darker text color */
}

body.light-mode .action-btn:hover {
    background: rgba(0, 0, 0, 0.1); /* Slightly darker on hover */
    color: #212529; /* Even darker text on hover */
}

body.light-mode .action-btn.delete-action-btn:hover {
    background: rgba(220, 53, 69, 0.2); /* Light red background on hover for delete */
    color: #dc3545; /* Bootstrap danger red text */
}

/* Light Mode Lightbox (Keep Dark or Adapt?) */
/* Usually lightbox looks better dark even in light mode, but we can adapt it if requested. 
   For now, we'll keep the lightbox dark/glassy as it overlays the content nicely. */

/* Fix for large site logo */

.site-logo {

  height: 40px;

  width: auto;

  object-fit: contain;

  max-width: 100%;

}



/* Fix for invisible navbar toggler in light mode */

body.light-mode .navbar-toggler-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

/* Fix for Cropper.js in modals */
#cropModal .modal-content,
#cropModal .modal-body {
    overflow: visible !important;
}

/* Ensure Cropper.js interactive elements are on top and clickable */
.cropper-view-box,
.cropper-face,
.cropper-line,
.cropper-point {
    z-index: 999999 !important; /* Extremely high z-index */
    pointer-events: auto !important; /* Ensure events are not blocked */
}

#cropModal .img-container {
    overflow: visible !important;
}

/* Fix for modal backdrop blocking Cropper.js interaction */
.modal-backdrop.fade.show {
    pointer-events: none !important;
}



/* =================================



   Sidebar Layout Styles V2 (Mobile-First, Collapsible)



   ================================= */



:root {



  --sidebar-width: 250px;



  --sidebar-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;



}







.main-body-container {



  display: flex;



  flex: 1;



}







/* Default (Mobile) Styles */



.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--glass-border);
  padding: 20px 0;
  padding-top: 80px;
  z-index: 1040;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  transform: translateX(calc(-1 * var(--sidebar-width)));
  transition: var(--sidebar-transition);
}







.content-wrapper {



  flex-grow: 1;



  padding: 2rem;



  margin-left: 0; /* Full width on mobile */



  transition: margin-left 0.3s ease-in-out;



}







.sidebar-overlay {



    position: fixed;



    top: 0; left: 0; right: 0; bottom: 0;



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



    z-index: 1039;



    display: none;



}







/* Mobile - When sidebar is toggled visible */



body.sidebar-visible .sidebar {



  transform: translateX(0);



  box-shadow: 0 0 40px rgba(0,0,0,0.5);



}



body.sidebar-visible .sidebar-overlay {



  display: block;



}











/* Desktop Styles */



@media (min-width: 991.98px) {



  /* By default on desktop, sidebar is visible */



    .sidebar {



      transform: translateX(0);



      position: fixed;



      top: 0; /* Below navbar */



      z-index: 1000;



    }



  .content-wrapper {



    margin-left: var(--sidebar-width);



  }



  .sidebar-overlay {



    display: none !important; /* Never show overlay on desktop */



  }







    /* When sidebar is collapsed on desktop */







    .sidebar-collapsed .sidebar {







      transform: translateX(calc(-1 * var(--sidebar-width)));







    }







        .sidebar-collapsed .content-wrapper {







          margin-left: 0;







        }







    







      .navbar.fixed-top {







        margin-left: var(--sidebar-width);







        width: calc(100% - var(--sidebar-width));







        transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;







      }







    







      .sidebar-collapsed .navbar.fixed-top {







          margin-left: 0;







          width: 100%;







      }







    }







/* Shared link styles */



.sidebar-nav .nav-link {



  color: rgba(255,255,255,0.7);



  padding: 12px 20px;



  display: flex;



  align-items: center;



  font-size: 1rem;



  font-weight: 500;



  border-left: 3px solid transparent;



  transition: all 0.3s;



}



.sidebar-nav .nav-link:hover {



  color: #fff;



  background: rgba(255,255,255,0.05);



  border-left-color: var(--primary-color);



}



.sidebar-nav .nav-link.active {



  color: #fff;



  font-weight: 600;



  background: linear-gradient(90deg, rgba(255,0,200,0.2), transparent);



  border-left-color: var(--primary-color);



}



.sidebar-nav .nav-link i {



  font-size: 1.2rem;



  width: 30px;



  text-align: center;



}







/* Light mode adjustments */



body.light-mode .sidebar {



  background: #ffffff;



  border-right: 1px solid #dee2e6;



}



body.light-mode .sidebar-nav .nav-link { color: #6c757d; }



body.light-mode .sidebar-nav .nav-link:hover {



  color: #212529;



  background: #f8f9fa;



  border-left-color: var(--secondary-color);



}



body.light-mode .sidebar-nav .nav-link.active {



  color: #000;



  font-weight: 600;



  background: linear-gradient(90deg, rgba(0,207,255,0.15), transparent);



  border-left-color: var(--secondary-color);



  text-shadow: none;



}
main.content-wrapper {
  padding-top: 80px;
}

/* Balance mobile navbar brand centering when sidebar toggle is present */
@media (max-width: 991.98px) {
  .mobile-nav-placeholder {
    /* Match dimensions of sidebar-toggle-btn for balancing */
    min-width: 44px; /* Based on sidebar-toggle-btn's style */
    height: 44px; /* Based on sidebar-toggle-btn's style */
    visibility: hidden; /* Make it invisible but take up space */
  }
}
@media (min-width: 992px) {
  .mobile-nav-placeholder {
    display: none; /* Hide on desktop */
  }
}
/* ======================
   CONTAINED LOADER
====================== */
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.loader-ring {
  position: relative;
  width: 90px;
  height: 90px;
}

.loader-ring::before,
.loader-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  animation: spin 1.2s linear infinite;
}

.loader-ring::before {
  border-top-color: #00ffe1;
  filter: drop-shadow(0 0 6px #00ffe1);
}

.loader-ring::after {
  inset: 12px;
  border-bottom-color: #ff3c78;
  animation-direction: reverse;
  filter: drop-shadow(0 0 6px #ff3c78);
}

.loading-text {
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #aaa;
  letter-spacing: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.ai-provider-icon {
  color: #00cfff;
  text-shadow: 0 0 5px #00cfff, 0 0 10px #00cfff, 0 0 20px #00cfff;
}

/* =====================
   Installer Page
====================== */
.step-title {
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: var(--primary-color);
}

.btn-custom-login-secondary {
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-custom-login-secondary:hover {
    background: var(--glass-bg);
    border-color: var(--primary-color);
}

.btn-neon-circle {
    width: 60px; /* Make it circular */
    height: 60px; /* Make it circular */
    border-radius: 50%; /* Fully circular */
    background: linear-gradient(45deg, #00ff80, #00ffc8); /* Green gradient */
    color: white;
    font-size: 1.5rem; /* Larger icon/text */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #00ff80; /* Green border */
    box-shadow: 0 0 10px #00ff80, 0 0 20px #00ff80, 0 0 30px #00ff80; /* Neon glow */
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 20px auto; /* Center the button and add some margin */
}

.btn-neon-circle:hover {
    box-shadow: 0 0 15px #00ff80, 0 0 30px #00ff80, 0 0 40px #00ff80;
    transform: scale(1.05);
}

#sysResult ul {
    list-style: none;
    padding: 0;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 15px;
}

#sysResult li {
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-border);
}

#sysResult li:last-child {

    border-bottom: none;

}



/* Lightbox-specific button styles */

.copy-prompt-btn-lightbox {

    padding: 10px 20px;

    border-radius: 8px;

    border: none;

    background: linear-gradient(45deg, #ff00c8, #00cfff);

    color: white !important;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

    box-shadow: 0 5px 15px rgba(255, 0, 200, 0.3);

}



.copy-prompt-btn-lightbox:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(255, 0, 200, 0.5);

}



.download-btn-lightbox {

    padding: 10px 20px;

    border-radius: 8px;

    border: none;

    background: linear-gradient(45deg, #00ff80, #00cfff);

    color: white !important;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

    box-shadow: 0 5px 15px rgba(0, 255, 128, 0.3);

}




.download-btn-lightbox:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 255, 128, 0.5);

}

/* =================================

   Glass Theme Pagination

   ================================= */

.pagination {
    --bs-pagination-color: var(--text-color);
    --bs-pagination-hover-color: var(--primary-color); /* Neon primary */
    --bs-pagination-focus-color: var(--primary-color);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    --bs-pagination-disabled-color: rgba(255, 255, 255, 0.4);
    --bs-pagination-disabled-bg: rgba(255, 255, 255, 0.03);
    --bs-pagination-disabled-border-color: rgba(255, 255, 255, 0.08);

    --bs-pagination-border-width: 1px;
    --bs-pagination-border-radius: 8px; /* Rounded glass feel */
    --bs-pagination-border-color: var(--glass-border);

    /* Glass container feel for the whole pagination block */
    background: rgba(255, 255, 255, 0.05); /* Lighter glass */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px; /* Inner padding */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-item {
    margin: 0 4px; /* Spacing between items */
}

.page-link {
    color: var(--bs-pagination-color);
    background-color: transparent; /* Start with transparent for glass effect */
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    border-radius: var(--bs-pagination-border-radius) !important; /* Override Bootstrap's */
    transition: all 0.3s ease;
    min-width: 40px; /* Ensure a decent click area */
    text-align: center;
    line-height: 1.5; /* Center text vertically */
    display: flex; /* For centering content like "<<" or ">>" */
    align-items: center;
    justify-content: center;

    /* Base glass effect for each link */
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* =================================
   Content Management Action Icons
   ================================= */
.actions-cell {
    /* Flex properties removed to fix table border alignment */
}

.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    margin-right: 8px; /* Added for spacing */
}

.btn-icon-action:hover {
    transform: translateY(-2px) scale(1.05);
    color: #fff;
}

.btn-icon-action.btn-view:hover {
    background: rgba(0, 123, 255, 0.3);
    border-color: rgba(0, 123, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.btn-icon-action.btn-delete:hover {
    background: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.btn-icon-action i {
    font-size: 1rem;
}

/* =================================
   Content Management Table Style
   ================================= */
.table-glass {
    background: transparent;
    border-color: var(--glass-border);
    color: var(--text-color);
}

/* Override bootstrap colors */
.table-glass > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
}

.table-glass thead th {
    border-bottom: 2px solid var(--glass-border);
}

.table-glass tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.table-glass tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.table-glass td, .table-glass th {
    border-color: var(--glass-border);
    vertical-align: middle;
}

.table-glass .img-thumbnail {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
    border-radius: 8px;
}

.page-link:hover {
    color: var(--bs-pagination-hover-color);
    background-color: rgba(255, 255, 255, 0.1); /* Slightly more opaque on hover */
    border-color: var(--bs-pagination-hover-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-2px); /* Subtle lift */
}

.page-item.active .page-link {
    z-index: 1;
    color: var(--bs-pagination-active-color);
    background: linear-gradient(45deg, #ff00c8, #00cfff); /* Neon gradient for active */
    border-color: transparent; /* Border becomes part of gradient */
    box-shadow: 0 5px 15px rgba(255, 0, 200, 0.4), 0 0 20px rgba(0, 207, 255, 0.4); /* Stronger neon glow */
    transform: translateY(-1px); /* Active state slightly lifted */
}

.page-item.disabled .page-link {
    color: var(--bs-pagination-disabled-color);
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
    pointer-events: none; /* Disable clicks */
    opacity: 0.6; /* Visually muted */
    box-shadow: none;
    transform: none; /* Remove hover effects */
}

/* Light mode adjustments for pagination */
body.light-mode .pagination {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --bs-pagination-active-bg: var(--secondary-color);
    --bs-pagination-active-border-color: var(--secondary-color);
    --bs-pagination-hover-color: var(--secondary-color);
    --bs-pagination-disabled-color: rgba(0, 0, 0, 0.4);
    --bs-pagination-disabled-bg: rgba(0, 0, 0, 0.03);
    --bs-pagination-disabled-border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .page-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    color: var(--text-color);
}

body.light-mode .page-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: var(--bs-pagination-hover-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

body.light-mode .page-item.active .page-link {
    background: linear-gradient(45deg, #00cfff, #00ff80); /* Light mode gradient */
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(0, 207, 255, 0.4), 0 0 20px rgba(0, 255, 128, 0.4);
    color: #fff;
}

body.light-mode .page-item.disabled .page-link {
    color: var(--bs-pagination-disabled-color);
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}





.btn-neon-green {

    padding: 10px 20px;

    border-radius: 8px;

    border: none;

    color: white !important;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

    outline: none;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    background: linear-gradient(45deg, #00ff80, #00cfff);

    box-shadow: 0 5px 15px rgba(0, 255, 128, 0.3);

}



.btn-neon-green:hover {







    transform: translateY(-3px);







    box-shadow: 0 8px 25px rgba(0, 255, 128, 0.5);







}











/* Red Neon Modifier (for danger actions) */



.btn-neon-danger {



    background: linear-gradient(45deg, #ff416c, #ff4b2b) !important; /* Red/Orange gradient */



    border: none !important;



    color: #fff !important;



    padding: 10px 20px;



    border-radius: 8px;



    font-weight: 600;



    cursor: pointer;



    transition: all 0.3s ease;



    position: relative;



    overflow: hidden;



    outline: none;



    text-align: center;



    text-decoration: none;



    display: inline-block;



    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3), 



                0 0 10px rgba(255, 65, 108, 0.4);



}







.btn-neon-danger:hover {



    transform: translateY(-3px);



    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.5),



                0 0 15px rgba(255, 65, 108, 0.6);



}







body.light-mode .btn-neon-danger {



    background: linear-gradient(45deg, #ff416c, #ff4b2b) !important;



    color: #fff !important; /* Keep white text in light mode for contrast */



    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.1),



                0 0 10px rgba(255, 65, 108, 0.2);



    text-shadow: none !important;



}







body.light-mode .btn-neon-danger:hover {



    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.15),



                0 0 15px rgba(255, 65, 108, 0.4);



}











/* Backup-specific Neon Button Style (combines .btn-neon and .btn-neon-primary with specific shadows) */



.btn-neon-backup {



    background: linear-gradient(45deg, #ff00c8, #00cfff) !important;



    border: none !important;



    color: #fff !important;



    padding: 12px 24px;



    border-radius: 8px;



    font-weight: 600;



    cursor: pointer;



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



                0 0 10px rgba(255, 0, 200, 0.4), 



                0 0 10px rgba(0, 207, 255, 0.4) !important;



    transition: all 0.3s ease;



    position: relative;



    overflow: hidden;



    text-shadow: 0 0 5px rgba(255,255,255,0.5) !important;



    display: inline-block; /* Ensure it respects width/height for hover effect */



    text-decoration: none; /* Remove underline for links */



}







.btn-neon-backup:hover {



    transform: translateY(-3px);



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3),



                0 0 15px rgba(255, 0, 200, 0.6), 



                0 0 15px rgba(0, 207, 255, 0.6) !important;



}







body.light-mode .btn-neon-backup {















    background: linear-gradient(45deg, #ff00c8, #00cfff) !important; /* Keep gradient in light mode */















    color: #212529 !important; /* Dark text in light mode */















    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), /* Lighter shadow in light mode */















                0 0 10px rgba(255, 0, 200, 0.2), 















                0 0 10px rgba(0, 207, 255, 0.2) !important;















    text-shadow: none !important;















}















/* Light mode for action icons */







body.light-mode .btn-icon-action {







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







    border-color: rgba(0, 0, 0, 0.1);







    color: #212529; /* Dark color for icons in light mode */







}















body.light-mode .btn-icon-action:hover {







    color: #000;







}















body.light-mode .btn-icon-action.btn-view:hover {







    background: rgba(0, 123, 255, 0.1);







    border-color: rgba(0, 123, 255, 0.3);







}















body.light-mode .btn-icon-action.btn-delete:hover {































    background: rgba(220, 53, 69, 0.1);































    border-color: rgba(220, 53, 69, 0.3);































}































/* =================================















   Category Page















   ================================= */















.list-group-item {















    background-color: rgba(255, 255, 255, 0.05) !important;















    border-color: var(--glass-border) !important;















    color: var(--text-color) !important;















}































body.light-mode .list-group-item {















    background-color: rgba(0, 0, 0, 0.03) !important;















    border-color: rgba(0, 0, 0, 0.1) !important;















    color: var(--text-color) !important;















}































.list-group-item .edit-form .form-control {















    background-color: #212529 !important;















    color: #fff !important;















}































body.light-mode .list-group-item .edit-form .form-control {















    background-color: #f8f9fa !important;















    color: #212529 !important;















}