/* 🎨 Enhanced Dark Theme for Forum Excellence
   A comprehensive glassmorphic dark theme with engaging animations, perfect contrast, and modern design
   DARK MODE ONLY - Light mode has been completely removed for consistency and performance

*/

/* Import futuristic fonts for the logo (must be at top of stylesheet) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@700&family=Exo+2:wght@700;900&display=swap');

/* =====================
   🌈 DARK-ONLY COLOR SYSTEM & CSS VARIABLES
   ===================== */
:root,
html,
html.dark {
    /* 🌙 Dark Theme Palette - Permanent Default */
    --bg-page: 8, 12, 16;
    /* Deep space black */
    --bg-card: 15, 23, 35;
    /* Rich dark blue-gray */
    --bg-card-elevated: 20, 28, 42;
    /* Slightly elevated cards */
    --bg-input: 25, 35, 50;
    /* Input backgrounds */
    --text-primary: 248, 250, 252;
    /* Pure white text */
    --text-secondary: 203, 213, 225;
    /* Light gray text */
    --muted: 148, 163, 184;
    /* Muted text */

    /* 🎯 Accent Colors - Modern and engaging */
    --primary: 56, 189, 248;
    /* Sky blue - perfect for dark themes */
    --primary-hover: 14, 165, 233;
    /* Deeper blue on hover */
    --accent: 34, 197, 94;
    /* Emerald green for success states */
    --accent-secondary: 168, 85, 247;
    /* Purple for special elements */
    --warning: 251, 191, 36;
    /* Amber for warnings */
    --error: 248, 113, 113;
    /* Red for errors */
    --success: 74, 222, 128;
    /* Green for success */

    /* 🌟 Glow Effects */
    --glow-primary: 56, 189, 248;
    --glow-accent: 34, 197, 94;
    --glow-purple: 168, 85, 247;
    --shadow-elevation: 0 25px 50px -12px rgba(0, 0, 0, 0.8);

    /* Glow Card Effect Variables */
    --glow-sens: 30;
    --card-bg: linear-gradient(8deg, rgba(15, 23, 35, 0.9) 75%, rgba(20, 28, 42, 0.95) 75.5%);
    --blend: soft-light;
    --glow-blend: plus-lighter;
    --glow-color: 40deg 80% 80%;
    --glow-boost: 0%;

    /* 🥃 Glassmorphism Variables */
    --glass-blur: 25px;
    --glass-blur-heavy: 40px;
    /* Added heavy blur for glassmorphism */
    --glass-radius-large: 1.5rem;
    /* Large border radius for glassmorphic elements */
    --glass-opacity: 0.08;
    --glass-border: rgba(56, 189, 248, 0.2);
    --glass-border-bright: rgba(56, 189, 248, 0.5);
    /* Bright border for primary buttons */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.5);
    /* Added for elevated glass hover */
    --glass-shadow-dark-elevated: 0 24px 64px rgba(0, 0, 0, 0.7);
    /* Added for dark mode elevated glass hover */
    --glass-bg: rgba(15, 23, 35, 0.6);
    --glass-bg-light: rgba(56, 189, 248, 0.08);
    /* Light glass background for inputs and cards */
    --glass-bg-light-hover: rgba(56, 189, 248, 0.12);
    /* Light glass hover background */
    --glass-bg-dark: rgba(15, 23, 35, 0.85);
    /* Dark glass background for dark mode secondary buttons */
    --glass-bg-dark-hover: rgba(20, 28, 42, 0.92);
    /* Dark glass hover background for dark mode */
    --glass-border-dark: rgba(56, 189, 248, 0.18);
    /* Border for dark glass elements */
    --glass-border-glow: 0 0 8px rgba(56, 189, 248, 0.5);
    /* Added for glowing border effect */

    /* Animation Variables */
    --glass-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.7);

    /* Animation Variables */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease-out;
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================
   🎯 FOUNDATIONAL GLASSMORPHIC STYLES
   ===================== */

/* Global Body & Layout - Always Dark */
html,
body {
    background: -moz-linear-gradient(135deg,
            rgb(20, 30, 50) 0%,
            rgb(5, 10, 15) 100%);
    background: linear-gradient(135deg,
            rgb(20, 30, 50) 0%,
            rgb(5, 10, 15) 100%);
    background-attachment: fixed;
    /* Add subtle pattern overlay for texture */
    background-image:
        radial-gradient(circle at 25% 25%, rgba(56, 189, 248, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);
    color: rgb(var(--text-primary));
    transition: background-color var(--transition-normal), color var(--transition-normal);
    font-feature-settings: "cv11", "ss01";
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Force ALL HTML elements to respect dark mode */
* {
    color: inherit;
}

/* =====================
   🚫 GLOBAL DARK MODE ENFORCEMENT
   ===================== */

/* Apply all dark styles globally - no need for .dark class anymore */
html:not(.disabled-dark-override) {
    /* Force dark mode class behavior on HTML element permanently */
    --force-dark: 1;
}

/* Make all .dark styles apply globally by adding them without the .dark prefix
   This is handled by the CSS cascade - all existing .dark rules will still work
   but now we also add global rules for key elements */

/* =====================
   🥃 GLASSMORPHISM BASE MIXINS
   ===================== */

/* Glass Effect Mixin */
.glass-base {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
}

.glass-base::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--glass-highlight);
    opacity: 0.5;
}

/* Elevated Glass Effect */
.glass-elevated {
    background: var(--glass-bg-elevated);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 5px));
    backdrop-filter: blur(calc(var(--glass-blur) + 5px));
    border: 1px solid var(--glass-border);
    box-shadow:
        var(--glass-shadow),
        0 0 20px rgba(var(--glow-primary), 0.1),
        inset 0 1px 0 var(--glass-highlight);
}

/* =====================
   📋 BOARD INDEX & MAIN SECTIONS
   ===================== */

/* Board Index Header Enhancement */
.page-header h2,
.forum-title,
.index-title,
h2 {
    color: rgb(var(--primary));
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-header h2,
.forum-title,
.index-title,
h2 {
    color: rgb(var(--primary));
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Board Index Header Glow Effect */
.page-header h2::after,
.forum-title::after,
.index-title::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            rgb(var(--primary)),
            rgb(var(--accent-secondary)),
            transparent);
    border-radius: 2px;
    animation: gentle-glow 3s ease-in-out infinite alternate;
}

@keyframes gentle-glow {
    0% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* =====================
   📄 INFORMATION SECTION ENHANCEMENT - DISABLED
   ===================== */

/* Information Card Styling - Removed invalid :contains() selectors that break CSS parsing */
/* These rules have been removed because :contains() is not valid CSS */

/* Information Section Content - Removed invalid :contains() selectors */

/* =====================
   🎂 BIRTHDAYS SECTION ENHANCEMENT - DISABLED
   ===================== */

/* Birthdays Header with Emoji - Removed invalid :contains() selectors that break CSS parsing */
/* These rules have been removed because :contains() is not valid CSS */

/* =====================
   💫 MICRO-ANIMATIONS SYSTEM
   ===================== */

/* Hover Lift Animation - Disabled for Anti-Jitter */
.hover-lift {
    transition: box-shadow var(--transition-normal);
}

.hover-lift:hover {
    box-shadow: var(--shadow-elevation);
}

/* Pulse Animation for Notifications */
@keyframes gentle-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Large Notification Ping Animation */
@keyframes notification-ping-large {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.notification-ping-large,
#notification_list_button .animate-ping,
#notification_list_button_phone .animate-ping {
    animation: notification-ping-large 1.5s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.pulse-gentle {
    animation: gentle-pulse 2s ease-in-out infinite;
}

/* Slide In Animation */
@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slide-in-up 0.6s var(--bounce);
}

/* Glow Pulse for Interactive Elements */
@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgb(var(--glow-primary) / 0.3),
            0 0 10px rgb(var(--glow-primary) / 0.2),
            0 0 15px rgb(var(--glow-primary) / 0.1);
    }

    50% {
        box-shadow: 0 0 10px rgb(var(--glow-primary) / 0.5),
            0 0 20px rgb(var(--glow-primary) / 0.3),
            0 0 30px rgb(var(--glow-primary) / 0.2);
    }
}

/* /////////////////// END ROCKET-ANIMZTIONS /////////////////// */

.glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Shimmer Loading Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* =====================
   🃏 GLASSMORPHIC CARD SYSTEM
   ===================== */

/* Base Card Styling with Glass Effect and Glow */
.card,
.card-sm,
.panel {
    border-radius: 16px;
    border: none;
    background: rgba(15, 23, 35, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgb(var(--text-primary));
    padding: .7rem;
    transition: all var(--transition-normal);
    position: relative;

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

    /* Glow effect properties */
    --pads: 40px;
    --color-sens: calc(var(--glow-sens) + 20);
    --pointer-°: 45deg;
    --pointer-d: 60;
    /* Default distance for base pearl shimmer visibility */
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    background-repeat: no-repeat;
}

/* Glass Card Highlight */
.card::before,
.card-sm::before,
.panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--glass-highlight);
    opacity: 0.6;
}

/* Glow Effect Pseudo-elements */
.card::after,
.card-sm::after,
.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
    /* mesh gradient background */
    border: 1px solid transparent;
    background:
        radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) padding-box,
        linear-gradient(#c299ff 0 100%) padding-box;
    /* mask for glow effect */
    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
        conic-gradient(from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-composite: subtract, add, add, add, add, add;
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
    mix-blend-mode: var(--blend);
}

.card>.glow,
.card-sm>.glow,
.panel>.glow {
    content: "";
    position: absolute;
    inset: calc(var(--pads) * -1);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    mask-image:
        conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
    mix-blend-mode: var(--glow-blend);
    transition: opacity 0.25s ease-out;
}

.card>.glow::before,
.card-sm>.glow::before,
.panel>.glow::before {
    content: "";
    position: absolute;
    inset: var(--pads);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px hsl(var(--glow-color) / 100%),
        inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
        inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
        inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
        inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
        inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
        inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)),
        0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
        0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
        0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
        0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
        0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
        0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
}

/* Hide glow when not hovering */
.card:not(:hover):not(.animating)::after,
.card:not(:hover):not(.animating)>.glow,
.card-sm:not(:hover):not(.animating)::after,
.card-sm:not(:hover):not(.animating)>.glow,
.panel:not(:hover):not(.animating)::after,
.panel:not(:hover):not(.animating)>.glow {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

/* Dark Theme Glassmorphic Cards */
.card,
.card-sm,
.panel {
    background: rgba(15, 23, 35, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: none;
    color: rgb(var(--text-primary));
    box-shadow:
        var(--glass-shadow),
        0 0 20px rgba(var(--glow-primary), 0.05),
        inset 0 1px 0 var(--glass-highlight);
}

/* Glassmorphic Card Hover Effects */
.card:hover,
.panel:hover {
    background: rgba(20, 28, 42, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(var(--glow-primary), 0.15);
}

/* Special Glassmorphic Gradient Cards */
.card.card-special {
    background: linear-gradient(135deg,
            var(--glass-bg),
            var(--glass-bg-elevated),
            rgba(var(--glow-primary), 0.05));
    border: 1px solid rgba(var(--glow-primary), 0.3);
}

/* Glassmorphic Information Cards - Removed invalid :contains() selectors */
/* Glassmorphic Birthday Cards - Removed invalid :contains() selectors */

/* 🎨 Creative Card Titles - Modern Typography Design */
.card-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: rgb(var(--text-primary));
    position: relative;
    padding: 0;
    background: none;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    transition: all var(--transition-normal);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    overflow: hidden;
}

/* Creative Gradient Text Effect */
.card-title {
    color: rgb(var(--text-primary));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Modern Accent Line - Minimal and Elegant */
.card-title::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(var(--glow-primary), 0.8),
            rgba(var(--accent-secondary), 0.6));
    border-radius: 1px;
    transition: width var(--transition-normal) var(--bounce);
}

/* Hover Effect - Expanding Accent Line */
.card:hover .card-title::before {
    width: 4rem;
    background: linear-gradient(90deg,
            rgba(var(--glow-primary), 1),
            rgba(var(--accent-secondary), 0.8),
            rgba(var(--glow-accent), 0.6));
    box-shadow: 0 0 8px rgba(var(--glow-primary), 0.4);
}

/* Card Small Variants - Enhanced for creativity */
.card-sm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.card-sm .card-title {
    font-size: 1rem;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0.02em;
}

.card-sm .card-title::before {
    display: none;
}

/* =====================
   🧭 GLASSMORPHIC NAVIGATION & NAVBAR
   ===================== */

/* Logo Styling - Replace inline styles */
.logo {
    height: 24px;
    max-width: 100%;
}

.logo.custom-size {
    /* Will be handled by CSS custom properties set via JavaScript */
    width: var(--logo-width, auto);
    height: var(--logo-height, 24px);
}

/* Hidden elements - replace inline display:none */
.js-hidden {
    display: none;
}

/* Progress bars - replace inline width styles */
.file-progress-bar {
    width: 0%;
    transition: width 0.3s ease;
}

.poll-progress-bar {
    width: var(--poll-width, 0%);
}

/* Color spans - replace inline color styles */
.user-color {
    color: var(--user-color);
    font-weight: bold;
}

.group-color {
    color: var(--group-color);
    font-weight: bold;
}

/* =====================
   🚫 ANTI-JITTER & LAYOUT STABILITY
   ===================== */

/* Prevent layout shifts and jitter effects */
* {
    box-sizing: border-box;
}

/* Remove all conflicting inline transforms and transitions */
[style*="transform"],
[style*="translate"],
[style*="scale"] {
    transform: none;
}

/* Force stable positioning for navigation elements */
.navbar,
.navbar *,
nav,
nav *,
#nav-main,
#nav-main * {
    transform: none;
    transition: background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

/* Ensure consistent sizing */
.navbar a,
nav a,
#nav-main a {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Prevent text wrapping issues */
.navbar,
nav,
#nav-main {
    white-space: nowrap;
    overflow: visible;
    /* Prevent logo clipping */
}

.navbar a,
nav a,
#nav-main a {
    white-space: normal;
    text-align: center;
}



/* =====================
   🌊 BORDERLESS OPEN DESIGN
   ===================== */



/* Enhanced Button Styling */
/* .btn,
.button,
button,
.form-button,
input[type="submit"],
input[type="button"] {
  background: linear-gradient(135deg,
      rgb(var(--accent-primary)),
      rgb(var(--primary)))  ;
  color: white  ;
  padding: 0.875rem 1.5rem  ;
  border-radius: 12px  ;
  font-size: 0.95rem  ;
  font-weight: 600  ;
  text-align: center  ;
  cursor: pointer  ;
  transition: all var(--transition-smooth)  ;
  box-shadow:
    0 4px 12px rgba(var(--accent-primary), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2)  ;
  -webkit-backdrop-filter: blur(10px)  ;
  backdrop-filter: blur(10px)  ;
  margin: 0.5rem 0  ;
  min-height: 32px  ;
  display: inline-flex  ;
  align-items: center  ;
  justify-content: center  ;
  text-decoration: none  ;
} */

/* Remove hover border changes */
/* .card:hover,
.panel:hover,
.navbar a:hover,
nav a:hover,
#nav-main a:hover,
.dropdown-item:hover,
.menu-item:hover,
.btn:hover,
.button:hover,
button:hover,
input:hover,
textarea:hover,
select:hover,
.form-control:hover,
.inputbox:hover {
  border: none  ;
  outline: none  ;
} */

/* Enhanced Button Hover */
.btn:hover,
.button:hover,
button:hover,
.form-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: scale(1.02);
    box-shadow:
        0 8px 20px rgba(var(--accent-primary), 0.35),
        0 0 25px rgba(var(--glow-primary), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg,
            rgb(var(--primary)),
            rgb(var(--accent-primary)));
}

/* Button Active State */
.btn:active,
.button:active,
button:active {
    transform: scale(0.98);
    box-shadow:
        0 2px 8px rgba(var(--accent-primary), 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Remove focus borders too */
*:focus,
*:focus-visible,
*:focus-within {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Pill Utility Class */
.pill {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Base Navbar Styling */
.navbar,
.navbar a,
.navbar-nav a,
nav a {
    color: rgb(var(--text-secondary));
    transition: all var(--transition-fast);
}

/* Glassmorphic Navigation Magic */
.navbar,
.header,
.nav-main,
#nav-main {
    background: var(--glass-bg-elevated);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: none;
    border-radius: 16px;
    margin: 0.5rem;
    box-shadow:
        var(--glass-shadow),
        0 0 30px rgba(var(--glow-primary), 0.1),
        inset 0 1px 0 var(--glass-highlight);
    position: relative;
    z-index: 1000;
}

.navbar,
.navbar a,
.navbar-nav a,
nav a,
#nav-main a {
    color: rgb(var(--text-primary));
}

/* Navigation Items with Glass Effect */
.navbar a,
nav a,
#nav-main a {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin: 0.25rem;
    background: transparent;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

/* Navigation Item Glass Hover */
.navbar a:hover,
nav a:hover,
#nav-main a:hover {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: none;
    color: rgb(var(--primary));
    text-shadow: 0 0 8px rgb(var(--glow-primary) / 0.5);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(var(--glow-primary), 0.2),
        inset 0 1px 0 var(--glass-highlight);
}

/* Navigation Item Glass Shimmer Effect */
.navbar a::before,
nav a::before,
#nav-main a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: left var(--transition-normal);
}

.navbar a:hover::before,
nav a:hover::before,
#nav-main a:hover::before {
    left: 100%;
}

/* Active Navigation States with Glass */
.navbar .active,
#nav-main .active {
    background: var(--glass-bg-elevated);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: none;
    color: rgb(var(--primary));
    font-weight: 600;
    position: relative;
    box-shadow:
        0 4px 15px rgba(var(--glow-primary), 0.3),
        inset 0 1px 0 var(--glass-highlight);
}

.navbar .active::after,
#nav-main .active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgb(var(--glow-primary)),
            transparent);
    border-radius: 2px;
    animation: active-glow 2s ease-in-out infinite alternate;
}

@keyframes active-glow {
    0% {
        opacity: 0.6;
        transform: translateX(-50%) scaleX(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

/* Logo Styling with Hover Effect */
.logo {
    transition: all var(--transition-normal);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.logo:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 12px rgb(var(--glow-primary) / 0.3));
}

/* =====================
   🍞 BREADCRUMBS & DROPDOWNS
   ===================== */

/* Enhanced Breadcrumbs */
.breadcrumb,
.breadcrumbs,
.breadcrumb a,
.breadcrumbs a {
    color: rgb(var(--text-secondary));
    transition: all var(--transition-fast);
}

.breadcrumb,
.breadcrumbs,
.breadcrumb a,
.breadcrumbs a {
    color: rgb(var(--text-secondary));
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: rgb(var(--primary));
    text-decoration: none;
}

/* =====================
   🍞 CARVED BREADCRUMBS PANEL - INNER BEVEL EFFECT
   ===================== */

/* Breadcrumbs panel with carved/inner bevel styling - darker than header */
.breadcrumbs-panel {
    background: -moz-linear-gradient(135deg,
            rgba(8, 12, 16, 0.95) 0%,
            rgba(5, 8, 12, 0.98) 50%,
            rgba(3, 5, 8, 1) 100%);
    background: linear-gradient(135deg,
            rgba(8, 12, 16, 0.95) 0%,
            rgba(5, 8, 12, 0.98) 50%,
            rgba(3, 5, 8, 1) 100%);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 0.75rem;
    margin: 0.5rem 0;
    transition: all var(--transition-normal);
    position: relative;
    z-index: 10;
    box-shadow:
        /* Inner carved shadow - top left lighter */
        /* ucp */
        /* Inner carved shadow - bottom right darker */
        /* inset -1px -1px 4px rgba(255, 255, 255, 0.02), */
        /* Outer subtle glow */
        0 2px 12px rgba(0, 0, 0, 0.4),
        /* Very subtle primary glow */
        0 0 15px rgba(var(--primary), 0.05);
    position: relative;
    overflow: hidden;
}

.breadcrumbs-panel {
    background: -moz-linear-gradient(135deg,
            rgba(8, 12, 16, 0.95) 0%,
            rgba(5, 8, 12, 0.98) 50%,
            rgba(3, 5, 8, 1) 100%);
    background: linear-gradient(135deg,
            rgba(8, 12, 16, 0.95) 0%,
            rgba(5, 8, 12, 0.98) 50%,
            rgba(3, 5, 8, 1) 100%);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        /* Enhanced inner carved shadows for dark mode */
        inset 3px 3px 10px rgba(0, 0, 0, 0.7),
        inset -2px -2px 6px rgba(255, 255, 255, 0.025),
        /* Outer depth shadow */
        0 4px 16px rgba(0, 0, 0, 0.5),
        /* Minimal primary accent */
        0 0 20px rgba(var(--primary), 0.04);
}

/* Hover effect for carved breadcrumbs panel */
.breadcrumbs-panel:hover {
    border-color: rgba(0, 0, 0, 0.5);
    box-shadow:
        /* Deeper carved effect on hover */
        inset 4px 4px 12px rgba(0, 0, 0, 0.8),
        inset -2px -2px 8px rgba(255, 255, 255, 0.03),
        /* Enhanced outer shadow */
        0 6px 20px rgba(0, 0, 0, 0.6),
        /* Slightly more primary glow */
        0 0 25px rgba(var(--primary), 0.08);
    backdrop-filter: blur(35px) saturate(160%);
    -webkit-backdrop-filter: blur(35px) saturate(160%);
}

/* Add subtle texture overlay for enhanced carved effect */
.breadcrumbs-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px;
    pointer-events: none;
    opacity: 0.6;
}

/* Enhanced breadcrumb items styling for carved panel */
.breadcrumbs-panel .breadcrumb-item a {
    color: rgba(var(--text-secondary), 0.9);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: all var(--transition-fast);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 500;
    box-shadow:
        inset 1px 1px 3px rgba(0, 0, 0, 0.4),
        inset -1px -1px 2px rgba(255, 255, 255, 0.02);
}

.breadcrumbs-panel .breadcrumb-item a:hover {
    color: rgb(var(--primary));
    background: rgba(var(--primary), 0.15);
    border-color: rgba(var(--primary), 0.3);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.5),
        inset -1px -1px 3px rgba(255, 255, 255, 0.03),
        0 0 15px rgba(var(--primary), 0.2);
    text-decoration: none;
}

/* Current page breadcrumb styling - more prominent in carved panel */
.breadcrumbs-panel .breadcrumb-item:last-child a,
.breadcrumbs-panel .text-current {
    color: rgb(var(--text-primary));
    background: linear-gradient(135deg,
            rgba(var(--primary), 0.2) 0%,
            rgba(var(--primary), 0.15) 100%);
    border-color: rgba(var(--primary), 0.4);
    font-weight: 600;
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.6),
        inset -1px -1px 3px rgba(255, 255, 255, 0.04),
        0 0 20px rgba(var(--primary), 0.25);
}

/* Breadcrumb separators - enhanced for carved panel */
.breadcrumbs-panel .iconify {
    color: rgba(var(--text-secondary), 0.4);
    transition: all var(--transition-fast);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Remove default borders and backgrounds - force carved styling */
.breadcrumbs-panel.border-b.border-gray-200,
.breadcrumbs-panel.bg-white {
    border-bottom: none;
    background: linear-gradient(135deg,
            rgba(8, 12, 16, 0.95) 0%,
            rgba(5, 8, 12, 0.98) 50%,
            rgba(3, 5, 8, 1) 100%);
}

/* Container spacing adjustments */
.breadcrumbs-panel .layout-container {
    padding: 1rem 1.5rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .breadcrumbs-panel {
        border-radius: 0.5rem;
        margin: 0.25rem 0;
    }

    .breadcrumbs-panel .layout-container {
        padding: 0.75rem 1rem;
    }

    .breadcrumbs-panel .breadcrumb-item a {
        padding: 0.375rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Enhanced dropdown-item styling within breadcrumbs */
.breadcrumbs-panel .dropdown-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all var(--transition-fast);
    color: rgb(var(--text-secondary));
    font-weight: 500;
}

.breadcrumbs-panel .dropdown-item:hover {
    background: rgba(var(--primary), 0.1);
    border-color: rgba(var(--primary), 0.25);
    color: rgb(var(--primary));
    box-shadow: 0 0 15px rgba(var(--primary), 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Focus states for accessibility */
.breadcrumbs-panel .dropdown-item:focus {
    outline: 2px solid rgba(var(--primary), 0.5);
    outline-offset: 2px;
    background: rgba(var(--primary), 0.08);
}

/* =====================
   📋 DROPDOWN MENU SYSTEM FIX
   ===================== */

/* CRITICAL: Override white backgrounds from main stylesheet */
.dropdown,
.\!dropdown,
.dropdown-menu,
.menu,
.nav-menu,
.sub-menu,
.context-menu {
    background-color: rgb(var(--bg-card));
    background: linear-gradient(145deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    border: 1px solid rgb(var(--glow-primary) / 0.3);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    color: rgb(var(--text-primary));
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.6),
        0 10px 10px -5px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgb(var(--glow-primary) / 0.3),
        0 0 30px rgb(var(--glow-primary) / 0.2);
}

/* Z-Index Hierarchy Fix */
.dropdown,
.\!dropdown {
    z-index: 1000;
}

.dropdown-menu,
.menu,
.nav-menu {
    z-index: 9998;
}

.sub-menu,
.context-menu {
    z-index: 1000;
}

/* Modal overlays should be highest */
.modal,
.overlay,
.modal-backdrop {
    z-index: 1000;
}

/* Tooltips should be above dropdowns */
.tooltip,
.popover {
    z-index: 1000;
}

/* Modern Dropdown Styling */
.dropdown-item,
.dropdown a {
    color: rgb(var(--text-secondary));
    padding: 0.75rem 1rem;
    transition: all var(--transition-fast);
    border-radius: 6px;
    margin: 2px;
}

.dropdown-item,
.dropdown a,
.dropdown li a,
.menu-item,
.nav-item a {
    color: rgb(var(--text-primary));
    background: transparent;
    border: 1px;
    display: block;
    padding: 0.75rem .5rem;
    transition: all var(--transition-fast);
    border-radius: 6px;
    margin: 2px;
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown a:hover,
.dropdown li a:hover,
.menu-item:hover,
.nav-item a:hover {
    background: linear-gradient(135deg,
            rgb(var(--glow-primary) / 0.15),
            rgb(var(--glow-primary) / 0.08));
    color: rgb(var(--primary));
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dropdown Separators */
.dropdown-divider,
.menu-divider {
    background: linear-gradient(90deg,
            transparent,
            rgb(var(--glow-primary) / 0.2),
            transparent);
    height: 1px;
    border: none;
    margin: 0.5rem 0;
}

/* Button text in navbar */
.navbar .btn,
nav .btn {
    color: rgb(255, 255, 255);
}

/* =====================
   📝 ENHANCED FORM SYSTEM
   ===================== */

/* Enhanced Text Utilities */
.text-gray-500,
.text-gray-400,
.text-gray-300 {
    color: rgb(var(--text-secondary));
}

.text-gray-500,
.text-gray-400,
.text-gray-300 {
    color: rgb(var(--text-secondary));
}

.text-slate-500,
.text-slate-400,
.text-slate-300 {
    color: rgb(var(--text-secondary));
}

.text-slate-500,
.text-slate-400,
.text-slate-300 {
    color: rgb(var(--text-secondary));
}

/* /* 🌟 GLASSMORPHIC BUTTON SYSTEM 🌟 */
/* .mark-read,
.mark-forums-read,
.button-secondary,
.btn-secondary,
.form-button,
.submit-button,
input[type="submit"],
input[type="button"],
button:not(.btn-primary):not(.navbar .btn-primary),
.button:not(.btn-primary) {
  background: var(--glass-bg-light)  ;
  backdrop-filter: var(--glass-blur)  ;
  -webkit-backdrop-filter: var(--glass-blur)  ;
  color: rgb(var(--text-primary))  ;
  border: var(--glass-border)  ;
  border-radius: var(--glass-radius)  ;
  font-weight: 600  ;
  font-size: 0.9rem  ;
  transition: all var(--transition-smooth)  ;
  position: relative  ;
  overflow: hidden  ;
  text-transform: uppercase  ;
  letter-spacing: 0.05em  ;
  cursor: pointer  ;
  box-shadow: var(--glass-shadow)  ;
} */

/* .mark-read,
.mark-forums-read,
.button-secondary,
.btn-secondary,
.form-button,
.submit-button,
input[type="submit"],
input[type="button"],
button:not(.btn-primary):not(.navbar .btn-primary),
.button:not(.btn-primary) {

  backdrop-filter: var(--glass-blur-heavy)  ;
  -webkit-backdrop-filter: var(--glass-blur-heavy)  ;
  color: rgb(var(--text-primary))  ;
  border: var(--glass-border-dark)  ;
  box-shadow:
    var(--glass-shadow-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.1)  ;
} */
*/

/* Button Hover Glassmorphic Magic ✨ */
.mark-read:hover,
.mark-forums-read:hover,
.button-secondary:hover,
.form-button:hover,
.submit-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.btn-primary):hover {
    background: var(--glass-bg-light-hover);
    box-shadow: var(--glass-shadow-elevated);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.mark-read:hover,
.mark-forums-read:hover,
.button-secondary:hover,
.form-button:hover,
.submit-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.btn-primary):hover {
    background: var(--glass-bg-dark-hover);
    border: var(--glass-border-glow);
    box-shadow:
        var(--glass-shadow-dark-elevated),
        0 0 40px rgba(var(--primary), 0.5),
        0 0 80px rgba(var(--primary), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
}

/*
.btn-primary {
  background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--primary-hover)))  ;
  backdrop-filter: var(--glass-blur)  ;
  -webkit-backdrop-filter: var(--glass-blur)  ;
  border: var(--glass-border-bright)  ;
  border-radius: var(--glass-radius)  ;
  padding: 0.875rem 1.75rem  ;
  font-weight: 700  ;
  transition: all var(--transition-smooth)  ;
  text-transform: uppercase  ;
  letter-spacing: 0.05em  ;
  position: relative  ;
  overflow: hidden  ;
  color: white  ;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)  ;
  box-shadow:
    var(--glass-shadow),
    0 0 20px rgba(var(--primary), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3)  ;
}

.btn-primary::before {
  content: ''  ;
  position: absolute  ;
  top: 0  ;
  left: -100%  ;
  width: 100%  ;
  height: 100%  ;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent)  ;
  transition: left var(--transition-normal)  ;
} */

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--primary-hover)));
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    box-shadow:
        var(--glass-shadow-dark),
        0 0 30px rgba(var(--primary), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow:
        var(--glass-shadow-elevated),
        0 0 50px rgba(var(--primary), 0.7),
        0 0 100px rgba(var(--primary), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
}

/* Enhanced Glassmorphic Input Styling */
/* input,
textarea,
select,
.inputbox {
  background: var(--glass-bg-light)  ;
  backdrop-filter: var(--glass-blur)  ;
  -webkit-backdrop-filter: var(--glass-blur)  ;
  color: rgb(var(--text-primary))  ;
  border: var(--glass-border)  ;
  border-radius: var(--glass-radius)  ;
  padding: 0.5rem 0.75rem  ;
  height: auto  ;
  min-height: 24px  ;
  margin-bottom: 0.75rem  ;
  transition: all var(--transition-smooth)  ;
  font-size: 0.95rem  ;
  line-height: 1.5  ;
  box-shadow: var(--glass-shadow)  ;
  position: relative  ;
  width: 100%  ;
  box-sizing: border-box  ;
} */

/* input:focus,
textarea:focus,
select:focus,
.inputbox:focus {
  background: var(--glass-bg-light-hover)  ;
  border: none  ;
  outline: none  ;
  box-shadow:
    var(--glass-shadow-elevated),
    0 0 20px rgba(var(--accent-primary), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1)  ;
  backdrop-filter: blur(20px) saturate(180%)  ;
  -webkit-backdrop-filter: blur(20px) saturate(180%)  ;
}
 */
input,
textarea,
select,
.inputbox {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    color: rgb(var(--text-primary));
    border: var(--glass-border-dark);
    box-shadow:
        var(--glass-shadow-dark),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px rgba(var(--primary), 0.1);
}

input:focus,
textarea:focus,
select:focus,
.inputbox:focus {
    background: var(--glass-bg-dark-hover);
    border: none;
    outline: none;
    box-shadow:
        var(--glass-shadow-dark-elevated),
        0 0 25px rgba(var(--accent-primary), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
}

/* Glassmorphic Placeholder Styling */
input::placeholder,
textarea::placeholder,
.inputbox::placeholder {
    color: rgba(var(--text-secondary), 0.7);
    font-style: italic;
    transition: all var(--transition-fast);
}

input::placeholder,
textarea::placeholder,
.inputbox::placeholder {
    color: rgba(var(--text-secondary), 0.6);
}

input:focus::placeholder,
textarea:focus::placeholder,
.inputbox:focus::placeholder {
    color: rgba(var(--text-secondary), 0.5);
    transform: translateX(4px);
}

/* =====================
   🔐 PASSWORD FIELD CONSISTENT STYLING
   ===================== */

/* Ensure password input fields have identical styling to username/text fields */
input[type="password"] {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    color: rgb(var(--text-primary));
    border: var(--glass-border-dark);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: all var(--transition-normal);
    box-shadow:
        var(--glass-shadow-dark),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px rgba(var(--primary), 0.1);
    font-family: inherit;
    letter-spacing: normal;
}

input[type="password"]:focus {
    background: var(--glass-bg-dark-hover);
    border: none;
    outline: none;
    box-shadow:
        var(--glass-shadow-dark-elevated),
        0 0 25px rgba(var(--accent-primary), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
}

input[type="password"]:hover {
    border-color: rgba(var(--primary), 0.3);
    box-shadow:
        var(--glass-shadow-dark),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 15px rgba(var(--primary), 0.15);
}

input[type="password"]::placeholder {
    color: rgba(var(--text-secondary), 0.6);
    font-style: italic;
    transition: all var(--transition-fast);
}

input[type="password"]:focus::placeholder {
    color: rgba(var(--text-secondary), 0.5);
    transform: translateX(4px);
}

/* Dark mode specific password field styling */
input[type="password"] {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    color: rgb(var(--text-primary));
    border: var(--glass-border-dark);
    box-shadow:
        var(--glass-shadow-dark),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px rgba(var(--primary), 0.1);
}

input[type="password"]:focus {
    background: var(--glass-bg-dark-hover);
    border: none;
    outline: none;
    box-shadow:
        var(--glass-shadow-dark-elevated),
        0 0 25px rgba(var(--accent-primary), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
}

input[type="password"]::placeholder {
    color: rgba(var(--text-secondary), 0.6);
}

/* Ensure password fields with bg-white class are styled consistently */
input[type="password"].bg-white {
    background-color: rgba(var(--bg-input), 1);
    border-color: rgba(var(--text-secondary), 0.2);
    color: rgb(var(--text-primary));
}

/* Glassmorphic Select Dropdown Enhancement */
/* select,
.select-box {
  cursor: pointer  ;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")  ;
  background-position: right 1rem center  ;
  background-repeat: no-repeat  ;
  background-size: 1.25em 1.25em  ;
  padding-right: 3rem  ;
  appearance: none  ;
  position: relative  ;
} */

/* select,
.select-box {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")  ;
}

select:hover,
.select-box:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2366d9ef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")  ;
} */

/* Glassmorphic Form Groups and Fieldsets */
fieldset,
.form-group,
.form-section {
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* fieldset::before,
.form-group::before,
.form-section::before {
  content: ''  ;
  position: absolute  ;
  top: 0  ;
  left: 0  ;
  right: 0  ;
  height: 1px  ;
  background: linear-gradient(90deg,
      transparent,
      rgba(var(--primary), 0.6),
      transparent)  ;
  opacity: 0  ;
  transition: opacity var(--transition-normal)  ;
} */

fieldset:hover,
.form-group:hover,
.form-section:hover {
    box-shadow: var(--glass-shadow-elevated);
}

fieldset:hover::before,
.form-group:hover::before,
.form-section:hover::before {
    opacity: 1;
}

fieldset,
.form-group,
.form-section {
    background: transparent;
    border: var(--glass-border-dark);
}

fieldset:hover,
.form-group:hover,
.form-section:hover {
    background: transparent;
    box-shadow:
        var(--glass-shadow-dark-elevated),
        0 0 30px rgba(var(--primary), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Glassmorphic Checkbox and Radio Enhancement */
/* .checkbox,
.radio,
.form-check {
  color: rgb(var(--text-secondary))  ;
  display: flex  ;
  align-items: center  ;
  gap: 0.75rem  ;
  padding: 0.75rem  ;
  border-radius: var(--glass-radius)  ;
  background: var(--glass-bg-light)  ;
  backdrop-filter: var(--glass-blur)  ;
  -webkit-backdrop-filter: var(--glass-blur)  ;
  border: var(--glass-border)  ;
  transition: all var(--transition-smooth)  ;
  cursor: pointer  ;
  position: relative  ;
} */


.checkbox,
.radio,
.form-check {
    color: rgb(var(--text-primary));
    background: rgb(51 71 103 / 85%);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: var(--glass-border-dark);
    box-shadow: var(--glass-shadow-dark);
}

.checkbox:hover,
.radio:hover,
.form-check:hover {
    color: rgb(var(--primary));
    background: var(--glass-bg-dark-hover);
    box-shadow:
        var(--glass-shadow-dark-elevated),
        0 0 20px rgba(var(--primary), 0.3);
}


/* Base checkbox styling */
input[type="checkbox"] {
    position: relative !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid rgba(var(--text-secondary), 0.5) !important;
    background: rgba(15, 23, 42, 0.8) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Checked state for checkboxes */
input[type="checkbox"]:checked {
    background: linear-gradient(135deg,
            rgb(var(--accent-primary)),
            rgb(var(--primary))) !important;
    border-color: rgb(var(--accent-primary)) !important;
    box-shadow:
        0 0 15px rgba(var(--accent-primary), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Hide checkmark on unchecked checkboxes */
input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}

/* Show checkmark only when checked */
input[type="checkbox"]:checked::after {
    content: "✓" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    line-height: 1 !important;
}

/* Ensure password and text inputs don't get checkbox styles */
input[type="password"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    appearance: auto !important;
    -webkit-appearance: none !important;
}

input[type="password"]::after,
input[type="text"]::after,
input[type="email"]::after {
    content: none !important;
    display: none !important;
}

/* Checked state for radio buttons */
input[type="radio"] {
    position: relative !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(var(--text-secondary), 0.5) !important;
    background: rgba(15, 23, 42, 0.8) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 6px 0 0 !important;
    flex-shrink: 0 !important;
}

input[type="radio"]:checked {
    background: linear-gradient(135deg,
            rgb(var(--accent-primary)),
            rgb(var(--primary))) !important;
    border-color: rgb(var(--accent-primary)) !important;
    box-shadow:
        0 0 15px rgba(var(--accent-primary), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 6px !important;
    height: 6px !important;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Radio button row alignment */
.radio-row,
dl dd label,
fieldset label,
.post-options label {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 1rem !important;
    vertical-align: middle !important;
}

/* Hover states - NO transform to prevent jumping */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: rgba(var(--accent-primary), 0.6) !important;
    box-shadow: 0 0 10px rgba(var(--accent-primary), 0.2) !important;
    /* Removed transform: scale(1.05) - this caused elements to jump */
}

/* Focus states */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    border-color: rgba(var(--accent-primary), 0.6);
    box-shadow:
        0 0 0 2px rgba(var(--accent-primary), 0.15),
        0 0 12px rgba(var(--accent-primary), 0.2);
}

/* =====================
   ✨ GLASSMORPHIC GLOBAL UTILITIES ✨
   ===================== */

/* Universal Glassmorphic Classes */
.glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: var(--glass-border-dark);
    box-shadow: var(--glass-shadow-dark);
}

.glass-elevated {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-elevated);
}

.glass-glow {
    box-shadow:
        var(--glass-shadow-dark),
        0 0 30px rgba(var(--primary), 0.3),
        0 0 60px rgba(var(--primary), 0.1);
}

/* Responsive Glassmorphic Adjustments */
@media (max-width: 768px) {
    :root {
        --glass-blur: blur(8px);
        --glass-blur-heavy: blur(12px);
        --glass-radius: 0.75rem;
        --glass-radius-large: 1rem;
    }

    .glass-mobile-reduce {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

@media (max-width: 480px) {
    :root {
        --glass-blur: blur(6px);
        --glass-blur-heavy: blur(8px);
        --glass-radius: 0.5rem;
        --glass-radius-large: 0.75rem;
    }
}

/* Performance Optimization for Lower-End Devices */
@media (prefers-reduced-motion: reduce) {
    * {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
        transition: none;
    }

    .glass-light,
    .glass-dark {
        background: rgba(var(--bg-card), 0.95);
    }
}

/* =====================
   🎪 ADDITIONAL FORUM-SPECIFIC COMPONENTS
   ===================== */

/* Page Layout & Backgrounds */
#page-body,
.page-body {
    background:
        /* Animated wave overlays */
        radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 60%),
        /* Main dark gradient */
        -moz-linear-gradient(135deg, rgb(20, 30, 50) 0%, rgb(5, 10, 15) 100%),
        linear-gradient(135deg, rgb(20, 30, 50) 0%, rgb(5, 10, 15) 100%);

    background-size: 200% 200%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: rgb(var(--text-primary));
    transition: all var(--transition-normal);
}

/* Enhanced Forum Sections */
.forabg,
.forumbg,
.post,
.postbody {
    background: linear-gradient(135deg, rgb(var(--bg-card)), rgb(249, 250, 251));
    color: rgb(var(--text-primary));
    border: 1px solid rgba(var(--muted), 0.2);
    border-radius: 12px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.forabg,
.forumbg,
.post,
.postbody {
    background: linear-gradient(145deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    border: 1px solid rgb(var(--glow-primary) / 0.3);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 0 20px rgb(var(--glow-primary) / 0.1),
        inset 0 1px 0 rgb(255, 255, 255 / 0.05);
}

.forabg:hover,
.forumbg:hover {
    border-color: rgb(var(--glow-primary) / 0.5);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 30px rgb(var(--glow-primary) / 0.2),
        inset 0 1px 0 rgb(255, 255, 255 / 0.1);
}

/* Enhanced Tables and Lists */
.topiclist,
.forumlist,
table {
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
}

.topiclist,
.forumlist,
table {
    background: linear-gradient(145deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    border: 1px solid rgb(var(--glow-primary) / 0.2);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 12px rgb(var(--glow-primary) / 0.05);
}

thead,
tbody,
tr {
    background: transparent;
    color: rgb(var(--text-primary));
}

th,
td {
    background: transparent;
    border-color: rgb(var(--glow-primary) / 0.1);
    transition: all var(--transition-fast);
}

tr:nth-child(even) {
    background: rgba(var(--glow-primary), 0.02);
}

tr:hover {
    background: rgba(var(--glow-primary), 0.05);
    transform: translateX(2px);
}

/* Information Panels with Enhanced Design */
.information,
.panel,
.box,
[class*="panel"] {
    color: rgb(var(--text-primary));
    border: 0px solid rgba(var(--muted), 0.2);
    border-radius: 0px;
    transition: all var(--transition-normal);
}


.information,
.panel,
.box {
    background: linear-gradient(145deg, rgb(15 23 35 / 0%), rgb(20 28 42 / 0%));
    color: rgb(var(--text-primary));
    border: 1px solid rgb(var(--glow-primary) / 0.3);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 0 20px rgb(var(--glow-primary) / 0.1),
        inset 0 1px 0 rgb(255, 255, 255 / 0.05);
}

/* Background Utilities */
.bg-gray-50,
.bg-gray-100 {
    background: linear-gradient(135deg, rgb(249, 250, 251), rgb(243, 244, 246));
    transition: background var(--transition-normal);
}

.bg-gray-50,
.bg-gray-100 {
    background: linear-gradient(135deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
}

.bg-white {
    background: rgb(255, 255, 255);
}

.bg-white {
    background: linear-gradient(145deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    color: rgb(var(--text-primary));
}

/* Force override for ALL white backgrounds in dark mode */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"] {
    background: rgb(var(--bg-card));
    color: rgb(var(--text-primary));
}

/* =====================
   🚫 REMOVE ALL WHITE BORDERS & LINE BREAKS FROM DARK MODE
   ===================== */

/* Override ALL light border colors with dark alternatives */
.border-white,
.border-gray-100,
.border-gray-200,
.border-gray-300,
[class*="border-gray-200"],
[class*="border-gray-100"],
[class*="border-gray-300"],
[class*="border-white"] {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* Remove borders entirely for subtle elements */
.border-gray-200.border-dashed,
.border-dashed.border-gray-200 {
    border-color: transparent;
}

/* Specific border directional overrides */
.border-t-gray-200,
.border-b-gray-200,
.border-l-gray-200,
.border-r-gray-200,
.border-t-white,
.border-b-white,
.border-l-white,
.border-r-white {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* HR and line separator elements */
hr,
hr.border-gray-200,
hr.border-white,
.border-t.border-gray-200,
.border-b.border-gray-200 {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* Completely remove some line breaks */
.border-dashed.border-gray-200 {
    border: none;
}

/* Signature separators */
.signature.border-t,
.signature.border-t.border-dashed,
.border-t.border-dashed.border-gray-200 {
    border-top: 1px solid rgba(var(--text-secondary), 0.1);
}

/* File upload inputs */
input[type="file"].border-gray-200,
.inputbox.border-gray-200 {
    border-color: rgba(var(--text-secondary), 0.2);
    background-color: rgba(var(--bg-card), 0.8);
}

/* Alert/notice boxes borders */
.notice.border-gray-200,
[role="alert"].border-gray-200,
.bg-slate-50.border-gray-200,
.bg-gray-50.border-gray-200 {
    border-color: rgba(var(--primary), 0.2);
    background-color: rgba(var(--bg-card-elevated), 0.8);
}

/* Table and list borders */
.border.border-gray-200.rounded-lg,
.border.border-gray-200.overflow-hidden {
    border-color: rgba(var(--text-secondary), 0.1);
    background-color: rgba(var(--bg-card), 0.9);
}

/* Navigation and tab borders */
.border.border-gray-200.rounded-t-lg,
.border-gray-200.rounded-t-lg {
    border-color: rgba(var(--primary), 0.2);
    background-color: rgba(var(--bg-card-elevated), 0.8);
}

/* Divide borders (between elements) */
.divide-y>*:not(:first-child),
.divide-y.border-gray-200>*:not(:first-child) {
    border-top-color: rgba(var(--text-secondary), 0.1);
}

/* Button borders */
.btn-primary-outline.border-gray-200,
.border-gray-200.bg-transparent {
    border-color: rgba(var(--primary), 0.3);
}

/* Override any remaining white backgrounds with borders */
.bg-white.border-gray-200 {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* =====================
   🚫 ADDITIONAL LINE BREAK & SEPARATOR FIXES
   ===================== */

/* Remove ALL potential white line separators */
hr[class*="border-gray"],
.border-t[class*="border-gray"],
.border-b[class*="border-gray"],
.py-3.border-gray-200,
.my-3.border-t.border-gray-200,
.my-4.border-t.border-gray-200 {
    border-color: transparent;
}

/* Post and content separators */
.signature.mt-3.pt-3.border-t,
#sig.signature.mt-3.pt-3.border-t {
    border-top-color: rgba(var(--text-secondary), 0.08);
}

/* Posting editor tabs and panels */
.max-md\\:border.max-md\\:border-gray-200,
.md\\:border.md\\:border-gray-200,
.max-md\\:divide-y {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* Search box borders */
.border-r {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* Panel dividers */
.divide-y.mt-4.border.border-gray-200,
.rounded-lg.overflow-hidden.divide-y.mt-4.border.border-gray-200 {
    border-color: rgba(var(--text-secondary), 0.1);
}

.divide-y>* {
    border-top-color: rgba(var(--text-secondary), 0.05);
}

/* Breadcrumbs and navigation bars with borders - Updated for glassmorphic styling */
.breadcrumbs-panel.border-b.border-gray-200,
.navbar.border-b.border-gray-200 {
    border-bottom: none;
    /* Border styling is now handled by the glassmorphic breadcrumbs panel styles above */
}

/* Footer borders */
.border-t.border-gray-200.divide-y {
    border-top-color: rgba(var(--text-secondary), 0.1);
}

/* Any remaining specific border patterns */
[class*="border-"][class*="gray-200"],
[class*="border-"][class*="gray-100"],
[class*="border-"][class*="white"] {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* =====================
   🚫 FINAL CLEANUP - REMOVE ALL WHITE BACKGROUNDS & INPUTS
   ===================== */

/* Override any remaining white input backgrounds */
input.bg-white,
select.bg-white,
textarea.bg-white,
.inputbox.bg-white {
    background-color: rgba(var(--bg-input), 1);
    border-color: rgba(var(--text-secondary), 0.2);
    color: rgb(var(--text-primary));
}

/* Override any remaining white content backgrounds */
.bg-white {
    background-color: rgba(var(--bg-card), 0.9);
}

/* Override slate backgrounds that appear white-ish */
.bg-slate-50,
.bg-gray-50 {
    background-color: rgba(var(--bg-card-elevated), 0.8);
}

/* Force all borders to be dark appropriate */
* {
    border-color: rgba(var(--text-secondary), 0.1);
}

/* But allow intentionally transparent borders */
.border-transparent,
[style*="border:none"],
[style*="border: none"] {
    border-color: transparent;
}

/* Fix any light colored text on dark backgrounds */
.text-gray-700,
.text-gray-600,
.text-secondary {
    color: rgb(var(--text-secondary));
}

/* �‍♂️ CLEAN FOOTER WITH WAVE BORDER �‍♂️ */

/* Footer base styling - normal document flow */
#page-footer {
    position: static;
    bottom: auto;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: rgba(10, 14, 19, 0.61);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: var(--glass-border-dark);
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow:
        var(--glass-shadow-dark),
        0 0 30px rgba(var(--primary), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 10;
}

/* Footer content styling */
.footer-content {
    background-color: rgb(var(--bg-page));
    border-top: 1px solid rgb(var(--border-color));
}

/* =====================
   🎯 ADDITIONAL DROPDOWN ENHANCEMENTS
   ===================== */

/* Additional dropdown container selectors to catch all variations */
.zn-dropdown .dropdown,
.zn-dropdown .\!dropdown,
.user-menu,
.notification-menu,
.search-dropdown,
.language-dropdown,
.admin-dropdown {
    background: linear-gradient(145deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    border: 1px solid rgb(var(--glow-primary) / 0.3);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    color: rgb(var(--text-primary));
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.6),
        0 10px 10px -5px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgb(var(--glow-primary) / 0.3),
        0 0 30px rgb(var(--glow-primary) / 0.2);
    z-index: 1000;
}

/* Dropdown when opened */
.zn-dropdown.open .dropdown,
.zn-dropdown.open .\!dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown Animation Enhancement */
.dropdown,
.\!dropdown {
    transform: translateY(-10px) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.dropdown.show,
.\!dropdown.show,
.dropdown:not([style*="display: none"]),
.\!dropdown:not([style*="display: none"]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* =====================
   📝 TYPOGRAPHY & LINKS
   ===================== */

/* Enhanced Typography */
.forum-title,
.topic-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(var(--text-primary));
    font-weight: 700;
    letter-spacing: -0.025em;
    transition: all var(--transition-fast);
}

.forum-title,
.topic-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(var(--text-primary));
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Enhanced Link System */
a {
    color: rgb(var(--primary));
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

a:hover {
    color: rgb(var(--primary-hover));
    transform: translateY(-1px);
}

/* Removed redundant .dark a selector for clarity and maintainability */

a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgb(var(--glow-primary) / 0.6);
    transform: translateY(-1px);
}

/* Special Link Effects */
a.glow-link {
    position: relative;
}

a.glow-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgb(var(--glow-primary)),
            rgb(var(--glow-accent)));
    transition: width var(--transition-normal);
}

a.glow-link:hover::after {
    width: 100%;
}

/* Text Utilities */
.muted,
.text-secondary {
    color: rgb(var(--text-secondary));
}

.muted,
.text-secondary {
    color: rgb(var(--text-secondary));
}

/* Content Containers */
.content,
.inner,
.container {
    background-color: inherit;
    color: inherit;
}

/* Force dark backgrounds for ALL content areas */
.content,
.inner,
.container,
.panel-container,
.bg-slate-50,
.bg-gray-50,
.bg-gray-100,
[class*="bg-slate"],
[class*="bg-gray"] {
    background: #00000000;
    color: rgb(var(--text-primary));
}

/* Override light text colors in dark mode */
.text-slate-50,
.text-gray-50,
.text-gray-100,
.text-gray-200 {
    color: rgb(var(--text-secondary));
}

/* =====================
   🎨 SPECIAL ELEMENTS & EMOJIS
   ===================== */

/* Forum Status Icons with Emoji Enhancement */
.forum-new::before {
    content: '🆕 ';
    font-size: 0.9em;
    margin-right: 0.25rem;
}

.forum-hot::before {
    content: '🔥 ';
    font-size: 0.9em;
    margin-right: 0.25rem;
}

.forum-locked::before {
    content: '🔒 ';
    font-size: 0.9em;
    margin-right: 0.25rem;
}

.forum-sticky::before {
    content: '📌 ';
    font-size: 0.9em;
    margin-right: 0.25rem;
}

/* Notification Badges with Pulse */
.notification-badge {
    background: linear-gradient(135deg,
            rgb(var(--error)),
            rgb(220, 38, 38));
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.5rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gentle-pulse 2s ease-in-out infinite;
}

.notification-badge {
    box-shadow:
        0 0 12px rgb(var(--error) / 0.5),
        0 0 24px rgb(var(--error) / 0.3);
}

/* Online Status Indicators */
.user-online::before {
    content: '🟢 ';
    font-size: 0.8em;
    margin-right: 0.25rem;
}

.user-offline::before {
    content: '⚫ ';
    font-size: 0.8em;
    margin-right: 0.25rem;
}

.user-away::before {
    content: '🟡 ';
    font-size: 0.8em;
    margin-right: 0.25rem;
}

/* Post Rating & Reaction Elements */
.post-rating {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.rating-button {
    background: transparent;
    border: 1px solid rgba(var(--muted), 0.3);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.rating-button {
    border-color: rgb(var(--glow-primary) / 0.3);
    color: rgb(var(--text-secondary));
}

.rating-button:hover {
    background: rgb(var(--glow-primary) / 0.1);
    border-color: rgb(var(--glow-primary) / 0.6);
    color: rgb(var(--primary));
    transform: scale(1.05);
}

/* Category Icons with Emojis */
.category-gaming::before {
    content: '🎮 ';
}

.category-tech::before {
    content: '💻 ';
}

.category-general::before {
    content: '💬 ';
}

.category-help::before {
    content: '❓ ';
}

.category-news::before {
    content: '📰 ';
}

.category-music::before {
    content: '🎵 ';
}

.category-art::before {
    content: '🎨 ';
}

.category-sports::before {
    content: '⚽ ';
}

.category-food::before {
    content: '🍕 ';
}

.category-travel::before {
    content: '✈️ ';
}

/* =====================
   📱 RESPONSIVE DESIGN ENHANCEMENTS
   ===================== */

/* Mobile Optimizations */
@media (max-width: 768px) {

    .card,
    .card-sm,
    .panel {
        padding: 0.75rem;
        margin: 0.5rem 0;
    }

    .card:hover,
    .panel:hover {
        transform: none;
        /* Disable hover lift on mobile */
    }

    /*   .btn-primary,
  .button-secondary {
    padding: 0.75rem 1rem  ;
    font-size: 0.9rem  ;
  } */

    .navbar {
        padding: 0.75rem 1rem;
    }

    h1,
    h2,
    h3 {
        font-size: calc(1.5rem + 0.5vw);
    }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {

    .card,
    .panel {
        padding: 1rem;
    }

    .forum-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Desktop Enhancements */
@media (min-width: 1025px) {
    .card:hover {
        animation: none;
        /* Prevent animation conflicts */
    }

    .forum-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Enhanced scroll behavior */
    html {
        scroll-behavior: smooth;
    }
}

/* =====================
   🌟 ADVANCED ANIMATIONS & EFFECTS
   ===================== */

/* Loading Spinner for AJAX Content */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(var(--text-secondary), 0.3);
    border-radius: 50%;
    border-top-color: rgb(var(--primary));
    animation: spin 1s ease-in-out infinite;
}

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

/* =====================
   👑 CROWNED EXCELLENCE CONTENT ENHANCEMENT
   ===================== */

/* Content Area for Special Sections */
.content-area,
.main-content,
.crowned-content {
    background: linear-gradient(135deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    border-radius: 16px;
    padding: 2rem;
    margin: 1rem 0;
    border: 1px solid rgb(var(--primary) / 0.2);
    position: relative;
    overflow: hidden;
}

.content-area::before,
.main-content::before,
.crowned-content::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgb(var(--primary) / 0.5),
            rgb(var(--accent) / 0.5),
            rgb(var(--accent-secondary) / 0.5));
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.content-area:hover::before,
.main-content:hover::before,
.crowned-content:hover::before {
    opacity: 1;
}

/* Crown Icon Enhancement */
.crown-icon,
.excellence-icon {
    font-size: 1.5rem;
    background: linear-gradient(135deg,
            rgb(var(--warning)),
            rgb(var(--primary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgb(var(--warning) / 0.3));
    animation: crown-shine 4s ease-in-out infinite;
}

@keyframes crown-shine {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.05) rotate(2deg);
    }
}

/* =====================
   🔗 FOOTER SOCIAL LINKS ENHANCEMENT
   ===================== */

/* Social Icons in Footer */
.footer-social,
.social-links,
.follow-links {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-social a,
.social-links a,
.follow-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgb(var(--bg-card-elevated)),
            rgb(var(--bg-card)));
    border: 1px solid rgb(var(--primary) / 0.3);
    border-radius: 12px;
    color: rgb(var(--text-secondary));
    text-decoration: none;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.footer-social a::before,
.social-links a::before,
.follow-links a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgb(var(--primary) / 0.3),
            transparent);
    transition: left var(--transition-normal);
}

.footer-social a:hover,
.social-links a:hover,
.follow-links a:hover {
    background: linear-gradient(135deg,
            rgb(var(--primary) / 0.2),
            rgb(var(--accent) / 0.2));
    border-color: rgb(var(--primary));
    color: rgb(var(--primary));
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 8px 25px rgb(var(--primary) / 0.3),
        0 0 20px rgb(var(--primary) / 0.2);
}

.footer-social a:hover::before,
.social-links a:hover::before,
.follow-links a:hover::before {
    left: 100%;
}

/* Specific Social Platform Colors */
.footer-social a[href*="twitter"]:hover,
.footer-social a[href*="x.com"]:hover {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
    color: white;
}

.footer-social a[href*="discord"]:hover {
    background: linear-gradient(135deg, #7289da, #5b6eae);
    color: white;
}

.footer-social a[href*="github"]:hover {
    background: linear-gradient(135deg, #333, #24292e);
    color: white;
}

.footer-social a[href*="youtube"]:hover {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: white;
}

/* =====================
   📊 ENHANCED VISUAL DEPTH
   ===================== */

/* Multi-layer Shadow System */
.depth-1 {
    box-shadow:
        0 1px 3px rgb(0, 0, 0 / 0.4),
        0 1px 2px rgb(0, 0, 0 / 0.3);
}

.depth-2 {
    box-shadow:
        0 4px 6px rgb(0, 0, 0 / 0.4),
        0 2px 4px rgb(0, 0, 0 / 0.3),
        0 0 10px rgb(var(--primary) / 0.1);
}

.depth-3 {
    box-shadow:
        0 10px 15px rgb(0, 0, 0 / 0.4),
        0 4px 6px rgb(0, 0, 0 / 0.3),
        0 0 20px rgb(var(--primary) / 0.15),
        inset 0 1px 0 rgb(255, 255, 255 / 0.1);
}

/* Apply depth to cards automatically */
.card {
    box-shadow:
        0 4px 6px rgb(0, 0, 0 / 0.4),
        0 2px 4px rgb(0, 0, 0 / 0.3),
        0 0 10px rgb(var(--primary) / 0.05);
}

.card:hover {
    box-shadow:
        0 10px 15px rgb(0, 0, 0 / 0.5),
        0 4px 6px rgb(0, 0, 0 / 0.4),
        0 0 20px rgb(var(--primary) / 0.15),
        inset 0 1px 0 rgb(255, 255, 255 / 0.1);
}

/* =====================
   🎭 FINAL POLISH & ACCESSIBILITY
   ===================== */

/* Focus States for Accessibility */
*:focus {
    outline: none;
    outline-offset: 0;
    border-radius: 4px;
}

/* Smooth Transitions for All Interactive Elements */
a,
button,
.btn,
.clickable {
    transition: all var(--transition-normal);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --text-primary: 255, 255, 255;
        --bg-page: 0, 0, 0;
        --bg-card: 20, 20, 20;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none;
        transition: none;
    }
}

/* =====================
   📚 Z-INDEX HIERARCHY SYSTEM
   ===================== */

/* Base level elements */
.page-body,
.content,
.main {
    z-index: 1;
}

/* Cards and panels */
.card,
.panel,
.forum-item {
    z-index: 10;
}

/* Navigation and headers */
.navbar,
.header,
.nav-main {
    z-index: 100;
}

/* Sticky elements */
.sticky,
.fixed,
.navbar-fixed {
    z-index: 500;
}

/* Dropdown menus */
.dropdown,
.\!dropdown,
.dropdown-menu,
.menu,
.nav-menu,
.submenu {
    z-index: 1000;
}

/* User menus and notifications */
.user-menu,
.notification-menu,
.search-dropdown {
    z-index: 1100;
}

/* Overlays and backdrops */
.overlay,
.backdrop,
.modal-backdrop {
    z-index: 5000;
}

/* Modals and dialogs */
.modal,
.dialog,
.popup {
    z-index: 60000;
}

/* Role How-It-Works Modals - Critical: Must appear above all page content */
.role-how-modal {
    z-index: 999999 !important;
    isolation: isolate;
}

.role-how-modal .how-modal-content {
    z-index: 1000000 !important;
}

/* Tooltips and popovers */
.tooltip,
.popover,
.hint {
    z-index: 7000;
}

/* Loading screens and urgent notifications */
.loading-overlay,
.toast,
.alert-urgent {
    z-index: 9000;
}

/* Absolutely critical elements (debug, dev tools) */
.debug,
.dev-tools,
.critical-notice {
    z-index: 10000;
}

/* Fade In Animation for New Content */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s var(--bounce);
}

/* Notification Toast Animations */
.toast-notification {
    background: linear-gradient(135deg,
            rgb(var(--bg-card)),
            rgb(var(--bg-card-elevated)));
    border: 1px solid rgb(var(--glow-primary) / 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 0.5rem;
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
    animation: slideInRight 0.5s var(--bounce);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgb(var(--glow-primary) / 0.2);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Particle Effect Background (Optional) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(var(--glow-primary), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--glow-accent), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(var(--glow-purple), 0.02) 0%, transparent 50%);
    z-index: -1;
}

/* =====================
   🔧 UTILITY CLASSES
   ===================== */

/* Glow Text Effect */
.text-glow {
    text-shadow: 0 0 10px rgb(var(--glow-primary) / 0.5);
}

/* Card with Special Glow */
.card-glow {
    box-shadow:
        0 0 20px rgb(var(--glow-primary) / 0.3),
        0 0 40px rgb(var(--glow-primary) / 0.2),
        0 0 60px rgb(var(--glow-primary) / 0.1);
}

/* Success State */
.success {
    color: rgb(var(--success));
    text-shadow: 0 0 8px rgb(var(--glow-accent) / 0.5);
}

/* Warning State */
.warning {
    color: rgb(var(--warning));
}

/* Error State */
.error {
    color: rgb(var(--error));
}

/* Highlight Effect */
.highlight {
    background: linear-gradient(120deg,
            rgba(var(--glow-primary), 0.1) 0%,
            rgba(var(--glow-accent), 0.1) 100%);
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}

/* =====================
   🎉 FINAL TOUCHES
   ===================== */

/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, transform, box-shadow;
    transition-duration: var(--transition-fast);
    transition-timing-function: ease-out;
}

/* Focus states for accessibility */
*:focus {
    outline: 2px solid rgb(var(--primary));
    outline-offset: 2px;
}

*:focus {
    outline: none;
    outline-color: transparent;
    box-shadow: none;
}

/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }

    * {
        background: transparent;
        color: black;
        box-shadow: none;
        text-shadow: none;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ===============================
   🎊 THEME COMPLETION MESSAGE
   =============================== */

/*
🎉 CONGRATULATIONS! 🎉

Your forum's dark theme has been completely revamped with:

✨ Modern color palette with perfect contrast ratios
🎯 Micro-animations that engage users
🚀 Responsive design for all devices
🎨 Enhanced cards with beautiful glow effects
📝 Professional typography system
🎪 Forum-specific component styling
💫 Smooth transitions and hover effects
🌟 Emoji integration for visual appeal
📱 Mobile-optimized interactions
🔧 Accessibility improvements

Your forum is now ready to wow your audience with this
premium dark theme experience!

For any customizations, adjust the CSS custom properties
at the top of this file.

Happy forum managing! 🚀
*/

/* =====================
   🔐 RESPONSIVE LOGIN FORM & SCROLLBAR REMOVAL
   ===================== */



/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}







/* Mobile-first responsive design */
@media (max-width: 480px) {

    /* Global mobile text overflow prevention */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Container max-width constraints */
    .container,
    .wrapper,
    .content,
    .main {
        max-width: 100%;
        overflow-x: hidden;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .min-h-full {
        padding: 0.5rem;
        min-height: 100dvh;
        /* Use dynamic viewport height */
    }

    /* Login form container */
    .max-w-sm {
        max-width: 100%;
        width: 100%;
        padding: 0 1rem;
    }

    /* Form styling for mobile */
    form.space-y-4 {
        background: transparent;
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border-radius: 20px;
        padding: 2rem 1.5rem;
        box-shadow:
            var(--glass-shadow),
            0 0 30px rgba(var(--glow-primary), 0.15),
            inset 0 1px 0 var(--glass-highlight);
        gap: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    /* Form field groups */
    .form-group {
        margin-bottom: 1.25rem;
    }

    /* Form labels */
    label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: rgb(var(--text-primary));
        font-size: 0.9rem;
    }

    .logo {
        max-height: 60px;
        width: auto;
    }

    /* Title responsive */
    h1 {
        font-size: 1.25rem;
        line-height: 1.2;
        margin-bottom: 0.75rem;
        padding: 0 0.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* All heading responsive sizing */
    h2,
    .page-header h2,
    .forum-title,
    .index-title {
        font-size: 1.1rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
        padding: 0 0.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    h3,
    .card-title {
        font-size: 1rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
        padding: 0 0.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    h4,
    h5,
    h6 {
        font-size: 0.9rem;
        line-height: 1.2;
        margin-bottom: 0.25rem;
        padding: 0 0.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Prevent text overflow in containers */
    .card,
    .panel,
    .forum-list,
    .topic-list {

        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* FAQ title specific fixes */
    .faq-title,
    .faq h1,
    .faq h2 {
        font-size: 1.2rem;
        line-height: 1.3;
        margin: 0.5rem 0;
        padding: 0 0.5rem;
        text-align: center;
    }

    /* Navigation title fixes */
    .navbar-brand,
    .site-title,
    .board-title {
        font-size: 1.1rem;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* General text size adjustments */
    body,
    p,
    .text-base {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Compact link styling */
    a {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Compact spacing */
    .space-y-4>*+* {
        margin-top: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .min-h-full {
        padding: 1.5rem;
    }

    .max-w-sm {
        max-width: 420px;
    }

    form.space-y-4 {
        /* padding: 1rem 2rem  ; */
        /* box-shadow:
      var(--glass-shadow),
      0 0 35px rgba(var(--glow-primary), 0.12),
      inset 0 1px 0 var(--glass-highlight)  ; */
        gap: 1rem;
        flex-direction: column;
    }

    .form-group {
        margin-bottom: .5rem;
    }

    label {
        margin-bottom: 0.625rem;
        font-size: 0.95rem;
    }
}

@media (min-width: 769px) {

    /* Desktop login form enhancement */
    form.space-y-4 {
        background: transparent;
        border-radius: 16px;
        padding: 5px 5px 5px 5px;
        box-shadow:
            var(--glass-shadow),
            0 0 50px rgba(var(--glow-primary), 0.12),
            0 12px 40px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 var(--glass-highlight);
        gap: 0;
        flex-direction: column;
    }

    .max-w-sm {
        max-width: 440px;
    }



    /* Form field groups */
    .form-group {
        margin-bottom: 1.75rem;
    }

    label {
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 500;
        padding: 5px;
    }

    /* Login form specific enhancements */
    #login {
        position: relative;
        overflow: visible;
    }

    /* Global form spacing enhancements */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-group:last-child {
        margin-bottom: 0;
    }


    /* Link spacing */
    a {
        margin: 0.25rem 0;
        display: inline-block;
    }

    /* Password field with toggle */
    .password-container {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* Form title spacing */
    h1,
    h2,
    h3 {
        margin-bottom: 1.5rem;
        margin-top: 0;
    }

    /* Login form labels */
    form label.block.text-sm.font-medium {
        margin-bottom: 0.5rem;
    }



    .remember-me-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1.25rem 0;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .remember-me-checkbox {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Error message styling */
    .text-red-700 {
        background: linear-gradient(135deg,
                rgba(var(--error), 0.1),
                rgba(var(--error), 0.05));
        border: 1px solid rgba(var(--error), 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }




    /* Dark mode checkbox adjustments */
    .checkbox-primary,
    input[type="checkbox"].checkbox-primary {
        border-color: #4b5563;
        background-color: #374151;
    }

    .checkbox-primary:checked,
    input[type="checkbox"].checkbox-primary:checked {
        background-color: rgb(var(--primary));
        border-color: rgb(var(--primary));
        background-color: rgb(var(--color-primary));
        border-color: rgb(var(--color-primary));
    }
}

/* Links in login form */
.text-color {
    color: rgb(var(--primary));
    transition: all var(--transition-fast);
}

.text-color:hover {
    color: rgb(var(--primary-hover));
    text-shadow: 0 0 8px rgba(var(--glow-primary), 0.5);
}

button.zn-password-toggle:hover,
.zn-password-toggle:hover {
    color: rgb(var(--primary));
    background: rgba(var(--glow-primary), 0.1);
}

/* Icon size fix */
.zn-password-toggle .iconify {
    width: 18px;
    height: 18px;
}

/* Ensure password field container has proper positioning context */
div.relative.mt-2 {
    position: relative;
    display: block;
}



/* =====================
   REPUTATION TOP LIST - Theme Aware
   ===================== */
.reputation-toplist {
    background: rgba(var(--bg-card), 1);
    border: 1px solid rgba(var(--text-primary), 0.1);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* Dark theme specific enhancements */
.reputation-toplist {
    background: rgba(var(--bg-card), 0.6);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Child elements - Theme aware */
.reputation-toplist h1,
.reputation-toplist h2,
.reputation-toplist h3,
.reputation-toplist h4,
.reputation-toplist h5,
.reputation-toplist h6 {
    color: rgba(var(--text-primary), 1);
    font-weight: 600;
}

.reputation-toplist p,
.reputation-toplist span,
.reputation-toplist div {
    color: rgba(var(--text-secondary), 1);
}

.reputation-toplist a {
    color: rgba(var(--primary), 1);
    transition: color var(--transition-fast);
}

.reputation-toplist a:hover {
    color: rgba(var(--primary-hover), 1);
}

.reputation-toplist ul,
.reputation-toplist ol {
    color: rgba(var(--text-secondary), 1);
}

.reputation-toplist li {
    color: rgba(var(--text-secondary), 1);
    margin-bottom: 0.5rem;
}

.reputation-toplist strong,
.reputation-toplist b {
    color: rgba(var(--text-primary), 1);
    font-weight: 600;
}

/* Dark theme text enhancements */
.reputation-toplist * {
    text-shadow: none;
}

/* =====================
   🌟 ELITE "3AM" LOGO STYLING
   Professional, polished, unique branding
   ===================== */



.elite-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 1rem;
    min-width: 8rem;
    min-height: 8rem;
}

/* Prism Triangle Icon - Behind the text */
.elite-logo-link::before {
    content: '';
    width: 6rem;
    height: 6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.05);
    display: block;
    background: linear-gradient(135deg,
            rgba(255, 0, 55, 0.9) 0%,
            rgba(98, 0, 255, 0.85) 25%,
            rgba(0, 238, 255, 0.8) 50%,
            rgba(0, 255, 200, 0.85) 75%,
            rgba(144, 254, 0, 0.9) 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    filter: drop-shadow(0 4px 16px rgba(102, 126, 234, 0.6)) drop-shadow(0 6px 24px rgba(79, 95, 198, 0.5)) drop-shadow(0 0 40px rgba(79, 207, 254, 0.4));
    animation: prismRotate 6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

/* Prism rotation animation */
@keyframes prismRotate {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.05);
        filter: drop-shadow(0 4px 16px rgba(102, 126, 234, 0.6)) drop-shadow(0 6px 24px rgba(79, 95, 198, 0.5)) drop-shadow(0 0 40px rgba(79, 207, 254, 0.4));
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
        filter: drop-shadow(0 6px 24px rgba(102, 126, 234, 0.7)) drop-shadow(0 8px 32px rgba(79, 95, 198, 0.6)) drop-shadow(0 0 50px rgba(79, 207, 254, 0.5));
    }
}

.elite-logo {
    /* Futuristic tech font */
    font-family: 'Orbitron', 'Exo 2', 'Rajdhani', 'Arial Black', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    /* White text with enhanced glow - always visible */
    color: white;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 50px rgba(255, 255, 255, 0.6),
        0 0 70px rgba(102, 126, 234, 0.4);

    /* Position text inside triangle - centered */
    position: relative;
    z-index: 1;
    display: inline-block;

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Perfect spacing and positioning */
    padding: 0;
    margin: 0;
    margin-top: 0.5rem;

    /* Ensure text stays centered */
    line-height: 1;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;

    /* Scale up slightly for impact */
    transform: scale(1.05);
}

/* Hover effect - even more dramatic scale and glow */
.elite-logo-link:hover .elite-logo {
    transform: scale(1.15);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(255, 255, 255, 1),
        0 0 70px rgba(255, 255, 255, 0.8),
        0 0 100px rgba(102, 126, 234, 0.6);
}

/* Hover effect on triangle - extra enhanced glow */
.elite-logo-link:hover::before {
    transform: translate(-50%, -50%) scale(1.12);
    filter: drop-shadow(0 8px 32px rgba(102, 126, 234, 0.8)) drop-shadow(0 10px 40px rgba(79, 95, 198, 0.7)) drop-shadow(0 0 60px rgba(79, 207, 254, 0.6));
}

/* Active/Click state - push down effect */
.elite-logo-link:active .elite-logo {
    transform: scale(1.02);
}

.elite-logo-link:active::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Gradient animation */
@keyframes eliteGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Dark theme - brighter glow */
.elite-logo {
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(255, 255, 255, 0.6),
        0 0 35px rgba(129, 140, 248, 0.4);
}

.elite-logo-link:hover .elite-logo {
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(255, 255, 255, 0.9),
        0 0 50px rgba(129, 140, 248, 0.6),
        0 0 70px rgba(96, 165, 250, 0.4);
}

/* Subtle underline effect on hover */
.elite-logo-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(102, 126, 234, 0.6) 25%,
            rgba(79, 95, 198, 0.8) 50%,
            rgba(102, 126, 234, 0.6) 75%,
            transparent 100%);
    transition: transform var(--transition-normal);
    border-radius: 2px;
}

.elite-logo-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* Responsive sizing */
@media (max-width: 768px) {
    .elite-logo {
        font-size: 2rem;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 480px) {
    .elite-logo {
        font-size: 1.75rem;
        letter-spacing: 0.1em;
    }
}

/* Performance optimization */
.elite-logo {
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.h-full {
    top: 10px;
    height: 10px;
}

/* =====================
   🔍 BOARD INDEX & FORUM LIST CLARITY IMPROVEMENTS
   ===================== */

/* Reduce blur on forum/topic containers for better readability */
.categories,
.topiclist,
.forumlist {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgb(15 23 35 / 0%);
}


/* =====================
   ✨ GLOWING CARD EFFECT
   ===================== */

.card-glow {
    --pads: 40px;
    --color-sens: calc(var(--glow-sens) + 20);
    --pointer-°: 45deg;

    position: relative;
    width: clamp(320px, calc(100svw - calc(var(--pads) * 2)), 600px);
    height: calc(100svh - calc(var(--pads) * 2));
    max-height: 600px;
    border-radius: 1.768em;
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    display: grid;
    border: 1px solid rgb(255 255 255 / 25%);
    background: var(--card-bg);
    background-repeat: no-repeat;

    &::before,
    &::after,
    >.glow {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        transition: opacity 0.25s ease-out;
        z-index: -1;
    }

    &:not(:hover):not(.animating) {

        &::before,
        &::after,
        >.glow {
            opacity: 0;
            transition: opacity 0.75s ease-in-out;
        }
    }

    &::before {
        /* mesh gradient border */
        border: 1px solid transparent;
        background:
            linear-gradient(var(--card-bg) 0 100%) padding-box,
            linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
            radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) border-box,
            radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) border-box,
            radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) border-box,
            radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) border-box,
            radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) border-box,
            radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) border-box,
            radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) border-box,
            linear-gradient(#c299ff 0 100%) border-box;
        /* opacity increases as pointer gets near edge */
        opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
        /* border is masked to a cone, originating from the center towards the pointer */
        mask-image:
            conic-gradient(from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%);
    }

    &::after {
        /* mesh gradient background */
        border: 1px solid transparent;
        background:
            radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) padding-box,
            radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) padding-box,
            radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) padding-box,
            radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) padding-box,
            radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) padding-box,
            radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) padding-box,
            radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) padding-box,
            linear-gradient(#c299ff 0 100%) padding-box;
        /* 5 radial masks to create a squircle-cut-out, and then a cone-gradient
      originating from the center towards the pointer to highlight the edges */
        mask-image:
            linear-gradient(to bottom, black, black),
            radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
            radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
            radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
            radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
            radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
            conic-gradient(from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);
        mask-composite: subtract, add, add, add, add, add;
        /* opacity increases as pointer gets near edge */
        opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
        mix-blend-mode: var(--blend);
    }

    >.glow {
        /* glowing border edges */
        --outset: var(--pads);
        /* outer padding so the glow can overflow the element without being masked */
        inset: calc(var(--outset) * -1);
        pointer-events: none;
        z-index: 1;
        /* glow is masked to a cone, originating from the center towards the pointer */
        mask-image:
            conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
        /* opacity increases as pointer gets near edge */
        opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
        mix-blend-mode: var(--glow-blend);

        &::before {
            content: "";
            position: absolute;
            inset: var(--outset);
            border-radius: inherit;
            box-shadow:
                inset 0 0 0 1px hsl(var(--glow-color) / 100%),
                inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
                inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
                inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
                inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
                inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
                inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)),
                0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
                0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
                0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
                0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
                0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
                0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
        }
    }
}

.card-glow .inner {
    text-align: center;

    h2 {
        color: inherit;
        font-weight: 500;
        font-size: 1.25em;
        margin-block: 0.5em;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 1em;
    }

    svg {
        height: 24px;
    }
}

.card-glow .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    container-type: inline-size;
    position: relative;
    overflow: auto;
    z-index: 1;
}

.card-glow .content {
    padding: 1em;
    font-weight: 300;
    text-align: left;
    line-height: 1.4;
    color: rgba(248, 250, 252, 0.6);
    overflow: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to top, transparent 5px, black 2em);
}

.card-glow .content em,
.card-glow .content strong {
    color: rgba(248, 250, 252, 0.4);
}

.card-glow .content p {
    opacity: 0;
    animation: fadeContent 1.5s ease-in-out 2s both;
}

.card-glow .content p:nth-child(2) {
    animation-delay: 2.25s;
}

.card-glow .content p:nth-child(3) {
    animation-delay: 2.5s;
}

.card-glow .content p:nth-child(4) {
    animation-delay: 2.75s;
}

@keyframes fadeContent {
    to {
        opacity: 1;
    }
}

/* Light theme adjustments for glow cards - DISABLED (Dark theme only) */
/* These rules have been removed as this theme is permanently dark */

/* =====================
   🏠 HOUSE GAMES GRID (Slots / Tetris / Daily Spin)
   =====================
   Styles to set the House Games area apart from the regular board list.
   - Use a responsive card-grid layout
   - Stronger contrast, subtle glass, clear CTAs and icons
*/
.house-games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem 0;
    align-items: stretch;
    width: 100%;
    /* Ensure full width */
    max-width: 100%;
    /* Prevent overflow */
}

.house-games .game-card {
    background: linear-gradient(145deg, rgba(20, 28, 42, 0.96), rgba(15, 23, 35, 0.88));
    border: 1px solid rgba(var(--glow-primary), 0.12);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 12px rgba(var(--glow-primary), 0.03);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background 0.3s ease;
    backdrop-filter: none;
    /* keep card text crisp */
    min-height: 250px;
    /* Ensure consistent height */
    width: 100%;
    /* Full width within grid cell */
    overflow: hidden;
    /* Prevent content overflow */
}

.house-games .game-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(var(--glow-primary), 0.12);
}

.house-games .game-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.house-games .game-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: rgb(var(--text-primary));
    background: linear-gradient(135deg, rgba(var(--glow-primary), 0.12), rgba(var(--accent-secondary), 0.06));
    flex: 0 0 48px;
}

.house-games .game-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgb(var(--text-primary));
    -webkit-font-smoothing: antialiased;
}

.house-games .game-desc {
    color: rgb(var(--text-secondary));
    font-size: 0.92rem;
    margin-top: 0.5rem;
    line-height: 1.35;
}

.house-games .game-cta {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    /* Allow wrapping on small devices */
    justify-content: flex-start;
}

.house-games .btn-cta {
    background: linear-gradient(90deg, rgba(var(--glow-primary), 1), rgba(var(--accent-secondary), 0.9));
    color: #000;
    /* Important to override any inherited styles */
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(var(--glow-primary), 0.12);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    display: inline-block;
    /* Ensure proper rendering on all devices */
    transition: all 0.3s ease;
}

.house-games .btn-cta:hover,
.house-games .btn-cta:focus {
    background: linear-gradient(90deg, rgba(var(--glow-primary), 0.9), rgba(var(--accent-secondary), 1));
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--glow-primary), 0.2);
    text-decoration: none;
}

/* Ensure text contrast works on all devices */
@media screen and (min-width: 1200px) {
    .house-games .btn-cta {
        color: #000;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    }
}

@media screen and (max-width: 1199px) and (min-width: 768px) {
    .house-games .btn-cta {
        color: #000;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    }
}

.house-games .meta {
    color: rgb(var(--text-secondary));
    font-size: 0.82rem;
}

@media (max-width: 480px) {
    .house-games {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1rem 0 2rem 0;
    }

    .house-games .game-card {
        min-height: auto;
        /* Auto height on mobile */
        padding: 1rem;
    }

    .house-games .game-icon {
        width: 44px;
        height: 44px;
    }

    .house-games .btn-cta {
        color: #000;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
        padding: 0.6rem 1rem;
        /* Slightly larger tap target on mobile */
        width: 100%;
        /* Full width button on mobile */
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .house-games .game-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .house-games .meta {
        align-self: center;
        /* Center the secondary link */
    }
}

/* Clear, readable forum titles */
.forum-title,
.forum-title a,
.topic-title,
.topic-title a,
h3.forum-title {
    color: rgb(var(--text-primary));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Forum description text clarity */
.forum-desc,
.forum-details,
.text-secondary {
    color: rgb(203, 213, 225);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-font-smoothing: antialiased;
}

/* Card with forum content - less blur */
li.card:has(.forum-details),
li.card:has(.topiclist),
.card:has(.categories) {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(15, 23, 35, 0.9);
}

/* Stats and numbers - high contrast */
.topics,
.posts,
.redirect,
.lastpost {
    color: rgb(var(--text-primary));
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Row items in forum list */
.row-item,
.forum-row {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Ensure card titles in board index are clear */
.card-title h2,
.card-title a {
    color: rgb(var(--text-primary));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
}

/* Subforum links */
.subforum,
.subforums a {
    color: rgb(var(--primary));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

/* Moderator names */
.moderators,
.mod {
    color: rgb(var(--text-secondary));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Member Points Highlighting Styles */
.points-container {
    margin: 0 0.5rem;
}

.points-badge {
    background: -moz-linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 0.2rem 0.6rem;
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 0.875rem;
}

/* User Profile Points Display Styling */
.points-highlight-profile {
    background: -moz-linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 209, 102, 0.9) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 209, 102, 0.9) 100%);
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 209, 102, 0.9) 100%);
    -moz-box-shadow: 0 2px 5px rgba(255, 107, 107, 0.2), 0 0 3px rgba(255, 209, 102, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(255, 107, 107, 0.2), 0 0 3px rgba(255, 209, 102, 0.1);
    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.2), 0 0 3px rgba(255, 209, 102, 0.1);
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.points-bank-highlight {
    background: -moz-linear-gradient(90deg, rgba(125, 211, 252, 0.9) 0%, rgba(168, 85, 247, 0.9) 100%);
    background: -webkit-linear-gradient(90deg, rgba(125, 211, 252, 0.9) 0%, rgba(168, 85, 247, 0.9) 100%);
    background: linear-gradient(90deg, rgba(125, 211, 252, 0.9) 0%, rgba(168, 85, 247, 0.9) 100%);
    -moz-box-shadow: 0 2px 5px rgba(125, 211, 252, 0.2), 0 0 3px rgba(168, 85, 247, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(125, 211, 252, 0.2), 0 0 3px rgba(168, 85, 247, 0.1);
    box-shadow: 0 2px 5px rgba(125, 211, 252, 0.2), 0 0 3px rgba(168, 85, 247, 0.1);
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.points-action-btn {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.points-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Rich Users List Styling */
.rich-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rich-user {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.rich-user:hover {
    background: rgba(255, 255, 255, 0.15);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transform: translateY(-1px);
}

.points-highlight {
    /* Enhanced gradient with fallbacks for older browsers */
    background: rgb(255, 107, 107);
    background: -moz-linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);

    /* Consistent border-radius across browsers */
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;

    /* Enhanced shadow for depth */
    -moz-box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    -webkit-box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);

    /* Improved spacing */
    padding: 2px 10px;
    margin-left: 8px;

    /* Typography and color */
    color: #000;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);

    /* Smooth transitions */
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Subtle pulse animation */
    -webkit-animation: pulse-subtle 2s infinite ease-in-out;
    -moz-animation: pulse-subtle 2s infinite ease-in-out;
    animation: pulse-subtle 2s infinite ease-in-out;
}

.points-highlight:hover {
    /* Lift effect on hover */
    -webkit-transform: translateY(-2px) scale(1.03);
    -moz-transform: translateY(-2px) scale(1.03);
    transform: translateY(-2px) scale(1.03);

    /* Enhanced glow effect on hover */
    -moz-box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5), 0 0 10px rgba(255, 209, 102, 0.4);
    -webkit-box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5), 0 0 10px rgba(255, 209, 102, 0.4);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5), 0 0 10px rgba(255, 209, 102, 0.4);

    /* Smooth gradient shift */
    background: -moz-linear-gradient(90deg, rgba(255, 107, 107, 1) 10%, rgba(255, 209, 102, 1) 90%);
    background: -webkit-linear-gradient(90deg, rgba(255, 107, 107, 1) 10%, rgba(255, 209, 102, 1) 90%);
    background: linear-gradient(90deg, rgba(255, 107, 107, 1) 10%, rgba(255, 209, 102, 1) 90%);
}

.points-highlight-mobile {
    /* Enhanced gradient with fallbacks for mobile */
    background: rgb(255, 107, 107);
    background: -moz-linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 107, 107, 1) 0%, rgba(255, 209, 102, 1) 100%);
    -moz-box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
    -webkit-box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

.points-badge {
    color: #FF6B6B;
    font-weight: bold;
    background: rgba(255, 107, 107, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Ensure the points are visible in both light and dark modes */
.points-badge {
    color: #ffffff;
    background: #134855;
    text-shadow: -2px 3px 3px rgb(35 29 14);
    box-shadow: 0px 0px 9px 0px #00ffd9b3;
    border-bottom: 1px solid #000;
}

/* Subtle pulse animation for the points highlight */
@keyframes pulse-subtle {
    0% {
        box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    }

    50% {
        box-shadow: 0 3px 15px rgba(255, 107, 107, 0.4), 0 0 8px rgba(255, 209, 102, 0.3);
    }

    100% {
        box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    }
}

@-webkit-keyframes pulse-subtle {
    0% {
        -webkit-box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    }

    50% {
        -webkit-box-shadow: 0 3px 15px rgba(255, 107, 107, 0.4), 0 0 8px rgba(255, 209, 102, 0.3);
    }

    100% {
        -webkit-box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    }
}

@-moz-keyframes pulse-subtle {
    0% {
        -moz-box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    }

    50% {
        -moz-box-shadow: 0 3px 15px rgba(255, 107, 107, 0.4), 0 0 8px rgba(255, 209, 102, 0.3);
    }

    100% {
        -moz-box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3), 0 0 5px rgba(255, 209, 102, 0.2);
    }
}

/* Responsive styles for points highlighting */
@media (max-width: 1199px) {
    .points-container {
        margin: 0 0.25rem;
    }

    .points-highlight {
        padding: 0.25rem 0.75rem;
        font-size: 0.8125rem;
        /* Simplified shadows for better performance on smaller screens */
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        -webkit-box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        -moz-box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }
}

@media (max-width: 768px) {
    .points-highlight-mobile {
        margin-left: 0.5rem;
        /* Optimized for touch */
        padding: 0.15rem 0.5rem;
        /* Reduced animation for better performance */
        -moz-animation: none;
        animation: none;
        -webkit-animation: none;
        /* Simplified shadows */
        box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
        -webkit-box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
        -moz-box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
    }

    .points-dropdown-item {
        padding: 0.5rem 0;
    }

    .points-badge {
        background: linear-gradient(90deg, rgba(255, 107, 107, 0.8), rgba(255, 209, 102, 0.8));
        background: -webkit-linear-gradient(90deg, rgba(255, 107, 107, 0.8), rgba(255, 209, 102, 0.8));
        background: -moz-linear-gradient(90deg, rgba(255, 107, 107, 0.8), rgba(255, 209, 102, 0.8));
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        padding: 0.15rem 0.5rem;
        color: #000;
        font-size: 0.75rem;
    }
}

.reputation-toplist {
    background: #0f1723;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 1px 2px 9px 0px rgb(0 0 0 / 83%);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: auto;
    max-height: 500px;
}

.reputation-toplist:hover {
    transform: translateY(-5px);
    box-shadow: 1px 4px 12px 0px rgb(0 0 0 / 60%);
}

.reputation-toplist-item {
    border-bottom: 1px solid #333;
    padding: 10px;
    transition: background-color 0.3s ease;
}

.reputation-toplist-item:hover {
    background-color: #222;
}

.reputation-toplist-item:last-child {
    border-bottom: none;
}

.reputation-toplist-item-rank {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.reputation-toplist-item-username {
    color: #999;
}

.reputation-toplist-item-reputation {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-left: 5px;
}

.reputation-toplist .reputation-toplist-item-reputation.positive {
    color: #00ff00;
}

.reputation-toplist .reputation-toplist-item-reputation.negative {
    color: #ff0000;
}

.reputation-toplist-item-points {
    font-size: 14px;
    color: #ccc;
}

.reputation-toplist {
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: auto;
    max-height: 400px;
}

.reputation-toplist:hover {
    transform: translateY(-5px);
    box-shadow: 1px 4px 12px 0px rgba(0, 0, 0, 0.6);
}

.reputation-toplist .reputation-toplist-item {
    border-bottom: 1px solid #666;
    padding: 5px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
}

.reputation-toplist .reputation-toplist-item:hover {
    background-color: #444;
}

.reputation-toplist .reputation-toplist-item:last-child {
    border-bottom: none;
}

.reputation-toplist .reputation-toplist-item-rank {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.reputation-toplist .reputation-toplist-item-username {
    color: #999;
    flex: 1;
    margin-left: 10px;
}

.reputation-toplist .reputation-toplist-item-reputation {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin-left: 5px;
}

.reputation-toplist .reputation-toplist-item-reputation.positive {
    color: #00ff00;
}

.reputation-toplist .reputation-toplist-item-reputation.negative {
    color: #ff0000;
}

.reputation-toplist .reputation-toplist-item-points {
    font-size: 10px;
    color: #ccc;
    margin-left: 5px;
}

.reputation-toplist .reputation-toplist-item-last-updated {
    font-size: 10px;
    color: #ccc;
    margin-left: 5px;
}

@media (max-width: 768px) {
    .daily-rewards-banner {
        padding: 0;
        margin: 0.5rem 0;
    }

    .daily-rewards-banner a:hover {
        transform: none;
    }

    .daily-rewards-banner a:hover img {
        transform: scale(1.005);
    }
}

.dropdown-item,
.dropdown a,
.dropdown li a,
.menu-item,
.nav-item a {
    color: rgb(var(--text-primary));
    background: transparent;
    border: none;
    display: block;
    padding: 0.75rem .5rem;
    transition: all var(--transition-fast);
    border-radius: 6px;
    margin: 2px;
    text-decoration: none;
}

/* Navbar Effects and Animations */
/* Extracted from navbar_header.html inline styles */

/* Sound Wave Effect for Nav Register Button */
.nav-register-btn {
    position: relative;
    overflow: visible;
}

.nav-register-btn::before,
.nav-register-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.4) 0%, rgba(0, 240, 255, 0.2) 40%, rgba(0, 240, 255, 0.1) 60%, transparent 80%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.nav-register-btn::before {
    width: 0;
    height: 0;
    animation: navSoundWave1 2s ease-out infinite;
}

.nav-register-btn::after {
    width: 0;
    height: 0;
    animation: navSoundWave2 2s ease-out infinite;
    animation-delay: 1s;
}

@keyframes navSoundWave1 {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

@keyframes navSoundWave2 {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

.cr-fieldset {
    padding: 20px;
}


a:hover,
a:focus {
    text-decoration: none;
    /* no underline on hover/focus */
}

.category-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
    border-bottom: 1px solid var(--fl-border);
    padding: 25px;
    height: 55px;
    width: 1200px;
}

/* =====================
   🔧 UCP SIDEBAR FIX - Ensure content visibility
   ===================== */
/* Disable card glow effects on UCP sidebar to prevent content blocking */
.ucp-sidebar.card::before,
.ucp-sidebar.card::after,
.col-span-2.card.ucp-sidebar::before,
.col-span-2.card.ucp-sidebar::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure sidebar content is always visible and clickable */
.ucp-sidebar * {
    position: relative;
    z-index: 5;
}

.ucp-sidebar ul,
.ucp-sidebar li,
.ucp-sidebar a {
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================
   🔧 POSTING PAGE FIXES
   ===================== */

/* 1. Large Textarea - Dark Theme */
textarea,
textarea.inputbox,
#message,
.message-box textarea,
#postform textarea {
    background: rgba(15, 23, 42, 0.9) !important;
    color: rgb(var(--text-primary)) !important;
    border: 1px solid rgba(var(--primary), 0.3) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

textarea:focus,
textarea.inputbox:focus,
#message:focus {
    background: rgba(20, 30, 50, 0.95) !important;
    border-color: rgba(var(--primary), 0.5) !important;
    box-shadow: 0 0 20px rgba(var(--primary), 0.15) !important;
    outline: none !important;
}

/* 2. Tab Buttons - Fix white/invisible first tab */
.tabs .tab>a,
.minitabs .tab>a,
.tab>a,
.panel .tab a {
    background: rgba(30, 41, 59, 0.8) !important;
    color: rgb(var(--text-secondary)) !important;
    border: 1px solid rgba(var(--primary), 0.2) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
}

.tabs .tab>a:hover,
.minitabs .tab>a:hover,
.tab>a:hover {
    background: rgba(var(--primary), 0.15) !important;
    color: rgb(var(--primary)) !important;
    border-color: rgba(var(--primary), 0.4) !important;
}

.tabs .activetab>a,
.tabs .tab.activetab>a,
.minitabs .activetab>a,
.tab.activetab>a {
    background: rgba(var(--primary), 0.2) !important;
    color: rgb(var(--primary)) !important;
    border-color: rgba(var(--primary), 0.5) !important;
    border-bottom-color: transparent !important;
}

/* 3. Stick topic for input - constrain width */
input[name="topic_time_limit"],
.sticky-days-input,
dl.pmlist input[type="text"],
dl.pmlist input[type="number"] {
    max-width: 120px !important;
    width: 120px !important;
}

/* Generic small number inputs */
input[type="number"],
input[size="3"],
input[size="4"],
input[size="5"] {
    max-width: 100px !important;
    width: auto !important;
}

/* =====================
   🔧 REGISTRATION FORM CHECKBOX FIX
   ===================== */
/* Prevent checkbox/radio jumping on registration and all forms */
.panel form label,
#register form label,
.ucp-content form label,
form dd label,
form .checkbox-row,
form .radio-row {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-bottom: 0.5rem !important;
}

/* Ensure checkboxes and radios don't move */
.panel form input[type="checkbox"],
.panel form input[type="radio"],
#register form input[type="checkbox"],
#register form input[type="radio"],
.ucp-content form input[type="checkbox"],
.ucp-content form input[type="radio"],
form dd input[type="checkbox"],
form dd input[type="radio"] {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
    transform: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Override any global transforms that might cause jumping */
input[type="checkbox"],
input[type="radio"] {
    transform: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* Checkbox/radio container rows */
.checkbox-container,
.radio-container,
dl dd,
.form-group {
    position: relative !important;
    overflow: visible !important;
}

/* =====================
   🖋️ TINYMCE DARK THEME OVERRIDES
   ===================== */

/* TinyMCE Editor Container */
.tox.tox-tinymce {
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* TinyMCE Toolbar */
.tox .tox-editor-header,
.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background: linear-gradient(145deg, rgba(15, 23, 35, 0.98), rgba(20, 28, 42, 0.95)) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

/* TinyMCE Toolbar Buttons */
.tox .tox-tbtn {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-radius: 6px !important;
}

.tox .tox-tbtn:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
}

.tox .tox-tbtn svg {
    fill: currentColor !important;
}

/* TinyMCE Editor Area (iframe wrapper) */
.tox .tox-edit-area {
    background: rgb(15, 23, 35) !important;
    border-top: none !important;
}

.tox .tox-edit-area::before {
    border-color: rgba(56, 189, 248, 0.3) !important;
}

/* TinyMCE Editor iframe - This affects the editable content area */
.tox .tox-edit-area__iframe {
    background-color: rgb(15, 23, 35) !important;
}

/* TinyMCE Status Bar */
.tox .tox-statusbar {
    background: linear-gradient(145deg, rgba(15, 23, 35, 0.98), rgba(20, 28, 42, 0.95)) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
    color: #94a3b8 !important;
}

.tox .tox-statusbar__text-container,
.tox .tox-statusbar__path,
.tox .tox-statusbar__path-item {
    color: #94a3b8 !important;
}

.tox .tox-statusbar__wordcount {
    color: #64748b !important;
}

.tox .tox-statusbar__resize-handle svg {
    fill: #64748b !important;
}

/* TinyMCE Dropdowns and Menus */
.tox .tox-menu,
.tox .tox-collection--list {
    background: rgb(20, 28, 42) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.tox .tox-collection__item {
    color: #e2e8f0 !important;
}

.tox .tox-collection__item--active,
.tox .tox-collection__item:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
}

.tox .tox-collection__item-checkmark svg,
.tox .tox-collection__item-icon svg {
    fill: #94a3b8 !important;
}

/* TinyMCE Dialogs */
.tox .tox-dialog {
    background: rgb(15, 23, 35) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.tox .tox-dialog__header {
    background: linear-gradient(145deg, rgba(15, 23, 35, 0.98), rgba(20, 28, 42, 0.95)) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    color: #f1f5f9 !important;
}

.tox .tox-dialog__title {
    color: #f1f5f9 !important;
}

.tox .tox-dialog__body-content {
    background: rgb(15, 23, 35) !important;
    color: #e2e8f0 !important;
}

.tox .tox-dialog__footer {
    background: linear-gradient(145deg, rgba(15, 23, 35, 0.98), rgba(20, 28, 42, 0.95)) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
}

/* TinyMCE Form Inputs in Dialogs */
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-selectfield select {
    background: rgb(25, 35, 50) !important;
    border: 1px solid rgba(100, 116, 139, 0.4) !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
}

.tox .tox-textfield:focus,
.tox .tox-textarea:focus,
.tox .tox-selectfield select:focus {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

.tox .tox-label {
    color: #94a3b8 !important;
}

/* TinyMCE Buttons in Dialogs */
.tox .tox-button {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.tox .tox-button:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
}

.tox .tox-button--secondary {
    background: rgba(100, 116, 139, 0.3) !important;
    color: #e2e8f0 !important;
}

.tox .tox-button--secondary:hover {
    background: rgba(100, 116, 139, 0.5) !important;
}

/* TinyMCE Backdrop */
.tox .tox-dialog-wrap__backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* TinyMCE Emoticons Panel */
.tox .tox-dialog__body-nav-item {
    color: #94a3b8 !important;
}

.tox .tox-dialog__body-nav-item--active {
    color: #38bdf8 !important;
    border-bottom-color: #38bdf8 !important;
}

/* TinyMCE Sidebar (for character map, etc) */
.tox .tox-sidebar-wrap {
    background: rgb(15, 23, 35) !important;
}

/* TinyMCE Toolbar group separator */
.tox .tox-toolbar__group:not(:last-of-type) {
    border-right: 1px solid rgba(100, 116, 139, 0.3) !important;
}

/* Hide TinyMCE element path (P indicator) - cleaner look */
.tox .tox-statusbar__path,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__elementpath {
    display: none !important;
}