*{margin:0;padding:0;box-sizing:border-box}input,textarea,button,select,a,div,.dropdown-item,.hamburger-btn,.modal-content,.close-btn{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{font-family:'Quicksand',sans-serif;min-height:100vh;color:#333;position:relative;overflow-x:hidden;padding:20px}html,body{margin:0;padding:0;height:100%;overflow-x:hidden}body{background:radial-gradient(ellipse at bottom left,rgb(94 23 235 / .6) 0%,rgb(27 27 47 / .4) 40%,rgb(15 12 41 / .6) 80%),radial-gradient(ellipse at top right,rgb(0 255 204 / .3) 0%,transparent 60%),radial-gradient(ellipse at center,rgb(106 0 244 / .4) 0%,transparent 60%);background-blend-mode:screen;background-color:#0d0d2b;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;color:#fff}body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgb(102 126 234 / .3) 0%,rgb(118 75 162 / .3) 50%,rgb(67 56 202 / .2) 100%);z-index:-1}.floating-elements{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.bubble{position:absolute;background:rgb(255 255 255 / .1);border-radius:50%;animation:float 6s ease-in-out infinite;box-shadow:0 0 20px rgb(255 255 255 / .1)}.bubble:nth-child(1){width:60px;height:60px;left:10%;animation-delay:0s;background:rgb(255 255 255 / .08)}.bubble:nth-child(2){width:45px;height:45px;left:20%;animation-delay:2s;background:rgb(255 255 255 / .06)}.bubble:nth-child(3){width:75px;height:75px;right:10%;animation-delay:4s;background:rgb(255 255 255 / .04)}.bubble:nth-child(4){width:30px;height:30px;right:20%;animation-delay:1s;background:rgb(255 255 255 / .1)}.bubble:nth-child(5){width:8px;height:8px;left:60%;top:20%;background:rgb(255 255 255 / .8);animation:twinkle 3s ease-in-out infinite}.bubble:nth-child(6){width:6px;height:6px;right:30%;top:60%;background:rgb(255 255 255 / .6);animation:twinkle 4s ease-in-out infinite;animation-delay:1.5s}.nav-link.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;transform:scale(1.05)}@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-20px) rotate(120deg)}66%{transform:translateY(-40px) rotate(240deg)}}@keyframes twinkle{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}.translator-nav{position:fixed;top:0;left:0;right:0;background:rgb(255 255 255 / .15);backdrop-filter:blur(20px);z-index:999;padding:8px 0;box-shadow:0 8px 32px rgb(0 0 0 / .1);border-bottom:1px solid rgb(255 255 255 / .1)}.nav-container{max-width:900px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 15px}.nav-link{text-decoration:none;color:rgb(255 255 255 / .9);font-weight:600;padding:10px 12px;border-radius:20px;transition:all 0.3s ease;background:rgb(255 255 255 / .1);font-size:.85rem;border:1px solid rgb(255 255 255 / .15);backdrop-filter:blur(10px);text-shadow:1px 1px 2px rgb(0 0 0 / .3);flex:1;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-link:hover,.nav-link.active{background:rgb(102 126 234 / .3);color:#fff;transform:translateY(-1px);border-color:rgb(102 126 234 / .4);box-shadow:0 4px 15px rgb(102 126 234 / .2)}.nav-buttons{position:fixed;top:65px;left:0;right:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 15px;z-index:1000}.nav-buttons .back-btn,.nav-buttons .hamburger-btn{background:rgb(255 255 255 / .15);border:1px solid rgb(255 255 255 / .2);border-radius:10px;padding:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;box-shadow:0 4px 15px rgb(0 0 0 / .1);backdrop-filter:blur(15px);transition:all 0.3s ease;text-decoration:none}.dropdown-container{position:relative}.dropdown-menu{position:absolute;top:50px;right:0}.dropdown-menu{position:absolute;top:50px;right:0;background:rgb(255 255 255 / .15);backdrop-filter:blur(20px);border-radius:12px;padding:15px;min-width:180px;box-shadow:0 8px 32px rgb(0 0 0 / .2);border:1px solid rgb(255 255 255 / .2);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.3s ease}.dropdown-menu.active{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all 0.3s ease;color:rgb(255 255 255 / .9);text-decoration:none;font-size:.9rem;text-shadow:1px 1px 2px rgb(0 0 0 / .2)}.dropdown-item:hover{background:rgb(255 255 255 / .2);transform:translateX(3px);color:#fff}.container{max-width:900px;margin:60px auto 0;padding:15px;position:relative;z-index:2}.header{text-align:center;margin-bottom:25px;color:#fff}.header h1{font-size:2.2rem;margin-bottom:8px;text-shadow:2px 2px 8px rgb(0 0 0 / .5);display:flex;align-items:center;justify-content:center;gap:12px;filter:drop-shadow(0 0 10px rgb(255 255 255 / .3))}.header p{font-size:1rem;opacity:.95;margin-bottom:15px;font-weight:300;text-shadow:1px 1px 4px rgb(0 0 0 / .4)}.translator-card{background:rgb(255 255 255 / .15);backdrop-filter:blur(20px);border-radius:20px;padding:25px;box-shadow:0 8px 32px rgb(0 0 0 / .3),inset 0 1px 0 rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .1);margin-bottom:40px;position:relative;overflow:hidden}.translator-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .05),transparent);transition:left 0.6s ease}.translator-card:hover::before{left:100%}.language-selector{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}.lang-option{display:flex;align-items:center;gap:8px;background:rgb(102 126 234 / .3);backdrop-filter:blur(10px);color:#fff;padding:10px 18px;border-radius:40px;font-weight:600;box-shadow:0 4px 15px rgb(102 126 234 / .2);font-size:.9rem;border:1px solid rgb(102 126 234 / .4);text-shadow:1px 1px 2px rgb(0 0 0 / .3)}.swap-btn{background:rgb(255 107 107 / .3);backdrop-filter:blur(10px);border:1px solid rgb(255 107 107 / .4);border-radius:50%;width:45px;height:45px;color:#fff;font-size:1.2rem;cursor:pointer;transition:all 0.4s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 15px rgb(255 107 107 / .2)}.swap-btn:hover{transform:scale(1.1) rotate(180deg);background:rgb(255 107 107 / .4);border-color:rgb(255 107 107 / .6);box-shadow:0 6px 20px rgb(255 107 107 / .3)}.input-section{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.input-group{position:relative}.input-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:600;color:rgb(255 255 255 / .9);flex-wrap:nowrap;font-size:.9rem;text-shadow:1px 1px 2px rgb(0 0 0 / .3)}.label-text{display:flex;align-items:center;gap:8px;flex-shrink:1;min-width:0}.copy-btn{background:rgb(32 201 151 / .3);backdrop-filter:blur(10px);border:1px solid rgb(32 201 151 / .4);border-radius:8px;padding:6px 10px;color:#fff;cursor:pointer;font-size:.8rem;transition:all 0.3s ease;box-shadow:0 2px 8px rgb(32 201 151 / .2);text-shadow:1px 1px 2px rgb(0 0 0 / .3)}.copy-btn:hover:not(:disabled){transform:translateY(-1px);background:rgb(32 201 151 / .4);border-color:rgb(32 201 151 / .6);box-shadow:0 4px 12px rgb(32 201 151 / .3)}.copy-btn:active{transform:translateY(0)}.copy-btn.copied{background:rgb(23 162 184 / .3);border-color:rgb(23 162 184 / .4)}.copy-btn:disabled{cursor:not-allowed;opacity:.6}.text-area{width:100%;height:160px;border:1px solid rgb(255 255 255 / .2);border-radius:12px;padding:15px;font-size:.9rem;resize:none;overflow-y:auto;transition:all 0.3s ease;background:rgb(255 255 255 / .1);backdrop-filter:blur(10px);color:#fff;placeholder-color:rgb(255 255 255 / .6)}.text-area::placeholder{color:rgb(255 255 255 / .6)}.text-area:focus{outline:none;border-color:rgb(102 126 234 / .6);box-shadow:0 0 20px rgb(102 126 234 / .2);background:rgb(255 255 255 / .15)}.translate-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:rgb(102 126 234 / .3);backdrop-filter:blur(15px);color:#fff;border:1px solid rgb(102 126 234 / .4);border-radius:40px;padding:12px 30px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.4s cubic-bezier(.25,.8,.25,1);margin:0 auto;box-shadow:0 8px 25px rgb(102 126 234 / .2);text-shadow:1px 1px 2px rgb(0 0 0 / .3);position:relative;overflow:hidden;font-family:'Quicksand',sans-serif!important}.translate-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);transition:left 0.6s ease}.translate-btn:hover::before{left:100%}.translate-btn:hover{transform:translateY(-2px) scale(1.02);background:rgb(102 126 234 / .4);border-color:rgb(102 126 234 / .6);box-shadow:0 12px 35px rgb(102 126 234 / .3)}.translate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading{display:none;text-align:center;margin:15px 0;color:rgb(255 255 255 / .9)}.loading.active{display:flex;align-items:center;justify-content:center;gap:8px}.spinner{display:inline-block;width:25px;height:25px;border:3px solid rgb(255 255 255 / .3);border-top:3px solid rgb(255 255 255 / .9);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .4);z-index:2000;backdrop-filter:blur(8px)}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{background:rgb(255 255 255 / .15);backdrop-filter:blur(20px);border:1px solid rgb(255 255 255 / .2);border-radius:20px;padding:30px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 15px 45px rgb(0 0 0 / .3);color:#fff}.modal-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:#fff}.modal-header h2{margin:0;color:rgb(255 255 255 / .95);font-size:1.3rem;text-shadow:1px 1px 2px rgb(0 0 0 / .3)}.close-btn{position:absolute;top:15px;right:15px;background:rgb(255 255 255 / .1);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .2);border-radius:50%;width:30px;height:30px;font-size:1rem;cursor:pointer;color:rgb(255 255 255 / .8);transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:rgb(255 255 255 / .2);color:#fff;transform:scale(1.05)}.feature-list{list-style:none;padding:0}.feature-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgb(255 255 255 / .1)}.feature-item:last-child{border-bottom:none}.feature-icon{background:rgb(102 126 234 / .3);backdrop-filter:blur(10px);color:#fff;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem;border:1px solid rgb(102 126 234 / .4)}.button-group{display:flex;gap:6px;align-items:center;flex-shrink:0}.clear-btn{background:rgb(220 53 69 / .3)!important;backdrop-filter:blur(10px)!important;border:1px solid rgb(220 53 69 / .4)!important}.clear-btn:hover:not(:disabled){background:rgb(220 53 69 / .4)!important;border-color:rgb(220 53 69 / .6)!important;transform:translateY(-1px);box-shadow:0 4px 12px rgb(220 53 69 / .3)}#toastContainer{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:10000;pointer-events:none}.toast{background:rgb(255 255 255 / .15);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#fff;border:1px solid rgb(255 255 255 / .2);padding:12px 20px;margin-bottom:8px;border-radius:12px;box-shadow:0 8px 32px rgb(0 0 0 / .2);font-size:.85rem;font-weight:500;text-align:center;min-width:250px;opacity:1;transform:translateY(-15px);animation:showToast 4s ease forwards;pointer-events:auto;text-shadow:1px 1px 2px rgb(0 0 0 / .3)}.footer-credit{position:fixed;bottom:0;left:0;right:0;backdrop-filter:blur(20px);border-top:1px solid rgb(255 255 255 / .12);padding:4px 5px;text-align:center;z-index:1000;transition:all 0.4s cubic-bezier(.25,.8,.25,1);box-shadow:0 -8px 32px rgb(0 0 0 / .25)}.footer-credit p{margin:0;color:rgb(255 255 255 / .9);font-size:12px;font-weight:400;letter-spacing:1px;text-shadow:0 2px 12px rgb(0 0 0 / .5);line-height:1.4}.footer-credit .creator-name{font-weight:700;font-size:12px;background:linear-gradient(45deg,#ff6b6b 0%,#4ecdc4 20%,#45b7d1 40%,#96ceb4 60%,#ffeaa7 80%,#fd79a8 100%);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text;background-size:300% 300%;animation:gradientShift 4s ease-in-out infinite;filter:drop-shadow(0 0 12px rgb(255 107 107 / .4));text-transform:uppercase;letter-spacing:2.5px;position:relative}.footer-credit .brand-name{color:#4ecdc4;font-weight:600;font-size:12px;filter:drop-shadow(0 0 10px rgb(78 205 196 / .4));letter-spacing:1.8px;text-shadow:0 0 15px rgb(78 205 196 / .3)}@keyframes showToast{0%{opacity:0;transform:translateY(-15px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-15px)}}@media (max-width:768px){body{font-size:14px;padding:10px}body::before{background-attachment:scroll;filter:blur(2px)}.container{margin-top:50px;padding:10px}.header h1{font-size:1.6rem;flex-direction:column;gap:8px}.header p{font-size:.9rem}.translator-card{padding:18px;margin:8px 0 margin-bottom:8px;backdrop-filter:blur(15px)}.input-section{grid-template-columns:1fr;gap:12px}.text-area{height:100px;padding:12px;font-size:.85rem;backdrop-filter:blur(8px)}.language-selector{gap:8px;margin-bottom:15px}.lang-option{padding:8px 14px;font-size:.8rem}.swap-btn{width:38px;height:38px;font-size:1rem}.translate-btn{padding:10px 25px;font-size:.9rem}.modal-content{padding:20px;margin:10px;font-size:.85rem}.hamburger-menu{top:55px}.dropdown-menu{font-size:.8rem;min-width:160px;padding:12px}.nav-container{padding:0 10px;gap:6px}.nav-link{padding:8px 8px;font-size:.8rem;min-width:65px}.input-label{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:8px!important;flex-wrap:nowrap}.label-text{flex-shrink:1;min-width:0}.button-group{flex-shrink:0;gap:4px}.copy-btn{white-space:nowrap;flex-shrink:0;padding:5px 8px;font-size:.75rem}#toastContainer{top:60px}.toast{min-width:200px;padding:10px 15px;font-size:.8rem}.back-menu{top:55px}.back-dropdown-menu{font-size:.8rem;min-width:160px;padding:12px}}@media (max-width:600px){.nav-container{padding:0 8px;gap:4px}.nav-link{padding:8px 6px;font-size:.75rem;min-width:60px;border-radius:15px}}@media (max-width:480px){body::before{filter:blur(1.5px)}.translator-card{backdrop-filter:blur(12px)}.text-area{backdrop-filter:blur(6px)}.nav-container{padding:0 5px;gap:3px}.nav-link{padding:7px 4px;font-size:.7rem;min-width:50px;border-radius:12px;font-weight:500}.translator-nav{padding:6px 0}}@media (max-width:380px){.nav-link{padding:6px 3px;font-size:.65rem;min-width:45px;border-radius:10px}}@media (max-width:320px){.nav-container{padding:0 3px;gap:2px}.nav-link{padding:6px 2px;font-size:.6rem;min-width:40px;border-radius:8px}}button:focus,button:active,button:focus-visible,textarea:focus,textarea:active{outline:none!important}*:focus,*:active,*:focus-visible{outline:none!important}.translate-btn:focus,.copy-btn:focus,.hamburger-btn:focus,.back-btn:focus,.swap-btn:focus{outline:none!important;box-shadow:0 0 0 2px rgb(255 255 255 / .3)!important}#helpModal .modal-content>div{line-height:1.6;padding-left:8px;color:rgb(255 255 255 / .9)}#helpModal h3{margin-top:15px;color:#fff;text-shadow:1px 1px 2px rgb(0 0 0 / .3)}#helpModal p,#helpModal ul,#helpModal ol{margin-bottom:8px;padding-left:15px;color:rgb(255 255 255 / .9)}.translator-nav{animation:slideInFromTop 0.8s cubic-bezier(.25,.8,.25,1) forwards;transform:translateY(-100%)}@keyframes slideInFromTop{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}.nav-buttons{opacity:1;transform:none}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}.header{animation:fadeInUp 1s cubic-bezier(.25,.8,.25,1) 0.3s forwards;opacity:0;transform:translateY(30px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}.translator-card{animation:fadeInScaleBlur 1.2s cubic-bezier(.25,.8,.25,1) 0.5s forwards;opacity:0;transform:translateY(40px) scale(.95)}@keyframes fadeInScaleBlur{0%{opacity:0;transform:translateY(40px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.language-selector{animation:slideInFromLeft 1s cubic-bezier(.25,.8,.25,1) 0.7s forwards;opacity:0;transform:translateX(-30px)}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-30px)}100%{opacity:1;transform:translateX(0)}}.input-section{animation:fadeInStagger 1s cubic-bezier(.25,.8,.25,1) 0.8s forwards;opacity:0;transform:translateY(20px)}@keyframes fadeInStagger{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.translate-btn{animation:bounceIn 1s cubic-bezier(.25,.8,.25,1) 1s forwards;opacity:0;transform:scale(.8)}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}.footer-credit{animation:slideInFromBottom 1s cubic-bezier(.25,.8,.25,1) 1.2s forwards;opacity:0;transform:translateY(100%)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}.modal{animation:modalBackdropFadeIn 0.4s cubic-bezier(.25,.8,.25,1) forwards}.modal:not(.active){animation:modalBackdropFadeOut 0.3s cubic-bezier(.25,.8,.25,1) forwards}@keyframes modalBackdropFadeIn{0%{opacity:0;backdrop-filter:blur(0)}100%{opacity:1;backdrop-filter:blur(8px)}}@keyframes modalBackdropFadeOut{0%{opacity:1;backdrop-filter:blur(8px)}100%{opacity:0;backdrop-filter:blur(0)}}.modal.active .modal-content{animation:modalSlideInScale 0.5s cubic-bezier(.25,.8,.25,1) forwards;transform:translateY(50px) scale(.9);opacity:0}.modal:not(.active) .modal-content{animation:modalSlideOutScale 0.3s cubic-bezier(.25,.8,.25,1) forwards}@keyframes modalSlideInScale{0%{opacity:0;transform:translateY(50px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalSlideOutScale{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.95)}}@keyframes dropdownSlideOut{0%{opacity:1;visibility:visible;transform:translateY(0) scale(1)}100%{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.95)}}.toast{animation:toastSlideIn 0.4s cubic-bezier(.25,.8,.25,1) forwards,toastSlideOut 0.4s cubic-bezier(.25,.8,.25,1) 3.6s forwards}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-20px) scale(.95)}}.loading.active{animation:fadeInBounce 0.4s cubic-bezier(.25,.8,.25,1) forwards;opacity:0;transform:translateY(10px)}@keyframes fadeInBounce{0%{opacity:0;transform:translateY(10px)}60%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:translateY(0)}}.input-group:nth-child(1){animation-delay:0.9s}.input-group:nth-child(2){animation-delay:1s}.nav-link,.copy-btn,.clear-btn,.translate-btn,.swap-btn{transition:all 0.3s cubic-bezier(.25,.8,.25,1)}@media (max-width:768px){.translator-nav{animation-duration:0.6s}.translator-card{animation-duration:1s;animation-delay:0.4s}.header{animation-duration:0.8s;animation-delay:0.2s}.modal.active .modal-content{animation-duration:0.4s}}@media (max-width:480px){.translator-nav{animation-duration:0.5s}.translator-card{animation-duration:0.8s;animation-delay:0.3s}@keyframes fadeInScaleBlur{0%{opacity:0;transform:translateY(20px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.translator-nav,.translator-card,.header,.modal-content{animation:none!important;opacity:1!important;transform:none!important}}