/* Grundstyle */
* { box-sizing: border-box; font-family: 'Arial', sans-serif; transition: all 0.3s ease; }
body { margin:0; min-height:100vh; background: radial-gradient(circle at top left,#0f0c29,#302b63,#24243e); color:#fff; display:flex; flex-direction:column; overflow-x:hidden; }
header { text-align:center; padding:40px 0; font-size:3rem; font-weight:900; letter-spacing:2px; text-shadow:0 0 10px #00f9ff,0 0 20px #00f9ff,0 0 30px #00f9ff; animation:neonGlow 1.5s ease-in-out infinite alternate; }
@keyframes neonGlow {0%{text-shadow:0 0 5px #00f9ff,0 0 10px #00f9ff;}50%{text-shadow:0 0 20px #00f9ff,0 0 30px #00f9ff;}100%{text-shadow:0 0 5px #00f9ff,0 0 10px #00f9ff;}}

.container { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; padding:40px; }
.card { background: rgba(255,255,255,0.05); border:2px solid #00f9ff; border-radius:20px; padding:30px; text-align:center; backdrop-filter:blur(10px); box-shadow:0 0 20px #00f9ff50,0 0 40px #00f9ff30 inset; transform:scale(1); transition:0.3s;}
.card h2 { margin-bottom:15px; font-size:1.8rem; color:#00f9ff; text-shadow:0 0 5px #00f9ff;}
.card p { margin-bottom:20px; font-size:1rem; color:#aaa; }
.card a { display:inline-block; padding:12px 30px; background:linear-gradient(135deg,#00f9ff,#00ffaa); color:black; font-weight:700; border-radius:12px; text-decoration:none; box-shadow:0 0 15px #00f9ff,0 0 30px #00ffaa inset; transition: transform 0.2s, box-shadow 0.3s;}
.card a:hover { transform:scale(1.1); box-shadow:0 0 25px #00f9ff,0 0 50px #00ffaa inset; }
.card:hover { transform:translateY(-8px) rotateZ(-1deg); box-shadow:0 0 40px #00f9ff,0 0 60px #00ffaa inset; }

footer { text-align:center; padding:15px; opacity:0.7; font-size:14px; border-top:1px solid #00f9ff30; }

/* Login / Auth Card */
#authContainer { width:350px; margin:50px auto; padding:30px; background:linear-gradient(135deg,#1f1f2e,#4b4b6b); border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.5); color:white; text-align:center; font-family:'Segoe UI',sans-serif;}
#authContainer input { width:90%; padding:10px; margin:10px 0; border:none; border-radius:10px; }
#authContainer button { width:95%; padding:10px; margin:5px 0; border:none; border-radius:10px; background:#ff0055; color:white; font-weight:bold; cursor:pointer; transition:0.3s; }
#authContainer button:hover { background:#ff3399; transform:scale(1.05); }

/* Settings */
#settingsContainer { width:400px; margin:50px auto; padding:40px; background:linear-gradient(135deg,#1f1f2e,#4b4b6b); border-radius:25px; box-shadow:0 0 40px #00f9ff,0 0 80px #00ffaa inset; color:white; text-align:center;}
#settingsContainer input { width:90%; padding:12px; margin:12px 0; border:none; border-radius:12px; outline:none; background: rgba(255,255,255,0.05); color:#fff; box-shadow:0 0 10px #00f9ff inset;}
#settingsContainer button { width:95%; padding:12px; margin:8px 0; border:none; border-radius:15px; background:linear-gradient(135deg,#ff0055,#ff3399); color:white; font-weight:bold; cursor:pointer; box-shadow:0 0 20px #ff3399,0 0 40px #ff0055 inset; transition: transform 0.3s, box-shadow 0.3s;}
#settingsContainer button:hover { transform:scale(1.05); box-shadow:0 0 30px #ff3399,0 0 60px #ff0055 inset; }

/* Chat */
.chat-container { background:#1f1f2e; color:white; padding:15px; border-radius:15px; margin-top:20px; }
.chat-container input { width:80%; border-radius:10px; padding:8px; border:none; margin-top:5px; }
.chat-container button { border:none; border-radius:10px; background:#ff0055; color:white; padding:8px; cursor:pointer; transition:0.3s;}
.chat-container button:hover { background:#ff3399; transform:scale(1.05);}
#messages div { padding:5px; border-bottom:1px solid #444;}