.generate-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.generate-modal-content{background:#fff;border-radius:16px;padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.generate-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.generate-modal-header h2{margin:0;font-size:1.5rem;color:#1f2937}.generate-modal-close{background:none;border:none;font-size:2rem;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:4px;transition:background-color .2s}.generate-modal-close:hover{background:#f3f4f6}.generate-modal-body{padding:24px}.config-calculated .conversion-display{margin-top:12px;background:#fff;padding:12px}.bits-input-section{margin-bottom:24px}.bits-input-section label{display:block;margin-bottom:8px;font-weight:500;color:#374151;font-size:.95rem}.bits-input-section input[type=number]{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;box-sizing:border-box}.bits-input-section input[type=number]:focus{outline:none;border-color:#6366f1}.conversion-display{padding:16px;background:#f3f4f6;border-radius:8px;text-align:center}.conversion-text{font-size:1.1rem;color:#1f2937;font-weight:600}.generate-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.generate-button{padding:10px 20px;font-size:.95rem;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s}.generate-button-primary{background:#10b981;color:#fff}.generate-button-primary:hover{background:#059669}.recovery-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.recovery-modal-content{background:#fff;border-radius:16px;padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.recovery-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.recovery-modal-header h2{margin:0;font-size:1.5rem;color:#1f2937}.recovery-modal-close{background:none;border:none;font-size:2rem;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:4px;transition:background-color .2s}.recovery-modal-close:hover{background:#f3f4f6}.recovery-modal-body{padding:24px}.config-section{margin-bottom:24px}.config-section h3{margin:0 0 16px;font-size:1.1rem;color:#374151;font-weight:500}.config-calculated{margin-top:24px;padding:16px;background:#f3f4f6;border-radius:8px}.config-calculated .calculated-item:last-of-type{margin-bottom:0}.recovery-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.recovery-button{padding:10px 20px;font-size:.95rem;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s}.recovery-button-primary{background:#10b981;color:#fff}.recovery-button-primary:hover{background:#059669}.practice-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.practice-modal-content{background:#fff;border-radius:16px;padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.practice-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.practice-modal-header h2{margin:0;font-size:1.5rem;color:#1f2937}.practice-modal-close{background:none;border:none;font-size:2rem;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:4px;transition:background-color .2s}.practice-modal-close:hover{background:#f3f4f6}.practice-modal-body{padding:24px}.practice-modal-body p{margin:0;font-size:1rem;line-height:1.5;color:#374151}.practice-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.practice-button{padding:10px 20px;font-size:.95rem;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s}.practice-button-primary{background:#10b981;color:#fff}.practice-button-primary:hover{background:#059669}.main-page{display:flex;justify-content:center;align-items:center;min-height:80vh}.main-content{background:#fff;border-radius:16px;padding:48px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:500px;width:100%}.main-content h1{font-size:2.5rem;color:#1f2937;margin-bottom:16px}.subtitle{color:#6b7280;font-size:1.1rem;margin-bottom:32px}.button-container{display:flex;flex-direction:column;gap:16px}.primary-button{width:100%;padding:16px 32px;font-size:1.1rem}.generate-button{background:#10b981}.generate-button:hover{background:#059669}.recover-button{background:#dc2626}.recover-button:hover{background:#b91c1c}.practice-button{background:#6366f1}.practice-button:hover{background:#4f46e5}.password-progress-display{background:#f3f4f6;border:2px solid #e5e7eb;border-radius:12px;padding:20px;margin-bottom:32px;font-size:1.2rem;font-family:Courier New,monospace;line-height:2;word-break:break-word;position:relative}.password-progress-display.game-mode{min-height:calc(3 * 1.2rem * 3 + 40px)}.password-word{display:inline-block;padding:4px 8px;margin:4px;border-radius:4px}.password-word.completed{background-color:#3b82f6;color:#fff;font-weight:500}.password-word.current{background-color:#f59e0b;color:#fff;font-weight:700;box-shadow:0 2px 8px #f59e0b66;animation:pulse 2s ease-in-out infinite}.password-word.future{color:#9ca3af;background-color:transparent}.password-word.clickable{transition:background-color .2s ease}.password-word.clickable:hover{background-color:#6366f11a!important}.password-word.clickable.completed:hover{background-color:#2563eb!important}.password-word.clickable.current:hover{background-color:#d97706!important}.password-word.clickable.future:hover{background-color:#6366f126!important;color:#6b7280}.placeholder-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:0;pointer-events:none}.password-word.placeholder-text{display:inline-block;text-align:center}.placeholder-wrapper.fade-out{animation:fadeOut .3s ease-out forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.password-words-container{position:relative;z-index:1;width:100%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.word-button.error{background:#ef4444!important;animation:fadeError 1.5s ease-out forwards}.word-button.error.correct-word{animation:fadeErrorCorrect 1.5s ease-out forwards}.word-button.correct:hover{background:#047857!important;border-color:#065f46!important}@keyframes fadeError{0%{background:#ef4444}to{background:#6366f1}}@keyframes fadeErrorCorrect{0%{background:#ef4444}to{background:#10b981}}.game-page{display:flex;justify-content:center;align-items:flex-start;min-height:80vh;padding:40px 20px 20px}.game-content{background:#fff;border-radius:16px;padding:32px;box-shadow:0 20px 60px #0000004d;max-width:1000px;width:100%;align-self:flex-start;margin-top:0}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px;min-height:48px}.game-header h1{font-size:2rem;color:#1f2937}.header-buttons{display:flex;gap:12px}.header-button{padding:10px 20px;font-size:.95rem}.navigation-button{padding:10px 16px;font-size:1.2rem;font-weight:600;min-width:44px;display:flex;align-items:center;justify-content:center;line-height:1}.reset-button,.delete-button{transition:background-color .2s}.reset-button:hover:not(:disabled),.delete-button:hover:not(:disabled){background:#b91c1c!important}.reset-button:disabled,.delete-button:disabled{background:#9ca3af!important;cursor:pointer;opacity:.6}.reset-button:disabled:hover,.delete-button:disabled:hover{cursor:pointer;background:#9ca3af!important}.navigation-button:disabled{background:#9ca3af!important;cursor:not-allowed;opacity:.6}.navigation-button:disabled:hover{background:#9ca3af!important;cursor:not-allowed}.practice-controls .header-button:disabled{background:#9ca3af!important;cursor:not-allowed;opacity:.6}.practice-controls .header-button:disabled:hover{background:#9ca3af!important;cursor:not-allowed}.practice-configs-container{display:flex;gap:24px;margin-bottom:24px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}.current-password-section{margin-bottom:32px;min-height:330px;display:flex;flex-direction:column}.current-password-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.current-password-section h2{font-size:1.5rem;color:#374151;margin:0}.practice-controls,.password-controls{display:flex;gap:12px;align-items:center}.password-display{background:#f3f4f6;border:2px solid #e5e7eb;border-radius:12px;padding:20px;font-size:1.2rem;color:#1f2937;font-family:Courier New,monospace;min-height:60px;word-break:break-all;line-height:1.6}.empty-password{color:#9ca3af;font-style:italic}.word-selection-section{margin-bottom:24px}.word-selection-section h2{font-size:1.5rem;color:#374151;margin-bottom:20px}.loading{text-align:center;color:#6b7280;font-size:1.1rem;padding:40px}.word-grid{display:grid;gap:12px;margin-bottom:24px}.word-button{padding:16px;font-size:1rem;background:#6366f1;border-radius:8px;transition:all .2s}.word-button:hover{background:#4f46e5}.display-password-button{width:100%;padding:16px;font-size:1.1rem;background:#10b981}.display-password-button:hover:not(:disabled){background:#059669}.display-password-button:disabled{background:#9ca3af;cursor:pointer;opacity:.6}.display-password-button:disabled:hover{cursor:pointer}@media (max-width: 768px){.game-header{flex-direction:column;align-items:stretch}.header-buttons{flex-direction:column}.header-button{width:100%}.practice-configs-container{flex-direction:column;align-items:center}}.config-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.config-modal-content{background:#fff;border-radius:16px;padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.config-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.config-modal-header h2{margin:0;font-size:1.5rem;color:#1f2937}.config-modal-close{background:none;border:none;font-size:2rem;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:4px;transition:background-color .2s}.config-modal-close:hover{background:#f3f4f6}.config-modal-body{padding:24px}.config-field{margin-bottom:24px}.config-field label{display:block;margin-bottom:8px;font-weight:500;color:#374151;font-size:.95rem}.config-field input[type=text]{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;box-sizing:border-box}.config-field input[type=text]:focus{outline:none;border-color:#6366f1}.grid-fields-container{display:flex;gap:24px;margin-bottom:24px}.grid-fields-container .config-field{flex:1;margin-bottom:0}.grid-control{display:flex;align-items:center;gap:16px}.grid-button{width:44px;height:44px;border:2px solid #e5e7eb;background:#fff;color:#1f2937;border-radius:8px;font-size:1.5rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.grid-button:hover:not(:disabled){background:#f3f4f6;border-color:#6366f1}.grid-button:disabled{opacity:.5;cursor:not-allowed}.grid-value{min-width:60px;text-align:center;font-size:1.2rem;font-weight:600;color:#1f2937}.config-calculated{margin-top:32px;padding:16px;background:#f3f4f6;border-radius:8px}.config-calculated h3{margin:0 0 16px;font-size:1.1rem;color:#374151}.calculated-item{display:flex;justify-content:space-between;margin-bottom:12px;font-size:.95rem;color:#6b7280}.calculated-item:last-child{margin-bottom:0}.calculated-value{font-weight:600;color:#1f2937}.config-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.config-button{padding:10px 20px;font-size:.95rem;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s}.cancel-button{background:#f3f4f6;color:#374151}.cancel-button:hover{background:#e5e7eb}.save-button{background:#6366f1;color:#fff}.save-button:hover{background:#4f46e5}.config-display{background:#f3f4f6;border-radius:8px;padding:16px 16px 12px;margin:0;border:1px solid #e5e7eb;width:fit-content;min-width:250px}.config-title{margin:0 0 12px;font-size:1.1rem;font-weight:600;color:#1f2937}.config-display-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.95rem;gap:16px}.config-display-item:last-child{margin-bottom:0}.config-label{color:#6b7280;font-weight:500;flex-shrink:0}.config-value{color:#1f2937;font-weight:600;font-family:Consolas,Monaco,Menlo,Courier New,monospace;text-align:left}.config-seed-phrase{white-space:nowrap}.practice-config-display{background:#f3f4f6;border-radius:8px;padding:16px;border:1px solid #e5e7eb;width:fit-content;min-width:250px;margin-left:auto}.practice-config-item{margin-bottom:12px}.practice-config-item:last-child{margin-bottom:0}.practice-config-sub-item:last-child{margin-bottom:0}.practice-config-checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.95rem;color:#1f2937;-webkit-user-select:none;user-select:none}.practice-config-checkbox-label.disabled{opacity:.5;cursor:not-allowed}.practice-config-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#6366f1}.practice-config-checkbox-label input[type=checkbox]:disabled{cursor:not-allowed}.practice-config-checkbox-label span{flex:1}.practice-config-section-title{font-weight:600;font-size:1rem;color:#1f2937;margin-bottom:12px}.practice-config-radio-group{display:flex;flex-direction:column;gap:8px}.practice-config-radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.95rem;color:#1f2937;-webkit-user-select:none;user-select:none}.practice-config-radio-label input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#6366f1}.practice-config-radio-label span{flex:1}.practice-config-sub-items{margin-left:24px;margin-top:8px;display:flex;flex-direction:column;gap:8px}.practice-config-sub-item{margin-bottom:8px}.practice-config-display>.practice-config-item:last-child{margin-bottom:0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}#root{width:100%;max-width:1200px}button{background:#4f46e5;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 6px #0000001a}button:hover{background:#4338ca;box-shadow:0 6px 12px #00000026}button:active{transform:none}button:disabled{background:#9ca3af;cursor:not-allowed;transform:none}