body { background:#000; color:#00ff00; font-family: 'Courier New', monospace; margin:0; padding:20px; }
.container { max-width:1200px; margin:0 auto; }
h1 { color:#39ff14; text-shadow:0 0 10px #39ff14; }
.hidden { display:none; }
.auth-box { border:2px solid #00ff00; padding:16px; margin:8px; width:300px; display:inline-block; vertical-align:top; }
input { width:90%; padding:8px; margin:6px 0; background:#0a0a0a; color:#00ff00; border:1px solid #00ff00; }
button { padding:8px 12px; margin-top:6px; cursor:pointer; }
.btn-green { background:#008000; color:#fff; border: none; }
.btn-red { background:#cc0000; color:#fff; border: none; }
.panel { border:2px solid #00ff00; padding:12px; box-shadow:0 0 8px #003300; overflow:auto; height:70vh; display:inline-block; vertical-align:top; }
.left { width:20%; } .middle { width:28%; } .right { width:44%; }
.messages { background:#001a00; padding:10px; height:50vh; overflow:auto; }
.message { margin:6px 0; padding:8px; border-radius:6px; max-width:80%; }
.message.sent { background:#006600; margin-left:auto; text-align:right; }
.message.received { background:#004400; margin-right:auto; text-align:left; }
.muted { color: #bdb76b; font-size:0.9em; }
@media(max-width:900px){ .left,.middle,.right{display:block;width:100%;height:auto;} .panel{height:auto;} }