/* SMNGauge — shared custom CSS (from Stitch design references) */

body {
  background-color: #101319;
  color: #e1e2ea;
  font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ---- Atmosphere / texture ---- */
.carbon-pattern {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}
.carbon-dots {
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 24px 24px;
}
.racing-grid {
  background-image: linear-gradient(#272a30 1px, transparent 1px), linear-gradient(90deg, #272a30 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.1;
}
.glare-effect {
  background: radial-gradient(circle at 50% 0%, rgba(225, 6, 0, 0.08) 0%, transparent 70%);
}
.racing-glow {
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.3);
}
.glow-red {
  box-shadow: 0 0 15px rgba(225, 6, 0, 0.15);
}

/* ---- Card hover accents ---- */
.racing-red-border {
  border-color: transparent;
  transition: all 0.3s ease;
}
.racing-red-border:hover {
  border-color: #e10600;
}

/* ---- Motion ---- */
.pulse-green {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.1); }
}
@keyframes engine-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(225, 6, 0, 0.2); }
  50% { transform: scale(1.03); box-shadow: 0 0 25px rgba(225, 6, 0, 0.5); }
}
.animate-engine-pulse {
  animation: engine-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.fade-up {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Theme preview (renders theme.preview as a background image) ---- */
.theme-preview {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #32353b #101319; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #101319; }
::-webkit-scrollbar-thumb { background: #32353b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #e10600; }