MediaWiki:Common.css: Difference between revisions

Revision as of 21:05, 23 February 2026

/* ============================================================
   COUNTER-STRIKE 2 WIKI — LIGHT THEME
   Clean editorial design with CS2 orange accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --cs-bg: #f7f5f0;
    --cs-bg-content: #ffffff;
    --cs-bg-card: #ffffff;
    --cs-bg-card-hover: #faf9f6;
    --cs-bg-subtle: #f0ede6;
    --cs-bg-header: #1b1f24;
    --cs-accent: #de8e1d;
    --cs-accent-hover: #c47a12;
    --cs-accent-soft: rgba(222, 142, 29, 0.08);
    --cs-accent-border: rgba(222, 142, 29, 0.25);
    --cs-blue: #2563eb;
    --cs-blue-hover: #1d4ed8;
    --cs-blue-soft: rgba(37, 99, 235, 0.06);
    --cs-text: #1a1d21;
    --cs-text-secondary: #555d68;
    --cs-text-muted: #8b929c;
    --cs-text-inverse: #f0ede6;
    --cs-border: #e2dfd8;
    --cs-border-subtle: #eae7e0;
    --cs-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --cs-shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    --cs-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    --cs-radius: 6px;
    --cs-radius-lg: 10px;
    --cs-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cs-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cs-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
html, body {
    background-color: var(--cs-bg) !important;
    color: var(--cs-text) !important;
}

body {
    background-image: none !important;
    background-attachment: unset !important;
}

/* ============================================================
   VECTOR 2022 LAYOUT
   ============================================================ */
.mw-page-container,
.mw-page-container-inner {
    background-color: transparent !important;
}

.mw-body,
.vector-body,
#bodyContent,
#content,
.mw-body-content {
    background-color: var(--cs-bg-content) !important;
    color: var(--cs-text) !important;
    border-color: var(--cs-border) !important;
}

.mw-body {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-lg) !important;
    padding: 2em 2.5em !important;
    box-shadow: var(--cs-shadow-md) !important;
    margin-top: 0.5em !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.vector-header-container,
.vector-header,
.mw-header,
header.vector-header {
    background-color: var(--cs-bg-header) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important;
}

.vector-header-container .mw-header {
    background-color: transparent !important;
}

.mw-logo-wordmark,
.vector-menu-heading,
.mw-wiki-title {
    color: #ffffff !important;
    font-family: var(--cs-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

.mw-logo-icon[src*="change-your-logo"],
img[src*="change-your-logo"],
.mw-logo a[href] img[src*="change-your-logo"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.vector-sticky-header {
    background-color: var(--cs-bg-header) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important;
}

.vector-sticky-header a {
    color: var(--cs-text-inverse) !important;
}

.vector-sticky-header a:hover {
    color: var(--cs-accent) !important;
}

.vector-sticky-header-context-bar__title {
    color: #ffffff !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#mw-panel,
.vector-main-menu,
.vector-main-menu-container,
nav.vector-main-menu-landmark,
.vector-column-start,
.vector-sidebar {
    background-color: var(--cs-bg) !important;
}

.vector-main-menu .vector-menu-heading,
.vector-sidebar .vector-menu-heading,
.vector-main-menu-group .vector-menu-heading,
.sidebar-toc .sidebar-toc-header {
    color: var(--cs-text) !important;
    font-family: var(--cs-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.72em !important;
}

.vector-main-menu .vector-menu-content-list a,
.vector-sidebar a,
nav.vector-main-menu-landmark a,
.mw-panel a {
    color: var(--cs-text-secondary) !important;
    transition: color var(--cs-transition) !important;
    font-family: var(--cs-font-body) !important;
}

.vector-main-menu .vector-menu-content-list a:hover,
.vector-sidebar a:hover,
nav.vector-main-menu-landmark a:hover,
.mw-panel a:hover {
    color: var(--cs-accent-hover) !important;
    text-decoration: none !important;
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.vector-toc,
.sidebar-toc,
.vector-toc-landmark,
#vector-toc-pinned-container,
.vector-column-start .sidebar-toc {
    background-color: var(--cs-bg) !important;
    border-color: var(--cs-border) !important;
}

.sidebar-toc .sidebar-toc-header,
.vector-toc .vector-toc-heading {
    color: var(--cs-text) !important;
    font-family: var(--cs-font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.72em !important;
    font-weight: 700 !important;
}

.sidebar-toc .sidebar-toc-list-item a,
.vector-toc .vector-toc-list-item a {
    color: var(--cs-text-secondary) !important;
    border-left-color: var(--cs-border) !important;
    transition: color var(--cs-transition), border-left-color var(--cs-transition) !important;
    font-family: var(--cs-font-body) !important;
}

.sidebar-toc .sidebar-toc-list-item a:hover,
.vector-toc .vector-toc-list-item a:hover {
    color: var(--cs-accent-hover) !important;
    border-left-color: var(--cs-accent) !important;
}

.sidebar-toc .sidebar-toc-list-item-active > a,
.vector-toc .sidebar-toc-list-item-active > a {
    color: var(--cs-accent) !important;
    border-left-color: var(--cs-accent) !important;
    font-weight: 600 !important;
}

#toc, .toc,
.mw-parser-output .toc {
    background-color: var(--cs-bg-subtle) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
    padding: 1em 1.5em !important;
    color: var(--cs-text) !important;
}

#toc .toctitle, .toc .toctitle {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-text) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.8em !important;
}

#toc a, .toc a { color: var(--cs-blue) !important; }
#toc a:hover, .toc a:hover { color: var(--cs-accent) !important; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.mw-body,
.mw-body-content,
.vector-body {
    font-family: var(--cs-font-body) !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    color: var(--cs-text) !important;
}

h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2, .mw-body h3,
.mw-body h4, .mw-body h5, .mw-body h6,
.mw-heading h1, .mw-heading h2, .mw-heading h3,
.mw-heading h4, .mw-heading h5, .mw-heading h6,
.mw-body-content h1, .mw-body-content h2, .mw-body-content h3 {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-text) !important;
    border-bottom-color: var(--cs-border) !important;
}

/* H1 */
h1, .mw-body h1, .mw-first-heading,
.mw-body .mw-first-heading {
    font-size: 2.1em !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    border-bottom: 3px solid var(--cs-accent) !important;
    padding-bottom: 0.35em !important;
    margin-bottom: 0.7em !important;
    color: var(--cs-text) !important;
}

/* H2 */
h2, .mw-body h2,
.mw-heading2, .mw-body .mw-heading2 h2 {
    font-size: 1.45em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1px solid var(--cs-border) !important;
    padding-bottom: 0.3em !important;
    margin-top: 1.8em !important;
    color: var(--cs-text) !important;
}

h3, .mw-body h3 {
    font-size: 1.15em !important;
    font-weight: 700 !important;
    color: var(--cs-text) !important;
    margin-top: 1.4em !important;
}

h4, .mw-body h4 {
    font-size: 1em !important;
    font-weight: 600 !important;
    color: var(--cs-text-secondary) !important;
}

/* ============================================================
   LINKS
   ============================================================ */
a, .mw-body a,
.mw-body-content a, .vector-body a {
    color: var(--cs-blue) !important;
    text-decoration: none !important;
    transition: color var(--cs-transition) !important;
}

a:visited, .mw-body a:visited,
.vector-body a:visited {
    color: var(--cs-blue) !important;
}

a:hover, a:focus,
.mw-body a:hover, .mw-body-content a:hover,
.vector-body a:hover {
    color: var(--cs-accent-hover) !important;
    text-decoration: underline !important;
}

a.new, .mw-body a.new { color: #c44040 !important; }
a.new:hover { color: #dc5050 !important; }

.mw-body-content a.external { color: var(--cs-blue) !important; }
.mw-body-content a.external:hover { color: var(--cs-accent-hover) !important; }

/* ============================================================
   TABLES
   ============================================================ */
.wikitable, table.wikitable,
.mw-parser-output table.wikitable {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    border-collapse: collapse !important;
    color: var(--cs-text) !important;
    border-radius: var(--cs-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--cs-shadow-sm) !important;
}

.wikitable th, table.wikitable th {
    background-color: var(--cs-bg-header) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.08) !important;
    font-family: var(--cs-font-display) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.88em !important;
}

.wikitable td, table.wikitable td {
    background-color: var(--cs-bg-card) !important;
    border-color: var(--cs-border-subtle) !important;
    color: var(--cs-text) !important;
    padding: 9px 14px !important;
    font-size: 0.93em !important;
}

.wikitable tr:nth-child(even) td {
    background-color: var(--cs-bg-subtle) !important;
}

.wikitable tr:hover td {
    background-color: var(--cs-accent-soft) !important;
}

/* Sortable table headers */
.wikitable.sortable th {
    cursor: pointer !important;
}

/* ============================================================
   INFOBOXES
   ============================================================ */
.infobox, .wikitable.infobox,
table.infobox, .sidebar,
.mw-parser-output .infobox {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-lg) !important;
    color: var(--cs-text) !important;
    box-shadow: var(--cs-shadow-md) !important;
    overflow: hidden !important;
}

.infobox th, table.infobox th {
    background-color: var(--cs-bg-header) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.1) !important;
    font-family: var(--cs-font-display) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
}

.infobox td, table.infobox td {
    border-color: var(--cs-border-subtle) !important;
    color: var(--cs-text) !important;
    padding: 8px 14px !important;
}

/* Infobox header with accent bg */
.infobox th[colspan="2"],
table.infobox th[colspan="2"] {
    background: linear-gradient(135deg, var(--cs-bg-header), #2a2f36) !important;
    font-size: 1.15em !important;
    padding: 12px 16px !important;
}

/* Label cells in infobox */
.infobox th:not([colspan]),
table.infobox th:not([colspan]) {
    background-color: var(--cs-bg-subtle) !important;
    color: var(--cs-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ============================================================
   CATEGORIES
   ============================================================ */
.catlinks, #catlinks, .mw-normal-catlinks {
    background-color: var(--cs-bg-subtle) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
    color: var(--cs-text-secondary) !important;
    padding: 0.65em 1em !important;
    margin-top: 2em !important;
    font-size: 0.88em !important;
}

.catlinks a { color: var(--cs-blue) !important; }
.catlinks a:hover { color: var(--cs-accent-hover) !important; }

/* ============================================================
   SEARCH
   ============================================================ */
.mw-search-input, #searchInput,
.cdx-text-input__input, .vector-search-box-input,
.cdx-text-input input, input.cdx-text-input__input,
.vector-search-box .cdx-text-input__input {
    background-color: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px !important;
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition), background-color var(--cs-transition) !important;
}

.mw-search-input:focus, #searchInput:focus,
.cdx-text-input__input:focus, .vector-search-box-input:focus,
input.cdx-text-input__input:focus {
    background-color: rgba(255,255,255,0.18) !important;
    border-color: var(--cs-accent) !important;
    box-shadow: 0 0 0 3px rgba(222, 142, 29, 0.2) !important;
    outline: none !important;
}

.cdx-text-input__input::placeholder,
.vector-search-box-input::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.cdx-menu, .cdx-typeahead-search__menu,
.suggestions, .suggestions-results, .cdx-menu__listbox {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    color: var(--cs-text) !important;
    box-shadow: var(--cs-shadow-lg) !important;
    border-radius: var(--cs-radius) !important;
}

.cdx-menu-item, .cdx-menu-item--enabled,
.suggestions-result {
    color: var(--cs-text) !important;
}

.cdx-menu-item:hover, .cdx-menu-item--highlighted,
.suggestions-result-current {
    background-color: var(--cs-accent-soft) !important;
    color: var(--cs-accent-hover) !important;
}

.cdx-search-result-title__match,
.cdx-menu-item__text__description {
    color: var(--cs-text-secondary) !important;
}

.cdx-button, .searchButton, button.cdx-button {
    background-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    transition: background-color var(--cs-transition) !important;
}

.cdx-button:hover, .searchButton:hover, button.cdx-button:hover {
    background-color: rgba(255,255,255,0.15) !important;
}

/* ============================================================
   TABS (Read, Edit, History)
   ============================================================ */
.vector-menu-tabs, .vector-menu-tabs .mw-list-item,
#p-views, .vector-page-tools {
    background-color: transparent !important;
}

.vector-menu-tabs a, .vector-menu-tabs .mw-list-item a,
#p-views a, .vector-page-tools a {
    color: var(--cs-text-secondary) !important;
    transition: color var(--cs-transition) !important;
    font-family: var(--cs-font-body) !important;
}

.vector-menu-tabs a:hover, #p-views a:hover {
    color: var(--cs-accent) !important;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .mw-list-item.selected a,
#p-views li.selected a {
    color: var(--cs-accent) !important;
    border-bottom-color: var(--cs-accent) !important;
    font-weight: 600 !important;
}

/* ============================================================
   USER MENU
   ============================================================ */
.vector-user-menu, #p-personal, .vector-menu-content {
    background-color: var(--cs-bg-card) !important;
    border-color: var(--cs-border) !important;
    color: var(--cs-text) !important;
}

.vector-user-menu a, #p-personal a { color: var(--cs-text-secondary) !important; }
.vector-user-menu a:hover, #p-personal a:hover { color: var(--cs-accent) !important; }

.vector-menu-content, .vector-dropdown-content {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    box-shadow: var(--cs-shadow-lg) !important;
    border-radius: var(--cs-radius) !important;
}

.vector-menu-content li a, .vector-dropdown-content li a {
    color: var(--cs-text-secondary) !important;
}

.vector-menu-content li a:hover, .vector-dropdown-content li a:hover {
    color: var(--cs-accent) !important;
    background-color: var(--cs-accent-soft) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer, footer, .mw-footer, .vector-footer-container {
    background-color: var(--cs-bg) !important;
    border-top: 1px solid var(--cs-border) !important;
    color: var(--cs-text-muted) !important;
}

#footer a, .mw-footer a { color: var(--cs-text-secondary) !important; }
#footer a:hover, .mw-footer a:hover { color: var(--cs-accent) !important; }

/* ============================================================
   CONTENT ELEMENTS
   ============================================================ */
blockquote {
    border-left: 3px solid var(--cs-accent) !important;
    background-color: var(--cs-accent-soft) !important;
    padding: 0.75em 1.25em !important;
    color: var(--cs-text-secondary) !important;
    border-radius: 0 var(--cs-radius) var(--cs-radius) 0 !important;
    margin: 1em 0 !important;
}

code, pre, .mw-code, .mw-highlight {
    background-color: var(--cs-bg-subtle) !important;
    color: var(--cs-text) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

pre, .mw-code {
    padding: 1em 1.2em !important;
    font-size: 0.88em !important;
    line-height: 1.6 !important;
    overflow-x: auto !important;
}

code {
    padding: 0.15em 0.45em !important;
    font-size: 0.88em !important;
    color: #b5580a !important;
    background-color: rgba(181, 88, 10, 0.06) !important;
    border: 1px solid rgba(181, 88, 10, 0.12) !important;
}

hr {
    border-color: var(--cs-border) !important;
    margin: 1.5em 0 !important;
}

dt {
    color: var(--cs-text) !important;
    font-weight: 600 !important;
    font-family: var(--cs-font-display) !important;
}

dd { color: var(--cs-text-secondary) !important; }

/* Lists */
.mw-body-content ul,
.mw-body-content ol {
    line-height: 1.8 !important;
}

/* Bold text */
.mw-body-content b,
.mw-body-content strong {
    font-weight: 600 !important;
    color: var(--cs-text) !important;
}

/* ============================================================
   EDIT PAGE
   ============================================================ */
.editOptions, #editform, .mw-editform {
    background-color: var(--cs-bg-content) !important;
}

textarea, .mw-editfont-monospace, #wpTextbox1 {
    background-color: var(--cs-bg-card) !important;
    color: var(--cs-text) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
}

textarea:focus, #wpTextbox1:focus {
    border-color: var(--cs-accent) !important;
    box-shadow: 0 0 0 3px rgba(222, 142, 29, 0.15) !important;
    outline: none !important;
}

.oo-ui-widget, .oo-ui-buttonElement-button {
    background-color: var(--cs-bg-card) !important;
    color: var(--cs-text) !important;
    border-color: var(--cs-border) !important;
}

/* ============================================================
   FORMS & BUTTONS
   ============================================================ */
fieldset { border-color: var(--cs-border) !important; }

legend {
    color: var(--cs-text) !important;
    font-family: var(--cs-font-display) !important;
    font-weight: 700 !important;
}

input[type="text"], input[type="password"],
input[type="email"], input[type="search"],
input[type="number"], select {
    background-color: var(--cs-bg-card) !important;
    color: var(--cs-text) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: 4px !important;
    font-family: var(--cs-font-body) !important;
}

input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="search"]:focus,
select:focus {
    border-color: var(--cs-accent) !important;
    box-shadow: 0 0 0 3px rgba(222, 142, 29, 0.15) !important;
    outline: none !important;
}

input[type="submit"], button[type="submit"],
.mw-ui-button, .cdx-button--action-progressive {
    background-color: var(--cs-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--cs-radius) !important;
    font-family: var(--cs-font-display) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0.55em 1.4em !important;
    cursor: pointer !important;
    transition: background-color var(--cs-transition), transform 0.1s ease !important;
    box-shadow: var(--cs-shadow-sm) !important;
}

input[type="submit"]:hover, button[type="submit"]:hover,
.mw-ui-button:hover, .cdx-button--action-progressive:hover {
    background-color: var(--cs-accent-hover) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   NOTICES & MESSAGE BOXES
   ============================================================ */
.mw-message-box, .warningbox, .errorbox,
.successbox, .mbox-small, table.ambox {
    background-color: var(--cs-bg-card) !important;
    border-color: var(--cs-border) !important;
    color: var(--cs-text) !important;
    border-radius: var(--cs-radius) !important;
}

.warningbox, table.ambox-content {
    border-left: 4px solid var(--cs-accent) !important;
}

.errorbox { border-left: 4px solid #dc3545 !important; }
.successbox { border-left: 4px solid #198754 !important; }

#siteNotice, .mw-dismissable-notice {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    color: var(--cs-text) !important;
    border-radius: var(--cs-radius) !important;
}

/* ============================================================
   DIFF VIEW
   ============================================================ */
.diff, table.diff { background-color: var(--cs-bg-content) !important; color: var(--cs-text) !important; }
.diff-context { background-color: var(--cs-bg-content) !important; color: var(--cs-text-secondary) !important; }
.diff-addedline { background-color: rgba(25, 135, 84, 0.08) !important; }
.diff-deletedline { background-color: rgba(220, 53, 69, 0.08) !important; }
td.diff-marker { color: var(--cs-text-muted) !important; }

/* ============================================================
   IMAGES & THUMBNAILS
   ============================================================ */
.thumb, .thumbinner {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius) !important;
}

.thumbcaption {
    color: var(--cs-text-secondary) !important;
    font-size: 0.88em !important;
    padding: 6px 10px !important;
}

.gallerybox {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
}

.gallerytext { color: var(--cs-text-secondary) !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cs-bg); }
::-webkit-scrollbar-thumb { background: var(--cs-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cs-text-muted); }

html {
    scrollbar-color: var(--cs-border) var(--cs-bg);
    scrollbar-width: thin;
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
    background-color: rgba(222, 142, 29, 0.2) !important;
    color: var(--cs-text) !important;
}

/* ============================================================
   NAV ICONS (undo dark-mode invert)
   ============================================================ */
.vector-icon, .cdx-button-icon, .mw-ui-icon {
    filter: none !important;
}

/* Header icons need to be white */
.vector-header .vector-icon,
.vector-header .cdx-button-icon,
.vector-sticky-header .vector-icon,
.vector-sticky-header .cdx-button-icon {
    filter: invert(1) !important;
    opacity: 0.7 !important;
}

.vector-header .vector-icon:hover,
.vector-header .cdx-button-icon:hover,
.vector-sticky-header .vector-icon:hover,
.vector-sticky-header .cdx-button-icon:hover {
    opacity: 1 !important;
}

/* ============================================================
   PINNABLE ELEMENTS
   ============================================================ */
.vector-pinnable-header {
    border-bottom-color: var(--cs-border) !important;
}

.vector-pinnable-header-label {
    color: var(--cs-text) !important;
    font-family: var(--cs-font-display) !important;
    font-weight: 700 !important;
}

.vector-pinnable-header-toggle-button,
.vector-pinnable-header-unpin-button,
.vector-pinnable-header-pin-button {
    color: var(--cs-text-muted) !important;
}

#contentSub, #contentSub2 { color: var(--cs-text-muted) !important; }

.hatnote, .dablink {
    color: var(--cs-text-muted) !important;
    font-style: italic !important;
}

/* Recent changes / prefs */
.mw-changeslist-line, .mw-changeslist { color: var(--cs-text) !important; }

.oo-ui-layout, .oo-ui-panelLayout {
    background-color: var(--cs-bg-content) !important;
    color: var(--cs-text) !important;
}

.mwe-popups, .mwe-popups-container {
    background-color: var(--cs-bg-card) !important;
    border: 1px solid var(--cs-border) !important;
    color: var(--cs-text) !important;
    box-shadow: var(--cs-shadow-lg) !important;
    border-radius: var(--cs-radius) !important;
}

.mw-spinner, .cdx-progress-bar { border-color: var(--cs-accent) !important; }

/* ============================================================
   MAIN PAGE — CUSTOM CARD GRID
   ============================================================ */
.cs-hero {
    text-align: center;
    padding: 2.5em 1em 1.5em;
    margin: -2em -2.5em 2em;
    background: linear-gradient(135deg, var(--cs-bg-header) 0%, #2a2f36 100%);
    border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
}

.cs-hero h1 {
    color: #ffffff !important;
    font-family: var(--cs-font-display) !important;
    font-size: 2.2em !important;
    font-weight: 800 !important;
    margin: 0 0 0.15em !important;
    border: none !important;
    padding: 0 !important;
    letter-spacing: -0.02em !important;
}

.cs-hero p {
    color: rgba(255,255,255,0.6) !important;
    font-family: var(--cs-font-body) !important;
    font-size: 1.05em !important;
    margin: 0 !important;
}

.cs-hero .cs-accent {
    color: var(--cs-accent) !important;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 0 0 1.5em;
}

.cs-card {
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    padding: 0;
    overflow: hidden;
    transition: box-shadow var(--cs-transition), transform 0.15s ease, border-color var(--cs-transition);
    box-shadow: var(--cs-shadow-sm);
}

.cs-card:hover {
    box-shadow: var(--cs-shadow-md);
    transform: translateY(-2px);
    border-color: var(--cs-accent-border);
}

.cs-card-header {
    background: var(--cs-bg-header);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-card-header h3 {
    color: #ffffff !important;
    font-family: var(--cs-font-display) !important;
    font-size: 0.95em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: 0.02em !important;
}

.cs-card-icon {
    font-size: 1.1em;
    line-height: 1;
}

.cs-card-body {
    padding: 14px 16px 16px;
}

.cs-card-body ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.cs-card-body li {
    padding: 5px 0;
    border-bottom: 1px solid var(--cs-border-subtle);
    font-size: 0.9em;
    line-height: 1.5;
}

.cs-card-body li:last-child {
    border-bottom: none;
}

.cs-card-body li a {
    font-weight: 500 !important;
}

.cs-card-body .cs-desc {
    color: var(--cs-text-muted);
    font-size: 0.88em;
}

.cs-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 2em;
    padding: 1.2em;
    background: var(--cs-bg-subtle);
    border-radius: var(--cs-radius-lg);
    border: 1px solid var(--cs-border);
}

.cs-stat {
    text-align: center;
    padding: 0 16px;
}

.cs-stat-num {
    font-family: var(--cs-font-display);
    font-weight: 800;
    font-size: 1.8em;
    color: var(--cs-accent);
    line-height: 1.1;
}

.cs-stat-label {
    font-family: var(--cs-font-display);
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cs-text-muted);
    font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 1000px) {
    .mw-body { padding: 1.5em !important; }
    h1, .mw-first-heading { font-size: 1.7em !important; }
    h2 { font-size: 1.25em !important; }
    .cs-hero { margin: -1.5em -1.5em 1.5em; padding: 2em 1em 1.2em; }
    .cs-hero h1 { font-size: 1.8em !important; }
}

@media screen and (max-width: 720px) {
    .mw-body {
        border: none !important;
        border-radius: 0 !important;
        padding: 1em !important;
    }
    h1, .mw-first-heading { font-size: 1.4em !important; }
    h2 { font-size: 1.1em !important; }
    .cs-hero { margin: -1em -1em 1em; padding: 1.5em 0.75em 1em; border-radius: 0; }
    .cs-hero h1 { font-size: 1.5em !important; }
    .cs-grid { grid-template-columns: 1fr; gap: 12px; }
    .cs-stats { flex-direction: column; gap: 8px; }
}