Jump to content

MediaWiki:Vector-dark.css: Difference between revisions

No edit summary
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 62: Line 62:
     background-color: #001F3F; /* Navy */
     background-color: #001F3F; /* Navy */
     color: #FFFFFF; /* White text */
     color: #FFFFFF; /* White text */
    border: 1px solid #FF851B; /* Orange border */
}
}


Line 109: Line 108:
}
}
/* Apply navy & orange dark theme only to Special:Preferences */
/* Apply navy & orange dark theme only to Special:Preferences */
.profile-user-group {
.profile-user-group {
    background-color: #FF851B;
background-color: #FF851B;
}
}
.tooltip {
.tooltip {
    color: #000;
color: #000;
}
}
.tooltip svg {
.tooltip svg {
    color: #FFF;
color: #FFF !important;
}
filter: invert(1) brightness(1.5);
    /* Highlight Links */
}
     a {
.tooltip svg path {
        color: #ff851b;
fill: white !important;
        text-decoration: none;
}
     }
img[src*=".svg"] {
filter: brightness(0) invert(1);
}
.userprofilev2 svg {
filter: invert(1) brightness(1.5); /* Lightens black SVGs */
}
 
/* Highlight Links */
a {
    color: #ff851b;
     text-decoration: none;
}
 
a:hover {
    color: #ffb84d; /* Soft Peach on hover */
    text-decoration: underline;
}
 
/* Messages & Notices */
.mw-message-box {
    background-color: #002b5c;
    border-left: 4px solid #ff851b;
    color: #ffffff;
}
 
.mw-message-box-warning {
    background-color: #ff851b;
    color: #001933;
}
 
#MediaWiki Forum Formating
th.mw-wikiforum-title {
    font-size: 120%;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    border-top: 2px solid #ff6300;
    border-bottom: 2px solid #ff6300;
    background-color: #002B5C;
}
tr.mw-wikiforum-title {
background-color: #002B5C;
}
table.mw-wikiforum-frame {
clear: both;
    width: 100%;
    background: #002b5c;
    border: 1px solid #FF851B;
    margin-bottom: 1.2em;
}
th.mw-wikiforum-admin {
    border-top: 1px solid #ff6300;
    border-bottom: 1px solid #ff6300;
    text-align: right;
}
th.mw-wikiforum-value {
    width: 90px;
    border-top: 1px solid #ff6300;
    border-bottom: 1px solid #ff6300;
    text-align: center;
}
th.mw-wikiforum-lastpost {
    width: 180px;
    border-top: 1px solid #ff6300;
    border-bottom: 1px solid #ff6300;
    text-align: center;
}
td.mw-wikiforum-innerframe {
    border: 1px solid #ff6300;
}
 
 
.mw-message-box-error {
    background-color: #ff4500;
    color: #ffffff;
}
 
/* Active Tabs or Selected Items */
.mw-ui-tab-active {
    background-color: #ff851b;
    color: #001933;
    border-bottom: 2px solid #ff6300;
}
 
/* Checkbox & Radio Inputs */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #ff851b;
    border-color: #ff851b;
}
 
/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    background: #001933;
}
 
::-webkit-scrollbar-thumb {
    background-color: #ff851b;
    border-radius: 10px;
    border: 3px solid #001933;
}
 
::-webkit-scrollbar-thumb:hover {
    background-color: #ffb84d;
}
 
:root, .skin-vector, .skin-invert, .notheme {
    --color-deep-navy: #001A33;      /* Header Background */
    --color-navy: #001F3F;            /* Page Background */
    --color-dark-navy: #001933;      /* Footer, Panels */
    --color-lighter-navy: #002855;    /* Sidebar */
    --color-accent-navy: #002B5C;    /* TOC */
    --color-bright-orange: #FF851B;  /* Primary Accent */
    --color-deep-orange: #FF6300;    /* Headers */
    --color-soft-peach: #FFB84D;      /* Hover Effects */
    --color-burnt-orange: #FF4500;    /* Alerts */
    --color-soft-gray: #AAAAAA;      /* Subtle Text */
    --color-white: #FFFFFF;          /* Base Text */
    --color-error-red: #FF6347;      /* Error States */
    --color-visited-link: #B86BFF;    /* Visited Links */
    --color-dark-gray: #1E1E1E;      /* Code Block BG */
    --color-gold: #FFD700;            /* Code Numbers */
    --color-azure: #7FDBFF;          /* Code Strings */
    /* Base Colors */
    --color-base: #FFFFFF; /* White for primary text */
    --color-base-fixed: #FFFFFF;
    --color-base--hover: #FFB84D; /* Soft Peach for hover */
    --color-emphasized: #FFFFFF;
    --color-subtle: #FF851B; /* Bright Orange for subtle text */
    --color-placeholder: #FFB84D;
    --color-disabled: #72777d;
    --color-inverted: #FFFFFF;
    --color-inverted-fixed: #FFFFFF;
 
    /* Progressive Colors (Links, Highlights) */
    --color-progressive: #FF851B; /* Bright Orange */
    --color-progressive--hover: #FFB84D; /* Soft Peach */
    --color-progressive--active: #FF6300; /* Deep Orange */
    --color-progressive--focus: #FF851B;
 
    /* Destructive/Warning/Success */
    --color-destructive: #FF4500; /* Burnt Orange */
    --color-destructive--hover: #FF6347; /* Tomato */
    --color-destructive--active: #9F3526; /* Deep Burnt Orange */
    --color-destructive--focus: #FF851B;
    --color-visited: #B86BFF; /* Lavender for visited links */
    --color-destructive--visited: #FF6347;
    --color-error: #FF4500;
    --color-warning: #FFB84D;
    --color-success: #177860;
    --color-notice: #FFFFFF;
 
    /* Content Changes */
    --color-content-added: #006400;
    --color-content-removed: #8B0000;
 
    /* Shadows & Filters */
    --filter-invert-icon: 0;
    --filter-invert-primary-button-icon: 1;
    --box-shadow-color-base: #000;
    --box-shadow-color-progressive--active: #FF6300;
    --box-shadow-color-progressive--focus: #FF851B;
    --box-shadow-color-progressive-selected: #FF851B;
    --box-shadow-color-progressive-selected--hover: #FFB84D;
    --box-shadow-color-progressive-selected--active: #FF6300;
    --box-shadow-color-destructive--focus: #FF851B;
    --box-shadow-color-inverted: #FFFFFF;
    --box-shadow-color-transparent: transparent;
 
    /* Background Colors */
    --background-color-base: #001F3F; /* Navy */
    --background-color-base-fixed: #001F3F;
    --background-color-neutral: #002855;
    --background-color-neutral-subtle: #001933;
    --background-color-interactive: #002B5C;
    --background-color-interactive-subtle: #001933;
    --background-color-disabled: #54595d;
    --background-color-disabled-subtle: #3A3D42;
    --background-color-inverted: #101418;
 
    /* Background - Progressive */
    --background-color-progressive: #FF851B;
    --background-color-progressive--hover: #FFB84D;
    --background-color-progressive--active: #FF6300;
    --background-color-progressive--focus: #FF851B;
    --background-color-progressive-subtle: rgba(255, 133, 27, 0.1);
 
    /* Background - Destructive */
    --background-color-destructive: #FF4500;
    --background-color-destructive--hover: #FF6347;
    --background-color-destructive--active: #9F3526;
    --background-color-destructive--focus: #FF851B;
    --background-color-destructive-subtle: rgba(255, 69, 0, 0.1);
 
    /* Background - Error/Warning/Success */
    --background-color-error: #FF4500;
    --background-color-error--hover: #FF6347;
    --background-color-error--active: #9F3526;
    --background-color-error-subtle: rgba(255, 69, 0, 0.1);
    --background-color-warning-subtle: rgba(255, 184, 77, 0.2);
    --background-color-success-subtle: #dff2eb;
    --background-color-notice-subtle: #001933;
    --background-color-content-added: #a3d3ff;
    --background-color-content-removed: #ffe49c;
    --background-color-transparent: transparent;
    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
    --background-color-button-quiet--hover: rgba(255, 133, 27, 0.1);
    --background-color-button-quiet--active: rgba(255, 133, 27, 0.2);
    --background-color-input-binary--checked: #FF851B;
    --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
    --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
 
    /* Opacity */
    --opacity-icon-base: 0.87;
    --opacity-icon-base--hover: 0.74;
    --opacity-icon-base--selected: 1;
    --opacity-icon-base--disabled: 0.51;
    --opacity-icon-placeholder: 0.51;
    --opacity-icon-subtle: 0.67;
 
    /* Borders */
    --border-color-base: #FF851B;
    --border-color-subtle: #FFB84D;
    --border-color-muted: #FFB84D;
    --border-color-interactive: #FF851B;
    --border-color-disabled: #54595d;
    --border-color-inverted: #FFFFFF;
    --border-color-progressive: #FF851B;
    --border-color-progressive--hover: #FFB84D;
    --border-color-progressive--active: #FF6300;
    --border-color-progressive--focus: #FF851B;
    --border-color-destructive: #FF4500;
    --border-color-destructive--hover: #FF6347;
    --border-color-destructive--active: #9F3526;
    --border-color-destructive--focus: #FF851B;
    --border-color-error: #FF4500;
    --border-color-error--hover: #FF6347;
    --border-color-warning: #FFB84D;
    --border-color-success: #177860;
    --border-color-notice: #001933;
    --border-color-content-added: #a3d3ff;
    --border-color-content-removed: #ffe49c;
    --border-color-transparent: transparent;
    --border-color-divider: #FF851B;
 
    /* Outline */
    --outline-color-progressive--focus: #FF851B;
 
    /* Link Overrides */
    --color-link-red: var(--color-destructive);
    --color-link-red--hover: var(--color-destructive--hover);
    --color-link-red--active: var(--color-destructive--active);
    --color-link-red--focus: var(--color-destructive--focus);
    --color-link-red--visited: var(--color-destructive--visited);
 
    /* Input Borders */
    --border-color-input--hover: var(--border-color-interactive);
    --border-color-input-binary: var(--border-color-interactive);
    --border-color-input-binary--hover: var(--border-color-progressive--hover);
    --border-color-input-binary--active: var(--border-color-progressive--active);
    --border-color-input-binary--focus: var(--border-color-progressive--focus);
    --border-color-input-binary--checked: var(--border-color-progressive);
 
    /* Subtle Text */
    --color-base--subtle: #FF851B;
}
 
.bona-nova-regular {
    font-family: "Bona Nova", serif;
    font-weight: 400;
    font-style: normal;
}
 
.bona-nova-bold {
    font-family: "Bona Nova", serif;
    font-weight: 700;
    font-style: normal;
}
 
.bona-nova-regular-italic {
    font-family: "Bona Nova", serif;
    font-weight: 400;
    font-style: italic;
}
 
.metamorphous-regular {
    font-family: "Metamorphous", serif;
    font-weight: 600;
    font-style: normal;
}
/* ===== Global Styles ===== */
body {
    margin: 0;
    padding: 0;
    background-color: #001F3F; /* Navy */
    color: #FFFFFF; /* White text */
    font-family: 'Bona Nova', serif;
}
 
 
 
/* ===== Links ===== */
a {
    color: #FF851B; /* Orange */
    text-decoration: none;
}
 
a:hover {
    color: #FFB84D; /* Soft Peach */
    text-decoration: underline;
}
 
/* ===== User Links (Full Coverage) ===== */
#p-personal {
    background-color: #001933;
    border-radius: 4px;
    padding: 4px 8px;
}
 
#p-personal li {
    display: inline-block;
    margin-left: 8px;
}
 
#p-personal a {
    color: #FF851B; /* Orange */
    font-weight: bold;
}
 
#p-personal a:hover {
    color: #FFB84D; /* Soft Peach */
    text-decoration: underline;
}
 
 
pre, code {
background-color: var(--color-dark-gray);    /* Background for code blocks */
color: var(--color-medium-gray);            /* Default text color */
border: 1px solid var(--color-dark-teal);  /* Subtle border */
border-radius: 4px;                        /* Rounded corners */
padding: 6px;                              /* Internal spacing */
font-family: 'Courier New', 'Consolas', monospace; /* Monospace font */
font-size: 14px;
line-height: 1.5;
overflow-x: auto;                          /* Horizontal scroll if needed */
}
 
/* Logout Button Specific Styling */
#pt-logout a {
    color: #FF4500; /* Burnt Orange for emphasis */
}
 
/* ===== Main Structure ===== */
#mw-head {
    background-color: #001A33;
    color: #FFFFFF;
    border-bottom: 3px solid #FF851B;
}
 
#mw-panel {
    background-color: #002855;
    color: #FFFFFF;
}
 
#mw-panel a {
    color: #FF851B;
}
 
#mw-panel a:hover {
    color: #FFB84D;
    text-decoration: underline;
}
 
#content {
    background-color: #001933;
    border: 1px solid #FF851B;
    padding: 4px;
    color: #FFFFFF;
}
.mw-body {
    background-color: #001F3F; /* Navy */
    color: #FFFFFF; /* White text */
}
 
/* ===== Table of Contents (TOC) ===== */
#toc {
    background-color: #002B5C;
    border: 2px solid #FF851B;
    border-radius: 8px;
    padding: 10px;
    width: fit-content;
    color: #FFFFFF;
}
 
#toc h2 {
    font-family: 'Metamorphous', cursive;
    color: #FF6300;
    text-align: center;
    margin-bottom: 8px;
}
 
#toc ul {
    list-style-type: none;
     padding: 0;
}
 
#toc li {
    margin: 4px 0;
}
 
#toc a {
    color: #FF851B;
}
 
#toc a:hover {
    color: #FFB84D;
    text-decoration: underline;
}
 
#toc .toclevel-1 > a {
    font-weight: bold;
}
 
#toc .tocnumber {
    color: #FF4500;
}
 
#toc .current {
    background-color: #FF4500;
    color: #FFFFFF;
    padding: 2px 4px;
    border-radius: 4px;
}
/* === Logout Link (Burnt Orange) === */
#pt-logout a {
    color: #FF4500;
}
 
#pt-logout a:hover {
    color: #FF6347;
}
 
 
/* ===== mw-changeslist-legend (TOC-Style) ===== */
.mw-changeslist-legend {
    background-color: #002B5C;
    border: 2px solid #FF851B;
    border-radius: 8px;
    padding: 10px;
    width: fit-content;
    color: #FFFFFF;
    font-size: 90%;
}
 
.mw-changeslist-legend h2 {
    font-family: 'Metamorphous', cursive;
    color: #FF6300;
    text-align: center;
    margin-bottom: 8px;
}
.mw-changeslist-legend ul {
    list-style-type: none;
    padding: 0;
}
 
.mw-changeslist-legend li {
    margin: 4px 0;
}
.mw-changeslist-legend a {
    color: #FF851B;
}
 
.mw-changeslist-legend a:hover {
    color: #FFB84D;
    text-decoration: underline;
}
 
/* ===== System Messages ===== */
/* Warnings */
.mw-warning {
    background-color: #FF4500;
    color: #FFFFFF;
    border-left: 4px solid #FF851B;
    padding: 8px;
    border-radius: 4px;
}
 
/* Notices */
.mw-notice {
    background-color: #002B5C;
    color: #FFFFFF;
    border-left: 4px solid #FF851B;
    padding: 8px;
    border-radius: 4px;
}
/* ===== vector  Specific Tweaks ===== */
/* Sidebar collapsed state */
.vector-menu-tabs li a {
    color: #FF851B;
}
 
.vector-menu-tabs li a:hover {
    color: #FFB84D;
}
 
/* Sticky header in vector  */
.vector-sticky-header {
    background-color: #001A33;
    border-bottom: 2px solid #FF851B;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
 
.vector-sticky-header a {
    color: #FF851B;
}
 
.vector-sticky-header a:hover {
    color: #FFB84D;
}
 
/* Search bar */
#p-search input {
    background-color: #001933;
    color: #FFFFFF;
    border: 1px solid #FF851B;
    border-radius: 4px;
    padding: 4px;
}
 
#p-search input:focus {
    border-color: #FFB84D;
    outline: none;
}
 
/* ===== Buttons ===== */
.mw-ui-button {
    background-color: #FF851B;
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}
 
.mw-ui-button:hover {
    background-color: #FFB84D;
}
 
/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    background: #001F3F;
}
 
::-webkit-scrollbar-thumb {
    background-color: #FF851B;
    border-radius: 10px;
    border: 3px solid #001F3F;
}


    a:hover {
::-webkit-scrollbar-thumb:hover {
        color: #ffb84d; /* Soft Peach on hover */
    background-color: #FFB84D;
        text-decoration: underline;
}
    }


    /* Messages & Notices */
/* ===== Infobox Images ===== */
    .mw-message-box {
.infobox img {
        background-color: #002b5c;
    border: 1px solid #FF851B;
        border-left: 4px solid #ff851b;
    border-radius: 4px;
        color: #ffffff;
}
    }


    .mw-message-box-warning {
/* ===== SVG Images Handling ===== */
        background-color: #ff851b;
img[src$=".svg"] {
        color: #001933;
    filter: drop-shadow(0 0 5px rgba(255, 133, 27, 0.7)); /* Glow for SVGs */
    }
}


     .mw-message-box-error {
/* ===== WikiEditor Monospace Font for Editing Area ===== */
        background-color: #ff4500;
.wikiEditor-ui .editor textarea {
        color: #ffffff;
    background-color: #001933; /* Dark Navy */
     }
    color: #FFFFFF; /* White text */
    border: 1px solid #FF851B; /* Orange border */
    border-radius: 4px;
    padding: 8px;
}
textarea {
    background-color: #001933 !important; /* Dark Navy */
    background: #001933 !important;
    color: #FFFFFF!important; /* White text */
     border: 1px solid #FF851B !important; /* Orange border */
    border-radius: 4px;
    padding: 8px;
/* ===== UI Elements Still Use Custom Font ===== */
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group .tool a,
.wikiEditor-ui-dialog {
    font-family: 'Bona Nova', serif; /* Keep custom font for UI */
    background-color: #001A33;
    color: #FFFFFF;
     border: 1px solid #FF851B;
}


    /* Active Tabs or Selected Items */
/* ===== Brighter Code/Text Highlights ===== */
    .mw-ui-tab-active {
.wikiEditor-ui .editor textarea::selection {
        background-color: #ff851b;
    background-color: rgba(255, 133, 27, 0.5); /* Brighter orange highlight */
        color: #001933;
    color: #FFFFFF;
        border-bottom: 2px solid #ff6300;
}
    }


    /* Checkbox & Radio Inputs */
/* ===== Syntax Highlighting Tweak ===== */
    input[type="checkbox"]:checked,
.wikiEditor-ui .editor .syntax-highlight {
     input[type="radio"]:checked {
     background-color: #002B5C; /* Lighter navy for code blocks */
        background-color: #ff851b;
    color: #FFB84D; /* Soft Peach for text */
        border-color: #ff851b;
}
    }


    /* Scrollbar */
.wikiEditor-ui .editor .syntax-highlight.keyword {
    ::-webkit-scrollbar {
    color: #FF851B; /* Bright Orange for keywords */
        width: 12px;
}
    }


    ::-webkit-scrollbar-track {
.wikiEditor-ui .editor .syntax-highlight.string {
        background: #001933;
    color: #7FDBFF; /* Azure for strings */
    }
}


    ::-webkit-scrollbar-thumb {
.wikiEditor-ui .editor .syntax-highlight.comment {
        background-color: #ff851b;
    color: #AAAAAA; /* Soft gray for comments */
        border-radius: 10px;
    font-style: italic;
        border: 3px solid #001933;
}
    }


    ::-webkit-scrollbar-thumb:hover {
.wikiEditor-ui .editor .syntax-highlight.variable {
        background-color: #ffb84d;
    color: #FF4500; /* Burnt Orange for variables */
    }
}


:root, .skin-vector, .skin-invert, .notheme {
/* ===== Cursor Visibility Enhancement ===== */
    --color-deep-navy: #001A33;      /* Header Background */
.wikiEditor-ui .editor textarea {
    --color-navy: #001F3F;            /* Page Background */
     caret-color: #FF851B; /* Bright orange caret */
    --color-dark-navy: #001933;      /* Footer, Panels */
}
    --color-lighter-navy: #002855;    /* Sidebar */
    --color-accent-navy: #002B5C;     /* TOC */
    --color-bright-orange: #FF851B;   /* Primary Accent */
    --color-deep-orange: #FF6300;    /* Headers */
    --color-soft-peach: #FFB84D;      /* Hover Effects */
    --color-burnt-orange: #FF4500;    /* Alerts */
    --color-soft-gray: #AAAAAA;      /* Subtle Text */
    --color-white: #FFFFFF;          /* Base Text */
    --color-error-red: #FF6347;      /* Error States */
    --color-visited-link: #B86BFF;    /* Visited Links */
    --color-dark-gray: #1E1E1E;      /* Code Block BG */
    --color-gold: #FFD700;            /* Code Numbers */
    --color-azure: #7FDBFF;          /* Code Strings */
    /* Base Colors */
    --color-base: #FFFFFF; /* White for primary text */
    --color-base-fixed: #FFFFFF;
    --color-base--hover: #FFB84D; /* Soft Peach for hover */
    --color-emphasized: #FFFFFF;
    --color-subtle: #FF851B; /* Bright Orange for subtle text */
    --color-placeholder: #FFB84D;
    --color-disabled: #72777d;
    --color-inverted: #FFFFFF;
    --color-inverted-fixed: #FFFFFF;
    /* Progressive Colors (Links, Highlights) */
    --color-progressive: #FF851B; /* Bright Orange */
    --color-progressive--hover: #FFB84D; /* Soft Peach */
    --color-progressive--active: #FF6300; /* Deep Orange */
    --color-progressive--focus: #FF851B;
    /* Destructive/Warning/Success */
    --color-destructive: #FF4500; /* Burnt Orange */
    --color-destructive--hover: #FF6347; /* Tomato */
    --color-destructive--active: #9F3526; /* Deep Burnt Orange */
    --color-destructive--focus: #FF851B;
    --color-visited: #B86BFF; /* Lavender for visited links */
    --color-destructive--visited: #FF6347;
    --color-error: #FF4500;
    --color-warning: #FFB84D;
    --color-success: #177860;
    --color-notice: #FFFFFF;
    /* Content Changes */
    --color-content-added: #006400;
    --color-content-removed: #8B0000;
    /* Shadows & Filters */
    --filter-invert-icon: 0;
    --filter-invert-primary-button-icon: 1;
    --box-shadow-color-base: #000;
    --box-shadow-color-progressive--active: #FF6300;
    --box-shadow-color-progressive--focus: #FF851B;
    --box-shadow-color-progressive-selected: #FF851B;
    --box-shadow-color-progressive-selected--hover: #FFB84D;
    --box-shadow-color-progressive-selected--active: #FF6300;
    --box-shadow-color-destructive--focus: #FF851B;
    --box-shadow-color-inverted: #FFFFFF;
    --box-shadow-color-transparent: transparent;
    /* Background Colors */
    --background-color-base: #001F3F; /* Navy */
    --background-color-base-fixed: #001F3F;
    --background-color-neutral: #002855;
    --background-color-neutral-subtle: #001933;
    --background-color-interactive: #002B5C;
    --background-color-interactive-subtle: #001933;
    --background-color-disabled: #54595d;
    --background-color-disabled-subtle: #3A3D42;
    --background-color-inverted: #101418;
    /* Background - Progressive */
    --background-color-progressive: #FF851B;
    --background-color-progressive--hover: #FFB84D;
    --background-color-progressive--active: #FF6300;
    --background-color-progressive--focus: #FF851B;
    --background-color-progressive-subtle: rgba(255, 133, 27, 0.1);
    /* Background - Destructive */
    --background-color-destructive: #FF4500;
    --background-color-destructive--hover: #FF6347;
    --background-color-destructive--active: #9F3526;
    --background-color-destructive--focus: #FF851B;
    --background-color-destructive-subtle: rgba(255, 69, 0, 0.1);
    /* Background - Error/Warning/Success */
    --background-color-error: #FF4500;
    --background-color-error--hover: #FF6347;
    --background-color-error--active: #9F3526;
    --background-color-error-subtle: rgba(255, 69, 0, 0.1);
    --background-color-warning-subtle: rgba(255, 184, 77, 0.2);
    --background-color-success-subtle: #dff2eb;
    --background-color-notice-subtle: #001933;
    --background-color-content-added: #a3d3ff;
    --background-color-content-removed: #ffe49c;
    --background-color-transparent: transparent;
    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
    --background-color-button-quiet--hover: rgba(255, 133, 27, 0.1);
    --background-color-button-quiet--active: rgba(255, 133, 27, 0.2);
    --background-color-input-binary--checked: #FF851B;
    --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
    --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
    /* Opacity */
    --opacity-icon-base: 0.87;
    --opacity-icon-base--hover: 0.74;
    --opacity-icon-base--selected: 1;
    --opacity-icon-base--disabled: 0.51;
    --opacity-icon-placeholder: 0.51;
    --opacity-icon-subtle: 0.67;
    /* Borders */
    --border-color-base: #FF851B;
    --border-color-subtle: #FFB84D;
    --border-color-muted: #FFB84D;
    --border-color-interactive: #FF851B;
    --border-color-disabled: #54595d;
    --border-color-inverted: #FFFFFF;
    --border-color-progressive: #FF851B;
    --border-color-progressive--hover: #FFB84D;
    --border-color-progressive--active: #FF6300;
    --border-color-progressive--focus: #FF851B;
    --border-color-destructive: #FF4500;
    --border-color-destructive--hover: #FF6347;
    --border-color-destructive--active: #9F3526;
    --border-color-destructive--focus: #FF851B;
    --border-color-error: #FF4500;
    --border-color-error--hover: #FF6347;
    --border-color-warning: #FFB84D;
    --border-color-success: #177860;
    --border-color-notice: #001933;
    --border-color-content-added: #a3d3ff;
    --border-color-content-removed: #ffe49c;
    --border-color-transparent: transparent;
    --border-color-divider: #FF851B;
    /* Outline */
    --outline-color-progressive--focus: #FF851B;
    /* Link Overrides */
    --color-link-red: var(--color-destructive);
    --color-link-red--hover: var(--color-destructive--hover);
    --color-link-red--active: var(--color-destructive--active);
    --color-link-red--focus: var(--color-destructive--focus);
    --color-link-red--visited: var(--color-destructive--visited);
    /* Input Borders */
    --border-color-input--hover: var(--border-color-interactive);
    --border-color-input-binary: var(--border-color-interactive);
    --border-color-input-binary--hover: var(--border-color-progressive--hover);
    --border-color-input-binary--active: var(--border-color-progressive--active);
    --border-color-input-binary--focus: var(--border-color-progressive--focus);
    --border-color-input-binary--checked: var(--border-color-progressive);
    /* Subtle Text */
    --color-base--subtle: #FF851B;
}


    .bona-nova-regular {
/* ===== Selection Color in Toolbar Inputs ===== */
        font-family: "Bona Nova", serif;
.wikiEditor-ui-toolbar input::selection,
        font-weight: 400;
.wikiEditor-ui-toolbar textarea::selection {
        font-style: normal;
    background-color: rgba(255, 133, 27, 0.5);
    }
    color: #FFFFFF;
   
}
    .bona-nova-bold {
        font-family: "Bona Nova", serif;
        font-weight: 700;
        font-style: normal;
    }
   
    .bona-nova-regular-italic {
        font-family: "Bona Nova", serif;
        font-weight: 400;
        font-style: italic;
    }
   
    .metamorphous-regular {
        font-family: "Metamorphous", serif;
        font-weight: 600;
        font-style: normal;
    }
    /* ===== Global Styles ===== */
    body {
        margin: 0;
        padding: 0;
        background-color: #001F3F; /* Navy */
        color: #FFFFFF; /* White text */
        font-family: 'Bona Nova', serif;
    }
   


   
/* ===== Hover & Active Effects in Toolbar ===== */
    /* ===== Links ===== */
.wikiEditor-ui-toolbar .group .tool a:hover {
    a {
     background-color: #FF851B;
        color: #FF851B; /* Orange */
     color: #001933;
        text-decoration: none;
}
    }
   
    a:hover {
        color: #FFB84D; /* Soft Peach */
        text-decoration: underline;
    }
   
     /* ===== User Links (Full Coverage) ===== */
    #p-personal {
        background-color: #001933;
        border-radius: 4px;
        padding: 4px 8px;
    }
   
    #p-personal li {
        display: inline-block;
        margin-left: 8px;
    }
   
    #p-personal a {
        color: #FF851B; /* Orange */
        font-weight: bold;
    }
   
     #p-personal a:hover {
        color: #FFB84D; /* Soft Peach */
        text-decoration: underline;
    }
   


    pre, code {
.wikiEditor-ui-toolbar .group .tool a:active {
     background-color: var(--color-dark-gray);   /* Background for code blocks */
     background-color: #FF4500;
     color: var(--color-medium-gray);           /* Default text color */
    color: #FFFFFF;
     border: 1px solid var(--color-dark-teal);   /* Subtle border */
}
     border-radius: 4px;                         /* Rounded corners */
/* ===== Ace Editor Base Styling ===== */
    padding: 6px;                              /* Internal spacing */
.ace_editor {
     font-family: 'Courier New', 'Consolas', monospace; /* Monospace font */
    background-color: #001933; /* Dark Navy */
     color: #FFFFFF; /* White text */
     border: 1px solid #FF851B; /* Orange border */
     border-radius: 4px;
     font-family: 'Courier New', 'Consolas', monospace; /* Monospace for cursor alignment */
     font-size: 14px;
     font-size: 14px;
     line-height: 1.5;
     line-height: 1.5;
     overflow-x: auto;                           /* Horizontal scroll if needed */
     caret-color: #FF851B; /* Bright Orange caret */
}
}
   
 
    /* Logout Button Specific Styling */
/* ===== CodeEditor - General Editor Styling ===== */
     #pt-logout a {
.ace_editor {
        color: #FF4500; /* Burnt Orange for emphasis */
     background-color: #001933; /* Dark Navy Background */
     }
     color: #FFFFFF; /* Default Text Color */
   
     border: 1px solid #FF851B; /* Orange Border */
    /* ===== Main Structure ===== */
    border-radius: 4px;
     #mw-head {
    font-family: 'Courier New', 'Consolas', monospace;
        background-color: #001A33;
     font-size: 14px;
        color: #FFFFFF;
}
        border-bottom: 3px solid #FF851B;
 
     }
/* ===== Cursor & Active Line ===== */
   
.ace_cursor {
    #mw-panel {
    color: #FF851B; /* Bright Orange Cursor */
        background-color: #002855;
}
        color: #FFFFFF;
 
    }
.ace_marker-layer .ace_active-line {
   
     background-color: rgba(255, 133, 27, 0.15); /* Subtle Active Line Highlight */
    #mw-panel a {
}
        color: #FF851B;
 
     }
.ace_marker-layer .ace_selection {
   
    background-color: rgba(255, 133, 27, 0.5); /* Brighter Selection */
    #mw-panel a:hover {
}
        color: #FFB84D;
 
        text-decoration: underline;
/* ===== Gutter (Line Numbers) ===== */
    }
.ace_gutter {
   
    background-color: #002B5C; /* Lighter Navy */
    #content {
    color: #FFB84D; /* Soft Peach for Line Numbers */
        background-color: #001933;
    border-right: 1px solid #FF851B;
        border: 1px solid #FF851B;
}
        padding: 4px;
 
        color: #FFFFFF;
.ace_gutter-active-line {
    }
    background-color: rgba(255, 133, 27, 0.1); /* Highlight Active Line Number */
    .mw-body {
}
        background-color: #001F3F; /* Navy */
 
        color: #FFFFFF; /* White text */
/* ===== Syntax Highlighting ===== */
    }
.ace_keyword {
    color: #FF851B; /* Bright Orange for Keywords */
    /* ===== Table of Contents (TOC) ===== */
    font-weight: bold;
    #toc {
}
        background-color: #002B5C;
 
        border: 2px solid #FF851B;
.ace_string {
        border-radius: 8px;
    color: #7FDBFF; /* Azure for Strings */
        padding: 10px;
}
        width: fit-content;
 
        color: #FFFFFF;
.ace_comment {
    }
     color: #AAAAAA; /* Soft Gray for Comments */
   
     font-style: italic;
    #toc h2 {
}
        font-family: 'Metamorphous', cursive;
 
        color: #FF6300;
.ace_constant {
        text-align: center;
    color: #FF4500; /* Burnt Orange for Constants */
        margin-bottom: 8px;
}
    }
 
   
.ace_variable {
    #toc ul {
     color: #FFD700; /* Gold for Variables */
        list-style-type: none;
}
        padding: 0;
 
    }
.ace_function {
      
    color: #FFB84D; /* Soft Peach for Functions */
     #toc li {
}
        margin: 4px 0;
 
    }
/* ===== Brackets, Tags, & Punctuation ===== */
   
.ace_paren,
    #toc a {
.ace_bracket {
        color: #FF851B;
    color: #FF851B; /* Orange for Brackets */
    }
}
   
 
     #toc a:hover {
.ace_marker-layer .ace_bracket {
        color: #FFB84D;
    background-color: rgba(255, 133, 27, 0.25);
        text-decoration: underline;
}
    }
 
   
/* ===== Error & Warning Highlights ===== */
    #toc .toclevel-1 > a {
.ace_error {
        font-weight: bold;
     text-decoration: underline;
    }
     text-decoration-color: #FF4500; /* Burnt Orange for Errors */
   
}
    #toc .tocnumber {
 
        color: #FF4500;
.ace_warning {
    }
     text-decoration: underline;
   
     text-decoration-color: #FFD700; /* Gold for Warnings */
    #toc .current {
}
        background-color: #FF4500;
 
        color: #FFFFFF;
/* ===== Scrollbars (Match Dark Mode) ===== */
        padding: 2px 4px;
.ace_scrollbar {
        border-radius: 4px;
    width: 12px;
    }
}
    /* === Logout Link (Burnt Orange) === */
 
     #pt-logout a {
.ace_scrollbar-track {
        color: #FF4500;
    background: #001F3F;
     }
}
   
 
    #pt-logout a:hover {
.ace_scrollbar-thumb {
        color: #FF6347;
    background-color: #FF851B;
    }
    border-radius: 10px;
   
    border: 3px solid #001F3F;
      
}
     /* ===== mw-changeslist-legend (TOC-Style) ===== */
 
    .mw-changeslist-legend {
.ace_scrollbar-thumb:hover {
        background-color: #002B5C;
    background-color: #FFB84D;
        border: 2px solid #FF851B;
}
        border-radius: 8px;
 
        padding: 10px;
/* ===== Placeholder Text ===== */
        width: fit-content;
.ace_placeholder {
        color: #FFFFFF;
    color: #FFB84D;
        font-size: 90%;
    opacity: 0.7;
    }
}
   
 
    .mw-changeslist-legend h2 {
/* ===== Tooltips & Popups ===== */
        font-family: 'Metamorphous', cursive;
.ace_tooltip {
        color: #FF6300;
    background-color: #001933;
        text-align: center;
    border: 1px solid #FF851B;
        margin-bottom: 8px;
     color: #FFFFFF;
    }
     border-radius: 4px;
    .mw-changeslist-legend ul {
}
        list-style-type: none;
 
        padding: 0;
/* ===== Matching Parens/Brackets ===== */
     }
.ace_bracket-highlight {
      
    border-bottom: 2px solid #FF851B;
    .mw-changeslist-legend li {
    background-color: rgba(255, 133, 27, 0.15);
        margin: 4px 0;
}
    }
 
    .mw-changeslist-legend a {
/* ===== Fold Widgets (for code folding) ===== */
        color: #FF851B;
.ace_fold-widget {
    }
    color: #FF851B;
   
}
    .mw-changeslist-legend a:hover {
 
        color: #FFB84D;
.ace_fold-widget:hover {
        text-decoration: underline;
    color: #FFB84D;
    }
}
   
/* ===== CodeMirror Dark Mode ===== */
    /* ===== System Messages ===== */
.CodeMirror {
    /* Warnings */
    background-color: #1e1e1e;
    .mw-warning {
    color: #FFFFFF;
        background-color: #FF4500;
    border: 1px solid #FF851B;
        color: #FFFFFF;
    border-radius: 4px;
        border-left: 4px solid #FF851B;
}
        padding: 8px;
 
        border-radius: 4px;
/* Syntax Highlighting */
    }
.cm-keyword { color: #FF851B; font-weight: bold; } /* Orange for keywords */
   
.cm-string { color: #7FDBFF; }                     /* Azure for strings */
    /* Notices */
.cm-comment { color: #AAAAAA; font-style: italic; } /* Soft Gray for comments */
    .mw-notice {
.cm-number { color: #FFD700; }                      /* Gold for numbers */
        background-color: #002B5C;
.cm-variable { color: #FFB84D; }                   /* Soft Peach for variables */
        color: #FFFFFF;
.cm-def { color: #FF4500; }                         /* Burnt Orange for function names */
        border-left: 4px solid #FF851B;
 
        padding: 8px;
/* Cursor & Selection */
        border-radius: 4px;
.CodeMirror-cursor { border-left: 1px solid #FF851B; }
    }
.CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3); }
    /* ===== vector  Specific Tweaks ===== */
 
    /* Sidebar collapsed state */
/* Line Numbers */
    .vector-menu-tabs li a {
.CodeMirror-gutters {
        color: #FF851B;
    background-color: #002B5C;
    }
    color: #FFB84D;
   
    border-right: 1px solid #FF851B;
    .vector-menu-tabs li a:hover {
}
        color: #FFB84D;
/* ===== vector Skin Override for Ace Editor ===== */
    }
.vector-body .ace_editor {
   
    background-color: #001933 !important; /* Dark Navy */
    /* Sticky header in vector  */
    color: #FFFFFF !important;
    .vector-sticky-header {
    border: 1px solid #FF851B;
        background-color: #001A33;
    border-radius: 4px;
        border-bottom: 2px solid #FF851B;
}
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 
    }
.vector-body .ace_keyword { color: #FF851B !important; font-weight: bold; } /* Orange */
   
.vector-body .ace_string { color: #7FDBFF !important; }                   /* Azure */
    .vector-sticky-header a {
.vector-body .ace_comment { color: #AAAAAA !important; font-style: italic; } /* Soft Gray */
        color: #FF851B;
.vector-body .ace_constant { color: #FF4500 !important; }                  /* Burnt Orange */
    }
.vector-body .ace_variable { color: #FFD700 !important; }                 /* Gold */
   
.vector-body .ace_cursor { color: #FF851B !important; }                   /* Bright Orange */
    .vector-sticky-header a:hover {
.vector-body .ace_marker-layer .ace_active-line { background-color: rgba(255, 133, 27, 0.15) !important; }
        color: #FFB84D;
.vector-body .ace_marker-layer .ace_selection { background-color: rgba(255, 133, 27, 0.5) !important; }
    }
 
   
/* ===== vector Skin Override for CodeMirror ===== */
    /* Search bar */
.vector-body .CodeMirror {
    #p-search input {
    background-color: #1e1e1e !important;
        background-color: #001933;
    color: #FFFFFF !important;
        color: #FFFFFF;
    border: 1px solid #FF851B;
        border: 1px solid #FF851B;
    border-radius: 4px;
        border-radius: 4px;
}
        padding: 4px;
 
    }
.vector-body .cm-keyword { color: #FF851B !important; font-weight: bold; }
   
.vector-body .cm-string { color: #7FDBFF !important; }
    #p-search input:focus {
.vector-body .cm-comment { color: #AAAAAA !important; font-style: italic; }
        border-color: #FFB84D;
.vector-body .cm-number { color: #FFD700 !important; }
        outline: none;
.vector-body .cm-variable { color: #FFB84D !important; }
    }
.vector-body .cm-def { color: #FF4500 !important; }
   
.vector-body .CodeMirror-cursor { border-left: 1px solid #FF851B !important; }
    /* ===== Buttons ===== */
.vector-body .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3) !important; }
    .mw-ui-button {
.vector-body .CodeMirror-gutters {
        background-color: #FF851B;
     background-color: #002B5C !important;
        color: #FFFFFF;
     color: #FFB84D !important;
        border: none;
     border-right: 1px solid #FF851B;
        padding: 8px 16px;
}
        border-radius: 4px;
/* 🌟 Top Navbar Styles */
        cursor: pointer;
    }
   
    .mw-ui-button:hover {
        background-color: #FFB84D;
    }
   
    /* ===== Scrollbar ===== */
    ::-webkit-scrollbar {
        width: 12px;
    }
   
    ::-webkit-scrollbar-track {
        background: #001F3F;
    }
   
    ::-webkit-scrollbar-thumb {
        background-color: #FF851B;
        border-radius: 10px;
        border: 3px solid #001F3F;
    }
   
    ::-webkit-scrollbar-thumb:hover {
        background-color: #FFB84D;
    }
   
    /* ===== Infobox Images ===== */
    .infobox img {
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    /* ===== SVG Images Handling ===== */
    img[src$=".svg"] {
        filter: drop-shadow(0 0 5px rgba(255, 133, 27, 0.7)); /* Glow for SVGs */
    }
   
    /* ===== WikiEditor Monospace Font for Editing Area ===== */
    .wikiEditor-ui .editor textarea {
        background-color: #001933; /* Dark Navy */
        color: #FFFFFF; /* White text */
        border: 1px solid #FF851B; /* Orange border */
        border-radius: 4px;
        padding: 8px;
    }
   
    /* ===== UI Elements Still Use Custom Font ===== */
    .wikiEditor-ui-toolbar,
    .wikiEditor-ui-toolbar .group .tool a,
    .wikiEditor-ui-dialog {
        font-family: 'Bona Nova', serif; /* Keep custom font for UI */
        background-color: #001A33;
        color: #FFFFFF;
        border: 1px solid #FF851B;
    }
   
    /* ===== Brighter Code/Text Highlights ===== */
    .wikiEditor-ui .editor textarea::selection {
        background-color: rgba(255, 133, 27, 0.5); /* Brighter orange highlight */
        color: #FFFFFF;
    }
   
    /* ===== Syntax Highlighting Tweak ===== */
    .wikiEditor-ui .editor .syntax-highlight {
        background-color: #002B5C; /* Lighter navy for code blocks */
        color: #FFB84D; /* Soft Peach for text */
    }
   
    .wikiEditor-ui .editor .syntax-highlight.keyword {
        color: #FF851B; /* Bright Orange for keywords */
    }
   
    .wikiEditor-ui .editor .syntax-highlight.string {
        color: #7FDBFF; /* Azure for strings */
    }
   
    .wikiEditor-ui .editor .syntax-highlight.comment {
        color: #AAAAAA; /* Soft gray for comments */
        font-style: italic;
    }
   
    .wikiEditor-ui .editor .syntax-highlight.variable {
        color: #FF4500; /* Burnt Orange for variables */
    }
   
    /* ===== Cursor Visibility Enhancement ===== */
    .wikiEditor-ui .editor textarea {
        caret-color: #FF851B; /* Bright orange caret */
    }
   
    /* ===== Selection Color in Toolbar Inputs ===== */
    .wikiEditor-ui-toolbar input::selection,
    .wikiEditor-ui-toolbar textarea::selection {
        background-color: rgba(255, 133, 27, 0.5);
        color: #FFFFFF;
    }
   
    /* ===== Hover & Active Effects in Toolbar ===== */
    .wikiEditor-ui-toolbar .group .tool a:hover {
        background-color: #FF851B;
        color: #001933;
    }
   
    .wikiEditor-ui-toolbar .group .tool a:active {
        background-color: #FF4500;
        color: #FFFFFF;
    }
    /* ===== Ace Editor Base Styling ===== */
    .ace_editor {
        background-color: #001933; /* Dark Navy */
        color: #FFFFFF; /* White text */
        border: 1px solid #FF851B; /* Orange border */
        border-radius: 4px;
        font-family: 'Courier New', 'Consolas', monospace; /* Monospace for cursor alignment */
        font-size: 14px;
        line-height: 1.5;
        caret-color: #FF851B; /* Bright Orange caret */
    }
   
    /* ===== CodeEditor - General Editor Styling ===== */
    .ace_editor {
        background-color: #001933; /* Dark Navy Background */
        color: #FFFFFF; /* Default Text Color */
        border: 1px solid #FF851B; /* Orange Border */
        border-radius: 4px;
        font-family: 'Courier New', 'Consolas', monospace;
        font-size: 14px;
    }
   
    /* ===== Cursor & Active Line ===== */
    .ace_cursor {
        color: #FF851B; /* Bright Orange Cursor */
    }
   
    .ace_marker-layer .ace_active-line {
        background-color: rgba(255, 133, 27, 0.15); /* Subtle Active Line Highlight */
    }
   
    .ace_marker-layer .ace_selection {
        background-color: rgba(255, 133, 27, 0.5); /* Brighter Selection */
    }
   
    /* ===== Gutter (Line Numbers) ===== */
    .ace_gutter {
        background-color: #002B5C; /* Lighter Navy */
        color: #FFB84D; /* Soft Peach for Line Numbers */
        border-right: 1px solid #FF851B;
    }
   
    .ace_gutter-active-line {
        background-color: rgba(255, 133, 27, 0.1); /* Highlight Active Line Number */
    }
   
    /* ===== Syntax Highlighting ===== */
    .ace_keyword {
        color: #FF851B; /* Bright Orange for Keywords */
        font-weight: bold;
    }
   
    .ace_string {
        color: #7FDBFF; /* Azure for Strings */
    }
   
    .ace_comment {
        color: #AAAAAA; /* Soft Gray for Comments */
        font-style: italic;
    }
   
    .ace_constant {
        color: #FF4500; /* Burnt Orange for Constants */
    }
   
    .ace_variable {
        color: #FFD700; /* Gold for Variables */
    }
   
    .ace_function {
        color: #FFB84D; /* Soft Peach for Functions */
    }
   
    /* ===== Brackets, Tags, & Punctuation ===== */
    .ace_paren,
    .ace_bracket {
        color: #FF851B; /* Orange for Brackets */
    }
   
    .ace_marker-layer .ace_bracket {
        background-color: rgba(255, 133, 27, 0.25);
    }
   
    /* ===== Error & Warning Highlights ===== */
    .ace_error {
        text-decoration: underline;
        text-decoration-color: #FF4500; /* Burnt Orange for Errors */
    }
   
    .ace_warning {
        text-decoration: underline;
        text-decoration-color: #FFD700; /* Gold for Warnings */
    }
   
    /* ===== Scrollbars (Match Dark Mode) ===== */
    .ace_scrollbar {
        width: 12px;
    }
   
    .ace_scrollbar-track {
        background: #001F3F;
    }
   
    .ace_scrollbar-thumb {
        background-color: #FF851B;
        border-radius: 10px;
        border: 3px solid #001F3F;
    }
   
    .ace_scrollbar-thumb:hover {
        background-color: #FFB84D;
    }
   
    /* ===== Placeholder Text ===== */
    .ace_placeholder {
        color: #FFB84D;
        opacity: 0.7;
    }
   
    /* ===== Tooltips & Popups ===== */
    .ace_tooltip {
        background-color: #001933;
        border: 1px solid #FF851B;
        color: #FFFFFF;
        border-radius: 4px;
    }
   
    /* ===== Matching Parens/Brackets ===== */
    .ace_bracket-highlight {
        border-bottom: 2px solid #FF851B;
        background-color: rgba(255, 133, 27, 0.15);
    }
   
    /* ===== Fold Widgets (for code folding) ===== */
    .ace_fold-widget {
        color: #FF851B;
    }
   
    .ace_fold-widget:hover {
        color: #FFB84D;
    }
    /* ===== CodeMirror Dark Mode ===== */
    .CodeMirror {
        background-color: #1e1e1e;
        color: #FFFFFF;
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    /* Syntax Highlighting */
    .cm-keyword { color: #FF851B; font-weight: bold; }  /* Orange for keywords */
    .cm-string { color: #7FDBFF; }                      /* Azure for strings */
    .cm-comment { color: #AAAAAA; font-style: italic; } /* Soft Gray for comments */
    .cm-number { color: #FFD700; }                      /* Gold for numbers */
    .cm-variable { color: #FFB84D; }                    /* Soft Peach for variables */
    .cm-def { color: #FF4500; }                        /* Burnt Orange for function names */
   
    /* Cursor & Selection */
    .CodeMirror-cursor { border-left: 1px solid #FF851B; }
    .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3); }
   
    /* Line Numbers */
    .CodeMirror-gutters {
        background-color: #002B5C;
        color: #FFB84D;
        border-right: 1px solid #FF851B;
    }
    /* ===== vector Skin Override for Ace Editor ===== */
    .vector-body .ace_editor {
        background-color: #001933 !important; /* Dark Navy */
        color: #FFFFFF !important;
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    .vector-body .ace_keyword { color: #FF851B !important; font-weight: bold; } /* Orange */
    .vector-body .ace_string { color: #7FDBFF !important; }                    /* Azure */
    .vector-body .ace_comment { color: #AAAAAA !important; font-style: italic; } /* Soft Gray */
    .vector-body .ace_constant { color: #FF4500 !important; }                  /* Burnt Orange */
    .vector-body .ace_variable { color: #FFD700 !important; }                  /* Gold */
    .vector-body .ace_cursor { color: #FF851B !important; }                    /* Bright Orange */
    .vector-body .ace_marker-layer .ace_active-line { background-color: rgba(255, 133, 27, 0.15) !important; }
    .vector-body .ace_marker-layer .ace_selection { background-color: rgba(255, 133, 27, 0.5) !important; }
   
    /* ===== vector Skin Override for CodeMirror ===== */
    .vector-body .CodeMirror {
        background-color: #1e1e1e !important;
        color: #FFFFFF !important;
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    .vector-body .cm-keyword { color: #FF851B !important; font-weight: bold; }
    .vector-body .cm-string { color: #7FDBFF !important; }
    .vector-body .cm-comment { color: #AAAAAA !important; font-style: italic; }
    .vector-body .cm-number { color: #FFD700 !important; }
    .vector-body .cm-variable { color: #FFB84D !important; }
     .vector-body .cm-def { color: #FF4500 !important; }
    .vector-body .CodeMirror-cursor { border-left: 1px solid #FF851B !important; }
     .vector-body .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3) !important; }
     .vector-body .CodeMirror-gutters {
        background-color: #002B5C !important;
        color: #FFB84D !important;
        border-right: 1px solid #FF851B;
    }
    /* 🌟 Top Navbar Styles */
#top-navbar {
#top-navbar {
     background-color: #002B5C;
     background-color: #002B5C;
Line 1,096: Line 1,155:
     background-color: var(--color-shale);
     background-color: var(--color-shale);
}
}
 
/* Author Account Request */
.mw-confirmaccount-type-0 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
}
.mw-confirmaccount-body-0 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
    border: 1px solid #FF851B;
}
.mw-confirmaccount-type-1 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
}
.mw-confirmaccount-body-1 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
    border: 1px solid #FF851B;
}
.mw-confirmaccount-type-2 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
}
.mw-confirmaccount-body-2 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
    border: 1px solid #FF851B;
}
.mw-confirmaccount-type-3 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
}
.mw-confirmaccount-body-3 {
    flex: 1 1 auto;
    padding: 20px;
    background-color: var(--color-shale);
    border: 1px solid #FF851B;
}
/* Footer */
/* Footer */
.mw-footer {
.mw-footer {