*{margin:0;padding:0;box-sizing:border-box}@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#ffffff;background:#2d1b69;min-height:100vh;position:relative;overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(3px 3px at 15% 20%,#ffd700,transparent),radial-gradient(2px 2px at 85% 15%,#f0d982,transparent),radial-gradient(3px 3px at 25% 80%,#ffd700,transparent),radial-gradient(2px 2px at 75% 85%,#f0d982,transparent),radial-gradient(3px 3px at 90% 60%,#ffd700,transparent),radial-gradient(2px 2px at 10% 50%,#f0d982,transparent),radial-gradient(2px 2px at 30% 10%,#f0d982,transparent),radial-gradient(2px 2px at 70% 25%,#ffd700,transparent),radial-gradient(1px 1px at 45% 35%,#f0d982,transparent),radial-gradient(2px 2px at 60% 70%,#ffd700,transparent),radial-gradient(1px 1px at 20% 65%,#f0d982,transparent),radial-gradient(2px 2px at 80% 45%,#ffd700,transparent),radial-gradient(1px 1px at 35% 90%,#f0d982,transparent),radial-gradient(2px 2px at 95% 30%,#ffd700,transparent),radial-gradient(1px 1px at 12% 8%,#f0d982,transparent),radial-gradient(1px 1px at 88% 12%,#ffd700,transparent),radial-gradient(1px 1px at 22% 28%,#f0d982,transparent),radial-gradient(1px 1px at 78% 32%,#ffd700,transparent),radial-gradient(1px 1px at 32% 48%,#f0d982,transparent),radial-gradient(1px 1px at 68% 52%,#ffd700,transparent),radial-gradient(1px 1px at 42% 68%,#f0d982,transparent),radial-gradient(1px 1px at 58% 72%,#ffd700,transparent),radial-gradient(1px 1px at 52% 88%,#f0d982,transparent),radial-gradient(1px 1px at 48% 92%,#ffd700,transparent),radial-gradient(0.5px 0.5px at 18% 18%,#f0d982,transparent),radial-gradient(0.5px 0.5px at 82% 22%,#ffd700,transparent),radial-gradient(0.5px 0.5px at 28% 38%,#f0d982,transparent),radial-gradient(0.5px 0.5px at 72% 42%,#ffd700,transparent),radial-gradient(0.5px 0.5px at 38% 58%,#f0d982,transparent),radial-gradient(0.5px 0.5px at 62% 62%,#ffd700,transparent),radial-gradient(0.5px 0.5px at 48% 78%,#f0d982,transparent),radial-gradient(0.5px 0.5px at 52% 82%,#ffd700,transparent);background-size:100% 100%;animation:twinkle 3s ease-in-out infinite alternate;pointer-events:none;z-index:0}body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='10' y='20' font-size='24' fill='%23ffd70050'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='80' y='30' font-size='28' fill='%23f0d98245'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='20' y='70' font-size='22' fill='%23ffd70040'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='90' y='80' font-size='26' fill='%23f0d98235'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='15' font-size='32' fill='%23ffd70055'%3E𝄞%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='15' y='90' font-size='18' fill='%23f0d98240'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='70' y='60' font-size='20' fill='%23ffd70045'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='30' y='45' font-size='19' fill='%23f0d98238'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='60' y='25' font-size='21' fill='%23ffd70042'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='40' y='85' font-size='17' fill='%23f0d98243'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='5' y='50' font-size='16' fill='%23ffd70035'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='95' y='40' font-size='15' fill='%23f0d98230'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='25' y='20' font-size='14' fill='%23ffd70038'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='75' y='90' font-size='16' fill='%23f0d98240'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='45' y='65' font-size='18' fill='%23ffd70045'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='65' y='10' font-size='13' fill='%23f0d98225'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='35' y='95' font-size='15' fill='%23ffd70030'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='85' y='55' font-size='14' fill='%23f0d98235'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='55' y='35' font-size='16' fill='%23ffd70040'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='15' y='65' font-size='12' fill='%23f0d98228'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='8' y='35' font-size='11' fill='%23ffd70025'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='92' y='15' font-size='13' fill='%23f0d98230'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='38' y='12' font-size='14' fill='%23ffd70035'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='78' y='75' font-size='15' fill='%23f0d98240'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='22' y='55' font-size='12' fill='%23ffd70028'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='68' y='42' font-size='13' fill='%23f0d98232'%3E♪%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='48' y='78' font-size='16' fill='%23ffd70042'%3E♫%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='12' y='75' font-size='11' fill='%23f0d98225'%3E♬%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='88' y='68' font-size='14' fill='%23ffd70038'%3E♩%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='58' y='52' font-size='12' fill='%23f0d98228'%3E♪%3C/text%3E%3C/svg%3E");background-position:5% 15%,85% 25%,15% 75%,90% 85%,50% 10%,10% 90%,75% 55%,25% 40%,60% 20%,40% 80%,2% 45%,98% 35%,20% 15%,80% 88%,45% 62%,65% 8%,35% 92%,88% 52%,55% 32%,12% 62%,6% 28%,94% 12%,32% 8%,82% 72%,18% 48%,72% 38%,52% 75%,8% 72%,92% 65%,62% 48%;background-size:140px 140px,160px 160px,120px 120px,150px 150px,180px 180px,110px 110px,130px 130px,115px 115px,125px 125px,135px 135px,100px 100px,105px 105px,95px 95px,145px 145px,155px 155px,90px 90px,108px 108px,118px 118px,128px 128px,85px 85px,88px 88px,92px 92px,102px 102px,138px 138px,98px 98px,112px 112px,122px 122px,82px 82px,148px 148px,132px 132px;background-repeat:no-repeat;pointer-events:none;z-index:0;animation:float 8s ease-in-out infinite}@keyframes twinkle{0%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0.8;transform:scale(1)}}@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);opacity:0.3}25%{transform:translateY(-8px) rotate(2deg);opacity:0.4}50%{transform:translateY(-5px) rotate(-1deg);opacity:0.5}75%{transform:translateY(-12px) rotate(1deg);opacity:0.3}}.container{position:relative;z-index:1}input,textarea,.translation-line,.explanation-content{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}@media (max-width:768px){button,select,input[type="text"],.copy-line-btn,.retry-line-btn{min-height:44px;min-width:44px;touch-action:manipulation}input,textarea,select{font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.language-controls{gap:1.5rem}.results-actions{gap:1rem}.language-section{position:relative;overflow:hidden}.language-section::before{content:'';position:absolute;top:0;left:-100%;right:-100%;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(59,130,246,0.1) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:1}.language-section.swiping::before{opacity:1}.pull-indicator{display:flex;align-items:center;gap:0.5rem}.pull-icon{font-size:1.2rem;transition:transform 0.2s ease}.toast{margin:0 0.5rem 0.5rem 0.5rem;border-radius:12px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.2)}.toast-content{padding:1.25rem;min-height:48px}.error-container{border-radius:12px;margin:0.5rem}.error-message{padding:1.25rem;min-height:60px}.loading-indicator{backdrop-filter:blur(8px)}.loading-spinner{width:48px;height:48px;border-width:4px}.translation-content{padding:0.75rem}.original-line,.translated-line{position:relative;word-wrap:break-word;overflow-wrap:break-word}.explanation-header{padding:1rem;min-height:56px}.explanation-content{padding:1rem;line-height:1.7}}.container{max-width:1200px;margin:0 auto;padding:1rem;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;margin-bottom:1rem;padding:1rem 0}.header h1{font-family:'Playfair Display',serif;font-size:3.5rem;font-weight:800;color:#ffffff;margin-bottom:0.5rem;text-shadow:3px 3px 6px rgba(0,0,0,0.4);position:relative;letter-spacing:-0.02em}.subtitle{color:#ffffff;font-size:1.2rem;font-weight:400;text-shadow:1px 1px 2px rgba(0,0,0,0.2)}.description{color:#ffffff;font-size:1rem;margin-top:0.5rem;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.5;text-shadow:1px 1px 2px rgba(0,0,0,0.2)}.main-content{flex:1;display:flex;flex-direction:column;gap:2rem}.input-section{background:rgba(255,255,255,0.9);border-radius:16px;padding:1.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.1);backdrop-filter:blur(10px)}.input-group{display:flex;flex-direction:column;gap:0.75rem}.input-label{font-weight:600;color:#f0d982;font-size:0.95rem;text-shadow:1px 1px 2px rgba(0,0,0,0.3)}.lyrics-textarea{width:100%;min-height:150px;padding:1rem;border:none;border-radius:12px;font-size:1rem;line-height:1.5;resize:vertical;transition:all 0.2s ease;font-family:inherit;background:transparent;color:#000000;backdrop-filter:blur(5px);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px;overflow-y:auto;touch-action:manipulation}.lyrics-textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}.lyrics-textarea::placeholder{color:#9ca3af}.input-help{display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem;color:#6b7280}.input-help-row{display:flex;justify-content:space-between;align-items:center}.char-count{font-weight:500;transition:color 0.2s ease}.input-guidance{padding:0.5rem 0.75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:0.8rem;color:#64748b;line-height:1.4;margin-top:0.25rem;animation:slideIn 0.3s ease-out}.input-guidance.guidance-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.input-guidance.guidance-warning{background:#fffbeb;border-color:#fed7aa;color:#92400e}.input-guidance.guidance-error{background:#fef2f2;border-color:#fecaca;color:#dc2626}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.language-section{background:rgba(255,255,255,0.9);border-radius:16px;padding:1.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.1);backdrop-filter:blur(10px)}.language-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:end;margin-bottom:1.5rem}.language-group{display:flex;flex-direction:column;gap:0.5rem}.language-label{font-weight:600;color:#000000;font-size:0.9rem}.language-display{display:flex;align-items:center;gap:0.5rem;min-height:44px}.detected-language{padding:0.75rem 1rem;background:#f3f4f6;border-radius:6px;font-weight:500;color:#374151;flex:1;transition:all 0.2s ease;border:2px solid transparent}.detected-language.detecting{background:#fef3c7;color:#d97706;border-color:#fbbf24}.detected-language.detecting::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid #d97706;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}.detected-language.detected{background:#dcfce7;color:#16a34a;border-color:#4ade80}.detected-language.error{background:#fef2f2;color:#dc2626;border-color:#f87171}.manual-select-btn{padding:0.5rem 1rem;background:#6b7280;color:white;border:none;border-radius:6px;font-size:0.875rem;cursor:pointer;transition:background-color 0.2s ease;min-height:44px}.manual-select-btn:hover{background:#4b5563}.language-select{width:100%;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:6px;font-size:1rem;background:white;cursor:pointer;transition:all 0.2s ease;min-height:44px;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.language-select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}.language-select:hover{border-color:#d1d5db}.searchable-select-container{position:relative;width:100%}.language-search{width:100%;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:6px 6px 0 0;font-size:1rem;background:white;transition:all 0.2s ease;min-height:44px}.language-search:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}.language-search::placeholder{color:#9ca3af;font-style:italic}.searchable-select-container .language-select{border-radius:0 0 6px 6px;border-top:none;max-height:200px;overflow-y:auto;background-image:none;padding-right:1rem}.searchable-select-container .language-select:focus{box-shadow:none;border-color:#e5e7eb}.searchable-select-container:focus-within .language-select{border-color:#2563eb}.searchable-select-container .language-select::-webkit-scrollbar{width:6px}.searchable-select-container .language-select::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.searchable-select-container .language-select::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.searchable-select-container .language-select::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.language-select option{padding:0.5rem;font-size:1rem}.language-select option:disabled{color:#9ca3af;font-weight:600;font-style:italic;background-color:#f9fafb}.searchable-select-container{position:relative;width:100%}.language-search{width:100%;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:6px 6px 0 0;font-size:1rem;background:white;transition:all 0.2s ease;min-height:44px}.language-search:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}.language-search::placeholder{color:#9ca3af;font-style:italic}.searchable-select-container .language-select{border-radius:0 0 6px 6px;border-top:none;max-height:200px;overflow-y:auto;background-image:none;padding-right:1rem}.searchable-select-container .language-select:focus{box-shadow:none;border-color:#e5e7eb}.searchable-select-container:focus-within .language-select{border-color:#2563eb}.searchable-select-container .language-select::-webkit-scrollbar{width:6px}.searchable-select-container .language-select::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.searchable-select-container .language-select::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.searchable-select-container .language-select::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.language-arrow{font-size:1.5rem;color:#6b7280;text-align:center;align-self:center}.translate-btn{width:100%;padding:1rem 2rem;background:#3b82f6;color:white;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all 0.2s ease;min-height:56px;position:relative;box-shadow:0 4px 15px rgba(59,130,246,0.3)}.translate-btn:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.4)}.translate-btn:disabled{background:rgba(107,114,128,0.5);color:rgba(240,217,130,0.5);cursor:not-allowed;transform:none;box-shadow:none}.results-section{background:rgba(255,255,255,0.9);border-radius:16px;padding:1.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.1);backdrop-filter:blur(10px)}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.results-header h2{font-size:1.5rem;color:#000000;font-weight:600}.results-actions{display:flex;gap:0.5rem}.action-btn{padding:0.5rem 1rem;background:#f3f4f6;color:#374151;border:1px solid #d1d5db;border-radius:6px;font-size:0.875rem;cursor:pointer;transition:all 0.2s ease;min-height:44px}.action-btn:hover{background:#e5e7eb;border-color:#9ca3af}.translation-display{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.translation-content{padding:1rem}.loading-indicator{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;color:white}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,0.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.loading-text{font-size:1.1rem;margin-bottom:1rem}.cancel-btn{padding:0.75rem 1.5rem;background:#dc2626;color:white;border:none;border-radius:6px;cursor:pointer;transition:background-color 0.2s ease;min-height:44px}.cancel-btn:hover{background:#b91c1c}.error-container{position:fixed;top:1rem;left:1rem;right:1rem;z-index:1001}.error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1rem;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.error-text{flex:1;color:#dc2626;font-weight:500}.retry-btn{padding:0.5rem 1rem;background:#dc2626;color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;min-height:44px}.dismiss-btn{background:none;border:none;color:#dc2626;font-size:1.5rem;cursor:pointer;padding:0.25rem;min-width:44px;min-height:44px}.error-container{position:fixed;top:1rem;left:1rem;right:1rem;z-index:1001;max-width:600px;margin:0 auto}.error-container.error-network{border-left:4px solid #f59e0b}.error-container.error-auth{border-left:4px solid #dc2626}.error-container.error-rate_limit{border-left:4px solid #8b5cf6}.error-container.error-validation{border-left:4px solid #f59e0b}.error-container.error-timeout{border-left:4px solid #06b6d4}.error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1rem;display:flex;align-items:flex-start;gap:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.15);min-height:60px}.error-details{display:flex;align-items:flex-start;gap:0.75rem;flex:1}.error-icon{font-size:1.5rem;flex-shrink:0;margin-top:0.125rem}.error-content{flex:1;min-width:0}.error-message .error-message{color:#dc2626;font-weight:600;margin-bottom:0.5rem;line-height:1.4}.error-suggestion{color:#7c2d12;font-size:0.875rem;font-weight:500;opacity:0.9}.retry-btn{padding:0.5rem 1rem;background:#dc2626;color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;font-weight:500;min-height:44px;min-width:80px;transition:all 0.2s ease;flex-shrink:0}.retry-btn:hover{background:#b91c1c;transform:translateY(-1px)}.retry-btn.retry-network{background:#f59e0b}.retry-btn.retry-network:hover{background:#d97706}.retry-btn.retry-rate_limit{background:#8b5cf6}.retry-btn.retry-rate_limit:hover{background:#7c3aed}.retry-btn.retry-timeout{background:#06b6d4}.retry-btn.retry-timeout:hover{background:#0891b2}.dismiss-btn{background:none;border:none;color:#dc2626;font-size:1.5rem;cursor:pointer;padding:0.25rem;min-width:44px;min-height:44px;border-radius:4px;transition:all 0.2s ease;flex-shrink:0}.dismiss-btn:hover{background:rgba(220,38,38,0.1);transform:scale(1.1)}.toast-container{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:1002;pointer-events:none;max-width:400px;margin:0 auto}.toast{margin-bottom:0.5rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);backdrop-filter:blur(8px);transition:all 0.3s ease;transform:translateY(20px);opacity:0}.toast.toast-show{transform:translateY(0);opacity:1}.toast.toast-hide{transform:translateY(-20px);opacity:0}.toast-content{display:flex;align-items:center;gap:0.75rem;padding:1rem;min-height:44px}.toast-message{flex:1;font-weight:500;line-height:1.4;word-wrap:break-word}.toast-action{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:inherit;padding:0.5rem 1rem;border-radius:4px;cursor:pointer;font-size:0.875rem;font-weight:600;transition:all 0.2s ease;min-height:36px;backdrop-filter:blur(4px)}.toast-action:hover{background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.5);transform:translateY(-1px)}.toast-close{background:none;border:none;color:inherit;font-size:1.25rem;cursor:pointer;padding:0.25rem;border-radius:4px;min-width:32px;min-height:32px;transition:all 0.2s ease;opacity:0.7}.toast-close:hover{opacity:1;background:rgba(0,0,0,0.1);transform:scale(1.1)}.toast-icon{font-size:1.2rem;flex-shrink:0}.translation-line.translation-error{background:linear-gradient(90deg,#fef2f2 0%,#ffffff 100%);border-left:4px solid #ef4444;padding-left:1rem;margin-left:-1rem;border-radius:8px;position:relative}.translation-line.translation-error::before{content:'';position:absolute;left:-4px;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#ef4444 0%,#f87171 100%);border-radius:0 2px 2px 0}.error-indicator{color:#dc2626;font-weight:600;display:flex;align-items:center;gap:0.5rem;padding:0.5rem;background:rgba(239,68,68,0.1);border-radius:6px;border:1px solid rgba(239,68,68,0.2)}.line-loading{color:#d97706;font-weight:500;display:flex;align-items:center;gap:0.5rem;padding:0.5rem;background:rgba(217,119,6,0.1);border-radius:6px;border:1px solid rgba(217,119,6,0.2)}.line-loading::after{content:'';display:inline-block;width:12px;height:12px;border:2px solid #d97706;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}.copy-line-btn,.retry-line-btn{position:absolute;top:0.5rem;right:0.5rem;background:rgba(255,255,255,0.95);border:1px solid #d1d5db;border-radius:6px;padding:0.375rem;font-size:0.875rem;cursor:pointer;opacity:0;transition:all 0.2s ease;backdrop-filter:blur(8px);min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.original-line:hover .copy-line-btn,.translated-line:hover .copy-line-btn,.translated-line:hover .retry-line-btn,.translation-error .retry-line-btn{opacity:1}.copy-line-btn:hover{background:#f3f4f6;border-color:#9ca3af;transform:scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,0.15)}.retry-line-btn{background:rgba(254,242,242,0.95);border-color:#fecaca;color:#dc2626}.retry-line-btn:hover{background:#fef2f2;border-color:#f87171;transform:scale(1.05);box-shadow:0 4px 8px rgba(220,38,38,0.15)}.translation-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#6b7280;background:#f9fafb;border-radius:12px;border:2px dashed #d1d5db}.translation-loading .spinner{width:2.5rem;height:2.5rem;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.translation-loading .loading-message{font-size:1.1rem;font-weight:500;margin-bottom:0.5rem}.translation-loading .loading-details{font-size:0.875rem;opacity:0.7;text-align:center;max-width:300px}.recovery-actions{display:flex;gap:0.5rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}.recovery-btn{padding:0.5rem 1rem;border:1px solid #d1d5db;background:white;color:#374151;border-radius:6px;cursor:pointer;font-size:0.875rem;transition:all 0.2s ease;min-height:36px}.recovery-btn:hover{background:#f3f4f6;border-color:#9ca3af;transform:translateY(-1px)}.recovery-btn.primary{background:#3b82f6;color:white;border-color:#3b82f6}.recovery-btn.primary:hover{background:#2563eb;border-color:#2563eb}@keyframes toast-slide-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-slide-out{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}.toast{animation:toast-slide-in 0.3s ease-out}.toast.toast-hide{animation:toast-slide-out 0.3s ease-in}@keyframes error-slide-down{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.error-container:not(.hidden){animation:error-slide-down 0.3s ease-out}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.line-loading{animation:pulse 1.5s ease-in-out infinite}@keyframes button-press{0%{transform:scale(1)}50%{transform:scale(0.95)}100%{transform:scale(1)}}.copy-line-btn:active,.retry-line-btn:active,.toast-action:active{animation:button-press 0.1s ease-in-out}@keyframes success-flash{0%{background-color:inherit}50%{background-color:#dcfce7}100%{background-color:inherit}}.copy-line-btn.success{animation:success-flash 0.5s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.translation-error{animation:shake 0.5s ease-in-out}.hidden{display:none !important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:480px){.container{padding:0.75rem}.header h1{font-size:1.75rem}.subtitle{font-size:0.9rem}.main-content{gap:1.5rem}.input-section,.language-section,.results-section{padding:1rem;border-radius:8px}.lyrics-textarea{min-height:120px;padding:0.75rem;font-size:16px}.language-controls{grid-template-columns:1fr;gap:1rem;text-align:center}.language-arrow{transform:rotate(90deg);font-size:1.2rem;margin:0.5rem 0}.translate-btn{padding:0.875rem 1.5rem;font-size:1rem;min-height:48px}.results-header{flex-direction:column;align-items:stretch;gap:0.75rem}.results-actions{justify-content:center}.action-btn{flex:1;max-width:120px}.translation-header{flex-direction:column;gap:0.75rem;text-align:center;padding:0.75rem}.cache-info{align-items:center}.translation-line{grid-template-columns:1fr;gap:0.5rem;padding:0.75rem 0}.line-content{grid-template-columns:1fr;gap:0.75rem}.line-number{align-self:flex-start;margin-top:0;margin-bottom:0.5rem}.original-line,.translated-line{padding:0.625rem;font-size:0.95rem}.copy-line-btn,.retry-line-btn{min-width:40px;min-height:40px;font-size:1rem}.explanations-header{flex-direction:column;align-items:stretch;gap:0.75rem}.explanations-controls{justify-content:center}.error-container{left:0.5rem;right:0.5rem;top:0.5rem}.toast-container{left:0.5rem;right:0.5rem;bottom:0.5rem}}@media (min-width:768px){.container{padding:2rem}.header h1{font-size:2.5rem}.language-controls{grid-template-columns:2fr auto 2fr;gap:2rem}.language-arrow{font-size:2rem;transform:none}.results-header{flex-wrap:nowrap}.error-container{left:2rem;right:2rem;max-width:600px;margin:0 auto}.toast-container{left:2rem;right:2rem;max-width:400px;margin:0 auto}.translation-line{grid-template-columns:auto 1fr}.line-content{grid-template-columns:1fr 1fr;gap:1.5rem}}@media (min-width:1024px){.main-content{gap:2.5rem}.input-section,.language-section,.results-section{padding:2rem}.lyrics-textarea{min-height:200px;font-size:1rem}.language-controls{gap:3rem}.translation-content{}input,textarea,select{font-size:1rem}button,select,input[type="text"]{min-height:auto;min-width:auto}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.loading-spinner{border-width:2px}}@media (max-width:768px){.toast,.error-container,.loading-indicator{transform:translateZ(0);-webkit-transform:translateZ(0)}.translation-content,.language-select{-webkit-overflow-scrolling:touch;overflow-scrolling:touch}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}@media (prefers-color-scheme:dark){body{background-color:#1f2937;color:#f9fafb}.input-section,.language-section,.results-section{background:#374151;border:1px solid #4b5563}.lyrics-textarea,.language-search,.language-select{background:#4b5563;border-color:#6b7280;color:#f9fafb}.lyrics-textarea::placeholder,.language-search::placeholder{color:#9ca3af}.detected-language{background:#4b5563;color:#f9fafb}.translate-btn{background:#3b82f6}.translate-btn:hover:not(:disabled){background:#2563eb}}}.translation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-radius:12px;box-shadow:0 4px 12px rgba(102,126,234,0.3)}.language-info{display:flex;align-items:center;gap:0.75rem;font-weight:600;font-size:1.1rem}.arrow{font-size:1.2rem;opacity:0.8}.cache-info{display:flex;flex-direction:column;align-items:flex-end;gap:0.25rem;font-size:0.875rem}.cache-hit{background:rgba(34,197,94,0.2);color:#dcfce7;padding:0.25rem 0.5rem;border-radius:6px;font-weight:500}.fresh-translation{background:rgba(59,130,246,0.2);color:#dbeafe;padding:0.25rem 0.5rem;border-radius:6px;font-weight:500}.confidence{opacity:0.8;font-size:0.75rem}.translation-content{background:transparent;border-radius:12px;padding:1.5rem;box-shadow:none;border:none}.translation-line{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid #f3f4f6;position:relative}.translation-line:last-child{border-bottom:none}.translation-line.translation-error{background:#fef2f2;border-left:4px solid #ef4444;padding-left:1rem;margin-left:-1rem;border-radius:8px}.line-number{display:flex;align-items:flex-start;justify-content:center;min-width:2rem;height:2rem;background:#f3f4f6;color:#6b7280;border-radius:50%;font-size:0.875rem;font-weight:600;margin-top:0.5rem}.line-content{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;width:100%}.original-line{font-size:1rem;line-height:1.6;color:#374151;padding:0.75rem;background:#f9fafb;border-radius:8px;border-left:4px solid #6b7280;position:relative}.translated-line{font-size:1rem;line-height:1.6;color:#1f2937;padding:0.75rem;background:#f0f9ff;border-radius:8px;border-left:4px solid #3b82f6;font-weight:500;position:relative}.copy-line-btn,.retry-line-btn{position:absolute;top:0.5rem;right:0.5rem;background:rgba(255,255,255,0.9);border:1px solid #d1d5db;border-radius:4px;padding:0.25rem 0.5rem;font-size:0.75rem;cursor:pointer;opacity:0;transition:all 0.2s ease;backdrop-filter:blur(4px);min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.original-line:hover .copy-line-btn,.translated-line:hover .copy-line-btn,.translated-line:hover .retry-line-btn{opacity:1}.copy-line-btn:hover,.retry-line-btn:hover{background:white;border-color:#9ca3af;transform:scale(1.05)}.retry-line-btn{background:rgba(239,68,68,0.1);border-color:#ef4444;color:#dc2626}.retry-line-btn:hover{background:rgba(239,68,68,0.2)}.error-indicator{color:#dc2626;font-weight:600;display:flex;align-items:center;gap:0.5rem}.line-loading{color:#d97706;font-weight:500;display:flex;align-items:center;gap:0.5rem}.line-loading::after{content:'';display:inline-block;width:12px;height:12px;border:2px solid #d97706;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}.explanations-section{margin-top:2rem;padding:1.5rem;background:transparent;border-radius:12px;border:none}.explanations-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.explanations-header h3{color:#000000;font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;margin:0}.section-icon{font-size:1.2rem}.explanation-count{color:#d97706;font-size:0.9rem;font-weight:500}.explanations-controls{display:flex;gap:0.5rem}.toggle-all-btn,.hide-explanations-btn{padding:0.5rem 1rem;background:#f59e0b;color:white;border:none;border-radius:6px;font-size:0.875rem;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;gap:0.5rem;min-height:36px}.toggle-all-btn:hover,.hide-explanations-btn:hover{background:#d97706;transform:translateY(-1px)}.hide-explanations-btn{background:#6b7280}.hide-explanations-btn:hover{background:#4b5563}.explanation{margin-bottom:1rem;background:rgba(74,28,92,0.9);border-radius:12px;border:2px solid #f0d982;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.3);backdrop-filter:blur(10px)}.explanation:last-child{margin-bottom:0}.explanation-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:transparent;cursor:pointer;transition:background-color 0.2s ease;border-bottom:1px solid rgba(240,217,130,0.3)}.explanation-header:hover{background:rgba(240,217,130,0.1)}.explanation-phrase{display:flex;align-items:center;gap:0.5rem;flex:1}.phrase-icon{font-size:1.1rem}.explanation-phrase strong{color:#f0d982;font-weight:600;margin:0;text-shadow:1px 1px 2px rgba(0,0,0,0.3)}.line-reference{background:#d97706;color:white;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;font-weight:500;margin-left:0.5rem}.explanation-toggle{background:none;border:none;color:#92400e;cursor:pointer;padding:0.25rem;border-radius:4px;transition:all 0.2s ease;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.explanation-toggle:hover{background:rgba(146,64,14,0.1);transform:scale(1.1)}.toggle-icon{font-size:0.875rem;transition:transform 0.2s ease}.explanation-content{padding:1rem;border-top:1px solid rgba(240,217,130,0.3);background:transparent}.explanation-content p{color:#f0d982;line-height:1.6;margin:0 0 1rem 0}.explanation-content p:last-child{margin-bottom:0}.cultural-context{display:flex;align-items:center;gap:0.5rem;padding:0.75rem;background:transparent;border-radius:6px;border-left:3px solid #f0d982;margin-top:1rem}.context-icon{font-size:1rem;color:#f0d982}.cultural-context span:last-child{color:#f0d982;font-weight:500}.partial-match-info{margin-top:1rem;padding:1rem;background:#f0f9ff;border-radius:8px;border:1px solid #bae6fd;color:#0c4a6e;font-size:0.875rem}@media (max-width:768px){.translation-header{flex-direction:column;gap:1rem;text-align:center}.cache-info{align-items:center}.translation-line{grid-template-columns:1fr;gap:0.5rem}.line-content{grid-template-columns:1fr;gap:1rem}.line-number{align-self:flex-start;margin-top:0}.language-info{justify-content:center}.copy-line-btn,.retry-line-btn{opacity:1;position:static;margin-top:0.5rem;margin-left:auto;display:inline-flex}.original-line,.translated-line{padding-right:0.75rem;display:flex;flex-direction:column}.explanations-header{flex-direction:column;align-items:stretch;gap:1rem}.explanations-header h3{text-align:center}.explanations-controls{justify-content:center}.explanation-phrase{flex-wrap:wrap}.line-reference{margin-left:0;margin-top:0.25rem}}.translation-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#6b7280}.translation-loading .spinner{width:2rem;height:2rem;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.translation-error{padding:1.5rem;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;text-align:center}.translation-error .error-icon{font-size:2rem;margin-bottom:0.5rem}.selected-language-display{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:#dcfce7;border:2px solid #4ade80;border-radius:6px;font-weight:500;color:#16a34a;cursor:pointer;transition:all 0.2s ease;min-height:44px}.selected-language-display:hover{background:#bbf7d0;border-color:#22c55e;transform:translateY(-1px)}.manual-select-btn.selected{background:#10b981 !important;color:white !important;border-color:#059669}.manual-select-btn.selected:hover{background:#059669 !important;transform:translateY(-1px)}.searchable-select-container{transition:all 0.3s ease}.searchable-select-container.collapsing{opacity:0;transform:translateY(-10px)}.searchable-select-container.expanding{opacity:1;transform:translateY(0)}.toast.toast-language-selection{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}@media (max-width:768px){.selected-language-display{padding:1rem;font-size:0.95rem}.manual-select-btn{min-width:100px;text-align:center}}