/* =========================
   HEADER
========================= */
.header {
  display: flex;
  justify-content: space-between;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: var(--bg-primary);

  align-items: center;
  padding: var(--space-xs) var(--space-xs);
  margin: 0;
}


/* =========================
   LAYOUT
========================= */
.header-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: calc(var(--space-md) + 4px);
}

.center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}


/* =========================
   LOGO
========================= */
.logo, 
.logo2 {
  font-size: var(--text-fs-xl);
  font-weight: bold;

  background: linear-gradient(
    90deg,
    var(--color-blue-electric),
    var(--color-pink-cosmic)
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =========================
   ALPHA LABEL
========================= */
.alpha, 
.alpha2 {
  font-size: var(--text-fs-xs);
  color: var(--color-blue-electric);
  text-align: left;
  letter-spacing: 1px;
}


/* =========================
   USER
========================= */
.user {
  opacity: 0.8;
  font-size: var(--text-fs-sm);
  color: var(--text-muted);
}


/* =========================
   COUNTDOWN
========================= */
.countdown {
  white-space: nowrap;
  font-size: var(--text-fs-md);
  color: var(--text-primary);
}

.error {
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  color: var(--text-error);
  margin: var(--space-sm) 0;
}