body{
margin:0;
font-family:Arial, sans-serif;
background:#f8fafc;
}

/* ================= MAIN LAYOUT ================= */

.practice-layout{
display:flex;
min-height:calc(100vh - 120px);
}

/* ================= LEFT SIDEBAR ================= */

.sidebar{
width:260px;
background:#f1f5f9;
overflow-y:auto;
border-right:1px solid #e5e7eb;
position:sticky;
top:60px;
height:calc(100vh - 60px);
transition:0.3s;
}

/* scrollbar */

.sidebar::-webkit-scrollbar{
width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
background:#cbd5f5;
border-radius:4px;
}

.sidebar h3{
padding:16px;
margin:0;
border-bottom:1px solid #e5e7eb;
font-size:18px;
font-weight:600;
background:#f8fafc;
}

/* ================= TOPIC ITEMS ================= */

.topic{
padding:12px 16px;
cursor:pointer;
border-bottom:1px solid #e5e7eb;
transition:0.2s;
font-size:14px;
}

.topic:hover{
background:#e5e7eb;
}

.topic.active{
background:#04AA6D;
color:white;
font-weight:600;
}

/* ================= RIGHT CONTENT ================= */

.content{
flex:1;
padding:25px;
overflow-y:auto;
}

/* ================= QUESTION CARD ================= */

.question{
margin-bottom:25px;
padding:18px;
border:1px solid #e5e7eb;
border-radius:12px;
background:white;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
transition:0.2s;
position:relative;
}

.question:hover{
box-shadow:0 6px 16px rgba(0,0,0,0.08);
transform:translateY(-2px);
}

.question-image-wrap{
margin-top:10px;
}

.question-image{
max-width:min(100%, 420px);
max-height:240px;
border-radius:8px;
border:1px solid #e5e7eb;
object-fit:contain;
background:#fff;
}

/* Exams pills shown above each question */
.question-exams{
	margin-bottom:8px;
}

.exam-pill{
	display:inline-block;
	background:#eef2ff;
	color:#3730a3;
	border:1px solid #e0e7ff;
	padding:4px 8px;
	border-radius:999px;
	font-size:12px;
	margin-right:6px;
}

/* Difficulty badge at top-right */
.difficulty-badge{
	position:absolute;
	top:12px;
	right:12px;
	background:#f3f4f6;
	color:#111827;
	padding:6px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	border:1px solid #e5e7eb;
}

.difficulty-easy{
	background:#ecfdf5;
	color:#065f46;
	border-color:#bbf7d0;
}

.difficulty-medium{
	background:#fffbeb;
	color:#92400e;
	border-color:#fde68a;
}

.difficulty-hard{
	background:#fff1f2;
	color:#9f1239;
	border-color:#fecaca;
}

/* ================= OPTIONS ================= */

.option{
padding:10px 12px;
border:1px solid #ddd;
margin-top:8px;
border-radius:6px;
cursor:pointer;
transition:0.2s;
font-size:14px;
}

.option:hover{
background:#f3f4f6;
}

/* correct answer */

.option.correct{
background:#22c55e;
color:white;
border-color:#22c55e;
}

/* wrong answer */

.option.wrong{
background:#ef4444;
color:white;
border-color:#ef4444;
}

.flag-question-btn{
margin-top:12px;
padding:10px 14px;
border:none;
border-radius:8px;
cursor:pointer;
font-size:13px;
font-weight:600;
color:#fff;
background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
transition:0.2s;
}

.flag-question-btn:hover{
background:linear-gradient(135deg, #d97706 0%, #b45309 100%);
transform:translateY(-1px);
}

/* ================= EXPLANATION ================= */

.explanation{
margin-top:12px;
padding:12px;
background:#f1f5f9;
border-left:4px solid #04AA6D;
border-radius:6px;
font-size:14px;
line-height:1.6;
}

/* ================= HAMBURGER BUTTON ================= */

.topics-toggle{
display:none;
background:#04AA6D;
color:white;
border:none;
padding:10px 14px;
border-radius:6px;
cursor:pointer;
margin-bottom:15px;
}

/* ================= OVERLAY ================= */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:900;
}

.overlay.show{
opacity:1;
visibility:visible;
}

/* ================= FLAG MODAL ================= */

.flag-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
display:flex;
justify-content:center;
align-items:center;
z-index:2000;
padding:16px;
backdrop-filter:blur(4px);
}

.flag-modal-content{
width:100%;
max-width:480px;
background:white;
border-radius:16px;
padding:28px;
display:flex;
flex-direction:column;
gap:16px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
animation:slideUp 0.3s ease;
}

@keyframes slideUp{
from{
transform:translateY(20px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}

.flag-modal-content h3{
margin:0;
font-size:20px;
font-weight:700;
color:#1f2937;
}

.flag-modal-content p{
margin:0;
color:#6b7280;
font-size:14px;
line-height:1.5;
}

.flag-modal-content label{
font-size:13px;
color:#374151;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.4px;
margin-top:4px;
}

.flag-modal-content select,
.flag-modal-content textarea{
width:100%;
border:2px solid #e5e7eb;
border-radius:10px;
padding:12px;
font-size:14px;
font-family:inherit;
transition:all 0.2s ease;
color:#374151;
}

.flag-modal-content select:focus,
.flag-modal-content textarea:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,0.1);
}

.flag-modal-content textarea{
resize:vertical;
min-height:100px;
}

.flag-modal-actions{
display:flex;
justify-content:flex-end;
gap:12px;
margin-top:12px;
padding-top:16px;
border-top:1px solid #e5e7eb;
}

.flag-modal-actions .btn-primary,
.flag-modal-actions .btn-secondary{
border:none;
border-radius:8px;
padding:12px 18px;
cursor:pointer;
font-weight:600;
font-size:14px;
transition:all 0.2s ease;
}

.flag-modal-actions .btn-primary{
background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color:#fff;
}

.flag-modal-actions .btn-primary:hover{
background:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
transform:translateY(-2px);
}

.flag-modal-actions .btn-secondary{
background:#f3f4f6;
color:#374151;
}

.flag-modal-actions .btn-secondary:hover{
background:#e5e7eb;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width:768px){

.practice-layout{
flex-direction:column;
}

/* hamburger button */

.topics-toggle{
display:block;
}

/* FULL SCREEN SIDEBAR */

.sidebar{
position:fixed;
left:-100%;
top:60px;
width:100%;
height:calc(100vh - 60px);
background:#f1f5f9;
z-index:1000;
transition:0.3s;
overflow-y:auto;
}

/* OPEN */

.sidebar.open{
left:0;
}

/* hide title */

.sidebar h3{
padding:16px;
font-size:18px;
background:#f8fafc;
}

/* topics */

.topic{
padding:14px 16px;
font-size:15px;
border-bottom:1px solid #e5e7eb;
}

/* content */

.content{
padding:15px;
}

.flag-modal-content{
padding:20px;
max-width:calc(100vw - 24px);
}

.flag-modal-content h3{
font-size:18px;
}

.flag-modal-actions{
flex-direction:column-reverse;
}

.flag-modal-actions button{
width:100%;
}

}