.voice-recorder{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.audio-meter{width:100%;max-width:300px;height:8px;background:#1a1a2e;border-radius:4px;overflow:hidden;border:1px solid #333}.audio-level{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e 50%,#fbbf24 80%,#e94560);transition:width .03s ease-out;border-radius:4px}.audio-level.speaking{background:linear-gradient(90deg,#4ade80,#22c55e,#e94560);box-shadow:0 0 10px #4ade8080}.mode-indicator{font-size:.85rem;color:#888;min-height:20px;text-align:center}.vad-status{display:flex;align-items:center;gap:8px}.voice-detected{color:#4ade80;font-weight:700;animation:pulse .5s infinite}.record-button,.record-btn{padding:16px 32px;border:2px solid #e94560;border-radius:50px;background:#16213e;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;min-width:200px;user-select:none;-webkit-user-select:none;touch-action:manipulation}.record-button:hover:not(:active),.record-btn:hover{background:#e9456033;transform:scale(1.02)}.record-button.recording,.record-btn.recording{background:#e94560}.record-button.recording.speaking,.record-btn.speaking{background:linear-gradient(135deg,#e94560,#4ade80);box-shadow:0 0 30px #4ade8099;transform:scale(1.05);transition:all .3s ease-out}.record-button,.record-btn{transition:all .3s ease-out}@keyframes recording-pulse{0%,to{box-shadow:0 0 #e94560b3}50%{box-shadow:0 0 0 15px #e9456000}}.record-button:active{transform:scale(.98)}.instructions{color:#666;font-size:.8rem;text-align:center;margin-bottom:16px}.instructions small{display:block}.mode-toggle{display:flex;gap:8px;background:#16213e;padding:4px;border-radius:8px;border:1px solid #333}.mode-toggle button{padding:8px 16px;border:none;border-radius:6px;background:transparent;color:#888;font-size:.85rem;cursor:pointer;transition:all .2s}.record-btn.disabled{opacity:.5;cursor:not-allowed;background:#333}.record-btn.disabled:hover{background:#333;transform:none}@media (max-width: 480px){.voice-recorder{padding:12px;gap:12px}.record-btn{width:60px;height:60px}.record-btn:before{width:24px;height:24px}.recording .record-btn:before{width:20px;height:20px;border-radius:4px}.status{font-size:.85rem}.timer{font-size:1.2rem}.transcription{padding:12px;min-height:60px;font-size:.9rem}.mode-toggle{gap:8px}.mode-toggle button{padding:6px 12px;font-size:.8rem}}@media (max-width: 375px){.record-btn{width:56px;height:56px}.record-btn:before{width:22px;height:22px}}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:linear-gradient(135deg,#0f1623,#1a1f2e);border-bottom:1px solid #333;position:sticky;top:0;z-index:100;width:100%;box-sizing:border-box}.header-left{flex:0 0 auto;display:flex;align-items:center;gap:.75rem}.header-center{flex:1 1 auto;text-align:center;padding:0 1rem}.header-right{flex:0 0 auto;display:flex;align-items:center;gap:.75rem}.app-header h1{margin:0;font-size:1.25rem;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem}.header-icon{font-size:1.5rem}.header-subtitle{margin:.25rem 0 0;font-size:.875rem;color:#888}.back-btn{background:transparent;border:1px solid #444;border-radius:8px;padding:.5rem 1rem;color:#ccc;font-size:.9rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.back-btn:hover{background:#ffffff0d;border-color:#666;color:#fff}@media (max-width: 640px){.app-header{padding:.75rem 1rem}.app-header h1{font-size:1.1rem}.back-btn{padding:.4rem .75rem;font-size:.85rem}}.offline-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:20px}.offline-container{text-align:center;max-width:500px;background:#ffffff0d;border-radius:24px;padding:40px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.gif-container{margin-bottom:30px}.error-gif{max-width:300px;max-height:200px;border-radius:16px;box-shadow:0 10px 40px #0000004d}.offline-title{font-size:2.5rem;color:#e94560;margin-bottom:15px;font-weight:700}.offline-message{font-size:1.3rem;color:#fff;margin-bottom:25px;line-height:1.5}.offline-details{background:#0003;border-radius:12px;padding:20px;margin-bottom:25px}.offline-details code{background:#7289da33;color:#7289da;padding:4px 8px;border-radius:6px;font-family:monospace;word-break:break-all}.offline-hint{color:#888;font-size:.9rem;margin-top:10px}.retry-btn{background:linear-gradient(135deg,#7289da,#5b73c7);color:#fff;border:none;padding:15px 40px;font-size:1.1rem;border-radius:12px;cursor:pointer;transition:all .3s ease;font-weight:600}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #7289da66}.retry-btn:active{transform:translateY(0)}.mode-button{width:100%;min-height:60px;padding:1rem 1.5rem;border:2px solid var(--border-color, #555);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.75rem;text-align:center;background:#16213e;color:#fff}.mode-button:hover{background:var(--border-color, #555)}.mode-button:active{transform:scale(.98)}.mode-button.primary{background:#e94560;border-color:#e94560}.mode-button.primary:hover{background:#c73e54;border-color:#c73e54}.mode-button-icon{font-size:1.25rem}.mode-button-label{flex:1}.home-page{min-height:100vh;display:flex;flex-direction:column}.home-page .home-container{max-width:900px;margin:0 auto;padding:20px 20px 100px!important;flex:1;display:flex;flex-direction:column;gap:24px}.mode-category{display:flex;flex-direction:column;gap:12px}.category-title{font-size:.875rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em;margin:0;padding-left:4px}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width: 640px){.mode-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 900px){.mode-grid{grid-template-columns:repeat(4,1fr)}}.mode-grid .mode-button{min-height:80px;flex-direction:column;gap:.5rem;padding:1rem .75rem}.mode-grid .mode-button-icon{font-size:1.5rem}.mode-grid .mode-button-label{font-size:.8125rem;text-align:center;flex:none}.quote-footer{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 20px;color:#888;font-style:italic;font-size:.875rem;border-top:1px solid #2a2a4e;gap:4px}.quote-footer .quote-text{margin:0}.quote-footer .built-with{font-size:.75rem;color:#666;font-style:normal;opacity:.8}.quote-footer .built-with-link{color:#888;text-decoration:none;transition:color .2s ease}.quote-footer .built-with-link:hover{color:#4ade80;text-decoration:underline}@media (min-width: 768px){.quote-footer{flex-direction:row;justify-content:center;align-items:center;position:relative}.quote-footer .quote-text{text-align:center;flex:1}.quote-footer .built-with{position:absolute;right:20px;bottom:16px}}.lesson-list{padding:20px 0}.lesson-list h2{margin-bottom:24px;color:#fff;font-size:1.5rem}.lessons-grid{display:flex;flex-direction:column;gap:12px}.lesson-card{display:flex;align-items:flex-start;gap:16px;padding:20px;background:#16213e;border:1px solid #333;border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;width:100%}.lesson-card:hover{background:#1a2642;border-color:#4a9eff;transform:translateY(-2px)}.lesson-number{display:flex;align-content:center;justify-content:center;width:40px;height:40px;background:#e94560;color:#fff;font-weight:600;font-size:.9rem;border-radius:8px;flex-shrink:0;align-self:center}.lesson-info{flex:1;min-width:0}.lesson-info h3{margin:0 0 8px;color:#fff;font-size:1.1rem;font-weight:600}.lesson-date{margin:0 0 12px;color:#888;font-size:.85rem}.lesson-topics{display:flex;flex-wrap:wrap;gap:6px}.topic-tag{padding:4px 10px;background:#4a9eff33;color:#4a9eff;font-size:.75rem;border-radius:12px;text-transform:capitalize}.no-lessons{text-align:center;color:#888;padding:40px}.lesson-list-loading,.lesson-list-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#888}.lesson-list-error button{margin-top:16px;padding:10px 24px;background:#e94560;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem}.lesson-list-error button:hover{background:#c73e54}.lesson-sort-buttons{display:flex;gap:8px}.lesson-sort-buttons button{padding:6px 12px;background:transparent;border:1px solid #444;border-radius:6px;color:#888;font-size:.85rem;cursor:pointer;transition:all .2s ease}.lesson-sort-buttons button:hover{border-color:#666;color:#fff}.lesson-sort-buttons button.active{background:#e94560;border-color:#e94560;color:#fff}.tag-filters-accordion{margin-bottom:20px;background:#16213e;border-radius:12px;border:1px solid #333;overflow:hidden}.tag-filters-accordion.open{border-color:#444}.tag-filters-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;background:transparent;border:none;color:inherit;cursor:pointer;text-align:left;font-size:inherit}.tag-filters-header:hover{background:#ffffff05}.tag-filters-header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.tag-filters-label{color:#888;font-size:.9rem;white-space:nowrap}.tags-summary{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden}.tags-summary-placeholder{color:#666;font-size:.9rem}.tags-summary-tag{padding:2px 8px;background:#e94560;color:#fff;font-size:.8rem;border-radius:12px;white-space:nowrap}.tags-summary-more{padding:2px 8px;background:#333;color:#aaa;font-size:.8rem;border-radius:12px;white-space:nowrap}.tag-filters-header-actions{display:flex;align-items:center;gap:12px;margin-left:12px}.tag-filters-clear{color:#e94560;font-size:.85rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.tag-filters-clear:hover{background:#e945601a}.accordion-arrow{font-size:.8rem;color:#888;transition:transform .2s}.accordion-arrow.open{transform:rotate(180deg)}.tag-filters-content{padding:0 16px 16px;border-top:1px solid #333;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tag-filters-results{color:#888;font-size:.85rem;padding:12px 0;margin-bottom:8px}.tag-chip{background:#1a1a2e;border:1px solid #333;color:#aaa;padding:6px 12px;border-radius:16px;cursor:pointer;font-size:.85rem;transition:all .2s}.lesson-mode{width:100%;max-width:100%;margin:0;padding:0}.lesson-mode>.lessons-list,.lesson-mode>.lesson-detail,.lesson-mode>.loading,.lesson-mode>.tag-filters,.lesson-mode>.results-count{max-width:900px;margin:0 auto;padding:0 20px 20px}.tag-filters{margin-bottom:16px}.tag-filters-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#888;font-size:.9rem}.clear-filters{background:transparent;border:1px solid #e94560;color:#e94560;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s}.clear-filters:hover{background:#e945601a}.tag-chips{display:flex;flex-wrap:wrap;gap:8px}.tag-chip{background:#16213e;border:1px solid #333;color:#aaa;padding:6px 12px;border-radius:16px;cursor:pointer;font-size:.85rem;transition:all .2s}.tag-chip:hover{border-color:#444;color:#fff}.tag-chip.selected{background:#e94560;border-color:#e94560;color:#fff}.results-count{color:#888;font-size:.9rem;margin-bottom:8px}.lesson-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #333}.lesson-header h2{flex:1;font-size:1.8rem;color:#fff}.back-btn{background:#16213e;border:2px solid #333;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s}.back-btn:hover{background:#1a4a7a;border-color:#0f3460}.start-chat-btn{background:#e94560;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s}.sort-controls{display:flex;gap:8px}.sort-controls button{background:#16213e;border:2px solid #333;color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .3s}.sort-controls button:hover{background:#1a4a7a;border-color:#0f3460}.sort-controls button.active{background:#e94560;border-color:#e94560;color:#fff}.start-chat-btn:hover{background:#c73e54}.lesson-count{color:#888;font-size:.9rem}.loading{text-align:center;padding:40px;color:#888}.lessons-list{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 200px);overflow-y:auto;padding-right:8px}.lessons-list::-webkit-scrollbar{width:8px}.lessons-list::-webkit-scrollbar-track{background:#1a1a2e;border-radius:4px}.lessons-list::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.lessons-list::-webkit-scrollbar-thumb:hover{background:#e94560}.lesson-card{background:#16213e;border:2px solid #333;border-radius:12px;padding:16px 20px;cursor:pointer;transition:all .3s}.lesson-card:hover{background:#0f3460;border-color:#e94560;transform:translate(4px)}.lesson-card-header{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.lesson-card-header .lesson-date{font-size:.8rem;color:#888}.lesson-card-header .lesson-title{font-size:1.1rem;font-weight:700;color:#fff}.lesson-card-stats{display:flex;gap:16px;font-size:.85rem;color:#aaa;margin-bottom:8px}.lesson-topics{font-size:.8rem;color:#888;font-style:italic}.topic-tag{background:#e9456033;padding:4px 10px;border-radius:12px;font-size:.75rem;color:#e94560}.lesson-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.lesson-tabs button{background:#16213e;border:2px solid #333;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s}.lesson-tabs button.active{border-color:#e94560;background:#e94560}.lesson-tabs button:hover:not(.active){background:#1a4a7a}.toggles-row{display:flex;gap:24px;margin-bottom:16px}.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#aaa;font-size:.9rem}.toggle-label input{width:18px;height:18px;accent-color:#e94560}.furigana-toggle{margin-bottom:16px}.furigana-toggle label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#aaa}.furigana-toggle input{width:18px;height:18px;accent-color:#e94560}.lesson-content{background:#16213e;border:2px solid #333;border-radius:12px;padding:24px}.info-card{background:#0f3460;padding:16px;border-radius:8px;margin-bottom:20px;border:1px solid #333}.info-card h3{margin-bottom:12px;color:#e94560}.info-card p{margin-bottom:8px;color:#ccc}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:#1a1a2e;padding:20px;border-radius:8px;text-align:center;border:1px solid #333}.stat-number{display:block;font-size:2.5rem;font-weight:700;color:#e94560}.stat-label{font-size:.85rem;color:#888}.quick-start{text-align:center;padding:24px;background:#e945601a;border-radius:12px;border:2px solid #e94560}.quick-start h3{margin-bottom:16px;color:#e94560}.big-button{background:#e94560;color:#fff;border:none;padding:16px 32px;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s}.big-button:hover{background:#c73e54}.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.vocab-card{background:#1a1a2e;padding:16px;border-radius:8px;border:1px solid #333;transition:all .2s}.vocab-card:hover{border-color:#e94560}.vocab-card .jp-word{font-size:1.3rem;margin-bottom:4px;color:#fff}.vocab-card .romaji{font-size:.85rem;color:#888;margin-bottom:8px;font-style:italic}.vocab-card .meaning{font-size:.95rem;color:#ccc}.type-tag{display:inline-block;background:#0f3460;padding:8px 8px 2px;border-radius:4px;font-size:.75rem;color:#aaa;margin-top:4px}.grammar-card{background:#1a1a2e;padding:20px;border-radius:8px;border:1px solid #333;margin-bottom:16px}.grammar-card h4{font-size:1.2rem;color:#e94560;margin-bottom:8px}.grammar-card .romaji{font-size:.9rem;color:#888;margin-bottom:12px;font-style:italic}.grammar-card .explanation{color:#ccc;margin-bottom:16px;line-height:1.6}.grammar-card .explanation p{margin:4px 0}.grammar-card .explanation .table-line{font-family:monospace;font-size:.9rem;white-space:pre-wrap;background:#0f1a30;padding:4px 8px;border-radius:4px}.grammar-card .explanation .table-separator{color:#666}.grammar-table{width:100%;border-collapse:collapse;margin:12px 0;background:#0f1a30;border-radius:8px;overflow:hidden;font-size:.9rem}.grammar-table td{padding:10px 12px;border:1px solid #1a3a5c;vertical-align:top}.grammar-table tr:first-child td{background:#1a3a5c;font-weight:700;color:#fff}.grammar-table tr:nth-child(2n) td{background:#1a3a5c4d}.grammar-card .examples{background:#0f3460;padding:12px;border-radius:8px}.grammar-card .examples h5{margin-bottom:8px;color:#888}.example{padding:8px 0;border-bottom:1px solid #333}.example:last-child{border-bottom:none}.example .jp{display:block;font-size:1.4rem;margin-bottom:6px;color:#fff}.example .en{font-size:1rem;color:#888}.practice-tab h3{margin-bottom:16px;color:#fff}.practice-list{display:flex;flex-direction:column;gap:8px}.practice-item{display:flex;gap:12px;padding:12px;background:#1a1a2e;border-radius:8px;align-items:center;border:1px solid #333}.practice-item .number{color:#e94560;font-size:.9rem;min-width:24px;font-weight:700}.practice-item .phrase{font-size:1.1rem;color:#fff}.practice-item .phrase-content{display:flex;flex-direction:column;gap:4px;flex:1}.practice-item .phrase-jp{font-size:1.1rem;color:#fff}.practice-item .phrase-en{font-size:.9rem;color:#888;font-style:italic}.practice-item .phrase-romaji{font-size:.85rem;color:#666;font-style:italic}ruby{ruby-align:center}rt{font-size:.75em;color:#aaa}ruby.furigana-failed rt{color:#e94560;font-weight:700}@media (max-width: 480px){.lesson-mode{padding:12px}.lesson-header{flex-direction:column;gap:12px;text-align:center;padding-bottom:12px;margin-bottom:16px}.lesson-header h2{font-size:1.2rem;order:-1}.back-btn,.start-chat-btn{width:100%;padding:10px 16px;font-size:.9rem}.lesson-tabs{flex-wrap:wrap;gap:6px;margin-bottom:16px}.lesson-tabs button{padding:8px 12px;font-size:.8rem;flex:1;min-width:80px}.furigana-toggle{margin-bottom:12px;font-size:.9rem}.lesson-content{padding:12px}.stats-grid{grid-template-columns:1fr;gap:12px}.stat-card{padding:16px}.stat-number{font-size:2rem}.info-card{padding:16px}.quick-start{padding:20px}.big-button{padding:16px 24px;font-size:1rem;width:100%}.vocab-grid{grid-template-columns:1fr;gap:12px}.vocab-card{padding:16px}.jp-word{font-size:1.5rem}.romaji{font-size:.9rem}.grammar-card{padding:16px}.grammar-card h3{font-size:1.3rem}.grammar-table{font-size:.85rem}.grammar-table td{padding:8px}.practice-list{gap:12px}.practice-item{padding:12px;font-size:1rem}.lessons-list{gap:10px;max-height:calc(100vh - 180px)}.lesson-card{padding:12px 16px}.lesson-card-header{flex-direction:column;gap:4px}.lesson-date{font-size:.8rem}.lesson-title{font-size:1rem}.lesson-card-stats{font-size:.8rem;flex-wrap:wrap;gap:8px}.lesson-topics{font-size:.75rem}}@media (max-width: 375px){.lesson-tabs button{font-size:.75rem;padding:6px 10px}.vocab-card{padding:12px}.jp-word{font-size:1.3rem}}@media (max-width: 480px){.lesson-mode>.lessons-list,.lesson-mode>.lesson-detail,.lesson-mode>.loading{padding:0 12px 12px}}@media (max-height: 500px) and (orientation: landscape){.lessons-list{max-height:calc(100vh - 140px)}}@supports (padding: max(0px)){.lesson-mode>.lessons-list,.lesson-mode>.lesson-detail,.lesson-mode>.loading{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}}.vocab-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.review-badge{background:#f0ad4e;color:#1a1a2e;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;white-space:nowrap;cursor:help}.review-badge:hover{background:#ec971f}.other-lessons{margin-top:4px;padding-top:8px;font-size:.75rem;color:#888;line-height:1.4}.other-lessons a{color:#e94560;text-decoration:none}.other-lessons a:hover{text-decoration:underline}.review-badge-container{position:relative}.review-badge{background:#f0ad4e;color:#1a1a2e;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700;cursor:pointer}.review-tooltip{display:none;position:absolute;top:100%;right:0;background:#1a1a2e;border:2px solid #333;border-radius:8px;padding:8px 12px 12px;min-width:280px;max-width:320px;z-index:100;box-shadow:0 4px 12px #00000080;margin-top:4px}.review-badge-container:hover .review-tooltip{display:block}.review-tooltip-header{font-size:.8rem;color:#888;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #333}.review-tooltip-item{display:flex;flex-direction:column;gap:2px;padding:8px;margin-bottom:4px;background:#16213e;border-radius:4px;text-decoration:none;color:inherit;cursor:pointer;transition:all .2s}.review-tooltip-item:hover{background:#0f3460;transform:translate(-2px)}.review-tooltip-number{font-size:.75rem;color:#e94560;font-weight:700}.review-tooltip-date{font-size:.7rem;color:#666}.review-tooltip-title{font-size:.8rem;color:#fff}.review-badge-container:after{content:"";position:absolute;top:100%;right:0;width:100%;height:12px;background:transparent}.review-badge-container:hover:after,.review-badge-container:hover .review-tooltip{display:block}.review-tooltip-title{font-size:.85rem;color:#fff;font-weight:500}.review-tooltip-date{font-size:.75rem;color:#888}.review-tooltip-item:hover .review-tooltip-title{color:#e94560}.play-btn{background:#fff3;border:none;padding:8px 16px;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;flex-shrink:0}.stop-btn{background:#ffffff1a;border:none;padding:8px 12px;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;flex-shrink:0;opacity:.7}.stop-btn:hover:not(:disabled){background:#fff3;opacity:1}.stop-btn:disabled{opacity:.3;cursor:not-allowed}.progress-bar-container{flex:1;cursor:pointer;padding:8px 0}.progress-bar{height:4px;background:#fff3;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:#e94560;transition:width .1s linear}.time-display{display:flex;justify-content:space-between;margin-top:4px;font-size:.75rem;color:#fff9}.highlighted-text{display:inline;line-height:1.8}.text-segment{display:inline;padding:2px 1px;border-radius:3px;transition:background-color .1s ease}.text-segment.highlighted{background-color:#e9456066;color:#fff;font-weight:500}.message.assistant .text-segment.highlighted{background-color:#e9456080}.message.user .text-segment.highlighted{background-color:#0f3460b3}.memory-mode-header{display:flex;align-items:center;padding:15px 20px;background:#1a1a2e;border-bottom:1px solid #2a2a4e;gap:15px}.memory-mode-header h1{margin:0;font-size:1.5rem;color:#fff;flex:1;text-align:center}.memory-header-chips{display:flex;gap:8px;align-items:center}.back-btn{background:transparent;border:1px solid #0f3460;color:#e94560;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s}.memory-mode-setup,.memory-mode-study,.memory-mode-complete,.memory-mode-loading{min-height:calc(100vh - 60px);padding:20px;background:#1a1a2e;color:#fff}.memory-card{max-width:800px;margin:0 auto;background:#16213e;border-radius:16px;padding:30px;box-shadow:0 4px 20px #0000004d}.memory-mode-setup h2{text-align:center;margin-bottom:10px;font-size:1.8rem}.memory-mode-setup .description{text-align:center;font-size:1.1rem;color:#ccc;margin-bottom:5px}.memory-mode-setup .subtitle{text-align:center;font-size:.9rem;color:#888;margin-bottom:30px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:30px}.stat-box{background:#0f3460;padding:20px;border-radius:12px;text-align:center}.stat-box.due{background:#28a74533;border:1px solid #28a745}.stat-box.new{background:#ffc10733;border:1px solid #ffc107}.stat-box.review{background:#17a2b833;border:1px solid #17a2b8}.stat-value{font-size:1.8rem;font-weight:700;margin-bottom:5px}.stat-label{font-size:.85rem;color:#aaa}.lesson-selection{margin-bottom:30px}.lesson-selection h3{margin-bottom:15px;font-size:1.1rem}.lesson-chips{display:flex;flex-wrap:wrap;gap:10px}.lesson-chip{padding:8px 16px;border:2px solid #333;border-radius:20px;background:#1a1a2e;color:#fff;cursor:pointer;transition:all .3s;font-size:.9rem}.lesson-chip:hover{border-color:#e94560}.lesson-chip.selected{background:#e94560;border-color:#e94560}.lesson-chip .lesson-number{display:inline-block;background:#e945604d;color:#e94560;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:600;margin-right:8px}.lesson-chip.selected .lesson-number{background:#fff3;color:#fff}.lesson-chip .lesson-title{font-weight:500}.start-btn{width:100%;max-width:300px;margin:0 auto;display:block;padding:15px 30px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .3s}.start-btn:hover:not(:disabled){background:#c73e54}.start-btn:disabled{background:#555;cursor:not-allowed}.hint{text-align:center;color:#888;font-size:.9rem;margin-top:15px;min-height:1.5rem;line-height:1.5rem}.study-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.chips{display:flex;gap:10px}.chip{padding:5px 12px;border-radius:20px;background:#0f3460;font-size:.85rem}.chip.status{background:#9b59b6}.close-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:5px}.progress-bar{height:6px;background:#0f3460;border-radius:3px;margin-bottom:30px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#e94560,#9b59b6);border-radius:3px;transition:width .3s}.question{text-align:center;margin-bottom:40px}.question-label{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.question-text{font-size:1.8rem;font-weight:500;color:#fff}.reveal-section{text-align:center;margin-bottom:30px}.reveal-btn{padding:15px 40px;border:2px solid #e94560;border-radius:8px;background:transparent;color:#fff;font-size:1.1rem;cursor:pointer;transition:all .3s}.reveal-btn:hover{background:#e94560}.reveal-hint{color:#888;font-size:.9rem;margin-top:15px}.reveal-hint kbd{display:inline-block;background:#e9456033;border:1px solid #e94560;padding:2px 8px;border-radius:4px;font-size:.8rem;color:#e94560;margin-top:8px}.answer-section{margin-bottom:30px}.answer-box{background:#0f3460;padding:30px;border-radius:12px;margin-bottom:30px;text-align:center}.recorder-section{margin-bottom:30px;text-align:center}.recorder-hint{color:#888;font-style:italic}.assessment{text-align:center}.assessment-label{font-size:1rem;color:#ccc;margin-bottom:20px}.assessment-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.assessment-btn{padding:12px 20px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s;min-width:100px}.assessment-btn.again{background:#dc3545;color:#fff}.assessment-btn.hard{background:#ffc107;color:#000}.assessment-btn.good{background:#28a745;color:#fff}.assessment-btn.easy{background:#17a2b8;color:#fff}.assessment-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.btn-key{display:inline-block;background:#fff3;padding:2px 6px;border-radius:4px;font-size:.75rem;margin-right:6px;font-weight:700;border:1px solid rgba(255,255,255,.3)}.keyboard-hint{text-align:center;color:#888;font-size:.85rem;margin-top:10px;opacity:.7}.memory-mode-complete{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 60px);text-align:center}.complete-icon{font-size:4rem;color:#28a745;margin-bottom:20px}.memory-mode-complete h2{font-size:2rem;margin-bottom:10px}.memory-mode-complete p{color:#888;margin-bottom:30px}.memory-mode-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 60px)}.spinner{font-size:1.5rem;color:#e94560}@media (max-width: 768px){.stats-grid{grid-template-columns:repeat(2,1fr)}.memory-card{padding:20px}.question-text{font-size:1.4rem}.assessment-buttons{flex-direction:column}.assessment-btn{width:100%}}.hint{min-height:1.5rem;margin:.5rem 0;color:#888;font-size:.9rem}.hint-hidden{visibility:hidden;opacity:0}.pattern-graph-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pattern-graph-content{background:#0f1419;border-radius:16px;max-width:1400px;width:100%;max-height:95vh;overflow:hidden;border:1px solid #1e3a5f;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000080}.pattern-graph-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #1e3a5f;background:linear-gradient(135deg,#16213e,#0f1419)}.pattern-graph-header h3{margin:0;font-size:20px;color:#fff;font-weight:600;letter-spacing:.5px}.pattern-graph-header .close-btn{background:#e945601a;border:1px solid rgba(233,69,96,.3);color:#e94560;font-size:24px;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:all .2s ease}.pattern-graph-header .close-btn:hover{background:#e9456040;border-color:#e94560;transform:scale(1.05)}.pattern-graph-controls{padding:12px 24px;background:#0f1419;border-bottom:1px solid #1e3a5f;display:flex;justify-content:space-between;align-items:center;gap:20px}.filter-section{display:flex;align-items:center;gap:12px}.control-label{font-size:13px;color:#8892b0;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.filter-buttons{display:flex;gap:8px}.filter-buttons button{background:#16213e;border:1px solid #1e3a5f;color:#a8b2d1;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s ease;font-weight:500}.filter-buttons button:hover{background:#1e3a5f;border-color:#4a9eff;color:#fff;transform:translateY(-1px)}.filter-buttons button.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;box-shadow:0 4px 15px #667eea66}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-level{font-size:13px;color:#8892b0;font-weight:600;min-width:45px;text-align:center;background:#16213e;padding:6px 10px;border-radius:6px;border:1px solid #1e3a5f}.zoom-btn{background:#16213e;border:1px solid #1e3a5f;color:#a8b2d1;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.zoom-btn:hover{background:#1e3a5f;border-color:#4a9eff;color:#fff;transform:scale(1.05)}.zoom-btn:active{transform:scale(.95)}.pattern-graph-main{display:flex;flex:1;min-height:0;overflow:hidden}.pattern-graph-sidebar{width:220px;min-width:220px;flex-shrink:0;background:#0a0e14;border-right:1px solid #1e3a5f;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}.legend-section-panel{background:#16213e;border-radius:12px;padding:16px;border:1px solid #1e3a5f}.legend-section-panel h4{margin:0 0 12px;font-size:13px;color:#ccd6f6;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.legend-items{display:flex;flex-direction:column;gap:10px}.legend-item{display:flex;align-items:center;gap:10px;font-size:12px;color:#a8b2d1;transition:all .2s ease}.legend-item:hover{color:#fff}.legend-line{width:24px;height:3px;border-radius:2px;flex-shrink:0;box-shadow:0 2px 4px #0000004d}.legend-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 2px 6px #0006}.legend-tips{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:12px;padding:16px;border:1px solid rgba(102,126,234,.2)}.legend-tips h4{margin:0 0 12px;font-size:13px;color:#ccd6f6;font-weight:600}.legend-tips ul{margin:0;padding-left:16px;font-size:12px;color:#8892b0;line-height:1.8}.legend-tips li{margin-bottom:4px}.pattern-graph-container{flex:1;overflow:hidden;background:#0a0e14;position:relative}.pattern-graph-container svg{display:block;max-width:100%;max-height:100%}.connection-group{pointer-events:all}.connection-line{transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer}.connection-line:hover{filter:drop-shadow(0 0 6px currentColor)}.node-group{cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.node-group.selected{z-index:100}.node-circle{transition:all .25s cubic-bezier(.4,0,.2,1)}.node-group:hover .node-circle{filter:drop-shadow(0 0 12px currentColor)}.node-group.selected .node-circle{filter:drop-shadow(0 0 16px currentColor)}.pattern-graph-footer{padding:12px 24px;background:#16213e;border-top:1px solid #1e3a5f}.pattern-graph-footer p{margin:0;font-size:13px;color:#8892b0}.pattern-graph-footer strong{color:#ccd6f6;font-weight:600}@keyframes nodeAppear{0%{opacity:0;transform:scale(0) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.node-group{animation:nodeAppear .4s cubic-bezier(.34,1.56,.64,1) backwards}.node-group:nth-child(1){animation-delay:.02s}.node-group:nth-child(2){animation-delay:.04s}.node-group:nth-child(3){animation-delay:.06s}.node-group:nth-child(4){animation-delay:.08s}.node-group:nth-child(5){animation-delay:.1s}.node-group:nth-child(6){animation-delay:.12s}.node-group:nth-child(7){animation-delay:.14s}.node-group:nth-child(8){animation-delay:.16s}.node-group:nth-child(9){animation-delay:.18s}.node-group:nth-child(10){animation-delay:.2s}.connection-group{animation:fadeIn .5s ease-out}@media (max-width: 900px){.pattern-graph-modal{padding:8px}.pattern-graph-content{max-height:98vh;border-radius:12px}.pattern-graph-header{padding:12px 16px}.pattern-graph-header h3{font-size:16px}.pattern-graph-controls{flex-direction:column;gap:12px;padding:12px 16px}.filter-buttons{flex-wrap:wrap;justify-content:center}.filter-buttons button{padding:6px 12px;font-size:12px}.pattern-graph-main{flex-direction:column}.pattern-graph-sidebar{width:auto;border-right:none;border-bottom:1px solid #1e3a5f;flex-direction:row;flex-wrap:wrap;padding:12px;gap:12px}.legend-section-panel{flex:1;min-width:140px;padding:12px}.legend-tips{display:none}.pattern-graph-container{min-height:400px}.pattern-graph-footer{padding:10px 16px}}@media (max-width: 600px){.pattern-graph-sidebar,.zoom-level{display:none}}.pattern-graph-sidebar::-webkit-scrollbar{width:6px}.pattern-graph-sidebar::-webkit-scrollbar-track{background:#0a0e14}.pattern-graph-sidebar::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:3px}.pattern-graph-sidebar::-webkit-scrollbar-thumb:hover{background:#2d4a6f}.grammar-mode{min-height:100vh;background:#1a1a2e;color:#fff}.grammar-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#1a1a2e;border-bottom:1px solid #2a2a4e;gap:15px}.grammar-header h2{margin:0;font-size:1.5rem;color:#fff;flex:1;text-align:center}.grammar-stats{display:flex;gap:16px;font-size:14px;color:#aaa}.grammar-stats span{background:#0f3460;padding:6px 12px;border-radius:6px}.grammar-header-actions{display:flex;align-items:center;gap:12px}.grammar-stats .due-badge{background:#28a74533;color:#28a745;border:1px solid #28a745}.pattern-selection{padding:20px;animation:fadeIn .3s ease}.review-banner{display:flex;justify-content:space-between;align-items:flex-start;background:#28a74533;border:1px solid #28a745;padding:16px 20px;border-radius:12px;margin-bottom:20px}.review-banner-content{display:flex;flex-direction:column;gap:10px;flex:1}.review-banner-title{color:#28a745;font-weight:500;font-size:16px}.due-categories{display:flex;flex-wrap:wrap;gap:8px}.due-category-pill{display:inline-flex;align-items:center;padding:4px 10px;background:#ffffff1a;border:1px solid rgba(40,167,69,.4);color:#aaa;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s}.due-category-pill.selected{background:#28a7454d;border-color:#28a745;color:#28a745}.review-actions{display:flex;gap:12px}.review-btn{background:#0f3460;color:#fff;border:1px solid #0f3460;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:500}.review-btn:hover:not(:disabled){background:#1a4a7a;border-color:#1a4a7a;transform:translateY(-1px)}.review-btn:disabled{background:#333;color:#666;border-color:#333;cursor:not-allowed}.review-btn.practice-selected-btn{background:#e94560;border-color:#e94560;color:#fff}.review-btn.practice-selected-btn:hover:not(:disabled){background:#ff6b6b;border-color:#ff6b6b;box-shadow:0 4px 15px #e945604d}.mixed-review-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#667eea33,#764ba233);border:1px solid #667eea;padding:16px 20px;border-radius:12px;margin-bottom:12px}.discrimination-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#ffc10726,#ffa00226);border:1px solid #ffc107;padding:16px 20px;border-radius:12px;margin-bottom:12px}.discrimination-content{display:flex;flex-direction:column;gap:6px}.discrimination-title{color:#ffc107;font-weight:600;font-size:16px}.discrimination-desc{color:#aaa;font-size:13px}.discrimination-btn{background:#ffc107;color:#1a1a2e;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:600}.discrimination-btn:hover:not(:disabled){background:#ffca28;transform:translateY(-1px);box-shadow:0 4px 15px #ffc1074d}.discrimination-btn:disabled{background:#333;color:#666;cursor:not-allowed}.pattern-graph-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#2dd4bf26,#38bdf826);border:1px solid #2dd4bf;padding:16px 20px;border-radius:12px;margin-bottom:12px}.pattern-graph-info{display:flex;flex-direction:column;gap:6px}.pattern-graph-title{color:#2dd4bf;font-weight:600;font-size:16px}.pattern-graph-desc{color:#aaa;font-size:13px}.pattern-graph-open-btn{background:#2dd4bf;color:#1a1a2e;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:600}.pattern-graph-open-btn:hover{background:#14b8a6;transform:translateY(-1px);box-shadow:0 4px 15px #2dd4bf4d}.category-groups-accordion{background:#16213e;border:1px solid #0f3460;border-radius:12px;margin-bottom:20px;overflow:hidden}.accordion-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.accordion-header:hover{background:#667eea1a}.accordion-icon{font-size:16px}.accordion-title{flex:1;font-size:14px;font-weight:500;color:#fff}.accordion-toggle{font-size:12px;color:#aaa;transition:transform .2s}.accordion-content{padding:8px;border-top:1px solid #0f3460;background:#1a1a2e}.group-item{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:6px;border-radius:8px;cursor:pointer;transition:all .2s;background:#16213e;border:1px solid transparent}.group-item:last-child{margin-bottom:0}.group-item:hover{background:#667eea26;border-color:#667eea}.group-item.active{background:#667eea40;border-color:#667eea}.group-name{flex:1;font-size:14px;color:#fff}.group-count{font-size:13px;color:#aaa}.group-check{font-size:14px;color:#28a745;font-weight:600}.mixed-review-content{display:flex;flex-direction:column;gap:6px}.mixed-review-title{color:#667eea;font-weight:600;font-size:16px}.mixed-review-desc{color:#aaa;font-size:13px}.mixed-review-btn{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:500}.mixed-review-btn:hover:not(:disabled){background:#764ba2;transform:translateY(-1px);box-shadow:0 4px 15px #667eea4d}.mixed-review-btn:disabled{background:#333;color:#666;cursor:not-allowed}.mixed-mode-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;text-align:center;margin-bottom:16px;animation:pulse 2s infinite}.discrimination-mode-badge{background:linear-gradient(135deg,#ffc107,#ff9800);color:#1a1a2e;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;text-align:center;margin-bottom:16px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.category-filter{margin-bottom:20px;background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:16px}.category-filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.filter-label{font-size:14px;font-weight:500;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.category-checkboxes{display:flex;flex-wrap:wrap;gap:12px}.category-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;background:#1a1a2e;border-radius:8px;border:1px solid transparent;transition:all .2s}.category-checkbox:hover{border-color:#0f3460}.category-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#e94560;cursor:pointer}.category-checkbox span{font-size:14px;color:#fff;-webkit-user-select:none;user-select:none}.selected-categories{margin-top:16px;padding-top:16px;border-top:1px solid #0f3460}.selected-categories-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.selected-label{font-size:13px;color:#aaa;font-weight:500}.clear-categories-btn{background:transparent;border:1px solid #e94560;color:#e94560;padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s;font-weight:500}.clear-categories-btn:hover{background:#e94560;color:#fff}.selected-pills{display:flex;flex-wrap:wrap;gap:8px}.category-pill{display:inline-flex;align-items:center;gap:6px;background:#e9456026;border:1px solid rgba(233,69,96,.4);color:#e94560;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:500}.remove-pill{background:none;border:none;color:#e94560;font-size:18px;line-height:1;cursor:pointer;padding:0;margin-left:2px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.remove-pill:hover{background:#e9456033}.no-selection{text-align:center;padding:60px 20px;color:#888;font-size:16px;background:#16213e;border-radius:12px;border:1px dashed #0f3460}.patterns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.pattern-card{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;cursor:pointer;transition:all .2s ease;position:relative}.pattern-card:hover{border-color:#e94560;transform:translateY(-2px);box-shadow:0 4px 20px #e9456033}.pattern-card.has-confusion{border-color:#ffc107;background:#ffc1070d}.pattern-card.has-confusion:hover{border-color:#ffc107;box-shadow:0 4px 20px #ffc10733}.pattern-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.pattern-text{font-size:20px;font-weight:600;color:#fff;font-family:Noto Sans JP,sans-serif}.pattern-level{font-size:12px;padding:4px 10px;background:#0f3460;color:#e94560;border-radius:4px;font-weight:500}.pattern-category{font-size:14px;color:#aaa;text-transform:capitalize}.pattern-streak{position:absolute;top:12px;right:12px;font-size:14px;background:#28a74533;padding:4px 8px;border-radius:4px}.confusion-badge{position:absolute;top:12px;right:60px;font-size:16px;background:#ffc10733;padding:2px 6px;border-radius:4px}.compare-btn{position:absolute;bottom:12px;right:12px;background:#667eea33;border:1px solid #667eea;color:#667eea;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s}.compare-btn:hover{background:#667eea;color:#fff}.comparison-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.comparison-content{background:#1a1a2e;border-radius:16px;max-width:1200px;width:100%;max-height:90vh;overflow-y:auto;border:1px solid #0f3460}.comparison-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #0f3460}.comparison-header h3{margin:0;font-size:20px;color:#fff}.close-btn{background:none;border:none;color:#aaa;font-size:28px;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}.close-btn:hover{background:#e9456033;color:#e94560}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px}.comparison-card{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;position:relative}.comparison-index{position:absolute;top:-10px;left:20px;background:#e94560;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.comparison-card h4{margin:10px 0 8px;font-size:22px;color:#fff;font-family:Noto Sans JP,sans-serif}.comparison-category{display:inline-block;background:#667eea33;color:#667eea;padding:4px 12px;border-radius:20px;font-size:12px;margin-bottom:8px}.counter-info{margin:0 0 12px;padding:8px 10px;background:#e945601a;border-left:3px solid #e94560;border-radius:0 6px 6px 0;font-size:13px;line-height:1.5}.counter-label{font-weight:600;color:#e94560;margin-right:4px}.counter-value{color:#fff;font-weight:500}.counter-usage{display:block;margin-top:4px;color:#aaa;font-size:12px;font-style:italic}.formation-rules{margin-bottom:16px}.formation-rules h5,.examples h5,.common-mistakes h5{margin:0 0 10px;font-size:13px;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.formation-rules ul{margin:0;padding-left:20px}.formation-rules li{margin-bottom:6px;color:#ccc;font-size:14px}.step-num{color:#e94560;font-weight:600;margin-right:6px}.examples{margin-bottom:16px}.example{background:#0f3460;padding:12px;border-radius:8px;margin-bottom:8px}.example .jp{margin:0 0 4px;font-size:15px;color:#fff;font-family:Noto Sans JP,sans-serif}.example .en{margin:0;font-size:13px;color:#aaa}.common-mistakes{background:#ffc1071a;border:1px solid rgba(255,193,7,.3);padding:12px;border-radius:8px;margin-bottom:16px}.mistake-name{margin:0 0 4px;font-size:13px;color:#ffc107;font-weight:500}.mistake-expl{margin:0;font-size:12px;color:#aaa}.practice-this-btn{width:100%;background:#e94560;color:#fff;border:none;padding:10px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:500}.practice-this-btn:hover{background:#ff6b6b}.comparison-diff{padding:20px;border-top:1px solid #0f3460;background:#667eea1a}.comparison-diff h4{margin:0 0 16px;color:#fff;font-size:16px}.diff-grid{display:flex;align-items:center;justify-content:center;gap:20px}.diff-item{text-align:center}.diff-pattern{display:block;font-size:18px;color:#fff;font-family:Noto Sans JP,sans-serif;margin-bottom:4px}.diff-desc{font-size:12px;color:#aaa}.diff-vs{font-size:14px;color:#667eea;font-weight:600}.confusion-warning{background:#ffc1071a;border:1px solid rgba(255,193,7,.4);padding:12px 16px;border-radius:8px;margin-top:12px;font-size:13px;color:#ffc107;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.compare-link{background:transparent;border:1px solid #ffc107;color:#ffc107;padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}.compare-link:hover{background:#ffc107;color:#1a1a2e}.confusion-alert{background:#ffc10726;border:2px solid #ffc107;border-radius:12px;padding:16px;margin-bottom:20px;display:flex;gap:16px;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.confusion-alert-icon{font-size:32px;flex-shrink:0}.confusion-alert-content{flex:1}.confusion-alert-title{margin:0 0 8px;font-size:16px;font-weight:600;color:#ffc107}.confusion-alert-message{margin:0 0 12px;font-size:14px;color:#fff}.compare-alert-btn{background:#ffc107;color:#1a1a2e;border:none;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s;font-weight:500}.compare-alert-btn:hover{background:#ffca28}.confusion-feedback{background:#667eea26;border:1px solid #667eea;border-radius:12px;padding:16px;margin-bottom:20px;display:flex;align-items:flex-start;gap:12px}.confusion-feedback-icon{font-size:24px;flex-shrink:0}.confusion-feedback p{margin:0 0 12px;font-size:14px;color:#fff;flex:1}.confusion-feedback strong{color:#667eea}.compare-feedback-btn{background:transparent;border:1px solid #667eea;color:#667eea;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}.compare-feedback-btn:hover{background:#667eea;color:#fff}.discrimination-container{max-width:800px;margin:0 auto}.discrimination-drill{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;margin-bottom:20px}.discrimination-context{margin-bottom:20px}.discrimination-prompt{font-size:18px;color:#fff;margin-bottom:12px;line-height:1.6}.discrimination-hint{font-size:14px;color:#aaa;font-style:italic;padding:12px 16px;background:#0f3460;border-radius:8px;border-left:3px solid #ffc107}.discrimination-question{margin-bottom:20px}.discrimination-question p{font-size:16px;color:#ffc107;font-weight:600}.discrimination-options{display:flex;flex-direction:column;gap:12px}.discrimination-option{display:flex;align-items:center;gap:16px;background:#1a1a2e;border:2px solid #0f3460;border-radius:12px;padding:16px 20px;cursor:pointer;transition:all .2s;text-align:left}.discrimination-option:hover{border-color:#667eea;background:#667eea1a}.discrimination-option.selected{border-color:#ffc107;background:#ffc1071a}.option-letter{width:36px;height:36px;background:#0f3460;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#fff;flex-shrink:0}.option-content{display:flex;flex-direction:column;gap:4px;flex:1}.option-pattern{font-size:18px;color:#fff;font-family:Noto Sans JP,sans-serif}.option-category{font-size:13px;color:#aaa}.discrimination-feedback{background:#16213e;border:2px solid;border-radius:12px;padding:20px;display:flex;gap:16px;margin-top:20px;animation:fadeIn .3s ease}.discrimination-feedback.correct{border-color:#28a745;background:#28a7451a}.discrimination-feedback.incorrect{border-color:#dc3545;background:#dc35451a}.discrimination-feedback-icon{font-size:32px;flex-shrink:0}.discrimination-feedback-content{flex:1}.discrimination-feedback-title{margin:0 0 8px;font-size:16px;font-weight:600}.discrimination-feedback.correct .discrimination-feedback-title{color:#28a745}.discrimination-feedback.incorrect .discrimination-feedback-title{color:#dc3545}.discrimination-feedback-explanation{margin:0 0 12px;font-size:14px;color:#ccc;line-height:1.6}.compare-btn-inline{background:transparent;border:1px solid #667eea;color:#667eea;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.compare-btn-inline:hover{background:#667eea;color:#fff}.discrimination-error{text-align:center;padding:40px;color:#888;font-size:16px}.exercise-container{padding:20px;animation:slideIn .3s ease;min-height:calc(100vh - 60px)}.back-btn{background:transparent;border:1px solid #0f3460;color:#e94560;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s;margin-bottom:20px}.back-btn:hover{background:#0f3460;color:#fff}.pattern-info{background:#16213e;border:1px solid #0f3460;padding:24px;border-radius:12px;margin-bottom:24px;text-align:center}.pattern-info h3{margin:0 0 8px;font-size:28px;color:#fff;font-family:Noto Sans JP,sans-serif}.pattern-info .category{margin:0;color:#aaa;font-size:14px;text-transform:capitalize}.exercise-prompt{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;max-width:800px;margin:0 auto}.prompt-type{display:inline-block;padding:6px 14px;background:#e9456033;color:#e94560;border-radius:6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px;font-weight:500}.prompt-text{font-size:18px;line-height:1.6;color:#fff;margin-bottom:16px}.context{font-size:14px;color:#ccc;font-style:italic;margin-bottom:24px;padding:16px;background:#0f3460;border-radius:8px;border-left:3px solid #e94560}.input-section{margin-top:24px;padding-top:24px;border-top:1px solid #0f3460}.input-section p{margin-bottom:12px;color:#aaa}.answer-input{width:100%;padding:14px 18px;font-size:18px;border:1px solid #0f3460;border-radius:8px;margin-bottom:16px;box-sizing:border-box;background:#1a1a2e;color:#fff;font-family:Noto Sans JP,sans-serif}.answer-input:focus{outline:none;border-color:#e94560;box-shadow:0 0 0 2px #e9456033}.answer-input::placeholder{color:#666}.submit-btn{background:#e94560;color:#fff;border:none;padding:12px 32px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s;font-weight:500}.feedback{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;animation:fadeIn .3s ease;max-width:800px;margin:0 auto}.feedback.correct{border-color:#28a745;background:#28a7451a}.feedback.incorrect{border-color:#e94560;background:#e945601a}.answer-comparison p{font-size:18px;color:#fff;margin:0;font-family:Noto Sans JP,sans-serif}.progress-update{display:flex;gap:16px;margin-bottom:24px;padding:16px;background:#0f3460;border-radius:8px;justify-content:center}.progress-update span{color:#aaa;font-size:14px}.progress-update span strong{color:#fff}.next-btn{background:#e94560;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s;font-weight:500;width:100%}.next-btn:hover{background:#ff6b6b;transform:translateY(-1px)}.loading,.processing{text-align:center;padding:60px 40px;color:#aaa;font-size:16px}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.comparison-grid{grid-template-columns:1fr}.review-banner,.mixed-review-banner,.discrimination-banner,.pattern-graph-banner{flex-direction:column;gap:16px}.review-actions{width:100%;flex-direction:column}.review-btn,.mixed-review-btn,.discrimination-btn,.pattern-graph-open-btn{width:100%}.discrimination-options{gap:10px}.discrimination-option{padding:14px 16px}.option-letter{width:32px;height:32px;font-size:14px}.option-pattern{font-size:16px}}.error-explanation{background:#1a1a2e;border:1px solid #0f3460;border-radius:12px;padding:20px;margin:20px 0;text-align:left}.explanation-header{font-size:1.1rem;font-weight:600;color:#e94560;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #2a2a4e}.formation-rule{background:#16213e;padding:12px 16px;border-radius:8px;margin:10px 0;font-size:.95rem;color:#e0e0e0;border-left:3px solid #e94560}.usage-context{margin:12px 0;padding:10px 14px;background:#0f3460;border-radius:8px;font-size:.9rem;color:#b0c4de}.usage-context strong{color:#e94560}.common-mistakes{margin:16px 0;padding:14px;background:#2d1f1f;border-radius:8px;border:1px solid #5c2a2a}.common-mistakes strong{color:#ff6b6b;display:block;margin-bottom:10px}.common-mistakes ul{margin:0;padding-left:20px}.common-mistakes li{margin:8px 0;font-size:.9rem;color:#e0e0e0}.mistake-example{color:#ff6b6b;font-weight:500}.mistake-explanation{color:#90ee90}.pattern-hint{margin-top:16px;padding:12px 16px;background:#1f3a1f;border-radius:8px;border-left:3px solid #4caf50;font-size:.9rem;color:#c8e6c9}.pattern-hint strong{color:#4caf50}.counters-mode{min-height:100vh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#fff}.counters-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#0000004d;border-bottom:1px solid rgba(233,69,96,.3)}.counters-header h1{margin:0;font-size:1.5rem;background:linear-gradient(90deg,#e94560,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.back-btn,.quiz-btn{background:#e9456033;border:1px solid #e94560;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.back-btn:hover,.quiz-btn:hover{background:#e94560}.counters-stats{color:#aaa;font-size:14px}.counters-intro{max-width:800px;margin:30px auto;padding:25px;background:#ffffff0d;border-radius:16px;border:1px solid rgba(255,255,255,.1)}.counters-intro h2{margin:0 0 15px;color:gold;font-size:1.3rem}.counters-intro p{line-height:1.6;color:#ccc;margin-bottom:20px}.counter-examples{display:flex;gap:15px;flex-wrap:wrap}.counter-example{background:#e945601a;border:1px solid rgba(233,69,96,.3);padding:12px 16px;border-radius:10px;text-align:center}.counter-example .jp{display:block;font-size:1.4rem;font-weight:600;margin-bottom:5px;font-family:Noto Sans JP,sans-serif}.counter-example .desc{font-size:12px;color:#aaa}.counter-groups{max-width:1000px;margin:0 auto;padding:20px}.counter-groups h2{margin:0 0 20px;font-size:1.2rem;color:#aaa}.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.group-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;cursor:pointer;transition:all .2s}.group-card:hover{transform:translateY(-3px);border-color:#e94560;box-shadow:0 8px 25px #e9456033}.group-card h3{margin:0 0 8px;font-size:1.5rem;color:#fff;font-family:Noto Sans JP,sans-serif}.group-counts{margin:0 0 8px;color:#e94560;font-weight:500;font-size:14px}.group-desc{margin:0 0 15px;color:#888;font-size:13px;line-height:1.4}.group-meta{display:flex;justify-content:space-between;align-items:center}.group-meta span{font-size:12px;color:#666}.study-btn{background:#e94560;border:none;color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer}.study-container{max-width:600px;margin:40px auto;padding:0 20px}.counter-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;text-align:center}.counter-pattern-large{font-size:4rem;font-weight:700;margin-bottom:30px;font-family:Noto Sans JP,sans-serif;background:linear-gradient(135deg,#fff,#e94560);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.counter-info-section{margin-bottom:30px;padding:20px;background:#e945601a;border-radius:12px}.counter-info-section h3{margin:0 0 10px;color:#e94560}.counter-info-section p{margin:0;color:#aaa}.counter-examples-section{margin-bottom:30px}.counter-examples-section h4{margin:0 0 15px;color:#888}.example-item{margin-bottom:15px;padding:15px;background:#ffffff08;border-radius:8px}.example-item .jp{font-size:1.2rem;margin-bottom:5px;font-family:Noto Sans JP,sans-serif}.example-item .en{color:#888;font-size:14px}.counter-navigation{display:flex;justify-content:space-between;align-items:center;gap:20px}.counter-navigation button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer}.counter-navigation button:disabled{opacity:.3;cursor:not-allowed}.counter-navigation span{color:#888}.quiz-container{max-width:600px;margin:40px auto;padding:0 20px}.quiz-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;text-align:center}.quiz-question{margin-bottom:30px}.question-text{font-size:1.3rem;color:#fff}.show-answer-btn{background:linear-gradient(135deg,#e94560,#ff6b6b);border:none;color:#fff;padding:16px 40px;border-radius:12px;font-size:1.1rem;cursor:pointer;transition:transform .2s}.show-answer-btn:hover{transform:scale(1.05)}.quiz-answer{animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.answer-pattern{font-size:3rem;font-weight:700;margin-bottom:15px;font-family:Noto Sans JP,sans-serif;color:#5af78e}.answer-example{color:#888;margin-bottom:30px}.answer-buttons{display:flex;gap:15px;justify-content:center}.wrong-btn,.correct-btn{padding:15px 30px;border:none;border-radius:10px;font-size:1rem;cursor:pointer;transition:transform .2s}.wrong-btn{background:#ff4757;color:#fff}.correct-btn{background:#2ed573;color:#fff}.wrong-btn:hover,.correct-btn:hover{transform:scale(1.05)}.loading{text-align:center;padding:60px;color:#888}.mixed-quiz-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#ffc10726,#ff980026);border:1px solid #ffc107;padding:16px 20px;border-radius:12px;margin:20px auto;max-width:800px;cursor:pointer;transition:all .2s}.mixed-quiz-banner:hover{border-color:#ff9800;transform:translateY(-2px)}.mixed-quiz-info{display:flex;flex-direction:column;gap:6px}.mixed-quiz-title{color:#ffc107;font-weight:600;font-size:16px}.mixed-quiz-desc{color:#aaa;font-size:13px}.mixed-quiz-btn{background:#ffc107;color:#1a1a2e;border:none;padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:600}.mixed-quiz-btn:hover{background:#ff9800;transform:translateY(-1px)}.quiz-progress{color:#aaa;font-size:14px;font-weight:500}.quiz-category{color:#e94560;font-size:14px;margin-bottom:15px;font-weight:500}.kanji-practice-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:1rem}.kanji-practice-loading .spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;animation:spin 1s linear infinite}.kanji-practice-setup,.kanji-practice-complete,.kanji-practice-empty{max-width:400px;margin:0 auto;padding:1rem;text-align:center}.kanji-practice-setup h2,.kanji-practice-complete h2{font-size:1.75rem;color:#1f2937;margin-bottom:.5rem}.kanji-practice-description{color:#6b7280;margin-bottom:2rem}.kanji-practice-stats{display:flex;justify-content:center;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.stat-card{background:#16213e;border:1px solid #333;border-radius:8px;padding:1rem;min-width:80px}.stat-value{display:block;font-size:1.5rem;font-weight:600;color:#e94560}.stat-label{display:block;font-size:.875rem;color:#888;margin-top:.25rem}.kanji-practice-filters{margin-bottom:1.5rem}.kanji-practice-filters label{display:block;font-weight:500;color:#374151;margin-bottom:.5rem}.kanji-practice-filters select{width:100%;max-width:300px;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem}.kanji-practice-shortcuts{background:#f3f4f6;border-radius:.5rem;padding:1rem;margin-bottom:1.5rem;text-align:left}.kanji-practice-shortcuts h4{font-size:.875rem;color:#374151;margin-bottom:.5rem}.kanji-practice-shortcuts ul{list-style:none;padding:0;margin:0}.kanji-practice-shortcuts li{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;font-size:.875rem;color:#6b7280}.kanji-practice-shortcuts kbd{background:#16213e;border:1px solid #333;border-radius:.25rem;padding:.125rem .375rem;font-family:monospace;font-size:.75rem;color:#fff}.kanji-practice-start-btn{background:#e94560;color:#fff;border:none;border-radius:8px;padding:1rem 2rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s;width:100%}.kanji-practice-start-btn:hover:not(:disabled){background:#c73e54}.kanji-practice-start-btn:disabled{background:#333;cursor:not-allowed}.kanji-practice-container{max-width:800px;margin:0 auto;padding:1rem}.kanji-practice-progress{margin-bottom:1rem}.progress-stats{display:flex;justify-content:center;gap:1.5rem;color:#6b7280;font-size:.875rem}.kanji-card{background:#fff;border:2px solid #e5e7eb;border-radius:1rem;padding:2rem;margin-bottom:1.5rem;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .2s}.kanji-card.revealed{border-color:#4f46e5}.kanji-card-front{text-align:center}.kanji-character{font-size:6rem;font-weight:700;color:#1f2937;line-height:1;margin-bottom:1rem;font-family:Noto Sans JP,Hiragino Kaku Gothic Pro,MS Gothic,sans-serif}.kanji-hint{color:#9ca3af;font-size:1rem}.kanji-card-back{width:100%;margin-top:2rem;padding-top:2rem;border-top:1px solid #e5e7eb}.kanji-meanings h3,.kanji-readings h3,.kanji-mnemonic h3,.kanji-examples h3{font-size:.875rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.kanji-meanings ul{list-style:none;padding:0;margin:0 0 1.5rem}.kanji-meaning{display:inline-block;background:#4f46e5;color:#fff;padding:.5rem 1rem;border-radius:.375rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.readings-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.readings-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.75rem;padding:.5rem;background:#f9fafb;border-radius:.375rem}.legend-item{display:flex;align-items:center;gap:.375rem;font-size:.75rem}.legend-badge{display:inline-block;padding:.125rem .375rem;border-radius:.25rem;font-size:.625rem;font-weight:600}.legend-badge.kun{background:#dbeafe;color:#1e40af}.legend-badge.on{background:#fce7f3;color:#9d174d}.legend-label{color:#6b7280}.reading{display:inline-block;padding:.375rem .75rem;border-radius:.25rem;font-size:.875rem}.reading.kun{background:#dbeafe;color:#1e40af}.reading.on{background:#fce7f3;color:#9d174d}.kanji-mnemonic{background:#fef3c7;border-radius:.5rem;padding:1rem;margin-bottom:1.5rem}.mnemonic-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.mnemonic-header h3{margin:0}.edit-mnemonic-btn{background:transparent;border:1px solid #d4a373;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;color:#92400e;cursor:pointer;transition:all .2s}.edit-mnemonic-btn:hover{background:#92400e1a}.mnemonic-edit-form textarea{width:100%;padding:.5rem;border:1px solid #d4a373;border-radius:.375rem;font-size:.875rem;font-family:inherit;resize:vertical;margin-bottom:.5rem}.mnemonic-edit-form textarea:focus{outline:none;border-color:#92400e;box-shadow:0 0 0 2px #92400e1a}.mnemonic-edit-actions{display:flex;gap:.5rem}.mnemonic-edit-actions .save-btn,.mnemonic-edit-actions .cancel-btn{padding:.375rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;transition:all .2s}.mnemonic-edit-actions .save-btn{background:#92400e;color:#fff;border:none}.mnemonic-edit-actions .save-btn:hover{background:#78350f}.mnemonic-edit-actions .cancel-btn{background:transparent;color:#6b7280;border:1px solid #d1d5db}.mnemonic-edit-actions .cancel-btn:hover{background:#f3f4f6}.kanji-mnemonic p{color:#92400e;font-style:italic;line-height:1.5;margin:0}.kanji-examples ul{list-style:none;padding:0;margin:0}.example-item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid #f3f4f6}.example-item:last-child{border-bottom:none}.example-word{font-weight:600;color:#1f2937;font-size:1.125rem}.example-reading{color:#6b7280;font-size:.875rem}.example-meaning{color:#4b5563}.kanji-lesson-tag{margin-top:1.5rem;text-align:center}.kanji-lesson-tag span{background:#f3f4f6;color:#6b7280;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem}.kanji-practice-controls{margin-bottom:1rem}.kanji-reveal-btn{width:100%;background:#e94560;color:#fff;border:none;border-radius:8px;padding:1rem;font-size:1.1rem;font-weight:500;cursor:pointer;transition:background .2s}.kanji-reveal-btn:hover{background:#c73e54}.kanji-rating-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rating-btn{display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;border:1px solid #333;border-radius:8px;background:#16213e;color:#ccc;cursor:pointer;transition:all .2s}.rating-btn:hover{border-color:#555}.rating-btn.again{border-color:#e94560;color:#ff6b7a}.rating-btn.again:hover{background:#e945601a}.rating-btn.hard{border-color:#f39c12;color:#f5b041}.rating-btn.hard:hover{background:#f39c121a}.rating-btn.good{border-color:#27ae60;color:#52d681}.rating-btn.good:hover{background:#27ae601a}.rating-btn.easy{border-color:#3498db;color:#5dade2}.rating-btn.easy:hover{background:#3498db1a}.rating-key{font-size:.75rem;opacity:.7}.rating-label{font-size:.875rem;font-weight:500;margin-top:.25rem}.rating-interval{font-size:.7rem;opacity:.6;margin-top:.25rem}.kanji-practice-nav{text-align:center;margin-top:1rem}.nav-btn{background:transparent;color:#888;border:1px solid #333;border-radius:8px;padding:.75rem 1.5rem;font-size:.9rem;cursor:pointer;transition:all .2s}.nav-btn:hover{background:#ffffff0d;color:#fff;border-color:#555}@media (max-width: 640px){.kanji-character{font-size:4rem}.kanji-rating-buttons{grid-template-columns:repeat(2,1fr)}.kanji-practice-stats{gap:.75rem}.stat-card{padding:.75rem 1rem;min-width:80px}}.verb-mode-container{flex:1;max-width:1000px;margin:0 auto;padding:20px;width:100%;box-sizing:border-box}.verb-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#1a1a2e;border-bottom:1px solid #2a2a4e;gap:15px}.verb-header h1{margin:0;font-size:1.5rem;color:#fff;flex:1;text-align:center}.verb-stats{display:flex;gap:16px;font-size:14px;color:#aaa}.verb-stats span{background:#0f3460;padding:6px 12px;border-radius:6px}.furigana-toggle{background:#16213e;border:1px solid #0f3460;color:#e94560;padding:8px 12px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s;font-weight:500;min-width:36px}.verb-selection{padding:20px;max-width:800px;margin:0 auto;animation:fadeIn .3s ease}.practice-type-section,.answer-mode-section,.group-filter{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;margin-bottom:20px}.practice-type-section h3,.answer-mode-section h3,.group-filter h3{margin:0 0 16px;font-size:14px;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.practice-type-options{display:flex;flex-direction:column;gap:12px}.practice-type-btn{display:flex;flex-direction:column;align-items:flex-start;background:#1a1a2e;border:1px solid #0f3460;border-radius:12px;padding:16px 20px;cursor:pointer;transition:all .2s;text-align:left;color:#fff;width:100%}.practice-type-btn:hover{border-color:#e94560;background:#e945601a}.practice-type-btn.active{border-color:#e94560;background:#e9456026}.btn-title{font-size:16px;font-weight:600;margin-bottom:4px}.btn-desc{font-size:13px;color:#aaa}.answer-mode-options{display:flex;gap:12px}.answer-mode-btn{flex:1;background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:12px 16px;cursor:pointer;transition:all .2s;color:#fff;font-size:14px}.answer-mode-btn:hover{border-color:#e94560;background:#e945601a}.answer-mode-btn.active{border-color:#e94560;background:#e9456026;font-weight:500}.group-filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.filter-actions{display:flex;gap:8px}.filter-btn{background:transparent;border:1px solid #0f3460;color:#e94560;padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}.filter-btn:hover{background:#e94560;color:#fff;border-color:#e94560}.group-checkboxes{display:flex;gap:16px}.group-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;background:#1a1a2e;border-radius:8px;border:1px solid transparent;transition:all .2s;flex:1;justify-content:center}.group-checkbox:hover{border-color:#0f3460}.group-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#e94560;cursor:pointer}.group-badge{padding:6px 12px;border-radius:6px;font-size:14px;font-weight:600}.group-badge.group-i{background:#28a74533;color:#28a745;border:1px solid rgba(40,167,69,.4)}.group-badge.group-ii{background:#667eea33;color:#667eea;border:1px solid rgba(102,126,234,.4)}.group-badge.group-iii{background:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.4)}.practice-stats{display:flex;gap:20px;margin-bottom:20px;padding:16px 20px;background:#667eea1a;border:1px solid rgba(102,126,234,.3);border-radius:12px}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-value{font-size:20px;font-weight:600;color:#fff}.stat-item.streak .stat-value{color:#ffc107}.start-practice-btn{width:100%;background:#e94560;color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px #e945604d}.start-practice-btn:hover:not(:disabled){background:#ff6b6b;transform:translateY(-2px);box-shadow:0 6px 20px #e9456066}.start-practice-btn:disabled{background:#333;color:#666;cursor:not-allowed;box-shadow:none}.exercise-container{padding:20px;animation:slideIn .3s ease;max-width:800px;margin:0 auto}.exercise-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.exercise-progress{color:#aaa;font-size:14px;font-weight:500}.verb-info-card{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;margin-bottom:24px}.verb-info-main{text-align:center;margin-bottom:16px}.verb-dictionary-form{margin:0 0 12px;font-size:32px;color:#fff;font-family:Noto Sans JP,sans-serif}.verb-meta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.verb-group-badge{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600}.verb-group-badge.group-i{background:#28a74533;color:#28a745;border:1px solid rgba(40,167,69,.4)}.verb-group-badge.group-ii{background:#667eea33;color:#667eea;border:1px solid rgba(102,126,234,.4)}.verb-group-badge.group-iii{background:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.4)}.verb-meaning-text{font-size:16px;color:#aaa}.source-form-display{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:16px;border-top:1px solid #0f3460;flex-wrap:wrap}.source-label{font-size:14px;color:#aaa}.source-value{font-size:20px;color:#fff;font-family:Noto Sans JP,sans-serif;font-weight:500}.source-form-name{font-size:13px;color:#667eea;font-style:italic}.question-section{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;margin-bottom:24px;text-align:center}.question-type-badge{display:inline-block;padding:8px 16px;background:#e9456033;color:#e94560;border-radius:8px;font-size:13px;font-weight:500;margin-bottom:16px}.question-prompt{font-size:18px;color:#fff;margin:0 0 12px;line-height:1.5}.target-form-hint{font-size:14px;color:#aaa;margin:0}.target-form-hint strong{color:#667eea}.answer-section{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px}.multiple-choice-options{display:flex;flex-direction:column;gap:12px}.choice-btn{display:flex;align-items:center;gap:16px;background:#1a1a2e;border:1px solid #0f3460;border-radius:12px;padding:16px 20px;cursor:pointer;transition:all .2s;text-align:left;color:#fff;width:100%}.choice-btn:hover{border-color:#e94560;background:#e945601a}.choice-btn.selected{border-color:#e94560;background:#e9456026}.choice-letter{width:36px;height:36px;background:#0f3460;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#fff;flex-shrink:0}.choice-btn.selected .choice-letter{background:#e94560}.choice-text{font-size:18px;font-family:Noto Sans JP,sans-serif}.input-section{display:flex;flex-direction:column;gap:16px}.input-section p{margin-bottom:12px;color:#aaa;text-align:center}.answer-input{width:100%;padding:16px 20px;font-size:20px;border:1px solid #0f3460;border-radius:8px;box-sizing:border-box;background:#1a1a2e;color:#fff;font-family:Noto Sans JP,sans-serif;text-align:center;transition:all .2s}.answer-input:focus{outline:none;border-color:#e94560;box-shadow:0 0 0 3px #e9456033}.answer-input::placeholder{color:#666;font-size:16px}.submit-btn:hover:not(:disabled){background:#ff6b6b;transform:translateY(-1px)}.feedback{background:#16213e;border:2px solid;border-radius:12px;padding:24px;animation:fadeIn .3s ease}.feedback.correct{border-color:#28a745;background:#28a7450d}.feedback.incorrect{border-color:#e94560;background:#e945600d}.feedback-result{font-size:24px;font-weight:600;margin-bottom:24px;text-align:center}.feedback.correct .feedback-result{color:#28a745}.feedback.incorrect .feedback-result{color:#e94560}.answer-comparison{margin-bottom:24px;background:#0f3460;padding:20px;border-radius:8px}.answer-comparison>div{margin-bottom:16px}.answer-comparison>div:last-child{margin-bottom:0}.answer-comparison label{display:block;font-size:12px;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.answer-comparison p{font-size:20px;color:#fff;margin:0;font-family:Noto Sans JP,sans-serif}.explanation{background:#667eea1a;border:1px solid rgba(102,126,234,.3);border-radius:8px;padding:16px;margin-bottom:20px}.explanation h4{margin:0 0 8px;color:#667eea;font-size:14px}.explanation p{margin:0;font-size:14px;color:#ccc;line-height:1.5}.streak-update{text-align:center;margin-bottom:20px;padding:12px;background:#ffc1071a;border-radius:8px}.streak-update span{color:#ffc107;font-size:16px;font-weight:600}.next-btn{width:100%;background:#e94560;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.loading{text-align:center;padding:60px 40px;color:#aaa;font-size:16px}.streak-badge{background:#ffc10733;color:#ffc107;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500}.verbs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.verb-card{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;cursor:pointer;transition:all .2s ease;position:relative}.verb-card:hover{border-color:#e94560;transform:translateY(-2px);box-shadow:0 4px 20px #e9456033}.verb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.verb-dictionary{font-size:22px;font-weight:600;color:#fff;font-family:Noto Sans JP,sans-serif}.verb-group{font-size:11px;padding:4px 10px;border-radius:4px;font-weight:600}.verb-group.group-i{background:#28a74533;color:#28a745;border:1px solid rgba(40,167,69,.4)}.verb-group.group-ii{background:#667eea33;color:#667eea;border:1px solid rgba(102,126,234,.4)}.verb-group.group-iii{background:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.4)}.verb-meaning{font-size:14px;color:#aaa;margin-bottom:4px}.verb-reading{font-size:13px;color:#666}.verb-streak{position:absolute;top:12px;right:12px;font-size:14px;background:#28a74533;padding:4px 8px;border-radius:4px}@media (max-width: 768px){.verb-selection{padding:16px}.practice-type-btn{padding:14px 16px}.btn-title{font-size:15px}.btn-desc{font-size:12px}.answer-mode-options,.group-checkboxes{flex-direction:column}.group-checkbox{justify-content:flex-start}.practice-stats{flex-wrap:wrap;gap:16px}.stat-item{flex:1;min-width:80px}.exercise-container{padding:16px}.verb-info-card{padding:20px}.verb-dictionary-form{font-size:24px}.verb-meta{flex-direction:column;gap:8px}.question-prompt{font-size:16px}.multiple-choice-options{gap:10px}.choice-btn{padding:14px 16px}.choice-letter{width:32px;height:32px;font-size:14px}.choice-text{font-size:16px}}.reading-mode-container{flex:1;max-width:1000px;margin:0 auto;padding:20px;width:100%;box-sizing:border-box}.reading-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#1a1a2e;border-bottom:1px solid #2a2a4e;gap:15px}.reading-header h1{margin:0;font-size:1.5rem;color:#fff;flex:1;text-align:center}.reading-stats{display:flex;gap:16px;font-size:14px;color:#aaa}.reading-stats span{background:#0f3460;padding:6px 12px;border-radius:6px}.furigana-toggle{background:#16213e;border:1px solid #0f3460;color:#e94560;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s;min-width:36px}.furigana-toggle:hover{background:#e94560;color:#fff;border-color:#e94560}.reading-list{padding:20px;max-width:1200px;margin:0 auto}.reading-filters{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:16px;background:#16213e;border:1px solid #0f3460;border-radius:12px}.reading-filters label{color:#aaa;font-size:14px}.level-select{background:#1a1a2e;border:1px solid #0f3460;color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}.level-select:focus{outline:none;border-color:#e94560}.passages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.passage-card{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;cursor:pointer;transition:all .2s}.passage-card:hover{background:#e945601a;border-color:#e94560;transform:translateY(-2px);box-shadow:0 4px 20px #e9456033}.passage-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.passage-header h3{margin:0;font-size:18px;color:#fff;flex:1}.level-badge{padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;flex-shrink:0}.level-badge.n5{background:#28a745}.level-badge.n4{background:#4a9eff}.level-badge.n3{background:#667eea}.level-badge.n2{background:#e94560}.level-badge.n1{background:gold;color:#1a1a2e}.passage-meta{display:flex;gap:12px;font-size:14px;color:#888}.topic{background:#667eea33;color:#667eea;padding:4px 10px;border-radius:6px;font-size:12px}.loading,.no-passages{text-align:center;padding:60px;color:#888;font-size:16px;background:#16213e;border-radius:12px;border:1px dashed #0f3460}.reading-view{padding:20px;max-width:800px;margin:0 auto;animation:fadeIn .3s ease}.passage-info{text-align:center;margin-bottom:24px;padding:20px;background:#16213e;border:1px solid #0f3460;border-radius:12px}.passage-info h2{margin:0 0 16px;font-size:28px;color:#fff}.passage-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.topic-badge{background:#667eea33;color:#667eea;padding:6px 12px;border-radius:6px;font-size:14px}.char-count-badge{background:#28a74533;color:#28a745;padding:6px 12px;border-radius:6px;font-size:14px}.passage-content{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;margin-bottom:24px;line-height:2;font-size:18px}.passage-text{white-space:pre-wrap;word-break:break-word;color:#fff;font-family:Noto Sans JP,sans-serif}.reading-actions{display:flex;justify-content:center}.continue-btn{background:#e94560;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.continue-btn:hover{background:#ff6b6b;transform:translateY(-1px);box-shadow:0 4px 15px #e945604d}.questions-view{padding:20px;max-width:800px;margin:0 auto;animation:slideIn .3s ease}.questions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:16px 20px;background:#16213e;border:1px solid #0f3460;border-radius:12px}.questions-header h2{margin:0;font-size:20px;color:#fff}.progress{color:#aaa;font-size:14px;font-weight:500}.questions-list{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.question-card{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;transition:all .2s}.question-card.answered{border-color:#28a74566;background:#28a7450d}.question-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.question-number{background:#e9456033;color:#e94560;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.question-type{background:#667eea33;color:#667eea;padding:4px 10px;border-radius:6px;font-size:12px;text-transform:uppercase}.question-text{margin:0 0 16px;font-size:18px;color:#fff;line-height:1.6}.options-list{display:flex;flex-direction:column;gap:10px}.option-label{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;cursor:pointer;transition:all .2s}.option-label:hover{background:#667eea1a;border-color:#667eea}.option-label.selected{background:#e945601a;border-color:#e94560}.option-letter{background:#0f3460;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.option-label.selected .option-letter{background:#e94560}.option-text{color:#ccc;font-size:16px}.option-label.selected .option-text{color:#fff}.questions-actions{display:flex;justify-content:space-between;gap:16px}.submit-btn{background:#e94560;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.submit-btn:hover:not(:disabled){background:#ff6b6b;transform:translateY(-1px);box-shadow:0 4px 15px #e945604d}.submit-btn:disabled{background:#333;color:#666;cursor:not-allowed}.results-view{padding:20px;max-width:800px;margin:0 auto;animation:fadeIn .3s ease}.results-header{display:flex;flex-direction:column;align-items:center;gap:24px;margin-bottom:32px;padding:24px;background:#16213e;border:1px solid #0f3460;border-radius:12px}.results-header h2{margin:0;font-size:28px;color:#fff}.score-circle{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#e94560,#ff6b6b)}.score-circle:before{content:"";position:absolute;width:100px;height:100px;background:#16213e;border-radius:50%}.score-value{position:relative;font-size:32px;font-weight:700;color:#fff}.results-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}.stat-item{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:16px;text-align:center}.stat-label{display:block;font-size:12px;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.stat-value{display:block;font-size:24px;font-weight:600;color:#fff}.stat-value.correct{color:#28a745}.answers-review{margin-bottom:24px}.answers-review h3{margin:0 0 16px;font-size:20px;color:#fff}.answer-review{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:20px;margin-bottom:16px}.answer-review.correct{border-color:#28a74566;background:#28a7450d}.answer-review.incorrect{border-color:#e9456066;background:#e945600d}.answer-review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.answer-status{font-weight:600;font-size:14px}.answer-review.correct .answer-status{color:#28a745}.answer-review.incorrect .answer-status{color:#e94560}.answer-details{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:12px;background:#1a1a2e;border-radius:8px}.your-answer,.correct-answer{display:flex;gap:8px;font-size:14px}.label{color:#888;flex-shrink:0}.value{color:#fff}.value.correct{color:#28a745}.value.wrong{color:#e94560}.explanation{margin-top:12px;padding-top:12px;border-top:1px solid #0f3460}.explanation .label{display:block;margin-bottom:8px;color:#667eea;font-weight:500}.explanation p{margin:0;color:#ccc;font-size:14px;line-height:1.5}.results-actions{display:flex;justify-content:space-between;gap:16px}.next-btn{background:#e94560;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.next-btn:hover{background:#ff6b6b;transform:translateY(-1px);box-shadow:0 4px 15px #e945604d}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.reading-header{flex-wrap:wrap;gap:10px}.reading-header h1{font-size:1.2rem;order:-1;width:100%;text-align:center}.passages-grid{grid-template-columns:1fr}.passage-content{padding:16px;font-size:16px}.questions-actions,.results-actions{flex-direction:column}.back-btn,.submit-btn,.next-btn{width:100%}.results-stats{grid-template-columns:repeat(2,1fr)}.score-circle{width:100px;height:100px}.score-circle:before{width:80px;height:80px}.score-value{font-size:28px}}.speech-feedback{background:var(--bg-secondary, #f8f9fa);border-radius:12px;padding:24px;max-width:600px;margin:0 auto}.score-section{text-align:center;padding:20px;border-radius:12px;margin-bottom:20px}.score-section.excellent{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #28a745}.score-section.good{background:linear-gradient(135deg,#d1ecf1,#bee5eb);border:2px solid #17a2b8}.score-section.fair{background:linear-gradient(135deg,#fff3cd,#ffeeba);border:2px solid #ffc107}.score-section.needs-work{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border:2px solid #dc3545}.score-circle{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 12px #0000001a}.score-value{font-size:36px;font-weight:700;color:#333}.score-percent{font-size:18px;color:#666;margin-left:2px}.score-message{font-size:20px;font-weight:600;margin-bottom:8px}.score-description{color:#555;font-size:14px;margin:0}.playback-section{text-align:center;margin-bottom:20px}.playback-button{background:#6c757d;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}.playback-button:hover{background:#5a6268}.playback-button.playing{background:#dc3545}.comparison-section{margin-bottom:20px}.comparison-section h4{margin:0 0 12px;color:#333;font-size:16px}.transcript-box{padding:16px;border-radius:8px;margin-bottom:12px}.transcript-box.user{background:#e3f2fd;border-left:4px solid #2196f3}.transcript-box.expected{background:#e8f5e9;border-left:4px solid #4caf50}.transcript-box .label{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;display:block;margin-bottom:4px}.transcript-text{font-size:18px;margin:0;color:#333;line-height:1.5}.romaji-text{font-size:14px;color:#666;margin:4px 0 0;font-style:italic}.errors-section{margin-bottom:20px}.errors-section h4{margin:0 0 12px;color:#333;font-size:16px}.error-list{list-style:none;padding:0;margin:0}.error-item{padding:12px;border-radius:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:4px}.error-item.omission{background:#fff3cd;border-left:4px solid #ffc107}.error-item.insertion{background:#f8d7da;border-left:4px solid #dc3545}.error-item.substitution{background:#d1ecf1;border-left:4px solid #17a2b8}.error-type{font-weight:600;font-size:13px}.error-detail{font-size:14px;color:#555}.suggestions-section{margin-bottom:20px}.suggestions-section h4{margin:0 0 12px;color:#333;font-size:16px}.suggestion-list{list-style:none;padding:0;margin:0}.suggestion-list li{padding:8px 12px;background:#f8f9fa;border-radius:6px;margin-bottom:8px;font-size:14px;color:#555}.feedback-actions{display:flex;gap:12px;justify-content:center;padding-top:16px;border-top:1px solid #dee2e6}.btn-primary,.btn-secondary{padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}@media (max-width: 480px){.speech-feedback{padding:16px}.score-circle{width:80px;height:80px}.score-value{font-size:28px}.transcript-text{font-size:16px}.feedback-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}.speaking-mode-container{flex:1;max-width:1000px;margin:0 auto;padding:20px;width:100%;box-sizing:border-box}.speaking-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#1a1a2e;border-bottom:1px solid #2a2a4e}.speaking-header h1{margin:0;font-size:1.5rem;color:#fff;flex:1;text-align:center}.speaking-content{padding:20px;max-width:800px;margin:0 auto}.speaking-content h2{color:#fff;margin-bottom:16px;font-size:1.3rem}.speaking-content h3{color:#aaa;margin-bottom:12px;font-size:1.1rem}.mode-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid #2a2a4e;padding-bottom:8px}.mode-tab{padding:10px 20px;border:1px solid #0f3460;background:#16213e;border-radius:8px 8px 0 0;cursor:pointer;font-size:14px;font-weight:500;color:#aaa;transition:all .2s}.mode-tab:hover{background:#e945601a;border-color:#e94560}.mode-tab.active{background:#e94560;border-color:#e94560;color:#fff}.mode-content{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px}.exercise-list{display:flex;flex-direction:column;gap:12px}.exercise-item{padding:16px;border:1px solid #0f3460;background:#1a1a2e;border-radius:8px;cursor:pointer;transition:all .2s}.exercise-item:hover{background:#e945601a;border-color:#e94560}.exercise-item.active{background:#e9456026;border-color:#e94560}.exercise-item h4{margin:0 0 8px;color:#fff;font-size:16px}.exercise-meta{display:flex;gap:12px;font-size:12px;color:#888}.exercise-meta span{background:#0f3460;padding:4px 8px;border-radius:4px;color:#aaa}.shadowing-player{text-align:center;padding:24px;background:#1a1a2e;border:1px solid #0f3460;border-radius:12px;margin-bottom:20px}.audio-placeholder{padding:40px;background:#0f3460;border-radius:8px;margin-bottom:16px;border:1px dashed #2a2a4e}.audio-placeholder p{margin:0;color:#aaa}.play-button{background:#e94560;color:#fff;border:none;padding:12px 32px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s;font-weight:500}.play-button:hover{background:#ff6b6b;transform:translateY(-1px)}.play-button:disabled{background:#333;color:#666;cursor:not-allowed}.japanese-text-display{margin-top:20px;padding:20px;background:#16213e;border-radius:8px;border-left:4px solid #e94560}.japanese-text-display p{margin:0;font-size:18px;color:#fff;line-height:1.6;font-family:Noto Sans JP,sans-serif}.recording-section{margin-top:20px;text-align:center}.record-button{background:#e94560;color:#fff;border:none;padding:14px 40px;border-radius:50px;font-size:16px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;font-weight:500}.record-button:hover{background:#ff6b6b;transform:scale(1.05)}.record-button.recording{background:#ff4757;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.recording-indicator{margin-top:12px;color:#e94560;font-size:14px}.score-display{margin-top:20px;padding:16px;background:#28a7451a;border:1px solid #28a745;border-radius:8px;text-align:center}.score-display h4{margin:0 0 8px;color:#28a745}.score-value{font-size:32px;font-weight:700;color:#28a745}.cue-card{background:linear-gradient(135deg,#667eea4d,#764ba24d);border:1px solid #667eea;color:#fff;padding:32px;border-radius:16px;margin-bottom:24px;text-align:center}.cue-card h3{color:#aaa;margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px}.cue-text{font-size:20px;line-height:1.5;margin:0;color:#fff;font-family:Noto Sans JP,sans-serif}.timer-display{text-align:center;margin-bottom:20px}.timer{font-size:48px;font-weight:700;color:#fff;font-family:monospace}.timer.warning{color:#ffc107}.timer.danger{color:#e94560}.timer-label{color:#aaa;font-size:14px}.suggested-response{margin-top:20px;padding:16px;background:#ffc1071a;border-radius:8px;border-left:4px solid #ffc107}.suggested-response h4{margin:0 0 8px;color:#ffc107;font-size:14px}.suggested-response p{margin:0;color:#fff;font-family:Noto Sans JP,sans-serif}.conversation-setup{text-align:center;padding:20px}.role-selection{display:flex;justify-content:center;gap:16px;margin-top:20px}.role-button{padding:16px 32px;border:1px solid #e94560;background:#e945601a;color:#fff;border-radius:8px;cursor:pointer;font-size:16px;transition:all .2s}.role-button:hover{background:#e94560;color:#fff}.dialogue-container{max-height:400px;overflow-y:auto;padding:16px;background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;margin-bottom:20px}.dialogue-turn{margin-bottom:16px;padding:12px 16px;border-radius:12px;max-width:80%}.dialogue-turn.partner{background:#16213e;border:1px solid #0f3460;margin-right:auto;border-bottom-left-radius:4px}.dialogue-turn.user{background:#e9456033;border:1px solid #e94560;color:#fff;margin-left:auto;border-bottom-right-radius:4px}.dialogue-turn.current{border:2px solid #4a9eff;animation:highlight 1s ease-in-out}@keyframes highlight{0%,to{box-shadow:0 0 #4a9eff00}50%{box-shadow:0 0 0 4px #4a9eff4d}}.turn-speaker{font-size:12px;color:#888;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.dialogue-turn.user .turn-speaker{color:#e94560}.turn-japanese{font-size:16px;margin-bottom:4px;line-height:1.4;color:#fff;font-family:Noto Sans JP,sans-serif}.turn-romaji{font-size:13px;color:#aaa;margin-bottom:4px;font-style:italic}.dialogue-turn.user .turn-romaji{color:#ccc}.turn-meaning{font-size:13px;color:#888}.dialogue-turn.user .turn-meaning{color:#aaa}.current-turn{background:#4a9eff1a;border:1px solid #4a9eff;padding:20px;border-radius:12px;margin-bottom:20px}.current-turn h4{margin:0 0 12px;color:#4a9eff}.current-turn p{margin:0 0 8px;font-size:18px;color:#fff;font-family:Noto Sans JP,sans-serif}.current-turn .romaji{color:#aaa;font-size:14px;font-style:italic}.your-turn-indicator{text-align:center;padding:12px;background:#28a7451a;border:1px solid #28a745;border-radius:8px;margin-bottom:16px}.your-turn-indicator p{margin:0;color:#28a745;font-weight:500}.evaluation-result{margin-top:20px;padding:20px;border-radius:12px;text-align:center}.evaluation-result.excellent{background:#28a7451a;border:2px solid #28a745}.evaluation-result.good{background:#ffc1071a;border:2px solid #ffc107}.evaluation-result.needs-work{background:#e945601a;border:2px solid #e94560}.evaluation-result h4{margin:0 0 8px;color:#fff}.evaluation-result p{margin:0;color:#aaa}.loading{text-align:center;padding:60px;color:#aaa;font-size:16px}.audio-controls{display:flex;justify-content:center;gap:12px;margin-top:16px}.control-button{background:#16213e;border:1px solid #0f3460;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.control-button:hover{background:#e9456033;border-color:#e94560}.control-button.primary{background:#e94560;border-color:#e94560;color:#fff}.control-button.primary:hover{background:#ff6b6b}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.speaking-header{flex-wrap:wrap;gap:10px}.speaking-header h1{font-size:1.2rem;order:-1;width:100%}.mode-tabs{flex-wrap:wrap}.mode-tab{padding:8px 16px;font-size:13px}.mode-content{padding:16px}.role-selection{flex-direction:column}.role-button{width:100%}.dialogue-turn{max-width:90%}.timer{font-size:36px}}.listening-mode-container{padding:1rem;max-width:800px;margin:0 auto}.listening-list{display:flex;flex-direction:column;gap:1rem}.listening-filters{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.listening-filters label{color:#9ca3af;font-size:.9rem}.level-select{padding:.5rem 1rem;border-radius:.5rem;border:1px solid #374151;background:#1f2937;color:#f9fafb;font-size:.9rem;cursor:pointer}.passages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.passage-card{background:#1f2937;border-radius:.75rem;padding:1rem;cursor:pointer;transition:all .2s ease;border:1px solid #374151}.passage-card:hover{transform:translateY(-2px);border-color:#60a5fa;box-shadow:0 4px 12px #60a5fa33}.passage-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.passage-header h3{margin:0;font-size:1rem;color:#f9fafb;flex:1;margin-right:.5rem}.level-badge{padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600;color:#111827;white-space:nowrap}.passage-meta{display:flex;gap:.5rem;flex-wrap:wrap}.passage-meta .topic,.passage-meta .duration,.passage-meta .speed{font-size:.8rem;color:#9ca3af;background:#111827;padding:.25rem .5rem;border-radius:.25rem}.loading,.no-passages{text-align:center;padding:2rem;color:#9ca3af}.listening-view{display:flex;flex-direction:column;gap:1.5rem}.passage-info{text-align:center}.passage-info h2{margin:0 0 .75rem;color:#f9fafb}.passage-badges{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}.topic-badge{padding:.25rem .75rem;border-radius:.25rem;font-size:.8rem;background:#374151;color:#f9fafb}.audio-player{background:#1f2937;border-radius:1rem;padding:1.5rem;border:1px solid #374151}.audio-visualizer{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:60px;margin-bottom:1.5rem}.wave-bar{width:6px;background:linear-gradient(to top,#60a5fa,#a78bfa);border-radius:3px;height:20%;transition:height .1s ease}.audio-visualizer.playing .wave-bar{animation:wave .5s ease-in-out infinite alternate}@keyframes wave{0%{height:20%}to{height:100%}}.audio-visualizer:not(.playing) .wave-bar{animation:none;height:20%}.progress-container{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.time-current,.time-total{font-size:.8rem;color:#9ca3af;min-width:40px;text-align:center}.progress-bar{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#374151;border-radius:3px;cursor:pointer}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#60a5fa;border-radius:50%;cursor:pointer}.progress-bar::-moz-range-thumb{width:14px;height:14px;background:#60a5fa;border-radius:50%;cursor:pointer;border:none}.player-controls{display:flex;justify-content:center;align-items:center;gap:1rem}.control-btn{background:#374151;border:none;color:#f9fafb;width:48px;height:48px;border-radius:50%;font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#4b5563;transform:scale(1.05)}.play-btn{background:#60a5fa;width:64px;height:64px;font-size:1.5rem}.play-btn:hover{background:#3b82f6}.speed-control{display:flex;gap:.5rem;margin-left:1rem}.speed-btn{padding:.5rem .75rem;border:1px solid #374151;background:#1f2937;color:#9ca3af;border-radius:.5rem;cursor:pointer;font-size:.85rem;transition:all .2s ease}.speed-btn:hover{border-color:#60a5fa;color:#f9fafb}.speed-btn.active{background:#60a5fa;color:#111827;border-color:#60a5fa}.listening-instructions{background:#1f2937;border-radius:.75rem;padding:1rem;border:1px solid #374151}.listening-instructions p{margin:.5rem 0;color:#9ca3af;font-size:.9rem}.listening-instructions p:first-child{margin-top:0}.listening-instructions p:last-child{margin-bottom:0}.listening-actions,.questions-actions,.results-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem}.continue-btn,.submit-btn,.next-btn{padding:.75rem 1.5rem;background:#60a5fa;color:#111827;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover:not(:disabled),.submit-btn:hover:not(:disabled),.next-btn:hover:not(:disabled){background:#3b82f6}.continue-btn:disabled,.submit-btn:disabled{background:#4b5563;color:#9ca3af;cursor:not-allowed}.back-btn{padding:.75rem 1.5rem;background:transparent;color:#9ca3af;border:1px solid #374151;border-radius:.5rem;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#60a5fa;color:#f9fafb}.questions-view{display:flex;flex-direction:column;gap:1rem}.questions-header{display:flex;justify-content:space-between;align-items:center}.questions-header h2{margin:0;color:#f9fafb}.progress{color:#9ca3af;font-size:.9rem}.questions-list{display:flex;flex-direction:column;gap:1rem}.question-card{background:#1f2937;border-radius:.75rem;padding:1rem;border:1px solid #374151;transition:border-color .2s ease}.question-card.answered{border-color:#60a5fa}.question-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.question-number{background:#374151;color:#f9fafb;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem}.question-type{font-size:.8rem;color:#9ca3af;background:#111827;padding:.25rem .5rem;border-radius:.25rem}.question-text{margin:0 0 1rem;color:#f9fafb;font-size:1rem;line-height:1.5}.options-list{display:flex;flex-direction:column;gap:.5rem}.option-label{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#111827;border-radius:.5rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.option-label:hover{background:#1f2937;border-color:#4b5563}.option-label.selected{background:#60a5fa33;border-color:#60a5fa}.option-label input{display:none}.option-letter{background:#374151;color:#f9fafb;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;flex-shrink:0}.option-label.selected .option-letter{background:#60a5fa;color:#111827}.option-text{color:#f9fafb;flex:1}.results-view{display:flex;flex-direction:column;gap:1.5rem}.results-header{display:flex;flex-direction:column;align-items:center;gap:1rem}.results-header h2{margin:0;color:#f9fafb}.score-circle{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.score-value{background:#1f2937;width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:700;color:#f9fafb}.results-stats{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.stat-item{text-align:center}.stat-label{display:block;color:#9ca3af;font-size:.85rem;margin-bottom:.25rem}.stat-value{display:block;color:#f9fafb;font-size:1.25rem;font-weight:600}.stat-value.correct{color:#4ade80}.transcript-reveal{text-align:center;padding:1rem}.show-transcript-btn{padding:.75rem 1.5rem;background:#374151;color:#f9fafb;border:1px solid #4b5563;border-radius:.5rem;cursor:pointer;transition:all .2s ease}.show-transcript-btn:hover{background:#4b5563;border-color:#60a5fa}.transcript-section{background:#1f2937;border-radius:.75rem;padding:1rem;border:1px solid #374151}.transcript-section h3{margin:0 0 .75rem;color:#f9fafb}.transcript-content{background:#111827;border-radius:.5rem;padding:1rem}.transcript-text{color:#d1d5db;line-height:1.6;white-space:pre-wrap}.answers-review h3{margin:0 0 1rem;color:#f9fafb}.answer-review{background:#1f2937;border-radius:.75rem;padding:1rem;margin-bottom:1rem;border:1px solid #374151;border-left:4px solid #ef4444}.answer-review.correct{border-left-color:#4ade80}.answer-review-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.answer-status{font-weight:600;font-size:.9rem}.answer-review.correct .answer-status{color:#4ade80}.answer-review:not(.correct) .answer-status{color:#ef4444}.answer-details{margin:.75rem 0;padding:.75rem;background:#111827;border-radius:.5rem}.your-answer,.correct-answer{display:flex;gap:.5rem;margin:.25rem 0}.label{color:#9ca3af;font-size:.85rem}.value{color:#f9fafb}.value.correct{color:#4ade80}.value.wrong{color:#ef4444}.explanation{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #374151}.explanation p{margin:.5rem 0 0;color:#d1d5db;font-size:.9rem;line-height:1.5}.error-message{background:#ef444433;border:1px solid #ef4444;color:#fca5a5;padding:1rem;border-radius:.5rem;margin-bottom:1rem}.furigana-toggle{background:#374151;border:1px solid #4b5563;color:#f9fafb;width:36px;height:36px;border-radius:.5rem;cursor:pointer;font-size:1rem;transition:all .2s ease}.furigana-toggle:hover{border-color:#60a5fa}.furigana-text rt{font-size:.5em;color:#9ca3af}@media (max-width: 640px){.passages-grid{grid-template-columns:1fr}.player-controls{flex-wrap:wrap}.speed-control{width:100%;justify-content:center;margin-left:0;margin-top:.5rem}.results-stats{gap:1rem}.listening-actions,.questions-actions,.results-actions{flex-direction:column}.back-btn,.continue-btn,.submit-btn,.next-btn{width:100%}}.app{min-height:100vh;background:#1a1a2e;color:#fff;display:flex;flex-direction:column}.progress-dashboard{flex:1;max-width:1000px;margin:0 auto;padding:20px;width:100%;box-sizing:border-box}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;text-align:center}.loading-spinner{font-size:48px;animation:pulse 1.5s ease-in-out infinite;margin-bottom:16px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.error-message{color:#e94560;font-size:16px;margin-bottom:16px}.retry-btn{background:#e94560;border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.retry-btn:hover{background:#ff6b6b}.progress-dashboard section h2{font-size:20px;color:#fff;margin:0 0 16px;font-weight:600}.progress-dashboard section h3{font-size:16px;color:#aaa;margin:0 0 12px;font-weight:500}.overview-section{margin-bottom:24px}.overview-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width: 768px){.overview-cards{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.overview-cards{grid-template-columns:repeat(5,1fr)}}.stat-card{background:#16213e;border-radius:12px;padding:16px;border:1px solid #0f3460;display:flex;align-items:center;gap:12px;transition:all .2s}.stat-card:hover{border-color:#e94560;transform:translateY(-2px)}.streak-card{border-color:#e9456080}.stat-icon{font-size:28px;flex-shrink:0}.stat-content{display:flex;flex-direction:column;min-width:0}.stat-value{font-size:24px;font-weight:700;color:#fff;line-height:1.2}.stat-label{font-size:12px;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.stat-sublabel{font-size:11px;color:#666;margin-top:2px}.jlpt-section{margin-bottom:24px}.jlpt-levels{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 768px){.jlpt-levels{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.jlpt-levels{grid-template-columns:repeat(3,1fr)}}.jlpt-card{background:#16213e;border-radius:12px;padding:20px;border:1px solid #0f3460}.jlpt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.jlpt-badge{background:linear-gradient(135deg,#e94560,#ff6b6b);color:#fff;font-weight:700;font-size:14px;padding:4px 12px;border-radius:6px}.jlpt-percentage{font-size:20px;font-weight:700;color:#4a9eff}.jlpt-progress-bar{height:8px;background:#0f3460;border-radius:4px;overflow:hidden;margin-bottom:16px}.jlpt-progress-fill{height:100%;background:linear-gradient(90deg,#e94560,#ff6b6b);border-radius:4px;transition:width .3s ease}.jlpt-stats{display:flex;gap:24px}.jlpt-stat{display:flex;flex-direction:column}.jlpt-stat-value{font-size:16px;font-weight:600;color:#fff}.jlpt-stat-label{font-size:12px;color:#aaa}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}@media (min-width: 1024px){.dashboard-grid{grid-template-columns:1fr 1fr}}.activity-section{background:#16213e;border-radius:12px;padding:20px;border:1px solid #0f3460}.activity-chart{display:flex;align-items:flex-end;justify-content:space-between;height:150px;gap:8px;margin-bottom:16px;padding-top:10px}.activity-bar-container{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.activity-bar-wrapper{width:100%;height:100px;display:flex;align-items:flex-end;justify-content:center;gap:2px}.activity-bar{width:12px;border-radius:4px 4px 0 0;transition:height .3s ease;min-height:4px}.grammar-bar{background:#4a9eff}.kanji-bar{background:#e94560}.empty-bar{width:12px;height:4px;background:#0f3460;border-radius:4px}.activity-label{font-size:11px;color:#aaa;text-align:center}.activity-value{font-size:12px;font-weight:600;color:#fff}.activity-legend{display:flex;justify-content:center;gap:20px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#aaa}.legend-color{width:12px;height:12px;border-radius:3px}.grammar-color{background:#4a9eff}.kanji-color{background:#e94560}.categories-section{background:#16213e;border-radius:12px;padding:20px;border:1px solid #0f3460}.categories-list{display:flex;flex-direction:column;gap:12px}.category-item{display:flex;flex-direction:column;gap:6px}.category-info{display:flex;justify-content:space-between;align-items:center}.category-name{font-size:14px;font-weight:500;color:#fff}.category-attempts{font-size:12px;color:#666}.category-bar-container{height:6px;background:#0f3460;border-radius:3px;overflow:hidden}.category-bar{height:100%;border-radius:3px;transition:width .3s ease}.category-accuracy{font-size:12px;font-weight:600;text-align:right}.weak-points-section,.weak-categories{margin-bottom:24px}.weak-categories-grid{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 768px){.weak-categories-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.weak-categories-grid{grid-template-columns:repeat(3,1fr)}}.weak-category-card{background:#16213e;border-radius:12px;padding:16px;border:1px solid #0f3460;display:flex;flex-direction:column;gap:8px}.weak-category-name{font-size:14px;font-weight:600;color:#fff}.weak-category-accuracy{font-size:24px;font-weight:700}.weak-category-meta{font-size:12px;color:#666}.weak-patterns{margin-bottom:24px}.weak-patterns-list{display:flex;flex-direction:column;gap:8px}.weak-pattern-item{background:#16213e;border-radius:8px;padding:12px 16px;border:1px solid #0f3460;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.weak-pattern-info{display:flex;flex-direction:column;flex:1;min-width:0}.weak-pattern-name{font-size:14px;font-weight:500;color:#fff}.weak-pattern-category{font-size:12px;color:#aaa}.weak-pattern-stats{display:flex;flex-direction:column;align-items:flex-end;min-width:60px}.weak-pattern-accuracy{font-size:16px;font-weight:600}.weak-pattern-attempts{font-size:12px;color:#666}.confused-pairs{margin-bottom:24px}.confused-pairs-list{display:flex;flex-direction:column;gap:8px}.confused-pair-item{background:#16213e;border-radius:8px;padding:12px 16px;border:1px solid #0f3460}.confused-pair-patterns{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}.pattern-name{font-size:14px;font-weight:500;color:#fff;background:#1a1a2e;padding:4px 10px;border-radius:6px;border:1px solid #0f3460}.confused-arrow{font-size:16px}.confused-pair-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.confused-count{color:#e94560}.confused-category{color:#aaa}.practice-btn{background:#e94560;border:none;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}.practice-btn:hover{background:#ff6b6b}.practice-btn.small{padding:6px 12px;font-size:12px}.empty-message{text-align:center;color:#666;font-size:14px;padding:20px}.empty-weak-points{text-align:center;padding:40px 20px;color:#aaa}.empty-weak-points p:first-child{font-size:18px;margin-bottom:8px;color:#27ae60}.empty-weak-points p:last-child{font-size:14px}.quick-actions{margin-bottom:24px}.action-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width: 768px){.action-buttons{grid-template-columns:repeat(4,1fr)}}.action-btn{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .2s;color:#fff}.action-btn:hover{border-color:#e94560;transform:translateY(-2px)}.action-icon{font-size:28px}.action-btn span:last-child{font-size:13px;font-weight:500}.back-btn{background:#e9456033;border:1px solid #e94560;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.back-btn:hover{background:#e94560}@media (max-width: 768px){.progress-dashboard,.stat-card{padding:12px}.stat-icon{font-size:24px}.stat-value{font-size:20px}.weak-pattern-item{flex-direction:column;align-items:flex-start;gap:8px}.weak-pattern-stats{flex-direction:row;gap:12px;width:100%;justify-content:space-between;align-items:center}.practice-btn{width:100%}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#fff;min-height:100vh}.app{width:100%;max-width:100%;margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh}.app>main{width:100%;max-width:1000px;margin:0 auto;padding:20px;flex:1}header{text-align:center}header h1{font-size:2rem;margin-bottom:1.5rem}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}.login-container h1{font-size:2.5rem;margin-bottom:2rem}.login-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:300px}.login-form input{padding:12px 16px;border:2px solid #333;border-radius:8px;background:#16213e;color:#fff;font-size:1rem}.login-form button{padding:12px 24px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:1rem;cursor:pointer;transition:background .3s}.login-form button:hover{background:#c73e54}.quotes-container{margin-top:40px;max-width:400px;text-align:center}.quote{margin:20px 0;padding:16px 20px;border-left:3px solid var(--accent-color, #4CAF50);background:#4caf500d;border-radius:0 8px 8px 0}.quote-text{display:block;font-style:italic;font-size:15px;color:var(--text-secondary, #888);line-height:1.5}.quote-author{display:block;margin-top:8px;font-size:13px;color:var(--text-muted, #666)}.quote-footer{position:fixed;bottom:30px;left:0;right:0;text-align:center;font-size:12px;font-style:italic;color:#fff6;pointer-events:none}.setup{display:flex;flex-direction:column;gap:.75rem;max-width:400px;margin:0 auto;padding:0 1rem}.language-select,.gender-select{display:flex;gap:10px}.language-select button,.gender-select button{padding:12px 24px;border:2px solid #333;border-radius:8px;background:#16213e;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s}.language-select button.active,.gender-select button.active{border-color:#e94560;background:#e94560}.options{margin:10px 0}.options label{display:flex;align-items:center;gap:8px;cursor:pointer}.options input[type=checkbox]{width:20px;height:20px;accent-color:#e94560}.end-btn{padding:14px 32px;border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .3s}.end-btn{background:#333;color:#fff;padding:8px 16px;font-size:.9rem}.logout-btn{background:#666;color:#fff;padding:8px 16px;font-size:.9rem;margin-left:8px}.logout-btn:hover{background:#888}.session-info{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:nowrap}.session-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.session-right{display:flex;gap:8px;align-items:center;flex-shrink:0}.global-volume{display:flex;align-items:center;gap:4px;background:#16213e;padding:4px 8px;border-radius:6px;border:1px solid #333}.global-volume input[type=range]{width:60px;height:4px;accent-color:#e94560}.mode-btn,.end-btn{padding:6px 12px;font-size:.85rem}padding: 12px 16px; background: #16213e; border-radius: 8px; margin-bottom: 1rem; } .session-info button{margin-left:8px}.messages{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem;max-height:400px;overflow-y:auto}.message{padding:12px 16px;border-radius:12px;max-width:80%}.message.assistant{background:#0f3460;align-self:flex-start}.message.user{background:#e94560;align-self:flex-end}.message .text{font-size:150%;line-height:1.6}.message .text ruby{font-size:100%}.message .text rt{font-size:50%}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem}.role-badge{font-weight:700;opacity:.8}.translate-toggle{background:#fff3;border:none;padding:4px 8px;border-radius:4px;color:#fff;font-size:.75rem;cursor:pointer}.translate-toggle:hover{background:#ffffff4d}.audio-player{margin-top:8px}.play-btn{background:#fff3;border:none;padding:8px 16px;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem}.play-btn:hover{background:#ffffff4d}.play-btn.playing{background:#e94560;animation:pulse-red 1.5s infinite}.play-btn.playing:hover{background:#f44}@keyframes pulse-red{0%,to{box-shadow:0 0 #e94560b3}50%{box-shadow:0 0 0 10px #e9456000}}.input-area{display:flex;gap:10px;align-items:center}.input-area input{flex:1;padding:12px 16px;border:2px solid #333;border-radius:8px;background:#16213e;color:#fff;font-size:1rem}.input-area button{padding:12px 20px;border:none;border-radius:8px;background:#0f3460;color:#fff;font-size:1rem;cursor:pointer;transition:background .3s}.input-area button:hover{background:#1a4a7a}.help-text{text-align:center;color:#888;font-size:.9rem;margin-bottom:20px;padding:12px;background:#16213e;border-radius:8px;border:1px solid #333}.audio-loading{margin-top:8px;color:#888;font-size:.85rem}.loading-dots:after{content:"";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}.practice-setup{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px 20px;text-align:center}.practice-setup h2{font-size:2rem;margin-bottom:8px;color:#fff}.setup-lesson-title{font-size:1.2rem;color:#e94560;margin-bottom:40px;font-weight:500}.setup-options{background:#16213e;border:2px solid #333;border-radius:12px;padding:24px 32px;margin-bottom:32px;min-width:300px}.setup-toggle{display:flex;align-items:flex-start;gap:12px;cursor:pointer;text-align:left}.setup-toggle input{width:20px;height:20px;margin-top:2px;accent-color:#e94560;cursor:pointer}.toggle-label{font-weight:600;font-size:1.1rem;color:#fff;display:block}.toggle-description{font-size:.85rem;color:#888;display:block;margin-top:4px}.start-practice-btn{background:#e94560;color:#fff;border:none;padding:16px 48px;border-radius:12px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s;margin-bottom:16px}.start-practice-btn:hover{background:#c73e54;transform:translateY(-2px)}.cancel-practice-btn{background:transparent;color:#888;border:2px solid #333;padding:12px 32px;border-radius:12px;font-size:1rem;cursor:pointer;transition:all .3s}.cancel-practice-btn:hover{border-color:#e94560;color:#e94560}.setup-section{margin-top:20px;padding-top:20px;border-top:1px solid #333}.setup-section-label{display:block;font-weight:600;color:#fff;margin-bottom:12px;font-size:1.1rem}.setup-voice-select{display:flex;gap:12px;justify-content:center}.setup-voice-select button{padding:10px 20px;border:2px solid #333;border-radius:8px;background:#16213e;color:#aaa;font-size:.95rem;cursor:pointer;transition:all .3s}.setup-voice-select button:hover{border-color:#555;color:#fff}.setup-voice-select button.active{border-color:#e94560;background:#e945601a;color:#fff}.setup-hint{display:block;margin-top:8px;font-size:.8rem;color:#888;font-style:italic}.setup-hint{min-height:1.5rem;display:block}.lesson-number{display:inline-block;background:#e94560;color:#fff;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700;margin-bottom:4px;width:fit-content}.repeat-mode{max-width:600px}.mode-controls{display:flex;gap:10px;justify-content:center;margin-top:1rem}.mode-btn{background:#16213e;border:2px solid #333;padding:10px 20px;border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem}.mode-btn:hover{background:#1a4a7a}.repeat-mode-btn,.lesson-mode-btn,.memory-mode-btn,.grammar-mode-btn{background:#16213e!important;border:2px solid #e94560!important;color:#fff!important;margin-top:10px;padding:12px 24px;border-radius:8px;font-size:1rem;cursor:pointer;width:100%;max-width:300px;transition:all .3s}.repeat-mode-btn:hover,.lesson-mode-btn:hover,.memory-mode-btn:hover,.grammar-mode-btn:hover{background:#e94560!important}.memory-mode-btn{border-color:#9b59b6!important}.memory-mode-btn:hover{background:#9b59b6!important}.repeat-main{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.phrase-card{background:#16213e;border-radius:16px;padding:2rem;width:100%;text-align:center}.phrase-display{font-size:2rem;margin-bottom:1rem;min-height:80px;display:flex;align-items:center;justify-content:center}.phrase-display .plain-text,.phrase-jp{font-size:2.5rem;font-weight:500}.transcription-comparison{font-size:1.1rem}.transcription-comparison .expected,.transcription-comparison .heard{font-size:1.2rem}.phrase-controls{margin-top:1rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.play-btn.large{padding:14px 32px;font-size:1.1rem;background:#0f3460}.play-btn.large:hover{background:#1a4a7a}.translate-btn{padding:14px 24px;font-size:1rem;background:#16213e;border:2px solid #333;color:#fff;border-radius:8px;cursor:pointer;transition:all .2s}.translate-btn:hover{background:#1a4a7a;border-color:#0f3460}.translation-display{margin:1rem 0;padding:.75rem 1rem;background:#e945601a;border:1px solid #e94560;border-radius:8px;color:#fff;font-size:1rem}.volume-control{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.5rem 1rem;background:#16213e;border-radius:8px}.volume-control label{font-size:.9rem;color:#aaa}.volume-control input[type=range]{flex:1;min-width:100px}.volume-control span{font-size:.85rem;color:#888;min-width:40px;text-align:right}.recorder-disabled{padding:2rem;background:#16213e;border:2px dashed #333;border-radius:12px;text-align:center;color:#888}.result-card{background:#16213e;border-radius:16px;padding:1.5rem;width:100%;border:2px solid #333;margin-top:1.5rem}.result-card.score-100{border-color:#4ade80;background:#4ade801a}.result-card.score-80{border-color:#60a5fa;background:#60a5fa1a}.result-card.score-50{border-color:#fbbf24;background:#fbbf241a}.result-card.score-0{border-color:#f87171;background:#f871711a}.score-display{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.score-number{font-size:3rem;font-weight:700;color:#e94560}.feedback{font-size:1.2rem;color:#fff}.transcription-comparison{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}.transcription-comparison label{color:#888}.errors-section{margin-top:1rem;padding-top:1rem;border-top:1px solid #333}.errors-section label{display:block;color:#fbbf24;font-weight:600;margin-bottom:.5rem}.errors-section ul{list-style:none;padding:0;margin:0}.errors-section li{color:#ccc;padding:4px 0;padding-left:1.5rem;position:relative}.errors-section li:before{content:"→";position:absolute;left:0;color:#e94560}.result-phrase-section{margin:1rem 0;padding:1rem;background:#ffffff0d;border-radius:8px;text-align:center}.result-phrase-section label{display:block;color:#888;font-size:.8rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.result-furigana-text{font-size:150%!important;line-height:1.6;margin:.5rem 0}.result-furigana-text ruby{ruby-align:center}.result-furigana-text rt{font-size:50%;color:#888}.result-translation{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);color:#4ade80;font-size:1rem;font-style:italic}.next-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:16px 32px;border:none;border-radius:8px;background:#0f3460;color:#fff;font-size:1.1rem;cursor:pointer;min-height:64px}.next-btn:hover{background:#1a4a7a}.next-btn:disabled{background:#2a3a4a;color:#666;cursor:not-allowed;opacity:.6}.shortcut-hint{color:#888;font-size:.7rem;font-weight:400}.transcription-comparison .expected{color:#4ade80}.transcription-comparison .heard{color:#fbbf24}.voice-recorder-section{margin-top:16px;padding:16px;background:#16213e;border-radius:12px;border:1px solid #333}.mode-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:12px;background:#1a1a2e;padding:4px;border-radius:8px}.mode-toggle button{padding:8px 16px;border:none;border-radius:6px;background:transparent;color:#888;font-size:.85rem;cursor:pointer;transition:all .2s;flex:1}.mode-toggle button.active{background:#e94560;color:#fff}.mode-toggle button:hover:not(.active){color:#fff}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.furigana-text ruby{ruby-align:center}.furigana-text rt{font-size:.5em;color:#aaa}.toggle-furigana{background:#ffffff1a;border:none;padding:8px 16px;border-radius:20px;color:#aaa;cursor:pointer;font-size:.85rem;margin-top:8px}.toggle-furigana:hover{background:#fff3;color:#fff}.repeat-controls{display:flex;gap:1rem;width:100%;justify-content:center;align-items:center}.record-btn.large{padding:20px 48px;font-size:1.3rem}.voice-recorder-wrapper{position:relative;width:100%}.recorder-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:#16213ef2;border:2px dashed #333;border-radius:12px;color:#888;z-index:10}.recorder-overlay p{margin-top:1rem;font-size:.95rem}.loading-typing{display:flex;gap:6px;align-items:center}.loading-typing span{width:10px;height:10px;background:#e94560;border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out both}.loading-typing span:nth-child(1){animation-delay:-.32s}.loading-typing span:nth-child(2){animation-delay:-.16s}.loading-typing span:nth-child(3){animation-delay:0s}@keyframes typingBounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.typing-indicator{display:flex;gap:4px;align-items:center;padding:8px 0}.typing-indicator span{width:8px;height:8px;background:#e94560;border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}.typing-indicator span:nth-child(3){animation-delay:0s}.translate-toggle:disabled{opacity:.5;cursor:not-allowed}.jp-text{margin-bottom:8px}.translation-text{padding-top:8px;border-top:1px solid #333;color:#aaa;font-size:.95rem;margin-top:4px}.audio-player-with-progress{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#0f3460;border-radius:8px;margin-top:8px}.audio-player-with-progress .play-btn,.audio-player-with-progress .stop-btn{width:40px;height:40px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;background:#16213e;border:2px solid #333;color:#fff;cursor:pointer;transition:all .2s}.audio-player-with-progress .play-btn:hover,.audio-player-with-progress .stop-btn:hover{background:#1a4a7a;border-color:#0f3460}.audio-player-with-progress .play-btn.playing{background:#e94560;border-color:#e94560}.audio-player-with-progress .stop-btn{font-size:.9rem}.progress-container{flex:1;display:flex;flex-direction:column;gap:4px}.progress-bar{height:6px;background:#16213e;border-radius:3px;cursor:pointer;position:relative;overflow:visible}.progress-fill{height:100%;background:#e94560;border-radius:3px;transition:width .05s linear;position:absolute;left:0;top:0}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0006;pointer-events:none;z-index:2}.time-display{display:flex;justify-content:space-between;font-size:.75rem;color:#888}@media (max-width: 480px){.app{max-width:100%}header h1{font-size:1.5rem;margin-bottom:1rem}.login-container h1{font-size:1.8rem}.login-form{max-width:100%;padding:0 16px}.language-select,.gender-select{flex-wrap:wrap;justify-content:center}.language-select button,.gender-select button{padding:10px 16px;font-size:.9rem}.session-info{flex-direction:column;gap:12px;padding:12px}.session-left,.session-right{width:100%;justify-content:center;flex-wrap:wrap;gap:8px}.messages{height:calc(100vh - 280px);min-height:300px}.message{max-width:90%;padding:12px}.message-header{flex-wrap:wrap;gap:8px}.role-badge{font-size:.75rem;padding:3px 8px}.input-area{padding:12px}.input-area input{font-size:16px;padding:12px}.practice-setup{padding:20px 16px;min-height:70vh}.practice-setup h2{font-size:1.5rem}.setup-lesson-title{font-size:1rem}.setup-options{min-width:auto;width:100%;padding:20px}.start-practice-btn{padding:14px 32px;font-size:1.1rem;width:100%}.cancel-practice-btn{width:100%}.lesson-mode{padding:12px}.lesson-header{flex-direction:column;gap:12px;text-align:center}.lesson-header h2{font-size:1.3rem}.lesson-tabs{flex-wrap:wrap;gap:8px}.lesson-tabs button{padding:8px 12px;font-size:.85rem}.vocab-grid{grid-template-columns:1fr}.grammar-card{padding:16px}.lesson-card{padding:12px 16px}.lesson-card-header{flex-direction:column;gap:4px}.lesson-card-stats{flex-wrap:wrap;gap:8px}.stats-grid{grid-template-columns:1fr}.mode-controls{flex-direction:column;gap:8px;width:100%}.mode-btn{width:100%;padding:12px}.audio-player{width:100%}.audio-controls{flex-wrap:wrap}.voice-recorder{padding:12px}.record-btn{width:60px;height:60px}.record-btn:before{width:24px;height:24px}.repeat-mode .target-text{font-size:1.5rem}.score-display{font-size:2.5rem}.furigana-toggle{margin-bottom:12px}.big-button{padding:16px 24px;font-size:1rem}}@media (max-width: 375px){.messages{height:calc(100vh - 260px)}.practice-setup h2{font-size:1.3rem}.setup-options{padding:16px}}@media (max-height: 500px) and (orientation: landscape){.messages{height:calc(100vh - 200px)}.practice-setup{min-height:auto;padding:16px}}@supports (padding: max(0px)){.app>main{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}}.checking-pronunciation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background:#16213e;border:2px solid #333;border-radius:12px;margin:20px 0}.checking-pronunciation p{color:#aaa;margin-top:12px;font-size:.95rem}.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1a1a2e}.loading-content{text-align:center}.loading-spinner{width:50px;height:50px;border:4px solid #333;border-top-color:#7289da;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-content p{color:#888;font-size:1.1rem}