/* ===== Design Tokens ===== */
:root {
  --color-bg:           #080810;
  --color-surface:      #0f0f1a;
  --color-surface-2:    #161625;
  --color-border:       #1e1e35;
  --color-accent:       #e10600;
  --color-accent-dim:   #7a0300;
  --color-text-primary: #f0f0f8;
  --color-text-muted:   #5a5a78;
  --color-text-dim:     #3a3a58;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }

/* ===== Alpine ===== */
[x-cloak] { display: none !important; }

/* ===== Nav Active State ===== */
.nav-item { position: relative; }
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.nav-item-active::before { transform: scaleY(1); }
.nav-item-active { background: var(--color-surface); }

/* ===== Login ===== */
.login-btn-glow:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.4), 0 0 40px rgba(225, 6, 0, 0.15);
}
.diagonal-slash-accent {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.diagonal-slash-accent::after {
  content: '';
  position: absolute;
  top: -20%;
  right: 18%;
  width: 2px;
  height: 140%;
  background: var(--color-accent);
  opacity: 0.22;
  transform: rotate(12deg);
  transform-origin: top center;
}

/* ===== Toast ===== */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(calc(100% + 1.5rem)); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-enter { animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* ===== Card Stagger ===== */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-stagger > * {
  animation: card-enter 0.35s ease-out both;
}
.card-stagger > *:nth-child(1) { animation-delay: 0ms; }
.card-stagger > *:nth-child(2) { animation-delay: 70ms; }
.card-stagger > *:nth-child(3) { animation-delay: 140ms; }
.card-stagger > *:nth-child(4) { animation-delay: 210ms; }

/* ===== Skeleton ===== */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-border) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: 0;
}

/* ===== Pulse Dot (Live) ===== */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.pulse-dot {
  position: relative;
  display: inline-block;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-ring 2s ease-out infinite;
}

/* ===== Table Row Hover ===== */
.table-row-hover:hover {
  background-color: rgba(225, 6, 0, 0.035);
}

/* ===== Value Display (Monospace data) ===== */
.value-display {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  word-break: break-all;
}

/* ===== Form Controls ===== */
input[type="checkbox"] {
  accent-color: var(--color-accent);
}
select option {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}