@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

main[data-v-d8143acf] {
  position: relative;
  width: 100%;
}

    
* {
      font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'Segoe UI', Roboto, sans-serif;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    
    .font-din {
      font-family: 'JetBrains Mono', -apple-system, monospace;
    }

    
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: #0B0F16; }
    ::-webkit-scrollbar-thumb { background: #232D3F; border-radius: 2px; }
    ::-webkit-scrollbar-thumb:hover { background: #EA8619; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    
    .cr-bg-dark { background-color: #0B0F16; }
    .cr-card-dark { background-color: #141A24; }
    .cr-card-hover:hover { background-color: #19212E; }
    .cr-border { border-color: rgba(255, 255, 255, 0.07); }
    .cr-border-gold { border-color: rgba(234, 134, 25, 0.35); }
    .cr-gold-text { color: #FDB833; }
    .cr-gold-gradient { background: linear-gradient(135deg, #EA8619 0%, #FDB833 100%); }
    .cr-gold-gradient-hover:hover { background: linear-gradient(135deg, #F39328 0%, #FEC556 100%); }
    .cr-green { color: #00C087; }
    .cr-green-bg { background-color: #00C087; }
    .cr-red { color: #FF4D6A; }
    .cr-red-bg { background-color: #FF4D6A; }
    .cr-crimson-bg { background-color: #C4141A; }

    
    .cr-badge-official {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2.5px 7px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.04em;
      white-space: nowrap;
      background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
      color: #FFFFFF !important;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4) !important;
    }
    .cr-badge-official * {
      color: #FFFFFF !important;
    }

    
    
    
    
    .app-global-toast {
      background-color: #151D2A !important;
      border: 2px solid #EA8619 !important;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(234, 134, 25, 0.35) !important;
    }
    .app-global-toast .app-global-toast-dot {
      background-color: #FDB833 !important;
      box-shadow: 0 0 10px #FDB833 !important;
    }
    .app-global-toast .app-global-toast-text {
      color: #FFFFFF !important;
      font-size: 13.5px !important;
      font-weight: 800 !important;
      letter-spacing: 0.02em !important;
    }

    
    .theme-white .app-global-toast {
      background-color: #FFFFFF !important;
      border: 2px solid #D97706 !important;
      box-shadow: 0 16px 36px rgba(217, 119, 6, 0.3), 0 4px 16px rgba(15, 23, 42, 0.12) !important;
    }
    .theme-white .app-global-toast .app-global-toast-dot {
      background-color: #D97706 !important;
      box-shadow: 0 0 10px #D97706 !important;
    }
    .theme-white .app-global-toast .app-global-toast-text {
      color: #0F172A !important;
      font-size: 13.5px !important;
      font-weight: 900 !important;
      letter-spacing: 0.02em !important;
    }

    
    

    
    .theme-white { background-color: #F8FAFC !important; color: #0F172A !important; }
    .theme-white .cr-bg-dark { background-color: #F8FAFC !important; color: #0F172A !important; }
    .theme-white .cr-card-dark { 
      background-color: #FFFFFF !important; 
      border-color: rgba(15, 23, 42, 0.08) !important; 
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important; 
    }
    .theme-white .cr-card-hover:hover { background-color: #F1F5F9 !important; }
    .theme-white .cr-border { border-color: rgba(15, 23, 42, 0.08) !important; }
    .theme-white .cr-border-gold { border-color: rgba(217, 119, 6, 0.35) !important; }
    .theme-white .cr-gold-gradient { background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important; color: #FFFFFF !important; }
    .theme-white .cr-gold-text { color: #D97706 !important; }
    .theme-white .text-white { color: #0F172A !important; }
    
    .theme-white .cr-badge-official,
    .theme-white .cr-badge-official *,
    .theme-white .from-emerald-500,
    .theme-white .from-emerald-500 *,
    .theme-white .from-rose-500,
    .theme-white .from-rose-500 *,
    .theme-white .bg-emerald-500,
    .theme-white .bg-emerald-500 *,
    .theme-white .bg-rose-500,
    .theme-white .bg-rose-500 *,
    .theme-white .bg-red-600,
    .theme-white .bg-red-600 *,
    .theme-white .from-red-600,
    .theme-white .from-red-600 *,
    .theme-white .bg-\[\#C4141A\],
    .theme-white .bg-\[\#C4141A\] *,
    .theme-white .cr-crimson-bg,
    .theme-white .cr-crimson-bg *,
    .theme-white .cr-gold-gradient,
    .theme-white .cr-gold-gradient *,
    .theme-white .text-pure-white {
      color: #FFFFFF !important;
    }
    .theme-white .cr-badge-official {
      background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
      box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35) !important;
    }
    .theme-white .text-slate-200, .theme-white .text-slate-300 { color: #334155 !important; }
    .theme-white .text-slate-400 { color: #475569 !important; }
    .theme-white .text-slate-500 { color: #64748B !important; }
    .theme-white .bg-\[\#0B0F16\], 
    .theme-white .bg-\[\#090D14\], 
    .theme-white .bg-\[\#0D121B\], 
    .theme-white .bg-\[\#192230\], 
    .theme-white .bg-\[\#1C2432\], 
    .theme-white .bg-\[\#141A24\] {
      background-color: #F1F5F9 !important;
    }
    .theme-white .border-white\/5, .theme-white .border-white\/10 { border-color: rgba(15, 23, 42, 0.07) !important; }
    .theme-white .bg-white\/5, .theme-white .bg-white\/10 { background-color: rgba(15, 23, 42, 0.04) !important; }
    .theme-white input { color: #0F172A !important; }
    .theme-white input::placeholder { color: #94A3B8 !important; }
    .theme-white header { background-color: rgba(255, 255, 255, 0.95) !important; }

    
    .theme-navy { background-color: #070E1E !important; color: #E2E8F0 !important; }
    .theme-navy .cr-bg-dark { background-color: #070E1E !important; }
    .theme-navy .cr-card-dark { background-color: #0F1D38 !important; border-color: rgba(56, 189, 248, 0.15) !important; }
    .theme-navy .cr-card-hover:hover { background-color: #16284D !important; }
    .theme-navy .cr-border { border-color: rgba(56, 189, 248, 0.12) !important; }
    .theme-navy .cr-border-gold { border-color: rgba(56, 189, 248, 0.35) !important; }
    .theme-navy .bg-\[\#0B0F16\], .theme-navy .bg-\[\#090D14\], .theme-navy .bg-\[\#0D121B\], .theme-navy .bg-\[\#192230\], .theme-navy .bg-\[\#1C2432\] {
      background-color: #09152B !important;
    }
    .theme-navy header { background-color: rgba(15, 29, 56, 0.95) !important; }

    
    .theme-emerald { background-color: #06130E !important; color: #ECFDF5 !important; }
    .theme-emerald .cr-bg-dark { background-color: #06130E !important; }
    .theme-emerald .cr-card-dark { background-color: #0B2018 !important; border-color: rgba(16, 185, 129, 0.18) !important; }
    .theme-emerald .cr-card-hover:hover { background-color: #122D22 !important; }
    .theme-emerald .cr-border { border-color: rgba(16, 185, 129, 0.15) !important; }
    .theme-emerald .cr-border-gold { border-color: rgba(16, 185, 129, 0.4) !important; }
    .theme-emerald .bg-\[\#0B0F16\], .theme-emerald .bg-\[\#090D14\], .theme-emerald .bg-\[\#0D121B\], .theme-emerald .bg-\[\#192230\], .theme-emerald .bg-\[\#1C2432\] {
      background-color: #071712 !important;
    }
    .theme-emerald header { background-color: rgba(11, 32, 24, 0.95) !important; }

    
    @keyframes goldGlow {
      0%, 100% { box-shadow: 0 0 15px rgba(234, 134, 25, 0.2); }
      50% { box-shadow: 0 0 25px rgba(234, 134, 25, 0.4); }
    }
    .cr-glow { animation: goldGlow 3s infinite ease-in-out; }

    
    @keyframes flashGreen {
      0% { background-color: rgba(0, 192, 135, 0.3); }
      100% { background-color: transparent; }
    }
    @keyframes flashRed {
      0% { background-color: rgba(255, 77, 106, 0.3); }
      100% { background-color: transparent; }
    }
    .flash-up { animation: flashGreen 0.6s ease-out; }
    .flash-down { animation: flashRed 0.6s ease-out; }

    
    
    
    .rule-card-active {
      background-color: #1C2534 !important;
      border-color: #EA8619 !important;
      box-shadow: 0 4px 14px rgba(234, 134, 25, 0.25) !important;
    }
    .rule-card-active .rule-time {
      color: #FDB833 !important;
    }
    .rule-card-active .rule-win {
      color: #EA8619 !important;
    }
    .rule-card-inactive {
      background-color: #0B0F16 !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
    .rule-card-inactive .rule-time {
      color: #E2E8F0 !important;
    }
    .rule-card-inactive .rule-win {
      color: #94A3B8 !important;
    }

    
    .theme-white .rule-card-active {
      background-color: #FEF3C7 !important; 
      border: 2px solid #D97706 !important;
      box-shadow: 0 4px 14px rgba(217, 119, 6, 0.2) !important;
    }
    .theme-white .rule-card-active .rule-time {
      color: #78350F !important; 
      font-weight: 800 !important;
    }
    .theme-white .rule-card-active .rule-win {
      color: #B45309 !important; 
      font-weight: 700 !important;
    }
    .theme-white .rule-card-inactive {
      background-color: #F8FAFC !important;
      border: 1px solid #E2E8F0 !important;
    }
    .theme-white .rule-card-inactive .rule-time {
      color: #1E293B !important;
      font-weight: 700 !important;
    }
    .theme-white .rule-card-inactive .rule-win {
      color: #64748B !important;
      font-weight: 600 !important;
    }

    
    .theme-white button.bg-\[\#00C087\],
    .theme-white button.bg-\[\#00C087\] *,
    .theme-white button.bg-\[\#FF4D6A\],
    .theme-white button.bg-\[\#FF4D6A\] * {
      color: #FFFFFF !important;
    }