:root{--primary-blue:#4f46e5;--primary-dark:#4338ca;--bg-light:#f3f4f6;--text-dark:#111827;--text-gray:#4b5563;--text-light-gray:#9ca3af;--card-bg:#fff;--border-color:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}html,body{width:100%;height:100%;margin:0;padding:0}html{font-size:110%}body{background-color:var(--bg-light);color:var(--text-dark);min-height:100vh;line-height:1.5}#app{flex-direction:column;min-height:100vh;display:flex}body.no-scroll{height:100%;overflow:hidden}html:has(body.no-scroll){height:100%;overflow:hidden}.modal-overlay{z-index:1000;opacity:0;visibility:hidden;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s,visibility .3s;display:flex;position:fixed;top:0;left:0}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background-color:#fff;border-radius:20px;width:90%;max-width:400px;max-height:90vh;padding:2rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow-y:auto;transform:scale(.9);box-shadow:0 20px 25px -5px #0000001a}.modal-overlay.active .modal-content{transform:scale(1)}.close-btn{cursor:pointer;color:var(--text-gray);background:0 0;border:none;padding:.25rem;font-size:1.5rem;line-height:1;position:absolute;top:1.25rem;right:1.25rem}.modal-title{color:var(--text-dark);text-align:center;border-bottom:1.5px solid var(--border-color);flex-shrink:0;margin-bottom:1rem;padding-bottom:.75rem;font-size:1.75rem;font-weight:700}.modal-section{margin-bottom:1.25rem}.modal-label{color:var(--text-dark);margin-bottom:.5rem;font-size:.95rem;font-weight:700;display:block}.modal-text{color:var(--text-dark);font-size:1rem;line-height:1.5}.example-text{color:var(--text-gray);font-style:italic}.modal-footer-text{color:var(--text-dark);text-align:center;margin-bottom:.75rem;font-size:.95rem;font-weight:600}.grade-list{flex-direction:column;gap:.5rem;display:flex}.grade-row{text-align:left;border:1.5px solid var(--border-color);cursor:pointer;background-color:#fff;border-radius:12px;align-items:center;gap:.85rem;width:100%;padding:.6rem .85rem;transition:all .15s;display:flex}.grade-row:active{transform:scale(.99)}.grade-num{color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1.05rem;font-weight:700;display:flex}.grade-row.pass .grade-num{background-color:#10b981}.grade-row.fail .grade-num{background-color:#ef4444}.grade-text{flex-direction:column;line-height:1.25;display:flex}.grade-label{color:var(--text-dark);font-size:.95rem;font-weight:700}.grade-desc{color:var(--text-gray);font-size:.8rem}.grade-row.pass:hover{background-color:#ecfdf5;border-color:#10b981}.grade-row.fail:hover{background-color:#fef2f2;border-color:#ef4444}.grade-row.selected{box-shadow:0 0 0 1.5px var(--primary-blue);border-color:var(--primary-blue)}.submit-btn{background-color:var(--primary-blue);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:.85rem 2rem;font-size:1.1rem;font-weight:600;transition:transform .1s,background-color .2s;box-shadow:0 4px 15px #4f46e54d}.submit-btn:active{background-color:var(--primary-dark);transform:scale(.99)}.submit-btn:disabled{box-shadow:none;cursor:not-allowed;background-color:#d1d5db}.action-btn{cursor:pointer;border-radius:12px;flex:1;padding:.75rem;font-size:1rem;font-weight:600;transition:all .2s}.cancel-btn{border:1.5px solid var(--border-color);color:var(--text-dark);background-color:#fff}.confirm-btn{background-color:var(--primary-blue);color:#fff;border:none}.confirm-btn:disabled{cursor:not-allowed;background-color:#d1d5db}.error-msg{color:#ef4444;font-size:.95rem}.loading-state{text-align:center;color:var(--text-gray);margin:auto;padding:3rem 1rem}