.btn.secondary{ background: transparent; color: var(--primary); border: 1px solid var(--primary); box-shadow: none; } .btn.secondary:hover { background: var(--primary); color: white; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10, 168, 158, 0.25); } .btn.secondary:active { background: var(--primary); color: white; transform: translateY(0px) scale(0.99); } .btn.danger{ background: linear-gradient(145deg, var(--danger), #c9302c); color: white; box-shadow: 0 4px 12px rgba(217, 83, 79, 0.2), var(--shadow-sm); } /* Footer / About Me Styling */ .about-me-container{text-align:center;margin-top:20px;padding-top:12px;border-top:1px dashed var(--soft-border);font-size:14px;color:var(--muted);line-height:1.5;} .about-me-container a {color:var(--primary);text-decoration:none;font-weight:700;} /* ---------- QUIZ ---------- */ .quiz-container{display:flex;flex-direction:column;gap:12px} .header-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 6px} .timer{font-size:14px;font-weight:800;color:var(--danger);padding:8px 10px;border-radius:8px;border:1px solid rgba(253,238,234,0.8);background:rgba(255,255,255,0.92)} body.dark-mode .timer { background: rgba(40, 20, 20, 0.92); border-color: rgba(217, 83, 79, 0.2); } .header-controls button{padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fff;cursor:pointer;font-weight:700} .quiz-grid{display:grid;grid-template-columns:1fr 320px;gap:18px} .question-area{background:var(--glass);padding:16px;border-radius:10px;border:1px solid #eef6ff;min-height:220px;transition:opacity var(--transition), transform var(--transition); overflow-y: auto; max-height: calc(100vh - 200px); -webkit-overflow-scrolling: touch; box-sizing:border-box; box-shadow: var(--shadow-sm); } .q-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px} .question-text{font-size:17px;line-height:1.45;color:var(--text);margin:8px 0 14px;word-break:break-word;white-space:normal} .options-container label{display:block;margin-bottom:10px;padding:12px;border-radius:10px;background:#fff;border:1px solid #eef6ff;cursor:pointer;transition:all .12s ease;white-space:normal;word-break:break-word; box-shadow: var(--shadow-sm);} .options-container label:hover{transform:translateY(-3px);box-shadow: var(--shadow-md); } .options-container input{margin-right:12px;transform:scale(1.02)} .option-letter{font-weight:800;margin-right:8px;color:var(--primary)} .options-container label.selected { border-color: var(--primary); background: #f0fafa; box-shadow: 0 0 0 3px rgba(10, 168, 158, 0.1); } body.dark-mode .options-container label.selected { border-color: var(--primary); background: #102a28; } .navigation-panel{display:flex;flex-direction:column;gap:12px;align-items:stretch} .nav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .nav-grid button{padding:8px 6px;border-radius:8px;border:none;cursor:pointer;font-weight:700;background:#f1f7ff;color:var(--primary); transition: all var(--transition); box-shadow: var(--shadow-sm);} .nav-grid button:hover { transform: scale(1.05); filter: brightness(0.95); box-shadow: var(--shadow-md); } .nav-grid button.current{background:linear-gradient(90deg,var(--success),#31c56b);color:white; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);} .nav-grid button.answered{background:linear-gradient(90deg,var(--primary),#2bb0b0);color:white; box-shadow: 0 4px 12px rgba(10, 168, 158, 0.2);} .nav-grid button.flagged{position:relative;box-shadow:inset 0 0 0 2px var(--danger); } .nav-grid button.flagged::after{content:"⚑";position:absolute;right:6px;top:2px;font-size:12px;color:var(--danger)} .nav-actions{display:flex;gap:8px;justify-content:space-between;margin-top:auto} .nav-actions button{flex:1;padding:10px 12px;border-radius:8px;border:none;font-weight:700;cursor:pointer} .fade-wrap { position:relative; overflow:hidden; } .fade { opacity:0; transform:translateY(6px); transition:opacity var(--transition), transform var(--transition); } .fade.show { opacity:1; transform:none; } .progress-label{font-size:13px;color:var(--muted);margin-bottom:6px} .progress-bar{width:100%;height:10px;background:linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));border-radius:999px;overflow:hidden;border:1px solid var(--soft-border)} .progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width 280ms cubic-bezier(.2,.9,.2,1)} #resultsPage{display:none} .results-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px} .score-card{background:linear-gradient(90deg,#ffffff,#f6fffb);border:1px solid #e6f7ef;padding:12px;border-radius:10px;display:flex;gap:18px;align-items:center; box-shadow: var(--shadow-md);} .score-big{font-size:28px;font-weight:900;color:#0b2340} .score-sub{color:var(--muted)} .summary-box{margin-top:14px;display:flex;gap:12px;align-items:stretch;flex-wrap:wrap} .summary-tile{flex:1;min-width:160px;border-radius:10px;padding:12px;color:white;font-weight:900;display:flex;flex-direction:column;align-items:flex-start;gap:6px; box-shadow: var(--shadow-md); transition: all var(--transition); } .summary-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .tile-total{background:linear-gradient(145deg,#4b5563,#6b7280)} .tile-correct{background:linear-gradient(145deg,#16a34a,#34d399)} .tile-wrong{background:linear-gradient(145deg,#dc2626,#f97316)} .tile-unanswered{background:linear-gradient(145deg,#b45309,#f59e0b)} .results-list{margin-top:14px;display:flex;flex-direction:column;gap:10px} .question-result{padding:12px;border-radius:10px;display:flex;flex-direction:column;gap:8px;border:2px solid transparent; box-shadow: var(--shadow-sm); } .question-result.correct{background:#e6ffef;border-color:#b7f0c9} .question-result.incorrect{background:#fff1f0;border-color:#f5c3c3} .question-result.unanswered{background:#fff9e6;border-color:#ffe6a8} body.dark-mode .question-result.correct{background:#1c3a2a;border-color:#2a5c3f} body.dark-mode .question-result.incorrect{background:#3e1f1f;border-color:#6e3232} body.dark-mode .question-result.unanswered{background:#3f321b;border-color:#70572c} .qr-head{display:flex;justify-content:space-between;align-items:center;gap:12px} .qr-qtext{font-weight:800;color:var(--text)} .qr-meta{font-weight:700} .stats-table{width:100%;border-collapse:collapse;margin-top:10px} .stats-table td{padding:8px;border:1px solid var(--soft-border)} body.dark-mode .stats-table td { border-color: var(--soft-border); } .jump-overlay{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:var(--card);border-radius:8px;padding:10px 14px;border:1px solid var(--soft-border);box-shadow:var(--shadow-lg);display:none;font-weight:800;z-index:9999} .jump-overlay.show{display:block} #mobileControls{display:none;gap:8px;margin-top:8px;} /* Themes (class toggles, not destructive) */ body.theme-classic { --primary:#0b74ff; --accent:#17a2b8; --bg:#f3f6fb; } body.theme-teal { --primary:#0aa89e; --accent:#ffd166; --bg:#f6fbfa; } body.theme-amber { --primary:#e07a3f; --accent:#ffd580; --bg:#fffaf6; } body.theme-mint { --primary:#4caf50; --accent:#81c784; --bg:#e8f5e9; } /* Dark mode visuals */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background:#101010; color:var(--text); border:1px solid var(--soft-border); } body.dark-mode .options-container label { background: #101010; border-color: var(--soft-border); } body.dark-mode .header-controls button { background: #101010; border-color: var(--soft-border); color: var(--text); } /* ========================= Custom Modal Styles ========================= */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .modal-backdrop.show { opacity: 1; visibility: visible; } .modal-content { background: var(--card); border-radius: 12px; padding: 24px; width: min(420px, 90%); box-shadow: var(--shadow-lg); transform: scale(0.95); opacity: 0; transition: all 0.2s ease-out; } .modal-backdrop.show .modal-content { transform: scale(1); opacity: 1; } .modal-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 10px; } .modal-body { font-size: 15px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; white-space: pre-wrap; /* Preserve newlines */ } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .modal-actions .btn { min-width: 80px; } body.dark-mode .modal-content { background: #101010; border: 1px solid var(--soft-border); } /* ========================= Responsive rules ========================= */ @media (min-width:981px){ #quizPage .quiz-container { height: 100vh; max-height: 100vh; } #quizPage .quiz-grid { flex-grow: 1; height: 100%; } #quizPage .question-area { max-height: 100%; } #quizPage .navigation-panel { height: 100%; } } @media (max-width:980px){ .quiz-grid{grid-template-columns:1fr; gap:14px;} .navigation-panel{order:2; max-height: calc(100vh - 200px); overflow:auto; -webkit-overflow-scrolling: touch;} .question-area{order:1; max-height: calc(100vh - 220px); overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing:border-box;} .container{ padding-bottom: calc(var(--footer-space) + env(safe-area-inset-bottom, 16px)); overflow:auto; } .nav-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap:8px; padding-bottom:6px; align-items:stretch; } .nav-grid button{ min-width:0; width:100%; text-align:center; padding:8px 6px; } .nav-actions button, .btn{min-height:48px;padding:12px 14px;font-size:15px;} .options-container label{padding:14px;font-size:15px;white-space:normal;word-break:break-word;} #mobileControls{ display:flex; } .header-bar{ position:sticky; top:env(safe-area-inset-top,0); background:var(--card); z-index:40; padding:8px; border-bottom:1px solid var(--soft-border); } body.dark-mode .header-bar { background: var(--card); /* Ensure sticky header has bg */ } .container{ padding:12px 12px calc(12px + var(--footer-space) + env(safe-area-inset-bottom, 0px)); min-height: 100vh; } } @media (max-width:600px){ .container{ padding:12px 12px calc(12px + var(--footer-space) + env(safe-area-inset-bottom, 0px)); } #quizPage .quiz-container{ padding-top: 10px; } .options-container input{transform:scale(0.98); margin-right:10px;} .question-text{font-size:15px;} .options-container label{font-size:14px;padding:12px;} } @media (prefers-reduced-motion: reduce){ *{transition-duration:0s!important;animation-duration:0s!important} } #mobileControls{ position: fixed; left: 0; right: 0; bottom: 0; padding: 10px; background: linear-gradient(180deg, rgba(var(--card), 0.8), rgba(var(--card), 0.98)); backdrop-filter: blur(4px); z-index: 60; box-shadow: 0 -6px 20px rgba(0,0,0,0.06); display:none; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } body.dark-mode #mobileControls { background: linear-gradient(180deg, rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.98)); box-shadow: 0 -6px 20px rgba(0,0,0,0.2); } /* Focus Mode Styles */ #focusModeBtn, #exitFocusBtn { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); background: #fff; cursor: pointer; font-weight: 700; margin-left: 8px; } body.dark-mode #focusModeBtn, body.dark-mode #exitFocusBtn { background: #101010; border-color: var(--soft-border); color: var(--text); } #exitFocusBtn { display: none; /* Hidden by default */ position: fixed; top: 10px; right: 10px; z-index: 10001; border-color: var(--primary); color: var(--primary); } body.focus-mode .header-bar, body.focus-mode .navigation-panel, body.focus-mode #mobileControls { display: none !important; } body.focus-mode .quiz-grid { grid-template-columns: 1fr; height: 100vh; padding: 0; margin: 0; } body.focus-mode .question-area { height: 100vh; max-height: 100vh; border-radius: 0; border: none; } body.focus-mode #exitFocusBtn { display: block; } body.focus-mode .container { padding: 0; }