/* ========================================
   Theme System — 2 Switchable Themes
   Industrial Version

   Specificity: html[data-theme="..."] = 0-1-1
   This beats :root = 0-1-0 in style.css
   ======================================== */

/* ---- Professional Light (Default — matches existing design) ---- */
:root,
html[data-theme="professional"] {
  /* Keep existing variables from style.css — no overrides needed */
}

/* ============================================
   CYBER DARK THEME
   Neon futuristic aesthetic
   ============================================ */
html[data-theme="cyber"] {
  --primary-dark: #00d4ff;
  --primary-light: #7b2cbf;
  --primary-gradient: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);
  --text-dark: #e8e8ec;
  --text-light: rgba(255, 255, 255, 0.6);
  --bg-light: #16161e;
  --bg-white: #0c0c14;
  --bg-dark: #06060a;
  --border-color: rgba(0, 212, 255, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0 30px rgba(0, 212, 255, 0.12);
  --transition: all 0.3s ease;
}

/* ============================================
   SHARED DARK THEME ELEMENT OVERRIDES
   These override hardcoded colors in style.css
   ============================================ */

/* ---- Body ---- */
html[data-theme="cyber"] body {
  background-color: var(--bg-white) !important;
  color: var(--text-dark) !important;
}

/* ---- Header & Navigation ---- */
html[data-theme="cyber"] .header {
  background: rgba(12, 12, 20, 0.95) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .header.scrolled {
  background: rgba(12, 12, 20, 0.98) !important;
  box-shadow: 0 2px 20px rgba(0, 212, 255, 0.08) !important;
}

html[data-theme="cyber"] .nav-menu a {
  color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="cyber"] .nav-menu a:hover,
html[data-theme="cyber"] .nav-menu a.active {
  color: #00d4ff !important;
}

/* Mobile nav menu */
html[data-theme="cyber"] .nav-menu {
  background: #0c0c14 !important;
}

/* Menu toggle (hamburger) */
html[data-theme="cyber"] .menu-toggle span {
  background: #fff !important;
}

/* Language switcher */
html[data-theme="cyber"] .lang-switch {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="cyber"] .lang-switch a {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="cyber"] .lang-switch a.active {
  background: #00d4ff !important;
  color: #000 !important;
}

/* Search box */
html[data-theme="cyber"] .search-box input {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(0, 212, 255, 0.15) !important;
  color: #fff !important;
}

html[data-theme="cyber"] .search-box button {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="cyber"] .search-results {
  background: var(--bg-light) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="cyber"] .search-result-item:hover {
  background: var(--bg-white) !important;
}

html[data-theme="cyber"] .search-highlight {
  background: rgba(0, 212, 255, 0.2) !important;
}

/* ---- Hero Section ---- */
html[data-theme="cyber"] .hero {
  background: radial-gradient(ellipse at 30% 50%, rgba(0, 102, 255, 0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 60%),
              linear-gradient(180deg, rgba(12, 12, 20, 0.92) 0%, rgba(6, 6, 10, 0.95) 100%),
              url('../images/home02.jpg') center/cover no-repeat !important;
}

html[data-theme="cyber"] .hero h1 {
  color: #fff !important;
}

/* ---- Page Header ---- */
html[data-theme="cyber"] .page-header {
  background: linear-gradient(135deg, #0c0c14 0%, #16161e 100%) !important;
}

html[data-theme="cyber"] .page-header h1 {
  color: #fff !important;
}

html[data-theme="cyber"] .page-header .breadcrumb,
html[data-theme="cyber"] .page-header .breadcrumb a {
  color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="cyber"] .page-header.featured-header {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%),
              linear-gradient(135deg, #0c0c14 0%, #16161e 100%) !important;
}

/* ---- Section Backgrounds ---- */
html[data-theme="cyber"] .section-bg,
html[data-theme="cyber"] .bg-light {
  background-color: #16161e !important;
}

html[data-theme="cyber"] .bg-dark {
  background-color: var(--bg-dark) !important;
}

/* Section title */
html[data-theme="cyber"] .section-title h2 {
  color: #00d4ff !important;
}

html[data-theme="cyber"] .section-title p {
  color: var(--text-light) !important;
}

/* ---- Typography ---- */
html[data-theme="cyber"] h1,
html[data-theme="cyber"] h2,
html[data-theme="cyber"] h3,
html[data-theme="cyber"] h4,
html[data-theme="cyber"] h5,
html[data-theme="cyber"] h6 {
  color: #e8e8ec !important;
}

/* Override for colored headings */
html[data-theme="cyber"] .text-primary,
html[data-theme="cyber"] .about-content h3,
html[data-theme="cyber"] .section-heading,
html[data-theme="cyber"] .feature-item h4,
html[data-theme="cyber"] .product-info h1,
html[data-theme="cyber"] .product-text h4,
html[data-theme="cyber"] .gallery-item h4,
html[data-theme="cyber"] .timeline-item .year {
  color: #00d4ff !important;
}

html[data-theme="cyber"] .text-accent {
  color: #7b2cbf !important;
}

/* Links */
html[data-theme="cyber"] a {
  color: #00d4ff;
}

html[data-theme="cyber"] a:hover {
  color: #66e0ff;
}

/* ---- Cards ---- */
/* Product cards */
html[data-theme="cyber"] .product-card {
  background: #16161e !important;
  border-color: rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .product-card:hover {
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.15) !important;
  border-color: rgba(0, 212, 255, 0.25) !important;
}

html[data-theme="cyber"] .product-card.featured {
  border-color: #7b2cbf !important;
}

html[data-theme="cyber"] .product-content h3 {
  color: #e8e8ec !important;
}

html[data-theme="cyber"] .product-tags span {
  background: rgba(0, 212, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="cyber"] .product-link {
  color: #00d4ff !important;
}

/* Feature cards */
html[data-theme="cyber"] .feature-item {
  background: #16161e !important;
  border: 1px solid rgba(0, 212, 255, 0.08) !important;
}

html[data-theme="cyber"] .feature-item:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
}

/* News cards */
html[data-theme="cyber"] .news-card {
  background: #16161e !important;
  border: 1px solid rgba(0, 212, 255, 0.08) !important;
}

html[data-theme="cyber"] .news-card:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .news-content h4 {
  color: #e8e8ec !important;
}

/* ---- About Section ---- */
html[data-theme="cyber"] .stat-item {
  background: rgba(0, 212, 255, 0.06) !important;
  border: 1px solid rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .stat-item .number {
  color: #00d4ff !important;
}

/* ---- About Preview ---- */
html[data-theme="cyber"] .about-preview {
  border: 1px solid rgba(0, 212, 255, 0.08) !important;
  background: rgba(0, 212, 255, 0.02) !important;
  border-radius: 12px !important;
  padding: 32px !important;
}

/* ---- CTA Section ---- */
html[data-theme="cyber"] .cta-section {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 212, 255, 0.15) 100%),
              #0c0c14 !important;
  border-top: 1px solid rgba(0, 212, 255, 0.15);
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

html[data-theme="cyber"] .cta-section h2 {
  color: #00d4ff !important;
}

html[data-theme="cyber"] .cta-section p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Buttons ---- */
html[data-theme="cyber"] .btn-outline {
  border-color: #00d4ff !important;
  color: #00d4ff !important;
}

html[data-theme="cyber"] .btn-outline:hover {
  background: rgba(0, 212, 255, 0.1) !important;
  color: #00d4ff !important;
}

html[data-theme="cyber"] .btn-white {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00d4ff !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

html[data-theme="cyber"] .btn-white:hover {
  background: rgba(0, 212, 255, 0.2) !important;
}

/* ---- Footer ---- */
html[data-theme="cyber"] .footer {
  background: #06060a !important;
  border-top: 1px solid rgba(0, 212, 255, 0.1);
}

html[data-theme="cyber"] .footer-brand img {
  background: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="cyber"] .footer-bottom {
  border-top-color: rgba(0, 212, 255, 0.1) !important;
}

/* ---- Forms ---- */
html[data-theme="cyber"] .contact-form {
  background: #16161e !important;
  border: 1px solid rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .form-group label {
  color: #e8e8ec !important;
}

html[data-theme="cyber"] .form-group input,
html[data-theme="cyber"] .form-group textarea,
html[data-theme="cyber"] .form-group select {
  background: #0c0c14 !important;
  border-color: rgba(0, 212, 255, 0.15) !important;
  color: #e8e8ec !important;
}

html[data-theme="cyber"] .form-group input::placeholder,
html[data-theme="cyber"] .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

html[data-theme="cyber"] .form-group input:focus,
html[data-theme="cyber"] .form-group textarea:focus,
html[data-theme="cyber"] .form-group select:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
}

/* ---- Tables ---- */
html[data-theme="cyber"] .product-table th {
  background: rgba(0, 212, 255, 0.1) !important;
  color: #00d4ff !important;
}

html[data-theme="cyber"] .product-table thead th {
  background: rgba(0, 102, 255, 0.3) !important;
  color: #fff !important;
}

html[data-theme="cyber"] .product-table td {
  border-bottom-color: rgba(0, 212, 255, 0.08) !important;
  color: #e8e8ec !important;
}

html[data-theme="cyber"] .product-table tr:hover {
  background: rgba(0, 212, 255, 0.04) !important;
}

/* Tab navigation */
html[data-theme="cyber"] .tab-nav {
  border-bottom-color: rgba(0, 212, 255, 0.15) !important;
}

html[data-theme="cyber"] .tab-nav button {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="cyber"] .tab-nav button:hover,
html[data-theme="cyber"] .tab-nav button.active {
  color: #00d4ff !important;
}

/* ---- Product Detail ---- */
html[data-theme="cyber"] .product-features li {
  border-bottom-color: rgba(0, 212, 255, 0.08) !important;
}

html[data-theme="cyber"] .product-section {
  border-bottom-color: rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .product-hero {
  border-bottom-color: rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .product-text p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Feature list */
html[data-theme="cyber"] .feature-list li {
  border-bottom-color: rgba(0, 212, 255, 0.08) !important;
  color: #e8e8ec !important;
}

/* PDF / Download items */
html[data-theme="cyber"] .pdf-item,
html[data-theme="cyber"] .download-item {
  background: rgba(0, 212, 255, 0.06) !important;
  color: #e8e8ec !important;
}

html[data-theme="cyber"] .pdf-item:hover,
html[data-theme="cyber"] .download-item:hover {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: rgba(0, 212, 255, 0.2) !important;
}

html[data-theme="cyber"] .download-item svg {
  color: #00d4ff !important;
}

/* Highlight text */
html[data-theme="cyber"] .highlight-text {
  background: rgba(0, 212, 255, 0.06) !important;
  border-left-color: #00d4ff !important;
}

/* ---- Timeline ---- */
html[data-theme="cyber"] .timeline-item::before {
  background: #00d4ff !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

/* ---- Alert Messages ---- */
html[data-theme="cyber"] .alert-success {
  background: rgba(0, 255, 136, 0.1) !important;
  color: #00ff88 !important;
  border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

html[data-theme="cyber"] .alert-error {
  background: rgba(255, 59, 59, 0.1) !important;
  color: #ff5555 !important;
  border: 1px solid rgba(255, 59, 59, 0.2) !important;
}

/* ---- Back to Top ---- */
html[data-theme="cyber"] .back-to-top {
  background: linear-gradient(135deg, #0066ff, #00d4ff) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}

/* ---- Map Container ---- */
html[data-theme="cyber"] .map-container {
  border: 1px solid var(--border-color) !important;
}

/* ---- General content text ---- */
html[data-theme="cyber"] p,
html[data-theme="cyber"] li,
html[data-theme="cyber"] td,
html[data-theme="cyber"] th,
html[data-theme="cyber"] label,
html[data-theme="cyber"] span {
  color: inherit;
}

/* Featured badge */
html[data-theme="cyber"] .featured-badge {
  background: rgba(0, 212, 255, 0.15) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
}

/* ---- Image adjustments for dark ---- */
html[data-theme="cyber"] .about-image::before {
  background: linear-gradient(135deg, #0066ff, #00d4ff) !important;
  opacity: 0.2 !important;
}

/* ============================================
   MATERIAL PAGE ELEMENT OVERRIDES
   ============================================ */

/* ---- Material Visual Card ---- */
html[data-theme="cyber"] .material-visual-card {
  background: #16161e !important;
  border-color: rgba(0, 212, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.15) !important;
}

html[data-theme="cyber"] .material-visual-card img {
  background: #0c0c14 !important;
}

html[data-theme="cyber"] .material-visual-card figcaption {
  color: rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
}

/* ---- Material Download Item ---- */
html[data-theme="cyber"] .material-download-item {
  background: rgba(0, 212, 255, 0.06) !important;
  color: #e8e8ec !important;
  border-color: rgba(0, 212, 255, 0.08) !important;
}

html[data-theme="cyber"] .material-download-item:hover {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: rgba(0, 212, 255, 0.25) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .material-download-item svg {
  color: #00d4ff !important;
}

/* ---- Material Rich Table ---- */
html[data-theme="cyber"] .material-rich-table td,
html[data-theme="cyber"] .material-rich-content table td {
  background: #16161e !important;
  border-color: rgba(0, 212, 255, 0.08) !important;
  color: #e8e8ec !important;
}

html[data-theme="cyber"] .material-rich-table th,
html[data-theme="cyber"] .material-rich-content table th {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: rgba(0, 212, 255, 0.15) !important;
  color: #00d4ff !important;
}

html[data-theme="cyber"] .material-rich-table thead,
html[data-theme="cyber"] .material-rich-content table thead {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.35) 0%, rgba(0, 212, 255, 0.25) 100%) !important;
}

html[data-theme="cyber"] .material-rich-table thead th,
html[data-theme="cyber"] .material-rich-content table thead th {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(0, 212, 255, 0.2) !important;
}

html[data-theme="cyber"] .material-rich-table tbody tr:nth-child(even),
html[data-theme="cyber"] .material-rich-content table tbody tr:nth-child(even) {
  background: rgba(0, 212, 255, 0.03) !important;
}

html[data-theme="cyber"] .material-rich-table tbody tr:hover,
html[data-theme="cyber"] .material-rich-content table tbody tr:hover {
  background: rgba(0, 212, 255, 0.06) !important;
}

/* ---- Material Rich Content Table Responsive ---- */
html[data-theme="cyber"] .material-rich-content .table-responsive {
  border: 1px solid rgba(0, 212, 255, 0.1) !important;
  border-radius: 8px !important;
  background: #0c0c14 !important;
}

/* ---- Material Table Context Callout ---- */
html[data-theme="cyber"] .material-table-context {
  background: rgba(0, 212, 255, 0.05) !important;
  border-left-color: #00d4ff !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.03) !important;
}

/* ---- Material Card ---- */
html[data-theme="cyber"] .material-card {
  background: #16161e !important;
  border-color: rgba(0, 212, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="cyber"] .material-card:hover {
  border-color: rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
}

html[data-theme="cyber"] .material-card-image {
  background: #0c0c14 !important;
}

html[data-theme="cyber"] .material-card-body h3 {
  color: #00d4ff !important;
}

/* ---- Material Section Heading ---- */
html[data-theme="cyber"] .material-section-heading {
  color: #00d4ff !important;
  border-bottom-color: rgba(0, 212, 255, 0.3) !important;
}

/* ---- Material Nested Group ---- */
html[data-theme="cyber"] .material-nested-group {
  border-top-color: rgba(0, 212, 255, 0.1) !important;
}

/* ============================================
   LIGHTBOX OVERRIDES
   ============================================ */

html[data-theme="cyber"] .lightbox {
  background: rgba(6, 6, 10, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="cyber"] .lightbox-dialog {
  border: 1px solid rgba(0, 212, 255, 0.15) !important;
  border-radius: 12px !important;
  background: rgba(12, 12, 20, 0.6) !important;
  padding: 8px !important;
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.12), 0 0 80px rgba(0, 102, 255, 0.06) !important;
}

html[data-theme="cyber"] .lightbox-close {
  background: rgba(0, 212, 255, 0.15) !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

html[data-theme="cyber"] .lightbox-close:hover {
  background: rgba(0, 212, 255, 0.25) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.35) !important;
}

html[data-theme="cyber"] .lightbox-caption {
  color: rgba(0, 212, 255, 0.8) !important;
}

html[data-theme="cyber"] .lightbox-image {
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   CYBER THEME — FUTURISTIC ENHANCEMENTS
   Grid lines, neon glows, orange accents
   ============================================ */

/* Subtle scanline/grid overlay on body */
html[data-theme="cyber"] body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 212, 255, 0.008) 2px,
      rgba(0, 212, 255, 0.008) 4px
    );
  mix-blend-mode: screen;
}

/* Neon glow on section titles */
html[data-theme="cyber"] .section-title h2 {
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.1) !important;
}

/* Orange accent for secondary elements */
html[data-theme="cyber"] .product-card.featured {
  border-color: #ff6a00 !important;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.1) !important;
}

html[data-theme="cyber"] .featured-badge {
  background: rgba(255, 106, 0, 0.15) !important;
  border-color: rgba(255, 106, 0, 0.3) !important;
  color: #ff6a00 !important;
}

/* Cyber glow on hover cards */
html[data-theme="cyber"] .feature-item:hover {
  border-color: rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1), inset 0 0 20px rgba(0, 212, 255, 0.02) !important;
}

html[data-theme="cyber"] .news-card:hover {
  border-color: rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1), inset 0 0 20px rgba(0, 212, 255, 0.02) !important;
}

/* Neon underline on active tabs */
html[data-theme="cyber"] .tab-nav button.active {
  border-bottom: 2px solid #00d4ff !important;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

/* Glowing stat numbers */
html[data-theme="cyber"] .stat-item .number {
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
}

/* Grid-line effect on hero */
html[data-theme="cyber"] .hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Orange accent on CTA button hover */
html[data-theme="cyber"] .btn-primary:hover,
html[data-theme="cyber"] .btn:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.25) !important;
}

/* Neon border pulse on form focus */
html[data-theme="cyber"] .form-group input:focus,
html[data-theme="cyber"] .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 0 15px rgba(0, 212, 255, 0.08) !important;
}

/* ============================================
   THEME SWITCHER UI STYLES
   ============================================ */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
}

.theme-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-btn:hover {
  transform: scale(1.15);
  border-color: var(--primary-dark);
}

.theme-btn.active {
  border-color: var(--primary-dark);
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.3);
}

.theme-btn[data-theme-value="cyber"] {
  background: linear-gradient(135deg, #0c0c14, #00d4ff);
}

.theme-btn[data-theme-value="professional"] {
  background: linear-gradient(135deg, #ffffff, #1a4480);
}

@media (max-width: 768px) {
  .theme-switcher {
    margin-right: 6px;
  }
  .theme-btn {
    width: 22px;
    height: 22px;
  }
}