/* ==========================================================================
   SecretMsg Dynamic Design System & Global Theme Engine
   Supports: Dark Mode (Default) | Light Mode (Ultra-Readable Premium) | System
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg-color: #0B0E14;
  --surface-dim: #10131A;
  --surface-card: #151B26;
  --text-main: #FFFFFF;
  --text-muted: #94A3B8;
  --border-hairline: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(21, 27, 38, 0.72);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hover-bg: rgba(28, 36, 50, 0.85);
  --nav-bg: rgba(11, 14, 20, 0.92);
  --primary-btn-bg: #FFFFFF;
  --primary-btn-text: #0B0E14;
  --pill-inactive-text: #94A3B8;
}

html.light {
  color-scheme: light;
  --bg-color: #F8FAFC;
  --surface-dim: #F1F5F9;
  --surface-card: #FFFFFF;
  --text-main: #0F172A;
  --text-muted: #475569;
  --border-hairline: #E2E8F0;
  --glass-bg: #FFFFFF;
  --glass-border: #E2E8F0;
  --glass-hover-bg: #FFFFFF;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --primary-btn-bg: #0F172A;
  --primary-btn-text: #FFFFFF;
  --pill-inactive-text: #475569;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

/* --------------------------------------------------------------------------
   Material Symbols & Icon Typography Engine
   Guarantees resilient glyph rendering even during slow network / CDN failure
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v369/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v369/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHeem.ttf') format('truetype');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Canvas, Body & Viewports
   -------------------------------------------------------------------------- */
.mobile-viewport {
  max-width: 440px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  background-color: var(--bg-color);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

html.light,
html.light body {
  background-color: #F8FAFC !important;
  color: #1E293B !important;
  background-image: radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
                    radial-gradient(at 0% 100%, rgba(236, 72, 153, 0.04) 0px, transparent 50%);
  background-attachment: fixed;
}

html.light .mobile-viewport {
  background-color: #FFFFFF !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

/* --------------------------------------------------------------------------
   Cards, Panels & Glassmorphism
   -------------------------------------------------------------------------- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid var(--glass-border);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.glass-panel-hover {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-hover:hover {
  background: var(--glass-hover-bg);
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}

html.light .glass-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 12px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

html.light .glass-panel-hover:hover {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.04) !important;
  transform: translateY(-2px);
}

.hairline-border {
  border: 0.5px solid var(--border-hairline);
}

/* --------------------------------------------------------------------------
   Light Mode: Comprehensive Surface Adaptations
   -------------------------------------------------------------------------- */
html.light .bg-\[\#0B0E14\],
html.light .bg-\[\#0B0E14\]\/80,
html.light .bg-\[\#0B0E14\]\/85,
html.light .bg-\[\#0B0E14\]\/90,
html.light .bg-\[\#0B0E14\]\/95 {
  background-color: #F8FAFC !important;
}

html.light .bg-\[\#10131A\],
html.light .bg-\[\#151B26\],
html.light .bg-\[\#1d2026\],
html.light .bg-\[\#272a31\],
html.light .bg-slate-900,
html.light .bg-slate-950 {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.light .bg-\[\#0E121A\],
html.light .bg-\[\#0E121A\]\/60,
html.light .bg-\[\#0E121A\]\/70,
html.light section[class*="bg-\[\#0E121A\]"],
html.light section.bg-white\/\[0\.02\] {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

html.light .bg-white\/5,
html.light .bg-white\/10 {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/15,
html.light .border-white\/20,
html.light .border-white\/30 {
  border-color: #E2E8F0 !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Headers, Navigation, & Footers
   -------------------------------------------------------------------------- */
html.light header,
html.light nav {
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: #E2E8F0 !important;
}

html.light footer,
html.light footer.bg-\[\#07090D\] {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

html.light footer h5,
html.light footer .text-white {
  color: #0F172A !important;
}

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

/* --------------------------------------------------------------------------
   Light Mode: Typography & Headings (High-Contrast & WCAG Compliant)
   -------------------------------------------------------------------------- */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light strong,
html.light b,
html.light summary,
html.light th {
  color: #0F172A !important;
}

html.light p,
html.light li,
html.light dd,
html.light dt,
html.light td,
html.light label {
  color: #334155;
}

/* Inversion of text classes from dark to light mode */
html.light .text-white {
  color: #0F172A;
}

html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300,
html.light .text-gray-100,
html.light .text-gray-200,
html.light .text-gray-300 {
  color: #334155 !important;
}

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

html.light .text-slate-600,
html.light .text-gray-600 {
  color: #334155 !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Colored Text Shift (-300 / -400 to Deep Readable -700 / -800)
   -------------------------------------------------------------------------- */
html.light .text-indigo-300,
html.light .text-indigo-400 {
  color: #4338CA !important; /* indigo-700 */
}

html.light .text-sky-300,
html.light .text-sky-400,
html.light .text-blue-300,
html.light .text-blue-400 {
  color: #0369A1 !important; /* sky-700 */
}

html.light .text-emerald-300,
html.light .text-emerald-400,
html.light .text-green-300,
html.light .text-green-400 {
  color: #047857 !important; /* emerald-700 */
}

html.light .text-amber-300,
html.light .text-amber-400,
html.light .text-yellow-300,
html.light .text-yellow-400 {
  color: #B45309 !important; /* amber-700 */
}

html.light .text-rose-300,
html.light .text-rose-400,
html.light .text-red-300,
html.light .text-red-400 {
  color: #BE123C !important; /* rose-700 */
}

html.light .text-purple-300,
html.light .text-purple-400,
html.light .text-violet-300,
html.light .text-violet-400 {
  color: #7E22CE !important; /* purple-700 */
}

html.light .text-pink-300,
html.light .text-pink-400 {
  color: #BE185D !important; /* pink-700 */
}

html.light .text-teal-300,
html.light .text-teal-400 {
  color: #0F766E !important; /* teal-700 */
}

/* Vivid chromatic gradient headline in light mode */
html.light .gradient-text {
  background: linear-gradient(135deg, #4338CA 0%, #7C3AED 50%, #DB2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Atmospheric lighting in light mode */
html.light .hero-glow {
  background: radial-gradient(circle 600px at 50% 0%, rgba(99, 102, 241, 0.12) 0%, rgba(236, 72, 153, 0.06) 45%, transparent 70%) !important;
}

html.light .demo-glow {
  background: radial-gradient(circle 600px at 50% 0%, rgba(99, 102, 241, 0.10) 0%, rgba(168, 85, 247, 0.05) 50%, transparent 70%) !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Alert Callout Banners & Badges
   -------------------------------------------------------------------------- */
html.light [class*="bg-emerald-950"],
html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/20 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}
html.light [class*="bg-emerald-950"] p,
html.light [class*="bg-emerald-950"] span,
html.light .bg-emerald-500\/10 p,
html.light .bg-emerald-500\/10 span {
  color: #065F46 !important;
}
html.light [class*="bg-emerald-950"] h3,
html.light [class*="bg-emerald-950"] strong,
html.light .bg-emerald-500\/10 h3,
html.light .bg-emerald-500\/10 strong {
  color: #047857 !important;
}

html.light [class*="bg-rose-950"],
html.light .bg-rose-500\/10,
html.light .bg-rose-500\/20 {
  background-color: #FFF1F2 !important;
  border-color: #FECDD3 !important;
}
html.light [class*="bg-rose-950"] p,
html.light [class*="bg-rose-950"] span,
html.light .bg-rose-500\/10 p,
html.light .bg-rose-500\/10 span {
  color: #9F1239 !important;
}
html.light [class*="bg-rose-950"] h3,
html.light [class*="bg-rose-950"] strong,
html.light .bg-rose-500\/10 h3,
html.light .bg-rose-500\/10 strong {
  color: #BE123C !important;
}

html.light [class*="bg-amber-950"],
html.light .bg-amber-500\/10,
html.light .bg-amber-500\/20 {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
}
html.light [class*="bg-amber-950"] p,
html.light [class*="bg-amber-950"] span,
html.light .bg-amber-500\/10 p,
html.light .bg-amber-500\/10 span {
  color: #92400E !important;
}
html.light [class*="bg-amber-950"] h3,
html.light [class*="bg-amber-950"] strong,
html.light .bg-amber-500\/10 h3,
html.light .bg-amber-500\/10 strong {
  color: #B45309 !important;
}

html.light [class*="bg-indigo-950"],
html.light .bg-indigo-500\/10,
html.light .bg-indigo-500\/20 {
  background-color: #EEF2FF !important;
  border-color: #C7D2FE !important;
}
html.light [class*="bg-indigo-950"] p,
html.light [class*="bg-indigo-950"] span,
html.light .bg-indigo-500\/10 p,
html.light .bg-indigo-500\/10 span {
  color: #3730A3 !important;
}
html.light [class*="bg-indigo-950"] h3,
html.light [class*="bg-indigo-950"] strong,
html.light .bg-indigo-500\/10 h3,
html.light .bg-indigo-500\/10 strong {
  color: #4338CA !important;
}

html.light [class*="bg-sky-950"],
html.light .bg-sky-500\/10,
html.light .bg-sky-500\/20 {
  background-color: #F0F9FF !important;
  border-color: #BAE6FD !important;
}
html.light [class*="bg-sky-950"] p,
html.light [class*="bg-sky-950"] span,
html.light .bg-sky-500\/10 p,
html.light .bg-sky-500\/10 span {
  color: #075985 !important;
}
html.light [class*="bg-sky-950"] h3,
html.light [class*="bg-sky-950"] strong,
html.light .bg-sky-500\/10 h3,
html.light .bg-sky-500\/10 strong {
  color: #0369A1 !important;
}

html.light [class*="bg-purple-950"],
html.light .bg-purple-500\/10,
html.light .bg-purple-500\/20 {
  background-color: #FAF5FF !important;
  border-color: #E9D5FF !important;
}
html.light [class*="bg-purple-950"] p,
html.light [class*="bg-purple-950"] span,
html.light .bg-purple-500\/10 p,
html.light .bg-purple-500\/10 span {
  color: #6B21A8 !important;
}
html.light [class*="bg-purple-950"] h3,
html.light [class*="bg-purple-950"] strong,
html.light .bg-purple-500\/10 h3,
html.light .bg-purple-500\/10 strong {
  color: #7E22CE !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Button & Action Elements
   -------------------------------------------------------------------------- */
/* 1. All colored / gradient / dark action buttons retain crisp white text */
html.light button[class*="bg-gradient-"],
html.light a[class*="bg-gradient-"],
html.light button[class*="from-"],
html.light a[class*="from-"],
html.light [class*="bg-indigo-600"],
html.light [class*="bg-purple-600"],
html.light [class*="bg-rose-500"],
html.light [class*="bg-rose-600"],
html.light [class*="bg-emerald-500"],
html.light [class*="bg-emerald-600"],
html.light [class*="bg-black"],
html.light [class*="bg-[#25D366]"],
html.light [class*="bg-[#1877F2]"],
html.light .btn-primary,
html.light .keep-white {
  color: #FFFFFF !important;
}

html.light button[class*="bg-gradient-"] *,
html.light a[class*="bg-gradient-"] *,
html.light button[class*="from-"] *,
html.light a[class*="from-"] *,
html.light [class*="bg-indigo-600"] *,
html.light [class*="bg-purple-600"] *,
html.light [class*="bg-rose-500"] *,
html.light [class*="bg-rose-600"] *,
html.light [class*="bg-emerald-500"] *,
html.light [class*="bg-emerald-600"] *,
html.light [class*="bg-black"] *,
html.light [class*="bg-[#25D366]"] *,
html.light [class*="bg-[#1877F2]"] *,
html.light .keep-white * {
  color: #FFFFFF !important;
}

/* 2. Primary White Action Buttons in Dark Mode -> Deep Slate #0F172A in Light Mode */
html.light button.bg-white,
html.light a.bg-white,
html.light form button[type="submit"].bg-white,
html.light [id*="-create-btn"].bg-white,
html.light button.text-\[\#0B0E14\].bg-white,
html.light a.text-\[\#0B0E14\].bg-white {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}

html.light button.bg-white:hover,
html.light a.bg-white:hover,
html.light form button[type="submit"].bg-white:hover {
  background-color: #1E293B !important;
  color: #FFFFFF !important;
}

html.light button.bg-white *,
html.light a.bg-white *,
html.light form button[type="submit"].bg-white * {
  color: #FFFFFF !important;
}

/* 3. Secondary Ghost Action Buttons in Light Mode */
html.light button.bg-white\/10,
html.light a.bg-white\/10 {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html.light button.bg-white\/10:hover,
html.light a.bg-white\/10:hover {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

html.light button.bg-white\/10 *,
html.light a.bg-white\/10 * {
  color: #0F172A !important;
}

/* 4. Containers with bg-white remain Pure Crisp White Cards */
html.light div.bg-white,
html.light section.bg-white {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

html.light span.bg-white {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Form Inputs, Textareas & Monospace Slugs
   -------------------------------------------------------------------------- */
html.light input,
html.light textarea,
html.light select {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html.light input:focus,
html.light textarea:focus,
html.light select:focus {
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
  outline: none !important;
}

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

html.light .font-mono.text-slate-500 {
  color: #475569 !important;
}

/* Code blocks & Monospace text */
html.light code,
html.light kbd {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  padding: 0.15rem 0.35rem !important;
  border-radius: 0.375rem !important;
}

html.light pre {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Settings Switch Toggles
   -------------------------------------------------------------------------- */
html.light .w-11.h-6.bg-slate-800 {
  background-color: #CBD5E1 !important;
}

html.light .peer:checked ~ .w-11.h-6.bg-slate-800 {
  background-color: #4F46E5 !important;
}

/* --------------------------------------------------------------------------
   Light Mode: Accordions & Details
   -------------------------------------------------------------------------- */
html.light details {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.light details[open] {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}

html.light summary {
  color: #0F172A !important;
}

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

/* Modals */
html.light [id*="modal"] > div {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

/* --------------------------------------------------------------------------
   Theme Selector & Utility Styles
   -------------------------------------------------------------------------- */
.theme-btn-active {
  background-color: #FFFFFF !important;
  color: #0B0E14 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

html.light .theme-btn-active {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2) !important;
}

html.light .theme-btn-active * {
  color: #FFFFFF !important;
}

html.light [data-theme-icon] {
  color: #475569 !important;
}

html.light [data-theme-icon]:hover {
  color: #0F172A !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pb-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Toast Notifications */
.toast-notice {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--primary-btn-bg);
  color: var(--primary-btn-text);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-notice.show {
  transform: translateX(-50%) translateY(0);
}

html.light .toast-notice {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25) !important;
}

/* ==========================================================================
   Light Mode: Landing Page Final Section (.landing-cta-section)
   Fixes dark-on-dark unreadable text and renders high-contrast radiant theme
   ========================================================================== */
html.light .landing-cta-section,
html.light section.landing-cta-section,
html.light section[class*="from-[#0B0E14]"][class*="to-[#0B0E14]"] {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 50%, #F1F5F9 100%) !important;
  background-image: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 50%, #F1F5F9 100%) !important;
  border-top: 1px solid #E2E8F0 !important;
}

html.light .landing-cta-section h2,
html.light section[class*="from-[#0B0E14]"][class*="to-[#0B0E14]"] h2 {
  color: #0F172A !important;
}

html.light .landing-cta-section p,
html.light section[class*="from-[#0B0E14]"][class*="to-[#0B0E14]"] p {
  color: #475569 !important;
}

html.light .cta-brand-badge,
html.light .landing-cta-section .w-14.h-14 {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
}

html.light .cta-at-symbol,
html.light .landing-cta-section span.text-slate-500 {
  color: #64748B !important;
}

html.light input#claim-username-cta,
html.light .landing-cta-section input {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.light input#claim-username-cta::placeholder,
html.light .landing-cta-section input::placeholder {
  color: #94A3B8 !important;
}

html.light .cta-submit-btn,
html.light .landing-cta-section button[type="submit"] {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
}

html.light .cta-submit-btn:hover,
html.light .landing-cta-section button[type="submit"]:hover {
  background-color: #1E293B !important;
}

/* ==========================================================================
   Light Mode: Interactive Demo Sandbox (/demo)
   Guarantees all text, chips, inputs, modals, and dynamic cards are ultra-legible
   ========================================================================== */
html.light .demo-sandbox-banner {
  background-color: #EEF2FF !important;
  border-bottom: 1px solid #C7D2FE !important;
}

html.light .demo-sandbox-banner .text-indigo-300,
html.light .demo-sandbox-banner span,
html.light .demo-sandbox-banner strong {
  color: #312E81 !important;
}

html.light .demo-sandbox-banner button {
  color: #4338CA !important;
}

html.light .demo-creator-avatar {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
}

html.light .demo-creator-handle {
  color: #0F172A !important;
}

/* Active Prompt Card in Composer */
html.light .demo-prompt-box,
html.light .bg-\[\#10131A\] {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

html.light #demo-prompt-tag {
  color: #4338CA !important;
}

html.light #demo-active-prompt {
  color: #0F172A !important;
}

html.light .demo-prompt-box span.text-slate-500 {
  color: #64748B !important;
}

/* Vibe Chips and Filter Pills */
html.light .demo-vibe-chip,
html.light .demo-inbox-filter {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

html.light .demo-vibe-chip:hover,
html.light .demo-inbox-filter:hover {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

html.light .demo-vibe-chip.bg-white,
html.light .demo-inbox-filter.bg-white {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15) !important;
}

/* Composer Textarea */
html.light #demo-input-text {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.light #demo-input-text::placeholder {
  color: #94A3B8 !important;
}

html.light #demo-char-count {
  color: #64748B !important;
}

html.light .demo-shuffle-btn {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light .demo-shuffle-btn:hover {
  background-color: #E2E8F0 !important;
}

/* Inbox Count Badge */
html.light #demo-inbox-count {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Inbox Message Cards & Hover State */
html.light #demo-messages-container .glass-panel,
html.light .demo-message-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

html.light #demo-messages-container .glass-panel:hover,
html.light .demo-message-card:hover {
  border-color: #818CF8 !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12) !important;
}

html.light #demo-messages-container .demo-msg-text,
html.light #demo-messages-container p {
  color: #0F172A !important;
}

/* Fix the disappearing white text on hover */
html.light #demo-messages-container .group:hover .demo-msg-text,
html.light #demo-messages-container .group:hover p {
  color: #4338CA !important;
}

html.light .demo-msg-pill,
html.light #demo-messages-container span.bg-white\/10 {
  background-color: #EEF2FF !important;
  color: #4338CA !important;
  border: 1px solid #C7D2FE !important;
}

html.light .demo-msg-time {
  color: #64748B !important;
}

html.light .demo-msg-footer {
  border-top-color: #F1F5F9 !important;
}

html.light .demo-msg-footer span {
  color: #64748B !important;
}

html.light #demo-messages-container .group:hover .demo-msg-footer span {
  color: #4338CA !important;
}

/* 3D Dice Showcase Box */
html.light .demo-roulette-box {
  background-color: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
}

html.light #roulette-dice-vibe {
  color: #B45309 !important;
}

html.light #roulette-dice-text {
  color: #1E293B !important;
}

html.light .demo-glass-action-btn {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light .demo-glass-action-btn:hover {
  background-color: #E2E8F0 !important;
  color: #000000 !important;
}

/* Double-Blind Reply Modal */
html.light #demo-reply-modal {
  background-color: rgba(15, 23, 42, 0.55) !important;
}

html.light #demo-reply-modal .glass-panel {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

html.light #modal-msg-vibe {
  color: #0F172A !important;
}

html.light .demo-modal-msg-box,
html.light #demo-reply-modal .bg-white\/5 {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

html.light #modal-msg-content {
  color: #0F172A !important;
}

html.light #modal-msg-time {
  color: #64748B !important;
}

html.light #modal-reply-input {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light #modal-reply-input::placeholder {
  color: #94A3B8 !important;
}

html.light .demo-modal-close-btn,
html.light #demo-reply-modal button[onclick="closeReplyModal()"] {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

html.light #demo-reply-modal button[onclick="sendDemoReply()"] {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
}

/* Sticky Claim Bar on Demo Page */
html.light .demo-sticky-bar {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
}

html.light .demo-sticky-bar span.text-white {
  color: #0F172A !important;
}

html.light .demo-sticky-bar span.text-slate-400 {
  color: #475569 !important;
}

html.light #demo-claim-input {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

html.light #demo-claim-input::placeholder {
  color: #94A3B8 !important;
}

html.light .demo-sticky-bar button[type="submit"] {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
}

/* Header Action & Brand Badge Contrast in Light Mode */
html.light header a[href="/#create"],
html.light header a[href="#create"] {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

html.light header a[href="/#create"]:hover,
html.light header a[href="#create"]:hover {
  background-color: #1E293B !important;
}

html.light header .w-8.h-8.bg-white,
html.light footer .w-6.h-6.bg-white,
html.light footer .w-7.h-7.bg-white {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
}