*{margin:0;padding:0;box-sizing:border-box;font-family:Montserrat,sans-serif}.sidebar{width:250px;height:100vh;background-color:#000;color:#fff;position:fixed;left:0;top:0;display:flex;flex-direction:column;justify-content:space-between;z-index:1000}.sidebar-header{padding:20px;border-bottom:1px solid #000}.sidebar-header h3{margin:0;font-size:24px}.sidebar-nav{display:flex;flex-direction:column;padding:20px 0}.sidebar-link{padding:15px 20px;color:#fff;text-decoration:none;transition:background-color .3s;display:flex;align-items:center;gap:12px}.sidebar-icon{width:24px;height:24px}.sidebar-link:hover{background-color:#000}.sidebar-link.active{border-bottom:2px solid white;background-color:#000}.sidebar-footer{margin-top:auto;margin-bottom:20px}.sidebar-username{display:block;padding:0 20px 8px;font-size:12px;color:#ffffff59;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-link{color:red}.logout-link:hover{background-color:red;color:#fff}@media(max-width:768px){.sidebar{position:fixed;inset:auto 0 0;width:100%;height:60px;flex-direction:row;align-items:center;padding:0}.sidebar-logo{display:none}.sidebar-nav{flex-direction:row;width:100%;justify-content:space-around;gap:0}.sidebar-link{flex:1;text-align:center;font-size:16px;font-weight:500;padding:8px;gap:4px;flex-direction:column;justify-content:center}.sidebar-icon{width:24px;height:24px}.sidebar-text,.sidebar-footer,.sidebar-header{display:none}}@media(max-width:768px){.listening-page{margin-left:0;padding-bottom:70px}}.sidebar{padding-bottom:env(safe-area-inset-bottom)}.footer-area{background-color:#000;width:53.1%;margin-left:46.9%;position:fixed;bottom:0;left:0;z-index:100;display:flex;justify-content:end;align-items:center;padding-right:8px;padding-top:4px;padding-bottom:4px;font-size:12px;color:#efeeed;transition:transform .5s ease-out;animation:slideUpOnLoad .5s ease-out}.footer-area.with-sidebar{width:calc(100% - 250px);margin-left:250px;transform:translateY(0);animation:slideUpOnLoad .5s ease-out}@keyframes slideUpOnLoad{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(max-width:768px){.footer-area,.footer-area.with-sidebar{display:none}}.feed-header{padding:20px;background-color:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e0e0e0}.header-title-button-area{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.feed-title{font-size:32px;font-weight:600;color:#000;margin:0}.add-button{width:40px;height:40px;border-radius:50%;background-color:#000;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .5s}.add-button:hover{background-color:#fff;color:#000;border:1px solid #000}.language-tabs{display:flex;gap:10px;overflow-x:auto}.language-tab{padding:10px 20px;background-color:transparent;border:none;border-bottom:2px solid transparent;font-size:16px;font-weight:400;color:#000;cursor:pointer;transition:all .5s}.language-tab:hover{color:#000;font-weight:600}.language-tab.active{color:#000;border-bottom-color:#000}.card{background-color:#fff;border-radius:2px;padding:20px;margin-bottom:20px}.card-header{display:flex;gap:8px;margin-bottom:12px;font-size:14px;color:#000}.card-username-value{color:#000}.card-keyword{font-size:18px;font-weight:600;color:#000;margin-bottom:20px}.card-audio-container{border-radius:4px;padding:60px 0;display:flex;justify-content:center;align-items:center;margin-bottom:20px}.card-play-button{background-color:transparent;border-radius:50%;width:100px;height:100px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s}.card-play-button.light-theme{border:4px solid #000}.card-play-button.light-theme:hover{transform:scale(1.05);transition:transform .4s}.card-play-button.light-theme .card-play-icon{color:#000}.card-play-button.dark-theme{border:4px solid #fff}.card-play-button.dark-theme:hover{transform:scale(1.05);transition:transform .4s}.card-play-button.dark-theme .card-play-icon{color:#fff}.card-play-icon{width:50px;height:50px}.card-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.card-add-comment{background-color:transparent;border:none;display:flex;align-items:center;gap:8px;font-size:14px;color:#000;cursor:pointer;padding:4px}.card-add-comment:hover{transform:scale(1.05);transition:transform .4s}.plus-icon{font-size:20px;font-weight:300}.card-stats{display:flex;gap:16px;align-items:center}.card-stat-button{background-color:transparent;border:none;display:flex;align-items:center;gap:6px;font-size:14px;color:#333;cursor:pointer;padding:4px}.card-stat-button:hover{color:#000;transform:scale(1.1);transition:transform .4s}.card-stat-button.liked{color:red}.card-stat-button svg{flex-shrink:0}.card-delete{margin-left:auto}.card-loading{display:flex;align-items:center;justify-content:center;color:#666}.comments-of-post{background-color:#fff;border-radius:2px;padding:20px;height:fit-content;position:sticky;top:165px;z-index:5}.comments-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #efeeed;display:flex;justify-content:space-between}.comments-header h2{font-size:18px;font-weight:600;color:#000;margin:0}.comments-list{display:flex;flex-direction:column;gap:16px}.no-comments{text-align:center;color:#000;font-size:14px;padding:20px}.h1{font-size:24px;font-weight:700;margin-bottom:16px}.modal-overlay{position:fixed;inset:0;background-color:#0009;z-index:999;animation:fadeIn .2s ease-in-out}.modal-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:4px;padding:0;z-index:1000;max-width:90vw;max-height:90vh;overflow:auto;animation:slideIn 0s ease-out;padding-bottom:env(safe-area-inset-bottom);padding-top:env(safe-area-inset-top)}.modal-header{display:flex;justify-content:flex-end;padding:16px 20px;border-bottom:2px solid #efeeed}.modal-close-button{background-color:transparent;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:#000;border-radius:4px;transition:transform .4s ease,background-color .1s ease .2s}.modal-close-button:hover{background-color:#efeeed;color:#000;transform:rotate(90deg)}.modal-content{padding:20px}@keyframes slideIn{0%{transform:translate(-50%,-48%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}@media(max-width:768px){.modal-container{width:85vw;max-width:85vw;left:50%;transform:translate(-50%,-50%)}}.dropdown{position:relative;width:100%}.dropdown-trigger{width:100%;padding:12px;background-color:#efeeed;border:1px solid #efeeed;border-radius:2px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:14px;height:55px;transition:border-color .9s}.dropdown-trigger:hover{border-color:#efeeed}.dropdown-trigger:focus{outline:none;border-bottom:2px solid #000}.dropdown-value{color:#000;text-align:left}.dropdown-icon{transition:transform .2s;color:#000}.dropdown-icon.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #efeeed;border-radius:4px;box-shadow:0 4px 12px #efeeed;z-index:100;max-height:300px;overflow-y:auto;animation:slideDown .2s ease-out}.dropdown-menu.closing{animation:slideUp .2s ease-out}.dropdown-item{width:100%;padding:12px 16px;background-color:transparent;border:none;text-align:left;cursor:pointer;font-size:16px;color:#333;transition:all .4s;display:block}.dropdown-item:hover{background-color:#efeeed;color:#000}.dropdown-item.selected{background-color:#000;color:#fff}.dropdown-item.selected:hover{background-color:#000;opacity:.8}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.btn{padding:14px;border:none;border-radius:2px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .5s;height:55px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background-color:#000;color:#fff}.btn-primary:hover{background-color:#fff;border:#000 1px solid;color:#000}.btn-loading{opacity:.7;cursor:not-allowed}.btn-loading:hover{background-color:#000;border:none;color:#fff}.spinner-icon{width:18px;height:18px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-wrapper{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.input-label{margin-bottom:8px;font-size:14px;font-weight:500;color:#333}.input-field{padding:12px;border:1px solid #efeeed;height:55px;background-color:#efeeed;border-radius:2px;font-size:14px;transition:border-color .9s}.input-field:focus{outline:none;border-bottom:2px solid #000}.input-error{border-color:#e74c3c}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.recording-modal{min-width:500px}.recording-modal-title{font-size:24px;font-weight:600;color:#000;margin-bottom:32px;text-align:center}.recording-form{margin-bottom:24px}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:500;color:#000;margin-bottom:8px}.error-message-for-recording{color:red;font-size:12px;margin-top:4px;display:block}.recording-number{font-weight:600;color:#000;font-size:14px}@media(max-width:768px){.recording-modal{min-width:unset;width:100%}}.comment-modal{min-width:500px}.comment-modal-title{font-size:24px;font-weight:600;color:#000;margin-bottom:32px;text-align:center}.comment-form{margin-bottom:24px}.recording-timer{font-size:48px;font-weight:700;text-align:center;margin:32px 0;color:#000;font-family:monospace;letter-spacing:2px}.recording-controls{display:flex;gap:12px;justify-content:center;margin-bottom:32px}.recordings-section{border-top:1px solid #f0f0f0;padding-top:24px}.recordings-section-title{font-size:18px;font-weight:600;color:#000;margin-bottom:16px}.no-recordings-message{text-align:center;color:#999;padding:32px;font-size:14px}.recording-item{background-color:#f9f9f9;border-radius:4px;padding:16px;margin-bottom:12px;transition:all .2s}.recording-item:hover{background-color:#f5f5f5}.recording-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.recording-item-info{display:flex;gap:16px;align-items:center}.recording-timestamp{color:#999;font-size:12px}.recording-item audio{width:100%;margin-bottom:12px;height:32px}.recording-delete-button{background-color:transparent;border:1px solid red;color:red;padding:6px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.recording-delete-button:hover{background-color:red;color:#fff}.submit-button{width:100%;margin-top:24px}@media(max-width:768px){.comment-modal{min-width:unset;width:100%}}.feed-page{margin-left:250px;min-height:100vh;background-color:#efeeed;overflow-y:auto;height:100vh}.feed-content{display:flex;gap:20px;padding:20px 20px 40px}.feed-main{flex:5;max-width:62.5%}.feed-sidebar{flex:3;max-width:37.5%}.card-loading-icon{animation:spin 1s linear infinite}@media(max-width:768px){.feed-page{margin-left:0}.feed-content{flex-direction:column;padding:10px}.feed-main{width:100%;max-width:100%;flex:1}.feed-sidebar{position:fixed;bottom:60px;left:0;right:0;height:50vh;background:#fff;overflow-y:auto;box-shadow:0 -4px 10px #efeeed;z-index:100;box-shadow:#efeeed;max-width:100%}}.login-page{display:flex;height:100vh;margin:0;padding:0}.left-container{flex:1;margin:0;padding:0}.left-container img{width:100%;height:100%;object-fit:cover;display:block}.right-container{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}.login-form-container{width:100%;max-width:400px}.login-form-container h2{margin-bottom:30px;font-size:28px;color:#000;font-weight:500}.login-form{display:flex;flex-direction:column}.form-links{display:flex;justify-content:center;margin-top:15px}.form-link{font-size:14px;color:#2c3e50;text-decoration:none;transition:color .3s}.form-link:hover{color:#000;text-decoration:underline}@media(max-width:768px){.left-container{height:40vh}.login-page{flex-direction:column;height:60vh}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100vh;overflow:hidden}.signup-page{display:flex;height:100vh;margin:0;padding:0}.signup-page .left-container{flex:1;margin:0;padding:0}.signup-page .left-container img{width:100%;height:100%;object-fit:cover;display:block}.signup-page .right-container{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}.signup-form-container{width:100%;max-width:400px}.signup-form-container h2{margin-bottom:30px;font-size:28px;color:#000;font-weight:500}.signup-form{display:flex;flex-direction:column}.signup-page .form-links{display:flex;justify-content:center;margin-top:15px}.signup-page .form-link{font-size:14px;color:#2c3e50;text-decoration:none;transition:color .3s}.signup-page .form-link:hover{color:#000;text-decoration:underline}@media(max-width:768px){.left-container{height:40vh}.signup-page{flex-direction:column;height:60vh}}.listening-page{min-height:100vh;display:flex;flex-direction:column;margin-left:250px}.listening-header{padding:20px;border-bottom:1px solid #eee}.listening-title{font-size:32px;font-weight:600;margin-bottom:16px;color:#000}.listening-content{display:flex;flex:1;gap:20px;padding:20px}.quiz-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.audio-player-container{flex:1;display:flex;align-items:center;justify-content:center;margin-bottom:40px}.play-button{background:none;border:none;cursor:pointer;padding:20px;transition:transform .2s}.play-button:hover{transform:scale(1.1)}.quiz-form>div{display:flex;flex-direction:column;align-items:center}.quiz-history{width:300px;border-left:1px solid #efeeed;padding-left:20px}.quiz-history-title{font-size:18px;font-weight:600;margin-bottom:16px}.no-history-message{color:#999;text-align:center;padding:20px}.table-container{overflow-x:auto}.quiz-history-table{width:100%;border-collapse:collapse}.quiz-history-table thead tr{background-color:#efeeed}.quiz-history-table th{padding:12px 16px;font-weight:600;text-align:left}.quiz-history-table th:last-child{text-align:center}.quiz-history-table td{padding:12px 16px}.history-keyword{font-weight:400;color:#000}.history-attempts{text-align:center;color:#000;font-weight:400;font-style:italic}.quiz-error-text{color:#e50914;opacity:.8;font-weight:600;height:24px;font-size:30px}.quiz-success-text{color:#27c812;opacity:.9;font-weight:600;height:24px;font-size:30px}.quiz-form{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.quiz-feedback-container{position:absolute;bottom:170px;left:51%;transform:translate(-50%,-50%);animation:fadeIn .4s ease-in-out;z-index:10}.quiz-completed-text{font-size:24px;font-weight:700;color:#27c812;margin-bottom:16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.listening-page{margin-left:0;height:100vh;overflow-y:auto}}@media(max-width:768px){.listening-content{flex-direction:column;overflow-y:auto}.quiz-history{width:100%;border-left:none;border-top:1px solid #eee;padding-left:0;padding-top:20px}}@media(max-width:768px){.play-button svg{width:80px;height:80px}}@media(max-width:768px){.quiz-form input,.quiz-form button{width:90%!important}.quiz-area{min-height:70vh}.quiz-feedback-container{bottom:150px}.listening-title{font-size:24px}.quiz-feedback-text{font-size:20px}}.profile-header{padding:20px;background-color:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e0e0e0}.profile-header-title-area{display:flex;justify-content:space-between;align-items:center}.profile-title{font-size:32px;font-weight:600;color:#000;margin:0}.logout-button-area{display:none;color:red}@media(max-width:768px){.logout-button-area{display:block;color:red}}.profile-page{margin-left:250px;min-height:100vh;background-color:#efeeed;overflow-y:auto;height:100vh}.profile-content{display:flex;gap:20px;padding:20px 20px 40px}.profile-main{flex:5;max-width:62.5%}.profile-sidebar{flex:3;max-width:35.5%}@media(max-width:768px){.profile-page{margin-left:0}.profile-content{flex-direction:column;padding:10px}.profile-main{width:100%;max-width:100%;flex:1}.profile-sidebar{position:fixed;bottom:60px;left:0;right:0;height:50vh;background:#fff;overflow-y:auto;box-shadow:0 -4px 10px #efeeed;z-index:100;max-width:100%}}