:root {
  /* Base background */
  --color-bg: #13181E;

  /* Card components */
  --color-surface: #1A1F26;     /* Card body */
  --color-panel: #21272f;       /* Card header */
  --color-border: #2a2f36;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #c0c4cc;
  --color-text-muted: #7c848d;

  /* Accent */
  --color-primary: #10a37f;
  --color-primary-hover: #0e8d6a;
}

.bg-card-header {
  background-color: var(--color-panel);
  border-bottom: 1px solid var(--color-border);
}

.bg-card-body {
  background-color: var(--color-surface);
}

.color-text-primary {
  color: var(--color-text-primary);
}

.color-text-secondary {
  color: var(--color-text-secondary);
}

.color-text-muted {
  color: var(--color-text-muted);
}


.text-gold {
    color: #FFAD49!important;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    --c:no-repeat linear-gradient(#f88800 0 0);
    background: var(--c),var(--c),transparent;
    background-size: 60% 100%;
    animation: l16 3s infinite;
    z-index: 9999; /* Ensure it's on top of other content */
  }
  
  .loading-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px 0;
  }
  
  .loading-loader .loading-text {
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: 0 0 4px #f88800;
    letter-spacing: 2px;
  }
  
  @keyframes l16 {
    0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}
  }