/*

 * GlomaxGPT — Space AI Theme v2.0 — ENHANCED DARK EDITION

 * ============================================================

 * Derin uzay, yoÄŸun nebula, shooting stars, cosmic glow

 * Yapıyı bozmaz — sadece görsel katman ekler/güçlendirir

 * ============================================================

 */

/* ============================================================

   0. FONT — Uzay teması için modern font

============================================================ */

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

/* ============================================================

   1. YILDIZ ARKA PLANI — Çok katmanlı, yoğun yıldız alanı

============================================================ */

/* Katman 1: Küçük uzak yıldızlar */

body::before {

  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background-image:

    /* Küçük beyaz yıldızlar — 1. grup */

    radial-gradient(1px 1px at 3%  7%,  rgba(255,255,255,0.90) 0%, transparent 100%),

    radial-gradient(1px 1px at 8%  18%, rgba(255,255,255,0.75) 0%, transparent 100%),

    radial-gradient(1px 1px at 14% 4%,  rgba(255,255,255,0.85) 0%, transparent 100%),

    radial-gradient(1px 1px at 19% 28%, rgba(255,255,255,0.70) 0%, transparent 100%),

    radial-gradient(1px 1px at 24% 12%, rgba(255,255,255,0.95) 0%, transparent 100%),

    radial-gradient(1px 1px at 29% 35%, rgba(255,255,255,0.80) 0%, transparent 100%),

    radial-gradient(1px 1px at 34% 8%,  rgba(255,255,255,0.65) 0%, transparent 100%),

    radial-gradient(1px 1px at 39% 22%, rgba(255,255,255,0.88) 0%, transparent 100%),

    radial-gradient(1px 1px at 44% 42%, rgba(255,255,255,0.72) 0%, transparent 100%),

    radial-gradient(1px 1px at 49% 15%, rgba(255,255,255,0.90) 0%, transparent 100%),

    radial-gradient(1px 1px at 54% 55%, rgba(255,255,255,0.78) 0%, transparent 100%),

    radial-gradient(1px 1px at 59% 30%, rgba(255,255,255,0.85) 0%, transparent 100%),

    radial-gradient(1px 1px at 64% 10%, rgba(255,255,255,0.68) 0%, transparent 100%),

    radial-gradient(1px 1px at 69% 48%, rgba(255,255,255,0.92) 0%, transparent 100%),

    radial-gradient(1px 1px at 74% 20%, rgba(255,255,255,0.75) 0%, transparent 100%),

    radial-gradient(1px 1px at 79% 62%, rgba(255,255,255,0.82) 0%, transparent 100%),

    radial-gradient(1px 1px at 84% 35%, rgba(255,255,255,0.70) 0%, transparent 100%),

    radial-gradient(1px 1px at 89% 8%,  rgba(255,255,255,0.88) 0%, transparent 100%),

    radial-gradient(1px 1px at 94% 45%, rgba(255,255,255,0.76) 0%, transparent 100%),

    radial-gradient(1px 1px at 97% 25%, rgba(255,255,255,0.90) 0%, transparent 100%),

    /* Küçük beyaz yıldızlar — 2. grup */

    radial-gradient(1px 1px at 6%  52%, rgba(255,255,255,0.72) 0%, transparent 100%),

    radial-gradient(1px 1px at 11% 68%, rgba(255,255,255,0.85) 0%, transparent 100%),

    radial-gradient(1px 1px at 16% 80%, rgba(255,255,255,0.65) 0%, transparent 100%),

    radial-gradient(1px 1px at 21% 92%, rgba(255,255,255,0.88) 0%, transparent 100%),

    radial-gradient(1px 1px at 26% 72%, rgba(255,255,255,0.78) 0%, transparent 100%),

    radial-gradient(1px 1px at 31% 58%, rgba(255,255,255,0.92) 0%, transparent 100%),

    radial-gradient(1px 1px at 36% 85%, rgba(255,255,255,0.70) 0%, transparent 100%),

    radial-gradient(1px 1px at 41% 65%, rgba(255,255,255,0.82) 0%, transparent 100%),

    radial-gradient(1px 1px at 46% 78%, rgba(255,255,255,0.75) 0%, transparent 100%),

    radial-gradient(1px 1px at 51% 90%, rgba(255,255,255,0.88) 0%, transparent 100%),

    radial-gradient(1px 1px at 56% 70%, rgba(255,255,255,0.68) 0%, transparent 100%),

    radial-gradient(1px 1px at 61% 82%, rgba(255,255,255,0.85) 0%, transparent 100%),

    radial-gradient(1px 1px at 66% 60%, rgba(255,255,255,0.72) 0%, transparent 100%),

    radial-gradient(1px 1px at 71% 95%, rgba(255,255,255,0.90) 0%, transparent 100%),

    radial-gradient(1px 1px at 76% 75%, rgba(255,255,255,0.78) 0%, transparent 100%),

    radial-gradient(1px 1px at 81% 88%, rgba(255,255,255,0.65) 0%, transparent 100%),

    radial-gradient(1px 1px at 86% 55%, rgba(255,255,255,0.85) 0%, transparent 100%),

    radial-gradient(1px 1px at 91% 78%, rgba(255,255,255,0.72) 0%, transparent 100%),

    radial-gradient(1px 1px at 96% 65%, rgba(255,255,255,0.88) 0%, transparent 100%),

    /* Orta parlak yıldızlar */

    radial-gradient(1.5px 1.5px at 7%  38%, rgba(200,235,255,0.95) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 17% 55%, rgba(200,235,255,0.88) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 27% 18%, rgba(200,235,255,0.92) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 37% 72%, rgba(200,235,255,0.85) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 47% 32%, rgba(200,235,255,0.95) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 57% 88%, rgba(200,235,255,0.88) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 67% 15%, rgba(200,235,255,0.92) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 77% 50%, rgba(200,235,255,0.85) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 87% 28%, rgba(200,235,255,0.95) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 93% 82%, rgba(200,235,255,0.88) 0%, transparent 100%),

    /* Büyük parlak yıldızlar */

    radial-gradient(2px 2px at 12% 25%, rgba(160,220,255,1.00) 0%, transparent 100%),

    radial-gradient(2px 2px at 33% 60%, rgba(160,220,255,0.95) 0%, transparent 100%),

    radial-gradient(2px 2px at 55% 20%, rgba(160,220,255,1.00) 0%, transparent 100%),

    radial-gradient(2px 2px at 72% 75%, rgba(160,220,255,0.95) 0%, transparent 100%),

    radial-gradient(2px 2px at 88% 42%, rgba(160,220,255,1.00) 0%, transparent 100%),

    /* Cyan tonlu yıldızlar */

    radial-gradient(1.5px 1.5px at 22% 45%, rgba(0,212,255,0.90) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 43% 10%, rgba(0,212,255,0.85) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 63% 65%, rgba(0,212,255,0.90) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 82% 30%, rgba(0,212,255,0.85) 0%, transparent 100%),

    /* Mor tonlu yıldızlar */

    radial-gradient(1.5px 1.5px at 15% 85%, rgba(170,68,255,0.85) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 48% 50%, rgba(170,68,255,0.80) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 75% 12%, rgba(170,68,255,0.88) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 92% 55%, rgba(170,68,255,0.82) 0%, transparent 100%),

    /* Sarı/turuncu yıldızlar (sıcak yıldızlar) */

    radial-gradient(1px 1px at 35% 40%, rgba(255,220,100,0.80) 0%, transparent 100%),

    radial-gradient(1px 1px at 58% 85%, rgba(255,200,80,0.75) 0%, transparent 100%),

    radial-gradient(1px 1px at 80% 60%, rgba(255,220,100,0.80) 0%, transparent 100%);

  opacity: 1;

  transition: none;

}

[data-theme="dark"] body::before,

:root:not([data-theme="light"]) body::before {

  opacity: 1;

}

[data-theme="light"] body::before {

  opacity: 0;

}

/* ============================================================

   2. NEBULA ARKA PLAN — Çok katmanlı, güçlü nebula efekti

============================================================ */

body::after {

  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:

    /* Sol üst — büyük mavi nebula */

    radial-gradient(ellipse 70% 50% at 10% 15%,

      rgba(0,80,220,0.18) 0%,

      rgba(0,60,180,0.10) 35%,

      transparent 65%),

    /* Sağ üst — mor nebula */

    radial-gradient(ellipse 55% 45% at 90% 20%,

      rgba(140,0,255,0.16) 0%,

      rgba(100,0,200,0.08) 40%,

      transparent 65%),

    /* Sol alt — cyan nebula */

    radial-gradient(ellipse 60% 40% at 5% 85%,

      rgba(0,180,255,0.14) 0%,

      rgba(0,140,220,0.07) 40%,

      transparent 65%),

    /* Sağ alt — pembe/mor nebula */

    radial-gradient(ellipse 50% 50% at 92% 80%,

      rgba(200,0,200,0.12) 0%,

      rgba(150,0,180,0.06) 40%,

      transparent 65%),

    /* Merkez — hafif mavi parıltı */

    radial-gradient(ellipse 80% 60% at 50% 50%,

      rgba(0,60,180,0.06) 0%,

      transparent 55%),

    /* Üst orta — aurora şeridi */

    radial-gradient(ellipse 100% 20% at 50% 0%,

      rgba(0,120,255,0.10) 0%,

      rgba(100,0,255,0.06) 50%,

      transparent 100%);

  opacity: 1;

  transition: none;

  animation: nebulaPulse 18s ease-in-out infinite;

}

[data-theme="dark"] body::after,

:root:not([data-theme="light"]) body::after {

  opacity: 1;

}

[data-theme="light"] body::after {

  opacity: 0.25;

}

@keyframes nebulaPulse {

  0%   { opacity: 1;    transform: scale(1)    rotate(0deg); }

  25%  { opacity: 0.90; transform: scale(1.01) rotate(0.3deg); }

  50%  { opacity: 0.80; transform: scale(1.02) rotate(0deg); }

  75%  { opacity: 0.90; transform: scale(1.01) rotate(-0.3deg); }

  100% { opacity: 1;    transform: scale(1)    rotate(0deg); }

}

/* ============================================================

   3. SHOOTING STAR ANÄ°MASYONU

============================================================ */

.space-shooting-star {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 0;

  overflow: hidden;

}

.space-shooting-star::before,

.space-shooting-star::after {

  content: '';

  position: absolute;

  width: 2px;

  height: 2px;

  background: white;

  border-radius: 50%;

  box-shadow: 0 0 6px 2px rgba(255,255,255,0.8);

  animation: shootingStar 8s linear infinite;

  opacity: 0;

}

.space-shooting-star::before {

  top: 15%;

  left: -5%;

  animation-delay: 2s;

  animation-duration: 6s;

}

.space-shooting-star::after {

  top: 35%;

  left: -5%;

  animation-delay: 5s;

  animation-duration: 9s;

}

@keyframes shootingStar {

  0%   { transform: translateX(0) translateY(0) rotate(25deg); opacity: 0; }

  5%   { opacity: 1; }

  15%  { box-shadow: -80px 0 20px rgba(255,255,255,0.6), -160px 0 10px rgba(0,212,255,0.3); }

  100% { transform: translateX(110vw) translateY(40vh) rotate(25deg); opacity: 0; }

}

/* ============================================================

   3b. MAIN CONTENT — Yıldız arka planını göster

============================================================ */

/* Dark tema — main-content transparent (yıldızlar görünsün) */

[data-theme="dark"] .main-content,

[data-theme="dark"] #main,

[data-theme="dark"] .chat-layout,

[data-theme="dark"] .app-container,

:root:not([data-theme="light"]) .main-content,

:root:not([data-theme="light"]) #main,

:root:not([data-theme="light"]) .chat-layout {

  background: transparent !important;

}

/* Light tema — main-content soft açık */

[data-theme="light"] .main-content,

[data-theme="light"] #main {

  background: transparent !important;

}

/* ============================================================

   4. TÜM İÇERİK z-index DÜZELTME

============================================================ */

.sidebar,

.main-content,

.chat-layout,

.topbar,

.mobile-header,

#sidebar,

#main,

.app-wrapper,

.app-container,

.layout-wrapper,

.chat-wrapper,

.page-wrapper {

  position: relative;

  z-index: 1;

}

/* FAB her zaman en önde */

#gx-fab {

  z-index: 999999 !important;

  isolation: auto !important;

}

/* ============================================================

   5. SİDEBAR — Güçlü uzay cam efekti

============================================================ */

[data-theme="dark"] .sidebar,

[data-theme="dark"] #sidebar,

:root:not([data-theme="light"]) .sidebar,

:root:not([data-theme="light"]) #sidebar {

  background: rgba(4, 8, 15, 0.94) !important;

  backdrop-filter: blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

  border-right: 1px solid rgba(0, 180, 255, 0.18) !important;

  box-shadow:

    4px 0 40px rgba(0, 10, 60, 0.70),

    inset -1px 0 0 rgba(0, 180, 255, 0.10) !important;

}

[data-theme="light"] .sidebar,

[data-theme="light"] #sidebar {

  background: rgba(232, 240, 252, 0.92) !important;

  border-right: 1px solid rgba(30, 80, 200, 0.15) !important;

  box-shadow: 4px 0 20px rgba(10, 40, 120, 0.10) !important;

}

/* Sidebar üst kenarlık parıltısı */

[data-theme="dark"] .sidebar-top,

:root:not([data-theme="light"]) .sidebar-top {

  border-bottom: 1px solid rgba(0, 180, 255, 0.12) !important;

}

/* Sidebar alt kenarlık parıltısı */

[data-theme="dark"] .sidebar-bottom,

:root:not([data-theme="light"]) .sidebar-bottom {

  border-top: 1px solid rgba(0, 180, 255, 0.12) !important;

  background: rgba(0, 5, 20, 0.50) !important;

}

/* Aktif sidebar öğesi — güçlü cyan parıltı */

[data-theme="dark"] .sidebar-nav-item.active,

[data-theme="dark"] .sidebar-conv-item.active,

[data-theme="dark"] .sb-conv-item.active,

:root:not([data-theme="light"]) .sidebar-nav-item.active,

:root:not([data-theme="light"]) .sidebar-conv-item.active,

:root:not([data-theme="light"]) .sb-conv-item.active {
#000000

  background: rgba(0, 150, 255, 0.16) !important;

  border-left: 2px solid rgba(0, 212, 255, 0.80) !important;

  box-shadow:

    inset 0 0 20px rgba(0, 212, 255, 0.08),

    inset 2px 0 8px rgba(0, 212, 255, 0.15) !important;

  color: #80d8ff !important;

}

/* Sidebar hover */

[data-theme="dark"] .sidebar-nav-item:hover,

[data-theme="dark"] .sidebar-conv-item:hover,

:root:not([data-theme="light"]) .sidebar-nav-item:hover,

:root:not([data-theme="light"]) .sidebar-conv-item:hover {

  background: rgba(0, 120, 255, 0.10) !important;

  color: #a0d8ff !important;

}

/* ============================================================

   6. TOPBAR — Güçlü uzay cam efekti

============================================================ */

[data-theme="dark"] .topbar,

[data-theme="dark"] .chat-topbar,

[data-theme="dark"] .top-bar,

[data-theme="dark"] #topbar,

:root:not([data-theme="light"]) .topbar,

:root:not([data-theme="light"]) .chat-topbar,

:root:not([data-theme="light"]) .top-bar,

:root:not([data-theme="light"]) #topbar {

  background: var(--bg);

  backdrop-filter: blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

}

[data-theme="light"] .topbar,

[data-theme="light"] .chat-topbar {

  background: rgba(240, 246, 255, 0.92) !important;

  border-bottom: 1px solid rgba(30, 80, 200, 0.12) !important;

}

/* ============================================================

   7. CHAT MESAJ ALANI

============================================================ */

.chat-messages,

.messages-container,

.chat-body,

#chat-messages,

.message-list {

  background: transparent !important;

}

/* ============================================================

   8. MESAJ BALONLARI — Güçlü uzay cam efekti

============================================================ */

/* AI mesajı */

[data-theme="dark"] .message.assistant,

[data-theme="dark"] .message-assistant,

[data-theme="dark"] .ai-message,

[data-theme="dark"] .bot-message,

[data-theme="dark"] [data-role="assistant"] .message-content,

:root:not([data-theme="light"]) .message.assistant,

:root:not([data-theme="light"]) .message-assistant,

:root:not([data-theme="light"]) .ai-message,

:root:not([data-theme="light"]) .bot-message {

}

/* Kullanıcı mesajı — daha belirgin */

[data-theme="dark"] .message.user,

[data-theme="dark"] .message-user,

[data-theme="dark"] .user-message,

[data-theme="dark"] [data-role="user"] .message-content,

:root:not([data-theme="light"]) .message.user,

:root:not([data-theme="light"]) .message-user,

:root:not([data-theme="light"]) .user-message {

}

[data-theme="light"] .message.assistant,

[data-theme="light"] .message-assistant {

  border: 0px solid rgba(30, 80, 200, 0.12) !important;

}

[data-theme="light"] .message.user,

[data-theme="light"] .message-user {

  background: rgba(220, 235, 255, 0.90) !important;

  border: 0px solid rgba(30, 80, 200, 0.20) !important;

}

/* ============================================================

   8b. INPUT CONTAINER — Belirgin dış çizgi

============================================================ */

/* Dark tema — cyan/mavi çizgi */

[data-theme="dark"] .input-container,

:root:not([data-theme="light"]) .input-container {

  border: 1.5px solid rgba(0, 180, 255, 0.35) !important;

  box-shadow:

    0 0 0 1px rgba(0, 180, 255, 0.08),

    0 4px 24px rgba(0, 20, 80, 0.40) !important;

}

[data-theme="dark"] .input-container:focus-within,

:root:not([data-theme="light"]) .input-container:focus-within {

  border-color: inherit !important;

  box-shadow: none !important;

}

/* Light tema — mavi çizgi */

[data-theme="light"] .input-container {

  border: 1.5px solid rgba(80, 140, 255, 0.40) !important;

  box-shadow:

    0 0 0 1px rgba(80, 140, 255, 0.08),

    0 4px 20px rgba(40, 80, 200, 0.10) !important;

}

[data-theme="light"] .input-container:focus-within {

  border-color: inherit !important;

  box-shadow: none !important;

}

/* ============================================================

   9. INPUT ALANI — Cosmic glow efekti

============================================================ */

[data-theme="dark"] .chat-input-wrapper,

[data-theme="dark"] .input-area,

[data-theme="dark"] .chat-input-area,

[data-theme="dark"] .prompt-wrapper,

[data-theme="dark"] #chat-input-wrapper,

[data-theme="dark"] .input-container,

:root:not([data-theme="light"]) .chat-input-wrapper,

:root:not([data-theme="light"]) .input-area,

:root:not([data-theme="light"]) .chat-input-area,

:root:not([data-theme="light"]) .prompt-wrapper,

:root:not([data-theme="light"]) #chat-input-wrapper,

:root:not([data-theme="light"]) .input-container {

  background: rgba(4, 10, 24, 0.92) !important;

  backdrop-filter: blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

  border: 1px solid rgba(0, 180, 255, 0.25) !important;

  border-radius: 20px !important;

  box-shadow:

    0 4px 40px rgba(0, 20, 100, 0.60),

    0 0 0 1px rgba(0, 180, 255, 0.08),

    0 0 30px rgba(0, 120, 255, 0.15),

    inset 0 1px 0 rgba(0, 212, 255, 0.10) !important;

  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;

}

[data-theme="dark"] .chat-input-wrapper:focus-within,

[data-theme="dark"] .input-area:focus-within,

[data-theme="dark"] .chat-input-area:focus-within,

:root:not([data-theme="light"]) .chat-input-wrapper:focus-within,

:root:not([data-theme="light"]) .input-area:focus-within,

:root:not([data-theme="light"]) .chat-input-area:focus-within {

  border-color: inherit !important;

  box-shadow: none !important;

}

/* Input textarea */

.chat-input,

#chat-input,

textarea.prompt-input,

.message-input {

  background: transparent !important;

  color: var(--text-primary) !important;

  caret-color: #00d4ff !important;

}

/* ============================================================

   10. BUTONLAR — Parlak uzay gradyanı

============================================================ */

/* Gönder butonu */

[data-theme="dark"] .send-btn,

[data-theme="dark"] #send-btn,

[data-theme="dark"] .submit-btn,

[data-theme="dark"] .chat-send-btn,

:root:not([data-theme="light"]) .send-btn,

:root:not([data-theme="light"]) #send-btn,

:root:not([data-theme="light"]) .submit-btn,

:root:not([data-theme="light"]) .chat-send-btn {

  background: linear-gradient(135deg, #0055ff 0%, #8800ff 100%) !important;

  border: none !important;

  box-shadow:

    0 2px 16px rgba(0, 85, 255, 0.55),

    0 0 30px rgba(136, 0, 255, 0.25) !important;

  transition: box-shadow 0.25s ease, transform 0.2s ease !important;

}

[data-theme="dark"] .send-btn:hover,

[data-theme="dark"] #send-btn:hover,

[data-theme="dark"] .chat-send-btn:hover,

:root:not([data-theme="light"]) .send-btn:hover,

:root:not([data-theme="light"]) .chat-send-btn:hover {

  box-shadow:

    0 4px 24px rgba(0, 85, 255, 0.70),

    0 0 50px rgba(136, 0, 255, 0.40),

    0 0 80px rgba(0, 212, 255, 0.20) !important;

  transform: translateY(-2px) scale(1.02) !important;

}

/* Primary butonlar */

[data-theme="dark"] .btn-primary,

[data-theme="dark"] .button-primary,

[data-theme="dark"] button.primary,

:root:not([data-theme="light"]) .btn-primary,

:root:not([data-theme="light"]) .button-primary,

:root:not([data-theme="light"]) button.primary {

  background: linear-gradient(135deg, #0055ff 0%, #8800ff 100%) !important;

  border: none !important;

  color: #ffffff !important;

  box-shadow: 0 2px 16px rgba(0, 85, 255, 0.45) !important;

}

[data-theme="dark"] .btn-primary:hover,

:root:not([data-theme="light"]) .btn-primary:hover {

  box-shadow:

    0 4px 24px rgba(0, 85, 255, 0.60),

    0 0 40px rgba(136, 0, 255, 0.30) !important;

  transform: translateY(-1px) !important;

}

/* ============================================================

   11. KARTLAR & PANELLER — Uzay cam efekti

============================================================ */

[data-theme="dark"] .card,

[data-theme="dark"] .panel,

[data-theme="dark"] .gx-card,

[data-theme="dark"] .feature-card,

[data-theme="dark"] .plan-card,

[data-theme="dark"] .info-card,

:root:not([data-theme="light"]) .card,

:root:not([data-theme="light"]) .panel,

:root:not([data-theme="light"]) .gx-card,

:root:not([data-theme="light"]) .feature-card,

:root:not([data-theme="light"]) .plan-card {

  background: rgba(6, 12, 28, 0.85) !important;

  backdrop-filter: blur(16px) !important;

  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid rgba(0, 160, 255, 0.14) !important;

  border-radius: 16px !important;

  box-shadow:

    0 4px 30px rgba(0, 10, 60, 0.55),

    inset 0 1px 0 rgba(0, 180, 255, 0.08) !important;

  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;

}

[data-theme="dark"] .card:hover,

[data-theme="dark"] .gx-card:hover,

[data-theme="dark"] .feature-card:hover,

[data-theme="dark"] .plan-card:hover,

:root:not([data-theme="light"]) .card:hover,

:root:not([data-theme="light"]) .gx-card:hover,

:root:not([data-theme="light"]) .feature-card:hover {

  border-color: rgba(0, 212, 255, 0.30) !important;

  box-shadow:

    0 8px 50px rgba(0, 10, 80, 0.70),

    0 0 30px rgba(0, 120, 255, 0.20),

    inset 0 1px 0 rgba(0, 212, 255, 0.12) !important;

  transform: translateY(-3px) !important;

}

/* ============================================================

   12. MODAL — Derin uzay cam efekti

============================================================ */

[data-theme="dark"] .modal,

[data-theme="dark"] .modal-box,

[data-theme="dark"] .modal-content,

[data-theme="dark"] .dialog,

[data-theme="dark"] .gx-modal,

:root:not([data-theme="light"]) .modal,

:root:not([data-theme="light"]) .modal-box,

:root:not([data-theme="light"]) .modal-content {

  background: rgba(4, 8, 20, 0.97) !important;

  backdrop-filter: blur(32px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;

  border: 1px solid rgba(0, 180, 255, 0.22) !important;

  border-radius: 20px !important;

  box-shadow:

    0 24px 80px rgba(0, 5, 40, 0.90),

    0 0 60px rgba(0, 100, 255, 0.20),

    0 0 120px rgba(100, 0, 255, 0.12),

    inset 0 1px 0 rgba(0, 212, 255, 0.12) !important;

}

[data-theme="dark"] .modal-overlay,

[data-theme="dark"] .modal-backdrop,

[data-theme="dark"] .overlay,

:root:not([data-theme="light"]) .modal-overlay,

:root:not([data-theme="light"]) .modal-backdrop,

:root:not([data-theme="light"]) .overlay {

  background: rgba(0, 2, 15, 0.82) !important;

  backdrop-filter: blur(6px) !important;

  -webkit-backdrop-filter: blur(6px) !important;

}

/* ============================================================

   13. DROPDOWN — Uzay cam efekti

============================================================ */

[data-theme="dark"] .dropdown,

[data-theme="dark"] .dropdown-menu,

[data-theme="dark"] .popup-menu,

[data-theme="dark"] .context-menu,

[data-theme="dark"] .gx-dropdown,

:root:not([data-theme="light"]) .dropdown,

:root:not([data-theme="light"]) .dropdown-menu,

:root:not([data-theme="light"]) .popup-menu {

  background: rgba(4, 8, 20, 0.97) !important;

  backdrop-filter: blur(24px) !important;

  -webkit-backdrop-filter: blur(24px) !important;

  border: 1px solid rgba(0, 180, 255, 0.20) !important;

  border-radius: 14px !important;

  box-shadow:

    0 12px 50px rgba(0, 5, 40, 0.80),

    0 0 30px rgba(0, 100, 255, 0.15) !important;

}

/* ============================================================

   14. KOD BLOKLARI — Uzay terminali

============================================================ */

[data-theme="dark"] pre,

[data-theme="dark"] code,

[data-theme="dark"] .code-block,

[data-theme="dark"] .hljs,

:root:not([data-theme="light"]) pre,

:root:not([data-theme="light"]) code,

:root:not([data-theme="light"]) .code-block {

  background: rgba(2, 6, 16, 0.95) !important;

  border: 1px solid rgba(0, 160, 255, 0.16) !important;

  border-radius: 12px !important;

}

[data-theme="dark"] .code-header,

[data-theme="dark"] .code-block-header,

:root:not([data-theme="light"]) .code-header,

:root:not([data-theme="light"]) .code-block-header {

  background: rgba(4, 10, 24, 0.98) !important;

  border-bottom: 1px solid rgba(0, 160, 255, 0.14) !important;

}

/* ============================================================

   15. FOCUS DURUMU — Cyan parıltı

============================================================ */

[data-theme="dark"] input:focus,

[data-theme="dark"] textarea:focus,

[data-theme="dark"] select:focus,

[data-theme="dark"] .chat-input:focus,

[data-theme="dark"] #chat-input:focus,

:root:not([data-theme="light"]) input:focus,

:root:not([data-theme="light"]) textarea:focus,

:root:not([data-theme="light"]) select:focus {

  border-color: rgba(0, 212, 255, 0.55) !important;

  box-shadow:

    0 0 0 3px rgba(0, 212, 255, 0.18),

    0 0 25px rgba(0, 180, 255, 0.15) !important;

  outline: none !important;

}

/* ============================================================

   16. LOGO — Parlak uzay shimmer

============================================================ */

[data-theme="dark"] .sidebar-logo-text,

[data-theme="dark"] .logo-text,

[data-theme="dark"] .brand-name,

:root:not([data-theme="light"]) .sidebar-logo-text,

:root:not([data-theme="light"]) .logo-text,

:root:not([data-theme="light"]) .brand-name {

  background: linear-gradient(135deg,

    #80d8ff 0%,

    #00d4ff 25%,

    #aa44ff 50%,

    #00d4ff 75%,

    #80d8ff 100%) !important;

  background-size: 300% auto !important;

  -webkit-background-clip: text !important;

  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  animation: logoShimmer 5s linear infinite !important;

  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.40)) !important;

}

@keyframes logoShimmer {

  0%   { background-position: 0% center; }

  100% { background-position: 300% center; }

}

/* ============================================================

   17. SCROLLBAR — Uzay gradyanı

============================================================ */

[data-theme="dark"] ::-webkit-scrollbar,

:root:not([data-theme="light"]) ::-webkit-scrollbar {

  width: 5px;

  height: 5px;

}

[data-theme="dark"] ::-webkit-scrollbar-track,

:root:not([data-theme="light"]) ::-webkit-scrollbar-track {

  background: transparent;

}

[data-theme="dark"] ::-webkit-scrollbar-thumb,

:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg,

    rgba(0, 150, 255, 0.50) 0%,

    rgba(150, 0, 255, 0.50) 100%);

  border-radius: 3px;

}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,

:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(180deg,

    rgba(0, 212, 255, 0.80) 0%,

    rgba(170, 68, 255, 0.80) 100%);

}

/* ============================================================

   18. PROGRESS BAR — Uzay gradyanı

============================================================ */

[data-theme="dark"] .progress-bar,

[data-theme="dark"] .usage-fill,

[data-theme="dark"] .sb-usage-fill,

[data-theme="dark"] .sidebar-usage-fill,

:root:not([data-theme="light"]) .progress-bar,

:root:not([data-theme="light"]) .usage-fill,

:root:not([data-theme="light"]) .sb-usage-fill,

:root:not([data-theme="light"]) .sidebar-usage-fill {

  background: linear-gradient(90deg,

    #0055ff 0%,

    #00d4ff 40%,

    #aa44ff 80%,

    #0055ff 100%) !important;

  background-size: 200% auto !important;

  animation: progressShimmer 3s linear infinite !important;

  box-shadow: 0 0 12px rgba(0, 212, 255, 0.55) !important;

}

@keyframes progressShimmer {

  0%   { background-position: 0% center; }

  100% { background-position: 200% center; }

}

/* ============================================================

   19. BADGE & ETİKETLER — Uzay renkleri

============================================================ */

[data-theme="dark"] .badge,

[data-theme="dark"] .tag,

[data-theme="dark"] .chip,

:root:not([data-theme="light"]) .badge,

:root:not([data-theme="light"]) .tag,

:root:not([data-theme="light"]) .chip {

  background: rgba(0, 85, 255, 0.20) !important;

  color: #80d8ff !important;

  border: 1px solid rgba(0, 180, 255, 0.30) !important;

}

/* ============================================================

   20. AURORA ŞERIT — Üst kısımda hafif ışık huzmeleri

============================================================ */

[data-theme="dark"] body,

:root:not([data-theme="light"]) body {

  background-image:

    linear-gradient(

      180deg,

      rgba(0, 80, 200, 0.08) 0%,

      rgba(100, 0, 200, 0.05) 8%,

      transparent 20%

    ) !important;

}

/* ============================================================

   21. YILDIZ TITREME ANÄ°MASYONLARI

============================================================ */

@keyframes starTwinkle {

  0%, 100% { opacity: 1;   transform: scale(1); }

  50%       { opacity: 0.3; transform: scale(0.7); }

}

@keyframes starTwinkleSlow {

  0%, 100% { opacity: 0.9; }

  50%       { opacity: 0.1; }

}

@keyframes starPulse {

  0%, 100% { box-shadow: 0 0 4px 1px rgba(0,212,255,0.6); }

  50%       { box-shadow: 0 0 8px 3px rgba(0,212,255,0.9); }

}

/* ============================================================

   22. COSMIC GLOW — Hover ve aktif elementler

============================================================ */

/* Sidebar icon butonlar */

[data-theme="dark"] .sidebar-icon-btn:hover,

[data-theme="dark"] .sb-new-chat-btn:hover,

:root:not([data-theme="light"]) .sidebar-icon-btn:hover,

:root:not([data-theme="light"]) .sb-new-chat-btn:hover {

  background: rgba(0, 120, 255, 0.15) !important;

  color: #00d4ff !important;

  box-shadow: 0 0 12px rgba(0, 180, 255, 0.25) !important;

}

/* Yeni sohbet butonu */

[data-theme="dark"] .sb-new-chat-full:hover,

:root:not([data-theme="light"]) .sb-new-chat-full:hover {

  background: rgba(0, 80, 200, 0.18) !important;

  border-color: rgba(0, 212, 255, 0.35) !important;

  color: #80d8ff !important;

  box-shadow: 0 0 20px rgba(0, 150, 255, 0.20) !important;

}

/* ============================================================

   23. FORM ELEMENTLERİ — Uzay stili

============================================================ */

[data-theme="dark"] input[type="text"],

[data-theme="dark"] input[type="email"],

[data-theme="dark"] input[type="password"],

[data-theme="dark"] input[type="search"],

[data-theme="dark"] input[type="number"],

[data-theme="dark"] select,

[data-theme="dark"] textarea,

:root:not([data-theme="light"]) input[type="text"],

:root:not([data-theme="light"]) input[type="email"],

:root:not([data-theme="light"]) input[type="password"],

:root:not([data-theme="light"]) input[type="search"],

:root:not([data-theme="light"]) input[type="number"],

:root:not([data-theme="light"]) select,

:root:not([data-theme="light"]) textarea {

  background: rgba(4, 10, 24, 0) !important;

  border: 1px solid rgba(0, 160, 255, 0.20) !important;

  color: #dff0ff !important;

  border-radius: 10px !important;

}

[data-theme="dark"] input[type="text"]:focus,

[data-theme="dark"] input[type="email"]:focus,

[data-theme="dark"] input[type="password"]:focus,

[data-theme="dark"] select:focus,

[data-theme="dark"] textarea:focus,

:root:not([data-theme="light"]) input[type="text"]:focus,

:root:not([data-theme="light"]) input[type="email"]:focus,

:root:not([data-theme="light"]) input[type="password"]:focus,

:root:not([data-theme="light"]) select:focus,

:root:not([data-theme="light"]) textarea:focus {

  outline: none !important;

}

/* ============================================================

   24. TABLO — Uzay stili

============================================================ */

[data-theme="dark"] table,

:root:not([data-theme="light"]) table {

  border-collapse: collapse;

}

[data-theme="dark"] th,

:root:not([data-theme="light"]) th {

  background: rgba(0, 40, 120, 0.50) !important;

  color: #80d8ff !important;

  border-bottom: 1px solid rgba(0, 180, 255, 0.25) !important;

}

[data-theme="dark"] td,

:root:not([data-theme="light"]) td {

  border-bottom: 1px solid rgba(0, 120, 255, 0.10) !important;

}

[data-theme="dark"] tr:hover td,

:root:not([data-theme="light"]) tr:hover td {

  background: rgba(0, 80, 200, 0.10) !important;

}

/* ============================================================

   25. HAREKET AZALTMA

============================================================ */

@media (prefers-reduced-motion: reduce) {

  body::before,

  body::after,

  .space-shooting-star::before,

  .space-shooting-star::after {

    animation: none !important;

    transition: none !important;

  }

}

/* ── Dark temada body background şeffaf → yıldızlar hep görünür ── */

[data-theme="dark"] html,

:root:not([data-theme="light"]) html {

  background-color: #000000 !important;

}

[data-theme="dark"] body,

:root:not([data-theme="light"]) body {

  background-color: transparent !important;

}

/* ============================================================

   LIGHT TEMA — Gündüz AI / Aurora Teması

   Açık mavi gökyüzü + soft aurora + pastel ai gradyanlar

============================================================ */

/* Light temada html/body — açık gökyüzü */

[data-theme="light"] html {

  background: linear-gradient(160deg, #e8f4ff 0%, #f0f0ff 35%, #fff0ff 70%, #f0f8ff 100%) !important;

  background-color: #ffffff !important;

}

[data-theme="light"] body {

  background-color: transparent !important;

}

/* Katman 1 — Light tema özel yıldızlar (dark body::before'u sıfırla) */

[data-theme="light"] body::before {

  background-image: none !important;

  opacity: 0 !important;

}

/* Light tema pastel yıldız katmanı — ayrı pseudo kullanılamaz, html::before kullan */

[data-theme="light"] html::before {

  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background-image:

    radial-gradient(1px 1px at 5%   8%,  rgba(80,140,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 15%  22%, rgba(60,120,255,0.35) 0%, transparent 100%),

    radial-gradient(1px 1px at 25%  5%,  rgba(100,160,255,0.40) 0%, transparent 100%),

    radial-gradient(1px 1px at 35%  38%, rgba(70,130,255,0.35) 0%, transparent 100%),

    radial-gradient(1px 1px at 45%  15%, rgba(90,150,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 55%  52%, rgba(60,120,255,0.38) 0%, transparent 100%),

    radial-gradient(1px 1px at 65%  28%, rgba(80,140,255,0.42) 0%, transparent 100%),

    radial-gradient(1px 1px at 75%  68%, rgba(70,130,255,0.36) 0%, transparent 100%),

    radial-gradient(1px 1px at 85%  18%, rgba(90,150,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 95%  45%, rgba(60,120,255,0.38) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 20%  60%, rgba(0,180,255,0.38) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 50%  80%, rgba(140,80,255,0.32) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 80%  42%, rgba(0,160,255,0.38) 0%, transparent 100%);

  opacity: 1;

}

/* Light tema aurora — body::after sıfırla + yeniden tanımla */

[data-theme="light"] body::before {

  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background-image:

    /* Soluk mavi pastel yıldızlar */

    radial-gradient(1px 1px at 5%   8%,  rgba(80,140,255,0.55) 0%, transparent 100%),

    radial-gradient(1px 1px at 12%  22%, rgba(60,120,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 20%  5%,  rgba(100,160,255,0.50) 0%, transparent 100%),

    radial-gradient(1px 1px at 28%  35%, rgba(70,130,255,0.40) 0%, transparent 100%),

    radial-gradient(1px 1px at 36%  15%, rgba(90,150,255,0.55) 0%, transparent 100%),

    radial-gradient(1px 1px at 44%  48%, rgba(60,120,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 52%  10%, rgba(80,140,255,0.50) 0%, transparent 100%),

    radial-gradient(1px 1px at 60%  55%, rgba(70,130,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 68%  25%, rgba(90,150,255,0.55) 0%, transparent 100%),

    radial-gradient(1px 1px at 76%  65%, rgba(60,120,255,0.40) 0%, transparent 100%),

    radial-gradient(1px 1px at 84%  18%, rgba(80,140,255,0.50) 0%, transparent 100%),

    radial-gradient(1px 1px at 92%  42%, rgba(70,130,255,0.45) 0%, transparent 100%),

    radial-gradient(1px 1px at 97%  75%, rgba(90,150,255,0.55) 0%, transparent 100%),

    /* Mor pastel yıldızlar */

    radial-gradient(1px 1px at 9%   60%, rgba(140,80,255,0.40) 0%, transparent 100%),

    radial-gradient(1px 1px at 25%  78%, rgba(120,60,255,0.35) 0%, transparent 100%),

    radial-gradient(1px 1px at 48%  88%, rgba(140,80,255,0.40) 0%, transparent 100%),

    radial-gradient(1px 1px at 65%  72%, rgba(120,60,255,0.35) 0%, transparent 100%),

    radial-gradient(1px 1px at 82%  90%, rgba(140,80,255,0.40) 0%, transparent 100%),

    /* Cyan pastel yıldızlar */

    radial-gradient(1.5px 1.5px at 15%  45%, rgba(0,180,255,0.45) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 38%  68%, rgba(0,160,255,0.40) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 58%  30%, rgba(0,180,255,0.45) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 78%  52%, rgba(0,160,255,0.40) 0%, transparent 100%),

    radial-gradient(1.5px 1.5px at 94%  20%, rgba(0,180,255,0.45) 0%, transparent 100%);

  opacity: 1;

  transition: none;

}

/* Katman 2 — Soft aurora gradient */

[data-theme="light"] body::after {

  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:

    /* Sol üst — soft mavi aurora */

    radial-gradient(ellipse 70% 45% at 8% 12%,

      rgba(100,160,255,0.18) 0%,

      rgba(80,130,255,0.08) 40%,

      transparent 70%),

    /* Sağ üst — soft mor aurora */

    radial-gradient(ellipse 55% 40% at 92% 18%,

      rgba(160,80,255,0.14) 0%,

      rgba(130,60,220,0.06) 45%,

      transparent 70%),

    /* Sol alt — cyan aurora */

    radial-gradient(ellipse 55% 35% at 5% 90%,

      rgba(0,200,255,0.12) 0%,

      rgba(0,160,255,0.05) 45%,

      transparent 70%),

    /* Sağ alt — pembe aurora */

    radial-gradient(ellipse 50% 45% at 90% 85%,

      rgba(220,100,255,0.10) 0%,

      rgba(180,60,220,0.04) 45%,

      transparent 70%),

    /* Merkez — hafif AI mavi parıltı */

    radial-gradient(ellipse 90% 60% at 50% 50%,

      rgba(60,120,255,0.05) 0%,

      transparent 60%),

    /* Üst — aurora şeridi */

    radial-gradient(ellipse 100% 18% at 50% 0%,

      rgba(80,160,255,0.10) 0%,

      rgba(160,80,255,0.05) 50%,

      transparent 100%);

  opacity: 1;

  transition: none;

  animation: lightAuroraPulse 20s ease-in-out infinite;

}

@keyframes lightAuroraPulse {

  0%   { opacity: 1;    transform: scale(1); }

  30%  { opacity: 0.85; transform: scale(1.01); }

  60%  { opacity: 0.92; transform: scale(1.005); }

  100% { opacity: 1;    transform: scale(1); }

}

/* Light tema — Sidebar */

[data-theme="light"] .sidebar,

[data-theme="light"] #sidebar {

  background: var(--glass-bg) !important;

  backdrop-filter: blur(20px) saturate(160%) !important;

  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;

  border-right: 1px solid var(--sidebar-border) !important;

  box-shadow: var(--shadow-sm) !important;

}

/* Light tema — Topbar */

[data-theme="light"] .topbar,

[data-theme="light"] .chat-topbar,

[data-theme="light"] .inner-topbar,

[data-theme="light"] .page-topbar {

  background: var(--glass-bg) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border-bottom: 1px solid var(--border-subtle) !important;

  box-shadow: var(--shadow-sm) !important;

}

/* Light tema — Input alanı */

[data-theme="light"] .chat-input-wrapper,

[data-theme="light"] .input-area,

[data-theme="light"] .chat-input-area,

[data-theme="light"] .gx-input-wrap,

[data-theme="light"] .chat-form,

[data-theme="light"] .prompt-wrapper {

  background: var(--bg-input) !important;

  border: 1px solid var(--border-default) !important;

  border-radius: 20px !important;

  box-shadow: var(--shadow-md) !important;

}

[data-theme="light"] .chat-input-wrapper:focus-within,

[data-theme="light"] .chat-input-area:focus-within {

  border-color: inherit !important;

  box-shadow: none !important;

}

/* Light tema — Mesaj balonları */

[data-theme="light"] .message.assistant,

[data-theme="light"] .message-assistant {

}

[data-theme="light"] .message.user,

[data-theme="light"] .message-user {

  background: #ddeeff00 !important;

}

/* Light tema — Kartlar */

[data-theme="light"] .card,

[data-theme="light"] .gx-card,

[data-theme="light"] .panel {

  background: var(--bg-elevated) !important;

  border: 1px solid var(--border-subtle) !important;

  box-shadow: var(--shadow-sm) !important;

}

/* Light tema — html arka plan */

[data-theme="light"] html {

  background: linear-gradient(160deg, #e8f4ff 0%, #f0f0ff 35%, #fff0ff 70%, #f0f8ff 100%) !important;

}

/* ============================================================

   EK DÃœZELTMELER

============================================================ */

/* mpc-locked: yüksek specificity ile hover'ı engelle */

button.mpc-item.mpc-locked,

.mpc-item.mpc-locked {

  opacity: .45 !important;

  cursor: not-allowed !important;

  pointer-events: none;

}

/* Mobilde tb-brand-name göster (kullanıcı adı) */

@media (max-width: 768px) {

  .tb-brand-name {

    display: inline !important;

    max-width: 120px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .tb-country-badge {

    display: none !important;

  }

}

/* model-popup mobilde taşma önleme */

.model-popup {

  max-height: 70vh;

  overflow-y: auto;

}

@media (max-width: 768px) {

  .model-popup {

    position: fixed !important;

    inset: auto -100px 64px auto !important;

    left: auto !important;

    right: -100px !important;

    bottom: 64px !important;

    top: auto !important;

    max-width: min(300px, calc(100vw - 16px)) !important;

    width: 280px !important;

    border-radius: 16px !important;

    max-height: 60vh;

    overflow-y: auto;

    z-index: 9999 !important;

  }

}

/* Dark temada .page-main transparent */

[data-theme="dark"] .page-main,

[data-theme="dark"] .profile-main,

[data-theme="dark"] .pricing-main,

:root:not([data-theme="light"]) .page-main,

:root:not([data-theme="light"]) .profile-main {

  background: transparent !important;

}

/* Light temada .page-main soft */

[data-theme="light"] .page-main,

[data-theme="light"] .profile-main,

[data-theme="light"] .pricing-main {

  background: transparent !important;

}

/* Dark tema — topbar renk token düzeltme */

[data-theme="dark"] .tb-brand-name,

:root:not([data-theme="light"]) .tb-brand-name {

  color: rgba(255, 255, 255, 0.92) !important;

}

[data-theme="light"] .tb-brand-name {

  color: #1a1a2e !important;

}