/* SAT Forge Mistake Notebook */
* { box-sizing: border-box; }
body { margin: 0; color: var(--text-color); background: var(--page-background); }
.analytics-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px; padding:10px 4%; background:var(--card-background); border-bottom:1px solid var(--border-color); }
.analytics-brand { display:flex; align-items:center; gap:10px; color:var(--text-color); text-decoration:none; font-weight:800; }
.analytics-brand img { width:42px; height:42px; }
.analytics-header-actions { display:flex; align-items:center; gap:10px; }
#theme-toggle { min-width:44px; min-height:44px; color:var(--text-color); background:var(--card-background); border:1px solid var(--border-color); border-radius:10px; cursor:pointer; }
.analytics-container { width:min(1180px, calc(100% - 28px)); margin:30px auto 70px; }
.analytics-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.analytics-hero h1 { margin:4px 0 10px; font-size:clamp(2rem, 5vw, 3.4rem); }
.analytics-hero p { max-width:720px; color:var(--muted-text); }
.eyebrow { margin:0; color:#2563eb !important; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.button, .danger-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 15px; border-radius:10px; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; }
.button { color:#fff; background:#2563eb; border:1px solid #2563eb; }
.danger-button { color:#b91c1c; background:transparent; border:1px solid #fca5a5; }
.summary-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; margin-bottom:24px; }
.summary-grid article, .dashboard-section, .empty-dashboard { padding:22px; background:var(--card-background); border:1px solid var(--border-color); border-radius:16px; }
.summary-grid article { display:grid; gap:9px; }
.summary-grid span { color:var(--muted-text); font-size:.88rem; }
.summary-grid strong { font-size:1.8rem; }
.dashboard-section { margin-bottom:24px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.section-heading h2 { margin:4px 0 0; }
.weak-areas { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.weakness-card { padding:16px; color:var(--text-color); background:var(--page-background); border:1px solid var(--border-color); border-radius:12px; text-align:left; cursor:pointer; }
.weakness-card:hover { border-color:#2563eb; transform:translateY(-1px); }
.weakness-card-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.accuracy-track { height:8px; overflow:hidden; background:var(--border-color); border-radius:999px; }
.accuracy-track span { display:block; height:100%; background:#2563eb; border-radius:inherit; }
.weakness-card small { display:block; margin-top:9px; color:var(--muted-text); }
.metadata-note { margin:14px 0 0; color:var(--muted-text); font-size:.84rem; }
.notebook-heading { align-items:end; }
.notebook-filters { display:flex; flex-wrap:wrap; gap:10px; }
.notebook-filters label { display:grid; gap:5px; color:var(--muted-text); font-size:.78rem; font-weight:700; }
.notebook-filters select { min-height:40px; padding:8px 10px; color:var(--text-color); background:var(--page-background); border:1px solid var(--border-color); border-radius:8px; }
.mistake-list { display:grid; gap:12px; }
.mistake-card { overflow:hidden; background:var(--page-background); border:1px solid var(--border-color); border-radius:12px; }
.mistake-summary { display:flex; align-items:center; gap:9px; width:100%; padding:15px; color:var(--text-color); background:transparent; border:0; text-align:left; cursor:pointer; }
.mistake-title { flex:1; font-weight:750; }
.status-badge, .marked-badge { padding:5px 8px; border-radius:999px; font-size:.72rem; font-weight:800; text-transform:capitalize; }
.status-badge.incorrect { color:#991b1b; background:#fee2e2; }
.status-badge.skipped { color:#92400e; background:#fef3c7; }
.marked-badge { color:#1e40af; background:#dbeafe; }
.expand-icon { font-size:1.2rem; }
.mistake-details { padding:4px 18px 20px; border-top:1px solid var(--border-color); }
.question-meta { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.question-meta span { padding:5px 8px; color:var(--muted-text); border:1px solid var(--border-color); border-radius:999px; font-size:.75rem; }
.mistake-passage { margin-bottom:16px; padding:16px; white-space:pre-line; line-height:1.65; background:var(--card-background); border:1px solid var(--border-color); border-radius:10px; }
.mistake-details h3 { line-height:1.5; }
.mistake-image { display:block; max-width:100%; max-height:360px; margin:16px auto; object-fit:contain; }
.mistake-choices { display:grid; gap:8px; padding-left:32px; }
.mistake-choices li { padding:8px 10px; }
.answer-comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.answer-comparison div { display:grid; gap:6px; padding:14px; background:var(--card-background); border:1px solid var(--border-color); border-radius:10px; }
.answer-comparison span { color:var(--muted-text); font-size:.78rem; }
.mistake-explanation { margin-top:16px; padding:16px; background:var(--card-background); border-left:4px solid #2563eb; border-radius:8px; }
.mistake-explanation h4 { margin:0 0 8px; }
.mistake-explanation p { margin:0; white-space:pre-line; line-height:1.6; }
.notebook-empty, .empty-dashboard { text-align:center; padding:44px 20px; }
.muted { color:var(--muted-text); }
html[data-theme="dark"] .status-badge.incorrect { color:#fecaca; background:#7f1d1d; }
html[data-theme="dark"] .status-badge.skipped { color:#fde68a; background:#78350f; }
html[data-theme="dark"] .marked-badge { color:#bfdbfe; background:#1e3a8a; }
@media (max-width:850px) { .summary-grid { grid-template-columns:1fr 1fr; } .weak-areas { grid-template-columns:1fr 1fr; } .section-heading, .analytics-hero { flex-direction:column; } .notebook-heading { align-items:flex-start; } }
@media (max-width:560px) { .analytics-header { align-items:flex-start; flex-direction:column; } .analytics-header-actions { width:100%; } .summary-grid, .weak-areas, .answer-comparison { grid-template-columns:1fr; } .notebook-filters { display:grid; width:100%; } .mistake-summary { flex-wrap:wrap; } .mistake-title { flex-basis:70%; } }