:root { --orange: #FF6600; --amber: #c94a00; --cream: #FFF3E0; --brown: #3D1600; }
* { box-sizing: border-box; }
body {
  font-family: 'Poppins', sans-serif; color: #fff; min-height: 100vh; overflow-x: hidden;
  background: radial-gradient(ellipse at 15% 10%, #ffb347 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%, #b83a00 0%, transparent 50%), var(--orange);
  background-attachment: fixed;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .06;
  background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0/60px 60px;
}
#root { position: relative; }

.title-glitch { position: relative; display: inline-block; font-family: 'Archivo Black'; text-shadow: 0 0 30px rgba(255,220,0,.5); }
.title-glitch::before, .title-glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .65; }
.title-glitch::before { color: #ff0040; animation: g1 2.8s infinite linear; }
.title-glitch::after { color: #00ffff; animation: g2 2.8s infinite linear; }
@keyframes g1 { 0%,100%{clip-path:inset(0 0 90% 0);transform:translate(-3px)} 33%{clip-path:inset(40% 0 40% 0);transform:translate(3px)} 66%{clip-path:inset(75% 0 5% 0);transform:translate(-2px)} }
@keyframes g2 { 0%,100%{clip-path:inset(85% 0 0 0);transform:translate(3px)} 33%{clip-path:inset(10% 0 70% 0);transform:translate(-3px)} 66%{clip-path:inset(50% 0 30% 0);transform:translate(2px)} }

.gm4-badge { font-family: 'Archivo Black'; animation: bw 2s ease-in-out infinite; border: 3px solid currentColor; }
@keyframes bw { 0%,100%{background:#fff;color:#000;box-shadow:0 0 25px #fff} 50%{background:#000;color:#fff;box-shadow:0 0 25px #000} }

.panel { background: rgba(120,40,0,.35); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; backdrop-filter: blur(8px); }
.checker-wrap { padding: 10px; border-radius: 26px; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0/24px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.gm4-panel { background: linear-gradient(160deg, #1a1a1a, #2a1200 70%, #4a1d00); border-radius: 18px; }
.gm4-panel input[type=range] { accent-color: #FF6600; }
.label { font-size: 11px; letter-spacing: .2em; font-weight: 700; opacity: .7; margin-bottom: 4px; }
.pill { padding: 2px 12px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; font-family: monospace; }

.drop-zone { border: 3px dashed rgba(255,255,255,.55); background: rgba(0,0,0,.12); transition: .25s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #fff; background: rgba(0,0,0,.25); transform: scale(1.01); }
.demo-btn { background: #606060; color: #fff; border: 3px solid #333; transition: .2s; }
.demo-btn:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 0 0 25px rgba(0,0,0,.4); }

.effect-card { background: rgba(0,0,0,.2); border: 2px solid transparent; transition: .2s; }
.effect-card:hover { transform: translateY(-2px); background: rgba(0,0,0,.3); }
.effect-card.selected { border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,.4); }
.effect-card.gm90 { background: linear-gradient(135deg, rgba(139,0,255,.35), rgba(255,0,200,.2)); background-size: 200% 200%; animation: swirl 4s infinite; }
@keyframes swirl { 50% { background-position: 100% 50%; } }

.power-btn { min-width: 84px; padding: 14px 26px; border-radius: 999px; font-family: 'Archivo Black'; font-size: 1.5rem; border: 3px solid #fff; background: transparent; transition: .2s; }
.power-btn:hover { transform: scale(1.08); }
.power-btn.on { background: #fff; color: var(--orange); box-shadow: 0 0 30px rgba(255,255,255,.6); }
.wobble { animation: wob .5s infinite; display: inline-block; }
@keyframes wob { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }

.gen-btn { font-family: 'Archivo Black'; background: linear-gradient(135deg, #fff 0%, #ffe066 40%, #000 160%); color: var(--brown); box-shadow: 0 8px 0 #7a2b00, 0 0 40px rgba(255,255,255,.3); transition: .2s; display: inline-block; }
.gen-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.04); box-shadow: 0 11px 0 #7a2b00, 0 0 60px rgba(255,255,255,.6); }
.gen-btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(1); }

.progress-bar { background: repeating-linear-gradient(45deg, #fff 0 14px, #000 14px 28px); background-size: 40px 40px; animation: stripe 1s linear infinite; transition: width .3s; }
@keyframes stripe { to { background-position: 40px 0; } }
.pop { animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(0); } }
.fade-in { animation: fu .6s ease-out; }
@keyframes fu { from { opacity: 0; transform: translateY(20px); } }