body{font-family:Inter,sans-serif;display:flex;align-items:center;min-height:100vh;background:radial-gradient(circle at top left,#1e3a8a,#0f172a);margin:0;flex-direction:column;color:#f8fafc;overflow-x:hidden;padding-top:100px;box-sizing:border-box}button{touch-action:manipulation}.main-header{width:100%;height:70px;background:#0f172ad9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;justify-content:space-between;align-items:center;padding:0 40px;position:fixed;top:0;left:0;z-index:1000;border-bottom:1px solid rgba(255,255,255,.1);box-sizing:border-box}.logo{font-size:22px;font-weight:900;background:linear-gradient(to right,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-menu{display:flex;gap:10px}.nav-item{position:relative;padding-bottom:15px;margin-bottom:-15px}.nav-link{background:none;border:none;color:#cbd5e1;font-size:14px;font-weight:600;padding:10px 15px;cursor:pointer;transition:.3s;border-radius:10px}.nav-link:hover,.nav-link.active{color:#38bdf8;background:#ffffff0d}.dropdown-content{display:none;position:absolute;top:100%;left:0;background:#1e293b;min-width:200px;border-radius:12px;box-shadow:0 10px 25px #00000080;border:1px solid rgba(255,255,255,.1);padding:8px;z-index:1001}.dropdown-content:before{content:"";position:absolute;top:-15px;left:0;width:100%;height:15px}.dropdown:hover .dropdown-content{display:block}.dropdown-content button{display:block;width:100%;text-align:left;background:none;border:none;color:#cbd5e1;padding:12px 15px;font-size:14px;cursor:pointer;border-radius:8px;transition:.2s}.dropdown-content button:hover,.dropdown-content button.active{background:#38bdf826;color:#38bdf8}.burger-menu{display:none;flex-direction:column;justify-content:space-between;width:30px;height:21px;background:none;border:none;cursor:pointer;z-index:1100}.burger-menu span{display:block;width:100%;height:3px;background-color:#38bdf8;border-radius:10px;transition:.3s}.burger-menu.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}.burger-menu.open span:nth-child(2){opacity:0}.burger-menu.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}#app-viewport{width:100%;display:flex;flex-direction:column;align-items:center;padding:20px;box-sizing:border-box;flex:1}.page-title{font-size:28px;font-weight:800;margin-bottom:30px;background:linear-gradient(to right,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.view-section{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.card-container{width:100%;max-width:360px;height:380px;perspective:2000px;margin-bottom:30px}.card{width:100%;height:100%;position:relative;transition:transform .6s cubic-bezier(.34,1.56,.64,1);transform-style:preserve-3d}.card.flipped{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border-radius:10px;padding:40px 25px 25px;box-sizing:border-box;background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #0006}.card-front:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;border-radius:24px 24px 0 0;background:#38bdf8}.card-back:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;border-radius:24px 24px 0 0;background:#fbbf24}.card-back{transform:rotateY(180deg);font-size:26px;font-weight:600;text-align:center;justify-content:center}.fav-btn{position:absolute;top:20px;right:20px;background:none;border:none;color:#fff3;font-size:24px;cursor:pointer;transition:.3s}.fav-btn.active{color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.5);transform:scale(1.2)}.word-text{font-size:34px;font-weight:800;text-align:center}.word-transc{font-size:18px;color:#94a3b8;margin-top:5px}.example-btn{background:#38bdf81a;border:1px solid #38bdf8;color:#38bdf8;padding:8px 20px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;text-transform:uppercase}.example-text{font-size:15px;color:#cbd5e1;font-style:italic;text-align:center;line-height:1.4;margin:10px 0;min-height:50px;display:flex;align-items:center}.speak-btn{background:#38bdf8;border:none;border-radius:50%;width:56px;height:56px;cursor:pointer;font-size:22px;display:flex;justify-content:center;align-items:center;box-shadow:0 8px 15px #38bdf84d}.buttons{display:flex;gap:15px}.buttons button{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:14px 28px;border-radius:16px;color:#fff;font-weight:600;cursor:pointer;transition:.3s}.buttons button:disabled{opacity:.2}.saved-section{width:100%;max-width:850px;background:#ffffff08;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:30px;border:1px solid rgba(255,255,255,.08)}table{width:100%;border-collapse:collapse}th{text-align:left;padding:15px;color:#38bdf8;border-bottom:1px solid rgba(56,189,248,.2);font-size:13px;text-transform:uppercase}td{padding:15px;border-bottom:1px solid rgba(255,255,255,.05)}.delete-cell-btn{background:#ef444426;border:1px solid #ef4444;color:#ef4444;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:12px}.quiz-container{background:#ffffff0d;padding:30px;border-radius:24px;width:100%;max-width:400px;text-align:center}.options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.option-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.1);padding:15px;border-radius:12px;color:#fff;cursor:pointer;transition:.2s}.option-btn.correct{background:#22c55e!important}.option-btn.wrong{background:#ef4444!important}.theory-block{width:100%;max-width:500px;margin-bottom:20px;animation:fadeIn .3s ease-in-out}.theory-card{background:#ffffff0d;padding:15px 20px;border-radius:16px;border:1px solid rgba(56,189,248,.2);font-size:14px}.theory-table{width:100%;border-collapse:collapse;margin:10px 0}.theory-table th{text-align:left;font-size:12px;color:#94a3b8;text-transform:uppercase}.theory-table td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.theory-notes{margin-top:10px;font-size:12px;color:#cbd5e1;text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}.feedback{margin-top:15px;font-size:16px;min-height:24px}.feedback span{color:#94a3b8;display:block;font-size:14px}.quiz-results-header{text-align:center;margin-bottom:20px}.quiz-score{font-size:56px;font-weight:900;background:linear-gradient(to right,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}.quiz-score-label{font-size:15px;color:#94a3b8;margin-top:6px}.quiz-perfect{text-align:center;font-size:18px;color:#22c55e;margin:20px 0}.quiz-mistakes-title{font-size:13px;font-weight:700;text-transform:uppercase;color:#94a3b8;letter-spacing:.05em;margin-bottom:12px}.quiz-mistakes-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto}.quiz-mistake-item{background:#ef444412;border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:12px 14px;text-align:left}.quiz-mistake-q{font-size:14px;color:#f1f5f9;margin-bottom:6px}.quiz-mistake-row{display:flex;gap:12px;font-size:13px;font-weight:600}.quiz-mistake-wrong{color:#ef4444}.quiz-mistake-correct{color:#22c55e}.quiz-mistake-rule{margin-top:6px;font-size:12px;color:#64748b}.quiz-retry-btn{width:100%;padding:14px;border-radius:14px;border:1px solid rgba(56,189,248,.3);background:#38bdf81a;color:#38bdf8;font-size:15px;font-weight:700;cursor:pointer;transition:.2s}.quiz-retry-btn:hover{background:#38bdf833}.study-mode-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 20px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:16px}.study-mode-label{font-size:13px;color:#94a3b8;font-weight:600;white-space:nowrap}.study-count-btns{display:flex;gap:6px;flex-wrap:wrap}.study-count-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#cbd5e1;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}.study-count-btn.active{background:#38bdf833;border-color:#38bdf8;color:#38bdf8}.study-count-btn.disabled{opacity:.3;cursor:not-allowed}.study-start-btn{background:#38bdf8;border:none;color:#0f172a;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;margin-left:auto}.study-start-btn:disabled{opacity:.3;cursor:not-allowed}.dict-empty{text-align:center;color:#64748b;padding:40px 0;font-size:15px}.media-series-block{width:100%;max-width:600px;margin-bottom:30px}.media-series-header{background:#ffffff0a;border:1px solid rgba(56,189,248,.2);border-radius:16px;padding:20px 24px;margin-bottom:12px}.media-level-badge{display:inline-block;background:#38bdf826;color:#38bdf8;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.05em;margin-bottom:8px}.media-series-title{font-size:22px;font-weight:800;margin:0 0 6px}.media-series-desc{font-size:14px;color:#94a3b8;margin:0}.media-episodes-list{display:flex;flex-direction:column;gap:8px}.media-ep-card{display:flex;align-items:center;gap:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 18px;cursor:pointer;transition:.2s;text-align:left;color:#f1f5f9;width:100%}.media-ep-card:hover{background:#38bdf814;border-color:#38bdf84d}.media-ep-num{font-size:11px;font-weight:700;color:#38bdf8;background:#38bdf81f;padding:3px 9px;border-radius:20px;white-space:nowrap}.media-ep-title{flex:1;font-size:15px;font-weight:600}.media-ep-arrow{color:#475569;font-size:12px}.episode-view{width:100%;max-width:680px;align-items:stretch}.episode-tabs{display:flex;gap:8px;margin-bottom:20px}.episode-tab-btn{flex:1;padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#94a3b8;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}.episode-tab-btn.active{background:#38bdf826;border-color:#38bdf8;color:#38bdf8}.episode-hint{font-size:13px;color:#64748b;margin-bottom:16px;text-align:center}.episode-dialogue{background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:10px}.dialogue-line{display:flex;gap:10px;align-items:baseline;line-height:1.6}.dialogue-speaker{font-size:11px;font-weight:700;color:#38bdf8;text-transform:uppercase;letter-spacing:.05em;min-width:100px;flex-shrink:0}.dialogue-text{font-size:15px;color:#e2e8f0}.dialogue-stage{font-size:13px;color:#475569;font-style:italic;text-align:center;padding:4px 0}.dialogue-commentary{display:flex;gap:10px;align-items:baseline;background:#38bdf80d;border-left:3px solid #38bdf8;padding:10px 14px;border-radius:0 8px 8px 0;font-size:14px;color:#94a3b8;font-style:italic}.vocab-word{position:relative;cursor:pointer;border-bottom:2px dotted rgba(56,189,248,.6);color:#bae6fd;display:inline}.vocab-word.is-saved{border-bottom-color:#22c55e99;color:#86efac}.vocab-word-demo{border-bottom:2px dotted rgba(56,189,248,.6);color:#bae6fd}.vocab-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:#1e293b;border:1px solid rgba(56,189,248,.35);border-radius:10px;padding:8px 12px;white-space:nowrap;z-index:100;display:flex;align-items:center;gap:8px;box-shadow:0 8px 20px #00000080;pointer-events:all}.vocab-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#38bdf859}.vocab-tooltip-text{font-size:13px;color:#f1f5f9;font-weight:600}.vocab-add-btn{background:#38bdf833;border:1px solid #38bdf8;color:#38bdf8;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.2s}.vocab-add-btn:hover{background:#38bdf859}.vocab-in-dict{font-size:12px;color:#22c55e;font-weight:600}@media (max-width: 600px){.dialogue-line{flex-direction:column;gap:2px}.dialogue-speaker{min-width:unset}.episode-dialogue{padding:14px 16px}.vocab-tooltip{white-space:normal;min-width:160px;max-width:240px}.study-mode-bar{flex-direction:column;align-items:flex-start}.study-start-btn{margin-left:0;width:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 850px){.burger-menu{display:flex}.nav-menu{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:#0f172a;flex-direction:column;padding:100px 20px 20px;transition:.4s;border-left:1px solid rgba(255,255,255,.1);gap:20px;z-index:1050}.nav-menu.open{right:0}.nav-item{width:100%;margin:0;padding:0}.dropdown-content{position:static;display:none;width:100%;background:#ffffff0d;box-shadow:none;border:none;margin-top:10px}.nav-item.active-mobile .dropdown-content{display:block}.nav-link{width:100%;font-size:18px;text-align:left}}@media (max-width: 600px){.card-container{max-width:320px;height:360px}.theory-table.mobile-optim,.theory-table.mobile-optim thead,.theory-table.mobile-optim tbody,.theory-table.mobile-optim th,.theory-table.mobile-optim td,.theory-table.mobile-optim tr{display:block}.theory-table.mobile-optim thead tr{position:absolute;top:-9999px;left:-9999px}.theory-table.mobile-optim tr{margin-bottom:10px;background:#ffffff05;border:1px solid rgba(56,189,248,.1);border-radius:12px;padding:5px}.theory-table.mobile-optim td{border:none;position:relative;padding:8px 10px 8px 45%!important;text-align:right;min-height:32px;display:flex;justify-content:flex-end;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}.theory-table.mobile-optim td:last-child{border-bottom:none}.theory-table.mobile-optim td:before{content:attr(data-label);position:absolute;left:10px;font-weight:700;color:#38bdf8;font-size:11px;text-transform:uppercase;width:40%;text-align:left}.options-grid{grid-template-columns:1fr}table:not(.mobile-optim),thead:not(.mobile-optim),tbody:not(.mobile-optim),th:not(.mobile-optim),td:not(.mobile-optim),tr:not(.mobile-optim){display:block}table:not(.mobile-optim) thead tr{position:absolute;top:-9999px;left:-9999px}table:not(.mobile-optim) tr{margin-bottom:15px;background:#ffffff08;border-radius:15px;padding:10px}table:not(.mobile-optim) td{border:none;position:relative;padding-left:45%;text-align:right;min-height:40px}table:not(.mobile-optim) td:before{content:attr(data-label);position:absolute;left:15px;font-weight:700;color:#38bdf8}}