body { font-family: sans-serif; background-color: #f4f6f8; margin: 0; padding: 20px; }
.test-wrapper { display: flex; gap: 20px; max-width: 1000px; margin: 0 auto; }
.main-panel { flex: 3; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.side-panel { flex: 1; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-height: 500px; overflow-y: auto; }

.review-card { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.opt-correct { background-color: #ECFDF5; color: #065F46; border: 1px solid #c3e6cb; }
.opt-incorrect { background-color: #FEF2F2; color: #991B1B; border: 1px solid #f5c6cb; }
.opt-neutral { background-color: #fff; border: 1px solid #ddd; color: #333; }
.solution-box { margin-top: 15px; background: #F8FAFC; border-left: 4px solid #6200EE; padding: 15px; border-radius: 4px; }

.controls { display: flex; justify-content: space-between; margin-top: 25px; flex-wrap: wrap; gap: 10px; }
.btn { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; color: white; }
.btn-prev { background: #6c757d; }
.btn-next { background: #2196F3; }
.btn-skip { background: #F44336; }
.btn-review { background: #9C27B0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }
.grid-btn { padding: 10px; text-align: center; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; font-weight: bold; transition: 0.2s; }
.grid-btn:hover { filter: brightness(0.9); }

.status-unvisited { background: #E0E0E0; color: #000; border-color: #ccc; }
.status-answered { background: #4CAF50; color: white; border-color: #4CAF50; }
.status-skipped { background: #F44336; color: white; border-color: #F44336; }
.status-review { background: #9C27B0; color: white; border-color: #9C27B0; }

.dialog-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2000; justify-content: center; align-items: center; }
.dialog-box { background: white; padding: 25px; border-radius: 4px; max-width: 400px; width: 90%; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.dialog-btn { background: transparent; border: none; font-weight: bold; cursor: pointer; font-size: 1rem; padding: 10px; text-transform: uppercase; }

.auth-input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 1rem; }