@import "tailwindcss";
@import "katex/dist/katex.min.css";

:root {
  --bg-dark: 250 20% 3%;         /* Deep Cosmos Dark */
  --bg-card: 250 15% 7%;         /* Deep Indigo Glass */
  --border-glow: 270 85% 30%;     /* Rich Galactic Violet */
  --accent-cyan: 190 90% 45%;     /* Electric Cyan for Active Phase-Lock */
  --text-primary: 230 20% 90%;    /* Bright Cosmic Silver */
  --text-muted: 230 10% 60%;      /* Muted Starlight */
}

@theme {
  --color-bg-dark: hsl(250 20% 3%);
  --color-bg-card: hsl(250 15% 7%);
  --color-glow-violet: hsl(270 85% 30%);
  --color-glow-cyan: hsl(190 90% 45%);
  --color-text-primary: hsl(230 20% 90%);
  --color-text-muted: hsl(230 10% 60%);
  --font-sans: var(--font-inter);
  --font-outfit: var(--font-outfit);
  --font-mono: var(--font-fira-code);
}

body {
  background-color: #030206;
  color: #e2e8f0;
  font-family: var(--font-inter), sans-serif;
  overflow-x: hidden;
}

/* Custom Utilities & Glassmorphism */
.glass-panel {
  background: rgba(10, 8, 18, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
  border-color: rgba(167, 139, 250, 0.2);
  box-shadow: 0 8px 32px 0 rgba(167, 139, 250, 0.05);
}

.glass-panel-cyan {
  background: rgba(10, 8, 18, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-cyan:hover {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow: 0 8px 32px 0 rgba(6, 182, 212, 0.08);
}

/* Technical grid background */
.tech-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}

/* Ambient glow accents */
.ambient-glow {
  background: radial-gradient(circle 600px at 50% 200px, rgba(139, 92, 246, 0.08), transparent 80%);
}

.ambient-glow-cyan {
  background: radial-gradient(circle 600px at 50% 200px, rgba(6, 182, 212, 0.06), transparent 80%);
}

/* Monospace label glow */
.mono-glow {
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.mono-glow-cyan {
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

/* Animated scanner border */
@keyframes border-scan {
  0% { border-color: rgba(167, 139, 250, 0.1); }
  50% { border-color: rgba(6, 182, 212, 0.3); }
  100% { border-color: rgba(167, 139, 250, 0.1); }
}

.scan-border {
  animation: border-scan 6s infinite ease-in-out;
}

/* Form sliders styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  height: 6px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #06b6d4;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
  transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #06b6d4;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
  border: none;
  transition: transform 0.1s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #030206;
}

::-webkit-scrollbar-thumb {
  background: #141125;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #231b42;
}

/* Mobile & Cross-Device Responsiveness Refactoring */
.katex-display {
  display: block;
  margin: 1em 0;
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.katex-display::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

@media (max-w: 640px) {
  .katex-display {
    font-size: clamp(0.75em, 4vw, 0.9em) !important;
  }
  .katex {
    font-size: clamp(0.8em, 4vw, 0.95em) !important;
  }
}

/* Dynamic Edge-Fade Mask for horizontal navigation */
.nav-fade-mask {
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

@media (min-w: 768px) {
  .nav-fade-mask {
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

/* Ergonomic touch targets for inputs on mobile screen sizes */
@media (max-w: 640px) {
  input[type="range"]::-webkit-slider-thumb {
    width: 22px !important;
    height: 22px !important;
  }
  input[type="range"]::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
  }
}