/* ==========================================================================
   SmrAI Universal Theme Engine & Dropdown Bridge
   Supports Cyber Midnight Dark (Default) & Radiant Studio Light Mode
   Universal coverage across all 27 SmrAI Suite Pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL TRANSITIONS
   -------------------------------------------------------------------------- */
html,
body,
header,
header nav,
.nav-dropdown,
.glass-card,
.neural-preview-card,
#mobile-drawer,
#theme-toggle {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.cyber-glass-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  will-change: transform, border-color, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Anti-Jitter Testimonial Review Cards: Zero Vibration on Hover */
.testimonial-card,
.cyber-glass-card.testimonial-card {
  transform: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}
.testimonial-card:hover,
.cyber-glass-card.testimonial-card:hover {
  transform: none !important;
}

/* Dropdown Hover Bridge: Fixes the gap between navbar button and dropdown menu */
header nav .relative.group {
  position: relative;
}

header nav .relative.group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
  pointer-events: auto;
}

.nav-dropdown {
  pointer-events: auto;
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -12px;
  right: -12px;
  height: 24px;
  background: transparent;
  pointer-events: auto;
}

/* ==========================================================================
   1. CYBER MIDNIGHT DARK MODE (.dark on <html> - Default)
   ========================================================================== */
html.dark,
html.dark body {
  background-color: #050814 !important;
  color: #f1f5f9 !important;
}

html.dark ::-webkit-scrollbar-track {
  background: #050814;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* Theme toggle button styling in Dark Mode */
html.dark #theme-toggle {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #f59e0b !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2), inset 0 0 10px rgba(56, 189, 248, 0.1) !important;
}

html.dark #theme-toggle:hover {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
}

/* High contrast and clarity in Dark Mode */
html.dark .text-slate-300 {
  color: #e2e8f0 !important;
}

html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark .cyber-glass,
html.dark .cyber-glass-glow {
  background: rgba(11, 19, 43, 0.85) !important;
  border-color: rgba(0, 242, 254, 0.25) !important;
}

html.dark .cyber-glass .text-slate-300,
html.dark .cyber-glass-glow .text-slate-300,
html.dark .cyber-glass label span,
html.dark .cyber-glass-glow label span {
  color: #e2e8f0 !important;
}

html.dark .cyber-glass label:hover span,
html.dark .cyber-glass-glow label:hover span {
  color: #ffffff !important;
}

/* ==========================================================================
   2. RADIANT STUDIO LIGHT MODE (.light on <html>)
   ========================================================================== */

/* --- 2.1 Body & Core Backgrounds --- */
html.light,
html.light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light ::-webkit-scrollbar-track {
  background: #f1f5f9;
}

html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

html.light ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Background Ambient Orbs and Laser Grids in Light Mode */
html.light .cyber-grid,
html.light .cyber-grid-bg {
  background-image: 
    linear-gradient(to right, rgba(14, 165, 233, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 165, 233, 0.05) 1px, transparent 1px) !important;
  opacity: 0.8 !important;
}

html.light [class*="bg-[radial-gradient(#1e293b"],
html.light [class*="bg-[radial-gradient(#00f2fe"] {
  background: radial-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  opacity: 0.6 !important;
}

/* Soften dark background blur glows */
html.light [class*="blur-[120px]"],
html.light [class*="blur-[140px]"],
html.light [class*="blur-[150px]"],
html.light [class*="blur-[160px]"],
html.light [class*="blur-3xl"] {
  opacity: 0.15 !important;
}

/* Light Mode Theme Toggle Button */
html.light #theme-toggle {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

html.light #theme-toggle:hover {
  background-color: #f8fafc !important;
  border-color: #818cf8 !important;
  color: #4338ca !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25) !important;
}

/* --- 2.2 Header & Universal Navigation --- */
html.light header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
}

html.light header nav {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.light header nav button,
html.light header nav a {
  color: #334155 !important;
}

html.light header nav a:hover,
html.light header nav button:hover {
  color: #0284c7 !important;
  background-color: rgba(14, 165, 233, 0.12) !important;
}

html.light .nav-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

html.light .nav-dropdown a {
  color: #334155 !important;
}

html.light .nav-dropdown a:hover {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
}

/* Universal Language Icon Button */
.header-lang-btn {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light .header-lang-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

html.light .header-lang-btn:hover {
  background-color: #f0f9ff !important;
  border-color: #38bdf8 !important;
  color: #0369a1 !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
}

html.light .header-lang-btn .material-symbols-outlined {
  color: #0284c7 !important;
}

html.light #mobile-menu-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light .pro-badge-btn {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
  box-shadow: none !important;
}

html.light .header-signin-link {
  color: #334155 !important;
}

html.light .header-signin-link:hover {
  color: #0284c7 !important;
}

html.light .header-version-badge {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

html.light #mobile-drawer {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #e2e8f0 !important;
}

html.light #mobile-drawer a {
  color: #334155 !important;
}

html.light #mobile-drawer a:hover {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
}

/* --- 2.3 Stitch Design System Tokens (15 Pages) --- */
html.light .bg-surface,
html.light main.bg-surface,
html.light body.bg-surface {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .bg-surface-dim {
  background-color: #f1f5f9 !important;
}

html.light .bg-surface-bright {
  background-color: #ffffff !important;
}

html.light .bg-surface-container-lowest {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-surface-container-low,
html.light .bg-surface-container,
html.light .bg-surface-container-high,
html.light .bg-surface-container-highest {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
}

html.light .text-on-surface {
  color: #0f172a !important;
}

html.light .text-on-surface-variant {
  color: #475569 !important;
}

html.light .text-primary {
  color: #0284c7 !important;
}

html.light .text-secondary {
  color: #0369a1 !important;
}

html.light .border-outline,
html.light .border-outline-variant {
  border-color: #e2e8f0 !important;
}

/* --- 2.4 Wildcard Studio Cards & Workbench Containers (12 Tool Pages) --- */
/* Matches any element with arbitrary hex bg (#0... or #1...) or dark slate, with or without opacity modifiers */
html.light [class*="bg-[#0e1726]"],
html.light [class*="bg-[#0b132b]"],
html.light [class*="bg-[#0b112c]"],
html.light [class*="bg-[#050814]"],
html.light [class*="bg-[#080c16]"],
html.light [class*="bg-[#080e1a]"],
html.light [class*="bg-[#080d1d]"],
html.light [class*="bg-[#080d22]"],
html.light [class*="bg-[#050811]"],
html.light [class*="bg-[#050914]"],
html.light [class*="bg-[#060a1a]"],
html.light [class*="bg-slate-900"],
html.light [class*="bg-slate-950"],
html.light .glass-card,
html.light .cyber-glass-card,
html.light .cyber-glass,
html.light .cyber-glass-glow,
html.light .neural-preview-card {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
}

/* Light Mode Card Controls, Toggles & Text */
html.light .cyber-glass .text-slate-300,
html.light .cyber-glass-glow .text-slate-300,
html.light .cyber-glass .text-slate-200,
html.light .cyber-glass-glow .text-slate-200,
html.light .cyber-glass span:not([class*="text-neon-"]):not(.material-symbols-outlined),
html.light .cyber-glass-glow span:not([class*="text-neon-"]):not(.material-symbols-outlined),
html.light .cyber-glass label,
html.light .cyber-glass-glow label {
  color: #1e293b !important;
}

html.light .cyber-glass .text-neon-cyan,
html.light .cyber-glass-glow .text-neon-cyan,
html.light .cyber-glass .text-neon-sky,
html.light .cyber-glass-glow .text-neon-sky {
  color: #0284c7 !important;
}

html.light .cyber-glass .bg-slate-800,
html.light .cyber-glass-glow .bg-slate-800 {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

html.light .cyber-glass .bg-slate-400,
html.light .cyber-glass-glow .bg-slate-400 {
  background-color: #94a3b8 !important;
}

html.light .cyber-glass button.cyber-glass,
html.light .cyber-glass-glow button.cyber-glass {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* Exceptions: Body tag itself should stay slate-50 */
html.light body[class*="bg-[#"] {
  background-color: #f8fafc !important;
}

/* Inner Workbench Header / Sub-toolbars */
html.light div[class*="border-b"][class*="bg-slate-900"],
html.light div[class*="border-b"][class*="bg-slate-100"],
html.light div[class*="border-b"][class*="bg-[#"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Workbench Footer Strip */
html.light div[class*="border-t"][class*="bg-slate-900"],
html.light div[class*="border-t"][class*="bg-[#"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* --- 2.5 Borders and Dividers --- */
html.light [class*="border-cyan-500"],
html.light [class*="border-slate-800"],
html.light [class*="border-slate-700"],
html.light [class*="border-[#"] {
  border-color: #e2e8f0 !important;
}

/* --- 2.6 Typography & Contrast --- */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
  color: #0f172a !important;
}

html.light p {
  color: #334155 !important;
}

/* Invert dark-mode text colors, but DO NOT invert primary CTA button text */
html.light :not(.glow-cyber-btn):not([class*="from-"]):not([class*="bg-cyan-500"]):not(.mode-btn.bg-gradient-to-r) > .text-white,
html.light .text-slate-100,
html.light .text-slate-200 {
  color: #1e293b !important;
}

html.light .text-slate-300,
html.light .text-slate-400 {
  color: #475569 !important;
}

html.light .text-slate-500 {
  color: #64748b !important;
}

/* Accent text colors in Light Mode (re-contrast light cyans to crisp deep sky) */
html.light .text-cyan-200,
html.light .text-cyan-300,
html.light .text-cyan-400 {
  color: #0284c7 !important;
}

html.light .text-cyan-500 {
  color: #0369a1 !important;
}

html.light .text-emerald-300,
html.light .text-emerald-400 {
  color: #059669 !important;
}

html.light .text-amber-300,
html.light .text-amber-400 {
  color: #d97706 !important;
}

/* --- 2.7 Inputs, Textareas, and Forms --- */
html.light textarea,
html.light input[type="text"],
html.light input[type="password"],
html.light input[type="email"],
html.light input[type="number"],
html.light select,
html.light #detector-input,
html.light #aiInputText {
  background-color: transparent !important;
  color: #0f172a !important;
  caret-color: #0284c7 !important;
}

html.light select {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light textarea::placeholder,
html.light input::placeholder {
  color: #94a3b8 !important;
}

/* Secondary & Sample Action Buttons */
html.light [class*="bg-slate-800"],
html.light [class*="bg-cyan-950"],
html.light [class*="bg-emerald-950"],
html.light [class*="bg-amber-950"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light [class*="bg-slate-800"]:hover,
html.light [class*="bg-cyan-950"]:hover {
  background-color: #e2e8f0 !important;
  color: #0284c7 !important;
  border-color: #38bdf8 !important;
}

html.light [class*="bg-emerald-950"]:hover {
  background-color: #e2e8f0 !important;
  color: #059669 !important;
  border-color: #34d399 !important;
}

html.light [class*="bg-amber-950"]:hover {
  background-color: #e2e8f0 !important;
  color: #d97706 !important;
  border-color: #fbbf24 !important;
}

/* --- 2.8 Mode Selector Tabs --- */
html.light .mode-tab,
html.light .mode-btn {
  color: #475569 !important;
}

html.light .mode-tab:hover,
html.light .mode-btn:hover {
  color: #0284c7 !important;
  background-color: rgba(14, 165, 233, 0.08) !important;
}

/* Active mode tab retains its vibrant gradient with crisp dark text */
html.light .mode-btn[class*="bg-gradient-to-r"],
html.light .mode-tab[class*="bg-gradient-to-r"] {
  color: #020617 !important;
}

/* --- 2.9 Tables & Status Matrices --- */
html.light table {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light thead tr,
html.light th {
  background-color: #f8fafc !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

html.light tbody tr {
  border-color: #e2e8f0 !important;
}

html.light tbody tr:hover {
  background-color: #f1f5f9 !important;
}

html.light td {
  color: #334155 !important;
}

/* --- 2.10 Footer --- */
html.light footer {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

html.light .footer-bottom-box,
html.light footer [class*="border-t"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light .footer-col-title {
  color: #0f172a !important;
}

html.light footer a {
  color: #475569 !important;
}

html.light footer a:hover {
  color: #0284c7 !important;
}

/* --- 2.11 Circular Charts & SVG Gauges --- */
html.light circle[stroke="#050914"],
html.light circle[stroke="#080e1a"],
html.light circle[stroke="#0e1726"],
html.light circle[stroke="#1e293b"],
html.light circle[stroke="#0f172a"] {
  stroke: #e2e8f0 !important;
}

/* --- 2.12 Hero Badges & Section Tags --- */
html.light .hero-pill-badge,
html.light .section-pill-tag {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  box-shadow: none !important;
}

/* --- 2.13 Multi-Lingual Language Modal in Light Mode --- */
html.light .lang-modal-dialog {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}

html.light .lang-modal-dialog h3 {
  color: #0f172a !important;
}

html.light #lang-search-input {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #lang-search-input::placeholder {
  color: #94a3b8 !important;
}

html.light .lang-card {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light .lang-card:hover {
  background-color: #f0f9ff !important;
  border-color: #38bdf8 !important;
}

html.light .lang-card div.font-bold {
  color: #0f172a !important;
}

html.light .lang-card.active,
html.light .lang-card[class*="bg-cyan-500/15"] {
  background-color: #ecfeff !important;
  border-color: #06b6d4 !important;
}

html.light .lang-card.active div.font-bold,
html.light .lang-card[class*="bg-cyan-500/15"] div.font-bold {
  color: #0891b2 !important;
}

html.light #close-lang-modal {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

html.light #close-lang-modal:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* RTL Support for Urdu, Arabic, Persian, Hebrew */
html[dir="rtl"] body,
body.rtl-active {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', 'Noto Nastaliq Urdu', sans-serif;
}

html[dir="rtl"] .header-lang-btn {
  flex-direction: row-reverse;
}

/* ==========================================================================
   HEADLESS GOOGLE TRANSLATE - HIDE BARS & POPUPS
   ========================================================================== */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
#google_translate_element,
.goog-te-gadget {
  display: none !important;
  visibility: hidden !important;
}

body {
  top: 0px !important;
  position: static !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   ADVANCED CYBER FILTER CHIPS & PRECISION CYBER TOGGLES
   Ultra-Modern, Glowing Neomorphic Filter Selectors
   ========================================================================== */
.cyber-filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cyber-filter-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-filter-chip:hover .cyber-filter-card {
  border-color: rgba(0, 242, 254, 0.5);
  background: rgba(15, 23, 42, 0.85);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.15);
}

/* Checked State for Card */
.cyber-filter-input:checked + .cyber-filter-card {
  background: linear-gradient(135deg, rgba(8, 28, 48, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(0, 242, 254, 0.65);
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.2), inset 0 0 15px rgba(0, 242, 254, 0.08);
}

/* Icon Box inside Chip */
.cyber-filter-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-filter-icon-box {
  background: rgba(0, 242, 254, 0.2);
  border-color: rgba(0, 242, 254, 0.5);
  color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

/* Label & Typography */
.cyber-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  transition: color 0.25s ease;
  line-height: 1.2;
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-filter-label {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.cyber-filter-sub {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  line-height: 1;
  margin-top: 3px;
  transition: color 0.25s ease;
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-filter-sub {
  color: #38bdf8;
}

/* Micro LED Pulse */
.cyber-filter-led {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #475569;
  display: inline-block;
  transition: all 0.25s ease;
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-filter-led {
  background: #00f2fe;
  box-shadow: 0 0 8px #00f2fe, 0 0 14px rgba(0, 242, 254, 0.8);
  animation: pulse 2s infinite;
}

/* Precision Cyber Toggle Switch */
.cyber-switch-ui {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 9999px;
  background: #1e293b;
  border: 1px solid #334155;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  margin-left: 4px;
}

.cyber-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #64748b;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.25s ease;
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-switch-ui {
  background: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.5);
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-switch-knob {
  transform: translateX(16px);
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
}

/* Compact Switch Modifier */
.cyber-switch-ui.compact,
.cyber-switch-ui.\!w-7 {
  width: 28px !important;
  height: 16px !important;
}

.cyber-switch-ui.compact .cyber-switch-knob,
.cyber-switch-ui.\!w-7 .cyber-switch-knob {
  width: 11px !important;
  height: 11px !important;
  top: 1.5px !important;
  left: 1.5px !important;
}

.cyber-filter-input:checked + .cyber-filter-card .cyber-switch-ui.compact .cyber-switch-knob,
.cyber-filter-input:checked + .cyber-filter-card .cyber-switch-ui.\!w-7 .cyber-switch-knob {
  transform: translateX(12px) !important;
}

/* Light Mode Overrides for Cyber Filter Chips */
html.light .cyber-filter-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.light .cyber-filter-chip:hover .cyber-filter-card {
  background: #f8fafc !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12) !important;
}

html.light .cyber-filter-input:checked + .cyber-filter-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.18) !important;
}

html.light .cyber-filter-icon-box {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html.light .cyber-filter-input:checked + .cyber-filter-card .cyber-filter-icon-box {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.3) !important;
}

html.light .cyber-filter-label {
  color: #334155 !important;
}

html.light .cyber-filter-input:checked + .cyber-filter-card .cyber-filter-label {
  color: #0f172a !important;
}

html.light .cyber-filter-sub {
  color: #64748b !important;
}

html.light .cyber-filter-input:checked + .cyber-filter-card .cyber-filter-sub {
  color: #0284c7 !important;
}

html.light .cyber-switch-ui {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

html.light .cyber-switch-knob {
  background: #94a3b8 !important;
}

html.light .cyber-filter-input:checked + .cyber-filter-card .cyber-switch-ui {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.3) !important;
}

html.light .cyber-filter-input:checked + .cyber-filter-card .cyber-switch-knob {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   3. LUXURY INTERNAL SCROLLBAR SYSTEM (.custom-scrollbar & .cyber-scrollbar)
   ========================================================================== */
.custom-scrollbar,
.cyber-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 242, 254, 0.35) rgba(5, 8, 20, 0.3);
}

.custom-scrollbar::-webkit-scrollbar,
.cyber-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.cyber-scrollbar::-webkit-scrollbar-track {
  background: rgba(5, 8, 20, 0.3);
  border-radius: 9999px;
  margin: 4px 0;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.cyber-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.35);
  border-radius: 9999px;
  border: 1px solid rgba(0, 242, 254, 0.2);
  transition: all 0.25s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.cyber-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 242, 254, 0.8);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
  border-color: rgba(0, 242, 254, 0.6);
}

/* Light Mode Custom Scrollbars */
html.light .custom-scrollbar,
html.light .cyber-scrollbar {
  scrollbar-color: rgba(2, 132, 199, 0.35) rgba(241, 245, 249, 0.5);
}

html.light .custom-scrollbar::-webkit-scrollbar-track,
html.light .cyber-scrollbar::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
}

html.light .custom-scrollbar::-webkit-scrollbar-thumb,
html.light .cyber-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(2, 132, 199, 0.35);
  border: 1px solid rgba(2, 132, 199, 0.2);
}

html.light .custom-scrollbar::-webkit-scrollbar-thumb:hover,
html.light .cyber-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(2, 132, 199, 0.75);
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.35);
  border-color: rgba(2, 132, 199, 0.5);
}

/* ==========================================================================
   4. FULL ARTICLE VIEW & UNCONSTRAINED READING ARCHITECTURE
   ========================================================================== */
.panels-expanded {
  height: auto !important;
  min-height: 640px !important;
  overflow: visible !important;
}

.panels-expanded textarea,
.panels-expanded #aiInputText,
.panels-expanded #humanOutputText,
.panels-expanded #detector-input,
.panels-expanded #source-text,
.panels-expanded #output-content,
.panels-expanded #editorDoc {
  height: auto !important;
  min-height: 520px !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Bottom clearance ensures scrolled text is never covered by bottom toolbars */
.scroll-clearance-bottom {
  padding-bottom: 11rem !important;
}

/* Minimized Floating Action Toolbar for completely unobstructed reading */
.floating-bar-minimized #floatingControlsPanel {
  display: none !important;
}

.floating-bar-minimized {
  padding: 0.65rem 1.25rem !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45) !important;
}



/* ==========================================================================
   5. UNIVERSAL MOBILE RESPONSIVENESS & OVERFLOW SHIELD
   Comprehensive Mobile Viewport Standards (320px - 768px)
   ========================================================================== */

html {
  overflow-x: clip;
  overflow-y: auto !important;
  scroll-behavior: auto;
}

body {
  overflow-x: clip;
  overflow-y: visible !important;
  max-width: 100%;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Universal Cyber Scrollbar - Always Visible & Smooth */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
}

::-webkit-scrollbar-track {
  background: #080c16 !important;
}

::-webkit-scrollbar-thumb {
  background: #1e293b !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #00dce6 !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.6) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  /* Ambient radial glow shield for small screens */
  [class*="blur-"][class*="rounded-full"],
  [class*="blur-3xl"],
  [class*="blur-2xl"] {
    max-width: 85vw !important;
  }
}

/* 2. Text and Content Wrapping Safety */
h1, h2, h3, h4, h5, h6,
p, span, a, label, li,
div, pre, code {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 3. Media, Canvas, and SVG Safety */
img, svg, canvas, video, iframe {
  max-width: 100% !important;
  height: auto;
}

/* 4. Tables and Code Blocks Horizontal Scroll Containment */
table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

pre, code {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* 5. Universal Header Mobile Shield (Screens < 640px) */
@media (max-width: 639px) {
  header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  header > div {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.5rem !important;
  }

  /* Compact Logo on Mobile */
  header a img[alt*="SmrAI Logo"],
  header img[alt*="SmrAI Logo"],
  header img[src*="smrai-logo"] {
    max-width: 120px !important;
    height: 2.1rem !important;
    width: auto !important;
  }

  /* Hide Version Badge on small mobile to give room for hamburger & theme button */
  header .header-version-badge {
    display: none !important;
  }

  /* Header Action buttons compact/hide on small screens */
  header .glow-cyber-btn,
  header .glow-cyan-btn {
    display: none !important;
  }

  header #theme-toggle {
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
  }

  header #mobile-menu-btn {
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
  }

  /* Mobile Drawer Smooth Slide and Scrolling */
  #mobile-drawer {
    max-height: 80vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
  }

  /* Hide huge ambient background floating word shadows that disrupt mobile rendering */
  .word-shadow-1,
  .word-shadow-2,
  .word-shadow-3 {
    display: none !important;
  }
}

/* 6. Universal Footer Mobile Shield (Screens < 768px) */
@media (max-width: 767px) {
  footer {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }

  footer > div,
  footer .max-w-[1360px],
  footer .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Force multi-column footer grids into 1 clean column on mobile */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  footer .col-span-2,
  footer .lg:col-span-2 {
    grid-column: span 1 !important;
  }

  /* Stack footer bottom bar */
  footer .pt-6.flex,
  footer .footer-bottom-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  footer .pt-6.flex .flex,
  footer .footer-bottom-box .flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }
}

/* 7. Typography Clamp for Mobile */
@media (max-width: 639px) {
  h1, .text-4xl, .text-5xl, .text-6xl {
    font-size: clamp(1.65rem, 6.5vw, 2.35rem) !important;
    line-height: 1.25 !important;
  }

  h2, .text-3xl {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.3 !important;
  }

  .text-7xl, .text-8xl, .text-9xl {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }
}

/* 8. Workspace and Studio Tool Mobile Safety */
@media (max-width: 1023px) {
  /* Ensure studio split screens stack vertically */
  .grid.lg:grid-cols-12,
  .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  .lg:col-span-7,
  .lg:col-span-5,
  .lg:col-span-8,
  .lg:col-span-4 {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  /* Ensure canvases and audio controls wrap */
  #topAudioControlStrip,
  #layerWalkthroughBar,
  #playbackControlsBar {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #acoustic-canvas-container,
  #waveformScrubberContainer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 9. Universal Quota Capsule & Checkout Modal */
.smrai-quota-capsule {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Quota Progress Bar - Pure Solid Bar, Zero Hollow Glitch, Zero Double Wire */
.smrai-quota-progress-track {
  width: 56px;
  height: 6px;
  border-radius: 9999px;
  background-color: #1e293b;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.smrai-quota-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #38bdf8 0%, #06b6d4 100%);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Universal Header Alignment & Pill Protection across all pages */
header nav,
header nav.rounded-full,
header nav button.rounded-full,
header nav a.rounded-full,
.rounded-full {
  border-radius: 9999px !important;
}

header nav button,
header nav a {
  border-radius: 9999px !important;
}

/* Ensure pixel-perfect height (40px) & vertical centering for all header controls */
header .header-lang-btn,
header #theme-toggle,
header #mobile-menu-btn,
header .pro-badge-btn,
header .glow-cyber-btn,
header .header-profile-toggle,
.header-profile-toggle {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Theme toggle is always displayed */
header #theme-toggle {
  display: inline-flex !important;
}

/* Language selector: hidden on small mobile (< 768px), inline-flex on md and above */
@media (max-width: 767px) {
  header .header-lang-btn {
    display: none !important;
  }
}
@media (min-width: 768px) {
  header .header-lang-btn {
    display: inline-flex !important;
  }
}

/* Mobile Menu Button: STRICTLY hidden on desktop (>= 1024px), ONLY shown on responsive screens (< 1024px) */
@media (min-width: 1024px) {
  header #mobile-menu-btn,
  #mobile-menu-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
@media (max-width: 1023px) {
  header #mobile-menu-btn,
  #mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* Mobile Viewport Shield (< 640px): strictly hide Pro badge, Sign In, Get Started, and Profile Dropdown in header */
@media (max-width: 639px) {
  header .pro-badge-btn,
  header .glow-cyber-btn,
  header .glow-cyan-btn,
  header .header-signin-link,
  header .smrai-profile-dropdown-container {
    display: none !important;
  }
}

/* Get Started & Sign In buttons: Visible ONLY on tablet/desktop (>= 640px) for new/guest visitors, STRICTLY hidden when signed in */
@media (min-width: 640px) {
  body:not(.smrai-logged-in) header .glow-cyber-btn:not(.hidden),
  body:not(.smrai-logged-in) header .glow-cyan-btn:not(.hidden) {
    display: inline-flex !important;
  }
}

@media (min-width: 1024px) {
  body:not(.smrai-logged-in) header .header-signin-link:not(.hidden) {
    display: inline-flex !important;
  }
}

body.smrai-logged-in header .glow-cyber-btn,
body.smrai-logged-in header .header-signin-link,
header.smrai-logged-in .glow-cyber-btn,
header.smrai-logged-in .header-signin-link,
header .glow-cyber-btn.hidden,
header .header-signin-link.hidden,
header a[href*="sign-up.html"].hidden,
header a[href*="sign-in.html"].hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Signed in profile toggle styling */
header .header-profile-toggle {
  display: inline-flex !important;
}

html.light .header-profile-toggle {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
/* Header Profile Dropdown (100% Solid Opaque Background - Zero Transparency) */
.header-profile-menu {
  background-color: #0c1222 !important;
  background: #0c1222 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.95), 0 0 30px rgba(56, 189, 248, 0.15) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}

.header-profile-menu .profile-menu-header {
  background-color: #080d19 !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
}

html.light .header-profile-toggle {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.light .header-profile-toggle:hover {
  border-color: #0284c7 !important;
  background-color: #f8fafc !important;
}
html.light .header-profile-toggle span.text-white {
  color: #0f172a !important;
}
html.light .header-profile-menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -5px rgba(15, 23, 42, 0.18) !important;
}
html.light .header-profile-menu .profile-menu-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.light .header-profile-menu .text-white {
  color: #0f172a !important;
}
html.light .header-profile-menu .text-slate-400 {
  color: #64748b !important;
}
html.light .header-profile-menu .text-slate-300 {
  color: #334155 !important;
}
html.light .header-profile-menu a:hover {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
}
html.light .header-profile-menu .border-slate-800 {
  border-color: #e2e8f0 !important;
}


@media (min-width: 640px) {
  .pro-badge-btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    border-radius: 0.75rem !important; /* rounded-xl */
  }
}

html.light .smrai-quota-capsule,
html.light .pro-badge-btn {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light .smrai-quota-progress-track {
  background-color: #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

html.light .smrai-quota-progress-fill {
  background: linear-gradient(90deg, #0284c7 0%, #06b6d4 100%) !important;
}

html.light .smrai-quota-capsule .text-cyan-300 {
  color: #0284c7 !important;
}

html.light .smrai-quota-capsule .text-slate-400 {
  color: #475569 !important;
}

#smrai-checkout-modal {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#smrai-checkout-modal.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: fadeInCheckout 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#smrai-checkout-modal.active #smrai-checkout-card {
  transform: scale(1) !important;
}

#smrai-checkout-card {
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto !important;
}

@keyframes fadeInCheckout {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Stitch Pro Modal Theme Extras & Background Grid Pattern ("Dabbe") */
.shadow-glow-cyan {
  box-shadow: 0 0 25px -4px rgba(14, 165, 233, 0.45);
}
.shadow-glow-gold {
  box-shadow: 0 0 20px -2px rgba(245, 158, 11, 0.25);
}

/* Background grid pattern - "Chhote chhote dabbe / square boxes" from Stitch design - Single Crisp Layer */
.bg-grid-pattern,
.smrai-bg-grid-pattern {
  background-size: 32px 32px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-image: 
    linear-gradient(to right, rgba(0, 242, 254, 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 242, 254, 0.075) 1px, transparent 1px) !important;
}

html.light .bg-grid-pattern,
html.light .smrai-bg-grid-pattern {
  background-size: 32px 32px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.08) 1px, transparent 1px) !important;
}

#smrai-checkout-modal {
  background-color: rgba(9, 13, 22, 0.95) !important;
  background-image: none !important;
}

html.light #smrai-checkout-modal {
  background-color: rgba(241, 245, 249, 0.95) !important;
  background-image: none !important;
}

html.light #smrai-checkout-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15) !important;
}

html.light #smrai-checkout-card h2,
html.light #smrai-checkout-card h3 {
  color: #0f172a !important;
}

html.light #smrai-checkout-card p {
  color: #475569 !important;
}

html.light #smrai-checkout-card .bg-slate-900\/90,
html.light #smrai-checkout-card .bg-slate-900,
html.light #smrai-checkout-card .bg-\[\#0b101c\]\/90,
html.light #smrai-checkout-card .bg-\[\#090d16\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #smrai-checkout-card .bg-slate-800\/80,
html.light #smrai-checkout-card .bg-slate-800 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   5. MOBILE VIEWPORT & HEADER ADJUSTMENTS (< 640px)
   Strictly scoped to mobile to guarantee 100% untouched desktop layout
   ========================================================================== */
@media (max-width: 639px) {
  /* On mobile, ONLY the SmrAI logo appears on the left side of the header */
  header .header-version-badge,
  header [class*="version-badge"] {
    display: none !important;
  }

  /* Quota capsule (10k Free / Pro) hidden from top bar on mobile to keep header clean */
  header .pro-badge-btn {
    display: none !important;
  }

  /* Desktop Get Started & Sign In links hidden on mobile */
  header .glow-cyber-btn,
  header .glow-cyan-btn,
  header .header-signin-link,
  header .smrai-profile-dropdown-container {
    display: none !important;
  }

  /* Dedicated Mobile 'Gol Nishan' Circular Sign-In / Account Button */
  .header-mobile-signin {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.5rem !important; /* 40px */
    height: 2.5rem !important; /* 40px */
    border-radius: 0.75rem !important;
    background-color: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    color: #38bdf8 !important;
    flex-shrink: 0 !important;
  }

  html.light .header-mobile-signin {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0284c7 !important;
  }
}

@media (min-width: 640px) {
  /* Strictly hide mobile circular signin on tablet/desktop */
  .header-mobile-signin {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Prevent massive ambient background word watermarks from overflowing mobile screen */
  .word-shadow-1,
  .word-shadow-2,
  .word-shadow-3 {
    display: none !important;
  }
}

/* ==========================================================================
   Header Referral Rewards Icon Button (.header-referral-icon-btn)
   ========================================================================== */
.header-referral-icon-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-referral-icon-btn:hover {
  border-color: rgba(16, 185, 129, 0.75) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

html.light .header-referral-icon-btn,
html.light #header-referral-btn {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #059669 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

html.light .header-referral-icon-btn:hover,
html.light #header-referral-btn:hover {
  background-color: #f0fdf4 !important;
  border-color: #34d399 !important;
  color: #047857 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}