[x-cloak] { display: none !important; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.mono { font-family: 'JetBrains Mono', monospace; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

.ghost-border { border: 1px solid #1c2b3c; }

@keyframes pulse-ring {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pulse-green { animation: pulse-ring 2s infinite; }

@keyframes pulse-red-ring {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,180,171,0.6); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(255,180,171,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,180,171,0); }
}
.pulse-red { animation: pulse-red-ring 1.5s infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spinner { animation: spin-slow 0.9s linear infinite; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in 0.2s ease-out; }

@keyframes slide-in-right {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.slide-in-right { animation: slide-in-right 0.25s ease-out; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2b3c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #273647; }

.digit-input {
  width: 3rem; height: 4rem; border-radius: 0.25rem;
  background-color: #122131; border: 1px solid #3c4a42;
  text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 24px;
  color: #d4e4fa; transition: all 0.15s;
}
.digit-input:focus {
  outline: none; border-color: #4edea3; background-color: #1c2b3c;
  box-shadow: 0 0 0 2px rgba(78,222,163,0.15);
}
.digit-input.filled { border-color: rgba(78,222,163,0.4); }

.log-row { transition: background 0.1s; }
.log-row:hover { background: rgba(255,255,255,0.04); }
.log-row.error { background: rgba(255,180,171,0.05); border-left: 2px solid #ffb4ab; }
.log-row.warn  { background: rgba(192,193,255,0.05); }