body{background-color:#e9ecef;min-height:100vh;transition:all .3s;padding:0;touch-action:manipulation}.practice-card{width:300px;height:300px;position:relative;cursor:pointer;user-select:none;touch-action:manipulation}.preview-card{width:150px;height:150px;position:relative;cursor:pointer;margin:0 auto;touch-action:manipulation}.card-character{font-size:5rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.preview-character{font-size:3rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center}.card-answer{font-size:50%;position:absolute;bottom:0;transform:translateY(100%)}.preview-answer{font-size:50%;position:absolute;bottom:0;transform:translateY(50%)}.star-btn{background:rgba(255,255,255,.9);border:1px solid #dee2e6;border-radius:50%;width:40px;height:40px;font-size:1.5rem;position:absolute;top:10px;right:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.star-btn:hover{background:#fff;transform:scale(1.1)}.star-btn.starred{color:#ffc107}.star-btn.unstarred{color:#6c757d}.sound-btn{background:rgba(255,255,255,.9);border:1px solid #dee2e6;border-radius:50%;width:40px;height:40px;font-size:1.2rem;position:absolute;bottom:10px;right:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#007bff}.sound-btn:hover{background:#fff;transform:scale(1.1)}.sound-btn:active{transform:scale(.95)}.sound-btn.speaking{color:#28a745;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}.starred-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}@media (max-width:768px){.practice-card{width:250px;height:250px}.preview-card{width:120px;height:120px;max-width:30vw;max-height:30vw}.card-character{font-size:4rem}.preview-character{font-size:2.5rem}.card-answer{transform:translateY(75%)}}.dark-mode body{background-color:#343a40}.dark-mode .card{background-color:#1e1e1e;color:#e0e0e0;border-color:#333}.dark-mode .practice-card.bg-light{background-color:#2d2d2d!important;color:#e0e0e0!important}.dark-mode .preview-card.bg-light{background-color:#2d2d2d!important;color:#e0e0e0!important}.dark-mode .alert-warning{background-color:#664d03;border-color:#998404;color:#ffecb5}.dark-mode .badge.bg-warning{background-color:#ffc107!important;color:#000}.dark-mode .text-muted{color:#adb5bd!important}.dark-mode .star-btn{background:rgba(30,30,30,.9);border-color:#495057}.dark-mode .star-btn:hover{background:#1e1e1e}.dark-mode .sound-btn{background:rgba(30,30,30,.9);border-color:#495057}.dark-mode .sound-btn:hover{background:#1e1e1e}.preview-modes-container{display:flex;flex-direction:column;gap:1rem}.preview-mode-item{width:100%}@media (min-width:768px){.preview-modes-container{flex-direction:row;justify-content:space-between;align-items:flex-start}.preview-mode-item{flex:1;max-width:32%}.preview-mode-item .flex-grow-1{display:flex;flex-direction:column;align-items:center}.preview-mode-item .small{order:3}.preview-mode-item .btn{order:2;align-self:center;width:auto}}.mode-1{color:#6f42c1;font-weight:600}.mode-2{color:#28a745;font-weight:600}.mode-3{color:#fd7e14;font-weight:600}.panel{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:1rem;margin-bottom:1.5rem}.panel:first-child{margin-top:20px}.guide-panel{padding:1.5rem}.dark-mode .panel{background-color:#1e1e1e;color:#e0e0e0;box-shadow:0 2px 4px rgba(0,0,0,.3)}body[data-state=practice] .base-footer,body[data-state=practice] .setup-section{display:none!important}body[data-state=setup] .practice-section{display:none!important}[v-cloak]{display:none!important}.reference-card{background:#fff;border:1px solid #dee2e6;border-radius:6px;padding:8px 6px;text-align:center;cursor:pointer;transition:all .2s;min-height:60px;display:flex;flex-direction:column;justify-content:center;position:relative}.reference-card:hover{background:#f8f9fa;border-color:#007bff;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}.reference-character{font-size:1.4rem;font-weight:700;line-height:1;margin-bottom:2px}.reference-romaji{font-size:.75rem;color:#6c757d;font-weight:500}.dark-mode .reference-card{background-color:#2d2d2d;border-color:#495057;color:#e0e0e0}.dark-mode .reference-card:hover{background-color:#3a3a3a;border-color:#0d6efd}.dark-mode .reference-romaji{color:#adb5bd}.reference-checkbox{position:absolute;top:4px;right:4px;width:16px;height:16px;accent-color:#ffc107;cursor:pointer;z-index:2}.dark-mode .reference-checkbox{accent-color:#ffc107}.form-check-input{accent-color:#ffc107}.dark-mode .form-check-input{accent-color:#ffc107}.dark-mode .text-muted{color:#adb5bd!important}.navbar{background:#fff;border-bottom:1px solid #dee2e6;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:.5rem 0}.navbar .navbar-brand{font-weight:600;color:#495057!important;font-size:1rem}.navbar .nav-link{color:#6c757d!important;font-weight:500;padding:.5rem 1rem!important;border-radius:4px;transition:all .2s}.navbar .nav-link:hover{background-color:#f8f9fa;color:#495057!important}.dark-mode .navbar{background-color:#1e1e1e;border-bottom-color:#333}.dark-mode .navbar .navbar-brand{color:#e0e0e0!important}.dark-mode .navbar .nav-link{color:#adb5bd!important}.dark-mode .navbar .nav-link:hover{background-color:#2d2d2d;color:#e0e0e0!important}.navbar-collapse.float-list{position:absolute;top:100%;right:1rem;min-width:100px;width:auto;background:#fff;border:1px solid #dee2e6;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:1000}.rtl .navbar-collapse.float-list{left:1rem;right:inherit}.navbar .nav-link{float:right}.rtl .navbar .nav-link{float:left}.dark-mode .navbar-collapse{background:#1e1e1e;border-color:#333}.dark-mode .navbar-toggler-icon{filter:invert(1)}.dark-mode .navbar-toggler{border-color:gray}.base-footer{margin:.5rem 0 1rem}