/* Neon Vibe — premium gradient + micro-interactions */
:root{
  --bg1:#070815;
  --bg2:#2a0f3f;
  --card:#0b0d1fcc;
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --coral:#ff4d6d;
  --mint:#33f0c6;
}

html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,77,109,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 30%, rgba(51,240,198,.12), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

/* Subtle animated grain */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  animation:grain 10s steps(10) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-2%,1%)}20%{transform:translate(-4%,-1%)}30%{transform:translate(2%,2%)}40%{transform:translate(-1%,-3%)}50%{transform:translate(-3%,0)}60%{transform:translate(3%,1%)}70%{transform:translate(0,3%)}80%{transform:translate(-2%,2%)}90%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}

/* Focus visibility */
:focus-visible{outline:2px solid rgba(255,77,109,.8); outline-offset:2px;}

/* Glass panel helper */
.glass{
  background: rgba(11, 13, 31, .55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Soft haptic-like tap */
.tap{
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
}
.tap:active{transform: scale(.98); filter: brightness(1.05);}

/* Confetti */
@keyframes pop{0%{transform:translateY(0) scale(.9); opacity:0}10%{opacity:1}100%{transform:translateY(120px) rotate(220deg) scale(1.05); opacity:0}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* Light mode overrides (applied via data-theme="light") */
[data-theme="light"] body{
  color: rgba(10,12,20,.92);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,77,109,.14), transparent 55%),
    radial-gradient(900px 700px at 80% 30%, rgba(51,240,198,.10), transparent 55%),
    linear-gradient(135deg, #f7f7ff, #f2e9ff);
}
[data-theme="light"] .glass{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(10,12,20,.10);
}