@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap";:root{--bg: #FFFFFF;--surface: #F7F7F7;--primary: #3DA000;--primary-dark: #2C7A00;--accent: #E51919;--text: #1F1F1F;--text-muted: #5C5C5C;--border: #E5E5E5;--success: #3DA000;--warning: #A87C00;--danger: #E51919;--radius: 20px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;background:radial-gradient(circle at 10% 20%,#E5191933 0%,transparent 40%),radial-gradient(circle at 90% 80%,#3DA00022 0%,transparent 40%),var(--bg);color:var(--text);font-family:Quicksand,ZCOOL KuaiLe,Nunito,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:auto;box-sizing:border-box}.app-container{max-width:600px;width:90%;margin:20px auto;padding:20px;display:flex;flex-direction:column;align-items:center;position:relative}.cloud-status{position:absolute;top:0;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:.9em;color:var(--text-muted);z-index:10;padding:10px}.cloud-badge{background-color:var(--surface);padding:5px 10px;border-radius:var(--radius);box-shadow:var(--shadow);white-space:nowrap}.cloud-message{background-color:var(--surface);padding:5px 10px;border-radius:var(--radius);box-shadow:var(--shadow);white-space:nowrap;font-size:.85em;color:var(--text-muted)}.card{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;width:100%;max-width:500px;text-align:center;box-sizing:border-box;position:relative;overflow:hidden;margin-top:20px}.title{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;color:var(--primary-dark);font-size:2.5em;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.description{font-size:1.1em;color:var(--text-muted);margin-bottom:30px;line-height:1.6}.cloud-highlight{color:var(--primary);font-weight:700}.primary-button,.secondary-button,.submit-button,.ai-generate-button,.difficulty-button{padding:12px 25px;border:none;border-radius:var(--radius);font-size:1.1em;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Quicksand,sans-serif;font-weight:600;box-shadow:var(--shadow)}.primary-button{background-color:var(--primary);color:var(--bg)}.primary-button:hover{background-color:var(--primary-dark);box-shadow:0 2px 5px #00000026}.primary-button:disabled{background-color:#ccc;cursor:not-allowed;box-shadow:none}.secondary-button{background-color:var(--surface);color:var(--primary);border:2px solid var(--primary)}.secondary-button:hover{background-color:var(--primary-dark);color:var(--bg);border-color:var(--primary-dark);box-shadow:0 2px 5px #00000026}.secondary-button:disabled{background-color:#f0f0f0;color:#999;border-color:#ccc;cursor:not-allowed;box-shadow:none}.submit-button{background-color:var(--primary);color:var(--bg);padding:10px 20px}.submit-button:hover{background-color:var(--primary-dark)}.submit-button:disabled{background-color:#ccc;cursor:not-allowed}.ai-generate-button{background-image:linear-gradient(to right,#6a11cb,#2575fc);color:var(--bg);margin-top:20px;padding:10px 20px}.ai-generate-button:hover{background-image:linear-gradient(to right,#5a0fb0,#1a60e0);box-shadow:0 2px 5px #00000026}.ai-generate-button:disabled{background-image:none;background-color:#ccc;cursor:not-allowed;box-shadow:none}.icon{width:1.2em;height:1.2em;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.playing-page{padding-top:40px}.progress-container{width:calc(100% + 60px);background-color:var(--border);height:10px;border-radius:5px;margin:-30px -30px 20px;overflow:hidden;position:relative}.progress-bar{height:100%;background-color:var(--primary);border-radius:5px;transition:width .5s ease-in-out}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text);font-size:.8em;font-weight:600;text-shadow:0 0 2px rgba(255,255,255,.7);white-space:nowrap}.difficulty-display{display:flex;align-items:center;justify-content:center;gap:5px;background-color:#e0f7fa;color:#00796b;padding:8px 15px;border-radius:var(--radius);margin-bottom:20px;font-weight:600;font-size:1em;box-shadow:inset 0 1px 3px #0000000d}.difficulty-display .icon{color:#00796b}.question-text{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;font-size:1.8em;color:var(--text);margin-bottom:25px;min-height:80px;display:flex;align-items:center;justify-content:center;text-align:center}.input-area{display:flex;gap:10px;margin-bottom:20px}.answer-input{flex-grow:1;padding:10px 15px;border:2px solid var(--border);border-radius:var(--radius);font-size:1.1em;font-family:Quicksand,sans-serif;color:var(--text);background-color:var(--bg);transition:border-color .3s ease}.answer-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3da00033}.answer-input:disabled{background-color:#e0e0e0;cursor:not-allowed}.feedback-message{padding:10px 15px;border-radius:var(--radius);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:1.1em}.feedback-message.correct{background-color:#e6ffe6;color:var(--success);border:1px solid var(--success)}.feedback-message.wrong{background-color:#ffe6e6;color:var(--danger);border:1px solid var(--danger)}.feedback-message .icon{width:1.5em;height:1.5em}.explanation-box{background-color:#eaf7ff;border:1px solid #a8d9ff;border-radius:var(--radius);padding:15px;margin-top:15px;text-align:left;color:#0056b3;font-size:.95em;line-height:1.5;box-shadow:inset 0 1px 3px #0000000d}.explanation-box h3{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;color:#004085;margin-top:0;margin-bottom:10px;font-size:1.2em}.action-buttons{display:flex;justify-content:space-around;gap:15px;margin-top:25px;flex-wrap:wrap}.hint-button{color:var(--warning);border-color:var(--warning)}.hint-button:hover{background-color:var(--warning);color:var(--bg)}.hint-button:disabled{border-color:#ccc;color:#999}.hint-box{background-color:#fffbe6;border:1px solid #ffe08a;border-radius:var(--radius);padding:10px 15px;margin-top:15px;text-align:left;color:#8a6d3b;font-size:.9em;box-shadow:inset 0 1px 3px #0000000d}.difficulty-selector{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}.difficulty-label{font-weight:600;color:var(--text-muted);font-size:.95em;white-space:nowrap}.difficulty-button{padding:8px 15px;font-size:.9em;background-color:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:15px;box-shadow:none}.difficulty-button.active{background-color:var(--primary);color:var(--bg);border-color:var(--primary);box-shadow:var(--shadow)}.difficulty-button:hover:not(.active){background-color:#e0e0e0;border-color:silver}.ai-actions{margin-top:20px}.result-page .title{color:var(--primary-dark);margin-bottom:25px}.score-summary{font-size:1.4em;color:var(--text);margin-bottom:30px;font-weight:600}.score-value{color:var(--primary);font-size:1.5em;font-weight:700}.wrong-list-section{text-align:left;width:100%;margin-top:20px;max-height:300px;overflow-y:auto;padding-right:10px}.wrong-list-section h3{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;color:var(--accent);font-size:1.5em;margin-bottom:15px;display:flex;align-items:center;gap:8px}.wrong-items{list-style:none;padding:0;margin:0}.wrong-item{background-color:#ffebeb;border:1px solid var(--danger);border-radius:var(--radius);padding:15px;margin-bottom:15px;box-shadow:var(--shadow)}.wrong-item p{margin:5px 0;font-size:.95em;color:var(--text-muted)}.wrong-question{font-weight:600;color:var(--text)}.your-answer .wrong-answer-text{color:var(--danger);font-weight:700}.correct-answer .correct-answer-text{color:var(--success);font-weight:700}.explanation-summary{font-style:italic;font-size:.9em;color:#8a6d3b;border-top:1px dashed #f0c090;padding-top:10px;margin-top:10px}.no-wrong-answers{font-size:1.1em;color:var(--primary-dark);font-weight:600;margin-bottom:30px}.restart-button{margin-top:20px}@media (max-width: 500px){.card{padding:20px}.title{font-size:2em}.question-text{font-size:1.5em}.input-area{flex-direction:column}.submit-button{width:100%}.action-buttons{flex-direction:column}.primary-button,.secondary-button,.submit-button,.ai-generate-button{width:100%;padding:10px 15px}.progress-container{width:calc(100% + 40px);margin:-20px -20px 20px}.difficulty-selector{flex-direction:column;gap:5px}.difficulty-selector .difficulty-label{margin-bottom:5px}.difficulty-button{width:100%}}