/* =====================================================
   GLOBAL CONTENT CONTAINERS
===================================================== */
main,
.page-width {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-right: 10px;
    padding-left: 10px;
}

/* =====================================================
   GLOBAL BODY
===================================================== */
html {
    min-height: 100%;
    background: var(--wire-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    padding-top: 68px;
    overflow-y: scroll;
    background: var(--wire-bg);
    color: var(--wire-text);
}

/* =====================================================
   GLOBAL TYPOGRAPHY
===================================================== */
* {
    font-family: "Inter", sans-serif;
    font-weight: 300;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
img {
    display: block;
    max-width: 100%;
}


/* =====================================================
   FROSTED GLASS — FUTURISTIC GLASS
===================================================== */
:root,
[data-theme="frosted-glass"] {
    --wire-bg: #080d18;
    --wire-surface: rgba(20, 31, 52, 0.82);
    --wire-card: rgba(27, 43, 68, 0.72);

    --wire-text: #edf6ff;
    --wire-text-bg: #3b587548;
    --wire-text2: #b2c6df;
    --wire-text3: #819bb9;

    --wire-border: rgba(142, 183, 224, 0.24);
    --wire-border2: rgba(142, 205, 255, 0.42);
    --wire-border3: rgba(142, 205, 255, 0.12);

    --wire-hover: rgba(95, 157, 218, 0.13);
    --wire-active: rgba(73, 165, 255, 0.20);
    --wire-focus: #65d9ff;

    --wire-accent: #68d5ff;
    --wire-accent-hover: #a0e7ff;
    --wire-button-text: #071321;
    --wire-accent2: #9aabff;

    --wire-success: #65e6bc;
    --wire-warning: #ffd27a;
    --wire-danger: #ff8299;
    --wire-info: #68d5ff;

    --wire-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    --wire-shadow2: 0 0 24px rgba(83, 174, 255, 0.08);
    --wire-overlay: rgba(4, 9, 19, 0.78);
}


/* =====================================================
   SLEEK AND FUTURISTIC — TITANIUM
===================================================== */
[data-theme="sleek-futuristic"] {
    --wire-bg: #17191d;
    --wire-surface: #22262b;
    --wire-card: #2a2f35;

    --wire-text: #f4f5f6;
    --wire-text-bg: #929aa329;
    --wire-text2: #c0c5cb;
    --wire-text3: #929aa3;

    --wire-border: #444b53;
    --wire-border2: #626b75;
    --wire-border3: #343a41;

    --wire-hover: #333940;
    --wire-active: #3a444e;
    --wire-focus: #8ecbff;

    --wire-accent: #a8c7df;
    --wire-accent-hover: #d0e7f8;
    --wire-button-text: #15191e;
    --wire-accent2: #8e9eaf;

    --wire-success: #8bd5b2;
    --wire-warning: #e8c982;
    --wire-danger: #ed9292;
    --wire-info: #8ecbff;

    --wire-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    --wire-shadow2: 0 0 16px rgba(168, 199, 223, 0.04);
    --wire-overlay: rgba(15, 17, 20, 0.90);
}


/* =====================================================
   2. MATTE BLACK
   Obsidian / Graphite / Silver
===================================================== */
[data-theme="matte-black"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #090A0C;
    --wire-surface: #15171A;
    --wire-card: #202327;

    /* TYPOGRAPHY */
    --wire-text: #F0F0F0;
    --wire-text2: #B8BBC0;
    --wire-text3: #858A91;

    /* BORDERS */
    --wire-border: #2C3035;
    --wire-border2: #484E55;

    /* INTERACTION STATES */
    --wire-hover: #25292E;
    --wire-active: #343A40;
    --wire-focus: #D1D8E0;

    /* BRAND ACCENTS */
    --wire-accent: #C4CCD5;
    --wire-accent-hover: #F1F4F7;
    --wire-button-text: #101215;

    /* SECONDARY ACCENT */
    --wire-accent2: #929EAD;

    /* STATUS COLORS */
    --wire-success: #70C99A;
    --wire-warning: #E5BD6A;
    --wire-danger: #EF737B;
    --wire-info: #7CBDEB;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.50);
    --wire-overlay: rgba(0, 0, 0, 0.82);
}


/* =====================================================
   3. METALLIC CHIC
   Brushed Silver / Champagne / Slate
===================================================== */
[data-theme="metallic-chic"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #17191C;
    --wire-surface: #25282C;
    --wire-card: #34383D;

    /* TYPOGRAPHY */
    --wire-text: #F3F0E9;
    --wire-text2: #C8C4BB;
    --wire-text3: #9B9B98;

    /* BORDERS */
    --wire-border: #45484B;
    --wire-border2: #77766F;

    /* INTERACTION STATES */
    --wire-hover: #393D41;
    --wire-active: #494A49;
    --wire-focus: #DCC69A;

    /* BRAND ACCENTS */
    --wire-accent: #D4BD8C;
    --wire-accent-hover: #F0DDB1;
    --wire-button-text: #252117;

    /* SECONDARY ACCENT */
    --wire-accent2: #B9C7D3;

    /* STATUS COLORS */
    --wire-success: #8CC5A0;
    --wire-warning: #E7C475;
    --wire-danger: #E78080;
    --wire-info: #91C6E5;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.40);
    --wire-overlay: rgba(12, 13, 15, 0.82);
}


/* =====================================================
   4. Vintage Pastel (Readjusted from Vintage Pastel)
   Deep Teal / Slate Grey / Muted Rose / Top Pink / Bottom Charcoal
===================================================== */
[data-theme="vintage-pastel"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg-b: #0b1212;
    --wire-bg-w: #0b1212;
    --wire-surface: #4a4849;
    --wire-surface2: #4a4849;     /*  */
    --wire-card: #2e4242;         /*  */
    

    /* TYPOGRAPHY */
    --wire-text-b: #0b1212;       /*  */
    --wire-text-w: #e2e2e2;       /*  */
    --wire-text: #d4bdbd;         /*  */
    --wire-text2: #848c8d;
    --wire-text3: #ac7171;        /* navbar icon color */

    /* BORDERS */
    --wire-border: #848c8d;       /*  */
    --wire-border2: #ac7171;      /*  */

    /* INTERACTION STATES */
    --wire-hover: #4a4849;        /*  */
    --wire-active: #a45e5f;       /*  */
    --wire-focus: #ebb7b6;        /*  */

    /* BRAND ACCENTS */
    --wire-accent: #a45e5f;       /*  */
    --wire-accent-hover: #ebb7b6; /*  */
    --wire-button-text: #284c4c;  /*  */

    /* SECONDARY ACCENT */
    --wire-accent2: #848c8d;      /*  */

    /* STATUS COLORS */
    --wire-success: #8EB895;      /*  */
    --wire-warning: #E6BF70;      /*  */
    --wire-danger: #E77F7F;       /*  */
    --wire-info: #91BFD3;         /*  */

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.48);
    --wire-overlay: rgba(40, 76, 76, 0.84); /* Updated using Deep Teal base */
}


/* =====================================================
   6. COASTAL FOREST
   Deep Pine / Misty Sage / Warm Sand / Charcoal Bark
===================================================== */
[data-theme="coastal-forest"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #1B2421;           /* Deep Pine Black */
    --wire-surface: #25332E;      /* Forest Shadow */
    --wire-card: #2C3E37;         /* Dark Spruce */

    /* TYPOGRAPHY */
    --wire-text: #F4F6F5;         /* Crisp Mist */
    --wire-text2: #A3B1A8;        /* Misty Sage */
    --wire-text3: #7A8A81;        /* Forest Lichen */

    /* BORDERS */
    --wire-border: #3A4F47;       /* Soft Spruce */
    --wire-border2: #D1B894;      /* Muted Sand */

    /* INTERACTION STATES */
    --wire-hover: #354B42;        /* Light Spruce */
    --wire-active: #D1B894;       /* Muted Sand */
    --wire-focus: #E6D5BC;        /* Warm Ivory */

    /* BRAND ACCENTS */
    --wire-accent: #D1B894;       /* Muted Sand */
    --wire-accent-hover: #E6D5BC; /* Warm Ivory */
    --wire-button-text: #1B2421;  /* Deep Pine Black */

    /* SECONDARY ACCENT */
    --wire-accent2: #A3B1A8;      /* Misty Sage */

    /* STATUS COLORS */
    --wire-success: #8EB895;
    --wire-warning: #E6BF70;
    --wire-danger: #E77F7F;
    --wire-info: #91BFD3;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.52);
    --wire-overlay: rgba(27, 36, 33, 0.88);
}


/* =====================================================
   7. CYBER MIDNIGHT
   Deep Indigo / Electric Cyan / Neon Magenta / Void
===================================================== */
[data-theme="cyber-midnight"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #0A0B10;           /* Cosmic Void */
    --wire-surface: #121420;      /* Deep Cyber Indigo */
    --wire-card: #1a3028b8;         /* Tech Slate */

    /* TYPOGRAPHY */
    --wire-text: #F0F3FF;         /* Stark White */
    --wire-text2: #8F9BB3;        /* Circuit Grey */
    --wire-text3: #5865F2;        /* Blurple Code */

    /* BORDERS */
    --wire-border: #262B44;       /* Neon Shadow Border */
    --wire-border2: #4b9f80c0;      /* Matrix Cyan */

    /* INTERACTION STATES */
    --wire-hover: #222741;        /* Interface Highlight */
    --wire-active: #548f5f5d;       /* Cyber Magenta */
    --wire-focus: #00F5D4;        /* Matrix Cyan */

    /* BRAND ACCENTS */
    --wire-accent: #00F5D4;       /* Matrix Cyan */
    --wire-accent-hover: #73FFF1; /* Hyper Cyan */
    --wire-button-text: #0A0B10;  /* Cosmic Void */

    /* SECONDARY ACCENT */
    --wire-accent2: #3bd975;      /* Cyber Magenta */

    /* STATUS COLORS */
    --wire-success: #00FF87;
    --wire-warning: #FFD166;
    --wire-danger: #FF4D6D;
    --wire-info: #00B4D8;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.65);
    --wire-overlay: rgba(10, 11, 16, 0.90);
}


/* =====================================================
   8. AUTUMN HEARTH
   Espresso / Terracotta / Warm Amber / Cream
===================================================== */
[data-theme="autumn-hearth"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #1A120B;           /* Dark Espresso */
    --wire-surface: #271B11;      /* Roasted Bean */
    --wire-card: #3C2A21;         /* Warm Walnut */

    /* TYPOGRAPHY */
    --wire-text: #F5EBE6;         /* Soft Cream */
    --wire-text2: #D5C2B5;        /* Toasted Almond */
    --wire-text3: #B0927A;        /* Fallen Leaf */

    /* BORDERS */
    --wire-border: #4A3429;       /* Hearth Shadow */
    --wire-border2: #D4A373;      /* Warm Amber */

    /* INTERACTION STATES */
    --wire-hover: #4F382B;        /* Warm Timber */
    --wire-active: #E76F51;       /* Terracotta */
    --wire-focus: #F4A261;        /* Spiced Ginger */

    /* BRAND ACCENTS */
    --wire-accent: #D4A373;       /* Warm Amber */
    --wire-accent-hover: #FAEDCD; /* Light Buttercream */
    --wire-button-text: #1A120B;  /* Dark Espresso */

    /* SECONDARY ACCENT */
    --wire-accent2: #E76F51;      /* Terracotta */

    /* STATUS COLORS */
    --wire-success: #A3B19B;
    --wire-warning: #E9C46A;
    --wire-danger: #E63946;
    --wire-info: #A8DADC;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.55);
    --wire-overlay: rgba(26, 18, 11, 0.88);
}


/* =====================================================
   9. IMPERIAL VELVET
   Deep Plum / Mulberry / Champagne Gold / Platinum
===================================================== */
[data-theme="imperial-velvet"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #130B14;           /* Royal Onyx */
    --wire-surface: #1E1220;      /* Midnight Plum */
    --wire-card: #2B1B2E;         /* Deep Amethyst */

    /* TYPOGRAPHY */
    --wire-text: #F7F4F7;         /* Soft Platinum */
    --wire-text2: #CBB9CC;        /* Misty Heather */
    --wire-text3: #9F82A0;        /* Muted Mulberry */

    /* BORDERS */
    --wire-border: #3D2641;       /* Velvet Shadow */
    --wire-border2: #D4AF37;      /* Burnished Gold */

    /* INTERACTION STATES */
    --wire-hover: #472D4C;        /* Rich Orchid */
    --wire-active: #E6C762;       /* Bright Champagne */
    --wire-focus: #F3E5AB;        /* Soft Vanilla */

    /* BRAND ACCENTS */
    --wire-accent: #D4AF37;       /* Burnished Gold */
    --wire-accent-hover: #F3E5AB; /* Soft Vanilla */
    --wire-button-text: #130B14;  /* Royal Onyx */

    /* SECONDARY ACCENT */
    --wire-accent2: #B388EB;      /* Electric Lavender */

    /* STATUS COLORS */
    --wire-success: #9BCCA3;
    --wire-warning: #F4D35E;
    --wire-danger: #EE9696;
    --wire-info: #A9DEF9;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.60);
    --wire-overlay: rgba(19, 11, 20, 0.85);
}


/* =====================================================
   10. NORD FROSTED
   Deep Oceanic / Glacier Blue / Aurora Mint / Frost White
===================================================== */
[data-theme="nord-frosted"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #1A202C;           /* Arctic Deep */
    --wire-surface: #222A3A;      /* Glacier Ice */
    --wire-card: #2D3748;         /* Frosted Slate */

    /* TYPOGRAPHY */
    --wire-text: #EDF2F7;         /* Frost White */
    --wire-text2: #CBD5E0;        /* Cold Mist */
    --wire-text3: #A0AEC0;        /* Pale Icicle */

    /* BORDERS */
    --wire-border: #4A5568;       /* Frozen Stone */
    --wire-border2: #63B3ED;      /* Glacier Blue */

    /* INTERACTION STATES */
    --wire-hover: #3182CE;        /* Deep Freeze Blue */
    --wire-active: #4FD1C5;       /* Aurora Mint */
    --wire-focus: #9DECF9;        /* Bright Ice Neon */

    /* BRAND ACCENTS */
    --wire-accent: #63B3ED;       /* Glacier Blue */
    --wire-accent-hover: #9DECF9; /* Bright Ice Neon */
    --wire-button-text: #1A202C;  /* Arctic Deep */

    /* SECONDARY ACCENT */
    --wire-accent2: #4FD1C5;      /* Aurora Mint */

    /* STATUS COLORS */
    --wire-success: #68D391;
    --wire-warning: #F6E05E;
    --wire-danger: #FC8181;
    --wire-info: #63B3ED;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.40);
    --wire-overlay: rgba(26, 32, 44, 0.85);
}


/* =====================================================
   11. RETRO TERMINAL
   IBM Amber / Phosphor Matrix / Vintage Charcoal
===================================================== */
[data-theme="retro-terminal"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #0F100D;           /* Dead CRT Screen */
    --wire-surface: #1B1C17;      /* Console Chassis */
    --wire-card: #282A22;         /* Terminal Base */

    /* TYPOGRAPHY */
    --wire-text: #FFB000;         /* Amber Phosphor High */
    --wire-text2: #D49200;        /* Amber Phosphor Mid */
    --wire-text3: #8A5F00;        /* Amber Glow Low */

    /* BORDERS */
    --wire-border: #3A3C31;       /* Bezel Inset */
    --wire-border2: #FFB000;      /* Glowing Filament */

    /* INTERACTION STATES */
    --wire-hover: #33352B;        /* High-Voltage Warmth */
    --wire-active: #FFCC00;       /* Peak Filament Pulse */
    --wire-focus: #FFFFFF;        /* Pure Raster Beam */

    /* BRAND ACCENTS */
    --wire-accent: #D49200;       /* Amber Phosphor Mid */
    --wire-accent-hover: #FFB000; /* Amber Phosphor High */
    --wire-button-text: #0F100D;  /* Dead CRT Screen */

    /* SECONDARY ACCENT */
    --wire-accent2: #A3A692;      /* Hardware Olive */

    /* STATUS COLORS */
    --wire-success: #33FF33;      /* Matrix Green */
    --wire-warning: #FFB000;      /* Core Warning */
    --wire-danger: #FF3333;       /* System Halt */
    --wire-info: #3399FF;         /* Logic Dump */

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.60);
    --wire-overlay: rgba(15, 16, 13, 0.88);
}


/* =====================================================
   12. MATCHA CAFE
   Powdered Green Tea / Hazelnut / Roasted Oat / Cream
===================================================== */
[data-theme="matcha-cafe"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #1B1E19;           /* Pure Matcha Base */
    --wire-surface: #242921;      /* Deep Tea Leaf */
    --wire-card: #2F362C;         /* Whispering Bamboo */

    /* TYPOGRAPHY */
    --wire-text: #F1EFEA;         /* Fresh Oat Foam */
    --wire-text2: #C9C4B7;        /* Bleached Linen */
    --wire-text3: #999384;        /* Toasted Sesame */

    /* BORDERS */
    --wire-border: #444E3F;       /* Steeped Leaf */
    --wire-border2: #A9B388;      /* Sweet Pistachio */

    /* INTERACTION STATES */
    --wire-hover: #4D5747;        /* Whisked Foam */
    --wire-active: #B5C18E;       /* Pale Matcha */
    --wire-focus: #E6CCB2;        /* Steamed Milk Cream */

    /* BRAND ACCENTS */
    --wire-accent: #A9B388;       /* Sweet Pistachio */
    --wire-accent-hover: #B5C18E; /* Pale Matcha */
    --wire-button-text: #1B1E19;  /* Pure Matcha Base */

    /* SECONDARY ACCENT */
    --wire-accent2: #D4A373;      /* Sweet Hazelnut Syrup */

    /* STATUS COLORS */
    --wire-success: #9DBF9E;
    --wire-warning: #F5D372;
    --wire-danger: #E08989;
    --wire-info: #A3C9D6;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.45);
    --wire-overlay: rgba(27, 30, 25, 0.87);
}


/* =====================================================
   13. WASTELAND HAZARD
   Asphalt Iron / Toxic Acid / Radiation Orange / Core Melt
===================================================== */
[data-theme="wasteland-hazard"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #0F1112;           /* Scorch Asphalt */
    --wire-surface: #191C1E;      /* Industrial Slag */
    --wire-card: #23272B;         /* Reinforced Cast Iron */

    /* TYPOGRAPHY */
    --wire-text: #FAFAFA;         /* Flashing Arc White */
    --wire-text2: #A0A5A8;        /* Coroded Zinc */
    --wire-text3: #62696E;        /* Heavy Fallout Ash */

    /* BORDERS */
    --wire-border: #33393E;       /* Slag Weld Line */
    --wire-border2: #CCFF00;      /* Biohazard Lime */

    /* INTERACTION STATES */
    --wire-hover: #3E454B;        /* Friction Burn */
    --wire-active: #FF5500;       /* Corrosive Hazard Orange */
    --wire-focus: #DFFF00;        /* Acid Fusion Core */

    /* BRAND ACCENTS */
    --wire-accent: #CCFF00;       /* Biohazard Lime */
    --wire-accent-hover: #DFFF00; /* Acid Fusion Core */
    --wire-button-text: #0F1112;  /* Scorch Asphalt */

    /* SECONDARY ACCENT */
    --wire-accent2: #FF5500;      /* Corrosive Hazard Orange */

    /* STATUS COLORS */
    --wire-success: #00FF66;
    --wire-warning: #FFAA00;
    --wire-danger: #FF0033;
    --wire-info: #00DFFF;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.75);
    --wire-overlay: rgba(15, 17, 18, 0.94);
}


/* =====================================================
   13. WIRELAB LIGHT
===================================================== */
[data-theme="wirelab-light"] {
    color-scheme: dark;

    /* SURFACES */
    --wire-bg: #f7f7f7;           /* Scorch Asphalt */
    --wire-surface: #d4d4d4;      /* Industrial Slag */
    --wire-card: #e4f0f3;         /* Reinforced Cast Iron */

    /* TYPOGRAPHY */
    --wire-text: #000000;         /* Flashing Arc White */
    --wire-text2: #ffffff;        /* Coroded Zinc */
    --wire-text3: #c1c1c1;        /* Heavy Fallout Ash */

    /* BORDERS */
    --wire-border: #e4f0f3;      /* Slag Weld Line */
    --wire-border2: #040404;      /* Biohazard Lime */

    /* INTERACTION STATES */
    --wire-hover: #ced5d7;        /* Friction Burn */
    --wire-active: #d8f4fb;       /* Corrosive Hazard Orange */
    --wire-focus: #e4f0f3;        /* Acid Fusion Core */

    /* BRAND ACCENTS */
    --wire-accent: #e4f0f3;        /* Biohazard Lime */
    --wire-accent-hover: #e4f0f3;  /* Acid Fusion Core */
    --wire-button-text: #0F1112;  /* Scorch Asphalt */

    /* SECONDARY ACCENT */
    --wire-accent2: #84b2be;     /* Corrosive Hazard Orange */

    /* STATUS COLORS */
    --wire-success: #00FF66;
    --wire-warning: #FFAA00;
    --wire-danger: #FF0033;
    --wire-info: #00DFFF;

    /* EFFECTS */
    --wire-shadow: rgba(0, 0, 0, 0.75);
    --wire-overlay: rgba(15, 17, 18, 0.94);
}





/* =====================================================
   SITE HEADER
===================================================== */
.site-header {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    pointer-events: auto;
}





/* =====================================================
   NAVBAR
===================================================== */
.navbar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 56px;
    margin: 0 auto;
    padding: 0 9px;
    background: var(--wire-bg);
    border-bottom: 1px solid var(--wire-accent);
    pointer-events: auto;
    overflow: visible;
}





/* =====================================================
   NAVBAR PROFILE AVATAR BUTTON
===================================================== */
.nav-pro-avatar-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: auto;
    margin-left: -6px;
    transform: translate(8px, 0px);
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-pro-avatar-frame:hover {
    background: var(--wire-hover);
    border-color: var(--wire-accent);
}





/* =====================================================
   NAV BUTTONS — BLOCK STYLE
===================================================== */
.navbar-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 42px;
    height: 36px;
    padding: 0 8px;
    color: var(--wire-text3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.8px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}
.nav-button:hover {
    color: var(--wire-text);
    background: var(--wire-hover);
    border-color: var(--wire-border2);
}
.nav-button.active {
    color: var(--wire-text);
    background: var(--wire-active);
    border-color: var(--wire-border2);
}
.nav-button:not(:last-child)::before {
    display: none;
}





/* =====================================================
   CENTER NAVIGATION
===================================================== */
.site-navigation {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transform: translateX(-50%);
}





/* =====================================================
   HISTORY NAVIGATION ICONS
===================================================== */
.nav-history-button {
    width: 42px;
    min-width: 42px;
    height: 36px;
    padding: 0;
}
.nav-history-button svg {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}





/* =====================================================
   HOME NAVIGATION — ALWAYS SHOW HOUSE ICON
===================================================== */
.nav-home-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 36px;
    padding: 0;
}
.nav-home-button .home-label {
    display: none;
}
.nav-home-button .home-icon {
    display: inline;
    font-size: 33px;
    line-height: 1;
}





/* =====================================================
   COURSE LIBRARY — BOOK ICON
===================================================== */
.nav-course-library-button {
    width: 42px;
    min-width: 42px;
    height: 36px;
    padding: 0;
}
.nav-course-library-button .course-library-label {
    display: none;
}
.nav-course-library-button .course-library-icon {
    display: inline;
    font-size: 28px;
    line-height: 1;
}





/* =====================================================
   NAV MENU BUTTON
===================================================== */
.nav-menu-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    color: var(--wire-text2);
    background: var(--wire-surface);
    border: 1px solid var(--wire-border2);
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-menu-button:hover {
    background: var(--wire-hover);
    border-color: var(--wire-accent);
}





/* =====================================================
   NAV MENU CONTAINER
===================================================== */
.nav-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}





/* =====================================================
   GLASS MENU PANELS — ALL THEMES
===================================================== */
.nav-menu-panel,
.settings-menu-button-panel {
    position: absolute;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    min-width: 210px;
    padding: 8px;
    color: var(--wire-text);
    /* BLURRED GLASS BACKGROUND */
    background: color-mix(in srgb, var(--wire-bg) 60%, transparent);
    backdrop-filter: blur(30px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    /* BEVELED GLASS EDGES */
    border: 1px solid var(--wire-border2);
    border-top-color: rgba(255, 255, 255, 0.38);
    border-left-color: rgba(255, 255, 255, 0.20);
    border-right-color: rgba(0, 0, 0, 0.35);
    border-bottom-color: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.10),
        inset -1px -1px 0 rgba(0, 0, 0, 0.22),
        0 12px 30px rgba(0, 0, 0, 0.38);
    z-index: 1000;
}
/* NAV MENU — LEFT SIDE */
.nav-menu-panel {
    left: 0;
    top: 40px;
}
/* SETTINGS MENU — RIGHT SIDE */
.settings-menu-button-panel {
    right: 0;
    left: auto;

}
/* SHOW OPEN MENUS */
.nav-menu-panel.open,
.settings-menu-button-panel.open {
    display: flex;
}





/* =====================================================
   MENU ITEMS
===================================================== */
.nav-menu-item,
.settings-menu-button-item {
    display: block;
    padding: 10px 12px;
    color: var(--wire-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 300;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-menu-item:hover,
.settings-menu-button-item:hover {
    color: var(--wire-text);
    background: var(--wire-hover);
    border-color: var(--wire-border2);
}





/* =====================================================
   MENU LOCK BUTTONS
===================================================== */
.nav-menu-lock,
.settings-menu-lock {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    color: var(--wire-text2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: inherit;
    font-weight: 300;
    text-align: left;
    cursor: pointer;
}
.nav-menu-lock:hover,
.nav-menu-lock.locked,
.settings-menu-lock:hover,
.settings-menu-lock.locked {
    color: var(--wire-text);
    background: var(--wire-hover);
    border-color: var(--wire-border2);
}





/* =====================================================
   SETTINGS MENU BUTTON
===================================================== */
.settings-menu-button-container {
    position: absolute;
    right: 9px;
    display: flex;
    align-items: center;
}
.settings-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-left: 2px;
    padding: 0;
    color: var(--wire-text);
    background: var(--wire-surface);
    border: 1px solid var(--wire-border2);
    border-radius: 5px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.settings-menu-button:hover {
    background: var(--wire-hover);
    border-color: var(--wire-accent);
}





/* =====================================================
   THEME SELECTION BUTTONS
===================================================== */
.settings-theme-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}
.settings-theme-options button {
    display: block;
    width: 100%;
    padding: 10px;
    color: var(--wire-text);
    background: rgba(20, 31, 52, 0.45);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--wire-border2);
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 300;
    text-align: left;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}
.settings-theme-options button:hover {
    color: var(--wire-accent);
    background: var(--wire-hover);
    border-color: var(--wire-accent);
}
.settings-theme-options button:active {
    background: var(--wire-active);
}
.settings-theme-options button:focus-visible {
    outline: 2px solid var(--wire-focus);
    outline-offset: 2px;
}





/* =====================================================
   THEME TOGGLE
===================================================== */
.theme-toggle-button {
    position: absolute;
    right: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    margin-left: 2px;
    padding: 0;
    color: var(--wire-accent);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}
.theme-toggle-button:hover {
    color: var(--wire-accent-hover);
    background: var(--wire-hover);
    box-shadow: 0 0 12px var(--wire-shadow);
}