:root{--primary-bg: #f4f7f9;--card-bg: #ffffff;--text-color: #333;--subtle-text: #888;--accent-color: #4a90e2;--border-color: #e0e0e0;--shadow: 0 4px 6px rgba(0, 0, 0, .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--primary-bg);color:var(--text-color);margin:0;padding:20px}#app{max-width:800px;margin:0 auto}.icon-btn{background:transparent;border:none;color:var(--text-color);font-size:1.2rem;cursor:pointer;padding:5px;margin-left:10px}.small-btn{background:#e0e0e0;border:none;padding:3px 8px;border-radius:4px;font-size:.8rem;margin-right:5px;cursor:pointer;margin-top:5px}header h1{font-size:2.5rem;margin:0}.header-controls{display:flex;align-items:center;gap:20px}.sort-by{font-size:.9rem;color:var(--subtle-text)}.sort-by select{border:none;background:transparent;font-size:.9rem;font-weight:700;color:var(--text-color)}.filter-by{font-size:.9rem;color:var(--subtle-text)}.filter-by select{border:none;background:transparent;font-size:.9rem;font-weight:700;color:var(--text-color);max-width:150px}.add-subject-btn,.add-mistake-to-subject-btn{background-color:var(--accent-color);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;cursor:pointer;box-shadow:var(--shadow)}.subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-bottom:30px}.subject-card{background:var(--card-bg);border-radius:10px;padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s;position:relative}.subject-card:hover{transform:translateY(-5px)}.delete-subject-btn{position:absolute;top:5px;right:10px;background:transparent;border:none;font-size:20px;color:var(--subtle-text);cursor:pointer;display:none}.subject-card:hover .delete-subject-btn{display:block}.subject-card .icon{font-size:2rem;margin-bottom:10px}.subject-card h3{margin:0 0 5px;font-size:1.2rem}.subject-card p{margin:0;color:var(--subtle-text);font-size:.9rem}.hidden{display:none}#subject-screen header,#mistake-detail-screen header{gap:15px}#subject-screen .back-btn,#mistake-detail-screen .back-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-color);border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer}#subject-screen h1,#mistake-detail-screen h1{flex-grow:1;text-align:center;font-size:2rem}.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.search-bar{position:relative;flex-grow:1}.search-bar input{width:100%;padding:15px 20px 15px 45px;border-radius:25px;border:1px solid var(--border-color);font-size:1rem;box-sizing:border-box}.search-bar .fa-search{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--subtle-text)}#mistake-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.mistake-item{background:var(--card-bg);border-radius:10px;padding:0;box-shadow:0 2px 4px #0000000d;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;transition:transform .2s;height:100%}.mistake-item:hover{transform:translateY(-5px)}.mistake-card-image{width:100%;height:150px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}.mistake-card-image img{width:100%;height:100%;object-fit:cover}.mistake-card-image.placeholder{color:#ccc;font-size:2rem}.mistake-card-content{padding:15px;flex-grow:1}.mistake-card-content h4{margin:0 0 10px;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mistake-card-content .meta{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--subtle-text)}.mistake-card-actions{padding:10px 15px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:10px;background-color:#f9f9f9}.quick-attempt-btn{width:32px;height:32px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem}.quick-attempt-btn.correct{background-color:#28a745}.quick-attempt-btn.incorrect{background-color:#dc3545}.mistake-item .label{background-color:#eef5ff;color:var(--accent-color);padding:3px 8px;border-radius:12px;font-size:.75rem;font-weight:700}.profile-btn,.home-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-color);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer}.bottom-actions{display:flex;justify-content:center;gap:20px}.upload-btn{background-color:var(--card-bg);border:2px dashed var(--border-color);border-radius:10px;padding:10px;cursor:pointer;font-size:1rem;color:var(--subtle-text);display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow);width:40px;height:40px;justify-content:center}.upload-btn .fa-camera{font-size:1.5rem}.modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:400px;border-radius:10px;position:relative}.close-btn{color:#aaa;float:right;font-size:28px;font-weight:700;position:absolute;top:10px;right:20px}.close-btn:hover,.close-btn:focus{color:#000;text-decoration:none;cursor:pointer}#auth-container h2{text-align:center;margin-bottom:20px}#auth-container input{width:100%;padding:10px;margin-bottom:10px;border-radius:5px;border:1px solid var(--border-color);box-sizing:border-box}#auth-container button{width:100%;padding:10px;border-radius:5px;border:none;background-color:var(--accent-color);color:#fff;cursor:pointer;font-size:1rem}#auth-container p{text-align:center;margin-top:15px}#auth-container a{color:var(--accent-color);text-decoration:none;font-weight:700}#subject-selection-list{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto}.subject-selection-item{padding:15px;background-color:var(--primary-bg);border-radius:8px;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;gap:15px}.subject-selection-item:hover{background-color:#e0e0e0}.subject-selection-item i{font-size:1.5rem;color:var(--accent-color)}.subject-selection-item h4{margin:0;font-size:1.1rem}.language-switcher select{border:none;background:transparent;font-size:.9rem;font-weight:700;color:var(--text-color);cursor:pointer}#mistake-detail-content{padding:10px}.mistake-image-container{width:100%;margin-bottom:20px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header-left,.header-right{display:flex;align-items:center}.header-right .icon-btn{margin-left:10px}.image-modal{background-color:#000000e6;display:flex;justify-content:center;align-items:center;padding:0;position:fixed;top:0;left:0;width:100%;height:100%}.image-modal.hidden{display:none}.image-modal .image-modal-content{margin:auto;display:block;max-width:80%;max-height:90%;width:auto;box-shadow:none;border:none;background:transparent}.close-image-modal{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;cursor:pointer;z-index:100}.close-image-modal:hover,.close-image-modal:focus{color:#bbb;text-decoration:none;cursor:pointer}.modal-nav-btn{background:transparent;border:none;color:#fff;font-size:3rem;cursor:pointer;padding:20px;position:absolute;top:50%;transform:translateY(-50%);opacity:.7;transition:opacity .3s;-webkit-user-select:none;user-select:none;z-index:10}.modal-nav-btn:hover{opacity:1}.modal-nav-btn.prev{left:20px}.modal-nav-btn.next{right:20px}#mistake-detail-image{cursor:zoom-in;width:100%;border-radius:10px;box-shadow:var(--shadow);max-height:400px;object-fit:contain;background-color:#f0f0f0}.attempts-container,.answer-container{background-color:var(--card-bg);padding:20px;border-radius:10px;margin-bottom:20px;box-shadow:var(--shadow)}.attempts-container h3,.answer-container h3{margin-top:0}#attempts-tracker{display:flex;gap:15px;margin-bottom:15px;flex-wrap:wrap}.attempt-record{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.8rem;color:var(--subtle-text);position:relative}.delete-attempt-btn{font-size:.8rem;color:var(--subtle-text);cursor:pointer;opacity:.5;transition:opacity .2s;margin-top:2px}.delete-attempt-btn:hover{opacity:1;color:#dc3545}.attempt-record i{font-size:1.5rem}.attempt-record .fa-check-circle{color:#28a745}.attempt-record .fa-times-circle{color:#dc3545}.add-attempt-controls button,.answer-container button{background-color:var(--accent-color);color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;margin-right:10px}#toggle-answer-btn.secondary{background-color:var(--subtle-text)}#answer-content{margin-top:15px;padding-top:15px;border-top:1px solid var(--border-color)}#answer-content img{max-width:100%;border-radius:5px}