.phrase-player-app{font-family:Segoe UI,Arial,sans-serif}.modal{background:#fff;border-radius:10px;padding:28px 24px 20px;min-width:320px;box-shadow:0 2px 12px #0000002e;text-align:center}.ui-lang-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:10px}.ui-lang-dropdown{padding:6px 14px;border-radius:6px;border:1px solid #bbb;font-size:1em;background:#f8f9fa;color:#222;transition:border .18s,box-shadow .18s}.ui-lang-dropdown:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #cce4ff}.phrase-player-container{max-width:400px;margin:1px auto;padding:24px;border-radius:16px;background:#f8f9fa;box-shadow:0 2px 8px #00000012;text-align:center}.phrase-box{margin-bottom:24px;padding:18px;background:#fff;border-radius:10px;box-shadow:0 1px 4px #0000000a}.target-language{margin:8px 0;font-size:1.15em;color:#1a1a1a}.source-language{margin:8px 0 16px;font-size:1em;color:#4a4a4a;font-style:italic}.difficulty-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.85em;font-weight:600;margin-bottom:12px;color:#fff;text-align:center}.difficulty-1{background-color:#4ade80}.difficulty-2{background-color:#60a5fa}.difficulty-3{background-color:#facc15;color:#333}.difficulty-4{background-color:#fb923c}.difficulty-5{background-color:#f87171}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}.speaker-info{margin:10px 0;font-size:.9em;color:#666;text-align:center;font-style:italic;padding:4px 8px;border-radius:4px;background-color:#f5f5f5;display:inline-block}.controls button{font-size:1em;padding:8px 16px;border-radius:6px;border:1px solid #ddd;background:#f8f9fa;color:#333;cursor:pointer;transition:background .18s,color .18s,border .18s}.controls button.playing-audio{background:#34c759;color:#fff;border-color:#259b42}.controls button.playing-audio:disabled{background:#34c759;color:#fff;border-color:#259b42;opacity:.85;cursor:not-allowed}.controls button.play-recording{background:#4644ac;color:#fff;border-color:#4644ac}.controls button.play-recording:hover{background:#4644ac}.controls button.recording{background:#ffefef;color:#ff3b30;border-color:#ff3b30;animation:pulse 1s infinite}.controls button:hover:not(:disabled),.controls button:focus:not(:disabled){background:#e6f0fd;color:#007bff;border-color:#007bff}.takes-list{margin-top:16px}.takes-title{font-weight:600;margin-bottom:10px}.takes-list ul{list-style:none;padding:0;margin:0 0 8px}.takes-list li{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #eee;border-radius:6px;transition:background .18s}.takes-list li.selected{background:#e9f7ef}.takes-list li.submitted{background:#f6e9f7}.take-label{flex:1 1 auto;text-align:left;font-size:.97em}.selected-btn{font-weight:700;color:#0a7;border:1px solid #0a7;background:#f6fff8;transition:background .18s,color .18s}.selected-btn.selected-btn{background:#e9f7ef;color:#0a7}.selected-btn:disabled{opacity:.7;cursor:not-allowed}.submitted-label{color:#a07;margin-left:10px;font-weight:700}.submit-btn-container{margin-top:12px}.submit-btn{background:#0a7;color:#fff;padding:8px 18px;border:none;border-radius:6px;font-size:1em;cursor:pointer;transition:background .18s;margin-top:4px}.submit-btn:disabled{background:#ccc;color:#888;cursor:not-allowed}.button-group{display:flex;justify-content:center;gap:15px;margin-top:30px}.next-btn{background:#007bff;color:#fff;padding:10px 24px;border:none;border-radius:6px;font-size:1.1em;cursor:pointer;transition:background .18s}.skip-btn{background:#f0ad4e;color:#fff;padding:10px 24px;border:none;border-radius:6px;font-size:1.1em;cursor:pointer;transition:background .18s}.skip-btn:hover:not(:disabled),.skip-btn:focus:not(:disabled){background:#ec971f}.next-btn:hover:not(:disabled),.next-btn:focus:not(:disabled){background:#0056b3}.next-btn:disabled{background:#bbb;color:#eee;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999!important;pointer-events:all}.modal{background:#fff;border-radius:10px;padding:28px 24px 20px;min-width:320px;box-shadow:0 2px 12px #0000002e;text-align:center;z-index:10000}.spinner{display:inline-block;animation:spinner-rotate 1s linear infinite}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal{background:#fff;border-radius:10px;padding:28px 24px 20px;min-width:320px;box-shadow:0 2px 12px #0000002e;text-align:center;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.modal-actions{display:flex;gap:16px;margin-top:18px;justify-content:center}.modal-actions button{background:#007bff;color:#fff;font-size:1em;border:none;border-radius:6px;padding:8px 18px;cursor:pointer;transition:background .18s}.modal-actions button:hover:not(:disabled),.modal-actions button:focus:not(:disabled){background:#0056b3}.modal-warning{color:#c00;margin-top:12px;font-size:.98em}.selected-warning{color:#b85c00;margin-top:10px;font-size:1em;font-style:italic}.recording-indicator{margin-top:12px;color:#ff3b30;font-weight:700}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.completion-status{margin:30px auto 20px;text-align:center;position:relative;width:120px;height:120px;clear:both}.progress-ring{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.progress-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring-circle{fill:transparent;stroke-width:8;stroke-linecap:round;transform-origin:center;transition:stroke-dashoffset .5s ease}.progress-ring-circle.bg{stroke:#e6e6e6}.progress-ring-circle.progress{stroke:#4caf50}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;font-weight:700;color:#333}.completion-badge{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:#28a745;color:#fff;padding:5px 10px;border-radius:15px;font-weight:700;animation:pulse 1.5s infinite;white-space:nowrap}.show-results-container{margin-top:20px;text-align:center}.show-results-btn{display:inline-block;background-color:#007bff;color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;font-weight:700;transition:background-color .3s ease}.show-results-btn:hover{background-color:#0056b3;text-decoration:none;color:#fff}@keyframes badge-pop{0%{transform:translate(-50%) scale(0)}70%{transform:translate(-50%) scale(1.1)}to{transform:translate(-50%) scale(1)}}.phrases-count{margin-top:5px;font-size:.9rem;color:#666}