/* =====================================================
   EduGen Pro — Student-Friendly Document Styles
   ===================================================== */

:root {
    --edu-primary:    #2563eb;
    --edu-accent:     #10b981;
    --edu-warn:       #f59e0b;
    --edu-danger:     #ef4444;
    --edu-dark:       #1e293b;
    --edu-muted:      #64748b;
    --edu-light:      #f8fafc;
    --edu-border:     #e2e8f0;
    --edu-correct:    #d1fae5;
    --edu-correct-border: #10b981;
    --edu-wrong:      #fff7ed;
    --edu-radius:     12px;
    --edu-shadow:     0 2px 12px rgba(0,0,0,.06);
}

/* === Wrapper === */
.edugen-document-wrapper {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--edu-dark);
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto;
}

/* === Document Header Banner === */
.edugen-document-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 60%, #1d4ed8 100%);
    border-radius: var(--edu-radius) var(--edu-radius) 0 0;
    padding: 36px 40px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.edugen-document-header::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.edugen-doc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    opacity: .85;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.edugen-doc-brand-icon { font-size: 20px; }
.edugen-doc-logo { height: 32px; border-radius: 6px; }
.edugen-doc-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    margin: 0 0 18px;
    line-height: 1.3;
    color: #fff !important;
    border: none !important;
    padding: 0 !important;
}
.edugen-doc-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.edugen-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,.18);
    color: #fff;
    letter-spacing: .02em;
}
.edugen-pill.pill-subject { background: rgba(16,185,129,.35); }
.edugen-pill.pill-level   { background: rgba(245,158,11,.35); }
.edugen-pill.pill-board   { background: rgba(255,255,255,.15); }
.edugen-pill.pill-type    { background: rgba(99,102,241,.4); }

/* === Document Body === */
.edugen-document-body {
    background: #fff;
    border: 1px solid var(--edu-border);
    border-top: none;
    border-radius: 0 0 var(--edu-radius) var(--edu-radius);
    padding: 32px 40px 40px;
}

/* === Section Titles === */
.edugen-section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--edu-primary) !important;
    border-bottom: 2px solid var(--edu-border) !important;
    padding-bottom: 10px !important;
    margin: 32px 0 20px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.edugen-section-title::before { content: '§'; opacity: .4; font-size: 14px; }

/* === Question Block === */
.edugen-question {
    background: #fff;
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--edu-shadow);
    transition: box-shadow .2s;
    page-break-inside: avoid;
}
.edugen-question:hover { box-shadow: 0 4px 20px rgba(37,99,235,.1); }

/* Question header row */
.edugen-question-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.edugen-question-number {
    width: 34px; height: 34px;
    background: var(--edu-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}
.edugen-difficulty {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.edugen-difficulty.easy,
.edugen-difficulty.Easy    { background: #d1fae5; color: #065f46; }
.edugen-difficulty.medium,
.edugen-difficulty.Medium  { background: #fef3c7; color: #92400e; }
.edugen-difficulty.hard,
.edugen-difficulty.Hard    { background: #fee2e2; color: #991b1b; }
.edugen-difficulty.challenge,
.edugen-difficulty.Challenge { background: #ede9fe; color: #5b21b6; }

.edugen-marks-badge {
    margin-left: auto;
    background: #eff6ff;
    color: var(--edu-primary);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* Question text */
.edugen-question-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--edu-dark);
    margin-bottom: 18px;
    line-height: 1.7;
}

/* === MCQ Options === */
.edugen-options {
    list-style: none;
    padding: 0; margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.edugen-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid var(--edu-border);
    background: var(--edu-light);
    font-size: 14px;
    cursor: default;
    transition: border-color .15s, background .15s;
    position: relative;
}
.edugen-option:hover { border-color: #93c5fd; background: #eff6ff; }
.edugen-option.correct {
    border-color: var(--edu-correct-border) !important;
    background: var(--edu-correct) !important;
}
.edugen-option-letter {
    width: 28px; height: 28px;
    background: var(--edu-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
    color: var(--edu-dark);
}
.edugen-option.correct .edugen-option-letter {
    background: var(--edu-correct-border);
    color: #fff;
}
.edugen-option-text { flex: 1; line-height: 1.5; }
.edugen-correct-badge {
    font-size: 11px;
    font-weight: 700;
    color: #065f46;
    background: rgba(16,185,129,.2);
    padding: 2px 8px;
    border-radius: 10px;
}

/* === Answer / Explanation Block === */
.edugen-answer-block {
    background: linear-gradient(to bottom right, #f0f9ff, #e0f2fe);
    border: 1px solid #bae6fd;
    border-left: 4px solid var(--edu-primary);
    border-radius: 0 8px 8px 0;
    padding: 18px 20px;
    margin-top: 16px;
}
.edugen-answer-block h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--edu-primary) !important;
    margin: 0 0 12px !important;
    border: none !important;
    padding: 0 !important;
}
.edugen-step {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #e0f2fe;
    font-size: 14px;
    line-height: 1.6;
}
.edugen-step:last-child { border-bottom: none; }
.edugen-step-num {
    width: 22px; height: 22px;
    background: var(--edu-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.edugen-answer-line {
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0;
    padding-left: 12px;
    border-left: 2px solid #bae6fd;
}

/* === Key Concept Box === */
.edugen-key-concept {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border: 1px solid #fde68a;
    border-left: 4px solid var(--edu-warn);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
}
.edugen-key-concept strong {
    display: block;
    color: #92400e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

/* === Examiner Tip === */
.edugen-examiner-tip {
    background: linear-gradient(135deg, #fdf4ff, #f3e8ff);
    border: 1px solid #e9d5ff;
    border-left: 4px solid #8b5cf6;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}
.edugen-examiner-tip strong {
    display: block;
    color: #5b21b6;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

/* === Content wrapper (fallback) === */
.edugen-content .edugen-para {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 12px;
    color: var(--edu-dark);
}

/* === Print styles === */
@media print {
    .edugen-document-header { background: #1e3a5f !important; -webkit-print-color-adjust: exact; }
    .edugen-question { box-shadow: none; border: 1px solid #ccc; }
    .edugen-option.correct { background: #d1fae5 !important; }
}

/* === Responsive === */
@media (max-width: 600px) {
    .edugen-document-header { padding: 24px 20px 18px; }
    .edugen-document-body   { padding: 20px 16px 24px; }
    .edugen-question        { padding: 16px 14px; }
    .edugen-doc-title       { font-size: 20px; }
}