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

/* ════════════════════════════════════════════════════════════
   FLUENTIX AI — Official Brand Color System
   ════════════════════════════════════════════════════════════ */

:root {
  --primary:        #1B365D; /* Majestic Deep Star-Navy Blue */
  --primary-dark:   #112240; /* Rich Presidential Navy */
  --primary-deeper: #0F1E36; /* Midnight Academic Blue */
  --flow-blue:      #D11A2A; /* Valiant Crimson Red */
  --flow-blue-dark: #9A0007; /* Luxurious Ruby Red */
  --deep-focus:     #0A1325; /* Clear Midnight Sky */
  --soft-sky:       #F4F7FB; /* Clean, pristine star-white/cream slate */
  --soft-sky-dark:  #E1E8F2; /* Soft metallic silver accent */
  --steel-blue:     #4A5568; /* Slate-600 */
  --steel-light:    #718096; /* Slate-500 */
  --white:          #FFFFFF;
  --text-primary:   #0A1325; /* Deeper midnight text */
  --text-secondary: #4A5568; /* Elegant dark slate secondary text */
  --border:         #E2E8F2; /* Clean crisp presidential border */
  --border-dark:    #CBD5E1;
  --success:        #15803D; /* Ivy League Green */
  --warning:        #D4AF37; /* Magnificent Olympic Gold */
  --error:          #B91C1C; /* Proud Crimson Red */
  --shadow-card:    0 10px 30px -8px rgba(11,34,64,0.06);
  --shadow-elevated:0 25px 50px -12px rgba(11,34,64,0.12);
  --shadow-btn:     0 6px 20px rgba(27,54,93,0.22);
  --radius-card:    24px;
  --radius-btn:     14px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
*:focus-visible { outline:3px solid var(--flow-blue); outline-offset:3px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }

/* ── Page background ─────────────────────────────────────── */
body, body.bg-slate-50, body.bg-white {
  background: var(--soft-sky) !important;
  min-height: 100vh;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
}

/* ── Auth page background ────────────────────────────────── */
.auth-bg {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%);
  min-height: 100vh;
}

/* ── Glass card ──────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.95);
}

/* ── Standard card ───────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* ── Gradient text ───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary) 50%, var(--flow-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Primary button ──────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius-btn);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-deeper) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,99,235,0.45);
}
.btn-primary:active { transform: translateY(0); }

/* ── Flow Blue button (for progress/continue actions) ────── */
.btn-flow {
  background: linear-gradient(135deg, var(--flow-blue) 0%, var(--flow-blue-dark) 100%);
  color: var(--deep-focus);
  border: none;
  border-radius: var(--radius-btn);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 6px 20px rgba(56,189,248,0.35);
}
.btn-flow:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(56,189,248,0.45); }

/* ── Secondary button ────────────────────────────────────── */
.btn-secondary {
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-btn);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary:hover { background: var(--soft-sky); }

/* ── Input fields ────────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1.5px solid var(--border-dark);
  background: rgba(255,255,255,0.7);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
}
.input-field::placeholder { color: var(--steel-light); }
.input-field:focus {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* ── Sidebar ─────────────────────────────────────────────── */
aside, #sidebar, .sidebar {
  background-color: var(--deep-focus) !important;
  border-right: 1px solid rgba(56,189,248,0.15) !important;
  color: var(--white);
}

aside .brand-font, #sidebar .brand-font, .sidebar .brand-font {
  color: var(--white) !important;
}

/* Sidebar Nav Link Base Overrides */
aside nav a, #sidebar nav a, .sidebar nav a {
  color: var(--steel-blue) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

aside nav a:hover, #sidebar nav a:hover, .sidebar nav a:hover {
  background-color: rgba(56, 189, 248, 0.08) !important;
  color: var(--flow-blue) !important;
}

/* Sidebar Nav Link Active Overrides */
aside nav a.text-white, 
aside nav a.bg-blue-600, 
aside nav a.bg-gradient-to-br,
#sidebar nav a.text-white, 
#sidebar nav a.bg-blue-600, 
#sidebar nav a.bg-gradient-to-br,
.sidebar nav a.text-white, 
.sidebar nav a.bg-blue-600, 
.sidebar nav a.bg-gradient-to-br {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
}

aside nav a.text-white:hover, 
aside nav a.bg-blue-600:hover, 
aside nav a.bg-gradient-to-br:hover,
#sidebar nav a.text-white:hover, 
#sidebar nav a.bg-blue-600:hover, 
#sidebar nav a.bg-gradient-to-br:hover,
.sidebar nav a.text-white:hover, 
.sidebar nav a.bg-blue-600:hover, 
.sidebar nav a.bg-gradient-to-br:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-deeper) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.45) !important;
}

/* Sidebar footer border & profile styles */
aside .border-t, #sidebar .border-t, .sidebar .border-t,
aside .border-slate-100, #sidebar .border-slate-100, .sidebar .border-slate-100,
aside .border-slate-200, #sidebar .border-slate-200, .sidebar .border-slate-200 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

aside #user-name, #sidebar #user-name, .sidebar #user-name {
  color: var(--white) !important;
}

aside #user-email, #sidebar #user-email, .sidebar #user-email {
  color: var(--steel-light) !important;
}

aside button, #sidebar button, aside a button, #sidebar a button {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--steel-light) !important;
  border: none !important;
}

aside button:hover, #sidebar button:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--error) !important;
}

.sidebar-logo-text {
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}
.sidebar-item {
  color: var(--steel-blue);
  border-radius: 12px;
  padding: 10px 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.sidebar-item:hover {
  background: rgba(56,189,248,0.1);
  color: var(--flow-blue);
}
.sidebar-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(37,99,235,0.4);
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sidebar-item.active svg { stroke: var(--white); }
.sidebar-item:not(.active) svg { stroke: var(--steel-blue); }
.sidebar-item:hover svg { stroke: var(--flow-blue); }

/* ── Chat bubbles ────────────────────────────────────────── */
.chat-bubble-user {
  background: var(--soft-sky);
  color: var(--deep-focus);
  border: 1px solid var(--border-dark);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
}
.chat-bubble-ai {
  background: var(--primary);
  color: var(--white);
  border-radius: 4px 18px 18px 18px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}

/* ── Progress bars (Flow Blue) ───────────────────────────── */
.progress-track {
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--flow-blue));
  border-radius: 999px;
  transition: width 1s ease;
  box-shadow: 0 0 8px rgba(56,189,248,0.4);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge-primary  { background:var(--soft-sky);  color:var(--primary);    font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px; }
.badge-flow     { background:#E0F9FF;           color:var(--flow-blue-dark);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px; }
.badge-success  { background:#DCFCE7;           color:#15803D;           font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px; }
.badge-warning  { background:#FEF9C3;           color:#854D0E;           font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px; }
.badge-error    { background:#FEE2E2;           color:#DC2626;           font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px; }

/* ── Dashboard hero/banner cards ─────────────────────────── */
.hero-card {
  background: linear-gradient(135deg, var(--deep-focus) 0%, #1E3A8A 50%, var(--primary) 100%);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(37,99,235,0.35);
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero-card-title { color:var(--white); font-family:'Space Grotesk',sans-serif; font-weight:800; }
.hero-card-sub   { color:rgba(255,255,255,0.72); }
.hero-card-btn   {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-btn);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13.5px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.2s ease;
}
.hero-card-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
  transform: translateX(3px);
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card {
  background: var(--white);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 20px;
  transition: all 0.3s ease;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-elevated); }
.stat-number { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:800; color:var(--primary); }
.stat-label  { font-size:12px; font-weight:600; color:var(--steel-blue); }
.stat-icon   { width:44px;height:44px;border-radius:12px;background:var(--soft-sky);display:flex;align-items:center;justify-content:center; }

/* ── Avatar status (flow blue pulse) ────────────────────── */
.avatar-status-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--flow-blue);
  box-shadow: 0 0 8px var(--flow-blue);
}

/* ── Tabs ────────────────────────────────────────────────── */
.tab-bar { background:var(--soft-sky); border-radius:14px; padding:4px; display:flex; gap:2px; }
.tab-btn {
  flex:1; padding:8px 12px; border-radius:10px; border:none;
  font-family:'Outfit',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:all 0.2s ease;
  background:transparent; color:var(--steel-blue);
}
.tab-btn.active {
  background:var(--white); color:var(--primary);
  box-shadow:0 2px 8px rgba(37,99,235,0.12);
}
.tab-btn:hover:not(.active) { background:rgba(255,255,255,0.6); color:var(--primary); }

/* ── Navbar/Header ───────────────────────────────────────── */
.app-header {
  background: var(--deep-focus);
  border-bottom: 1px solid rgba(56,189,248,0.15);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
  background: var(--deep-focus);
  color: var(--steel-blue);
  padding: 32px 24px;
}
.app-footer a { color:var(--flow-blue); text-decoration:none; }
.app-footer a:hover { color:var(--white); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--soft-sky); }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, var(--primary), var(--flow-blue));
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover { background:var(--primary-dark); }

/* ── Divider ─────────────────────────────────────────────── */
.divider-text { font-size:11px;font-weight:700;color:var(--steel-blue);letter-spacing:0.08em; }
.divider-line { flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border-dark),transparent); }

/* ── Feedback card ───────────────────────────────────────── */
.feedback-card {
  background: var(--soft-sky);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
}

/* ── Typing indicator dots ───────────────────────────────── */
.typing-dot {
  width:7px; height:7px; background:var(--white);
  border-radius:50%; display:inline-block;
  animation:typingDot 0.8s ease-in-out infinite;
}

/* ── Skill toggle buttons ────────────────────────────────── */
.skill-toggle {
  width:32px; height:32px; border-radius:8px;
  border:1.5px solid var(--border-dark);
  background:var(--white);
  font-family:'Space Grotesk',sans-serif;
  font-size:12px; font-weight:700;
  color:var(--steel-blue); cursor:pointer; transition:all 0.2s ease;
}
.skill-toggle.active-skill {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-color:var(--primary); color:var(--white);
  box-shadow:0 2px 8px rgba(37,99,235,0.4);
}

/* ── Social login buttons ────────────────────────────────── */
.social-btn {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:13px;
  border:1.5px solid var(--border-dark);
  background:var(--white);
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
  color:var(--text-primary); cursor:pointer; transition:all 0.2s ease;
}
.social-btn:hover {
  background:var(--soft-sky);
  border-color:var(--flow-blue);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(37,99,235,0.13);
}

/* ── Toggle switch ───────────────────────────────────────── */
.toggle-track {
  width:42px; height:22px; background:var(--primary);
  border-radius:999px; position:relative; cursor:pointer; transition:background 0.2s;
}
.toggle-track.off { background:#CBD5E1; }
.toggle-thumb {
  position:absolute; top:3px; right:3px;
  width:16px; height:16px; background:var(--white);
  border-radius:50%; transition:all 0.2s ease;
}
.toggle-track.off .toggle-thumb { right:auto; left:3px; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeInUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes typingDot   { 0%,100%{transform:scaleY(1);opacity:0.4} 50%{transform:scaleY(1.8);opacity:1} }
@keyframes ringPulse   { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.06);opacity:0.15} }
@keyframes avatarFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes wave        { 0%,100%{transform:scaleY(0.4);opacity:0.4} 50%{transform:scaleY(1);opacity:1} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes progressFill{ from{width:0} }
@keyframes gradientShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes flowPulse   { 0%,100%{box-shadow:0 0 8px rgba(56,189,248,0.3)} 50%{box-shadow:0 0 20px rgba(56,189,248,0.7)} }

.stagger-1{animation:fadeInUp 0.5s 0.05s both}
.stagger-2{animation:fadeInUp 0.5s 0.12s both}
.stagger-3{animation:fadeInUp 0.5s 0.19s both}
.stagger-4{animation:fadeInUp 0.5s 0.26s both}
.stagger-5{animation:fadeInUp 0.5s 0.33s both}
.stagger-6{animation:fadeInUp 0.5s 0.40s both}

/* ══════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════ */
html.dark, html.dark-mode, body.dark-mode, .dark-mode {
  --primary:        #2E5388; /* High-contrast star blue */
  --primary-dark:   #1E3A60;
  --primary-deeper: #0F1E36;
  --flow-blue:      #EF4444; /* Patriotic crimson highlight */
  --flow-blue-dark: #DC2626;
  --deep-focus:     #050C17; /* Presidential dark background */
  --soft-sky:       #050C17;
  --soft-sky-dark:  #0C1628;
  --steel-blue:     #94A3B8;
  --steel-light:    #64748B;
  --white:          #0C1628; /* Solid deep navy panel surface */
  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --border:         rgba(226,232,242,0.12);
  --border-dark:    rgba(226,232,242,0.18);
  --shadow-card:    0 10px 30px rgba(0,0,0,0.5);
  --shadow-elevated:0 25px 60px rgba(0,0,0,0.7);
  --shadow-btn:     0 6px 20px rgba(46,83,136,0.3);
}

/* Base Body Override */
body.dark-mode {
  background-color: var(--soft-sky) !important;
  color: var(--text-primary) !important;
}

/* Tailwind utility mappings for flawless hybrid support */
body.dark-mode .bg-white,
body.dark-mode .bg-slate-50 {
  background-color: var(--white) !important;
}

body.dark-mode .bg-blue-50/70,
body.dark-mode .bg-blue-50/55,
body.dark-mode .bg-blue-50,
body.dark-mode .bg-slate-50/50,
body.dark-mode .bg-slate-100,
body.dark-mode .bg-slate-100/50,
body.dark-mode .bg-slate-200/50 {
  background-color: var(--soft-sky-dark) !important;
}

body.dark-mode .text-slate-900,
body.dark-mode .text-slate-850,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-705,
body.dark-mode .text-slate-700,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .font-bold {
  color: var(--text-primary) !important;
}

body.dark-mode .text-slate-600,
body.dark-mode .text-slate-500,
body.dark-mode .text-slate-400 {
  color: var(--text-secondary) !important;
}

body.dark-mode .border-slate-100,
body.dark-mode .border-slate-200,
body.dark-mode .border-slate-800/80,
body.dark-mode .border-blue-100,
body.dark-mode .border-blue-100/50,
body.dark-mode .border-blue-55/50,
body.dark-mode .border-blue-50/50 {
  border-color: var(--border) !important;
}

body.dark-mode .shadow-sm,
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg {
  box-shadow: var(--shadow-card) !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--white) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--steel-light) !important;
}

/* Quick speaks / specifics */
body.dark-mode .chat-bubble-user {
  background: var(--soft-sky-dark) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .chat-bubble-ai {
  background: var(--primary) !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════
   DUOLINGO STYLE GAMIFICATION ADDITIONS (3D Effects & Tactile Elements)
   ══════════════════════════════════════════════════════════ */
.btn-duo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.1s ease;
  cursor: pointer;
  box-shadow: none !important;
  text-decoration: none !important;
}
.btn-duo:active {
  transform: translateY(4px);
}

.btn-duo-green {
  background-color: #58CC02 !important;
  color: #FFFFFF !important;
  border-bottom: 4px solid #46A302 !important;
}
.btn-duo-green:hover {
  filter: brightness(1.06);
}
.btn-duo-green:active {
  border-bottom-width: 0px !important;
}

.btn-duo-blue {
  background-color: #1CB0F6 !important;
  color: #FFFFFF !important;
  border-bottom: 4px solid #1899D6 !important;
}
.btn-duo-blue:hover {
  filter: brightness(1.06);
}
.btn-duo-blue:active {
  border-bottom-width: 0px !important;
}

.btn-duo-orange {
  background-color: #FF9600 !important;
  color: #FFFFFF !important;
  border-bottom: 4px solid #E07D00 !important;
}
.btn-duo-orange:hover {
  filter: brightness(1.06);
}
.btn-duo-orange:active {
  border-bottom-width: 0px !important;
}

.btn-duo-purple {
  background-color: #A855F7 !important;
  color: #FFFFFF !important;
  border-bottom: 4px solid #9333EA !important;
}
.btn-duo-purple:hover {
  filter: brightness(1.06);
}
.btn-duo-purple:active {
  border-bottom-width: 0px !important;
}

.btn-duo-gray {
  background-color: #E5E7EB !important;
  color: #4B5563 !important;
  border-bottom: 4px solid #CBD5E1 !important;
}
body.dark-mode .btn-duo-gray {
  background-color: #374151 !important;
  color: #F3F4F6 !important;
  border-bottom: 4px solid #1F2937 !important;
}
.btn-duo-gray:hover {
  filter: brightness(1.06);
}
.btn-duo-gray:active {
  border-bottom-width: 0px !important;
}

/* Card effects */
.card-duo {
  border: 2px solid #E2E8F0;
  border-bottom: 6px solid #CBD5E1;
  border-radius: 24px;
  background-color: #FFFFFF;
  transition: all 0.15s ease;
}
body.dark-mode .card-duo {
  border-color: #334155;
  border-bottom-color: #1E293B;
  background-color: #1E293B;
}
.card-duo:hover {
  transform: translateY(-2px);
  border-bottom-width: 8px;
}
.card-duo:active {
  transform: translateY(2px);
  border-bottom-width: 4px;
}

/* Float wiggle anim */
@keyframes duoWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-4deg) scale(1.04); }
  75% { transform: rotate(4deg) scale(1.04); }
}
.animate-duo-wiggle {
  animation: duoWiggle 3.5s ease-in-out infinite;
}

/* Custom glowing effects */
.glow-streak {
  text-shadow: 0 0 10px rgba(255, 150, 0, 0.4);
}
.glow-gems {
  text-shadow: 0 0 10px rgba(28, 176, 246, 0.4);
}
.glow-hearts {
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}