/////////////////////////////////////////////////////////
/////// Themechanger css working
////////////////////////////////////////////////////////


/* --- 1. CORE ENGINE & GLOBAL VARIABLES --- */
:root {
    --user-custom-color: #f15b19; 
    --bs-body-font-size: 14px;
}

/* Reset legacy control panel styles */
#control_panel {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
}
/* --- THEME TOGGLE BUTTON FIX --- */
#control_label {
    position: fixed !important;
    top: 10px !important;    /* Absolute distance from the top */
    left: 10px !important;   /* Absolute distance from the left */
    width: 35px !important;  /* Slightly larger for better centering */
    height: 35px !important;
    padding: 0 !important;   /* Critical for centering the icon */
    z-index: 100000 !important; /* One level higher than standard headers */
    background-color: #212529 !important; /* BS dark */
    color: #fff !important;
}

#control_label i {
    font-size: 16px !important; /* Adjusted to fit perfectly in a 35px button */
    display: block !important;
}
/* --- 2. SWATCH SIZING & THEME BOXES (The 1-16 Boxes) --- */

/* General Theme Swatches (Except the Color Picker) */
.theme-swatch:not(.colorPicker) {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: transform 0.2s, border-color 0.2s;
    background-color: #444; /* Fallback grey */
}

.theme-swatch:not(.colorPicker):hover {
    transform: translateY(-2px);
    border-color: #fff !important;
}



/* --- 3. THE COLOR PICKER SWATCH (The Orange Box) --- */

/* The Anchor (The wrapper you added in HTML) */
.swatch-clipper {
    width: 50px !important;
    height: 50px !important;
    position: relative !important;
    margin-left: 15px !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* The Actual Visual Swatch */
.colorPicker.theme-swatch {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--user-custom-color, #f15b19) !important;
    background-image: none !important; /* Prevents theme gradients from hiding the color */
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
    pointer-events: none; /* Let click pass to clipper */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.colorPicker.theme-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--user-custom-color);
}

/* Cleanup: Hide any elements the library tries to inject into the swatch */
.swatch-clipper div:not(.colorPicker) {
    display: none !important;
}

/* --- 4. THE COLORPICKER POPUP WINDOW (The Map) --- */
.colorpicker {
    width: 356px !important;
    height: 176px !important;
    z-index: 99999 !important; /* Above everything */
    position: fixed !important;
    margin-top: 10px !important;
    margin-left: -20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    border: 1px solid #555 !important;
}

/* Force hidden when display:none is present */
.colorpicker[style*="display: none"] {
    display: none !important;
}

/* --- 5. THEME GRADIENTS (Mapping to nb-1 to nb-16) --- */
body .theme-swatch.nb-1  { background: linear-gradient(180deg, #444, #222) !important; }
body .theme-swatch.nb-2  { background: linear-gradient(180deg, #007bff, #0056b3) !important; }
body .theme-swatch.nb-3  { background: linear-gradient(180deg, #d0e4f7, #73b1e7) !important; }
body .theme-swatch.nb-4  { background: linear-gradient(180deg, #b4e391, #61c419) !important; }
body .theme-swatch.nb-5  { background: linear-gradient(180deg, #f6e6b4, #ed9017) !important; }
body .theme-swatch.nb-6  { background: linear-gradient(180deg, #dc3545, #8a1622) !important; }
body .theme-swatch.nb-7  { background: linear-gradient(180deg, #17a2b8, #117a8b) !important; }
body .theme-swatch.nb-8  { background: linear-gradient(180deg, #2c2c2c, #000) !important; }
body .theme-swatch.nb-9  { background: linear-gradient(180deg, #6f42c1, #4e298a) !important; }
body .theme-swatch.nb-10 { background: linear-gradient(180deg, #f3e2c7, #b68d4c) !important; }
body .theme-swatch.nb-11 { background: linear-gradient(180deg, #b4ddb4, #005700) !important; }
body .theme-swatch.nb-12 { background: linear-gradient(180deg, #b7deed, #21b4e2) !important; }
body .theme-swatch.nb-13 { background: linear-gradient(180deg, #ffc0cb, #e67e91) !important; }
body .theme-swatch.nb-14 { background: linear-gradient(180deg, #191970, #000033) !important; }
body .theme-swatch.nb-15 { background: linear-gradient(180deg, #708090, #2f4f4f) !important; }
body .theme-swatch.nb-16 { background: linear-gradient(180deg, #ffffff, #e6e6e6) !important; border-color: #ddd !important; }


/* --- 5a. NAVBAR APPLICATION --- */
body.nb-1 .navbar  { background: linear-gradient(180deg, #444, #222) !important; }
body.nb-2 .navbar  { background: linear-gradient(180deg, #007bff, #0056b3) !important; }
body.nb-3 .navbar  { background: linear-gradient(180deg, #d0e4f7, #73b1e7) !important; }
body.nb-4 .navbar  { background: linear-gradient(180deg, #b4e391, #61c419) !important; }
body.nb-5 .navbar   { background: linear-gradient(180deg, #f6e6b4, #ed9017) !important; }
body.nb-6 .navbar   { background: linear-gradient(180deg, #dc3545, #8a1622) !important; }
body.nb-7 .navbar   { background: linear-gradient(180deg, #17a2b8, #117a8b) !important; }
body.nb-8 .navbar   { background: linear-gradient(180deg, #2c2c2c, #000) !important; }
body.nb-9 .navbar   { background: linear-gradient(180deg, #6f42c1, #4e298a) !important; }
body.nb-10 .navbar  { background: linear-gradient(180deg, #f3e2c7, #b68d4c) !important; }
body.nb-11 .navbar  { background: linear-gradient(180deg, #b4ddb4, #005700) !important; }
body.nb-12 .navbar  { background: linear-gradient(180deg, #b7deed, #21b4e2) !important; }
body.nb-13 .navbar  { background: linear-gradient(180deg, #ffc0cb, #e67e91) !important; }
body.nb-14 .navbar  { background: linear-gradient(180deg, #191970, #000033) !important; }
body.nb-15 .navbar  { background: linear-gradient(180deg, #708090, #2f4f4f) !important; }
body.nb-16 .navbar  { background: linear-gradient(180deg, #ffffff, #e6e6e6) !important; border-color: #ddd !important; }


/* --- 5b BACKGROUND SWATCH PREVIEWS --- */
/* This makes the little boxes in the panel show their colors */
/* --- MATCHED SWATCH PREVIEWS --- */
.theme-swatch.background-1  { background-color: rgba(0, 0, 0, 1.0) !important; color: rgba(234, 234, 234, 1); }/* Match your $body-bg variable exactly for the default */
.theme-swatch.background-2  { background-color: #e9ecef !important; }
.theme-swatch.background-3  { background-color: #ffffff !important; border: 1px solid #ddd !important; }
.theme-swatch.background-4  { background-color: #333333 !important; }
.theme-swatch.background-5  { background-color: #0056b3 !important; }
.theme-swatch.background-6  { background-color: #73b1e7 !important; }
.theme-swatch.background-7  { background-color: #61c419 !important; }
.theme-swatch.background-8  { background-color: #ed9017 !important; }
.theme-swatch.background-9  { background-color: #8a1622 !important; }
.theme-swatch.background-10 { background-color: #117a8b !important; }
.theme-swatch.background-11 { background-color: #1a1a1a !important; }
.theme-swatch.background-12 { background-color: #4e298a !important; }
.theme-swatch.background-13 { background-color: #b68d4c !important; }
.theme-swatch.background-14 { background-color: #003366 !important; }
.theme-swatch.background-15 { background-color: #2f4f4f !important; }
.theme-swatch.background-16 { background-color: #f0f0f0 !important; border: 1px solid #ddd !important; }


/* --- 5b BACKGROUND SWATCH PREVIEWS --- 39, 42, 47, 0.8*/
/* --- MATCHED SOLID BODY BACKGROUNDS --- */
body.background-1  { background-color: rgba(0, 0, 0, 1.0) !important; color: rgba(234, 234, 234, 1); }/* Match your $body-bg variable exactly for the default */
body.background-2  { background-color: #e9ecef !important; color: #212529; } /* Cool Gray */
body.background-3  { background-color: #ffffff !important; color: #212529; } /* Pure White */
body.background-4  { background-color: #333333 !important; color: #ffffff; } /* Matches NB-1 (Dark Grey) */
body.background-5  { background-color: #0056b3 !important; color: #ffffff; } /* Matches NB-2 (Blue) */
body.background-6  { background-color: #73b1e7 !important; color: #212529; } /* Matches NB-3 (Silver/Blue) */
body.background-7  { background-color: #61c419 !important; color: #ffffff; } /* Matches NB-4 (Green) */
body.background-8  { background-color: #ed9017 !important; color: #ffffff; } /* Matches NB-5 (Orange) */
body.background-9  { background-color: #8a1622 !important; color: #ffffff; } /* Matches NB-6 (Red) */
body.background-10 { background-color: #117a8b !important; color: #ffffff; } /* Matches NB-7 (Teal) */
body.background-11 { background-color: #1a1a1a !important; color: #ffffff; } /* Matches NB-8 (Deep Black) */
body.background-12 { background-color: #4e298a !important; color: #ffffff; } /* Matches NB-9 (Purple) */
body.background-13 { background-color: #b68d4c !important; color: #ffffff; } /* Matches NB-10 (Sand) */
body.background-14 { background-color: #003366 !important; color: #ffffff; } /* Matches NB-14 (Midnight) */
body.background-15 { background-color: #2f4f4f !important; color: #ffffff; } /* Matches NB-15 (Slate) */
body.background-16 { background-color: #f0f0f0 !important; color: #333333; } /* Matches NB-16 (Off White) */

/* Global Fix: Ensure all backgrounds cover the full screen height */
body[class*="background-"] {
    min-height: 100vh;
}

/* --- 5c Cards: RGBA System (With Dark Protection) --- */

/* Card 1: Subtle Glass - Only if NOT explicitly bg-dark */
body.card-1 .card:not(.bg-dark) { 
    background-color: rgba(255, 255, 255, 0.1) !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Card 2: Frosted Glass - Only if NOT explicitly bg-dark */
body.card-2 .card:not(.bg-dark) { 
    background-color: rgba(255, 255, 255, 0.5) !important; 
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card 3: Smoked Glass - Only if NOT explicitly bg-dark */
body.card-3 .card:not(.bg-dark) { 
    background-color: rgba(0, 0, 0, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card 4: Dark Obsidian - Only if NOT explicitly bg-dark */
body.card-4 .card:not(.bg-dark) { 
    background-color: rgba(0, 0, 0, 0.85) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Keep card-number transparent free from themechanger */
/* Target the text color specifically */
.card-number.d-md-inline {
    //color: #ffffff !important; 
    opacity: 0.08 !important;
    display: inline-block !important;
    visibility: visible !important;
}
/* This forces the element to show on mobile, even if d-none is in the HTML */
/*
.card-number {
    display: inline-block !important;
}
*/

/* --- Global Protection for .bg-dark utility --- */
/* --- This ensures your Site Statistics keep their custom dark look ---*/
.card.bg-dark {
    color: #fff !important;
}
.card.bg-dark .card-header {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Target the hover state of your outline-light buttons */
.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Subtle glow */
    color: #ffffff !important; /* Force text to stay white */
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* Optional: adds a soft outer glow */
}


/* The "Activity Log" Scroll Lock */
.activity-log-container {
    display: block !important;
    height: 300px !important;
    max-height: 300px !important;
    /* Force the scrollbar to exist even if not 'needed' for testing */
    overflow-y: scroll !important; 
    overflow-x: hidden !important;
    /* This fixes the 'stuck' scrolling on many browsers */
    -webkit-overflow-scrolling: touch;
}

/* Ensure the list inside doesn't collapse */
.activity-log-container ul {
    display: block !important;
    height: auto !important;
    min-height: 301px; /* Slightly more than the container to force scroll */
}
/* --- Swatch Appearance in Menu--- */
.theme-swatch.card-1 { 
    background: rgba(255, 255, 255, 0.3) !important; 
    border: 2px solid rgba(255, 255, 255, 0.5) !important; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.theme-swatch.card-2 { 
    background: rgba(255, 255, 255, 0.8) !important; 
    border: 2px solid #fff !important; 
}
.theme-swatch.card-3 { 
    background: rgba(100, 100, 100, 1) !important; 
    border: 2px solid #666 !important; 
}
.theme-swatch.card-4 { 
    background: rgba(30, 30, 30, 1) !important; 
    border: 2px solid #000 !important; 
}

/* ---5d TABLE BODY (Container) --- */
/* Swatch Colors */
.theme-swatch.th-1 { background: rgba(255, 255, 255, 0.2) !important; border: 1px solid #fff; }
.theme-swatch.th-2 { background: #0d6efd !important; border: 1px solid #fff; }
.theme-swatch.th-3 { background: #198754 !important; border: 1px solid #fff; }
.theme-swatch.th-4 { background: #dc3545 !important; border: 1px solid #fff; }

/* Page Results */
body.th-1 .table thead th { background-color: rgba(255, 255, 255, 0.1) !important; color: #eee !important; }
body.th-2 .table thead th { background-color: rgba(13, 110, 253, 0.6) !important; color: #fff !important; }
body.th-3 .table thead th { background-color: rgba(25, 135, 84, 0.6) !important; color: #fff !important; }
body.th-4 .table thead th { background-color: rgba(220, 53, 69, 0.6) !important; color: #fff !important; }

/* --- Expanded Row (TR) Styles --- */
/* Swatch Colors */
.theme-swatch.tr-1 { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid #222; }
.theme-swatch.tr-2 { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid #888; }
.theme-swatch.tr-3 { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid #444; }
.theme-swatch.tr-4 { background: rgba(255, 255, 255, 0.05) !important; border: 1px dashed #777; }

/* Page Results */
body.tr-1 .table tbody td { background-color: rgba(0, 0, 0, 0.5) !important; }
body.tr-2 .table tbody td { background-color: rgba(255, 255, 255, 0.1) !important; }
body.tr-3 .table tbody td { background-color: rgba(0, 0, 0, 0.2) !important; }
body.tr-4 .table tbody td { background-color: rgba(255, 255, 255, 0.02) !important; }

/* ---5e Footer Solid Color System --- */

/* Base Footer Styling */
footer { transition: background 0.3s ease; border-top: 1px solid rgba(255,255,255,0.1); }

/* 16 Colors */
body.footer-1 footer { background-color: #000000 !important; } /* Pitch Black */
body.footer-2 footer { background-color: #0d6efd !important; } /* Blue */
body.footer-3 footer { background-color: #6610f2 !important; } /* Indigo */
body.footer-4 footer { background-color: #6f42c1 !important; } /* Purple */
body.footer-5 footer { background-color: #d63384 !important; } /* Pink */
body.footer-6 footer { background-color: #dc3545 !important; } /* Red */
body.footer-7 footer { background-color: #fd7e14 !important; } /* Orange */
body.footer-8 footer { background-color: #ffc107 !important; } /* Yellow */
body.footer-9 footer { background-color: #198754 !important; } /* Green */
body.footer-10 footer { background-color: #20c997 !important; } /* Teal */
body.footer-11 footer { background-color: #0dcaf0 !important; } /* Cyan */
body.footer-12 footer { background-color: #adb5bd !important; } /* Gray */
body.footer-13 footer { background-color: #495057 !important; } /* Mid-Dark */
body.footer-14 footer { background-color: #212529 !important; } /* Dark */
body.footer-15 footer { background-color: #2c3e50 !important; } /* Midnight Blue */
body.footer-16 footer { background-color: #27ae60 !important; } /* Emerald */

/* Swatch Preview Styling */
.theme-swatch.footer-1 { background-color: #000000; }
.theme-swatch.footer-2 { background-color: #0d6efd; }
.theme-swatch.footer-3 { background-color: #6610f2; }
.theme-swatch.footer-4 { background-color: #6f42c1; }
.theme-swatch.footer-5 { background-color: #d63384; }
.theme-swatch.footer-6 { background-color: #dc3545; }
.theme-swatch.footer-7 { background-color: #fd7e14; }
.theme-swatch.footer-8 { background-color: #ffc107; }
.theme-swatch.footer-9 { background-color: #198754; }
.theme-swatch.footer-10 { background-color: #20c997; }
.theme-swatch.footer-11 { background-color: #0dcaf0; }
.theme-swatch.footer-12 { background-color: #adb5bd; }
.theme-swatch.footer-13 { background-color: #495057; }
.theme-swatch.footer-14 { background-color: #212529; }
.theme-swatch.footer-15 { background-color: #2c3e50; }
.theme-swatch.footer-16 { background-color: #27ae60; }

/* --- 6. PURE CSS LOGO / BANNER ENGINE --- */

:root {
    --banner-height: 220px;
    --banner-bg: #111;
    --banner-accent: #cc0000;
    --banner-glow: #ff2200;
    --banner-title-size: clamp(3rem, 8vw, 5.5rem);
}

.site-banner {
    position: relative;
    width: 100%;
    height: var(--banner-height);
    min-height: var(--banner-height);
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--banner-bg) !important;
    isolation: isolate;
}

.site-banner::before,
.site-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-banner::before {
    z-index: 1;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,.22) 2px,
            rgba(0,0,0,.22) 4px
        );
}

.site-banner::after {
    z-index: 2;
    background:
        radial-gradient(ellipse 70% 100% at 50% 50%,
            transparent 35%,
            rgba(0,0,0,.72) 100%
        );
}

.banner-inner {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 42px);
    user-select: none;
}

.banner-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 5px;
}

.banner-title {
    font-family: 'Rajdhani', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: var(--banner-title-size);
    letter-spacing: .08em;
    background: linear-gradient(
        180deg,
        #fff 0%,
        #e0e0e0 20%,
        #888 50%,
        #ccc 70%,
        #f5f5f5 85%,
        #999 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 12px rgba(255,255,255,.16));
}

.banner-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 2px;
    background: linear-gradient(90deg, transparent, var(--banner-accent), transparent);
}

.banner-tagline,
.banner-version {
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    text-transform: uppercase;
}

.banner-tagline {
    font-size: clamp(.72rem, 2vw, 1.05rem);
    letter-spacing: .28em;
    color: var(--banner-accent);
    text-shadow: 0 0 10px var(--banner-glow);
    animation: chaos-glitch 6s ease-in-out infinite;
}

.banner-version {
    margin-top: 6px;
    font-size: .62rem;
    letter-spacing: .15em;
    color: rgba(255,255,255,.32);
}

/* shared side marks */
.banner-mark {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
}

.banner-mark span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 100px;
    height: 36px;
    margin: -18px 0 0 -50px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--banner-accent) 76%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--banner-glow) 42%, transparent);
}

.banner-mark span:nth-child(1) { transform: rotate(0deg); }
.banner-mark span:nth-child(2) { transform: rotate(60deg); }
.banner-mark span:nth-child(3) { transform: rotate(-60deg); }

.banner-mark::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--banner-glow), #330000);
    box-shadow:
        0 0 8px 3px color-mix(in srgb, var(--banner-accent) 70%, transparent),
        0 0 22px 7px color-mix(in srgb, var(--banner-glow) 36%, transparent);
}

.banner-mark::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--banner-glow);
    box-shadow: 0 0 8px 2px var(--banner-glow);
}

.banner-mark-left {
    animation: banner-spin 12s linear infinite;
}

.banner-mark-right {
    animation: banner-spin 15s linear infinite reverse;
}

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

@keyframes chaos-glitch {
    0%, 85%, 100% {
        transform: translate(0,0);
        opacity: 1;
    }
    86% {
        transform: translate(-2px,0);
        text-shadow: -3px 0 var(--banner-glow), 3px 0 rgba(0,255,255,.45);
    }
    87% {
        transform: translate(2px,0);
        text-shadow: 3px 0 var(--banner-glow), -3px 0 rgba(0,255,255,.45);
    }
    90% {
        transform: translate(-1px,1px);
        opacity: .86;
    }
}

/* skin switcher previews */
#skin-switcher .theme-swatch.skin-1 {
    background: linear-gradient(135deg, #050505, #cc0000) !important;
}
#skin-switcher .theme-swatch.skin-2 {
    background: linear-gradient(135deg, #001018, #00e5ff) !important;
}
#skin-switcher .theme-swatch.skin-3 {
    background: linear-gradient(135deg, #020802, #00ff88) !important;
}
#skin-switcher .theme-swatch.skin-4 {
    background: linear-gradient(135deg, #14001f, #ff00cc) !important;
}

#nav-switcher,
#skin-switcher {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 1rem;
}

/* SKIN 1: Chaos Reactor */
/* =====================================================
   CHAOS PACK VOL.1 — Pure CSS Logo Designs
   Uses existing banner HTML / no image assets
   ===================================================== */

/* SKIN 1: CHAOS REACTOR */
body.skin-1 {
    --banner-bg: #111;
    --banner-accent: #cc0000;
    --banner-glow: #ff2600;
}

body.skin-1 .site-banner {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,38,0,.20), transparent 34%),
        radial-gradient(circle at 50% 120%, rgba(204,0,0,.25), transparent 44%),
        linear-gradient(180deg, #181818, #050505) !important;
}

body.skin-1 .banner-mark {
    animation: banner-spin 12s linear infinite;
}

/* SKIN 2: TRON WIREGRID */
body.skin-2 {
    --banner-bg: #020b12;
    --banner-accent: #00e5ff;
    --banner-glow: #00bcd4;
}

body.skin-2 .site-banner {
    background:
        linear-gradient(rgba(0,229,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.16) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, #092633, #010409 75%) !important;
    background-size: 42px 42px, 42px 42px, cover !important;
}

body.skin-2 .site-banner::after {
    background:
        linear-gradient(180deg, transparent 35%, rgba(0,229,255,.18) 100%),
        radial-gradient(ellipse 70% 100% at 50% 50%, transparent 35%, rgba(0,0,0,.75) 100%);
}

body.skin-2 .banner-mark span {
    border-style: dashed;
}

body.skin-2 .banner-title {
    filter:
        drop-shadow(0 0 10px rgba(0,229,255,.55))
        drop-shadow(0 0 24px rgba(0,229,255,.25));
}

/* SKIN 3: MATRIX FALLOUT */
body.skin-3 {
    --banner-bg: #010401;
    --banner-accent: #00ff88;
    --banner-glow: #00cc66;
}

body.skin-3 .site-banner {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,255,136,.08) 0,
            rgba(0,255,136,.08) 1px,
            transparent 1px,
            transparent 34px
        ),
        repeating-linear-gradient(
            180deg,
            rgba(0,255,136,.035) 0,
            rgba(0,255,136,.035) 2px,
            transparent 2px,
            transparent 18px
        ),
        radial-gradient(circle at 50% 50%, #063018, #000 78%) !important;
}

body.skin-3 .banner-mark {
    border: 1px solid rgba(0,255,136,.45);
    border-radius: 14px;
    animation: matrix-pulse 3s ease-in-out infinite;
}

body.skin-3 .banner-mark span {
    border-radius: 8px;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
}

body.skin-3 .banner-mark span:nth-child(1) { transform: rotate(0deg); }
body.skin-3 .banner-mark span:nth-child(2) { transform: rotate(45deg); }
body.skin-3 .banner-mark span:nth-child(3) { transform: rotate(90deg); }

body.skin-3 .banner-tagline {
    letter-spacing: .36em;
}

@keyframes matrix-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(0,255,136,.25);
    }
    50% {
        box-shadow: 0 0 24px rgba(0,255,136,.65);
    }
}

/* SKIN 4: SYNTHWAVE OVERDRIVE */
body.skin-4 {
    --banner-bg: #12001f;
    --banner-accent: #ff00cc;
    --banner-glow: #b000ff;
}

body.skin-4 .site-banner {
    background:
        linear-gradient(180deg, rgba(255,0,204,.20), transparent 52%),
        linear-gradient(90deg, #07000f, #280037, #07000f) !important;
}

body.skin-4 .site-banner::before {
    background:
        linear-gradient(
            0deg,
            rgba(255,0,204,.22),
            transparent 45%,
            rgba(0,229,255,.14)
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 10px,
            rgba(255,255,255,.06) 11px
        );
}

body.skin-4 .banner-title {
    filter:
        drop-shadow(0 0 14px rgba(255,0,204,.55))
        drop-shadow(0 0 28px rgba(0,229,255,.22));
}

body.skin-4 .banner-mark {
    animation: synth-float 4s ease-in-out infinite;
}

body.skin-4 .banner-mark span:nth-child(1) {
    transform: rotate(0deg) scaleX(1.16);
}
body.skin-4 .banner-mark span:nth-child(2) {
    transform: rotate(90deg) scaleX(1.16);
}
body.skin-4 .banner-mark span:nth-child(3) {
    transform: rotate(45deg) scaleX(.82);
}

@keyframes synth-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

/* SWITCHER PREVIEWS */
#skin-switcher .theme-swatch.skin-1 {
    background: radial-gradient(circle, #ff2600, #050505 70%) !important;
}
#skin-switcher .theme-swatch.skin-2 {
    background:
        linear-gradient(rgba(0,229,255,.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.5) 1px, transparent 1px),
        #020b12 !important;
    background-size: 8px 8px !important;
}
#skin-switcher .theme-swatch.skin-3 {
    background: repeating-linear-gradient(90deg, #00ff88 0 2px, #020802 2px 8px) !important;
}
#skin-switcher .theme-swatch.skin-4 {
    background: linear-gradient(135deg, #12001f, #ff00cc, #00e5ff) !important;
}

@media (max-width: 600px) {
    :root {
        --banner-height: 160px;
    }

    .banner-mark {
        width: 68px;
        height: 68px;
    }

    .banner-mark span {
        width: 64px;
        height: 24px;
        margin: -12px 0 0 -32px;
    }

    .banner-inner {
        gap: 16px;
    }

    .banner-version {
        display: none;
    }
}

/* --- 7. BOOTSTRAP OVERRIDES --- */
#color-picker-container {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 !important;
    border-top: 1px solid #444;
    margin-top: 20px !important;
    position: relative !important;
}

.offcanvas { z-index: 1045 !important; }
.offcanvas-backdrop { z-index: 1040 !important; }

/* Critical: Allow picker to escape the side panel */
.offcanvas, .offcanvas-body {
    overflow: visible !important;
}

/* --- 8. TYPOGRAPHY THEMES & COMPONENT GUARDS --- */

/* 8a. Font Definitions */
body.text-1 { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body.text-2 { font-family: 'Tahoma', 'Geneva', sans-serif; }
body.text-3 { font-family: 'Verdana', sans-serif; }
body.text-4 { font-family: 'Calibri', 'Candara', sans-serif; }

/* Dynamic font colors for the body and all text elements */
body.fontcolor-1 { --font-color: #ffffff; } /* White */
body.fontcolor-2 { --font-color: #000000; } /* Black */
body.fontcolor-3 { --font-color: #ff0000; } /* Red */
body.fontcolor-4 { --font-color: #00ff00; } /* Green */
body.fontcolor-5 { --font-color: #0000ff; } /* Blue */
body.fontcolor-6 { --font-color: #f1c40f; } /* Yellow */
body.fontcolor-7 { --font-color: #e67e22; } /* Orange */
body.fontcolor-8 { --font-color: #8e44ad; } /* Purple */

/* Apply to all text content dynamically EXCEPT the username block or any original default colours */
body.fontcolor-1 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-2 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-3 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-4 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-5 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-6 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-7 *:not(.user-identity-block, .user-identity-block *),
body.fontcolor-8 *:not(.user-identity-block, .user-identity-block *) {
    color: var(--font-color) !important;
}

/* 8b. The "Anti-Distortion" Guard */
/* This prevents font changes from making your Accent Swatch huge or tiny */
.swatch-clipper, 
.swatch-clipper > div, 
.colorPicker.theme-swatch {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
}

/* 8c. Standardize form sizes so the dropdown doesn't shift the layout */
#text-switcher {
    font-family: sans-serif !important; /* Keep the UI control clean */
    font-size: 13px !important;
}

/* --- OFFCANVAS SCROLL FIX --- */
.offcanvas-body {
    overflow-y: auto !important; /* Enable vertical scrolling */
    max-height: 100vh;           /* Limit height to screen height */
    scrollbar-width: thin;       /* Modern scrollbar for Firefox */
    scrollbar-color: #444 #212529;
}

/* Custom Scrollbar for Chrome/Edge/Safari */
.offcanvas-body::-webkit-scrollbar {
    width: 6px;
}
.offcanvas-body::-webkit-scrollbar-track {
    background: #212529;
}
.offcanvas-body::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

/* Ensure the Reset button container has some breathing room at the bottom */
.offcanvas-body .mt-4 {
    padding-bottom: 30px; 
}