*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.home{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#060623,#0a1a40);padding:20px}.login{width:100%;max-width:400px;background:#ffffff0d;padding:30px;border-radius:15px;box-shadow:0 8px 20px #00ffff1a;text-align:center}.logo img{width:150px;height:150px;object-fit:contain;margin-bottom:20px}.login input{width:100%;padding:12px;margin:12px 0;border-radius:8px;border:none;outline:none;font-size:15px}.login input:focus{box-shadow:0 0 8px #0ff}.login button{width:100%;padding:12px;margin-top:15px;border:none;border-radius:8px;background:#0ff;color:#0a1a40;font-weight:600;font-size:16px;cursor:pointer;transition:transform .2s,box-shadow .2s}.login button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0ff6}.or{margin:20px 0;color:#aaa;font-size:14px;position:relative}.or:before,.or:after{content:"";position:absolute;top:50%;width:35%;height:1px;background:#555}.or:before{left:0}.or:after{right:0}.forgot{margin-top:10px;color:#38bdf8;cursor:pointer;font-size:14px}.forgot:hover{text-decoration:underline}.signup{margin-top:20px;display:flex;justify-content:center;gap:5px;font-size:14px;color:#eee}.signup a{color:#0ff;text-decoration:none;font-weight:600}.signup a:hover{text-decoration:underline}.signup-container{background-color:#02022e;display:flex;justify-content:center;align-items:center;height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.signup-form{background:transparent;padding:2rem;border-radius:10px;box-shadow:2px 2px 10px #00f;width:320px;display:flex;flex-direction:column}.signup-form h2{text-align:center;margin-bottom:1.5rem;color:#fff}.signup-form label{margin-bottom:5px;font-size:14px;color:#fff}.signup-form input{padding:10px;margin-bottom:15px;border-radius:6px;border:1px solid #ccc;outline:none;transition:border .3s ease}.signup-form input:focus{border:1px solid #007bff;box-shadow:0 0 4px #007bff4d}.signup-form button{padding:10px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:16px;cursor:pointer;transition:background .3s ease}.signup-form button:hover{background:#0056b3}.signup-footer{margin-top:1rem;text-align:center;font-size:14px;color:#666}.signup-footer a{color:#007bff;text-decoration:none}.signup-footer a:hover{text-decoration:underline}.error{color:red;font-size:.9rem;margin-top:5px}.chat-wrapper{display:flex;justify-content:center;align-items:center;background:#0f172a;height:100vh}.chat-container{display:flex;flex-direction:column;width:100%;height:100%;background:#1e293b;overflow:hidden;box-shadow:0 10px 30px #0006}.chat-header{display:flex;align-items:center;padding:15px 20px;background:#1e293bf2;color:#f8fafc;font-weight:600;font-size:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.back-btn{margin-right:12px;font-size:20px;background:transparent;border:none;color:#f8fafc;cursor:pointer;transition:transform .2s ease}.back-btn:hover{transform:scale(1.2)}.chat-title{flex:1;text-align:center}.chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.chat-message{display:flex;max-width:70%}.chat-message.own{align-self:flex-end;justify-content:flex-end}.chat-message.other{align-self:flex-start;justify-content:flex-start}.bubble{padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.4;box-shadow:0 4px 12px #0003;word-wrap:break-word}.chat-message.own .bubble{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.chat-message.other .bubble{background:#334155;color:#e2e8f0}.meta{font-size:11px;margin-top:4px;text-align:right;opacity:.7}.chat-input{display:flex;padding:12px 15px;background:#1e293bf2;border-top:1px solid #334155;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.chat-input input{flex:1;padding:10px 15px;border-radius:20px;border:none;outline:none;background:#0f172a;color:#f8fafc;font-size:15px}.chat-input input::placeholder{color:#94a3b8}.chat-input button{margin-left:10px;padding:10px 18px;border-radius:50%;border:none;background:#3b82f6;color:#fff;font-size:16px;cursor:pointer;transition:background .2s ease}.chat-input button:hover{background:#2563eb}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background:#475569;border-radius:10px}@media (max-width: 768px){.chat-container{border-radius:0;max-width:100%}}.chatlist-container{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:20px;background:#0f172a;color:#e2e8f0;min-height:100vh}.chatlist-header{text-align:center;margin-bottom:25px}.chatlist-header h1{font-weight:600;color:#38bdf8}.search-box{display:flex;justify-content:center;margin-bottom:25px;gap:10px;flex-wrap:wrap}.search-box input{flex:1;min-width:220px;max-width:400px;padding:12px 16px;border-radius:25px;border:1px solid #334155;font-size:16px;outline:none;background:#1e293b;color:#f8fafc}.search-box input::placeholder{color:#94a3b8}.search-box button{padding:12px 20px;border-radius:25px;border:none;background:#3b82f6;color:#fff;font-weight:500;cursor:pointer;transition:background .2s}.search-box button:hover{background:#2563eb}.card-grid,.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:12px}.user-card,.friend-card{background:#1e293b;padding:18px;border-radius:14px;box-shadow:0 4px 12px #00000040;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease}.user-card:hover,.friend-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.username{font-weight:500;color:#f1f5f9;margin-bottom:10px;display:block;word-break:break-word;text-align:center}.avatar{width:42px;height:42px;border-radius:50%;background:#3b82f6;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;margin-right:12px}.friend-info{display:flex;align-items:center;margin-bottom:12px}.user-card button,.friend-card button{border:none;padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer;transition:.2s;width:100%;margin-top:6px}.user-card button:disabled{background:#475569;color:#94a3b8;cursor:not-allowed}.friend-card .actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.chat-btn{background:#10b981;color:#fff;flex:1;min-width:90px}.chat-btn:hover{opacity:.9}.remove-btn{background:#ef4444;color:#fff;flex:1;min-width:90px}.remove-btn:hover{opacity:.9}.search-results h3,.friends-list h3{margin:15px 0;color:#38bdf8;font-weight:600;text-align:left}.empty{text-align:center;color:#94a3b8;font-style:italic;margin-top:10px}@media (max-width: 600px){.chatlist-header h1{font-size:20px}.chat-btn,.remove-btn{flex:100%}}.search-results{margin-bottom:100px}.chatlist-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.chatlist-header h1{font-weight:600;color:#38bdf8;margin:0}.logout-btn{padding:10px 18px;border:none;border-radius:25px;background:#ef4444;color:#fff;font-weight:500;cursor:pointer;transition:background .2s}.logout-btn:hover{background:#dc2626}@media (max-width:500px){.search-box{margin:50px 0}}@media (max-width:450px){.search-box{margin:100px 0}}