/* ==========================================================================
   DOGEINVEST — global styles
   Tailwind is loaded via CDN; this file holds fonts, keyframe animations,
   and small utilities that the CDN build does not provide out of the box.
   ========================================================================== */

:root {
  --font-sans: "JetBrains Mono", monospace;
  --font-poppins: "Poppins", sans-serif;
  --font-heading: "Space Grotesk", sans-serif;
  --color-emerald: #19B56B;
  --color-emerald-dim: rgba(25, 181, 107, 0.1);
  --color-mint: #DDF7EA;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
}

/* ==========================================================================
   Theme variables — Dark (default)
   ========================================================================== */
[data-theme="dark"],
:root:not([data-theme="light"]) {
  --color-bg: #000000;
  --color-bg-elevated: #0A0A0A;
  --color-bg-card: rgba(255, 255, 255, 0.04);
  --color-bg-hover: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-text: #ffffff;
  --color-text-muted: #A1A1AA;
  --color-text-dim: #71717A;
  --color-text-inverse: #000000;
  --color-sidebar-bg: #19B56B;
  --color-sidebar-text: #000000;
  --color-sidebar-text-muted: rgba(0, 0, 0, 0.6);
  --color-sidebar-border: rgba(0, 0, 0, 0.1);
  --color-header-bg: #19B56B;
  --color-header-border: rgba(0, 0, 0, 0.1);
  --color-input-bg: rgba(255, 255, 255, 0.04);
  --color-input-border: rgba(255, 255, 255, 0.08);
  --color-input-focus-border: #19B56B;
  --color-input-focus-bg: rgba(255, 255, 255, 0.06);
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-modal-bg: #0A0A0A;
  --color-modal-border: rgba(255, 255, 255, 0.06);
  --color-tooltip-bg: #0A0A0A;
  --color-tooltip-border: rgba(255, 255, 255, 0.1);
  --color-scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
  --color-nav-bg: rgba(0, 0, 0, 0.8);
  --color-nav-border: rgba(255, 255, 255, 0.06);
  --color-footer-bg: #050505;
  --color-footer-ticker-bg: #19B56B;
  --color-footer-ticker-text: #000000;
  --color-success: #19B56B;
  --color-success-bg: rgba(25, 181, 107, 0.15);
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-error-bg: rgba(220, 38, 38, 0.15);
  --color-info-bg: rgba(59, 130, 246, 0.15);
}

/* ==========================================================================
   Theme variables — Light
   ========================================================================== */
[data-theme="light"] {
  --color-bg: #FAFAFA;
  --color-bg-elevated: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F5F5F5;
  --color-border: #E5E5E5;
  --color-border-strong: #D4D4D4;
  --color-text: #0A0A0A;
  --color-text-muted: #525252;
  /* #737373 hits 4.74:1 on pure white but drops to 4.31:1 on the faintly
     tinted card surfaces, which fails AA. #6B6B6B clears it everywhere. */
  --color-text-dim: #6B6B6B;
  --color-text-inverse: #FFFFFF;
  --color-sidebar-bg: #FFFFFF;
  --color-sidebar-text: #0A0A0A;
  --color-sidebar-text-muted: #737373;
  --color-sidebar-border: #E5E5E5;
  --color-header-bg: #FFFFFF;
  --color-header-border: #E5E5E5;
  --color-input-bg: #FFFFFF;
  --color-input-border: #E5E5E5;
  --color-input-focus-border: #19B56B;
  --color-input-focus-bg: #F5F5F5;
  --color-overlay: rgba(0, 0, 0, 0.3);
  --color-modal-bg: #FFFFFF;
  --color-modal-border: #E5E5E5;
  --color-tooltip-bg: #0A0A0A;
  --color-tooltip-border: #E5E5E5;
  --color-scrollbar-thumb: #D4D4D4;
  --color-scrollbar-thumb-hover: #A3A3A3;
  --color-nav-bg: rgba(255, 255, 255, 0.9);
  --color-nav-border: #E5E5E5;
  --color-footer-bg: #FFFFFF;
  --color-footer-ticker-bg: #19B56B;
  --color-footer-ticker-text: #000000;
  --color-success: #159C5B;
  --color-success-bg: rgba(25, 181, 107, 0.1);
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-error-bg: rgba(220, 38, 38, 0.1);
  --color-info-bg: rgba(59, 130, 246, 0.1);
}

html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   Page Loader — premium
   ========================================================================== */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s cubic-bezier(.22,1,.36,1), visibility 0.5s ease;
  overflow: hidden;
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(25,181,107,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,181,107,.08) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 75%);
  pointer-events:none;
}
.page-loader::after{
  content:'';
  position:absolute;inset:0;
  background: radial-gradient(ellipse 600px 400px at 50% 50%, rgba(25,181,107,.09), transparent 70%);
  pointer-events:none;
}
.page-loader__inner {
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-loader__logo {
  width: 72px;
  height: 72px;
  background: var(--color-emerald);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  position: relative;
  animation: loader-logo 1.8s cubic-bezier(.22,1,.36,1) infinite;
  box-shadow: 0 0 0 0 rgba(25,181,107,.4), 0 8px 32px -8px rgba(25,181,107,.4);
}
.page-loader__logo::before{
  content:'';
  position:absolute;inset:-6px;
  border: 1.5px dashed rgba(25,181,107,.25);
  border-radius: 24px;
  animation: spin-slow 8s linear infinite;
}
.page-loader__logo::after{
  content:'';
  position:absolute;inset:-12px;
  border: 1px solid rgba(25,181,107,.08);
  border-radius: 28px;
  animation: spin-slow 14s linear infinite reverse;
}
.page-loader__logo-inner {
  width: 20px;
  height: 20px;
  background: #000000;
  border-radius: 50%;
  position: relative;
  animation: loader-dot 1.4s ease-in-out infinite;
}
.page-loader__logo-inner::after{
  content:'';
  position:absolute;inset:-4px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius:50%;
}
@keyframes loader-logo{
  0%,100%{ transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(25,181,107,.35), 0 8px 32px -8px rgba(25,181,107,.35); }
  50%{ transform: scale(1.04) rotate(1deg); box-shadow: 0 0 0 12px rgba(25,181,107,0), 0 12px 40px -8px rgba(25,181,107,.45); }
}
@keyframes loader-dot{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(0.88); opacity:.9; }
}
.page-loader__text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.page-loader__sub{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 8px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.page-loader__sub-dot{
  width:6px;height:6px;border-radius:50%;background:var(--color-emerald);
  box-shadow:0 0 8px rgba(25,181,107,.6);
  animation: pulse-glow 1.6s infinite;
}
.page-loader__bar {
  width: 220px;
  height: 3px;
  background: var(--color-border);
  border-radius: 999px;
  margin: 32px auto 0;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-border-strong);
}
.page-loader__progress {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-emerald), #0F9A59);
  border-radius: 999px;
  animation: loader-progress 1.35s cubic-bezier(.22,1,.36,1) forwards;
  position: relative;
  overflow:hidden;
}
.page-loader__progress::after{
  content:'';
  position:absolute;inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%);
  animation: loader-shimmer 1.1s ease-in-out infinite;
}
@keyframes loader-progress {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes loader-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(200%); }
}
.page-loader__percent{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 12px;
  letter-spacing: .08em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Poppins as an accent font for buttons and nav links */
button,
nav a,
.font-poppins {
  font-family: var(--font-poppins);
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                          */
/* ------------------------------------------------------------------ */
@keyframes scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes scroll-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 rgba(25, 181, 107, 0.4); }
  70%  { box-shadow: 0 0 0 15px rgba(25, 181, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 181, 107, 0); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Reduced motion support                                             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .page-loader { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Animation utility classes                                          */
/* ------------------------------------------------------------------ */
.animate-scroll-up   { animation: scroll-up 25s linear infinite; }
.animate-scroll-down { animation: scroll-down 25s linear infinite; }
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-pulse-glow  { animation: pulse-glow 2s infinite; }
.animate-spin-slow   { animation: spin-slow 15s linear infinite; }
.animate-spin        { animation: spin 1s linear infinite; }
.animate-fade-up     { animation: fade-up 0.6s cubic-bezier(.22,1,.36,1) forwards; }
.animate-slide-up    { animation: slide-up 0.4s cubic-bezier(.22,1,.36,1) forwards; }
.animate-scale-in    { animation: scale-in 0.3s cubic-bezier(.22,1,.36,1) forwards; }

.hover-pause:hover { animation-play-state: paused; }

/* Entrance reveal — elements with .reveal fade+rise into view */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal delays */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.4s; }

/* ------------------------------------------------------------------ */
/* Focus states - accessibility                                       */
/* ------------------------------------------------------------------ */
*:focus-visible {
  outline: 2px solid #19B56B;
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #19B56B;
  outline-offset: 2px;
}

/* Custom focus for specific elements */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 181, 107, 0.4);
}
.focus-ring-green:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 181, 107, 0.5);
}

/* ------------------------------------------------------------------ */
/* Enhanced button states                                             */
/* ------------------------------------------------------------------ */
.btn-primary {
  @apply bg-[#19B56B] text-black font-bold rounded-full transition-all duration-200;
}
.btn-primary:hover { @apply bg-[#159c5b] shadow-[0_4px_14px_0_rgba(25,181,107,0.35)]; }
.btn-primary:active { @apply scale-[0.98]; }
.btn-primary:disabled { @apply opacity-50 cursor-not-allowed; }

.btn-secondary {
  background-color: var(--color-bg-hover);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  @apply font-semibold rounded-full transition-all duration-200;
}
.btn-secondary:hover {
  background-color: var(--color-bg-card);
  border-color: rgba(25, 181, 107, 0.3);
  color: var(--color-text);
}

.btn-ghost {
  color: var(--color-text-dim);
  @apply hover:bg-white/[0.06] rounded-full transition-all duration-200;
}
[data-theme="light"] .btn-ghost {
  @apply hover:bg-black/10;
}

/* ------------------------------------------------------------------ */
/* Card hover effects                                                 */
/* ------------------------------------------------------------------ */
.card-interactive {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  @apply rounded-2xl transition-all duration-300;
}
.card-interactive:hover {
  border-color: rgba(25, 181, 107, 0.25);
  background-color: var(--color-bg-hover);
}

/* ------------------------------------------------------------------ */
/* Status pill variants                                               */
/* ------------------------------------------------------------------ */
.pill-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  @apply text-xs font-semibold px-2 py-1 rounded-full;
}
.pill-warning {
  background-color: var(--color-warning-bg);
  color: #F59E0B;
  @apply text-xs font-semibold px-2 py-1 rounded-full;
}
.pill-error {
  background-color: var(--color-error-bg);
  color: #DC2626;
  @apply text-xs font-semibold px-2 py-1 rounded-full;
}
.pill-info {
  background-color: var(--color-info-bg);
  color: #3B82F6;
  @apply text-xs font-semibold px-2 py-1 rounded-full;
}
.pill-neutral {
  background-color: var(--color-bg-hover);
  color: var(--color-text-dim);
  @apply text-xs font-semibold px-2 py-1 rounded-full;
}

/* ------------------------------------------------------------------ */
/* Form input enhancements                                            */
/* ------------------------------------------------------------------ */
.input-field {
  @apply w-full rounded-xl px-4 py-3 text-sm transition-all duration-200;
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  color: var(--color-text);
}
.input-field:focus {
  border-color: var(--color-input-focus-border);
  background-color: var(--color-input-focus-bg);
  @apply outline-none ring-1;
  ring-color: var(--color-input-focus-border);
}
.input-field::placeholder {
  color: var(--color-text-dim);
}

/* ------------------------------------------------------------------ */
/* Misc utilities                                                     */
/* ------------------------------------------------------------------ */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Footer + hero ticker — shared */
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Remove number input spinners for a cleaner money field */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ------------------------------------------------------------------ */
/* Modal backdrop animation                                           */
/* ------------------------------------------------------------------ */
.modal-backdrop {
  animation: fade-up 0.2s ease-out forwards;
}
.modal-content {
  animation: scale-in 0.25s cubic-bezier(.22,1,.36,1) forwards;
}

/* ------------------------------------------------------------------ */
/* Loading skeleton                                                   */
/* ------------------------------------------------------------------ */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-hover) 25%, var(--color-border) 50%, var(--color-bg-hover) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------------ */
/* Tooltip                                                            */
/* ------------------------------------------------------------------ */
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--color-tooltip-bg);
  border: 1px solid var(--color-tooltip-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  transform: translateX(-50%) translateY(4px);
  z-index: 100;
  pointer-events: none;
}
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------------ */
/* Empty state                                                        */
/* ------------------------------------------------------------------ */
.empty-state {
  @apply flex flex-col items-center justify-center py-14 text-center;
}
.empty-state-icon {
  @apply w-16 h-16 rounded-full flex items-center justify-center mb-5;
  background-color: var(--color-success-bg);
}
.empty-state-title {
  @apply font-heading text-[20px] font-bold mb-2;
  color: var(--color-text);
}
.empty-state-desc {
  @apply text-[14px] mb-7 max-w-xs;
  color: var(--color-text-dim);
}

/* ------------------------------------------------------------------ */
/* Table enhancements                                                 */
/* ------------------------------------------------------------------ */
.data-table {
  @apply w-full text-left text-sm whitespace-nowrap;
}
.data-table th {
  @apply px-6 py-4 text-xs font-semibold uppercase tracking-wider;
  color: var(--color-text-dim);
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}
.data-table td {
  @apply px-6 py-4;
  border-bottom: 1px solid var(--color-border);
}
.data-table tbody tr {
  @apply transition-colors;
}
[data-theme="dark"] .data-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .data-table tbody tr:hover {
  background-color: #F5F5F5;
}
.data-table tbody tr:last-child td {
  @apply border-b-0;
}

/* ------------------------------------------------------------------ */
/* Mobile compact — dashboard & cards                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  #main { padding: 12px !important; }
  #page { gap: 12px !important; }
  /* shrink headings */
  h1 { font-size: 18px !important; line-height: 1.2 !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 14px !important; }
  /* compact stat grids */
  .grid { gap: 10px !important; }
  /* ensure wallet metrics readable but compact */
  #page .bg-white\/\[0\.04\] { border-radius: 14px !important; }
}

/* DOGEINVEST: make all <select> dropdown text black (white bg for readability) */
select { color: #000 !important; background-color: #fff !important; }

/* ==========================================================================
   LIGHT MODE — Tailwind utility bridge
   --------------------------------------------------------------------------
   The palette above is defined as CSS variables, but the pages are built from
   hardcoded Tailwind utilities (bg-black, text-white, bg-white/[0.04] …) in
   string-concatenated JS — ~2,900 usages across 60+ files. Rewriting each one
   is impractical without a build step, so this layer remaps those literal
   classes when [data-theme="light"] is set.

   Dark remains the default: with no data-theme attribute nothing here applies.

   !important is used deliberately — Tailwind's Play CDN injects its utilities
   at runtime and this must win regardless of injection order.
   ========================================================================== */

/* ---- Page + elevated surfaces ---- */
[data-theme="light"] body,
[data-theme="light"] .bg-black,
[data-theme="light"] .bg-\[\#000\],
[data-theme="light"] .bg-\[\#050505\],
[data-theme="light"] .bg-\[\#070707\] {
  background-color: var(--color-bg) !important;
}

[data-theme="light"] .bg-\[\#0A0A0A\],
[data-theme="light"] .bg-\[\#0D0D0D\],
[data-theme="light"] .bg-\[\#111\] {
  background-color: var(--color-bg-elevated) !important;
}

[data-theme="light"] .bg-\[\#222\],
[data-theme="light"] .bg-\[\#333\] {
  background-color: #EFEFEF !important;
}

/* ---- Translucent white fills become subtle dark tints ---- */
[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.015) !important; }
[data-theme="light"] .bg-white\/\[0\.04\],
[data-theme="light"] .bg-white\/5      { background-color: #FFFFFF !important; }
[data-theme="light"] .bg-white\/\[0\.06\],
[data-theme="light"] .bg-white\/\[0\.08\] { background-color: #F4F4F5 !important; }
[data-theme="light"] .bg-white\/\[0\.1\],
[data-theme="light"] .bg-white\/\[0\.12\],
[data-theme="light"] .bg-white\/10     { background-color: #E9E9EB !important; }

[data-theme="light"] .hover\:bg-white\/\[0\.04\]:hover { background-color: #F7F7F8 !important; }
[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover { background-color: #F0F0F1 !important; }
[data-theme="light"] .hover\:bg-white\/\[0\.08\]:hover,
[data-theme="light"] .hover\:bg-white\/\[0\.1\]:hover,
[data-theme="light"] .hover\:bg-white\/\[0\.12\]:hover { background-color: #E4E4E7 !important; }

/* ---- Text ---- */
[data-theme="light"] .text-white       { color: var(--color-text) !important; }
[data-theme="light"] .text-\[\#A1A1AA\] { color: var(--color-text-muted) !important; }
[data-theme="light"] .text-\[\#71717A\],
[data-theme="light"] .text-\[\#9b9b9b\],
[data-theme="light"] .text-\[\#52525B\] { color: var(--color-text-dim) !important; }
[data-theme="light"] .hover\:text-white:hover { color: var(--color-text) !important; }

/* Brand green is legible on black but only ~2.4:1 on white, so text-only
   green is darkened. Green *backgrounds* keep the brand value untouched. */
[data-theme="light"] .text-\[\#19B56B\] { color: #0F7D48 !important; }
[data-theme="light"] .hover\:text-\[\#19B56B\]:hover { color: #0F7D48 !important; }

/* ---- Borders + dividers ---- */
[data-theme="light"] .border-white\/\[0\.06\],
[data-theme="light"] .border-white\/\[0\.08\] { border-color: var(--color-border) !important; }
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/20        { border-color: var(--color-border-strong) !important; }
[data-theme="light"] .divide-white\/\[0\.06\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border) !important;
}

/* ---- Inputs ---- */
[data-theme="light"] .placeholder-\[\#71717A\]::placeholder { color: #9A9AA2 !important; }
[data-theme="light"] input,
[data-theme="light"] textarea {
  color: var(--color-text) !important;
}

/* ---- Scrims stay dark (correct in both themes), just softened ---- */
[data-theme="light"] .bg-black\/80,
[data-theme="light"] .bg-black\/75,
[data-theme="light"] .bg-black\/90 { background-color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .bg-black\/50 { background-color: rgba(0,0,0,0.35) !important; }

/* ==========================================================================
   LIGHT MODE — portal chrome (sidebar + header)
   --------------------------------------------------------------------------
   The sidebar and header are solid brand green with black text. Targeted by
   element/id rather than by .bg-\[\#19B56B\], so green *buttons* elsewhere
   keep the brand colour.
   ========================================================================== */

[data-theme="light"] aside#sidebar {
  background-color: var(--color-sidebar-bg) !important;
  border-right: 1px solid var(--color-sidebar-border) !important;
}
[data-theme="light"] #content-wrap > header {
  background-color: var(--color-header-bg) !important;
  border-bottom-color: var(--color-header-border) !important;
}

/* Chrome text: black-on-green becomes dark-on-white */
[data-theme="light"] aside#sidebar .text-black,
[data-theme="light"] #content-wrap > header .text-black { color: var(--color-text) !important; }

[data-theme="light"] aside#sidebar .text-black\/70,
[data-theme="light"] aside#sidebar .text-black\/60,
[data-theme="light"] #content-wrap > header .text-black\/60 { color: var(--color-text-muted) !important; }

[data-theme="light"] aside#sidebar .text-black\/50,
[data-theme="light"] aside#sidebar .text-black\/40,
[data-theme="light"] #content-wrap > header .text-black\/50 { color: var(--color-text-dim) !important; }

[data-theme="light"] aside#sidebar .border-black\/10,
[data-theme="light"] #content-wrap > header .border-black\/10 { border-color: var(--color-sidebar-border) !important; }

/* Nav items: hover tint, and the active pill becomes a green chip */
[data-theme="light"] aside#sidebar .hover\:bg-black\/10:hover { background-color: #F1F1F2 !important; }
[data-theme="light"] aside#sidebar .hover\:text-black:hover   { color: var(--color-text) !important; }

[data-theme="light"] aside#sidebar a[data-nav].bg-black,
[data-theme="light"] aside#sidebar a[data-nav].bg-black:hover {
  background-color: var(--color-emerald) !important;
}
[data-theme="light"] aside#sidebar a[data-nav].bg-black .text-white,
[data-theme="light"] aside#sidebar a[data-nav].bg-black span,
[data-theme="light"] aside#sidebar a[data-nav].bg-black i,
[data-theme="light"] aside#sidebar a[data-nav].bg-black svg { color: #000000 !important; }

/* Logout button keeps its dark-on-hover treatment */
[data-theme="light"] aside#sidebar #logout-btn:hover { background-color: var(--color-text) !important; }
[data-theme="light"] aside#sidebar #logout-btn:hover,
[data-theme="light"] aside#sidebar #logout-btn:hover i,
[data-theme="light"] aside#sidebar #logout-btn:hover svg { color: #FFFFFF !important; }

/* Header search field + avatar chips */
[data-theme="light"] #content-wrap > header .bg-black\/10,
[data-theme="light"] #content-wrap > header .bg-black\/15 { background-color: #F1F1F2 !important; }
[data-theme="light"] aside#sidebar .bg-black\/10,
[data-theme="light"] aside#sidebar .bg-black\/15 { background-color: #F1F1F2 !important; }

/* Sidebar logo mark: the inner square is green-on-black by default */
[data-theme="light"] aside#sidebar .bg-black:not([data-nav]) { background-color: var(--color-emerald) !important; }
[data-theme="light"] aside#sidebar .bg-\[\#19B56B\] { background-color: #000000 !important; }

/* ==========================================================================
   LIGHT MODE — public site chrome
   ========================================================================== */
[data-theme="light"] #public-nav {
  background-color: var(--color-nav-bg) !important;
  border-color: var(--color-nav-border) !important;
}
[data-theme="light"] footer { background-color: var(--color-footer-bg) !important; }

/* Radial dot texture and dark gradient washes read as grime on white */
[data-theme="light"] [style*="radial-gradient(rgba(255,255,255"] { opacity: 0.05 !important; }
[data-theme="light"] .from-black,
[data-theme="light"] .to-black,
[data-theme="light"] .via-\[\#070707\],
[data-theme="light"] .to-\[\#0A0A0A\],
[data-theme="light"] .from-\[\#111\] { --tw-gradient-from: transparent !important; --tw-gradient-to: transparent !important; }

/* ==========================================================================
   LIGHT MODE — status colours
   --------------------------------------------------------------------------
   Status text uses the 300/400 shades, which are tuned for dark backgrounds
   and drop to ~2:1 contrast on white. Shift them to the 600/700 shades so
   badges and warnings stay readable. Tinted backgrounds are lightened to
   match. Tailwind's own values are used so the hues stay consistent.
   ========================================================================== */

[data-theme="light"] .text-rose-400,
[data-theme="light"] .text-rose-300,
[data-theme="light"] .text-red-400\/70   { color: #BE123C !important; }  /* rose-700 */
[data-theme="light"] .hover\:text-rose-300:hover { color: #9F1239 !important; }

[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-amber-300     { color: #B45309 !important; }  /* amber-700 */
[data-theme="light"] .text-amber-300\/70 { color: rgba(180, 83, 9, 0.85) !important; }
[data-theme="light"] .text-amber-300\/60 { color: rgba(180, 83, 9, 0.75) !important; }
[data-theme="light"] .text-amber-300\/50 { color: rgba(180, 83, 9, 0.65) !important; }

[data-theme="light"] .text-blue-400       { color: #1D4ED8 !important; }  /* blue-700 */

/* Tinted status backgrounds: same hue, lighter so dark text sits on top */
[data-theme="light"] .bg-rose-500\/15,
[data-theme="light"] .bg-rose-500\/10   { background-color: rgba(190, 18, 60, 0.10) !important; }
[data-theme="light"] .bg-amber-500\/15,
[data-theme="light"] .bg-amber-500\/10  { background-color: rgba(180, 83, 9, 0.10) !important; }
[data-theme="light"] .bg-blue-500\/15   { background-color: rgba(29, 78, 216, 0.10) !important; }
[data-theme="light"] .border-rose-500\/20  { border-color: rgba(190, 18, 60, 0.25) !important; }
[data-theme="light"] .border-amber-500\/20 { border-color: rgba(180, 83, 9, 0.25) !important; }

/* Green status pills use the brand tint; darken the text that sits on them */
[data-theme="light"] .bg-\[\#19B56B\]\/15 { background-color: rgba(15, 125, 72, 0.12) !important; }

/* Solid status fills keep white text — leave them alone, but ensure any
   .text-white inside a solid fill is not flipped to dark by the text rule. */
[data-theme="light"] .bg-rose-500 .text-white,
[data-theme="light"] .bg-rose-600 .text-white,
[data-theme="light"] .bg-amber-500 .text-white,
[data-theme="light"] .bg-\[\#FF3B30\] .text-white,
[data-theme="light"] .bg-\[\#FF1A1A\] .text-white { color: #FFFFFF !important; }
[data-theme="light"] .bg-rose-500,
[data-theme="light"] .bg-rose-600,
[data-theme="light"] .bg-\[\#FF3B30\],
[data-theme="light"] .bg-\[\#FF1A1A\] { color: #FFFFFF !important; }

/* Avatar/initial chips are `bg-black text-[#19B56B]` — a black circle with a
   green letter. The surface rule turns the circle green and the text rule
   darkens the letter, which would leave green-on-green. Render them as a pale
   brand tint with dark green text instead (~4.8:1). */
[data-theme="light"] .bg-black.text-\[\#19B56B\],
[data-theme="light"] aside#sidebar .bg-black.text-\[\#19B56B\],
[data-theme="light"] #content-wrap > header .bg-black.text-\[\#19B56B\] {
  background-color: rgba(15, 125, 72, 0.12) !important;
  color: #0F7D48 !important;
}

/* Keep white text on solid green fills — but NOT in the sidebar or header:
   both carry .bg-[#19B56B] on the element itself and are repainted white in
   light mode, so white text there would be invisible. */
[data-theme="light"] .bg-\[\#19B56B\]:not(aside):not(header) .text-white,
[data-theme="light"] .bg-\[\#159c5b\]:not(aside):not(header) .text-white { color: #FFFFFF !important; }

/* Active sidebar nav pill: green chip, black label. The customer layout tags
   links with data-nav and the admin layout does not, so match on .bg-black. */
[data-theme="light"] aside#sidebar a.bg-black,
[data-theme="light"] aside#sidebar a.bg-black *,
[data-theme="light"] aside#sidebar a[data-nav].bg-black,
[data-theme="light"] aside#sidebar a[data-nav].bg-black * { color: #000000 !important; }

/* ==========================================================================
   LIGHT MODE — public homepage component system
   --------------------------------------------------------------------------
   index.html ships its own private design system in an inline <style>: its
   own CSS variables (--card, --border, --text2 …) plus component classes
   (.pkg-card, .section-dark, .bento-card …). Those are not Tailwind utilities,
   so the bridge above never touched them — cards stayed near-black while the
   text turned dark.

   Because that block is variable-driven, remapping the variables converts
   most of the page; only the few hardcoded fills need explicit rules.
   ========================================================================== */

/* html[...] rather than [...] : index.html declares these on :root in an inline
   <style> that comes after this file, so an equal-specificity selector loses
   on source order. Adding the element bumps specificity above :root. */
html[data-theme="light"] {
  --card: #FFFFFF;
  --card2: #F7F7F8;
  --border: #E5E5E5;
  --border2: #E5E5E5;
  --text2: #525252;
  --text3: #6B6B6B;
}

/* index.html sets `body{background:#000;color:#fff}` inline, which beats the
   base body rule on source order — override both. */
[data-theme="light"] body { color: var(--color-text) !important; }

[data-theme="light"] .ticker-wrap,
[data-theme="light"] .section-dark      { background: #F4F4F5 !important; }
/* #how-it-works stays a dark feature band in light mode: its first child is a
   full-bleed `bg-gradient-to-b from-[#0A1F14] via-[#0E2A1D] to-[#0A1F14]`
   overlay, so lightening only the section left a dark band with dark text.
   Keep the section dark to match the overlay; the text rules below make the
   copy legible on it. */
[data-theme="light"] .faq-item.open      { background: rgba(25, 181, 107, 0.08) !important; }
[data-theme="light"] .float-card {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .pkg-card:hover {
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.14),
              0 0 40px -12px rgba(25, 181, 107, 0.22) !important;
}

/* Decorative grid/dot textures are drawn in white and disappear on light */
[data-theme="light"] .green-dots,
[data-theme="light"] .green-grid-subtle,
[data-theme="light"] .grid-bg-green { opacity: 0.5 !important; }

/* Checkbox on login/register is styled for a dark field */
[data-theme="light"] input[type="checkbox"] {
  border-color: var(--color-border-strong) !important;
  background: #FFFFFF !important;
}
[data-theme="light"] input[type="checkbox"]:checked {
  background-color: var(--color-emerald) !important;
  border-color: var(--color-emerald) !important;
}

/* Decorative watermark numerals (text-white/[0.04]) vanish entirely on a light
   surface — mirror them as a faint black tint so the effect survives. */
[data-theme="light"] .text-white\/\[0\.04\] { color: rgba(0, 0, 0, 0.06) !important; }

/* Small print inside the solid-green CTA band. The status rules darken rose to
   #BE123C, which only reaches 2.35:1 on #19B56B. That band uses black text
   throughout, so match it — this also reads better than the dark-mode original,
   where light rose on green sat at ~1.9:1. */
[data-theme="light"] .section-green .text-red-400\/70,
[data-theme="light"] .section-green .text-rose-400,
[data-theme="light"] .section-green .text-amber-400 { color: rgba(0, 0, 0, 0.78) !important; }

/* ==========================================================================
   LIGHT MODE — homepage section tweaks
   ========================================================================== */

/* The four "how it works" steps: light green rather than plain white. */
html[data-theme="light"] .step-box {
  background: #F0FAF5 !important;
  border-color: rgba(25, 181, 107, 0.18) !important;
}
/* Preserve the solid-green hover (the base rule above outranks .step-box:hover
   on specificity, so it has to be restated). */
html[data-theme="light"] .step-box:hover {
  background: #19B56B !important;
  border-color: #19B56B !important;
}

/* Account Security section: flat white, with all cards matching.
   Two cards broke ranks in light mode —
     • "Encrypted Account Access" uses .featured, whose dark green gradient
       (#0D1A12 → #111) is a `background` shorthand, so the background-color
       bridge never touched it and it stayed dark green.
     • "Session Protection" uses bg-[#19B56B]/[0.04], which is invisible
       on white, so it read as having no background at all.
   Scoping to #security fixes both without flattening the green blur orb. */
html[data-theme="light"] #security { background: #FFFFFF !important; }
html[data-theme="light"] #security .bento-card,
html[data-theme="light"] #security .bento-card.featured {
  background: #FFFFFF !important;
  border-color: var(--color-border) !important;
}
/* Keep the featured card subtly distinguished by its border only. */
html[data-theme="light"] #security .bento-card.featured {
  border-color: rgba(25, 181, 107, 0.28) !important;
}
/* Restate the green hover, which the rules above would otherwise outrank. */
html[data-theme="light"] #security .bento-card:hover,
html[data-theme="light"] #security .bento-card.featured:hover {
  background: #19B56B !important;
  border-color: #19B56B !important;
}

/* ==========================================================================
   LIGHT MODE — "4-Step Process" band (#how-it-works)
   --------------------------------------------------------------------------
   This band is intentionally dark in both themes (dark green gradient overlay),
   so the global light-mode text rules — which darken text for light surfaces —
   made the heading and copy unreadable against it. Restore light text here.
   ========================================================================== */
html[data-theme="light"] #how-it-works .text-white        { color: #FFFFFF !important; }
html[data-theme="light"] #how-it-works .text-\[\#A1A1AA\] { color: #D4D4D8 !important; }
html[data-theme="light"] #how-it-works .text-\[\#71717A\] { color: #A1A1AA !important; }
/* Brand green reads fine on the dark band — undo the darkening applied for
   light surfaces. */
html[data-theme="light"] #how-it-works .text-\[\#19B56B\] { color: #19B56B !important; }

/* …except inside the step cards, which are light green — those keep dark text. */
html[data-theme="light"] #how-it-works .step-box .text-white        { color: var(--color-text) !important; }
html[data-theme="light"] #how-it-works .step-box .text-\[\#A1A1AA\] { color: var(--color-text-muted) !important; }
html[data-theme="light"] #how-it-works .step-box .text-\[\#71717A\] { color: var(--color-text-dim) !important; }
html[data-theme="light"] #how-it-works .step-box .text-\[\#19B56B\] { color: #0F7D48 !important; }

/* ==========================================================================
   LIGHT MODE — Account Security section (#security): flat white
   --------------------------------------------------------------------------
   The section carries a full-bleed `bg-gradient-to-b from-black via-[#070707]
   to-black` overlay. Zeroing the from/to gradient stops was not enough — the
   `via` stop uses its own custom property, so a solid rgb(7,7,7) band was
   still being painted across the middle. Drop the gradient image outright.
   ========================================================================== */
html[data-theme="light"] #security > .absolute { background-image: none !important; }

/* Darker body copy on the white surface (was #6B6B6B). */
html[data-theme="light"] #security .text-\[\#71717A\],
html[data-theme="light"] #security .text-\[\#A1A1AA\] { color: #3F3F46 !important; }

/* Headings and the green accent stay as they are; keep the hover state green. */
html[data-theme="light"] #security .bento-card:hover .text-\[\#71717A\],
html[data-theme="light"] #security .bento-card:hover .text-\[\#A1A1AA\],
html[data-theme="light"] #security .bento-card:hover p { color: rgba(0, 0, 0, 0.65) !important; }