.matching-container{width:100%;max-width:700px;margin:0 auto;animation:.6s ease-out fadeInUp}.matching-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px;display:grid}.matching-column{flex-direction:column;gap:12px;display:flex}.column-title{font-family:var(--font-ui);color:var(--color-ink-muted);text-align:center;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:.875rem;font-weight:600}.match-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-ui);color:var(--color-ink);height:100px;min-height:100px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;padding:20px;font-size:1.5rem;font-weight:500;transition:background .2s,border-color .2s,box-shadow .2s;display:flex}.match-item:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}.match-item:focus{outline:none}.match-item.selected{transition:none;background:var(--color-accent-surface)!important;border:1px solid var(--color-accent)!important;box-shadow:var(--shadow-sm)!important}.match-item.selected:hover:not(:disabled){transform:none;background:var(--color-accent-surface)!important;border:1px solid var(--color-accent)!important;box-shadow:var(--shadow-sm)!important}.match-item.matched{background:var(--color-correct-surface);border-color:var(--color-correct);color:var(--color-correct);cursor:default;box-shadow:var(--shadow-sm)}.match-item.incorrect{background:var(--color-error-surface);border-color:var(--color-error);color:var(--color-error);box-shadow:var(--shadow-sm);animation:.4s ease-in-out shake}.match-item:disabled{cursor:not-allowed}.match-character{font-family:var(--font-jp);font-size:2.5rem}.match-romaji{font-family:var(--font-ui);color:var(--color-ink);font-size:1.75rem}.matching-progress{text-align:center;font-family:var(--font-ui);color:var(--color-ink-muted);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);padding:16px;font-size:1rem;font-weight:600}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media (max-width:768px){.matching-grid{gap:24px}.match-item{height:85px;min-height:85px;padding:16px;font-size:1.25rem}.match-character{font-size:2rem}.match-romaji{font-size:1.25rem}.column-title{font-size:.9rem}}@media (max-width:480px){.matching-grid{gap:16px}.matching-column{gap:10px}.match-item{height:75px;min-height:75px;padding:14px;font-size:1.1rem}.match-character{font-size:1.75rem}.match-romaji{font-size:1.1rem}.column-title{margin-bottom:4px;font-size:.85rem}.matching-progress{padding:12px;font-size:1rem}}
.review-container{width:100%;max-width:1000px;margin:0 auto;animation:.6s ease-out fadeInUp}.review-title{font-family:var(--font-heading);color:var(--color-ink);text-align:center;margin-bottom:40px;font-size:1.5rem;font-weight:700}.review-section{margin-bottom:40px}.section-title{font-family:var(--font-ui);color:var(--color-ink);text-align:center;margin-bottom:20px;font-size:1.125rem;font-weight:600}.review-grid{gap:16px;display:grid}.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,1fr)}.contracted-grid{grid-template-columns:repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.review-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);padding:20px;transition:background .2s,border-color .2s,box-shadow .2s;position:relative}.review-card:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}.review-card.empty-card{box-shadow:none;cursor:default;pointer-events:none;background:0 0;border:none}.review-card.empty-card:hover{transform:none}.review-audio-icon{opacity:.5;color:var(--color-ink-subtle);pointer-events:none;justify-content:center;align-items:center;padding:0;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}.review-audio-icon svg{width:18px;height:18px}.review-card:hover .review-audio-icon{opacity:1;color:var(--color-accent)}.review-character{font-family:var(--font-jp);color:var(--color-ink);margin-bottom:8px;font-size:3rem;font-weight:400}.review-romaji{font-family:var(--font-ui);color:var(--color-ink-muted);font-size:1rem;font-weight:500}.section-count{text-align:center;font-family:var(--font-ui);color:var(--color-ink-subtle);padding:8px;font-size:.9rem;font-weight:500}.back-to-top-btn{border:1px solid var(--color-border);background:var(--color-surface);width:44px;height:44px;color:var(--color-ink);cursor:pointer;box-shadow:var(--shadow-md);z-index:1200;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex;position:fixed;bottom:16px;right:16px}.back-to-top-btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}@media (max-width:768px){.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,1fr)}.contracted-grid{grid-template-columns:repeat(3,1fr)}.review-grid{gap:8px}.review-card{padding:12px}.review-character{font-size:2rem}.review-romaji{font-size:.9rem}.review-title{margin-bottom:24px;font-size:1.25rem}.section-title{margin-bottom:16px;font-size:1rem}.review-section{margin-bottom:40px}.review-audio-icon svg{width:16px;height:16px}}@media (max-width:480px){.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,1fr)}.contracted-grid{grid-template-columns:repeat(3,1fr)}.review-grid{gap:6px}.review-card{padding:10px}.review-character{font-size:1.75rem}.review-romaji{font-size:.8rem}.review-title{margin-bottom:20px;font-size:1.125rem}.section-title{margin-bottom:12px;font-size:.95rem}.review-section{margin-bottom:32px}.review-audio-icon{bottom:4px;right:4px}.review-audio-icon svg{width:14px;height:14px}}
.character-selector-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#1a151099;justify-content:center;align-items:center;padding:20px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.character-selector-modal{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;box-shadow:var(--shadow-lg);flex-direction:column;animation:.3s ease-out slideUp;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.character-selector-header{border-bottom:1px solid var(--color-border);background:var(--color-surface);z-index:10;border-radius:var(--radius-lg)var(--radius-lg)0 0;flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex;position:sticky;top:0}.character-selector-header h2{font-family:var(--font-heading);color:var(--color-ink);margin:0;font-size:1.5rem;font-weight:700}.character-selector-close{color:var(--color-ink-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.character-selector-close:hover{background:var(--color-surface-hover);color:var(--color-ink)}.character-selector-controls{border-bottom:1px solid var(--color-border);background:var(--color-surface);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}.character-selector-count{font-family:var(--font-ui);color:var(--color-ink-muted);font-size:.9rem;font-weight:500}.character-selector-buttons{gap:8px;display:flex}.selector-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font-family:var(--font-ui);cursor:pointer;box-shadow:var(--shadow-sm);padding:6px 16px;font-size:.85rem;font-weight:500;transition:all .2s}.selector-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong)}.selector-btn.primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}.selector-btn.primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.selector-btn.cancel{border-color:var(--color-border);color:var(--color-ink-muted);background:0 0}.selector-btn.cancel:hover{background:var(--color-surface-hover);color:var(--color-ink)}.character-selector-section-buttons{border-bottom:1px solid var(--color-border);background:var(--color-surface);flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:12px;padding:16px 24px;display:flex}.selector-section-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font-family:var(--font-ui);cursor:pointer;box-shadow:var(--shadow-sm);padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .2s}.selector-section-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong)}.selector-section-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}.selector-section-btn.active:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.character-selector-content{flex:1;min-height:0;max-height:calc(100vh - 300px);padding:20px 24px;overflow-y:auto}.character-selector-section{margin-bottom:32px}.character-selector-section:last-child{margin-bottom:0}.selector-section-title{font-family:var(--font-ui);color:var(--color-ink);text-align:center;margin-bottom:20px;font-size:1.125rem;font-weight:600}.row-column-controls{background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);flex-direction:column;gap:12px;margin-bottom:16px;padding:12px;display:flex}.row-controls,.column-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.control-label{font-family:var(--font-ui);color:var(--color-ink-muted);margin-right:4px;font-size:.85rem;font-weight:600}.row-column-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font-family:var(--font-ui);cursor:pointer;min-width:32px;padding:4px 10px;font-size:.75rem;font-weight:600;transition:all .2s}.row-column-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong)}.row-column-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}.row-column-btn.active:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.character-selector-grid{gap:16px;display:grid}.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.character-selector-grid-with-headers{gap:8px;display:grid}.character-selector-grid-with-headers.basic-grid-with-headers,.character-selector-grid-with-headers.diacritical-grid-with-headers{grid-template-columns:32px repeat(5,1fr)}.character-selector-grid-with-headers.contracted-grid-with-headers{grid-template-columns:32px repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.grid-column-header-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);width:100%;height:32px;color:var(--color-ink-muted);font-family:var(--font-ui);cursor:pointer;justify-content:center;align-items:center;padding:0;font-size:.75rem;font-weight:500;transition:all .2s;display:flex}.grid-column-header-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-ink)}.grid-row-header-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);width:32px;height:100%;min-height:70px;color:var(--color-ink-muted);font-family:var(--font-ui);cursor:pointer;justify-content:center;align-items:center;padding:0;font-size:.75rem;font-weight:500;transition:all .2s;display:flex}.grid-row-header-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-ink)}.row-arrow{display:inline-block;transform:rotate(-90deg)}.column-arrow,.row-arrow{font-size:1.2rem;font-weight:700;line-height:1;font-family:var(--font-ui)}.character-selector-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);flex-direction:column;align-items:center;gap:4px;padding:14px;transition:all .2s;display:flex;position:relative}.character-selector-card.empty-card{box-shadow:none;cursor:default;pointer-events:none;background:0 0;border:none;padding:0}.character-selector-card:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}.character-selector-card.selected{background:var(--color-accent-surface);border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-surface)}.selector-character{font-family:var(--font-jp);color:var(--color-ink);margin-bottom:4px;font-size:2.5rem;font-weight:400}.selector-romaji{font-family:var(--font-ui);color:var(--color-ink-muted);font-size:1rem;font-weight:500}.selector-checkmark{background:var(--color-accent);color:#fff;width:24px;height:24px;box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:4px;right:4px}.character-selector-footer{padding:16px 24px;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--color-border);background:var(--color-surface);z-index:10;border-radius:0 0 var(--radius-lg)var(--radius-lg);justify-content:flex-end;gap:12px;display:flex;position:sticky;bottom:0}@media (max-width:768px){.character-selector-modal{border-radius:0;flex-direction:column;max-width:100%;height:100vh;max-height:100vh;display:flex}.character-selector-header,.character-selector-footer{border-radius:0}.character-selector-overlay{align-items:stretch;padding:0}.character-selector-content{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));flex:1;min-height:0;overflow-y:auto}.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr)}.character-selector-grid{gap:8px}.character-selector-card{padding:12px}.selector-character{font-size:2rem}.selector-romaji{font-size:1.1rem}.character-selector-header{padding:16px;padding-top:calc(16px + env(safe-area-inset-top))}.character-selector-header h2{font-size:1.25rem}.character-selector-controls{gap:8px;padding:12px 16px}.character-selector-buttons{flex:1;gap:8px}.selector-btn{white-space:nowrap;flex:1;min-width:0;padding:6px 12px;font-size:.8rem}.character-selector-section-buttons{gap:8px;padding:12px 16px}.selector-section-btn{white-space:nowrap;flex:1;min-width:0;padding:8px 12px;font-size:.8rem}.character-selector-footer{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.selector-section-title{margin-bottom:16px;font-size:1rem}.character-selector-section{margin-bottom:24px}}@media (max-width:480px){.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr)}.character-selector-grid{gap:6px}.character-selector-card{padding:10px}.selector-character{font-size:1.75rem}.selector-romaji{font-size:.95rem}.selector-section-title{margin-bottom:12px;font-size:.95rem}.character-selector-section{margin-bottom:20px}}