/*
 * Quiskor - Custom Stylesheet
 * Diporting dari blok <style> pada Quiskor-sistem-penilaian-esai-3.html
 * Dimuat SETELAH CDN Tailwind/KaTeX di header.php (urutan sama seperti file asli)
 */

*{font-family:'Inter',sans-serif}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.fade-in{animation:fadeIn .4s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.slide-in{animation:slideIn .3s ease-out}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(37,99,235,.3);border-color:#2563eb}
.metric-card{transition:all .2s}.metric-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.btn-logout:hover{background-color:#fecaca;color:#dc2626}
.saved-pulse{animation:savedPulse .6s ease-out}@keyframes savedPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.animate-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.link-box{cursor:pointer;transition:all .15s}.link-box:hover{border-color:#2563eb;background-color:#eff6ff}
.session-card{transition:all .2s}.session-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.success-bounce{animation:successBounce .6s ease}@keyframes successBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes gradeReveal{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.grade-reveal{animation:gradeReveal .8s ease-out}
@keyframes progressFill{from{width:0}to{width:var(--fill-width)}}.progress-animate{animation:progressFill 1.2s ease-out forwards}
.soal-item{transition:all .3s}.soal-item.removing{opacity:0;transform:translateX(-20px);max-height:0;overflow:hidden;margin:0;padding:0;border-width:0}
.session-clickable{cursor:pointer;transition:all .2s}.session-clickable:hover{border-color:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,.15)}
@media(max-width:768px){.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;transition:opacity .3s}.sidebar-mobile{position:fixed!important;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .3s}.sidebar-mobile.open{transform:translateX(0)}.mobile-header{display:flex!important}.desktop-sidebar{display:none!important}}
.mobile-header{display:none}
.nav-active-dosen{background-color:#eff6ff;color:#1d4ed8}
.nav-active-mhs{background-color:#ecfdf5;color:#047857}
.nav-active-admin{background-color:#f5f3ff;color:#7c3aed}
.pagination-btn{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.pagination-btn:hover:not(:disabled){background:#f3f4f6}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed}
.pagination-btn.active{background:#2563eb;color:#fff}
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
.katex-display{margin:.5em 0;overflow-x:auto;overflow-y:hidden;padding:4px 0}
.soal-img{max-width:100%;max-height:300px;border-radius:8px;border:1px solid #e5e5e5;margin:8px 0;cursor:pointer;transition:transform .2s}
.soal-img:hover{transform:scale(1.02)}
.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #e5e5e5;background:#fff;color:#525252;transition:all .15s;gap:4px}
.toolbar-btn:hover{background:#f3f4f6;border-color:#d4d4d4}
.img-preview{position:relative;display:inline-block;margin:4px}
.img-preview img{max-width:200px;max-height:150px;border-radius:8px;border:1px solid #e5e5e5}
.img-preview .remove-img{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:#ef4444;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;border:2px solid white;line-height:1}
.rendered-content img.soal-img{max-width:100%;border-radius:8px;border:1px solid #e5e5e5;margin:8px 0}
.rendered-content .katex-display{margin:.5em 0}
.img-upload-area{border:2px dashed #d4d4d4;border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}
.img-upload-area:hover{border-color:#2563eb;background:#eff6ff}

.pg-choice{transition:all .15s;cursor:pointer}
.pg-choice:hover{background-color:#f3f4f6}
.pg-choice input[type="radio"]:checked+span{color:#1d4ed8;font-weight:600}
.tipe-btn{padding:6px 12px;font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;border:1px solid #e5e5e5;transition:all .15s}
.tipe-btn.tipe-active{background:#2563eb;color:#fff;border-color:#2563eb}
.tipe-btn.tipe-inactive{background:#f5f5f5;color:#525252;border-color:#e5e5e5}
.tipe-btn.tipe-inactive:hover{background:#e5e5e5}
.cheat-warning{position:fixed;inset:0;background:rgba(220,38,38,.95);z-index:100;color:white;text-align:center}
.auto-expand{min-height:120px;overflow-y:hidden;resize:none}
.exam-timer{position:fixed;top:16px;right:16px;z-index:45;background:white;border:2px solid #2563eb;border-radius:12px;padding:8px 16px;box-shadow:0 4px 12px rgba(37,99,235,.2)}
.exam-timer.timer-warning{border-color:#f59e0b;background:#fffbeb}
.exam-timer.timer-danger{border-color:#ef4444;background:#fef2f2;animation:timerPulse 1s ease infinite}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.7}}
body.exam-active *:not(input):not(textarea):not([contenteditable]){-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}