/**
 * RAFLOX Design System v6 — Global CSS
 * =====================================================
 * Palette officielle RAFLOX, typographie, tokens, composants réutilisables
 * Import: <link rel="stylesheet" href="/css/raflox-design-system.css">
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root {
  /* Blues — signature RAFLOX */
  --rf-blue-900: #1E3A8A;
  --rf-blue-700: #1E40AF;
  --rf-blue-600: #2563EB;
  --rf-blue-500: #3B82F6;
  --rf-blue-100: #DBEAFE;
  --rf-cyan:     #22D3EE;
  --rf-cyan-dk:  #06B6D4;

  /* Gold — accent uniquement (5–10% max) */
  --rf-gold:     #D4AF37;
  --rf-gold-lt:  #F6E27A;
  --rf-gold-dk:  #A87B00;
  --rf-gold-pale:#F3E5C0;
  --rf-gold-soft:#FFD76A;

  /* Status */
  --rf-success:  #22C55E;
  --rf-warning:  #F59E0B;
  --rf-error:    #EF4444;
  --rf-info:     #38BDF8;

  /* Dark backgrounds */
  --rf-ink:      #0B1220;
  --rf-slate:    #0F172A;
  --rf-dark2:    #080D1C;
  --rf-dark3:    #0C1226;

  /* Glass */
  --rf-glass:    rgba(255,255,255,0.055);
  --rf-glass-2:  rgba(255,255,255,0.09);
  --rf-border:   rgba(148,163,184,0.14);

  /* Text */
  --rf-text:     #F1F5F9;
  --rf-text-sub: #94A3B8;
  --rf-text-mute:#475569;

  /* Gradients */
  --rf-g-brand:  linear-gradient(135deg, #2563EB, #1E40AF);
  --rf-g-hero:   linear-gradient(135deg, #2563EB, #22D3EE);
  --rf-g-gold:   linear-gradient(135deg, #F6E27A 0%, #D4AF37 35%, #A87B00 70%, #F6E27A 100%);
  --rf-g-cyan:   linear-gradient(135deg, #0EA5E9, #22D3EE);
  --rf-g-dark:   linear-gradient(180deg, #0B1220, #080D1C);

  /* Typography */
  --rf-ff:       'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --rf-ff-body:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --rf-ff-logo:  'Poppins', sans-serif;
  --rf-ff-mono:  ui-monospace, 'Cascadia Code', monospace;

  /* Spacing scale */
  --rf-space-xs:  4px;
  --rf-space-sm:  8px;
  --rf-space-md:  16px;
  --rf-space-lg:  24px;
  --rf-space-xl:  40px;
  --rf-space-2xl: 64px;

  /* Border radius */
  --rf-r-sm:  8px;
  --rf-r:     12px;
  --rf-r-lg:  18px;
  --rf-r-xl:  24px;
  --rf-r-2xl: 32px;

  /* Easing */
  --rf-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --rf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rf-out:    cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadows */
  --rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --rf-shadow:    0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --rf-shadow-lg: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  --rf-shadow-brand: 0 8px 24px rgba(37,99,235,0.4);
  --rf-shadow-gold:  0 8px 24px rgba(212,175,55,0.35);
}

/* ═══════════════════════════════════════════════════════════
   2. BASE RESET & BODY
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; text-size-adjust: 100% }
body {
  background: var(--rf-ink);
  font-family: var(--rf-ff-body);
  color: var(--rf-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit }
img { display: block; max-width: 100% }
button { font-family: inherit; cursor: pointer }
input, textarea, select { font-family: inherit }

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

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.35); border-radius: 99px }

/* ═══════════════════════════════════════════════════════════
   3. TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 { font-family: var(--rf-ff); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em }
h1 { font-size: clamp(2rem, 5vw, 3.5rem) }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem) }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem) }
h4 { font-size: 1.25rem }
h5 { font-size: 1.125rem }
h6 { font-size: 1rem }
p  { line-height: 1.72; color: var(--rf-text-sub) }

/* RAFLOX Logo text treatment */
.rf-logo-text {
  font-family: var(--rf-ff-logo);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.025em;
}
.rf-logo-dot {
  font-family: var(--rf-ff-logo);
  font-weight: 800;
  font-style: normal;
  color: var(--rf-gold);
}

/* Gradient text */
.rf-text-gradient {
  background: var(--rf-g-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rf-text-gold {
  background: var(--rf-g-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   4. LAYOUT UTILITIES
═══════════════════════════════════════════════════════════ */
.rf-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--rf-space-md) }
.rf-section   { padding: var(--rf-space-2xl) 0 }
.rf-flex      { display: flex; align-items: center }
.rf-flex-col  { display: flex; flex-direction: column }
.rf-grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rf-space-lg) }
.rf-grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rf-space-lg) }
.rf-grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rf-space-md) }
.rf-center    { display: flex; align-items: center; justify-content: center }
.rf-between   { display: flex; align-items: center; justify-content: space-between }

/* Responsive grids */
@media(max-width:1024px) { .rf-grid-4 { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:768px)  { .rf-grid-3, .rf-grid-4 { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:480px)  { .rf-grid-2, .rf-grid-3, .rf-grid-4 { grid-template-columns: 1fr } }

/* Line clamp helpers */
.lc1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.lc2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.lc3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }

/* ═══════════════════════════════════════════════════════════
   5. CARD COMPONENTS
═══════════════════════════════════════════════════════════ */

/* Base glass card */
.rf-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-lg);
  overflow: hidden;
  position: relative;
  transition: transform 0.22s var(--rf-ease), box-shadow 0.22s var(--rf-ease), border-color 0.22s;
}
.rf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rf-shadow-lg);
  border-color: rgba(37,99,235,0.3);
}

/* Lottery card */
.rf-lottery-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s var(--rf-spring), box-shadow 0.25s var(--rf-ease), border-color 0.22s;
}
.rf-lottery-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rf-g-hero);
  opacity: 0;
  transition: opacity 0.22s;
}
.rf-lottery-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(37,99,235,0.25), var(--rf-shadow-brand);
  border-color: rgba(37,99,235,0.35);
}
.rf-lottery-card:hover::before { opacity: 1 }

/* Mystery box card */
.rf-mystery-card {
  background: rgba(15,23,42,0.8);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--rf-r-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.25s var(--rf-spring);
}
.rf-mystery-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), var(--rf-shadow-gold);
  border-color: rgba(212,175,55,0.35);
}

/* ═══════════════════════════════════════════════════════════
   6. BUTTONS
═══════════════════════════════════════════════════════════ */
.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--rf-r);
  font-family: var(--rf-ff);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--rf-ease);
  min-height: 44px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.rf-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.15s;
}
.rf-btn:hover::after { opacity: 1 }
.rf-btn:active { transform: scale(0.97) }
.rf-btn:focus-visible { outline: 2px solid var(--rf-blue-600); outline-offset: 3px }

/* Primary */
.rf-btn-primary {
  background: var(--rf-g-brand);
  color: #fff;
  box-shadow: var(--rf-shadow-brand);
}
.rf-btn-primary:hover { box-shadow: 0 12px 32px rgba(37,99,235,0.55); transform: translateY(-2px) }

/* Gold/Premium */
.rf-btn-gold {
  background: var(--rf-g-gold);
  color: #0B1220;
  box-shadow: var(--rf-shadow-gold);
  font-weight: 800;
}
.rf-btn-gold:hover { box-shadow: 0 12px 32px rgba(212,175,55,0.5); transform: translateY(-2px) }

/* Ghost */
.rf-btn-ghost {
  background: var(--rf-glass);
  color: var(--rf-text-sub);
  border: 1px solid var(--rf-border);
}
.rf-btn-ghost:hover { background: var(--rf-glass-2); color: var(--rf-text); border-color: rgba(37,99,235,0.3) }

/* Outline */
.rf-btn-outline {
  background: transparent;
  color: var(--rf-blue-500);
  border: 1.5px solid var(--rf-blue-600);
}
.rf-btn-outline:hover { background: rgba(37,99,235,0.1); border-color: var(--rf-blue-500) }

/* Sizes */
.rf-btn-sm  { padding: 8px 16px; font-size: 12px; min-height: 36px }
.rf-btn-lg  { padding: 15px 32px; font-size: 16px; min-height: 52px }
.rf-btn-xl  { padding: 18px 40px; font-size: 17px; min-height: 58px; border-radius: var(--rf-r-lg) }
.rf-btn-full { width: 100% }

/* ═══════════════════════════════════════════════════════════
   7. BADGES & TAGS
═══════════════════════════════════════════════════════════ */
.rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--rf-ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rf-badge-live   { background: rgba(34,197,94,0.12);  color: #4ade80; border-color: rgba(34,197,94,0.22) }
.rf-badge-ended  { background: rgba(148,163,184,0.1); color: #94A3B8; border-color: rgba(148,163,184,0.2) }
.rf-badge-soon   { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.22) }
.rf-badge-hot    { background: rgba(239,68,68,0.12);  color: #f87171; border-color: rgba(239,68,68,0.22) }
.rf-badge-premium{ background: rgba(139,92,246,0.12); color: #a78bfa; border-color: rgba(139,92,246,0.22) }
.rf-badge-gold   { background: rgba(212,175,55,0.12); color: #fbbf24; border-color: rgba(212,175,55,0.22) }
.rf-badge-blue   { background: rgba(37,99,235,0.12);  color: #60a5fa; border-color: rgba(37,99,235,0.22) }

/* Live pulse dot */
.rf-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rf-success);
  animation: rfPulse 1.8s ease-in-out infinite;
}
@keyframes rfPulse {
  0%, 100% { opacity: 1; transform: scale(1) }
  50%       { opacity: 0.5; transform: scale(0.7) }
}

/* ═══════════════════════════════════════════════════════════
   8. FORM ELEMENTS
═══════════════════════════════════════════════════════════ */
.rf-input, .rf-textarea, .rf-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r);
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--rf-ff-body);
  color: var(--rf-text);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  min-height: 44px;
}
.rf-input:focus, .rf-textarea:focus, .rf-select:focus {
  border-color: rgba(37,99,235,0.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.rf-input::placeholder, .rf-textarea::placeholder { color: rgba(148,163,184,0.4) }
.rf-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rf-text-sub);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════
   9. PROGRESS BAR
═══════════════════════════════════════════════════════════ */
.rf-progress-wrap {
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.rf-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--rf-g-brand);
  transition: width 0.6s var(--rf-out);
}
.rf-progress-fill--gold { background: var(--rf-g-gold) }
.rf-progress-fill--cyan { background: var(--rf-g-cyan) }

/* ═══════════════════════════════════════════════════════════
   10. COUNTDOWN TIMER
═══════════════════════════════════════════════════════════ */
.rf-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rf-ff);
}
.rf-countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15,23,42,0.8);
  border: 1px solid var(--rf-border);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 44px;
}
.rf-countdown-val { font-size: 20px; font-weight: 900; line-height: 1; color: var(--rf-text) }
.rf-countdown-lbl { font-size: 9px; color: var(--rf-text-mute); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px }
.rf-countdown-sep { font-size: 18px; font-weight: 900; color: var(--rf-text-mute); margin-bottom: 10px }

/* ═══════════════════════════════════════════════════════════
   11. TOAST / NOTIFICATION
═══════════════════════════════════════════════════════════ */
.rf-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(15,23,42,0.97);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rf-text);
  box-shadow: var(--rf-shadow-lg);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s var(--rf-spring);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}
.rf-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0) }

/* ═══════════════════════════════════════════════════════════
   12. SKELETON LOADER
═══════════════════════════════════════════════════════════ */
.rf-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: rfShimmer 1.6s infinite;
  border-radius: var(--rf-r-sm);
}
@keyframes rfShimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ═══════════════════════════════════════════════════════════
   13. SECTION HEADINGS
═══════════════════════════════════════════════════════════ */
.rf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.rf-section-title {
  font-family: var(--rf-ff);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  color: var(--rf-text);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.rf-section-sub {
  font-size: 13px;
  color: var(--rf-text-sub);
  margin-top: 4px;
}
.rf-section-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--rf-blue-500);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.rf-section-link:hover { color: var(--rf-cyan) }

/* ═══════════════════════════════════════════════════════════
   14. MODAL
═══════════════════════════════════════════════════════════ */
.rf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.rf-modal-overlay.open { opacity: 1; pointer-events: auto }
.rf-modal-box {
  background: rgba(11,18,32,0.98);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-2xl);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--rf-shadow-lg);
  transform: translateY(-20px) scale(0.97);
  transition: transform 0.28s var(--rf-spring);
}
.rf-modal-overlay.open .rf-modal-box { transform: translateY(0) scale(1) }

/* ═══════════════════════════════════════════════════════════
   15. MOBILE HELPERS (app-like)
═══════════════════════════════════════════════════════════ */

/* Safe area padding for bottom nav */
.rf-page-content {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Tap highlight remove */
* { -webkit-tap-highlight-color: transparent }

/* Swipeable horizontal scroll */
.rf-scroll-x {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.rf-scroll-x::-webkit-scrollbar { display: none }
.rf-scroll-x > * { scroll-snap-align: start; flex-shrink: 0 }

/* ═══════════════════════════════════════════════════════════
   16. ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes rfFadeUp {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes rfFadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes rfScale {
  from { opacity: 0; transform: scale(0.92) }
  to   { opacity: 1; transform: scale(1) }
}
@keyframes rfFloat {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-8px) }
}

.rf-animate-fade-up   { animation: rfFadeUp   0.5s var(--rf-out) both }
.rf-animate-fade-in   { animation: rfFadeIn   0.3s var(--rf-ease) both }
.rf-animate-scale     { animation: rfScale    0.4s var(--rf-spring) both }
.rf-animate-float     { animation: rfFloat    3s ease-in-out infinite }

/* Stagger helpers */
.rf-delay-1 { animation-delay: 0.1s }
.rf-delay-2 { animation-delay: 0.2s }
.rf-delay-3 { animation-delay: 0.3s }
.rf-delay-4 { animation-delay: 0.4s }
.rf-delay-5 { animation-delay: 0.5s }

/* ═══════════════════════════════════════════════════════════
   17. AVATAR
═══════════════════════════════════════════════════════════ */
.rf-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rf-g-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rf-ff);
  font-weight: 800;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  object-fit: cover;
}
.rf-avatar-sm  { width: 32px; height: 32px; font-size: 13px }
.rf-avatar-lg  { width: 56px; height: 56px; font-size: 22px }
.rf-avatar-xl  { width: 80px; height: 80px; font-size: 32px }

/* ═══════════════════════════════════════════════════════════
   18. STAT CHIP
═══════════════════════════════════════════════════════════ */
.rf-stat {
  background: rgba(15,23,42,0.8);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-lg);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s var(--rf-ease), border-color 0.2s;
}
.rf-stat:hover { transform: translateY(-3px); border-color: rgba(37,99,235,0.25) }
.rf-stat-val {
  font-family: var(--rf-ff);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  background: var(--rf-g-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.rf-stat-label { font-size: 12px; color: var(--rf-text-sub); font-weight: 600; letter-spacing: 0.04em }

/* ═══════════════════════════════════════════════════════════
   19. EMPTY STATE
═══════════════════════════════════════════════════════════ */
.rf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--rf-text-sub);
}
.rf-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.rf-empty-title { font-family: var(--rf-ff); font-size: 1.25rem; font-weight: 800; color: var(--rf-text); margin-bottom: 8px }
.rf-empty-desc  { font-size: 14px; line-height: 1.6; max-width: 320px }

/* ═══════════════════════════════════════════════════════════
   20. UTILITY CLASSES
═══════════════════════════════════════════════════════════ */
.rf-glass   { background: var(--rf-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
.rf-border  { border: 1px solid var(--rf-border) }
.rf-rounded { border-radius: var(--rf-r-lg) }
.rf-shadow  { box-shadow: var(--rf-shadow) }
.rf-hidden  { display: none !important }
.rf-visible { display: block !important }
.rf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rf-pointer { cursor: pointer }
.rf-select-none { user-select: none }
.rf-no-overflow { overflow: hidden }

/* Z-index scale */
.rf-z-10 { z-index: 10 }
.rf-z-20 { z-index: 20 }
.rf-z-30 { z-index: 30 }
.rf-z-50 { z-index: 50 }
.rf-z-100 { z-index: 100 }
.rf-z-nav  { z-index: 800 }
.rf-z-modal{ z-index: 900 }
.rf-z-toast{ z-index: 9999 }