/* =====================================================
   QMF UI - Modern Homepage Styles
   Mandarin Quizz Framework
   ===================================================== */

/* Hide legacy sidebar when using QMF sidebar */
aside#sidebar.sidebar,
#sidebar.sidebar {
  display: none !important;
}

/* Hide header social/chat/friend/notification controls globally */
.qmf-header__social,
.qmf-header__divider,
#qmfChatBtn,
#qmfFriendBtn,
#qmfNotificationBtn,
.qmf-header__hamburger {
  display: none !important;
}

/* CSS Custom Properties */
:root {
  /* Colors - Light Theme - Soft Teal/Cyan */
  --qmf-bg-primary: #ffffff;
  --qmf-bg-secondary: #f8fafb;
  --qmf-bg-tertiary: #f0f4f8;
  --qmf-bg-glass: rgba(255, 255, 255, 0.75);
  --qmf-bg-glass-strong: rgba(255, 255, 255, 0.92);
  
  --qmf-text-primary: #1a2332;
  --qmf-text-secondary: #4a5568;
  --qmf-text-muted: #718096;
  --qmf-text-inverse: #ffffff;
  
  --qmf-accent-primary: #0891b2;
  --qmf-accent-secondary: #0284c7;
  --qmf-accent-gradient: linear-gradient(135deg, #0891b2 0%, #0284c7 50%, #0ea5e9 100%);
  --qmf-accent-glow: rgba(8, 145, 178, 0.25);
  
  --qmf-success: #10b981;
  --qmf-warning: #f59e0b;
  --qmf-error: #ef4444;
  --qmf-info: #3b82f6;
  
  --qmf-border: rgba(0, 0, 0, 0.08);
  --qmf-border-strong: rgba(0, 0, 0, 0.12);
  
  --qmf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --qmf-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --qmf-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --qmf-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --qmf-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --qmf-shadow-glow: 0 0 40px var(--qmf-accent-glow);
  
  /* Layout */
  --qmf-header-height: 72px;
  --qmf-sidebar-width: 280px;
  --qmf-container-max: 1280px;
  --qmf-border-radius: 16px;
  --qmf-border-radius-sm: 8px;
  --qmf-border-radius-lg: 24px;
  --qmf-border-radius-full: 9999px;
  
  /* Transitions */
  --qmf-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --qmf-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --qmf-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --qmf-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Dynamic Island */
  --island-width-collapsed: 220px;
  --island-width-expanded: 340px;
  --island-height-collapsed: 32px;
  --island-height-expanded: 140px;
  --island-top-offset: 80px;
}

/* Dark Theme */
[data-theme="dark"] {
  --qmf-bg-primary: #0f1419;
  --qmf-bg-secondary: #1a2332;
  --qmf-bg-tertiary: #2d3748;
  --qmf-bg-glass: rgba(15, 20, 25, 0.85);
  --qmf-bg-glass-strong: rgba(15, 20, 25, 0.95);
  
  --qmf-text-primary: #f7fafc;
  --qmf-text-secondary: #e2e8f0;
  --qmf-text-muted: #a0aec0;
  --qmf-text-inverse: #0f1419;
  
  --qmf-accent-glow: rgba(14, 165, 233, 0.35);
  
  --qmf-border: rgba(255, 255, 255, 0.08);
  --qmf-border-strong: rgba(255, 255, 255, 0.12);
  
  --qmf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --qmf-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --qmf-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --qmf-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --qmf-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* =====================================================
   Base Styles
   ===================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--qmf-bg-primary);
  color: var(--qmf-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--qmf-transition), color var(--qmf-transition);
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  z-index: 100000;
  background: var(--qmf-accent-primary);
  color: white;
  padding: 12px 24px;
  border-radius: var(--qmf-border-radius-sm);
  outline: 3px solid var(--qmf-accent-secondary);
  text-decoration: none;
  font-weight: 600;
}

/* =====================================================
   Dynamic Island Banner - Below Header, Non-blocking
   ===================================================== */

.dynamic-island {
  position: fixed;
  top: var(--island-top-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: var(--island-width-collapsed);
  height: var(--island-height-collapsed);
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: var(--island-height-collapsed);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dynamic-island::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.dynamic-island:hover {
  width: var(--island-width-expanded);
  transform: translateX(-50%);
  box-shadow: 0 4px 20px rgba(8, 145, 178, 0.2);
}

.dynamic-island.expanded {
  width: var(--island-width-expanded);
  height: var(--island-height-expanded);
  border-radius: 16px;
}

.island-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  height: var(--island-height-collapsed);
}

.island-indicator {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.island-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.island-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.island-icon svg {
  width: 100%;
  height: 100%;
  stroke: white;
}

.island-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.island-title {
  font-size: 11px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.island-subtitle {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.island-action {
  flex-shrink: 0;
}

.island-close {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--qmf-transition-fast);
}

.island-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.island-close svg {
  width: 14px;
  height: 14px;
  stroke: white;
}

.island-expanded {
  display: none;
  padding: 50px 16px 16px;
}

.dynamic-island.expanded .island-expanded {
  display: block;
}

.island-expanded-content {
  color: white;
  font-size: 13px;
  line-height: 1.5;
}

.island-expanded-content h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.island-expanded-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.island-expanded-content .island-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--qmf-accent-gradient);
  color: white;
  text-decoration: none;
  border-radius: var(--qmf-border-radius-full);
  font-size: 12px;
  font-weight: 600;
  transition: transform var(--qmf-transition-fast);
}

.island-expanded-content .island-cta:hover {
  transform: scale(1.05);
}

/* Island hidden state */
.dynamic-island.hidden {
  transform: translateX(-50%) translateY(-100px);
  opacity: 0;
  pointer-events: none;
}

/* =====================================================
   Background Effects - Modern Animated Gradient
   ===================================================== */

.qmf-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--qmf-bg-primary);
}

/* Fallback solid color if animations don't load */
.qmf-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    var(--qmf-bg-primary) 0%, 
    var(--qmf-bg-secondary) 50%, 
    var(--qmf-bg-tertiary) 100%);
  z-index: 0;
}

/* Chinese Cultural Pattern Background - Paper Cut Style */
.gradient-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  /* Great Wall silhouette pattern */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Cg fill='none' stroke='%230891b2' stroke-width='1'%3E%3C!-- Great Wall towers --%3E%3Cpath d='M0 180 L20 180 L20 160 L30 160 L30 150 L40 150 L40 160 L50 160 L50 180 L80 180 L80 165 L90 165 L90 155 L100 155 L100 165 L110 165 L110 180 L140 180 L140 160 L150 160 L150 150 L160 150 L160 160 L170 160 L170 180 L200 180'/%3E%3Cpath d='M200 180 L220 180 L220 165 L230 165 L230 155 L240 155 L240 165 L250 165 L250 180 L280 180 L280 160 L290 160 L290 150 L300 150 L300 160 L310 160 L310 180 L340 180 L340 165 L350 165 L350 155 L360 155 L360 165 L370 165 L370 180 L400 180'/%3E%3C!-- Mountain silhouette --%3E%3Cpath d='M0 190 Q50 170 100 185 Q150 160 200 180 Q250 165 300 175 Q350 155 400 170' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 400px 200px;
}

/* Chinese paper cutting decorative pattern */
.hex-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  /* Traditional Chinese window lattice */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230891b2' stroke-width='0.5'%3E%3C!-- Lattice pattern --%3E%3Crect x='5' y='5' width='20' height='20' rx='2'/%3E%3Crect x='35' y='5' width='20' height='20' rx='2'/%3E%3Crect x='5' y='35' width='20' height='20' rx='2'/%3E%3Crect x='35' y='35' width='20' height='20' rx='2'/%3E%3C!-- Inner decorations --%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3Ccircle cx='45' cy='15' r='5'/%3E%3Ccircle cx='15' cy='45' r='5'/%3E%3Ccircle cx='45' cy='45' r='5'/%3E%3C!-- Corner connectors --%3E%3Cpath d='M25 15 L35 15 M15 25 L15 35 M45 25 L45 35 M25 45 L35 45'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Floating lanterns and clouds */
.gradient-orb {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.orb-1 {
  /* Cloud pattern top */
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'%3E%3Cg fill='none' stroke='%230891b2' stroke-width='1'%3E%3C!-- Chinese cloud motif --%3E%3Cpath d='M20 60 Q30 40 50 50 Q60 30 80 45 Q90 35 100 50 Q120 40 130 55 Q140 45 150 60'/%3E%3Cpath d='M40 70 Q50 60 60 65 Q70 55 80 65'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 100px;
  background-repeat: repeat-x;
  background-position: top 80px center;
  animation: cloudFloat 60s linear infinite;
}

.orb-2 {
  /* Lantern pattern */
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'%3E%3Cg fill='none' stroke='%23dc2626' stroke-width='0.8'%3E%3C!-- Lantern shape --%3E%3Cellipse cx='40' cy='60' rx='15' ry='25'/%3E%3Cpath d='M25 60 Q20 60 20 55 Q20 50 25 50'/%3E%3Cpath d='M55 60 Q60 60 60 55 Q60 50 55 50'/%3E%3C!-- Top cap --%3E%3Cpath d='M30 35 L50 35 L48 40 L32 40 Z'/%3E%3Cpath d='M35 30 L45 30 L45 35 L35 35 Z'/%3E%3C!-- Bottom tassel --%3E%3Cpath d='M38 85 L38 100 M40 85 L40 105 M42 85 L42 100'/%3E%3Crect x='35' y='82' width='10' height='5' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 120px;
  background-position: 90% 15%;
  background-repeat: no-repeat;
}

.orb-3 {
  /* Bamboo pattern side */
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='300' viewBox='0 0 60 300'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='1'%3E%3C!-- Bamboo stalk --%3E%3Cpath d='M30 0 L30 300'/%3E%3C!-- Nodes --%3E%3Cellipse cx='30' cy='50' rx='8' ry='3'/%3E%3Cellipse cx='30' cy='120' rx='8' ry='3'/%3E%3Cellipse cx='30' cy='190' rx='8' ry='3'/%3E%3Cellipse cx='30' cy='260' rx='8' ry='3'/%3E%3C!-- Leaves --%3E%3Cpath d='M30 50 Q45 40 55 55 Q45 55 30 50'/%3E%3Cpath d='M30 120 Q15 110 5 125 Q15 125 30 120'/%3E%3Cpath d='M30 190 Q45 180 55 195 Q45 195 30 190'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 300px;
  background-position: 5% center;
  background-repeat: repeat-y;
}

@keyframes cloudFloat {
  0% { background-position-x: 0; }
  100% { background-position-x: 200px; }
}

/* Chinese coin/seal watermark pattern */
.grid-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23dc2626' stroke-width='0.5'%3E%3C!-- Chinese coin shape --%3E%3Ccircle cx='50' cy='50' r='35'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Crect x='42' y='42' width='16' height='16'/%3E%3C!-- 福 character simplified strokes --%3E%3Cpath d='M20 20 L20 35 M15 25 L25 25'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
}

/* Noise texture overlay */
.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  z-index: 3;
}

/* Dark theme - slightly more visible patterns */
[data-theme="dark"] .gradient-mesh,
[data-theme="dark"] .hex-pattern,
[data-theme="dark"] .gradient-orb,
[data-theme="dark"] .grid-pattern {
  opacity: 0.06;
}

[data-theme="dark"] .orb-1 { opacity: 0.04; }
[data-theme="dark"] .orb-2 { opacity: 0.035; }
[data-theme="dark"] .orb-3 { opacity: 0.03; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .orb-1 {
    animation: none;
  }
}

/* =====================================================
   Header
   ===================================================== */

.qmf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--qmf-header-height);
  background: var(--qmf-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--qmf-border);
  z-index: 99999;
  transition: all var(--qmf-transition);
}

.qmf-header.scrolled {
  background: var(--qmf-bg-glass-strong);
  box-shadow: var(--qmf-shadow-md);
}

.header-container {
  max-width: var(--qmf-container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo */
.qmf-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
}

.logo-glow {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--qmf-accent-gradient);
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.3;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--qmf-transition);
}

.qmf-logo:hover .logo-glow {
  opacity: 0.5;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--qmf-text-primary);
  position: relative;
  z-index: 1;
}

.logo-accent {
  background: var(--qmf-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Navigation */
.qmf-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--qmf-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--qmf-border-radius-sm);
  transition: all var(--qmf-transition-fast);
  position: relative;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-item:hover {
  color: var(--qmf-text-primary);
  background: var(--qmf-bg-tertiary);
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background: var(--qmf-accent-gradient);
  border-radius: 2px;
  transition: transform var(--qmf-transition);
}

.nav-item:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qmf-btn-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qmf-bg-tertiary);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius-sm);
  cursor: pointer;
  transition: all var(--qmf-transition-fast);
  position: relative;
}

.qmf-btn-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--qmf-text-secondary);
  transition: stroke var(--qmf-transition-fast);
}

.qmf-btn-icon:hover {
  background: var(--qmf-bg-secondary);
  border-color: var(--qmf-border-strong);
}

.qmf-btn-icon:hover svg {
  stroke: var(--qmf-text-primary);
}

/* Theme Toggle */
#themeToggle .icon-sun {
  display: block;
}

#themeToggle .icon-moon {
  display: none;
}

[data-theme="dark"] #themeToggle .icon-sun {
  display: none;
}

[data-theme="dark"] #themeToggle .icon-moon {
  display: block;
}

/* Notification Badge */
.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: var(--qmf-error);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--qmf-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Auth Buttons */
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qmf-btn-outline {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--qmf-border-strong);
  color: var(--qmf-text-primary);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--qmf-border-radius-sm);
  cursor: pointer;
  transition: all var(--qmf-transition-fast);
}

.qmf-btn-outline:hover {
  background: var(--qmf-bg-tertiary);
  border-color: var(--qmf-accent-primary);
}

.qmf-btn-primary {
  padding: 10px 20px;
  background: var(--qmf-accent-gradient);
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--qmf-border-radius-sm);
  cursor: pointer;
  transition: all var(--qmf-transition-fast);
  box-shadow: 0 4px 15px var(--qmf-accent-glow);
}

.qmf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--qmf-accent-glow);
}

/* User Menu */
.user-menu {
  position: relative;
}
.user-menu.hidden {
  display: none;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--qmf-bg-tertiary);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius-full);
  cursor: pointer;
  transition: all var(--qmf-transition-fast);
}

.user-avatar-btn:hover {
  background: var(--qmf-bg-secondary);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--qmf-text-primary);
}

/* User Dropdown */
.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: var(--qmf-bg-primary);
  border: 1px solid var(--qmf-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 6px;
  display: none;
  z-index: 1200;
}
.user-dropdown.open {
  display: block;
}
.user-dropdown__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  color: var(--qmf-text-primary);
  font-size: .85rem;
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.user-dropdown__item:hover {
  background: var(--qmf-bg-tertiary);
}
.user-dropdown__item i {
  width: 16px;
  text-align: center;
  color: var(--qmf-text-muted);
}
.user-dropdown__divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--qmf-border);
}
.user-dropdown__item--danger {
  color: #ef4444;
}
.user-dropdown__item--danger i {
  color: #ef4444;
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  background: var(--qmf-bg-tertiary);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
}

.mobile-menu-btn span {
  width: 100%;
  height: 2px;
  background: var(--qmf-text-primary);
  border-radius: 2px;
  transition: all var(--qmf-transition-fast);
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* =====================================================
   Sidebar (Mobile)
   ===================================================== */

.qmf-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: var(--qmf-sidebar-width);
  height: 100vh;
  background: var(--qmf-bg-primary);
  z-index: 100000;
  transition: right var(--qmf-transition);
  display: flex;
  flex-direction: column;
  box-shadow: var(--qmf-shadow-xl);
}

.qmf-sidebar.open {
  right: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--qmf-border);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--qmf-text-primary);
}

.sidebar-close {
  width: 36px;
  height: 36px;
  background: var(--qmf-bg-tertiary);
  border: none;
  border-radius: var(--qmf-border-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-close svg {
  width: 20px;
  height: 20px;
  stroke: var(--qmf-text-secondary);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--qmf-text-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--qmf-border-radius-sm);
  transition: all var(--qmf-transition-fast);
  margin-bottom: 4px;
}

.sidebar-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-link:hover {
  color: var(--qmf-text-primary);
  background: var(--qmf-bg-tertiary);
}

.sidebar-link.hot {
  position: relative;
}

.hot-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  border-radius: var(--qmf-border-radius-full);
  margin-left: auto;
}

.sidebar-auth {
  padding: 16px;
  border-top: 1px solid var(--qmf-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.full-width {
  width: 100%;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--qmf-transition);
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   Main Content
   ===================================================== */

.qmf-main {
  padding-top: var(--qmf-header-height);
  min-height: 100vh;
}

/* =====================================================
   Hero Section
   ===================================================== */

.qmf-hero {
  padding: 40px 0 30px;
  position: relative;
  overflow: hidden;
}

.hero-container {
  max-width: var(--qmf-container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--qmf-bg-glass);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius-full);
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
}

.badge-icon {
  font-size: 16px;
}

.badge-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--qmf-text-secondary);
}

.hero-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.title-line {
  display: block;
  color: var(--qmf-text-primary);
}

.title-gradient {
  display: block;
  background: var(--qmf-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-description {
  font-size: 14px;
  color: var(--qmf-text-secondary);
  margin-bottom: 16px;
  max-width: 450px;
  line-height: 1.5;
}

.hero-cta {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.qmf-btn-large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--qmf-border-radius);
  text-decoration: none;
  transition: all var(--qmf-transition);
  cursor: pointer;
  border: none;
}

.qmf-btn-large svg {
  width: 16px;
  height: 16px;
}

.qmf-btn-large.primary {
  background: var(--qmf-accent-gradient);
  color: white;
  box-shadow: 0 8px 30px var(--qmf-accent-glow);
}

.qmf-btn-large.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px var(--qmf-accent-glow);
}

.qmf-btn-large.secondary {
  background: var(--qmf-bg-glass);
  color: var(--qmf-text-primary);
  border: 1px solid var(--qmf-border);
  backdrop-filter: blur(10px);
}

.qmf-btn-large.secondary:hover {
  background: var(--qmf-bg-tertiary);
  border-color: var(--qmf-accent-primary);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--qmf-text-primary);
  line-height: 1;
}

.stat-suffix {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--qmf-accent-primary);
}

.stat-label {
  font-size: 13px;
  color: var(--qmf-text-muted);
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--qmf-border);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  height: 280px;
}

.visual-card {
  position: absolute;
  background: var(--qmf-bg-glass-strong);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius-lg);
  backdrop-filter: blur(20px);
  box-shadow: var(--qmf-shadow-lg);
}

.main-card {
  width: 240px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  overflow: hidden;
}

.card-glow {
  position: absolute;
  inset: -50%;
  background: var(--qmf-accent-gradient);
  opacity: 0.1;
  filter: blur(60px);
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.flashcard-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.flashcard {
  width: 200px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
}

.flashcard:hover {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--qmf-border-radius);
  background: var(--qmf-bg-secondary);
}

.flashcard-back {
  transform: rotateY(180deg);
  background: var(--qmf-accent-gradient);
  color: white;
}

.hanzi {
  font-size: 3.5rem;
  font-weight: 700;
  font-family: 'Ma Shan Zheng', cursive;
  background: var(--qmf-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

.pinyin {
  font-size: 1.2rem;
  color: var(--qmf-text-secondary);
}

.meaning {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.example {
  font-size: 1rem;
  opacity: 0.9;
  text-align: center;
}

/* Floating Cards */
.float-card {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: floatCard 6s ease-in-out infinite;
}

.float-emoji {
  font-size: 24px;
}

.float-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--qmf-text-primary);
  white-space: nowrap;
}

.card-1 {
  top: 10%;
  right: 10%;
  z-index: 2;
  animation-delay: 0s;
}

.card-2 {
  bottom: 25%;
  left: 5%;
  z-index: 2;
  animation-delay: -2s;
}

.card-3 {
  bottom: 10%;
  right: 15%;
  z-index: 2;
  animation-delay: -4s;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* =====================================================
   Sections
   ===================================================== */

.qmf-section {
  padding: 40px 0;
}

.section-container {
  max-width: var(--qmf-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  margin-bottom: 20px;
}

.section-header.centered {
  text-align: center;
}

.section-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--qmf-text-primary);
  margin-bottom: 6px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--qmf-text-secondary);
  max-width: 500px;
}

.section-header.centered .section-subtitle {
  margin: 0 auto;
}

.section-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--qmf-accent-primary);
  text-decoration: none;
  transition: color var(--qmf-transition-fast);
}

.section-link:hover {
  color: var(--qmf-accent-secondary);
}

.section-header:has(.section-link) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* =====================================================
   Quick Grid - Minimal Compact Tags
   ===================================================== */

.quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.quick-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: var(--qmf-bg-glass);
  border: 1px solid var(--qmf-border);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  font-size: 12px;
}

.quick-card::before {
  display: none;
}

.quick-card:hover {
  border-color: var(--qmf-accent-primary);
  background: var(--qmf-bg-glass-strong);
}

.quick-card.featured {
  background: var(--qmf-accent-gradient);
  border: none;
  padding: 6px 14px 6px 8px;
}

.quick-card.featured:hover {
  opacity: 0.9;
}

.quick-card.featured .card-title,
.quick-card.featured .card-arrow {
  color: white;
}

.quick-card.featured .card-icon {
  background: rgba(255, 255, 255, 0.2);
  border: none;
}

.quick-card.featured .card-icon svg {
  stroke: white;
}

.quick-card.featured .card-desc {
  display: none;
}

.quick-card.hot {
  position: relative;
}

.hot-label {
  position: absolute;
  top: -3px;
  right: 6px;
  font-size: 6px;
  font-weight: 700;
  padding: 1px 4px;
  background: #ef4444;
  color: white;
  border-radius: 8px;
}

@keyframes hotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.card-icon-wrapper {
  flex-shrink: 0;
}

.card-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 145, 178, 0.1);
  border-radius: 50%;
  border: none;
}

.card-icon svg {
  width: 11px;
  height: 11px;
  stroke: var(--qmf-accent-primary);
}

.quick-card:hover .card-icon {
  background: var(--qmf-accent-primary);
  border-color: var(--qmf-accent-primary);
  transform: rotate(5deg);
}

.quick-card:hover .card-icon svg {
  stroke: white;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--qmf-text-primary);
  white-space: nowrap;
  line-height: 1;
}

.card-desc {
  display: none;
}

.card-arrow {
  display: none;
}

/* =====================================================
   HSK Levels
   ===================================================== */

.hsk-section {
  background: var(--qmf-bg-secondary);
}

.hsk-levels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.hsk-card {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  background: var(--qmf-bg-primary);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius);
  text-decoration: none;
  transition: all var(--qmf-transition);
  text-align: center;
}

.hsk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--qmf-shadow);
}

.hsk-badge {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 6px;
  background: var(--qmf-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hsk-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.hsk-words {
  font-size: 14px;
  font-weight: 600;
  color: var(--qmf-text-primary);
}

.hsk-desc {
  font-size: 12px;
  color: var(--qmf-text-muted);
}

.hsk-progress {
  height: 4px;
  background: var(--qmf-bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--qmf-accent-gradient);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Level colors */
.level-1:hover { border-color: #10b981; }
.level-2:hover { border-color: #3b82f6; }
.level-3:hover { border-color: #8b5cf6; }
.level-4:hover { border-color: #f59e0b; }
.level-5:hover { border-color: #ef4444; }
.level-6:hover { border-color: #ec4899; }

/* =====================================================
   News Section
   ===================================================== */

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.news-card {
  background: var(--qmf-bg-glass);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius);
  overflow: hidden;
  transition: all var(--qmf-transition);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--qmf-shadow-lg);
}

.news-card.featured-news {
  grid-column: span 1;
}

.news-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--qmf-transition);
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-category {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--qmf-accent-gradient);
  color: white;
  border-radius: var(--qmf-border-radius-full);
}

.news-content {
  padding: 20px;
}

.news-date {
  font-size: 12px;
  color: var(--qmf-text-muted);
  display: block;
  margin-bottom: 8px;
}

.news-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--qmf-text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.news-excerpt {
  font-size: 14px;
  color: var(--qmf-text-secondary);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--qmf-accent-primary);
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}

/* =====================================================
   Features Section
   ===================================================== */

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--qmf-bg-glass);
  border: 1px solid var(--qmf-border);
  border-radius: var(--qmf-border-radius);
  transition: all var(--qmf-transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--qmf-accent-primary);
  box-shadow: var(--qmf-shadow-md);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qmf-accent-gradient);
  border-radius: var(--qmf-border-radius);
  box-shadow: 0 8px 20px var(--qmf-accent-glow);
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.feature-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--qmf-text-primary);
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 14px;
  color: var(--qmf-text-secondary);
}

/* =====================================================
   CTA Section
   ===================================================== */

.cta-section {
  padding: 30px 0 50px;
}

.cta-card {
  background: var(--qmf-accent-gradient);
  border-radius: var(--qmf-border-radius-lg);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.cta-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.cta-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}

.cta-buttons {
  display: flex;
  gap: 10px;
}

.cta-buttons .qmf-btn-large.primary {
  background: white;
  color: var(--qmf-accent-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-buttons .qmf-btn-large.secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-decoration {
  position: relative;
  z-index: 1;
  text-align: center;
}

.cta-hanzi {
  display: block;
  font-size: 5rem;
  font-weight: 800;
  font-family: 'Ma Shan Zheng', cursive;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.cta-meaning {
  display: block;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

/* =====================================================
   Footer - QMF UI Style
   ===================================================== */

.qmf-footer {
  background: linear-gradient(180deg, var(--qmf-bg-secondary) 0%, var(--qmf-bg-tertiary) 100%);
  border-top: 1px solid var(--qmf-border);
  position: relative;
  overflow: hidden;
}

.footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  color: var(--qmf-bg-primary);
  transform: translateY(-99%);
}

.footer-wave svg {
  width: 100%;
  height: 100%;
}

.footer-container {
  max-width: var(--qmf-container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.footer-main {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px 0 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 8px;
}

.footer-logo img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(8, 145, 178, 0.15);
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.footer-logo-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--qmf-text-primary);
  line-height: 1.2;
}

.footer-logo-badge {
  font-size: 9px;
  font-weight: 700;
  color: white;
  background: var(--qmf-accent-gradient);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: 0.5px;
}

.footer-tagline {
  font-size: 11px;
  color: var(--qmf-text-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

.footer-social {
  display: flex;
  gap: 6px;
}

.social-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qmf-bg-glass);
  border: 1px solid var(--qmf-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.social-btn:hover {
  background: var(--qmf-accent-primary);
  border-color: var(--qmf-accent-primary);
}

.social-btn svg {
  width: 12px;
  height: 12px;
  fill: var(--qmf-text-secondary);
  transition: fill 0.2s ease;
}

.social-btn:hover svg {
  fill: white;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.footer-column h4 {
  font-size: 10px;
  font-weight: 700;
  color: var(--qmf-accent-primary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-column a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--qmf-text-secondary);
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: var(--qmf-accent-primary);
}

.footer-column .link-icon {
  font-size: 10px;
  opacity: 0.7;
}

.footer-column a:hover .link-icon {
  opacity: 1;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--qmf-border);
  font-size: 12px;
  color: var(--qmf-text-muted);
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-separator {
  opacity: 0.4;
}

.footer-tech strong {
  color: var(--qmf-accent-primary);
  font-weight: 600;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =====================================================
   Responsive Design
   ===================================================== */

@media (max-width: 1200px) {
  .quick-grid {
    gap: 6px;
  }
  
  .hsk-levels {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .qmf-nav {
    display: none;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hero-visual {
    height: 400px;
    order: -1;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --island-width-collapsed: 200px;
    --island-width-expanded: calc(100vw - 32px);
    --island-height-expanded: 160px;
  }
  
  .dynamic-island {
    max-width: calc(100vw - 32px);
    top: calc(var(--qmf-header-height) + 8px);
  }
  
  .qmf-hero {
    padding: 60px 0 40px;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .hero-stats {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .stat-divider {
    display: none;
  }
  
  .quick-grid {
    gap: 6px;
  }
  
  .quick-card {
    padding: 6px 12px 6px 8px;
  }
  
  .quick-card.featured {
    padding: 8px 16px 8px 10px;
  }
  
  .card-icon {
    width: 24px;
    height: 24px;
  }
  
  .card-icon svg {
    width: 12px;
    height: 12px;
  }
  
  .card-title {
    font-size: 11px;
  }
  
  .hsk-levels {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .cta-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 24px;
  }
  
  .cta-decoration {
    margin-top: 32px;
  }
  
  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .auth-buttons {
    display: none;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 16px;
  }
  
  .section-container {
    padding: 0 16px;
  }
  
  .qmf-section {
    padding: 60px 0;
  }
  
  .hsk-levels {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .hsk-card {
    padding: 16px 12px;
  }
  
  .hsk-badge {
    font-size: 1.25rem;
  }
  
  .main-card {
    width: 280px;
    height: 360px;
  }
  
  .flashcard {
    width: 240px;
    height: 300px;
  }
  
  .hanzi {
    font-size: 4rem;
  }
}

/* =====================================================
   Animations
   ===================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.qmf-hero .hero-content > * {
  animation: fadeInUp 0.6s ease backwards;
}

.qmf-hero .hero-badge { animation-delay: 0.1s; }
.qmf-hero .hero-title { animation-delay: 0.2s; }
.qmf-hero .hero-description { animation-delay: 0.3s; }
.qmf-hero .hero-cta { animation-delay: 0.4s; }
.qmf-hero .hero-stats { animation-delay: 0.5s; }

.hero-visual {
  animation: fadeIn 0.8s ease 0.3s backwards;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Premium Badge Tier styles */
.qmf-tier-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  vertical-align: middle !important;
  transition: all 0.3s ease !important;
  margin-left: 6px !important;
}

.qmf-tier-badge--pro {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #1e1b4b !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  animation: goldPulse 2s infinite alternate !important;
}

.qmf-tier-badge--free {
  background: #e2e8f0 !important;
  color: #475569 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
[data-theme="dark"] .qmf-tier-badge--free {
  background: #334155 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

@keyframes goldPulse {
  0% {
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.3);
  }
  100% {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
  }
}