.signup-card{background:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a,0 2px 4px #00000014;padding:16px;width:100%;max-width:280px;position:relative;transition:transform .2s ease,box-shadow .2s ease;box-sizing:border-box;margin:0 auto}.signup-card:hover{transform:translateY(-2px);box-shadow:0 15px 50px #0003,0 4px 12px #00000026}.signup-header{text-align:center;margin-bottom:14px}.signup-title{font-size:1.15rem;font-weight:600;color:#262626;margin:0;letter-spacing:-.3px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.signup-subtitle{font-size:.95rem;color:#8e8e8e;margin:0;font-weight:400}.signup-form{display:flex;flex-direction:column;gap:10px}.signup-input{width:100%;padding:8px 10px;font-size:.9rem;border:1.5px solid #dbdbdb;border-radius:6px;background-color:#fafafa;color:#262626;transition:all .2s ease;box-sizing:border-box;font-family:inherit;outline:none}.signup-input:focus{border-color:#667eea;background-color:#fff;box-shadow:0 0 0 3px #667eea1a}.signup-input::placeholder{color:#8e8e8e;font-weight:400}.signup-button{width:100%;padding:8px 16px;font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;margin-top:4px;position:relative;overflow:hidden;box-shadow:0 2px 8px #667eea40}.signup-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.signup-button:hover:before{left:100%}.signup-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea59}.signup-button:active{transform:translateY(0);box-shadow:0 2px 8px #667eea4d}.signup-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.signup-button:disabled:hover{transform:none;box-shadow:0 4px 12px #667eea4d}@media (max-width: 768px){.signup-card{padding:16px;max-width:100%}.signup-title{font-size:1.1rem}.signup-input{padding:8px 10px;font-size:.85rem}.signup-button{padding:8px 16px;font-size:.85rem}.signup-form{gap:8px}.signup-header{margin-bottom:12px}}@media (max-width: 480px){.signup-card{padding:12px;max-width:calc(100% - 20px);width:calc(100% - 20px);margin:0 auto;flex-shrink:0}.signup-title{font-size:.95rem}.signup-header{margin-bottom:8px}.signup-form{gap:7px}.signup-input{padding:6px 8px;font-size:.85rem}.signup-button{padding:6px 12px;font-size:.85rem;margin-top:2px}.error-message{padding:5px 7px;font-size:.7rem;margin-top:2px}}@media (prefers-color-scheme: dark){.signup-card{background:#1a1a1a;border-color:#ffffff1a}.signup-title{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.signup-subtitle{color:#a8a8a8}.signup-input{background-color:#262626;border-color:#404040;color:#fff}.signup-input:focus{background-color:#2a2a2a;border-color:#667eea}.signup-input::placeholder{color:#737373}.error-message{background-color:#3a1f1f;color:#ff6b6b;border-color:#5a2f2f}}.signup-input:focus-visible{outline:2px solid #667eea;outline-offset:2px}.signup-button:focus-visible{outline:2px solid #ffffff;outline-offset:2px}@media (prefers-reduced-motion: reduce){.signup-card,.signup-button,.signup-input{transition:none}.signup-card:hover,.signup-button:hover{transform:none}.error-message,.loading-spinner{animation:none}}.login-card{background:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a,0 2px 4px #00000014;padding:16px;width:100%;max-width:280px;position:relative;transition:transform .2s ease,box-shadow .2s ease;box-sizing:border-box;margin:0 auto}.login-card:hover{transform:translateY(-2px);box-shadow:0 15px 50px #0003,0 4px 12px #00000026}.login-header{text-align:center;margin-bottom:14px}.login-title{font-size:1.15rem;font-weight:600;color:#262626;margin:0;letter-spacing:-.3px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-subtitle{font-size:.95rem;color:#8e8e8e;margin:0;font-weight:400}.login-form{display:flex;flex-direction:column;gap:10px}.form-group{position:relative;display:flex;flex-direction:column}.login-input{width:100%;padding:8px 10px;font-size:.9rem;border:1.5px solid #dbdbdb;border-radius:6px;background-color:#fafafa;color:#262626;transition:all .2s ease;box-sizing:border-box;font-family:inherit;outline:none}.login-input:focus{border-color:#667eea;background-color:#fff;box-shadow:0 0 0 3px #667eea1a}.login-input::placeholder{color:#8e8e8e;font-weight:400}.login-button{width:100%;padding:8px 16px;font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;margin-top:4px;position:relative;overflow:hidden;box-shadow:0 2px 8px #667eea40}.login-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.login-button:hover:before{left:100%}.login-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea59}.login-button:active{transform:translateY(0);box-shadow:0 2px 8px #667eea4d}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-button:disabled:hover{transform:none;box-shadow:0 4px 12px #667eea4d}.error-message{background-color:#fee;color:#c33;padding:8px 10px;border-radius:6px;font-size:.8rem;margin-top:4px;border:1px solid #fcc;display:flex;align-items:center;gap:6px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-icon{font-size:1.2rem}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}.divider{display:flex;align-items:center;text-align:center;margin:24px 0;color:#8e8e8e;font-size:.9rem}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid #dbdbdb}.divider:before{margin-right:16px}.divider:after{margin-left:16px}@media (max-width: 768px){.login-card{padding:16px;max-width:100%}.login-title{font-size:1.1rem}.login-input{padding:8px 10px;font-size:.85rem}.login-button{padding:8px 16px;font-size:.85rem}.login-form{gap:8px}.login-header{margin-bottom:12px}}@media (max-width: 480px){.login-card{padding:12px;max-width:calc(100% - 20px);width:calc(100% - 20px);margin:0 auto;flex-shrink:0}.login-title{font-size:.95rem}.login-header{margin-bottom:8px}.login-form{gap:7px}.login-input{padding:6px 8px;font-size:.85rem}.login-button{padding:6px 12px;font-size:.85rem;margin-top:2px}.error-message{padding:5px 7px;font-size:.7rem;margin-top:2px}}@media (prefers-color-scheme: dark){.login-card{background:#1a1a1a;border-color:#ffffff1a}.login-title{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-subtitle{color:#a8a8a8}.login-input{background-color:#262626;border-color:#404040;color:#fff}.login-input:focus{background-color:#2a2a2a;border-color:#667eea}.login-input::placeholder{color:#737373}.error-message{background-color:#3a1f1f;color:#ff6b6b;border-color:#5a2f2f}}.login-input:focus-visible{outline:2px solid #667eea;outline-offset:2px}.login-button:focus-visible{outline:2px solid #ffffff;outline-offset:2px}@media (prefers-reduced-motion: reduce){.login-card,.login-button,.login-input{transition:none}.login-card:hover,.login-button:hover{transform:none}.error-message,.loading-spinner{animation:none}}.comments-section{margin:8px clamp(8px,3vw,16px);padding:10px clamp(10px,3vw,14px);background:#fff;border-radius:clamp(10px,3vw,16px);box-sizing:border-box}.comment-form{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #e5e7eb}.comment-input{flex:1;padding:8px 12px;font-size:14px;border-radius:20px;border:1px solid #dbdbdb;outline:none;background:#fafafa;min-width:0}@media (max-width: 480px){.comment-input{font-size:13px;padding:6px 10px;max-width:75%}}.comment-input:focus{border-color:#a5b4fc;background:#fff}.comment-post-btn{background:transparent;color:#4a89e9;font-weight:600;font-size:14px;cursor:pointer;background-color:#fff;border-color:#4a89e9;transition:background-color .25s ease,color .25s ease}.comment-post-btn:hover{background-color:#4a89e9;color:#fafafa}@media (max-width: 480px){.comment-post-btn{font-size:12px;padding:4px 10px;border-radius:14px}}.comment-loading,.comment-empty{font-size:13px;color:#8e8e8e;padding:6px 0}.comment-item{display:block;padding:10px 0;border-bottom:1px solid #e5e7eb;background:#0055ff0d}.comment-item:last-child{border-bottom:none}.comment-header{display:flex;align-items:center;gap:6px;font-size:13px}.comment-username{font-weight:600;color:#262626}.comment-time{font-size:11px;color:#8e8e8e}.comment-content{font-size:14px;color:#262626;margin-top:2px;white-space:pre-wrap;line-height:1.4}.follow-btn{padding:6px 14px;font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:background-color .25s ease,color .25s ease,transform .15s ease,border-color .25s ease;white-space:nowrap}.follow-btn.follow{background-color:#4a89e9;color:#fff;border-color:#4a89e9}.follow-btn.follow:hover{background-color:#3878dc}.follow-btn.following{background-color:#fff;color:#262626;border-color:#dbdbdb}.follow-btn.following:hover{background-color:#f5f5f5}.follow-btn:active{transform:scale(.94)}.follow-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 480px){.follow-btn{font-size:12px;padding:4px 10px;border-radius:14px}}.post-card{background:#0f0f0f;border:1px solid #1f1f1f;border-radius:14px;padding:14px;margin-bottom:20px;color:#eaeaea}.post-header{display:flex;justify-content:space-between;align-items:flex-start}.post-user-info{display:flex;align-items:center;gap:10px}.post-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #667eea}.post-username{font-size:14px;font-weight:600}.post-timestamp{display:block;font-size:11px;color:#9a9a9a;margin-top:2px}.post-actions{display:flex;gap:8px;margin-left:8px}.follow-btn{padding:5px 10px;border-radius:8px;font-size:12px}.friend-btn{padding:5px 10px;border-radius:8px;font-size:12px;border:none;cursor:pointer;transition:.2s}.friend-none{background:linear-gradient(135deg,#667eea,#8f6eff);color:#fff}.friend-sent,.friend-pending{background:#333;color:#aaa;cursor:not-allowed}.friend-friends{background:#222;color:#4ade80}.post-meta{font-size:12px;color:#999;display:flex;align-items:center;gap:10px}.delete-btn{background:transparent;border:none;color:#ff5c5c;cursor:pointer;font-size:13px}.delete-btn:hover{color:#ff1f1f}.post-card p{margin:12px 0;line-height:1.5;font-size:14px;word-break:break-word}.post-image-wrapper{position:relative;display:inline-block;cursor:pointer}.post-image{max-width:100%;border-radius:12px;-webkit-user-select:none;user-select:none}.big-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);font-size:80px;opacity:.9;animation:heart-pop .6s ease-out forwards;pointer-events:none}@keyframes heart-pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}.post-footer{display:flex;gap:16px;margin-top:12px}.like-btn,.comment-btn{background:transparent;border:none;color:#ddd;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px}.like-btn:hover{color:#ff4d6d}.comment-btn:hover{color:#667eea}.comments-section{margin-top:12px;border-top:1px solid #1f1f1f;padding-top:10px}.post-card a{color:#667eea;text-decoration:none}.post-card a:hover{text-decoration:underline}.like-btn{background:transparent;border:none;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:#ddd;transition:color .2s ease}.like-btn .heart-icon{font-size:20px;display:inline-block;transition:transform .2s ease}.like-btn.liked{color:#ff4d6d}.like-btn.animate-like .heart-icon{animation:like-pop .35s ease forwards}@keyframes like-pop{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}to{transform:scale(1)}}.like-btn:not(.liked) .heart-icon{transform:scale(1)}.like-count{font-size:13px;color:#aaa}.feed-container{width:100%;max-width:100%;margin:0 auto;padding:0;box-sizing:border-box}.feed-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e0e0e0}.feed-title{font-family:Poppins,sans-serif;font-size:1.75rem;font-weight:700;color:#262626;margin:0;letter-spacing:-.5px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.feed-loading{font-size:.9rem;color:#8e8e8e;font-weight:400;margin-left:8px}.feed-empty-state{text-align:center;padding:60px 20px;color:#8e8e8e;font-size:1rem;background:#fafafa;border-radius:12px;border:1px dashed #dbdbdb;margin:20px 0}.feed-posts-list{display:flex;flex-direction:column;gap:20px;width:100%;margin:0;padding:0;list-style:none}.feed-post-wrapper{width:100%;margin:0;padding:0;box-sizing:border-box}@media (max-width: 768px){.feed-container{padding:0}.feed-header{margin-bottom:20px;padding-bottom:12px}.feed-title{font-size:1.5rem}.feed-loading{font-size:.85rem}.feed-empty-state{padding:40px 16px;font-size:.95rem;margin:16px 0}.feed-posts-list{gap:16px}}@media (max-width: 480px){.feed-header{margin-bottom:16px;padding-bottom:10px;flex-direction:column;align-items:flex-start;gap:8px}.feed-title{font-size:1.35rem}.feed-loading{font-size:.8rem;margin-left:0}.feed-empty-state{padding:30px 12px;font-size:.9rem;margin:12px 0}.feed-posts-list{gap:12px}}@media (prefers-color-scheme: dark){.feed-header{border-bottom-color:#404040}.feed-title{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.feed-loading{color:#a8a8a8}.feed-empty-state{background:#1a1a1a;border-color:#404040;color:#a8a8a8}}@media (prefers-reduced-motion: reduce){.feed-container,.feed-header,.feed-title{transition:none}}.create-post-card{background:#000;border-radius:10px;box-shadow:0 4px 12px #0000001a,0 2px 4px #00000014;padding:16px;max-width:500px;margin:0 auto 1rem;box-sizing:border-box;transition:transform .2s ease,box-shadow .2s ease}.create-post-card:hover{transform:translateY(-2px);box-shadow:0 15px 50px #0003,0 4px 12px #00000026}.create-post-title{margin:0 0 10px;font-size:1rem;font-weight:600;color:#262626;background:linear-gradient(135deg,#8a9cff,#b084ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.create-post-textarea{width:100%;resize:none;padding:10px;border-radius:6px;border:1.5px solid #dbdbdb;background-color:#fafafa;font-size:.9rem;color:#262626;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;box-sizing:border-box;outline:none}.create-post-textarea:focus{background-color:#fff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.create-post-textarea:not(:focus){background-color:#fafafa}.create-post-textarea::placeholder{color:#8e8e8e}.hidden-file-input{display:none}.create-post-actions{display:flex;gap:8px;margin-top:10px}.image-button{padding:6px 12px;font-size:.85rem;border-radius:6px;border:1.5px solid #667eea;background:#000;cursor:pointer;transition:all .2s ease}.image-button:hover{background:#667eea;color:#fff}.post-button{flex:1;padding:6px 14px;font-size:.85rem;font-weight:600;color:#fff;border:none;border-radius:6px;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #667eea40}.post-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea59}.post-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.image-preview{margin-top:10px;display:flex;flex-direction:column;gap:6px}.image-preview img{max-width:100%;border-radius:8px;border:1px solid #dbdbdb}.image-wrapper{position:relative;width:100%;border-radius:10px;overflow:hidden}.image-wrapper img{width:100%;display:block;border-radius:10px}.remove-image-overlay{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;border:none;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease,transform .2s ease}.remove-image-overlay i{font-size:.9rem}.image-wrapper:hover .remove-image-overlay{opacity:1;transform:scale(1.05)}@media (max-width: 768px){.create-post-card{padding:14px}.create-post-title{font-size:.95rem}}@media (max-width: 480px){.create-post-card{padding:12px;width:calc(100% - 20px)}.create-post-textarea{font-size:.85rem;padding:8px}.image-button,.post-button{font-size:.8rem;padding:6px 10px}}.create-post-textarea:focus-visible,.image-button:focus-visible,.post-button:focus-visible{outline:2px solid #667eea;outline-offset:2px}.userfeed-container{width:100%;max-width:100%;margin:0 auto;padding:0;box-sizing:border-box}.userfeed-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e0e0e0}.userfeed-title{font-family:Poppins,sans-serif;font-size:1.75rem;font-weight:700;color:#262626;margin:0;letter-spacing:-.5px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.userfeed-loading{font-size:.95rem;color:#8e8e8e;font-weight:500}.userfeed-empty{text-align:center;padding:60px 20px;color:#8e8e8e;font-size:1rem;background:#fafafa;border-radius:12px;border:1px dashed #dbdbdb;margin:20px 0}.userfeed-private{text-align:center;padding:60px 20px;color:#444;font-size:1rem;background:#fff7f0;border:1px solid #ffd7b5;border-radius:12px;margin:20px 0;box-shadow:0 10px 30px #00000014}.userfeed-private h2{margin:0 0 8px;font-size:1.3rem;color:#c25b00}.userfeed-private p{margin:0;color:#7a4a1e}.userfeed-posts{display:flex;flex-direction:column;gap:20px;width:100%;margin:0;padding:0;list-style:none}.userfeed-post-wrapper{width:100%;margin:0;padding:0;box-sizing:border-box}@media (max-width: 768px){.userfeed-header{margin-bottom:20px;padding-bottom:12px}.userfeed-title{font-size:1.5rem}.userfeed-loading{font-size:.9rem}.userfeed-empty,.userfeed-private{padding:40px 16px;font-size:.95rem;margin:16px 0}.userfeed-posts{gap:16px}}@media (max-width: 480px){.userfeed-header{margin-bottom:16px;padding-bottom:10px;flex-direction:column;align-items:flex-start;gap:8px}.userfeed-title{font-size:1.35rem}.userfeed-loading{font-size:.85rem}.userfeed-empty,.userfeed-private{padding:30px 12px;font-size:.9rem;margin:12px 0}.userfeed-posts{gap:12px}}@media (prefers-color-scheme: dark){.userfeed-header{border-bottom-color:#404040}.userfeed-title{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.userfeed-loading{color:#a8a8a8}.userfeed-empty{background:#1a1a1a;border-color:#404040;color:#a8a8a8}.userfeed-private{background:#2a1a12;border-color:#5a321c;color:#f0d3b2}.userfeed-private h2{color:#ffb86c}.userfeed-private p{color:#e3c7a4}}@media (prefers-reduced-motion: reduce){.userfeed-container,.userfeed-header,.userfeed-title{transition:none}}.search-bar-wrapper{position:relative;width:100%;max-width:400px;margin:0 auto 1rem;box-sizing:border-box}.search-bar-input{width:100%;padding:8px 12px;border-radius:6px;border:1.5px solid #dbdbdb;background-color:#7183b5;color:#262626;font-size:.9rem;outline:none;transition:all .2s ease;box-sizing:border-box}.search-bar-input::placeholder{color:#c7a8f0;font-weight:400}.search-bar-input:focus{border-color:#667eea;background-color:#fff;box-shadow:0 0 0 3px #667eea1a}.search-suggestions{position:absolute;top:100%;left:0;right:0;color:#000;background:#fafafa;border:1px solid #667eea;border-radius:6px;list-style:none;padding:0;margin:4px 0 0;z-index:20;box-shadow:0 4px 12px #0000001a,0 2px 4px #00000014;max-height:240px;overflow-y:auto}.search-suggestion-item{padding:8px 12px;cursor:pointer;transition:background .2s ease;border-bottom:1px solid #eee}.search-suggestion-item:last-child{border-bottom:none}.search-suggestion-item:hover{background-color:#f0f0f0}.search-suggestions::-webkit-scrollbar{width:6px}.search-suggestions::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.search-suggestions::-webkit-scrollbar-track{background-color:transparent}@media (max-width: 768px){.search-bar-wrapper{max-width:100%}.search-bar-input,.search-suggestion-item{font-size:.85rem;padding:6px 10px}}@media (max-width: 480px){.search-bar-input,.search-suggestion-item{font-size:.8rem;padding:5px 8px}}.search-bar-input:focus-visible{outline:2px solid #667eea;outline-offset:2px}.profile-picture-container{width:100%;max-width:72px;box-sizing:border-box;overflow:visible}.profile-picture-header{display:flex;justify-content:center;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#fff}.profile-picture-header i{font-size:36px;color:#e0e7ff;transition:opacity .3s ease}.profile-picture-wrapper{position:relative;width:64px;height:64px}.profile-picture-wrapper img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}.profile-picture-overlay{position:absolute;inset:0;background:#00000073;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;cursor:pointer;transition:opacity .2s ease}.profile-picture-overlay i{color:#fff;font-size:16px}.profile-picture-wrapper:hover .profile-picture-overlay{opacity:1}.profile-btn{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;border-radius:999px;border:none;cursor:pointer;transition:background .2s ease,transform .1s ease}.profile-btn i{font-size:12px}.profile-btn.add{background:linear-gradient(135deg,#38bdf8,#6366f1);color:#fff}.profile-btn.add:hover{background:linear-gradient(135deg,#0ea5e9,#4f46e5)}.profile-btn.delete{background:#ef444426;color:#fecaca}.profile-btn.delete:hover{background:#ef44444d}.profile-btn:disabled{opacity:.6;cursor:not-allowed}.profile-file-input{display:none}.friend-requests-wrapper{position:relative}.friend-requests-trigger{position:relative;background:transparent;border:none;font-size:14px;font-weight:600;cursor:pointer;color:#262626;padding:6px 8px;border-radius:8px;transition:background .2s ease}.friend-requests-trigger:hover{background:#4a89e914}.friend-requests-badge{margin-left:6px;background:#4a89e9;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:999px}.friend-requests-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);width:260px;background:#fff;border:1px solid #dbdbdb;border-radius:12px;list-style:none;padding:8px;z-index:2000;box-shadow:0 8px 24px #0000001f}.friend-request-top{display:flex;align-items:center;gap:8px;width:100%}.friend-request-item{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border-radius:8px}.friend-request-item:hover{background:#f5f7ff}.friend-request-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.friend-request-name{flex:1;font-size:13px;font-weight:600;color:#262626;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-request-btn{font-size:12px;padding:4px 8px;border-radius:6px;border:none;cursor:pointer;font-weight:600;transition:background .2s ease,transform .1s ease}.friend-request-btn.accept{background:#4a89e9;color:#fff}.friend-request-btn.accept:hover{background:#3878dc}.friend-request-btn.reject{background:#ef444426;color:#dc2626}.friend-request-btn.reject:hover{background:#ef44444d}.friend-request-btn:active{transform:scale(.92)}@media (max-width: 480px){.friend-requests-dropdown{width:220px;right:-8px}.friend-request-name{font-size:12px}.friend-request-btn{padding:3px 6px;font-size:11px}}.friend-request-user{display:flex;align-items:center;gap:8px;width:100%}.friend-request-actions{display:flex;gap:8px;justify-content:flex-end;width:100%}@media (max-width: 480px){.friend-request-item{flex-direction:column;align-items:stretch}.friend-request-actions{width:100%}.friend-request-btn{flex:0}}.navbar{position:fixed;top:0;left:0;height:100vh;width:96px;background:linear-gradient(135deg,#667eea,#764ba2);border-right:1px solid #dbdbdb;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:11px 0;z-index:1000;overflow:visible;touch-action:none}.navbar-logo{cursor:pointer;margin-bottom:16px}.navbar-links{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.navbar button{background:none;border:none;cursor:pointer;font-size:20px;padding:2px;border-radius:8px;transition:background .2s ease,transform .1s ease}.navbar button:hover{background-color:#3b53cb}.navbar button:active{transform:scale(.92)}.navbar-badge{font-size:12px;font-weight:600;color:#ff3040;margin-left:4px}.navbar-dropdown{position:absolute;top:36px;left:100%;background:#764ba2;border:1px solid #dbdbdb;border-radius:10px;width:220px;max-height:320px;overflow-y:auto;box-shadow:0 4px 12px #00000014;z-index:2000}.navbar-dropdown-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:14px;border-bottom:1px solid #eee}.navbar-dropdown-item:last-child{border-bottom:none}.navbar-dropdown-item button{font-size:12px;padding:4px 8px;background-color:#0095f6;color:#fff;border-radius:6px}.navbar-dropdown-item button:hover{background-color:#07c}.navbar-profile{margin-bottom:8px}@media (max-width: 768px){.navbar{width:72px;padding:12px 0}.navbar button{font-size:20px}.navbar-logo h3{font-size:18px}}@media (max-width: 480px){.navbar{width:64px}.navbar button{font-size:18px}}.chat-window{max-width:600px;margin:16px auto;background:#fff;border-radius:12px;display:flex;flex-direction:column;height:calc(100vh - 32px);box-shadow:0 8px 24px #00000014}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e5e7eb;font-weight:600}.chat-close-btn{background:transparent;border:none;cursor:pointer;font-size:18px;color:#555}.chat-actions{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid #eee}.chat-action-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;border-radius:8px;border:none;cursor:pointer;background:#4a89e91a;color:#4a89e9;font-weight:600;transition:background .2s ease,transform .1s ease}.chat-action-btn:hover{background:#4a89e933}.chat-action-btn.danger{background:#ef444426;color:#dc2626}.chat-action-btn.danger:hover{background:#ef44444d}.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;background:#f9fafb}.chat-message{margin-bottom:8px;display:flex}.chat-bubble{padding:8px 12px;border-radius:16px;max-width:70%;font-size:14px;line-height:1.4;border:1px solid #e5e7eb}.chat-message.sent .chat-bubble{background:#dcf8c6}.chat-message.received .chat-bubble{background:#fff}.chat-input-wrapper{display:flex;border-top:1px solid #e5e7eb}.chat-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px}.chat-send-btn{padding:0 16px;border:none;cursor:pointer;background:#4a89e9;color:#fff;font-weight:600}.incoming-call{position:fixed;top:20px;right:20px;background:#fff;padding:12px;border-radius:12px;box-shadow:0 8px 24px #00000026;z-index:3000}.incoming-call-actions{display:flex;gap:8px;margin-top:8px}.incoming-call-dropdown{position:fixed;top:64px;right:16px;width:260px;background:#fff;border:1px solid #dbdbdb;border-radius:14px;padding:12px;z-index:3000;box-shadow:0 10px 30px #00000026;display:flex;flex-direction:column;gap:12px}.incoming-call-name{font-size:14px;font-weight:500;color:#262626}.incoming-call-name span{display:block;font-weight:700;margin-top:4px}.incoming-call-actions{display:flex;flex-direction:column;gap:8px}.incoming-call-actions .friend-request-btn{width:100%;padding:8px 0;font-size:13px}@media (max-width: 480px){.incoming-call-dropdown{right:8px;left:8px;width:auto}}@media (max-width: 600px){.chat-window{height:100vh;border-radius:0;margin:0}.chat-actions{flex-wrap:wrap}.chat-action-btn{font-size:12px;padding:6px 10px}.chat-bubble{max-width:85%}}.chat-messages{flex:1;height:400px;overflow-y:auto;padding:12px 16px;background:#f9fafb;display:flex;flex-direction:column;gap:8px}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}.chat-message{display:flex;max-width:100%}.chat-message.sent{justify-content:flex-end}.chat-message.received{justify-content:flex-start}.chat-bubble{max-width:70%;padding:8px 14px;border-radius:18px;font-size:14px;line-height:1.4;word-wrap:break-word;box-shadow:0 1px 2px #00000014}.chat-message.sent .chat-bubble{background:#dcf8c6;color:#111827;border-bottom-right-radius:6px}.chat-message.received .chat-bubble{background:#fff;color:#111827;border:1px solid #e5e7eb;border-bottom-left-radius:6px}@media (max-width: 480px){.chat-messages{padding:10px}.chat-bubble{max-width:85%;font-size:13px;padding:7px 12px}}.chat-input-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #e5e7eb;background:#fff}.chat-input{flex:1;padding:10px 14px;font-size:14px;border-radius:999px;border:1px solid #d1d5db;outline:none;background:#f9fafb;transition:border .2s ease,box-shadow .2s ease;color:#111827}.chat-input::placeholder{color:#9ca3af}.chat-input:focus{border-color:#4a89e9;box-shadow:0 0 0 2px #4a89e926;background:#fff}.chat-send-btn{padding:8px 16px;font-size:14px;font-weight:600;border:none;border-radius:999px;cursor:pointer;background:#4a89e9;color:#fff;transition:background .2s ease,transform .1s ease}.chat-send-btn:hover{background:#3878dc}.chat-send-btn:active{transform:scale(.95)}@media (max-width: 480px){.chat-input-bar{padding:8px}.chat-input{font-size:13px;padding:8px 12px}.chat-send-btn{padding:7px 14px;font-size:13px}}.auth-page-container{position:relative;width:100%;max-width:100vw;height:100vh;overflow:hidden;overflow-x:hidden;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;box-sizing:border-box}.auth-title-container{position:absolute;top:0;left:0;right:0;padding:20px;text-align:center;z-index:3;display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box}.auth-title{font-family:Poppins,sans-serif;font-size:2.5rem;font-weight:800;color:#fff;margin:0 auto;text-align:center;text-shadow:0 4px 20px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2);letter-spacing:2px;background:linear-gradient(135deg,#fff,#f0f0f0,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block;width:auto}.auth-title:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60px;height:4px;background:linear-gradient(90deg,transparent,#ffffff,transparent);border-radius:2px;box-shadow:0 2px 10px #ffffff80}.auth-content-wrapper{display:flex;align-items:center;justify-content:center;flex:1;width:100%;max-width:100%;padding:80px 20px 20px;position:relative;z-index:2;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;min-height:0}@media (max-width: 480px){.auth-content-wrapper{align-items:center;justify-content:center}}.auth-forms-container{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:flex-start;width:100%;max-width:650px;box-sizing:border-box;padding:0;margin:0 auto}.auth-side-element{position:absolute;width:200px;height:200px;border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:float 6s ease-in-out infinite;pointer-events:none;z-index:1}.auth-side-element.left{left:5%;top:20%;animation-delay:0s}.auth-side-element.right{right:5%;top:60%;animation-delay:2s}.auth-side-element.left-small{left:10%;top:70%;width:120px;height:120px;animation-delay:1s;animation-duration:8s}.auth-side-element.right-small{right:10%;top:15%;width:120px;height:120px;animation-delay:3s;animation-duration:7s}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(-30px) rotate(180deg);opacity:.8}}.auth-icon{position:absolute;font-size:2rem;color:#ffffff4d;animation:iconFloat 4s ease-in-out infinite;pointer-events:none;z-index:1}.auth-icon.heart{left:8%;top:30%;animation-delay:0s}.auth-icon.star{right:8%;top:40%;animation-delay:1s}.auth-icon.camera{left:12%;top:50%;animation-delay:2s}.auth-icon.like{right:12%;top:25%;animation-delay:1.5s}@keyframes iconFloat{0%,to{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-20px) scale(1.1);opacity:.5}}.auth-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.4;animation:orbPulse 8s ease-in-out infinite;pointer-events:none;z-index:1}.auth-orb.orb-1{width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.3),transparent);left:-100px;top:10%;animation-delay:0s}.auth-orb.orb-2{width:250px;height:250px;background:radial-gradient(circle,rgba(255,255,255,.2),transparent);right:-80px;bottom:15%;animation-delay:2s}@keyframes orbPulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.2);opacity:.6}}.auth-particle{position:absolute;width:4px;height:4px;background:#ffffff80;border-radius:50%;animation:particleFloat 10s linear infinite;pointer-events:none;z-index:1}.auth-particle:nth-child(1){left:15%;animation-delay:0s;animation-duration:12s}.auth-particle:nth-child(2){left:25%;animation-delay:2s;animation-duration:15s}.auth-particle:nth-child(3){right:15%;animation-delay:4s;animation-duration:13s}.auth-particle:nth-child(4){right:25%;animation-delay:6s;animation-duration:14s}@keyframes particleFloat{0%{transform:translateY(100vh) translate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100px) translate(50px);opacity:0}}@media (max-width: 768px){.auth-title{font-size:1.75rem;letter-spacing:1px}.auth-title-container{padding:12px;display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;box-sizing:border-box}.auth-content-wrapper{padding:55px 12px 12px;align-items:flex-start;overflow-y:hidden;overflow-x:hidden;width:100%;max-width:100%}.auth-forms-container{gap:60px;max-width:100%;width:100%;flex-direction:column;align-items:center;padding:0;margin:0 auto;box-sizing:border-box}.auth-side-element{width:150px;height:150px}.auth-side-element.left-small,.auth-side-element.right-small{width:80px;height:80px}.auth-icon{font-size:1.5rem}.auth-orb{display:none}}@media (max-width: 480px){.auth-page-container{height:100vh;height:100dvh;overflow:hidden;overflow-x:hidden;width:100%;max-width:100vw;justify-content:space-evenly}.auth-title{font-size:1.8rem;letter-spacing:.5px}.auth-title:after{width:40px;height:2px}.auth-title-container{padding:35px 8px 12px;display:flex;justify-content:center;align-items:center;height:auto;width:100%;max-width:100%;box-sizing:border-box;left:auto;right:auto;top:auto;position:relative;flex-shrink:0;min-height:auto}.auth-content-wrapper{padding:0 10px 15px;align-items:center;overflow-y:hidden;overflow-x:hidden;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;flex:1;display:flex;flex-direction:column;gap:0;min-height:0}.auth-forms-container{gap:60px;flex-direction:column;align-items:center;width:100%;max-width:100%;padding:0;margin:0;box-sizing:border-box;flex:1;justify-content:center;display:flex}.auth-side-element,.auth-icon{display:none}}@media (prefers-reduced-motion: reduce){.auth-side-element,.auth-icon,.auth-orb,.auth-particle{animation:none}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html{overflow-x:hidden;width:100%}body{margin:0;min-width:320px;min-height:100vh;width:100%;overflow-x:hidden;position:relative}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}