MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ============================================================
   ZelocoreCMS Wiki — MediaWiki:Common.css
   Dark Futuristic Theme | Version 1.0
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --zc-cyan:         #00C8FF;
  --zc-cyan-dim:     rgba(0,200,255,0.15);
  --zc-cyan-glow:    0 0 20px rgba(0,200,255,0.4);
  --zc-violet:       #7B4FFF;
  --zc-violet-dim:   rgba(123,79,255,0.15);
  --zc-violet-glow:  0 0 20px rgba(123,79,255,0.4);
  --zc-emerald:      #00E88F;
  --zc-amber:        #FFB800;
  --zc-red:          #FF4D6A;

  --zc-bg:           #0A0E1A;
  --zc-surface:      #111827;
  --zc-surface2:     #1A2235;
  --zc-surface3:     #1E2D40;
  --zc-border:       #1E2D40;
  --zc-border-glow:  rgba(0,200,255,0.25);

  --zc-text:         #F0F6FF;
  --zc-text-muted:   #7A8FA6;
  --zc-text-dim:     #4A6080;

  --zc-radius:       8px;
  --zc-radius-lg:    14px;
  --zc-radius-xl:    20px;
  --zc-transition:   0.25s ease;
  --zc-font-body:    'Inter', system-ui, sans-serif;
  --zc-font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --zc-font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ── Global Reset & Base ──────────────────────────────────── */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--zc-cyan-dim) var(--zc-surface);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--zc-surface); }
::-webkit-scrollbar-thumb {
  background: var(--zc-surface3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--zc-cyan); }

body {
  background-color: var(--zc-bg) !important;
  color: var(--zc-text) !important;
  font-family: var(--zc-font-body) !important;
  font-size: 15px;
  line-height: 1.7;
}

/* ── Hex Grid Background Texture ──────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zm0-2L2 50.9V17.1L28 2l26 15.1v33.8z' fill='none' stroke='%231E2D40' stroke-width='0.5'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--zc-font-heading) !important;
  color: var(--zc-text) !important;
  line-height: 1.25;
}

#firstHeading,
.mw-page-title-main {
  font-size: 2rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--zc-cyan) 0%, var(--zc-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 4px;
}

.mw-body-content h2 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--zc-text) !important;
  border-bottom: 2px solid var(--zc-cyan) !important;
  padding-bottom: 6px !important;
  margin-top: 2rem !important;
}

.mw-body-content h2 .mw-headline {
  background: linear-gradient(90deg, var(--zc-cyan), var(--zc-text));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mw-body-content h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--zc-cyan) !important;
  margin-top: 1.5rem !important;
}

.mw-body-content h4 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--zc-text-muted) !important;
}

p { margin-bottom: 1rem; color: var(--zc-text); }

/* ── Links ─────────────────────────────────────────────────── */
a,
.mw-body-content a {
  color: var(--zc-cyan) !important;
  text-decoration: none !important;
  transition: color var(--zc-transition), text-shadow var(--zc-transition);
}

a:hover,
.mw-body-content a:hover {
  color: #fff !important;
  text-shadow: 0 0 8px var(--zc-cyan);
}

a.new { color: var(--zc-red) !important; }
a.new:hover { color: #ff8a9d !important; }

/* ── Header / Navbar ─────────────────────────────────────── */
#mw-head,
.mw-header {
  background: rgba(10,14,26,0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--zc-border-glow) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Logo */
.mw-logo-wordmark,
.mw-wiki-logo {
  filter: drop-shadow(0 0 8px rgba(0,200,255,0.5));
}

/* ── Search Bar ───────────────────────────────────────────── */
#searchInput,
.cdx-text-input__input,
input[name="search"] {
  background: var(--zc-surface2) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius) !important;
  color: var(--zc-text) !important;
  font-family: var(--zc-font-body) !important;
  transition: border-color var(--zc-transition), box-shadow var(--zc-transition);
  padding: 8px 14px !important;
}

#searchInput:focus,
.cdx-text-input__input:focus,
input[name="search"]:focus {
  border-color: var(--zc-cyan) !important;
  box-shadow: var(--zc-cyan-glow) !important;
  outline: none !important;
}

.cdx-search-input__end-button,
#searchButton, #mw-searchButton {
  background: linear-gradient(135deg, var(--zc-cyan), var(--zc-violet)) !important;
  border: none !important;
  border-radius: var(--zc-radius) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: opacity var(--zc-transition), box-shadow var(--zc-transition);
}
#searchButton:hover { opacity: 0.85; box-shadow: var(--zc-cyan-glow) !important; }

/* ── Sidebar ──────────────────────────────────────────────── */
#mw-panel,
.mw-sidebar,
nav.vector-menu {
  background: transparent !important;
}

.mw-panel .portal,
.vector-menu-portal {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-lg) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

.mw-panel .portal h3,
.vector-menu-heading {
  background: linear-gradient(90deg, var(--zc-surface2), transparent) !important;
  color: var(--zc-cyan) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--zc-border) !important;
}

.mw-panel .portal li a,
.vector-menu-content-list li a {
  color: var(--zc-text-muted) !important;
  font-size: 0.875rem !important;
  padding: 5px 14px !important;
  display: block;
  border-left: 2px solid transparent;
  transition: all var(--zc-transition);
}

.mw-panel .portal li a:hover,
.vector-menu-content-list li a:hover {
  color: var(--zc-cyan) !important;
  background: var(--zc-cyan-dim) !important;
  border-left-color: var(--zc-cyan) !important;
  text-shadow: none !important;
}

/* ── Content Area ─────────────────────────────────────────── */
#mw-content-text,
.mw-body,
.mw-body-content {
  background: transparent !important;
  color: var(--zc-text) !important;
}

.mw-body {
  padding: 24px 32px !important;
}

/* ── Tables ───────────────────────────────────────────────── */
.wikitable,
.mw-body-content table.wikitable {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  width: 100%;
  margin: 1.5rem 0 !important;
}

.wikitable th {
  background: linear-gradient(135deg, var(--zc-surface2), var(--zc-surface3)) !important;
  color: var(--zc-cyan) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.03em;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--zc-border-glow) !important;
  border-right: 1px solid var(--zc-border) !important;
}

.wikitable td {
  background: transparent !important;
  color: var(--zc-text) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--zc-border) !important;
  border-right: 1px solid var(--zc-border) !important;
}

.wikitable tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

.wikitable tr:hover td {
  background: var(--zc-cyan-dim) !important;
  transition: background var(--zc-transition);
}

/* ── Code & Pre ───────────────────────────────────────────── */
code, tt, kbd {
  font-family: var(--zc-font-mono) !important;
  background: var(--zc-surface2) !important;
  color: var(--zc-cyan) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-size: 0.875em !important;
  border: 1px solid var(--zc-border) !important;
}

pre,
.mw-body-content pre {
  font-family: var(--zc-font-mono) !important;
  background: #060a14 !important;
  color: #c9d1d9 !important;
  border: 1px solid var(--zc-border) !important;
  border-left: 3px solid var(--zc-cyan) !important;
  border-radius: var(--zc-radius) !important;
  padding: 20px !important;
  overflow-x: auto !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  margin: 1.25rem 0 !important;
}

/* SyntaxHighlight */
.mw-highlight {
  background: #060a14 !important;
  border: 1px solid var(--zc-border) !important;
  border-left: 3px solid var(--zc-violet) !important;
  border-radius: var(--zc-radius) !important;
  padding: 0 !important;
  overflow: hidden;
}

.mw-highlight pre {
  border: none !important;
  border-left: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ── Infobox ──────────────────────────────────────────────── */
.infobox,
table.infobox {
  background: rgba(17,24,39,0.8) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--zc-border-glow) !important;
  border-radius: var(--zc-radius-xl) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  float: right !important;
  margin: 0 0 1.5rem 2rem !important;
  padding: 16px !important;
  width: 280px !important;
  overflow: hidden;
}

.infobox caption,
table.infobox caption {
  background: linear-gradient(135deg, var(--zc-cyan), var(--zc-violet)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 10px 16px !important;
  text-align: center !important;
  margin: -16px -16px 12px -16px !important;
}

.infobox th {
  color: var(--zc-text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px !important;
  background: transparent !important;
  border: none !important;
}

.infobox td {
  color: var(--zc-text) !important;
  font-size: 0.9rem !important;
  padding: 6px 10px !important;
  border: none !important;
  background: transparent !important;
}

/* ── Callout Boxes ────────────────────────────────────────── */
/* Note */
.zc-note, .mw-message-box-notice {
  background: rgba(0,200,255,0.08) !important;
  border: 1px solid rgba(0,200,255,0.3) !important;
  border-left: 4px solid var(--zc-cyan) !important;
  border-radius: var(--zc-radius) !important;
  padding: 14px 18px !important;
  margin: 1rem 0 !important;
  color: var(--zc-text) !important;
}

/* Warning */
.zc-warning, .mw-message-box-warning {
  background: rgba(255,184,0,0.08) !important;
  border: 1px solid rgba(255,184,0,0.3) !important;
  border-left: 4px solid var(--zc-amber) !important;
  border-radius: var(--zc-radius) !important;
  padding: 14px 18px !important;
  margin: 1rem 0 !important;
  color: var(--zc-text) !important;
}

/* Tip */
.zc-tip {
  background: rgba(0,232,143,0.08) !important;
  border: 1px solid rgba(0,232,143,0.3) !important;
  border-left: 4px solid var(--zc-emerald) !important;
  border-radius: var(--zc-radius) !important;
  padding: 14px 18px !important;
  margin: 1rem 0 !important;
  color: var(--zc-text) !important;
}

/* ── Verified / Official Badge ───────────────────────────── */
.zc-verified-banner {
  background: linear-gradient(135deg, rgba(0,232,143,0.1), rgba(0,200,255,0.1)) !important;
  border: 1px solid var(--zc-emerald) !important;
  border-radius: var(--zc-radius) !important;
  padding: 10px 18px !important;
  margin-bottom: 1.5rem !important;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--zc-emerald) !important;
  box-shadow: 0 0 20px rgba(0,232,143,0.15);
  animation: verifiedPulse 3s ease-in-out infinite;
}

@keyframes verifiedPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,232,143,0.15); }
  50%       { box-shadow: 0 0 25px rgba(0,232,143,0.35); }
}

/* CMS Owner Badge */
.zc-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--zc-amber), #ff9f00);
  color: #000 !important;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
}

/* Developer Badge */
.zc-dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--zc-violet-dim);
  border: 1px solid var(--zc-violet);
  color: var(--zc-violet) !important;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  vertical-align: middle;
}

/* Contributor Badge */
.zc-contrib-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--zc-cyan-dim);
  border: 1px solid var(--zc-cyan);
  color: var(--zc-cyan) !important;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  vertical-align: middle;
}

/* ── Developer Profile Card ──────────────────────────────── */
.zc-profile-card {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-xl) !important;
  padding: 28px !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.zc-profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--zc-cyan), var(--zc-violet));
}

.zc-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--zc-cyan);
  box-shadow: 0 0 20px rgba(0,200,255,0.3);
}

.zc-skill-tag {
  display: inline-block;
  background: var(--zc-surface2);
  border: 1px solid var(--zc-border);
  color: var(--zc-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  margin: 3px;
  transition: all var(--zc-transition);
}

.zc-skill-tag:hover {
  border-color: var(--zc-cyan);
  color: var(--zc-cyan);
  background: var(--zc-cyan-dim);
}

/* ── CMS Card Grid ───────────────────────────────────────── */
.zc-cms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}

.zc-cms-card {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-lg) !important;
  padding: 20px !important;
  transition: all var(--zc-transition);
  cursor: pointer;
  text-decoration: none !important;
  display: block;
  position: relative;
  overflow: hidden;
}

.zc-cms-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--zc-cyan), var(--zc-violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--zc-transition);
}

.zc-cms-card:hover {
  border-color: var(--zc-border-glow) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--zc-cyan-dim) !important;
  transform: translateY(-3px);
}

.zc-cms-card:hover::after { transform: scaleX(1); }

/* ── Category Boxes ──────────────────────────────────────── */
.zc-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 1.5rem 0;
}

.zc-category-box {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-lg) !important;
  padding: 20px 16px !important;
  text-align: center;
  transition: all var(--zc-transition);
  cursor: pointer;
}

.zc-category-box:hover {
  border-color: var(--zc-cyan) !important;
  background: var(--zc-cyan-dim) !important;
  box-shadow: var(--zc-cyan-glow) !important;
  transform: translateY(-2px);
}

.zc-category-box .zc-cat-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.zc-category-box .zc-cat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--zc-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────── */
.zc-btn,
.mw-ui-button,
input[type="submit"],
input[type="button"],
button.mw-ui-progressive {
  background: linear-gradient(135deg, var(--zc-cyan), #0099cc) !important;
  border: none !important;
  border-radius: var(--zc-radius) !important;
  color: #000 !important;
  font-family: var(--zc-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 9px 22px !important;
  cursor: pointer !important;
  transition: all var(--zc-transition) !important;
  box-shadow: 0 4px 15px rgba(0,200,255,0.3) !important;
}

.zc-btn:hover,
input[type="submit"]:hover,
button.mw-ui-progressive:hover {
  box-shadow: 0 6px 25px rgba(0,200,255,0.5) !important;
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.zc-btn-outline {
  background: transparent !important;
  border: 1px solid var(--zc-cyan) !important;
  color: var(--zc-cyan) !important;
  box-shadow: none !important;
}

.zc-btn-outline:hover {
  background: var(--zc-cyan-dim) !important;
  box-shadow: var(--zc-cyan-glow) !important;
}

.zc-btn-violet {
  background: linear-gradient(135deg, var(--zc-violet), #5533cc) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(123,79,255,0.3) !important;
}

/* ── Table of Contents ───────────────────────────────────── */
#toc, .toc {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-lg) !important;
  padding: 16px 20px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

#toc h2, .toc h2 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--zc-text-muted) !important;
  background: none !important;
  -webkit-text-fill-color: var(--zc-text-muted) !important;
  border: none !important;
  padding: 0 0 8px 0 !important;
  margin: 0 0 8px 0 !important;
}

#toc li, .toc li {
  font-size: 0.875rem !important;
  line-height: 1.8 !important;
}

#toc a, .toc a {
  color: var(--zc-text-muted) !important;
}

#toc a:hover, .toc a:hover {
  color: var(--zc-cyan) !important;
}

/* ── Version / License Badges ────────────────────────────── */
.zc-version-badge {
  display: inline-block;
  background: var(--zc-surface2);
  border: 1px solid var(--zc-border);
  color: var(--zc-cyan);
  font-family: var(--zc-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
}

.zc-license-badge {
  display: inline-block;
  background: var(--zc-violet-dim);
  border: 1px solid var(--zc-violet);
  color: var(--zc-violet);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
}

/* ── Stats Counter Cards ─────────────────────────────────── */
.zc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 2rem 0;
}

.zc-stat-card {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius-lg) !important;
  padding: 20px !important;
  text-align: center;
}

.zc-stat-number {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--zc-font-heading);
  background: linear-gradient(135deg, var(--zc-cyan), var(--zc-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.zc-stat-label {
  font-size: 0.8rem;
  color: var(--zc-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Footer ───────────────────────────────────────────────── */
#footer,
.mw-footer {
  background: var(--zc-surface) !important;
  border-top: 1px solid var(--zc-border) !important;
  color: var(--zc-text-muted) !important;
  padding: 32px !important;
  margin-top: 4rem !important;
}

#footer a, .mw-footer a {
  color: var(--zc-text-muted) !important;
}

#footer a:hover, .mw-footer a:hover {
  color: var(--zc-cyan) !important;
  text-shadow: none !important;
}

/* ── Edit / Diff Pages ───────────────────────────────────── */
.mw-editnotice { background: var(--zc-surface2) !important; border-radius: var(--zc-radius) !important; }
textarea#wpTextbox1 {
  background: #060a14 !important;
  color: var(--zc-text) !important;
  border: 1px solid var(--zc-border) !important;
  border-radius: var(--zc-radius) !important;
  font-family: var(--zc-font-mono) !important;
  font-size: 0.9rem !important;
  padding: 16px !important;
}
textarea#wpTextbox1:focus {
  border-color: var(--zc-cyan) !important;
  box-shadow: var(--zc-cyan-glow) !important;
  outline: none !important;
}

.diff-addedline { background: rgba(0,232,143,0.08) !important; }
.diff-deletedline { background: rgba(255,77,106,0.08) !important; }
.diffchange { background: rgba(0,200,255,0.15) !important; }

/* ── Recent Changes ──────────────────────────────────────── */
.mw-changeslist-line {
  border-bottom: 1px solid var(--zc-border) !important;
  padding: 6px 0 !important;
}

/* ── Notifications (Echo) ────────────────────────────────── */
.oo-ui-popupWidget {
  background: var(--zc-surface) !important;
  border: 1px solid var(--zc-border-glow) !important;
  border-radius: var(--zc-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* ── Page Action Tabs ────────────────────────────────────── */
#p-views .selected a,
.vector-tab-noaction.selected a {
  color: var(--zc-cyan) !important;
  border-bottom: 2px solid var(--zc-cyan) !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .zc-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .zc-cms-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .zc-category-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .infobox { float: none !important; width: 100% !important; margin: 0 0 1.5rem 0 !important; }
  .mw-body { padding: 16px !important; }
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,200,255,0.2); }
  50%       { box-shadow: 0 0 30px rgba(0,200,255,0.5); }
}

.mw-body-content { animation: fadeInUp 0.4s ease forwards; }

/* ── Print Styles ────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
  #mw-head, #mw-panel, #footer { display: none !important; }
  a { color: #0066cc !important; }
  pre, code { background: #f5f5f5 !important; color: #333 !important; }
}