/* Reset */
* { box-sizing: border-box; margin:0; padding:0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: linear-gradient(120deg, #0f2027, #203a43, #2c5364); color:#f1f1f1; padding:20px; }
h1,h2 { color:#00d4ff; margin-bottom:15px; text-shadow:1px 1px 4px #000; }

/* Form */
form { background:rgba(0,0,0,0.6); padding:20px; margin-bottom:25px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.4); max-width:450px; }
input[type="text"], input[type="password"], input[type="number"], textarea { width:100%; padding:12px; margin-bottom:15px; border:none; border-radius:8px; font-size:14px; background:rgba(255,255,255,0.1); color:#fff; }
input::placeholder, textarea::placeholder { color:#ccc; }
button { background:#00d4ff; color:#0f2027; padding:12px; border:none; border-radius:8px; cursor:pointer; font-size:16px; font-weight:bold; transition:0.3s; }
button:hover { background:#00b0cc; transform:translateY(-2px); }

/* Products */
#products div { background:rgba(0,0,0,0.6); padding:15px 20px; margin-bottom:12px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.4); transition:0.3s; }
#products div:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,0.5); }

/* Chat */
#chat, #chatAdmin { background:rgba(0,0,0,0.6); padding:15px; border-radius:12px; max-width:500px; height:250px; overflow-y:auto; margin-bottom:15px; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
#chat div, #chatAdmin div { margin-bottom:10px; padding:8px 12px; background:rgba(0,212,255,0.2); border-radius:8px; word-wrap:break-word; transition:0.2s; }
#chat div:hover, #chatAdmin div:hover { background:rgba(0,212,255,0.3); }

/* Responsive */
@media(max-width:500px){ body{padding:10px;} form, #products div, #chat, #chatAdmin{width:100%; max-width:100%;} }