:root{--primary-blue: #4a90e2;--secondary-blue-light: #a0d0f8;--background-white: #ffffff;--text-dark: #333333;--text-gray: #777777;--correct-green: #4CAF50;--incorrect-red: #f44336;--shadow-light: rgba(0, 0, 0, .08);--gradient-start: #6dd5ed;--gradient-end: #2193b0;--card-shadow: 0 4px 12px var(--shadow-light);--button-shadow: 0 2px 6px var(--shadow-light);--toast-bg: rgba(51, 51, 51, .9);--toast-text: #ffffff;--modal-overlay: rgba(0, 0, 0, .5)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background-color:var(--background-white);color:var(--text-dark);line-height:1.6;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;overflow-x:hidden}.app-container{width:100%;max-width:720px;min-height:100vh;display:flex;flex-direction:column;background-color:var(--background-white);box-shadow:var(--card-shadow);position:relative}.cloud-sync-indicator{font-size:.75em;color:var(--primary-blue);background-color:#4a90e21a;padding:2px 6px;border-radius:4px;margin-left:10px;vertical-align:middle;font-weight:700}.feedback-message{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background-color:var(--toast-bg);color:var(--toast-text);padding:10px 20px;border-radius:20px;font-size:.9em;z-index:1000;box-shadow:var(--button-shadow);animation:fadeInOut 2s ease-out forwards}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(20px)}20%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(20px)}}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:70vh;text-align:center;color:var(--primary-blue)}.spinner{border:4px solid rgba(74,144,226,.3);border-top:4px solid var(--primary-blue);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-title,.page-title{text-align:center;color:var(--primary-blue);margin-top:20px;margin-bottom:15px;font-size:2.2em;display:flex;justify-content:center;align-items:center}.page-title{font-size:1.8em;margin-top:15px;margin-bottom:20px}.app-footer{margin-top:auto;padding:15px;text-align:center;color:var(--text-gray);font-size:.85em;background-color:#f9f9f9;border-top:1px solid #eeeeee;width:100%}.cta-button,.upload-button,.nav-button,.subject-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 25px;margin:10px 5px;border:none;border-radius:25px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--button-shadow);background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff}.cta-button:hover,.upload-button:hover,.nav-button:hover,.subject-button:hover{transform:translateY(-2px);box-shadow:0 4px 10px #4a90e266}.cta-button:active,.upload-button:active,.nav-button:active,.subject-button:active{transform:translateY(0);box-shadow:var(--button-shadow)}.upload-button{background:linear-gradient(135deg,var(--secondary-blue-light),var(--primary-blue));padding:15px 30px;font-size:1.2em}.upload-button:disabled{background:var(--text-gray);cursor:not-allowed;opacity:.7;transform:none;box-shadow:none}.subject-button{background-color:var(--background-white);color:var(--primary-blue);border:2px solid var(--primary-blue);padding:10px 20px;font-size:1em;margin:5px;display:inline-flex;align-items:center;gap:8px}.subject-button.active{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;border-color:var(--primary-blue)}.subject-button:hover{transform:translateY(-1px);box-shadow:0 3px 8px #4a90e24d}.subject-icon{width:20px;height:20px;stroke-width:2}.home-page{display:flex;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 100px);text-align:center;padding:20px;box-sizing:border-box}.magic-wand-container{margin:30px 0}.magic-wand-icon{width:120px;height:120px;stroke:var(--primary-blue);stroke-width:1.5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}.tagline{font-size:1.6em;color:var(--text-gray);margin-bottom:30px;font-style:italic}.upload-page,.result-page,.report-page{padding:20px;box-sizing:border-box}.subject-selector{text-align:center;margin-bottom:25px;font-size:1.1em;color:var(--text-gray)}.upload-area{border:2px dashed var(--secondary-blue-light);border-radius:15px;padding:40px;text-align:center;margin-bottom:30px;background-color:#f8fdfd;display:flex;flex-direction:column;align-items:center;gap:15px}.upload-area p{color:var(--text-gray);font-size:1.1em;margin-bottom:0}.upload-area input[type=file]{display:block;margin:10px auto;color:var(--primary-blue);font-size:1em}.upload-area input[type=file]::file-selector-button{background-color:var(--primary-blue);color:#fff;padding:10px 15px;border:none;border-radius:20px;cursor:pointer;font-weight:700;margin-right:10px;transition:background-color .3s ease}.upload-area input[type=file]::file-selector-button:hover{background-color:var(--gradient-end)}.preview-area{margin-top:20px;text-align:center}.homework-preview{max-width:100%;height:auto;border-radius:10px;box-shadow:var(--card-shadow);border:1px solid #eee}.subject-header{display:flex;align-items:center;justify-content:center;margin-bottom:25px;gap:10px}.subject-header h3{font-size:1.6em;color:var(--primary-blue);margin:0}.problem-list{display:flex;flex-direction:column;gap:15px}.problem-item{background-color:var(--background-white);padding:15px 20px;border-radius:12px;box-shadow:var(--card-shadow);border-left:5px solid transparent}.problem-item.correct{border-left-color:var(--correct-green)}.problem-item.incorrect{border-left-color:var(--incorrect-red)}.problem-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.problem-id{font-weight:700;color:var(--primary-blue);font-size:1.1em}.problem-text{flex-grow:1;font-size:1.1em;color:var(--text-dark)}.icon-correct,.icon-incorrect{width:24px;height:24px;border-radius:50%;padding:4px}.icon-correct{color:var(--correct-green);background-color:#4caf501a}.icon-incorrect{color:var(--incorrect-red);background-color:#f443361a}.feedback-details{margin-top:10px;padding-left:35px;font-size:.95em;color:var(--text-gray)}.user-answer,.correct-answer{display:block;margin-bottom:5px;font-weight:700}.user-answer{color:var(--incorrect-red)}.correct-answer{color:var(--correct-green)}.feedback-text{margin-top:8px;font-style:italic;color:#555}.navigation-buttons{display:flex;justify-content:center;margin-top:30px;flex-wrap:wrap}.nav-button{background:linear-gradient(135deg,#f6d365,#fda085)}.nav-button svg{margin-left:8px}.report-page{padding:20px}.report-content{background-color:var(--background-white);padding:25px;border-radius:15px;box-shadow:var(--card-shadow)}.report-summary{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px dashed var(--secondary-blue-light)}.report-summary p{font-size:1.1em;margin:8px 0;color:var(--text-dark)}.report-summary strong{color:var(--primary-blue)}.report-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-bottom:30px}.report-section{background-color:#fdfdfd;padding:20px;border-radius:10px;border:1px solid #f0f0f0}.report-section h4{display:flex;align-items:center;gap:10px;color:var(--primary-blue);margin-top:0;margin-bottom:15px;font-size:1.2em}.report-section ul{list-style:none;padding:0;margin:0}.report-section li{margin-bottom:8px;font-size:.95em;color:var(--text-gray);position:relative;padding-left:20px}.report-section li:before{content:"•";position:absolute;left:0;color:var(--primary-blue);font-weight:700;font-size:1.2em}.history-section{margin-top:30px;padding-top:20px;border-top:1px dashed var(--secondary-blue-light)}.history-section h4{display:flex;align-items:center;gap:10px;color:var(--primary-blue);margin-bottom:15px;font-size:1.2em}.history-list{list-style:none;padding:0}.history-list li{font-size:.9em;color:var(--text-gray);margin-bottom:5px;background-color:#f9f9f9;padding:8px 12px;border-radius:5px}@media (max-width: 600px){.app-container{box-shadow:none;border-radius:0}.app-title,.page-title{font-size:1.8em}.magic-wand-icon{width:90px;height:90px}.tagline{font-size:1.3em}.cta-button,.upload-button,.nav-button,.subject-button{padding:10px 18px;font-size:1em}.upload-area{padding:25px}.problem-item{padding:12px 15px}.problem-text{font-size:1em}.feedback-details{padding-left:25px;font-size:.9em}.report-summary p{font-size:1em}.report-sections{grid-template-columns:1fr}}