*{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;color:#333}#root{min-height:100vh}.app{max-width:800px;margin:0 auto;padding:20px}.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 32px #0000001a;margin-bottom:20px}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-success{background:#10b981;color:#fff}.btn-warning{background:#f59e0b;color:#fff}.btn-danger{background:#ef4444;color:#fff}.btn-secondary{background:#6b7280;color:#fff}.header{text-align:center;color:#fff;margin-bottom:30px}.header h1{font-size:48px;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.header p{font-size:18px;opacity:.95}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:20px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:12px;text-align:center}.stat-card h3{font-size:32px;margin-bottom:8px}.stat-card p{font-size:14px;opacity:.9}.verse-display{font-size:20px;line-height:1.8;margin:24px 0;text-align:center;font-family:Georgia,serif}.verse-reference{font-size:16px;font-weight:600;color:#667eea;margin-bottom:8px}.verse-context{font-size:14px;color:#6b7280;font-style:italic;margin-bottom:16px}.hidden-word{display:inline-block;min-width:60px;height:24px;background:#e5e7eb;border-radius:4px;margin:0 4px;vertical-align:middle}.difficulty-selector{display:flex;gap:12px;justify-content:center;margin:20px 0}.difficulty-btn{padding:8px 16px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.difficulty-btn.active{background:#667eea;color:#fff}.action-buttons{display:flex;gap:12px;justify-content:center;margin-top:24px}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin:16px 0}.progress-fill{height:100%;background:linear-gradient(135deg,#667eea,#764ba2);transition:width .3s ease}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:16px;margin-top:20px}.badge{text-align:center;padding:16px;border-radius:12px;background:#f9fafb;transition:all .2s}.badge.earned{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}.badge.locked{opacity:.4}.badge-icon{font-size:32px;margin-bottom:8px}.badge-name{font-size:12px;font-weight:600}.challenge-timer{font-size:24px;font-weight:700;text-align:center;color:#ef4444;margin:16px 0}.tabs{display:flex;gap:8px;margin-bottom:20px;background:#fff;border-radius:12px;padding:8px}.tab{flex:1;padding:12px;border:none;background:transparent;cursor:pointer;border-radius:8px;font-weight:600;color:#6b7280;transition:all .2s}.tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.verse-list{max-height:400px;overflow-y:auto}.verse-item{padding:16px;border-bottom:1px solid #e5e7eb;cursor:pointer;transition:background .2s}.verse-item:hover{background:#f9fafb}.verse-item:last-child{border-bottom:none}.mastery-level{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;margin-left:8px}.mastery-new{background:#dbeafe;color:#1e40af}.mastery-learning{background:#fef3c7;color:#92400e}.mastery-mastered{background:#d1fae5;color:#065f46}.empty-state{text-align:center;padding:40px;color:#6b7280}.empty-state-icon{font-size:64px;margin-bottom:16px;opacity:.5}.add-verse-modal{max-width:600px;margin:0 auto}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:600;margin-bottom:8px;color:#374151;font-size:14px}.required{color:#ef4444;margin-left:4px}.form-input,.form-textarea,.form-select{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s;background:#fff}.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-input.error,.form-textarea.error{border-color:#ef4444}.form-textarea{resize:vertical;min-height:100px;line-height:1.6}.form-select{cursor:pointer}.form-row{display:flex;gap:12px}.hint{display:block;font-size:12px;color:#6b7280;margin-top:4px}.error-text{display:block;color:#ef4444;font-size:12px;margin-top:4px;font-weight:500}.help-button{width:32px;height:32px;border-radius:50%;border:2px solid #667eea;background:#fff;color:#667eea;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.help-button:hover{background:#667eea;color:#fff;transform:scale(1.1)}.help-box{background:#eff6ff;border:2px solid #93c5fd;border-radius:12px;padding:20px;margin-bottom:24px}.help-box h3{color:#1e40af;margin-bottom:12px;font-size:16px}.help-box ol{margin-left:20px;color:#374151}.help-box li{margin-bottom:8px;line-height:1.5}.add-verse-button{position:fixed;bottom:24px;right:24px;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;font-size:32px;cursor:pointer;box-shadow:0 8px 24px #667eea66;transition:all .3s;display:flex;align-items:center;justify-content:center;z-index:100}.add-verse-button:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 12px 32px #667eea80}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.verse-item-actions{display:flex;gap:8px;margin-top:8px}.btn-small{padding:6px 12px;font-size:14px;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s}.btn-edit{background:#3b82f6;color:#fff}.btn-edit:hover{background:#2563eb}.btn-delete{background:#ef4444;color:#fff}.btn-delete:hover{background:#dc2626}.custom-badge{display:inline-block;padding:4px 8px;background:#fef3c7;color:#92400e;border-radius:4px;font-size:11px;font-weight:600;margin-left:8px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#fff;padding:16px 24px;border-radius:12px;box-shadow:0 8px 24px #00000026;z-index:2000;animation:slideUpToast .3s ease;display:flex;align-items:center;gap:12px;max-width:90%}@keyframes slideUpToast{0%{transform:translate(-50%) translateY(100px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.toast-success{border-left:4px solid #10b981}.toast-error{border-left:4px solid #ef4444}.toast-icon{font-size:24px}.toast-message{font-weight:500;color:#374151}