*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1b5e20,#2e7d32);min-height:100vh;color:#2e7d32}.app{min-height:100vh;padding:20px}.container{max-width:1400px;margin:0 auto}.header{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#2e7d32,#1b5e20);border-radius:16px;margin-bottom:30px;box-shadow:0 8px 32px #0006;border:3px solid #66bb6a}.header h1{font-size:2.5rem;color:#fff;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-weight:700}.header p{font-size:1.1rem;color:#e8f5e9;font-style:italic}.mode-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.mode-card{background:linear-gradient(135deg,#e8f5e9,#81c784);padding:30px;border-radius:16px;cursor:pointer;transition:all .3s ease;border:3px solid #2e7d32;overflow:hidden;box-shadow:0 4px 16px #0000004d}.mode-card:hover{transform:translateY(-8px);box-shadow:0 8px 32px #7cb34280;border-color:#66bb6a}.mode-icon{font-size:3rem;margin-bottom:15px;text-align:center}.mode-card h3{font-size:1.5rem;margin-bottom:10px;color:#1a3a0f;text-align:center}.mode-card p{color:#33691e;text-align:center;font-size:.95rem;line-height:1.5}.content-area{background:#f1f8e9f2;padding:30px;border-radius:16px;box-shadow:0 8px 32px #0000004d;border:2px solid #2e7d32}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:700;box-shadow:0 2px 8px #0003}.btn-primary{background:linear-gradient(135deg,#2e7d32,#1b5e20);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 16px #7cb34280}.btn-secondary{background:linear-gradient(135deg,#66bb6a,#2e7d32);color:#1a3a0f}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 4px 16px #9ccc6580}.btn-danger{background:linear-gradient(135deg,#d32f2f,#b71c1c);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.controls{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:20px}.progress-bar{width:100%;height:12px;background:#7cb34233;border-radius:10px;overflow:hidden;margin-bottom:20px;border:1px solid #2e7d32}.progress-fill{height:100%;background:linear-gradient(90deg,#2e7d32,#1b5e20);transition:width .5s ease;border-radius:10px}.flashcard{perspective:1000px;margin:30px auto;max-width:700px;min-height:400px}.flashcard-inner{position:relative;width:100%;height:450px;text-align:center;transition:transform .6s;transform-style:preserve-3d;cursor:pointer}.flashcard-inner.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:450px;backface-visibility:hidden;border-radius:16px;padding:40px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 8px 32px #0000004d;border:3px solid #2e7d32;overflow:hidden}.flashcard-front{background:linear-gradient(135deg,#e8f5e9,#81c784);color:#1a3a0f}.flashcard-back{background:linear-gradient(135deg,#66bb6a 0% 100%);color:#1a3a0f;transform:rotateY(180deg);overflow-y:auto}.flashcard-hint{position:absolute;bottom:20px;font-size:.9rem;color:#1b5e20;font-style:italic}.crops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px;margin-top:20px}.crop-card{background:#fffffff2;padding:25px;border-radius:12px;border:2px solid #2e7d32;box-shadow:0 4px 12px #0003;transition:all .3s ease}.crop-card:hover{transform:translateY(-5px);box-shadow:0 6px 20px #7cb34266}.crop-card h3{color:#1a3a0f;font-size:1.5rem;margin-bottom:10px}.crop-info{margin:8px 0;font-size:.95rem;line-height:1.6}.crop-info strong{color:#1b5e20}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tag{display:inline-block;padding:6px 12px;background:#7cb3424d;border-radius:16px;font-size:.85rem;color:#1a3a0f;border:1px solid #2e7d32;font-weight:700}.tag.high{background:#ffc1074d;border-color:#ffa000;color:#f57c00}.quiz-question{background:#fffffff2;padding:30px;border-radius:16px;margin-top:20px;border:2px solid #2e7d32;box-shadow:0 4px 16px #0003}.quiz-question h3{color:#1a3a0f;margin-bottom:20px;font-size:1.3rem}.quiz-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.quiz-option{padding:18px 24px;background:#fffc;border:2px solid #2e7d32;border-radius:12px;cursor:pointer;transition:all .3s ease;font-size:1rem;text-align:left}.quiz-option:hover{background:#81c784;transform:translate(5px);box-shadow:0 4px 12px #7cb3424d}.quiz-option.correct{background:linear-gradient(135deg,#90ee90,#32cd32);border-color:#228b22;color:#004d00;font-weight:700}.quiz-option.incorrect{background:linear-gradient(135deg,#ffb6c1,#ff6b8a);border-color:#8b0000;color:#8b0000;font-weight:700}.result-screen{text-align:center;padding:40px}.result-emoji{font-size:5rem;margin-bottom:20px;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.result-score{font-size:4rem;color:#1a3a0f;font-weight:700;margin:20px 0}.filter-section{margin-bottom:20px;padding:15px;background:#dcedc880;border-radius:12px;border:2px solid #2e7d32}.filter-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.filter-btn{padding:10px 18px;border:2px solid #2e7d32;background:#f1f8e9cc;border-radius:20px;cursor:pointer;transition:all .3s ease;font-size:.9rem;color:#1a3a0f;font-weight:700}.filter-btn:hover{background:#66bb6a;transform:translateY(-2px)}.filter-btn.active{background:linear-gradient(135deg,#2e7d32,#1b5e20);color:#fff;border-color:#33691e}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:linear-gradient(135deg,#e8f5e9,#81c784);padding:25px;border-radius:12px;text-align:center;border:2px solid #2e7d32;box-shadow:0 4px 12px #0003;transition:all .3s ease}.stat-card:hover{transform:translateY(-5px);box-shadow:0 6px 20px #7cb34266}.stat-card h4{color:#1a3a0f;font-size:1.1rem;margin-bottom:12px}.stat-card .value{font-size:2.5rem;font-weight:700;color:#1b5e20}@media(max-width:768px){.header h1{font-size:2rem}.mode-selector,.crops-grid{grid-template-columns:1fr}.flashcard-front,.flashcard-back{min-height:450px;padding:30px 20px}.controls{flex-direction:column}.btn{width:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.content-area{animation:fadeIn .5s ease}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#7cb3421a;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#2e7d32,#1b5e20);border-radius:10px;border:2px solid rgba(241,248,233,.5)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#1b5e20,#33691e)}