body{font-family:sans-serif;margin:0;padding:0;background-color:#e0e5ec;position:relative}body::before{content:"";position:fixed;top:-20px;left:-20px;right:-20px;bottom:-20px;background-image:url(../img/background.jpg);background-size:cover;background-position:center;filter:blur(15px);opacity:.5;z-index:-1}.app-wrapper{max-width:700px;margin:0 auto;padding:20px;background-color:#f9f9f9;min-height:100vh;box-shadow:0 0 30px rgba(0,0,0,.15);position:relative}.hub-back-header{display:flex;align-items:center;justify-content:center;gap:15px;text-decoration:none;margin-bottom:25px;padding:15px;background:#fff;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s}.hub-back-header:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.1)}.hub-logo{width:40px;height:40px;border-radius:8px}.hub-back-header h1{margin:0;font-size:22px;color:#2c3e50;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.header-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header-container h2{margin:0}.lang-switch select{font-family:'Noto Color Emoji',sans-serif;background:#fff;border:1px solid #ccc;padding:8px 16px;border-radius:25px;font-size:16px;cursor:pointer;outline:0;box-shadow:0 1px 3px rgba(0,0,0,.1);width:auto}.input-group{display:flex;align-items:center;margin-bottom:15px;background:#fff;padding:10px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)}.icon{font-size:24px;margin-right:12px;min-width:35px;text-align:center;cursor:default;line-height:1}select{display:block;width:100%;border:none;font-size:16px;cursor:pointer;background:0 0}select:focus{outline:0}.tabs-container{margin-top:20px;background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);overflow:hidden}.tabs-header{display:flex;border-bottom:1px solid #eee}.tab-btn{flex:1;padding:15px;border:none;background:#f1f1f1;font-size:16px;font-weight:700;color:#7f8c8d;cursor:pointer;transition:background .2s}.tab-btn:hover{background:#e8e8e8}.tab-btn.active{background:#fff;color:#2c3e50;border-bottom:3px solid #3498db}.hidden{display:none}#sentencesList{padding-bottom:10px}.sentence-item{padding:15px 20px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background .2s}.sentence-item:last-child{border-bottom:none}.sentence-item:hover{background-color:#fcfcfc}.sentence-item.playing{background-color:#e3f2fd;border-left:5px solid #3498db;padding-left:15px}.text-de{font-size:18px;color:#2c3e50;margin-bottom:5px;line-height:1.4}.text-ru{font-size:14px;color:#7f8c8d}.footer{margin-top:40px;text-align:center;padding-bottom:20px}.divider{height:1px;background-color:#e0e0e0;margin-bottom:20px;width:100%}.footer p{color:#95a5a6;font-size:14px;margin:0}.contact-link{color:#7f8c8d;text-decoration:none;transition:color .2s;font-weight:700}.contact-link:hover{color:#3498db;text-decoration:underline}.exercise-card{text-align:center;padding-top:20px;min-height:180px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;transition:transform .1s,background-color .3s;border-radius:12px}.recording-mode{background-color:#fff9c4;box-shadow:0 0 10px rgba(241,196,15,.5)}.ex-user-text{font-size:16px;margin-top:10px;min-height:24px;font-weight:400;transition:color .3s}.match-success{color:#27ae60}.match-fail{color:#c0392b}.mic-active{color:#e74c3c!important;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.exercise-card:active{transform:scale(.98)}.ex-row{margin-bottom:15px;padding:0 10px}.ex-context{font-size:14px;color:#95a5a6;font-style:italic;min-height:20px}.invisible{visibility:hidden}.ex-task{font-size:18px;color:#2c3e50;font-weight:700}.ex-answer{font-size:20px;color:#3498db;font-weight:700;min-height:28px}.ex-controls{display:flex;justify-content:center;gap:20px;align-items:center}.control-btn{width:60px;height:60px;border-radius:50%;border:none;background-color:transparent;font-size:32px;color:#bdc3c7;cursor:pointer;transition:color .2s,transform .1s,background-color .2s;display:flex;align-items:center;justify-content:center;padding:0}.control-btn:hover:not(:disabled){color:#7f8c8d;background-color:#f7f9f9}.control-btn:active:not(:disabled){transform:scale(.9)}.control-btn:disabled{color:#ecf0f1;cursor:default}#btnSpeak{color:#1abc9c;font-size:36px}#btnSpeak:hover{color:#16a085;background-color:transparent}#btnNext:not(:disabled),#btnPrev:not(:disabled){color:#3498db}#btnNext:not(:disabled):hover,#btnPrev:not(:disabled):hover{color:#2980b9;background-color:transparent}#btnMic{font-size:28px}.progress-container{width:90%;max-width:400px;height:6px;background-color:#ecf0f1;border-radius:3px;margin:20px auto;overflow:hidden}.progress-fill{height:100%;width:0%;background-color:#3498db;transition:width .3s ease;border-radius:3px}.btn-loading{color:#f1c40f!important;transform:scale(1.1);text-shadow:0 0 10px rgba(241,196,15,.4);cursor:wait}.btn-speaking{color:#2ecc71!important;transform:scale(1.1);text-shadow:0 0 10px rgba(46,204,113,.4)}.theory-container{padding:15px 20px;line-height:1.6;color:#2c3e50;font-size:16px}.theory-container h1{font-size:22px;color:#2980b9;margin-top:0;margin-bottom:15px}.theory-container h2{font-size:18px;color:#34495e;margin-top:25px;border-bottom:2px solid #ecf0f1;padding-bottom:5px}.theory-container h3{font-size:16px;color:#e67e22;margin-top:20px}.theory-container p{margin-bottom:15px}.theory-container ul{padding-left:20px;margin-bottom:15px}.theory-container li{margin-bottom:8px}.playable-word{color:#3498db;font-weight:700;cursor:pointer;background-color:#f1f8ff;padding:2px 6px;border-radius:4px;transition:background-color .2s,color .2s;white-space:nowrap}.playable-word b,.playable-word strong{color:#e74c3c}.playable-word:hover{background-color:#d6eaf8}.playable-word.playing{background-color:#3498db;color:#fff;box-shadow:0 0 5px rgba(52,152,219,.5)}.playable-word.playing b,.playable-word.playing strong{color:#f1c40f}.text-ru{font-size:14px;color:#7f8c8d;transition:color .3s,opacity .3s}.text-ru.hidden-translation{color:#bdc3c7;letter-spacing:3px;font-weight:700}.text-ru.revealed{color:#7f8c8d;letter-spacing:normal;font-weight:400}.sentence-item{user-select:none;-webkit-user-select:none}.next-tab-btn,.scroll-top-btn{position:fixed;right:30px;width:50px;height:50px;background-color:rgba(52,152,219,.6);color:#fff;border:none;border-radius:50%;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;padding:0;line-height:normal;box-shadow:0 4px 10px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .3s,background-color .2s}.scroll-top-btn{bottom:100px;transform:translateY(20px)}.next-tab-btn{bottom:30px;transform:translateY(20px)}.next-tab-btn.visible,.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}@media (hover:hover){.next-tab-btn:hover,.scroll-top-btn:hover{background-color:rgba(52,152,219,1)}}.next-tab-btn:active,.scroll-top-btn:active{background-color:rgba(52,152,219,1);transform:scale(.92)!important}.tab-hint{display:flex;align-items:center;justify-content:flex-start;gap:10px;background-color:#f0f8ff;border-left:4px solid #3498db;border-radius:4px 8px 8px 4px;padding:12px 15px;margin:15px 0 20px 0;font-size:13px;color:#5d6d7e;line-height:1.4;box-shadow:0 1px 3px rgba(0,0,0,.05);user-select:none;-webkit-user-select:none}.tab-hint::before{content:"💡";font-size:16px}