/* ==========================================================================
   TAPZI DUAL-THEME ENGINE & UNIFIED TYPOGRAPHY (Asha IT Solutions)
   - Regular Mode (Light): Clean off-white canvas (#F8FAFC) + tapzi-logo-light.png
   - Dark Mode: Authentic Tapzi Brand Theme (Obsidian #08090D) + tapzi-logo-dark.png
     with Electric Lime #84cc16 -> Lemon #e6fc06 Dual-Tone Gradients & Glows
   - Unified Typography: Same Font Family (Poppins 300 to 900) across all headings,
     body, buttons, and badges for 100% visual harmony and sync.
   ========================================================================== */

/* Typography - Chakra Petch for Headings, Poppins for Body */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Chakra Petch', sans-serif !important;
}

body, p, span, a, input, select, textarea, button, label, li, table {
  font-family: 'Poppins', sans-serif;
}

/* Smooth Transitions */
html, body, .clean-card, header, aside, footer, button, input, select, textarea {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ==========================================================================
   DARK MODE OVERRIDES (.dark on <html> or <body>)
   Full obsidian background, elimination of white gradients, razor-sharp contrast
   ========================================================================== */

html.dark,
html.dark body {
  background-color: #08090D !important;
  color: #CBD5E1 !important;
}

/* Headings in Dark Mode (Pure Bright White) */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .font-heading {
  color: #FFFFFF !important;
}

html.dark .text-slate-900 {
  color: #FFFFFF !important;
}

html.dark .text-slate-800 {
  color: #F8FAFC !important;
}

html.dark .text-slate-700 {
  color: #CBD5E1 !important;
}

html.dark .text-slate-600 {
  color: #94A3B8 !important;
}

html.dark .text-slate-500 {
  color: #64748B !important;
}

html.dark strong,
html.dark b {
  color: #FFFFFF !important;
}

html.dark strong.text-\[\#FF4D24\] {
  color: #bef264 !important;
}

/* Dual-Tone Text Gradient:
   - Light Mode (Day): Tapzi Flame Orange #FF4D24 -> Amber #FF7A00
   - Dark Mode (Night): Authentic Tapzi Logo Color Gradient with rich down-finishing (#fef08a -> #e6fc06 -> #bef264 -> #a3e635 -> #65a30d -> #4d7c0f) */
html.dark .gradient-text-flame,
html.dark .gradient-text-logo,
html.dark .gradient-text-brand,
html.dark [class*="gradient-text-flame"] {
  background: linear-gradient(175deg, #fef08a 0%, #e6fc06 18%, #bef264 38%, #a3e635 62%, #65a30d 88%, #4d7c0f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(132, 204, 22, 0.45));
}

html:not(.dark) .gradient-text-flame,
html:not(.dark) .gradient-text-logo,
html:not(.dark) [class*="gradient-text-flame"] {
  background: linear-gradient(135deg, #FF4D24 0%, #FF7A00 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Tapzi Brand Buttons in Dark Mode: Authentic Logo Lime-Yellow Theme with Deep Black Contrast */
html.dark .btn-flame,
html.dark .btn-cyan,
html.dark .btn-brand {
  background: linear-gradient(135deg, #e6fc06 0%, #a3e635 48%, #65a30d 100%) !important;
  color: #07080c !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 22px rgba(132, 204, 22, 0.4) !important;
  border: none !important;
}

html.dark .btn-flame *,
html.dark .btn-cyan *,
html.dark .btn-brand * {
  color: #07080c !important;
}

html.dark .btn-flame:hover,
html.dark .btn-cyan:hover,
html.dark .btn-brand:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 30px rgba(132, 204, 22, 0.6) !important;
  transform: translateY(-2px) !important;
}

html.dark .btn-dark {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

html.dark .btn-dark:hover {
  background: rgba(163, 230, 53, 0.15) !important;
  border-color: #bef264 !important;
  color: #bef264 !important;
}

html.dark .btn-dark * {
  color: inherit !important;
}

/* KILL LIGHT & WHITE GRADIENTS IN DARK MODE (Excluding intentional dark cards) */
html.dark :is([class*="from-white"], [class*="via-white"], [class*="via-[#F8FAFC]"], [class*="via-[#FFF"]):not(.qr-scan-pad):not(.btn-flame):not(.cust-welcome-card) {
  background-image: none !important;
}

html.dark .cust-welcome-card {
  background: #0E1322 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hero Section in Dark Mode (Radial Obsidian Glow) */
html.dark section.relative[class*="from-white"],
html.dark section[class*="bg-gradient-to-b"] {
  background: radial-gradient(circle at 50% 10%, #111728 0%, #08090D 75%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* General Sections in Dark Mode */
html.dark section {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cards in Dark Mode (Obsidian Glassmorphism with Lime Glow Hover) */
html.dark .clean-card {
  background: linear-gradient(135deg, rgba(17, 23, 38, 0.95) 0%, rgba(11, 14, 24, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7) !important;
}

html.dark .clean-card:hover {
  border-color: rgba(163, 230, 53, 0.5) !important;
  box-shadow: 0 0 35px -5px rgba(132, 204, 22, 0.35) !important;
  transform: translateY(-3px) !important;
}

/* White containers & panels in Dark Mode */
html.dark .bg-white:not(.qr-scan-pad):not(.btn-flame) {
  background-color: #0E1322 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-white\/95 {
  background-color: rgba(11, 14, 23, 0.96) !important;
}

html.dark .bg-\[\#F8FAFC\] {
  background-color: #08090D !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-100 {
  background-color: #121828 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}

html.dark .hover\:bg-white:hover {
  background-color: #161F34 !important;
}

html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-200:hover {
  background-color: #1A243B !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-slate-300 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sticky Header & Trust Bar in Dark Mode */
html.dark header {
  background-color: rgba(8, 9, 13, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
}

html.dark aside {
  background: linear-gradient(to right, rgba(132, 204, 22, 0.12), #08090d, rgba(230, 252, 6, 0.12)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark aside span.text-slate-700 {
  color: #CBD5E1 !important;
}

/* Nav Links in Dark Mode */
html.dark header nav a.text-slate-600 {
  color: #94A3B8 !important;
}

html.dark header nav a.text-slate-600:hover {
  color: #bef264 !important;
}

html.dark header nav a.text-\[\#FF4D24\] {
  color: #bef264 !important;
  border-color: #bef264 !important;
}

/* Badges & Accents in Dark Mode (Tapzi Logo Electric Lime & Lemon Glow) */
html.dark .bg-orange-50,
html.dark .bg-orange-100 {
  background-color: rgba(163, 230, 53, 0.12) !important;
  border-color: rgba(163, 230, 53, 0.35) !important;
  color: #bef264 !important;
}

html.dark .text-\[\#FF4D24\] {
  color: #bef264 !important;
}

html.dark .border-orange-200 {
  border-color: rgba(163, 230, 53, 0.35) !important;
}

/* Ping Dot & Solid Accent Badges (Restricted to small indicator dots, never body) */
html.dark span.bg-\[\#FF4D24\],
html.dark .w-2.h-2.rounded-full.bg-\[\#FF4D24\],
html.dark span[class*="rounded-full"][class*="animate-ping"],
html.dark span[class*="rounded-full"][class*="animate-pulse"] {
  background-color: #a3e635 !important;
}

/* Orange text & highlights in Dark Mode -> Shimmering Lime */
html.dark .text-orange-400,
html.dark .text-orange-500 {
  color: #bef264 !important;
}

/* Top border on Diner Flow card */
html.dark .border-t-\[\#FF4D24\] {
  border-top-color: #a3e635 !important;
}

/* Hover borders on station teaser cards */
html.dark .hover\:border-\[\#FF4D24\]:hover {
  border-color: #a3e635 !important;
}

/* Orange glow containers & subtle box backgrounds in Dark Mode */
html.dark .bg-orange-500\/10,
html.dark .bg-orange-500\/15,
html.dark .bg-orange-500\/20,
html.dark .bg-orange-500\/25 {
  background-color: rgba(163, 230, 53, 0.15) !important;
}

html.dark .border-orange-500\/20,
html.dark .border-orange-500\/30,
html.dark .border-orange-500\/40,
html.dark .border-orange-500\/50 {
  border-color: rgba(163, 230, 53, 0.35) !important;
}

html.dark .shadow-orange-500\/20,
html.dark .shadow-orange-500\/25,
html.dark .shadow-orange-500\/30 {
  box-shadow: 0 4px 22px rgba(132, 204, 22, 0.25) !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #FBBF24 !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700 {
  color: #FBBF24 !important;
}

/* Emerald Accents in Dark Mode (Veg Dietary & Success) */
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
  color: #34D399 !important;
}

html.dark .bg-emerald-50,
html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
}

/* QR Code Pad must always remain crisp white so phone cameras can scan */
.qr-scan-pad,
html.dark .qr-scan-pad {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

html.dark .qr-scan-pad * {
  color: #0F172A !important;
}

/* Form Inputs in Dark Mode */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0B0E16 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #a3e635 !important;
  background-color: #101524 !important;
  box-shadow: 0 0 15px rgba(132, 204, 22, 0.35) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748B !important;
}

/* Mobile Drawer in Dark Mode */
html.dark #mobile-menu {
  background-color: #0D1017 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #mobile-menu a {
  color: #CBD5E1 !important;
}

html.dark #mobile-menu a:hover {
  color: #bef264 !important;
}

/* Comparison Table in Dark Mode */
html.dark table thead tr {
  background-color: #0B0E16 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark table thead th {
  color: #FFFFFF !important;
}

html.dark table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark table th,
html.dark table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark table th.bg-rose-50\/70,
html.dark table td.bg-rose-50\/20 {
  background-color: rgba(159, 18, 57, 0.18) !important;
  color: #FDA4AF !important;
}

html.dark table th.bg-emerald-50\/70,
html.dark table td.bg-emerald-50\/20 {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  cursor: pointer;
  user-select: none;
}

html.dark .theme-toggle-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #bef264 !important;
  border-color: rgba(163, 230, 53, 0.35) !important;
}

html.dark .theme-toggle-btn:hover {
  background-color: rgba(163, 230, 53, 0.18) !important;
  border-color: #bef264 !important;
}

/* ==========================================================================
   UNIVERSAL APPLICATION SUITE DUAL-THEME OVERRIDES
   Supports Customer, Counter, Kitchen, Waiter, Admin & All Sub-Pages
   ========================================================================== */

/* --- 1. LIGHT MODE FOR STATIONS (html:not(.dark)) --- */
html:not(.dark) body.bg-\[\#07080c\],
html:not(.dark) body.bg-\[\#08090d\],
html:not(.dark) body.bg-\[\#0a0d14\],
html:not(.dark) body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Station Headers & Top Navigation */
html:not(.dark) header.bg-\[\#07080c\]\/95,
html:not(.dark) header.bg-\[\#0a0d14\],
html:not(.dark) header {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Station Cards, Containers & Panels (Outer White Cards) */
html:not(.dark) :is(
  .admin-hero-banner,
  .admin-hero-demo-card,
  [class*="from-[#0e111a]"],
  [class*="from-[#0a0d14]"],
  [class*="from-[#07080c]"],
  [class*="from-[#08090d]"],
  [class*="via-[#0a0d14]"],
  [class*="via-[#0e111a]"],
  [class*="via-[#07080c]"],
  [class*="to-[#121622]"],
  [class*="to-[#0a0d14]"],
  [class*="to-[#0e111a]"],
  .bg-\[\#0a0d14\],
  .bg-\[\#08090d\],
  .bg-\[\#121622\],
  .bg-\[\#161b2a\],
  .asha-card,
  .asha-card-elevated,
  #kcol-1,
  #kcol-2,
  #kcol-3,
  [class*="bg-[#0a0d14]"],
  [class*="bg-[#08090d]"],
  [class*="bg-[#121622]"],
  [class*="bg-[#161b2a]"]
):not(.btn-flame):not(.btn-cyan):not(.btn-brand):not(.btn-dark):not(.floating-theme-pill):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-purple"]):not([class*="bg-blue"]):not(body) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

/* Nested / Secondary Containers & Controls (Soft Slate Tint) */
html:not(.dark) :is(
  .bg-\[\#07080c\],
  .bg-\[\#0e111a\],
  .waiter-creds-box,
  [class*="bg-[#07080c]"],
  [class*="bg-[#0e111a]"]
):not(.btn-flame):not(.btn-cyan):not(.btn-brand):not(.floating-theme-pill):not(body) {
  background-color: #F8FAFC !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Tab Switcher Bar in Light Mode */
html:not(.dark) .admin-tab-bar,
html:not(.dark) [class*="bg-[#0a0d14]"][class*="rounded-2xl"][class*="p-1.5"] {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

html:not(.dark) .admin-tab-bar button:not([class*="bg-[#00f2fe]"]):not([class*="bg-blue-600"]),
html:not(.dark) [class*="bg-[#0a0d14]"][class*="rounded-2xl"] button:not([class*="bg-[#00f2fe]"]):not([class*="bg-blue-600"]) {
  color: #475569 !important;
}

html:not(.dark) .admin-tab-bar button:not([class*="bg-[#00f2fe]"]):not([class*="bg-blue-600"]):hover,
html:not(.dark) [class*="bg-[#0a0d14]"][class*="rounded-2xl"] button:not([class*="bg-[#00f2fe]"]):not([class*="bg-blue-600"]):hover {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* Empty State Dashed Boxes */
html:not(.dark) :is(#new-orders-list, #ready-orders-list, #cooking-orders-list, #table-tabs-list, #col-received-list, #kcol-1, #kcol-2, #kcol-3, #orders-history-list, #table-grid) div[class*="border-dashed"],
html:not(.dark) div[class*="border-dashed"][class*="bg-[#0a0d14]"] {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #64748B !important;
}

/* Customer Mobile Bottom Navigation Bar */
html:not(.dark) nav.fixed.bottom-0 {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Headings in Light Mode (Deep Obsidian Slate) */
html:not(.dark) :is(h1, h2, h3, h4, h5, h6, .font-heading):not(.btn-flame *):not(.btn-cyan *):not(.btn-brand *):not(.badge *):not([class*="bg-emerald"] *):not([class*="bg-rose"] *):not([class*="bg-amber"] *):not(.floating-theme-pill *):not(footer.tapzi-landing-footer *):not([class*="bg-[#0F172A]"] *):not([class*="bg-[#0f172a]"] *) {
  color: #0F172A !important;
}

/* Column Headings in Counter & Kitchen */
html:not(.dark) :is(#col-new, #col-ready, #col-tabs, #kcol-1, #kcol-2, #kcol-3) h2,
html:not(.dark) :is(#col-new, #col-ready, #col-tabs, #kcol-1, #kcol-2, #kcol-3) h2 span,
html:not(.dark) :is(#col-title-1, #col-title-2, #col-title-3) {
  color: #0F172A !important;
  font-weight: 900 !important;
}

/* Replace Invisible White Text in Light Mode (ONLY on light backgrounds, NEVER on dark elements or buttons) */
html:not(.dark) :is(.text-white, [class*="text-white"]):not(
  .btn-flame, .btn-flame *,
  .btn-cyan, .btn-cyan *,
  .btn-brand, .btn-brand *,
  a[class~="bg-slate-900"], a[class~="bg-slate-900"] *,
  button[class~="bg-slate-900"], button[class~="bg-slate-900"] *,
  a[class~="bg-black"], a[class~="bg-black"] *,
  button[class~="bg-black"], button[class~="bg-black"] *,
  [class*="bg-emerald-600"], [class*="bg-emerald-600"] *,
  [class*="bg-rose-600"], [class*="bg-rose-600"] *,
  [class*="bg-amber-500"], [class*="bg-amber-500"] *,
  [class*="bg-blue-600"], [class*="bg-blue-600"] *,
  .floating-theme-pill, .floating-theme-pill *,
  .badge-status-paid, .badge-status-completed,
  .dark-badge, .dark-badge *,
  #post-hero-wrapper, #post-hero-wrapper *,
  footer.tapzi-landing-footer, footer.tapzi-landing-footer *
) {
  color: #0F172A !important;
}

/* Floating Image Badges (Always Dark with Pure White Text in ALL themes) */
.dark-badge,
.dark-badge * {
  color: #FFFFFF !important;
}
.dark-badge .text-orange-400 {
  color: #FB923C !important;
}

/* Muted / Slate text in Light Mode -> Crisp Readable Slate */
html:not(.dark) :is(.text-\[\#94a3b8\], .text-\[\#cbd5e1\], .text-\[\#e2e8f0\], [class*="text-[#94a3b8]"], [class*="text-[#cbd5e1]"]):not(footer.tapzi-landing-footer *):not([class*="bg-[#0F172A]"] *):not([class*="bg-[#0f172a]"] *) {
  color: #475569 !important;
}

/* Counter & Kitchen Status Badges in Light Mode */
html:not(.dark) :is(#badge-new-col, #badge-preparing, .bg-amber-950\/60, .bg-amber-950) {
  background-color: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FCD34D !important;
}

html:not(.dark) :is(#badge-ready-col, .bg-cyan-950\/60, .bg-cyan-950) {
  background-color: #E0F2FE !important;
  color: #0284C7 !important;
  border: 1px solid #BAE6FD !important;
}

html:not(.dark) :is(#badge-tabs-col, .bg-purple-950\/60, .bg-purple-950) {
  background-color: #F3E8FF !important;
  color: #7E22CE !important;
  border: 1px solid #E9D5FF !important;
}

html:not(.dark) :is(#badge-received, .bg-blue-950) {
  background-color: #DBEAFE !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}

html:not(.dark) :is(#badge-ready, .bg-emerald-950) {
  background-color: #D1FAE5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}

/* Slate Text Colors */
html:not(.dark) .text-slate-900 {
  color: #0F172A !important;
}
html:not(.dark) .text-slate-800 {
  color: #1E293B !important;
}
html:not(.dark) .text-slate-700 {
  color: #334155 !important;
}
html:not(.dark) .text-slate-600 {
  color: #475569 !important;
}
html:not(.dark) .text-slate-500 {
  color: #64748B !important;
}
html:not(.dark) strong:not(.btn-flame):not(.btn-cyan):not(.btn-brand):not(.acrylic-dark-standee strong):not(.cta-dark-banner strong):not(footer strong) {
  color: #0F172A !important;
}

/* ==========================================================================
   PERMANENT CONTRAST RULE: INTENTIONAL DARK BUTTONS & STANDARDS
   In BOTH Light and Dark themes, any dark CTA button or dark banner
   MUST have pure white (#FFFFFF) text.
   ========================================================================== */
html:not(.dark) a[class~="bg-slate-900"],
html:not(.dark) button[class~="bg-slate-900"],
html:not(.dark) a[class~="bg-black"],
html:not(.dark) button[class~="bg-black"],
html:not(.dark) .cta-dark-banner,
html:not(.dark) .acrylic-dark-standee,
html:not(.dark) .dark-cta-card {
  color: #FFFFFF !important;
}

html:not(.dark) a[class~="bg-slate-900"] *,
html:not(.dark) button[class~="bg-slate-900"] *,
html:not(.dark) a[class~="bg-black"] *,
html:not(.dark) button[class~="bg-black"] *,
html:not(.dark) .cta-dark-banner :is(h1, h2, h3, h4, p, span, strong),
html:not(.dark) .acrylic-dark-standee :is(h1, h2, h3, h4, p, span, strong),
html:not(.dark) .dark-cta-card :is(h1, h2, h3, h4, p, span, strong) {
  color: #FFFFFF !important;
}

html:not(.dark) :is(.cta-dark-banner, .acrylic-dark-standee, [class*="from-slate-900"]) :is(h1, h2, h3, h4, .font-heading) {
  color: #FFFFFF !important;
}

html:not(.dark) :is(.cta-dark-banner, .acrylic-dark-standee, [class*="from-slate-900"]) :is(p, .text-slate-300) {
  color: #E2E8F0 !important;
}

html:not(.dark) :is(.cta-dark-banner, .acrylic-dark-standee, [class*="from-slate-900"]) .text-slate-400 {
  color: #CBD5E1 !important;
}

/* ==========================================================================
   CUSTOMER MOBILE UI - DUAL THEME ENGINE (Asha IT Solutions)
   Unified with Tapzi Flame Brand (#FF4D24 / #FF7A00)
   Guarantees 100% Crisp Font Visibility in both Light and Dark Modes
   ========================================================================== */

/* --- CUSTOMER LIGHT MODE OVERRIDES --- */
html:not(.dark) #page-home,
html:not(.dark) #page-menu,
html:not(.dark) #page-orders {
  color: #0F172A !important;
}

/* Headings in Customer UI (Always crisp dark navy in light mode) */
html:not(.dark) #page-home h1,
html:not(.dark) #page-home h2,
html:not(.dark) #page-home h3,
html:not(.dark) #page-home h4,
html:not(.dark) #page-menu h1,
html:not(.dark) #page-menu h2,
html:not(.dark) #page-menu h3,
html:not(.dark) #page-menu h4,
html:not(.dark) #page-orders h1,
html:not(.dark) #page-orders h2,
html:not(.dark) #page-orders h3,
html:not(.dark) #page-orders h4,
html:not(.dark) #header-table-badge,
html:not(.dark) .cust-heading {
  color: #0F172A !important;
}

/* Ensure all .text-white text in customer views (outside buttons) becomes #0F172A in Light Mode */
html:not(.dark) :is(#page-home, #page-menu, #page-orders, #active-tab-box, #completed-orders-list, #menu-items-list, #home-specials-grid) :is(h1, h2, h3, h4, strong, div, p, span).text-white:not(.btn-flame):not(.btn-cyan):not(.btn-brand):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-[#FF4D24]"]):not([class*="bg-orange"]) {
  color: #0F172A !important;
}

/* Secondary & Muted text in Light Mode */
html:not(.dark) :is(#page-home, #page-menu, #page-orders) .text-\[\#94a3b8\],
html:not(.dark) :is(#page-home, #page-menu, #page-orders) .text-\[\#64748b\] {
  color: #64748B !important;
}

html:not(.dark) :is(#page-home, #page-menu, #page-orders) .text-\[\#cbd5e1\] {
  color: #334155 !important;
}

/* Customer Welcome Hero Card in Light Mode */
html:not(.dark) .cust-welcome-card,
html:not(.dark) #page-home > div:first-child {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.07) !important;
  color: #0F172A !important;
}

/* Customer Table Info Pill in Light Mode */
html:not(.dark) .cust-table-pill,
html:not(.dark) #page-home .bg-black\/60 {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html:not(.dark) #home-table-label {
  color: #FF4D24 !important;
}

html:not(.dark) #page-home .bg-black\/60 button,
html:not(.dark) .cust-table-pill button {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html:not(.dark) #page-home .bg-black\/60 button:hover,
html:not(.dark) .cust-table-pill button:hover {
  border-color: #FF4D24 !important;
  color: #FF4D24 !important;
}

/* All Prices in Light Mode -> Bold Tapzi Flame Orange */
html:not(.dark) .text-\[\#00f2fe\]:not(button):not(a),
html:not(.dark) .cust-price {
  color: #FF4D24 !important;
}

/* Links & Accents in Light Mode */
html:not(.dark) a.text-\[\#00f2fe\],
html:not(.dark) button.text-\[\#00f2fe\] {
  color: #FF4D24 !important;
}

/* Customer Dishes Cards in Light Mode */
html:not(.dark) #home-specials-grid > div,
html:not(.dark) #menu-items-list > div,
html:not(.dark) .cust-dish-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #home-specials-grid > div:hover,
html:not(.dark) #menu-items-list > div:hover,
html:not(.dark) .cust-dish-card:hover {
  border-color: #FF4D24 !important;
  box-shadow: 0 6px 20px rgba(255, 77, 36, 0.12) !important;
}

/* Customer Floating Service Bell */
html:not(.dark) .service-bell-btn,
html:not(.dark) .fixed.bottom-24 button {
  background-color: #FFFFFF !important;
  border: 2px solid #FF4D24 !important;
  color: #FF4D24 !important;
  box-shadow: 0 10px 30px rgba(255, 77, 36, 0.25) !important;
}

/* Customer Sticky Live Order Bar in Light Mode */
html:not(.dark) #sticky-live-order-bar > div {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #FED7AA !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) #sticky-bar-table {
  color: #0F172A !important;
}

html:not(.dark) #sticky-bar-total {
  color: #FF4D24 !important;
}

/* Customer Bottom Navigation Bar in Light Mode */
html:not(.dark) nav.fixed.bottom-0 {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) nav.fixed.bottom-0 button.text-\[\#00f2fe\] {
  color: #FF4D24 !important;
}

html:not(.dark) nav.fixed.bottom-0 button.text-\[\#94a3b8\] {
  color: #64748B !important;
}

html:not(.dark) nav.fixed.bottom-0 button.text-\[\#94a3b8\]:hover {
  color: #0F172A !important;
}

html:not(.dark) #cart-count-badge {
  background-color: #FF4D24 !important;
  color: #FFFFFF !important;
}

/* Category Pills Bar in Light Mode */
html:not(.dark) #category-pills {
  background-color: transparent !important;
}

html:not(.dark) .sticky.top-\[61px\] {
  background-color: rgba(248, 250, 252, 0.96) !important;
  border-color: #E2E8F0 !important;
}

html:not(.dark) #category-pills button.bg-\[\#00f2fe\] {
  background-color: #FF4D24 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(255, 77, 36, 0.3) !important;
}

html:not(.dark) #category-pills button.bg-\[\#0e111a\] {
  background-color: #FFFFFF !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
}

/* Diet Filter Buttons in Light Mode */
html:not(.dark) .diet-btn.bg-white {
  background-color: #FF4D24 !important;
  color: #FFFFFF !important;
  border-color: #FF4D24 !important;
  box-shadow: 0 2px 10px rgba(255, 77, 36, 0.3) !important;
}

html:not(.dark) .diet-btn.bg-\[\#0e111a\] {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
}

/* Orders History Active Tab in Light Mode */
html:not(.dark) #active-tab-box .bg-\[\#07080c\] {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html:not(.dark) #active-tab-box .border-white\/10,
html:not(.dark) #active-tab-box .border-white\/5 {
  border-color: #E2E8F0 !important;
}

html:not(.dark) #active-tab-box .bg-\[\#0e111a\] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #active-tab-box strong,
html:not(.dark) #active-tab-box strong.font-mono {
  color: #0F172A !important;
}

/* Modals in Light Mode (Item, Cart, Service Bell, Bill, Declined) */
html:not(.dark) #item-modal > div,
html:not(.dark) #cart-modal > div,
html:not(.dark) #service-bell-modal > div,
html:not(.dark) #customer-bill-modal > div,
html:not(.dark) #order-rejected-modal > div {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}

html:not(.dark) #item-modal .bg-\[\#0e111a\],
html:not(.dark) #cart-modal .bg-\[\#0e111a\],
html:not(.dark) #service-bell-modal .bg-\[\#0e111a\],
html:not(.dark) #customer-bill-modal .bg-\[\#0e111a\] {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Modals Text in Light Mode - High Contrast Guarantee */
html:not(.dark) #item-modal :is(h3, h4, label, p, span, div, strong):not(#modal-item-price):not(#modal-qty):not([class*="text-[#FF4D24]"]):not(.btn-flame *),
html:not(.dark) #cart-modal :is(h3, h4, label, p, span, div, strong):not(#cart-grand-total):not([class*="text-[#FF4D24]"]):not(.btn-flame *),
html:not(.dark) #service-bell-modal :is(h3, h4, label, p, span, div, strong):not(.btn-flame *),
html:not(.dark) #customer-bill-modal :is(h3, h4, label, p, span, div, strong):not([class*="text-[#FF4D24]"]):not(.btn-flame *),
html:not(.dark) #order-rejected-modal :is(h3, h4, label, p, span, div, strong):not(.btn-flame *) {
  color: #0F172A !important;
}

/* Subtext inside Modals */
html:not(.dark) #item-modal #modal-item-cat,
html:not(.dark) #item-modal #modal-item-desc,
html:not(.dark) #cart-modal .text-slate-500,
html:not(.dark) #cart-modal .text-\[\#94a3b8\],
html:not(.dark) #service-bell-modal .text-\[\#94a3b8\] {
  color: #64748B !important;
}

/* Item Modal Quantity Controls */
html:not(.dark) #item-modal button[onclick*="changeModalQty"] {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 900 !important;
}

/* Item Modal Variant & Addon Buttons in Light Mode */
html:not(.dark) #item-modal .variant-btn,
html:not(.dark) #item-modal button[id*="addon-btn-"] {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

html:not(.dark) #item-modal .variant-btn div:first-child,
html:not(.dark) #item-modal button[id*="addon-btn-"] span:first-child {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html:not(.dark) #item-modal .variant-btn div:last-child,
html:not(.dark) #item-modal button[id*="addon-btn-"] span:last-child {
  color: #FF4D24 !important;
  font-weight: 800 !important;
}

/* --- CUSTOMER DARK MODE (Obsidian & Authentic Logo Lime Glow) --- */
html.dark #cust-brand-hero {
  background: linear-gradient(175deg, #fef08a 0%, #e6fc06 18%, #bef264 38%, #a3e635 62%, #65a30d 88%, #4d7c0f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(132, 204, 22, 0.45));
}

html.dark #item-modal button[onclick*="changeModalQty"] {
  background-color: #121622 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark #item-modal .variant-btn div:first-child,
html.dark #item-modal button[id*="addon-btn-"] span:first-child {
  color: #FFFFFF !important;
}

html.dark #item-modal .variant-btn div:last-child,
html.dark #item-modal button[id*="addon-btn-"] span:last-child {
  color: #bef264 !important;
}

html.dark #home-table-label,
html.dark .cust-price {
  color: #bef264 !important;
}

html.dark .service-bell-btn,
html.dark .fixed.bottom-24 button {
  background-color: #0E111A !important;
  border: 2px solid rgba(163, 230, 53, 0.6) !important;
  color: #bef264 !important;
  box-shadow: 0 10px 30px rgba(132, 204, 22, 0.3) !important;
}

html.dark nav.fixed.bottom-0 button.text-\[\#00f2fe\] {
  color: #bef264 !important;
}

html.dark #category-pills button.bg-\[\#00f2fe\] {
  background: linear-gradient(135deg, #e6fc06 0%, #a3e635 100%) !important;
  color: #07080c !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(132, 204, 22, 0.45) !important;
}

html.dark #sticky-bar-total {
  color: #bef264 !important;
}

html.dark #cart-modal #cart-grand-total {
  color: #bef264 !important;
}

html.dark footer a:hover,
html.dark footer ul li a:hover {
  color: #bef264 !important;
}

/* ==========================================================================
   FOOTER & MODAL DUAL-THEME ARCHITECTURE (Asha IT Solutions)
   ========================================================================== */

/* Universal Landing & Marketing Dark Footer (Crystal Clear Contrast in Both Light & Dark Themes) */
footer.tapzi-landing-footer,
footer.bg-\[\#0F172A\],
footer.bg-\[\#0B0F17\],
footer[class*="bg-[#0F172A]"],
footer[class*="bg-[#0f172a]"],
footer[class*="tapzi-landing-footer"] {
  background-color: #0F172A !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #E2E8F0 !important;
}

/* Headings inside Landing Footer: Pure Crisp White */
footer.tapzi-landing-footer :is(h1, h2, h3, h4, h5, h6, strong, b, .font-heading),
footer[class*="bg-[#0F172A]"] :is(h1, h2, h3, h4, h5, h6, strong, b, .font-heading),
footer[class*="bg-[#0f172a]"] :is(h1, h2, h3, h4, h5, h6, strong, b, .font-heading),
footer[class*="tapzi-landing-footer"] :is(h1, h2, h3, h4, h5, h6, strong, b, .font-heading) {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Descriptions, Paragraphs, List items & Default text in Landing Footer: Crisp Silver-White */
footer.tapzi-landing-footer :is(p, span, li, div, .text-slate-400),
footer[class*="bg-[#0F172A]"] :is(p, span, li, div, .text-slate-400),
footer[class*="bg-[#0f172a]"] :is(p, span, li, div, .text-slate-400),
footer[class*="tapzi-landing-footer"] :is(p, span, li, div, .text-slate-400) {
  color: #CBD5E1 !important;
}

/* Navigation Links in Landing Footer */
footer.tapzi-landing-footer a,
footer[class*="bg-[#0F172A]"] a,
footer[class*="bg-[#0f172a]"] a,
footer[class*="tapzi-landing-footer"] a {
  color: #E2E8F0 !important;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out !important;
}

/* Link Hover: Shimmering Logo Lime */
footer.tapzi-landing-footer a:hover,
footer[class*="bg-[#0F172A]"] a:hover,
footer[class*="bg-[#0f172a]"] a:hover,
footer[class*="tapzi-landing-footer"] a:hover {
  color: #bef264 !important;
}

/* Highlighted Accent Links (Asha IT Solutions, Full Demo Hub, Pricing Calculator) */
footer.tapzi-landing-footer a[class*="text-orange"],
footer.tapzi-landing-footer a[class*="text-[#FF4D24]"],
footer[class*="bg-[#0F172A]"] a[class*="text-orange"],
footer[class*="bg-[#0F172A]"] a[class*="text-[#FF4D24]"],
footer[class*="bg-[#0f172a]"] a[class*="text-orange"],
footer[class*="tapzi-landing-footer"] a[class*="text-orange"] {
  color: #FB923C !important;
}

/* Muted Footnotes & Copyright */
footer.tapzi-landing-footer .text-slate-500,
footer.tapzi-landing-footer [class*="text-slate-500"],
footer[class*="bg-[#0F172A]"] .text-slate-500,
footer[class*="bg-[#0f172a]"] .text-slate-500,
footer[class*="tapzi-landing-footer"] .text-slate-500 {
  color: #94A3B8 !important;
}

/* Station Footers on Light Backgrounds (Counter, Kitchen, Waiter, Admin) */
html:not(.dark) footer:not(.tapzi-landing-footer):not(.bg-\[\#0F172A\]):not(.bg-\[\#0B0F17\]):not([class*="bg-[#0F172A]"]):not([class*="bg-[#0f172a]"]) {
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

html:not(.dark) footer:not(.tapzi-landing-footer):not(.bg-\[\#0F172A\]):not(.bg-\[\#0B0F17\]):not([class*="bg-[#0F172A]"]):not([class*="bg-[#0f172a]"]) :is(h1, h2, h3, h4, h5, h6, strong, b, .font-heading) {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html:not(.dark) footer:not(.tapzi-landing-footer):not(.bg-\[\#0F172A\]):not(.bg-\[\#0B0F17\]):not([class*="bg-[#0F172A]"]):not([class*="bg-[#0f172a]"]) :is(p, span, li, a, td, th) {
  color: #475569 !important;
}

html:not(.dark) footer:not(.tapzi-landing-footer):not(.bg-\[\#0F172A\]):not(.bg-\[\#0B0F17\]):not([class*="bg-[#0F172A]"]):not([class*="bg-[#0f172a]"]) a:hover {
  color: #FF4D24 !important;
}

html:not(.dark) footer:not(.tapzi-landing-footer):not(.bg-\[\#0F172A\]):not(.bg-\[\#0B0F17\]):not([class*="bg-[#0F172A]"]):not([class*="bg-[#0f172a]"]) :is(.text-\[\#94a3b8\], .text-slate-400, .text-slate-500) {
  color: #64748B !important;
}

/* Footers in Dark Mode (Pure Bright White Headings + Shimmering Lime Hovers) */
html.dark footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

html.dark footer :is(h1, h2, h3, h4, h5, h6, strong, b, .font-heading) {
  color: #FFFFFF !important;
}

html.dark footer :is(p, span, li, a) {
  color: #94A3B8 !important;
}

html.dark footer a:hover {
  color: #bef264 !important;
}

/* Button & Badge Text Contrast Protection */
html:not(.dark) .btn-flame,
html:not(.dark) .btn-flame *,
html:not(.dark) .btn-dark,
html:not(.dark) .btn-dark *,
html:not(.dark) .bg-emerald-600,
html:not(.dark) .bg-emerald-600 *,
html:not(.dark) .bg-emerald-500,
html:not(.dark) .bg-emerald-500 * {
  color: #FFFFFF !important;
}

/* High-contrast cyan accents in light mode */
html:not(.dark) .text-\[\#00f2fe\] {
  color: #0284c7 !important;
}

html:not(.dark) .bg-\[\#00f2fe\]\/10,
html:not(.dark) .bg-\[\#00f2fe\]\/15 {
  background-color: rgba(2, 132, 199, 0.1) !important;
}

html:not(.dark) .border-\[\#00f2fe\]\/30,
html:not(.dark) .border-\[\#00f2fe\]\/40 {
  border-color: rgba(2, 132, 199, 0.3) !important;
}

/* Borders in Light Mode */
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .border-white\/20,
html:not(.dark) .border-white\/5 {
  border-color: #E2E8F0 !important;
}

/* Inputs & Form Controls in Light Mode */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #FF4D24 !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 36, 0.15) !important;
  outline: none !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94A3B8 !important;
}

/* Modals, Dialog Windows & Lock Screens in Light Mode */
html:not(.dark) #camera-modal > div,
html:not(.dark) #customer-bill-modal > div,
html:not(.dark) #service-bell-modal > div,
html:not(.dark) #counter-bill-modal > div,
html:not(.dark) #item-customizer-modal > div,
html:not(.dark) #cart-modal > div,
html:not(.dark) #admin-add-table-modal > div,
html:not(.dark) #admin-menu-modal > div,
html:not(.dark) #admin-lock-screen > div,
html:not(.dark) #counter-lock-screen > div,
html:not(.dark) #kitchen-lock-screen > div,
html:not(.dark) #waiter-lock-screen > div,
html:not(.dark) #waiter-login-screen > div,
html:not(.dark) #add-waiter-modal > div {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}

html:not(.dark) #admin-lock-screen,
html:not(.dark) #counter-lock-screen,
html:not(.dark) #kitchen-lock-screen,
html:not(.dark) #waiter-lock-screen,
html:not(.dark) #waiter-login-screen {
  background-color: #F8FAFC !important;
}

/* Modals & Lock Screens in Dark Mode (Authentic Lime Accent & Obsidian Glass) */
html.dark :is(#admin-lock-screen, #counter-lock-screen, #kitchen-lock-screen, #waiter-lock-screen, #waiter-login-screen) {
  background-color: rgba(8, 9, 13, 0.92) !important;
  backdrop-filter: blur(12px) !important;
}

html.dark :is(#admin-lock-screen, #counter-lock-screen, #kitchen-lock-screen, #waiter-lock-screen, #waiter-login-screen) > div {
  background-color: #0E1322 !important;
  border-color: rgba(163, 230, 53, 0.4) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(132, 204, 22, 0.15) !important;
  color: #FFFFFF !important;
}

/* Preserve White Text on Solid Action Buttons */
html:not(.dark) .btn-cyan,
html:not(.dark) .btn-flame,
html:not(.dark) .btn-dark,
html:not(.dark) [class*="bg-emerald-600"],
html:not(.dark) [class*="bg-rose-500"],
html:not(.dark) [class*="bg-rose-600"],
html:not(.dark) [class*="bg-amber-500"] {
  color: #FFFFFF !important;
}

html:not(.dark) .btn-cyan *,
html:not(.dark) .btn-flame * {
  color: #FFFFFF !important;
}

/* Secondary Button Light Styling */
html:not(.dark) .btn-outline {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html:not(.dark) .btn-outline:hover {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* Quick Theme Toggle Buttons on Stations */
.station-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

html:not(.dark) .station-theme-btn {
  background-color: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #0F172A;
}

html:not(.dark) .station-theme-btn:hover {
  background-color: #E2E8F0;
}

html.dark .station-theme-btn {
  background-color: #0e111a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #bef264;
}

html.dark .station-theme-btn:hover {
  background-color: #121622;
  border-color: #bef264;
}

/* Floating Corner Theme Pill Switcher */
.floating-theme-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

html:not(.dark) .floating-theme-pill {
  background-color: #FFFFFF;
  border: 1.5px solid #FF4D24;
  color: #FF4D24;
}

html:not(.dark) .floating-theme-pill:hover {
  background-color: #FF4D24;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255, 77, 36, 0.35);
}

html.dark .floating-theme-pill {
  background: #0E1322;
  border: 1.5px solid #bef264;
  color: #bef264;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(132, 204, 22, 0.25);
}

html.dark .floating-theme-pill:hover {
  background: linear-gradient(135deg, #e6fc06 0%, #a3e635 100%);
  color: #07080c;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(132, 204, 22, 0.5);
}