:root {
  color-scheme: dark;
}

html, body {
  background: #0b0f17;
}

.bar-fill {
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}
.dot-rec { animation: pulse-ring 1.6s infinite; }

@keyframes pulse-ring-green {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.dot-online { animation: pulse-ring-green 2.2s infinite; }

.card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(6px);
}
.row-hover:hover {
  background: rgba(148, 163, 184, 0.06);
}

.preview-img {
  opacity: 0;
  transition: opacity 0.3s;
}
.preview-img.loaded {
  opacity: 1;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0f17; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

.bg-aurora {
  background:
    radial-gradient(900px 400px at 12% -8%, rgba(56, 189, 248, 0.10), transparent 60%),
    radial-gradient(820px 420px at 92% 0%, rgba(168, 85, 247, 0.10), transparent 55%),
    #0b0f17;
}

[x-cloak] { display: none !important; }

.toast {
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}