:root { --primary:#ff6b6b; --secondary:#feca57; }
        body { font-family:'Poppins',sans-serif; background:linear-gradient(135deg,#1a1a2e,#16213e); color:#fff; min-height:100vh; }
        .navbar { background:rgba(26,26,46,0.95)!important; backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.1); }
        .quiz-header { background:rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(10px); padding:14px 0; color:white; position:sticky; top:56px; z-index:100; }
        .timer-container { background:rgba(255,255,255,0.15); border-radius:50px; padding:8px 20px; display:inline-flex; align-items:center; gap:10px; }
        .timer-display { font-size:1.5rem; font-weight:700; font-family:'Outfit',monospace; }
        .timer-warning { color:#feca57!important; } .timer-danger { color:#ff6b6b!important; }
        .quiz-container { display:flex; gap:25px; padding:30px 0; }
        .main-content  { flex:1; min-width:0; } .sidebar-nav { width:280px; flex-shrink:0; }
        .question-card { background:rgba(255,255,255,0.07); border-radius:20px; padding:30px; box-shadow:0 8px 30px rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.12); }
        .question-number { font-size:0.9rem; color:rgba(255,255,255,0.5); margin-bottom:10px; }
        .question-text   { font-size:1.3rem; font-weight:600; margin-bottom:25px; color:#fff; }
        .question-image  { max-width:100%; border-radius:12px; margin-bottom:25px; }
        .option-item { background:rgba(255,255,255,0.06); border-radius:12px; padding:15px 20px; margin-bottom:12px; cursor:pointer; transition:all 0.3s; border:2px solid rgba(255,255,255,0.1); display:flex; align-items:center; color:#fff; }
        .option-item:hover   { background:rgba(255,255,255,0.12); border-color:rgba(254,202,87,0.4); }
        .option-item.selected{ background:rgba(255,107,107,0.2); border-color:#ff6b6b; }
        .option-item input   { margin-right:15px; width:20px; height:20px; accent-color:#ff6b6b; }
        .option-item label   { cursor:pointer; margin:0; flex:1; }
        .option-image { max-height:40px; margin-left:15px; border-radius:8px; }
        .nav-buttons { display:flex; justify-content:space-between; margin-top:25px; }
        .btn-nav { padding:12px 25px; border-radius:30px; font-weight:500; transition:all 0.3s; }
        .btn-prev { background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); }
        .btn-prev:hover { background:rgba(255,255,255,0.18); color:#fff; }
        .btn-next { background:linear-gradient(45deg,#ff6b6b,#feca57); color:#000; border:none; font-weight:700; }
        .btn-next:hover { transform:translateY(-2px); color:#000; }
        .btn-finish { background:linear-gradient(45deg,#4caf50,#2e7d32); color:white; border:none; font-weight:700; }
        .btn-finish:hover { transform:translateY(-2px); color:#fff; }
        .sidebar-card { background:rgba(255,255,255,0.07); border-radius:20px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.12); position:sticky; top:140px; }
        .sidebar-title { font-weight:600; margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid rgba(255,107,107,0.5); background:linear-gradient(45deg,#ff6b6b,#feca57); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .question-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(45px,1fr)); gap:10px; }
        .question-btn { width:100%; aspect-ratio:1; border-radius:10px; border:2px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#fff; font-weight:600; transition:all 0.2s; display:flex; align-items:center; justify-content:center; cursor:pointer; }
        .question-btn:hover    { background:rgba(255,255,255,0.15); }
        .question-btn.answered { background:linear-gradient(45deg,#ff6b6b,#feca57); color:#000; border-color:transparent; }
        .question-btn.current  { border-color:#feca57; box-shadow:0 0 0 3px rgba(254,202,87,0.3); }
        .progress-stats { margin-top:20px; padding-top:15px; border-top:1px solid rgba(255,255,255,0.1); }
        .stat-item { display:flex; justify-content:space-between; margin-bottom:8px; }
        .modal-start .modal-content { border-radius:20px; border:none; background:#1e1e3a; color:#fff; }
        .modal-start .modal-header { background:linear-gradient(135deg,#ff6b6b,#feca57); color:#000; border-radius:20px 20px 0 0; border:none; }
        .modal-start .modal-header .modal-title { color:#000; }
        .modal-start .modal-body { color:#fff; }
        .quiz-info-box { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:15px; padding:20px; margin-bottom:20px; }
        .quiz-info-box p { color:rgba(255,255,255,0.65)!important; }
        .quiz-info-item { display:flex; align-items:center; gap:15px; margin-bottom:12px; }
        .quiz-info-item i { width:25px; color:#feca57; }
        .form-control { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; border-radius:10px; }
        .form-control::placeholder { color:rgba(255,255,255,0.4); }
        .form-control:focus { background:rgba(255,255,255,0.12); color:#fff; border-color:#ff6b6b; box-shadow:0 0 0 0.2rem rgba(255,107,107,0.25); }
        .form-label { color:rgba(255,255,255,0.85); }
        .result-status { font-size:1.3rem; font-weight:600; margin:20px 0; }
        .result-status.passed { color:#4caf50; } .result-status.failed { color:#ff6b6b; }
        .score-circle { width:150px; height:150px; border-radius:50%; background:linear-gradient(135deg,#ff6b6b,#feca57); display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 20px; color:#000; }
        .score-value { font-size:3rem; font-weight:700; } .score-total { font-size:1rem; opacity:0.8; }
        @media (max-width:768px) {
            .quiz-container { flex-direction:column; padding:15px 0; gap:15px; }
            .sidebar-nav { width:100%; } .sidebar-card { position:static; padding:15px; }
            .quiz-header { top:0; padding:12px 0; } .timer-display { font-size:1.2rem; }
            .question-card { padding:20px 15px; } .question-text { font-size:1.15rem; }
            .option-item { padding:12px 15px; } .nav-buttons { gap:10px; margin-top:20px; }
            .btn-nav { flex:1; padding:10px; font-size:0.9rem; display:flex; justify-content:center; align-items:center; }
            .question-grid { gap:8px; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); }
            .score-circle { width:120px; height:120px; } .score-value { font-size:2.2rem; }
        }
        @media (max-width:480px) {
            .timer-display { font-size:1rem; } .question-text { font-size:1rem; }
            .btn-nav { padding:8px; font-size:0.85rem; }
            .option-item { padding:10px 12px; } .option-item label { font-size:0.9rem; }
        }