@charset "UTF-8";.leftBar{flex:2;position:sticky;top:70px;height:calc(100vh - 70px);overflow:scroll;background-color:#efebe8;border-radius:10px;max-width:180px;min-width:120px}.leftBar::-webkit-scrollbar{display:none}.leftBar .container{padding:20px}.leftBar .container hr{margin:10px 0;border:1;height:.5px;color:gray}.leftBar .container .menu{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:10px}.leftBar .container .menu .item{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;cursor:pointer}.leftBar .container .menu .item a{display:flex;align-items:center;justify-content:flex-start;text-decoration:none;width:100%}.leftBar .container .menu .item a img{width:30px;height:30px;border-radius:50%;object-fit:cover}.leftBar .container .menu .item a span{font-size:14px;padding-left:5px;font-weight:500}.leftBar .container .menu .item a:hover{display:flex;background-color:#ffffff79;width:100%}.navBar{display:flex;align-items:center;flex-wrap:nowrap;height:50px;justify-content:space-between;padding:10px 20px;border-bottom:1px solid grey;position:sticky;top:0;background-color:#363636;width:100%;z-index:999}.navBar .left{display:flex;flex-direction:row;align-items:center;justify-content:center}.navBar .left .spanTitle{font-weight:700;font-size:20px;color:#e5d5d5}.navBar .middle{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center}.navBar .right{display:flex;align-items:center;gap:20px;padding-right:20px}.navBar .right svg{display:flex}.navBar .right .p-user{display:flex;align-items:center;gap:20px;font-weight:500;color:#fff}.navBar .right .p-user img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid rgb(247,241,241)}.navBar .right .button{background-color:#d0c0c0;padding:5px 15px;border-radius:10px;height:35px;white-space:nowrap}.dropdown{position:relative;display:flex}.dropdown .dropdown-toggle{display:flex;background-color:#363636;color:#fff;border:none;cursor:pointer;font-size:16px}.dropdown .dropdown-menu{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ccc;box-shadow:0 8px 40px #0003;z-index:1;list-style:none;padding:0;margin:0;width:max-content}.dropdown .dropdown-menu svg{padding-left:10px;padding-right:5px}.dropdown .dropdown-menu p{font-size:14px;padding-right:10px;font-weight:500}.dropdown .dropdown-menu .dropdown-item{display:flex;align-items:center;width:100%;cursor:pointer}.dropdown .dropdown-menu .dropdown-item:hover{display:flex;background-color:#f1f1f1;width:100%}.profilePage{width:100%;display:flex;flex-direction:column;padding:20px;box-sizing:border-box}.profilePage .postContainer{display:flex;flex-direction:column;width:100%;max-width:800px;padding:20px;background-color:#efebe8;border-radius:10px;box-sizing:border-box}.profilePage .postContainer .postInfo{display:flex;align-items:center;justify-content:space-between}.profilePage .postContainer .postInfo .userInfo{display:flex;gap:20px;align-items:center;font-weight:700}.profilePage .postContainer .postInfo .userInfo img{width:40px;height:40px;border-radius:50%;object-fit:cover}.profilePage .postContainer .postInfo .userInfo .details{display:flex;flex-direction:column}.profilePage .postContainer .postInfo .userInfo .details .name{font-weight:600}.profilePage .postContainer .postInfo .userInfo .details .date{font-size:14px}.profilePage .postContainer .postContent{display:flex;flex-direction:column;margin:20px 0}.profilePage .postContainer .postContent img{background-color:#00000075;width:100%;max-height:700px;object-fit:scale-down;margin-top:10px}.profilePage .postContainer .postContent p{flex-grow:1}.profilePage .postContainer .info{display:flex;align-items:center;gap:20px}.profilePage .postContainer .info .comment{display:flex;align-items:center;gap:20px;cursor:pointer;font-size:14px}.profilePage .comments-container{width:99.5%;background-color:#efebe8;padding:5px}.noSuchUser{margin-top:10px;background-color:#e8e9e7;padding:20px;border-radius:10px}.action-btn{width:8rem;padding:12px 25px;font-size:16px;border-radius:8px;border:none;background-color:#cd09d7;color:#fff;cursor:pointer;font-weight:600}.noPosts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding-top:30px}.profileContent{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}.profileContent .profile-layout-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:flex-start}@media (max-width: 1000px){.profileContent .profile-layout-grid{grid-template-columns:1fr}}.profileContent .main-content .post .noPosts{padding:40px;text-align:center;background:#fff;border-radius:15px;color:#5c5c5c;font-weight:500;box-shadow:0 4px 12px #0000000d}.profileContent .sidebar-actions{display:flex;flex-direction:column;gap:20px}.profileContent .sidebar-actions .action-card{background:#fff;border-radius:15px;padding:24px;box-shadow:0 4px 12px #0000000d}.profileContent .sidebar-actions .action-card h2,.profileContent .sidebar-actions .action-card h3{font-size:18px;font-weight:700;color:#1a1a1b;margin-bottom:20px;display:flex;align-items:center;gap:10px}.profileContent .sidebar-actions .action-card .confirm-text{font-size:14px;color:#5c5c5c;margin-bottom:15px}.profileContent .sidebar-actions .action-card form{display:flex;flex-direction:column;gap:15px}.profileContent .sidebar-actions .action-card form label{font-size:14px;font-weight:600;color:#5c5c5c}.profileContent .sidebar-actions .action-card form input,.profileContent .sidebar-actions .action-card form textarea{padding:12px;border:1px solid #e1e1e1;border-radius:8px;font-size:14px;transition:border-color .2s}.profileContent .sidebar-actions .action-card form input:focus,.profileContent .sidebar-actions .action-card form textarea:focus{outline:none;border-color:#6a67f3}.profileContent .sidebar-actions .action-card form .button-group{display:flex;gap:10px}.profileContent .sidebar-actions .action-card form button{padding:12px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:opacity .2s}.profileContent .sidebar-actions .action-card form button:hover{opacity:.9}.profileContent .sidebar-actions .action-card form button[type=submit],.profileContent .sidebar-actions .action-card form button.confirm-btn,.profileContent .sidebar-actions .action-card form button.delete-btn{background:#6a67f3;color:#fff}.profileContent .sidebar-actions .action-card form button.cancel-btn,.profileContent .sidebar-actions .action-card form button[type=reset]{background:#f0f0f0;color:#1a1a1b}.profileContent .sidebar-actions .action-card .div-error,.profileContent .sidebar-actions .action-card .div-success{padding:12px;border-radius:8px;font-size:14px;margin-bottom:15px;font-weight:500}.profileContent .sidebar-actions .action-card .div-error{background:#fff0f0;color:#ff4d4d;border:1px solid #ffcccc}.profileContent .sidebar-actions .action-card .div-success{background:#f0fff0;color:#2ecc71;border:1px solid #ccffcc}.post{display:flex;align-items:center;margin-bottom:30px}.post .postContainer{display:flex;flex-direction:column;width:100%;max-width:800px;padding:20px;background-color:#efebe8;border-radius:10px;box-sizing:border-box}.post .postContainer .postInfo{display:flex;align-items:center;justify-content:space-between}.post .postContainer .postInfo .userInfo{display:flex;gap:20px;align-items:center;font-weight:700}.post .postContainer .postInfo .userInfo img{width:40px;height:40px;border-radius:50%;object-fit:cover}.post .postContainer .postInfo .userInfo .details{display:flex;flex-direction:column}.post .postContainer .postInfo .userInfo .details .name{font-weight:600}.post .postContainer .postInfo .userInfo .details .date{font-size:14px}.post .postContainer .postContent{display:flex;flex-direction:column;margin:20px 0}.post .postContainer .postContent img{background-color:#00000075;width:100%;max-height:700px;object-fit:cover;margin-top:10px}.post .postContainer .postContent p{flex-grow:1}.post .postContainer .info{display:flex;align-items:center;gap:20px}.post .postContainer .info .comment{display:flex;align-items:center;gap:20px;cursor:pointer;font-size:14px}.post .comments-container{width:99,5%;background-color:#efebe8;padding:5px}.comments img{width:40px;height:40px;border-radius:50%;object-fit:cover}.comments .write{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.comments .write input{flex:5;padding:10px;border:1px solid themed("border");background-color:transparent;color:themed("textColor")}.comments .comment{margin:30px 0;display:flex;justify-content:space-between;gap:20px}.comments .comment .info{flex:5;display:flex;flex-direction:column;gap:0px;align-items:flex-start}.comments .comment .info span{font-weight:500}.comments .comment .info p{color:themed("textColorSoft")}.comments .comment .date{flex:1;align-self:center;color:#5b4141;font-size:12px}.votes{display:flex;align-items:center}.votes button{border:none;background-color:transparent;color:#363636;size:1}.commentForm{display:flex;flex-wrap:wrap}.commentForm form{display:flex;width:100%;margin-top:10px;gap:8px}.commentForm textarea{border:1px solid #e0e0e0;width:100%;padding:10px 12px;border-radius:8px;font-family:Arial,Helvetica,sans-serif;resize:vertical;background-color:#f8f9fa;transition:all .2s ease;font-size:14px}.commentForm textarea:focus{outline:none;border-color:#4caf50;background-color:#fff;box-shadow:0 0 0 3px #4caf501a}.commentForm textarea::placeholder{color:#999}.commentForm button{border:none;border-radius:8px;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:10px 24px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #4caf504d;white-space:nowrap}.commentForm button:hover{background:linear-gradient(135deg,#45a049,#3d8b40);box-shadow:0 4px 12px #4caf5066;transform:translateY(-1px)}.commentForm button:active{transform:translateY(0);box-shadow:0 2px 6px #4caf504d}.commentForm button:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;transform:none}.banner{width:100%;margin:0 auto;background:#fff;border-radius:0 0 20px 20px;overflow:hidden;box-shadow:0 4px 20px #00000014}.banner .banner-image-container{width:100%;height:280px;position:relative;background:#eef1f5}.banner .banner-image-container .banner-image{width:100%;height:100%;object-fit:cover}.banner .banner-image-container:after{content:"";position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,#00000080)}.banner .profile-info-container{padding:0 40px 40px;position:relative}.banner .profile-info-container .profile-header-content{display:flex;align-items:center;gap:25px;margin-top:-80px;position:relative;z-index:100;flex-wrap:nowrap}.banner .profile-info-container .profile-image-wrapper{width:160px;height:160px;flex-shrink:0;background:#ebe6e6;border-radius:50%;padding:4px;box-shadow:0 8px 30px #0000001f;position:relative;display:flex;align-items:center;justify-content:center}.banner .profile-info-container .profile-image-wrapper .profile-image{width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;overflow:hidden;top:auto;left:auto;transform:none}.banner .profile-info-container .profile-image-wrapper .profile-image-placeholder{background:#e4e5e6}.banner .profile-info-container .profile-image-wrapper .profile-edit{position:absolute;bottom:8px;right:8px;z-index:102}.banner .profile-info-container .profiletext{flex:1 1 auto;min-width:0;align-self:center;margin:0 0 0 12px;font-size:16px;color:#160e0e;line-height:1.2;max-width:500px;overflow-wrap:break-word}.banner .profile-info-container .profilename{flex:0 0 auto;padding-bottom:3px;display:flex;align-items:center;min-width:150px}.banner .profile-info-container .profilename .username{font-size:28px;font-weight:800;color:#0b0b0d;margin-left:3cm;letter-spacing:-1px;line-height:1.2;position:static}@media (max-width: 600px){.banner .profile-info-container .profilename .username{margin-left:1rem;font-size:22px}}.banner .username{margin-top:10px!important}.banner .profiletext{margin-top:24px!important}@media (max-width: 200px){.banner .profilename .username{margin-top:4px!important;margin-left:1rem!important}.banner .profiletext{margin-top:20px!important}}.banner .edit-icon-button{width:36px;height:36px;border-radius:50%;background:#ffffffe6;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #00000026;color:#1a1a1b;transition:all .2s ease;z-index:101}.banner .edit-icon-button:hover{background:#fff;transform:scale(1.1);color:#6200ee}.banner .edit-icon-button.banner-edit{position:absolute;top:20px;right:20px}.search{position:relative;display:flex;align-items:center;gap:5px;border:1px solid grey;border-radius:5px;padding:4px;background:#fff;width:100%;max-width:500px}.search input{border:none;outline:none;width:100%}.search .search-results{position:absolute;left:0;width:100%;background-color:#b0aeae;border-radius:10px;max-height:200px;overflow-y:auto;z-index:1000;margin-top:5px}.search .search-results li{display:flex;align-items:center;gap:8px;padding:8px;cursor:pointer}.search .search-results li:hover{background-color:#f0f0f0}.search .search-results img{width:20px;height:20px;border-radius:50%;object-fit:cover}.home{display:flex;align-items:center;justify-content:center;flex-direction:column;padding-left:1%}.home h2{display:flex;justify-content:center}.form-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:space-between 20px;column-gap:10px;margin-top:20px;background-color:#e0e0e0;padding:20px;border-radius:10px;max-width:800px;box-sizing:border-box}.form-container h2{margin:0 0 10px}.form-container label{font-size:small}.form-container input{border:none;border-bottom:1px solid lightgrey;padding:5px 10px;width:90%;border-radius:6px}.form-container textarea{border:none;border-bottom:1px solid lightgrey;padding:5px 10px;width:90%;font-family:Arial,Helvetica,sans-serif;border-radius:6px}.form-container button{border:none;padding:5px;border-radius:6px}.form-container .label-title,.form-container .label-content,.form-container .label-topic{flex:1 1 100%;margin-top:10px}.form-container .input-title,.form-container .input-content,.form-container .input-topic{flex:1 1 100%;margin-bottom:5px;width:100%;box-sizing:border-box}.form-container .input-file{flex:1 1 100%;margin-top:10px;margin-bottom:20px}.form-container .button-group{display:flex;gap:10px;width:100%;justify-content:flex-end}.form-container .button-group button{padding:8px 16px;cursor:pointer;background-color:#fff;border:1px solid grey}.form-container .button-group button:hover{background-color:#f0f0f0}.form-container .button-group button.btn-submit{background-color:#4caf50;color:#fff;border:none}.form-container .button-group button.btn-submit:hover{background-color:#45a049}.login{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100vh;width:100%;text-align:center}.login .login-card{display:flex;align-items:center;justify-content:center;background-color:#f0f0f0;width:50%;border-radius:10px;min-height:600px}@media (max-width: 768px){.login .login-card{width:90%;min-height:auto;padding:20px 0}}.login .login-card .div-error{display:flex;align-items:center;justify-content:center;background-color:red;border:5px solid red;width:90%;border-radius:5px;padding:5px;text-wrap:wrap;margin:auto}.login .login-card h1{display:flex;align-items:center;justify-content:center;font-size:50px;padding:0% 10%;line-height:1}@media (max-width: 768px){.login .login-card h1{font-size:32px}}.login .login-card h2{display:flex;align-items:center;justify-content:center;font-size:40px;margin-top:0%}@media (max-width: 768px){.login .login-card h2{font-size:24px}}.login .login-card form{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}.login .login-card form input{border:none;border-bottom:1px solid lightgrey;padding:10px;width:100%}.login .login-card button{display:flex;align-items:center;justify-content:center;width:100%;padding:10px;border:none;background-color:#7f7f7d;color:#fff;font-weight:700;cursor:pointer}.change-password-container{display:flex;align-items:center;justify-content:center;border:#574fd6;border:1px;flex-direction:column;gap:20px;width:100%;padding:10px 5px;text-align:center}.change-password-container h2{font-size:26px;font-weight:600;margin-bottom:10px;color:#333}.div-error{width:100%;background:#ffe0e0;border:1px solid #ff5c5c;color:#b30000;padding:10px;border-radius:8px;font-size:14px}.div-success{width:100%;background:#e6ffe6;border:1px solid #4caf50;color:#2e7d32;padding:10px;border-radius:8px;font-size:14px}.change-password-container form{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}.change-password-container form input{width:100%;padding:12px 14px;border:1px solid #dcdcdc;border-radius:8px;font-size:15px;transition:.2s ease}.change-password-container form input:focus{outline:none;border-color:#6c63ff;box-shadow:0 0 0 2px #6c63ff26}.change-password-container form button{width:100%;padding:12px;border:none;border-radius:8px;background:#6c63ff;color:#fff;font-weight:600;cursor:pointer;transition:.2s ease}.change-password-container form button:hover{background:#574fd6}.change-password-container form button:active{transform:scale(.98)}.change-password-container form button{margin-top:10px}@media (max-width: 500px){.change-password-container h2{font-size:22px}}.div-update-user{display:flex;flex-direction:column;margin:10px}.div-get-user{display:flex;flex-direction:column;width:100%;margin:10px}h3,.div-mapped-users{width:100%}.div-mapped-users>img{margin:100px;padding:100px}.div-map-users{display:flex;margin-bottom:20px}.div-map-users>img{margin-right:10px;height:200px;width:200px;border-radius:5px}.form-profile-update{display:flex;flex-direction:column;width:25%}.form-profile-update>*{margin-bottom:10px}.register{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100vh;width:100%;text-align:center}.register .register-card{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f0f0f0;width:50%;border-radius:10px;min-height:600px;padding:0}@media (max-width: 768px){.register .register-card{width:90%;min-height:auto;padding:20px 0}}.register .register-card .div-error{display:flex;align-items:center;justify-content:center;background-color:red;border:5px solid red;width:90%;border-radius:5px;padding:5px;margin:auto}.register .register-card .div-success{display:flex;align-items:center;justify-content:center;background-color:#adff2f;width:90%;border-radius:5px;padding:5px;margin:auto}.register .register-card h1{display:flex;align-items:center;justify-content:center;font-size:50px;padding:0 10%;line-height:1}@media (max-width: 768px){.register .register-card h1{font-size:32px}}.register .register-card h2{display:flex;align-items:center;justify-content:center;font-size:40px;margin-top:0}@media (max-width: 768px){.register .register-card h2{font-size:24px}}.register .register-card form{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;width:100%}.register .register-card form input{border:none;border-bottom:1px solid lightgrey;padding:10px;width:100%}.register .register-card p{font-size:15px}.register .register-card button{display:flex;align-items:center;justify-content:center;width:100%;padding:10px;border:none;background-color:#7f7f7d;color:#fff;font-weight:700;cursor:pointer}.friends .h2{font-size:14px}.chat{position:absolute;width:90%;margin-top:5%;margin-left:3%}.chat-messages{position:absolute;width:90%;padding:10px;box-sizing:border-box;margin-top:5%}.chat-messages .message{display:flex;gap:10px;padding:6px;margin-top:20px;margin-bottom:5px;border-radius:10px;width:100%;background-color:#eaeaea}.chat-messages .message .image-placeholder{width:40px;height:40px;border-radius:50%;background-color:transparent}.chat-messages .message img{width:40px;height:40px;border-radius:50%;object-fit:cover}.chat-messages .message .content{flex-grow:1;display:flex;flex-direction:column;padding:10px;border-radius:15px;width:100%}.chat-messages .message .content .message-input{flex:1;padding:10px;border:1px solid #ccc;border-radius:20px;margin-right:10px}.chat-messages .message .content .message-send-button{background-color:#c7c1c1;color:#000;border:none;padding:10px 20px;border-radius:20px;cursor:pointer}.chat-messages .message .content .message-send-button:hover{background-color:#8e8f8a}.chat-messages .message .content .user-details{display:flex;justify-content:space-between;margin-bottom:5px;width:100%}.chat-messages .message .content .user-details .u-username{margin-top:1px;font-weight:700;margin-right:10px}.chat-messages .message .content .user-details .date{font-size:12px;color:#000}.chat-messages .message .content .message-content{margin-top:5px;width:100%;word-wrap:break-word}.chat-messages .outgoing{background-color:#eaeaea}.chat-messages .incoming{background-color:#c7c1c1}.chatbanner{position:relative;margin-top:15%;margin-bottom:10px}.username{position:absolute;top:70%;left:29%;font-size:30px;color:#000}.profile-image{object-fit:cover;position:absolute;top:97%;left:15%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;border:2px solid white}.hr{margin-right:30px;margin-left:30px;width:100%;color:#271c0f}.chat-create{background-color:#deddd8;width:30%;border-radius:10px;border:2px;padding:5px;border-color:#c0b5a8}.spanSearch{font-weight:700;font-size:20px;color:#0f0303}.search{display:flex;align-items:center;gap:10px;border:1px solid grey;border-radius:5px;padding:5px}.search input{border:none}.search .search-results{position:absolute;top:70%;left:30%;right:30%;background-color:#b0aeae;border:5px solid #faf8f8;border-top:none;max-height:200px;overflow-y:auto;z-index:1000;border-radius:20px}.search .search-results li{padding:8px;cursor:pointer}.search .search-results li:hover{background-color:#f0f0f0;border-radius:8px}.search .search-results img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid white}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}*{box-sizing:border-box;margin:0;padding:0}.layout-container{max-width:1200px;width:fit-content;min-width:100%;margin:0 auto;min-height:100vh;border-left:1px solid lightgrey;border-right:1px solid lightgrey}@media (max-width: 768px){.navBar{padding:10px}.navBar .right{gap:10px;padding-right:0}.navBar .spanTitle{font-size:16px}}.chatLeftBar{flex:2;position:sticky;top:70px;height:calc(100vh - 70px);overflow:scroll;background-color:#efebe8;max-width:200px;min-width:150px;padding:10px}.chatLeftBar::-webkit-scrollbar{display:none}.chatLeftBar span{font-size:20px;font-style:40px}.chatLeftBar hr{margin:2% 0 20px;border:1;height:.5px;color:gray}.chatLeftBar .chat-user{display:flex;flex-direction:column;gap:40px}.chatLeftBar .chat-user img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgb(57,41,41)}.chatLeftBar .chat-user span{font-size:15px}.users,.users .chat-user{display:flex;flex-direction:column;gap:40px}.users .chat-user img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgb(57,41,41)}.users .chat-user span{font-size:15px}.users .chat-user .h2{font-size:14px}.div-topic-component{display:flex;align-items:flex-start;gap:14px;width:100%;max-width:600px;margin:10px auto;border:1px solid #ddd;border-radius:10px;background-color:#fff;box-shadow:0 2px 6px #a9a1a114;transition:transform .2s,box-shadow .2s}.div-topic-component:hover{transform:translateY(-3px);box-shadow:0 4px 12px #7f7d7d1f}.div-topic-component img{width:140px;aspect-ratio:3/2;border-radius:8px;object-fit:cover;flex-shrink:0;display:block;background:#e0e0e0}.div-topic-component>a{flex:1;min-width:0;text-decoration:none;color:inherit}.div-topic-title-desc{display:flex;flex-direction:column;padding:15px;transition:background-color .2s,color .2s}.div-topic-title-desc:hover{background-color:#bbb4c5;color:#fff;cursor:pointer}.div-topic-title-desc h4{margin:0 0 8px;font-size:1.1rem;font-weight:600;color:#7a6795;word-break:break-word}.div-topic-title-desc:hover h4{color:#fff}.div-topic-title-desc p{margin:0;font-size:.95rem;color:#7b7a7a;overflow-wrap:anywhere}.div-topic-title-desc:hover p{color:#f0f0f0}.div-topic-title-desc button{align-self:flex-start;margin-top:10px;padding:5px 10px;background-color:#4f4747;color:#fff;border:none;border-radius:5px;font-size:.85rem;cursor:pointer;transition:background-color .2s,transform .1s}.div-topic-title-desc button:hover{background-color:#965d5d;transform:translateY(-1px)}@media (max-width: 600px){.div-topic-component{margin:10px 5px;align-items:center}.div-topic-component img{width:90px;aspect-ratio:1/1;border-radius:50%}.div-topic-title-desc h4{font-size:1rem}.div-topic-title-desc p{font-size:.9rem}}.topic-create-form,.create-topic-container{background-color:#f9f9f9;padding:20px 25px;border-radius:8px;border:1px solid #ddd;margin-bottom:30px;box-shadow:0 2px 6px #0000000d}.topic-create-form h3,.create-topic-container h3{margin-bottom:15px;color:#444}.topic-create-form input[type=text],.topic-create-form textarea,.topic-create-form input[type=file],.create-topic-container input[type=text],.create-topic-container textarea,.create-topic-container input[type=file]{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:1rem;margin-bottom:12px;transition:border-color .2s}.topic-create-form input[type=text]:focus,.topic-create-form textarea:focus,.topic-create-form input[type=file]:focus,.create-topic-container input[type=text]:focus,.create-topic-container textarea:focus,.create-topic-container input[type=file]:focus{outline:none;border-color:#6200ee;box-shadow:0 0 0 2px #6200ee33}.topic-create-form textarea,.create-topic-container textarea{resize:vertical}.topic-create-form button,.create-topic-container button{padding:10px 20px;border-radius:6px;margin-left:2px;border:none;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;background-color:#6200ee;color:#fff}.topic-create-form button:hover,.create-topic-container button:hover{transform:translateY(-1px);background-color:#5300d6}.topic-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.topic-card{display:flex;flex-direction:column;background-color:#efebe8;border-radius:10px;padding:20px;max-width:800px;margin:0 auto;box-sizing:border-box;transition:transform .2s}.topic-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000014}.topic-card .topicInfo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.topic-card .topicInfo .ownerInfo{display:flex;align-items:center;gap:15px}.topic-card .topicInfo .ownerInfo img{width:40px;height:40px;border-radius:50%;object-fit:cover}.topic-card .topicInfo .ownerInfo .details{display:flex;flex-direction:column}.topic-card .topicInfo .ownerInfo .details .username{font-weight:600}.topic-card .topicInfo .ownerInfo .details .date{font-size:14px;color:#666}.topic-card .topicContent{display:flex;flex-direction:column;margin-bottom:15px}.topic-card .topicContent h4{margin-bottom:6px;color:#6200ee;font-size:1rem;font-weight:600}.topic-card .topicContent p{color:#555;font-size:.95rem}.topic-card .topicContent img{width:100%;max-height:300px;object-fit:cover;border-radius:6px;margin-top:10px}.topic-card .topicMeta{display:flex;align-items:center;gap:15px;font-size:14px;color:#888}.div-community-component{display:flex;flex-direction:row;align-items:center;gap:16px;width:90%;max-width:600px;margin:10px auto;margin-left:1rem;border:1px solid #ddd;border-radius:10px;background-color:#f2efef;box-shadow:0 2px 6px #a9a1a114;transition:transform .2s,box-shadow .2s}.div-community-component:hover{transform:translateY(-3px);box-shadow:0 4px 12px #7f7d7d1f}.div-community-component img{width:180px;height:120px;border-radius:10px;object-fit:cover;display:block;flex-shrink:0}.div-community-title-desc{display:flex;flex-direction:column;width:100%;padding:15px;transition:background-color .2s,color .2s}.div-community-title-desc:hover{background-color:#bbb4c5;color:#fff;cursor:pointer}.div-community-title-desc h1{margin:0 0 8px;font-size:1.2rem;font-weight:600;color:#7a6795}.div-community-title-desc:hover h1{color:#fff}.div-community-title-desc p{margin:0;font-size:.95rem;color:#7b7a7a}.div-community-title-desc:hover p{color:#f0f0f0}@media (max-width: 600px){.div-community-component{max-width:100%;margin:10px 5px}.div-community-component img{width:90px;height:90px;border-radius:50%}.div-community-title-desc h1{font-size:1rem}.div-community-title-desc p{font-size:.9rem}}.toast-success{position:fixed;top:20px;right:20px;background:#2e7d32;color:#fff;padding:14px 20px;border-radius:10px;box-shadow:0 8px 25px #00000040;z-index:1000;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.div-topic-container{display:flex;flex-direction:column;max-width:900px;padding:1rem 20px;margin:1rem auto 1rem 1rem;font-family:Arial,sans-serif;background-color:#efebe8;border-radius:1rem}.div-topic-container h2{margin-top:30px;margin-bottom:15px;color:#6200ee;font-size:1.8rem;border-bottom:2px solid #eee;padding-bottom:5px}.community-create-form,.create-community-container{background-color:#f9f9f9;padding:20px 25px;border-radius:8px;border:1px solid #ddd;margin-bottom:30px;box-shadow:0 2px 6px #0000000d}.community-create-form h3,.create-community-container h3{margin-bottom:15px;color:#444}.community-create-form input[type=text],.community-create-form textarea,.community-create-form input[type=file],.create-community-container input[type=text],.create-community-container textarea,.create-community-container input[type=file]{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:1rem;margin-bottom:12px;transition:border-color .2s}.community-create-form input[type=text]:focus,.community-create-form textarea:focus,.community-create-form input[type=file]:focus,.create-community-container input[type=text]:focus,.create-community-container textarea:focus,.create-community-container input[type=file]:focus{outline:none;border-color:#6200ee;box-shadow:0 0 0 2px #6200ee33}.community-create-form textarea,.create-community-container textarea{resize:vertical}.community-create-form button,.create-community-container button{padding:10px 20px;border-radius:6px;margin-left:2px;border:none;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;background-color:#6200ee;color:#fff}.community-create-form button:hover,.create-community-container button:hover{transform:translateY(-1px);background-color:#5300d6}.community-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.community-card{display:flex;flex-direction:column;background-color:#efebe8;border-radius:10px;padding:20px;max-width:800px;margin:0 auto;box-sizing:border-box;transition:transform .2s}.community-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000014}.community-card .topicInfo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.community-card .topicInfo .ownerInfo{display:flex;align-items:center;gap:15px}.community-card .topicInfo .ownerInfo img{width:40px;height:40px;border-radius:50%;object-fit:cover}.community-card .topicInfo .ownerInfo .details{display:flex;flex-direction:column}.community-card .topicInfo .ownerInfo .details .username{font-weight:600}.community-card .topicInfo .ownerInfo .details .date{font-size:14px;color:#666}.community-card .communityContent{display:flex;flex-direction:column;margin-bottom:15px}.community-card .communityContent h4{margin-bottom:6px;color:#6200ee;font-size:1rem;font-weight:600}.community-card .communityContent p{color:#555;font-size:.95rem}.community-card .communityContent img{width:100%;max-height:300px;object-fit:cover;border-radius:6px;margin-top:10px}.community-card .topicMeta{display:flex;align-items:center;gap:15px;font-size:14px;color:#888}@media (max-width: 600px){.topic-card{padding:15px}.topic-card .topicInfo{flex-direction:column;align-items:flex-start}.topic-card .topicInfo .ownerInfo img{width:35px;height:35px}.topic-card .topicContent img{max-height:200px;text-decoration:none}.topic-card .topicContent h4{font-size:.9rem}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;background-color:#f5f5f5;color:#222}img,picture,video{max-width:100%;display:block}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid #646cff;outline-offset:2px}