:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --secondary: 263 92% 62%;
  --muted: 0 0% 66%;
  --destructive: 0 88% 58%;
  --border: 0 0% 100% / 0.13;
  --card: 240 10% 7%;
  --shadow-sm: 0 10px 28px rgba(255,255,255,0.07);
  --shadow-md: 0 22px 70px rgba(255,255,255,0.10);
  --shadow-lg: 0 35px 110px rgba(255,255,255,0.16);
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 320ms cubic-bezier(.16,1,.3,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --secondary: 278 100% 66%;
  --muted: 0 0% 70%;
  --destructive: 358 92% 62%;
  --border: 0 0% 100% / 0.14;
  --card: 240 12% 8%;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000000; color: #ffffff; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; touch-action: manipulation; }
button, input, textarea, select { font: inherit; font-size: max(16px, 1rem); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.laser-frame { position: relative; isolation: isolate; }
.laser-frame::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 2px;
  border-radius: 0;
  background: linear-gradient(115deg, #ffffff, #7c3aed, #00e5ff, #ff2bd6, #ffe600, #ffffff);
  background-size: 400% 400%;
  animation: laserFlow 4s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 28px rgba(124,58,237,0.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes laserFlow {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg) drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 30px rgba(124,58,237,0.8)); }
  50% { background-position: 100% 50%; filter: hue-rotate(180deg) drop-shadow(0 0 18px rgba(255,255,255,1)) drop-shadow(0 0 38px rgba(0,229,255,0.9)); }
  100% { background-position: 0% 50%; filter: hue-rotate(360deg) drop-shadow(0 0 12px rgba(255,255,255,0.95)) drop-shadow(0 0 30px rgba(255,43,214,0.8)); }
}

main::-webkit-scrollbar, aside div::-webkit-scrollbar { width: 8px; }
main::-webkit-scrollbar-thumb, aside div::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
main::-webkit-scrollbar-track, aside div::-webkit-scrollbar-track { background: transparent; }

.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--secondary)); }
.bg-4 { background: hsl(var(--primary)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted)); }
.text-tertiary { color: hsl(var(--primary)); }
.accent { color: hsl(var(--secondary)); }

@supports not (height: 100dvh) {
  .laser-frame { height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .laser-frame::before { animation: none; }
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}