:root { --rb: linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#00e676,#00e5ff,#2979ff,#b000ff,#ff004c); }
html { scroll-behavior: smooth; }
body { background: #07070d; font-family: ui-sans-serif, system-ui, sans-serif; }
@keyframes flow { to { background-position: 400% 50%; } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.mesh { position: fixed; inset: -20%; z-index: -1; opacity: .35; animation: hue 14s linear infinite;
  background: radial-gradient(circle at 20% 30%,#ff004c55,transparent 40%),radial-gradient(circle at 80% 20%,#00e5ff55,transparent 40%),radial-gradient(circle at 50% 80%,#b000ff55,transparent 45%),radial-gradient(circle at 10% 90%,#00e67644,transparent 40%); filter: blur(40px); }
.rainbow-text { background: var(--rb); background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 8s linear infinite; }
.glow { filter: drop-shadow(0 0 18px rgba(255,255,255,.25)); }
.rainbow-bg { background: var(--rb); background-size: 400% 100%; animation: flow 3s linear infinite; }
.glass { background: rgba(15,15,25,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.08); }
.rainbow-border { position: relative; border-color: transparent; }
.rainbow-border::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: var(--rb); background-size: 400% 100%; animation: flow 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.btn-rainbow { background: var(--rb); background-size: 400% 100%; animation: flow 6s linear infinite; color: #0a0a12; box-shadow: 0 0 24px rgba(255,0,150,.35); transition: transform .2s, box-shadow .2s; }
.btn-rainbow:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(0,229,255,.55); }
.tab { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: .2s; }
.tab:hover { background: rgba(255,255,255,.12); }
.tab.active { background: var(--rb); background-size: 400% 100%; animation: flow 6s linear infinite; color: #0a0a12; border-color: transparent; box-shadow: 0 0 20px rgba(176,0,255,.45); }
.drop { border: 2px dashed rgba(255,255,255,.2); background: rgba(0,0,0,.3); transition: .2s; }
.drop:hover, .drop.over { border-color: #00e5ff; background: rgba(0,229,255,.08); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }