body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, button {
  -webkit-user-select: text;
  user-select: text;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; color: #00ff41; font-family: "Courier New", Courier, monospace; overflow-x: hidden; }
#matrix-rain { position: fixed; inset: 0; z-index: 0; opacity: 0.42; }
.scanlines { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0,255,65,0.03) 2px 4px); }
.topbar { position: fixed; top: 0; right: 0; z-index: 5; padding: 1rem; }
.login-panel { width: 260px; }
.panel-toggle { width: 100%; border: 1px solid #00ff41; background: rgba(0,20,0,0.85); color: #00ff41; padding: 0.55rem 0.8rem; letter-spacing: 0.18em; cursor: pointer; text-shadow: 0 0 8px rgba(0,255,65,.6); }
.panel-toggle:hover { background: rgba(0,60,0,0.9); box-shadow: 0 0 18px rgba(0,255,65,.35); }
.panel-body { margin-top: 0.5rem; border: 1px solid #00ff41; background: rgba(0,10,0,0.92); padding: 0.75rem; backdrop-filter: blur(4px); }
.hidden { display: none !important; }
.panel-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.tab { flex: 1; border: 1px solid #004400; background: #001100; color: #7dff9a; padding: 0.35rem; font-size: 0.72rem; cursor: pointer; }
.tab.active { border-color: #00ff41; color: #00ff41; box-shadow: inset 0 0 10px rgba(0,255,65,.25); }
.panel-form input { width: 100%; margin-bottom: 0.45rem; padding: 0.45rem; border: 1px solid #006622; background: #000; color: #00ff41; font-family: inherit; font-size: 0.8rem; }
.panel-form button { width: 100%; border: 1px solid #00ff41; background: #003300; color: #00ff41; padding: 0.5rem; cursor: pointer; letter-spacing: 0.08em; }
.panel-form button:hover { background: #005522; }
.msg { min-height: 1rem; margin-top: 0.35rem; font-size: 0.72rem; color: #9fff9f; }
.hero { position: relative; z-index: 2; min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem 1rem; }
.spin-wrap { perspective: 900px; margin-bottom: 1rem; }
.spin-title { font-size: clamp(3rem, 12vw, 7rem); letter-spacing: 0.35em; font-weight: 700; color: #00ff41; text-shadow: 0 0 12px #00ff41, 0 0 30px rgba(0,255,65,.5); animation: spin3d 10s linear infinite; transform-style: preserve-3d; }
.spin-title::before { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px rgba(0,255,65,.35); transform: translateZ(-28px); }
@keyframes spin3d { 0% { transform: rotateY(0deg) rotateX(8deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } }
.tagline { font-size: 0.9rem; letter-spacing: 0.28em; opacity: 0.85; }
.about { position: relative; z-index: 2; max-width: 900px; margin: 0 auto 5rem; padding: 1.25rem; border: 1px solid rgba(0,255,65,.35); background: rgba(0,12,0,.78); box-shadow: 0 0 30px rgba(0,255,65,.12); }
.about h2 { margin-bottom: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; font-size: 1rem; }
.about p { line-height: 1.7; color: #b8ffbf; font-size: 0.95rem; }
.footer { position: relative; z-index: 2; text-align: center; padding: 1rem 1rem 2rem; color: #00ff41; letter-spacing: 0.15em; font-size: 0.85rem; opacity: 0.9; }
.audio-toggle { position: fixed; left: 1rem; bottom: 1rem; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #00ff41; background: rgba(0,20,0,.85); color: #00ff41; cursor: pointer; }
@media (max-width: 700px) { .login-panel { width: 220px; } .spin-title { letter-spacing: 0.18em; } }