.hema-exam-app { --hema-primary:#760003; --hema-primary-dark:#500002; --hema-white:#ffffff; --hema-bg:#f7f3f3;
    font-family: Tahoma, "IRANSans", "Vazirmatn", sans-serif; direction:rtl; color:#2c2c2c; }
.hema-exam-app * { box-sizing:border-box; }
.hema-exam-app button { cursor:pointer; font-family:inherit; }

/* ---------- AUTH ---------- */
.hema-auth-view { display:flex; align-items:center; justify-content:center; min-height:70vh; padding:20px; background:var(--hema-bg); border-radius:14px; }
.hema-auth-box { background:var(--hema-white); border-radius:16px; box-shadow:0 10px 30px rgba(118,0,3,.12); padding:36px 32px; width:100%; max-width:380px; text-align:center; }
.hema-auth-logo { width:70px; margin-bottom:10px; }
.hema-auth-box h2 { color:var(--hema-primary); margin:0 0 20px; font-size:20px; }
.hema-auth-tabs { display:flex; margin-bottom:20px; border-radius:10px; overflow:hidden; border:1px solid var(--hema-primary); }
.hema-tab-btn { flex:1; padding:10px; background:var(--hema-white); color:var(--hema-primary); border:none; font-weight:700; transition:.2s; }
.hema-tab-btn.active { background:var(--hema-primary); color:#fff; }
.hema-auth-form { text-align:right; }
.hema-auth-form label { display:block; margin:12px 0 6px; font-size:13px; font-weight:600; }
.hema-auth-form input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; }
.hema-btn-primary { width:100%; margin-top:18px; padding:12px; background:var(--hema-primary); color:#fff; border:none; border-radius:9px; font-weight:700; font-size:15px; }
.hema-btn-primary:hover { background:var(--hema-primary-dark); }
.hema-auth-msg { min-height:18px; font-size:13px; margin-top:10px; color:#a30006; }
.hema-auth-msg.success { color:#1a7a34; }

/* ---------- PANEL LAYOUT ---------- */
.hema-panel-view { background:var(--hema-bg); border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.hema-navbar { background:var(--hema-primary); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; }
.hema-navbar-brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.hema-navbar-brand img { width:34px; height:34px; object-fit:contain; }
.hema-navbar-datetime { font-size:14px; opacity:.95; }

.hema-panel-body { display:flex; min-height:520px; }
.hema-sidebar { width:230px; background:#fff; border-left:1px solid #eee; display:flex; flex-direction:column; padding:20px 14px; }
.hema-sidebar-user { text-align:center; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid #eee; font-size:14px; }
.hema-sidebar-nav { display:flex; flex-direction:column; gap:8px; flex:1; }
.hema-nav-btn { text-align:right; background:transparent; border:none; padding:11px 14px; border-radius:9px; font-size:14px; font-weight:600; color:#444; }
.hema-nav-btn:hover { background:#f4e9e9; }
.hema-nav-btn.active { background:var(--hema-primary); color:#fff; }
.hema-logout-btn { margin-top:14px; background:#fff; border:1px solid var(--hema-primary); color:var(--hema-primary); padding:10px; border-radius:9px; font-weight:700; }
.hema-logout-btn:hover { background:var(--hema-primary); color:#fff; }

.hema-content { flex:1; padding:24px; overflow-y:auto; }
.hema-view { display:none; }
.hema-view.active { display:block; }

/* ---------- EXAM CARDS ---------- */
.hema-exam-card { background:#fff; border-radius:12px; padding:18px 20px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; border-right:4px solid var(--hema-primary); box-shadow:0 2px 8px rgba(0,0,0,.04); }
.hema-exam-card h3 { margin:0 0 6px; color:var(--hema-primary); }
.hema-exam-meta { font-size:13px; color:#777; }
.hema-btn { background:var(--hema-primary); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-weight:700; }
.hema-btn:hover { background:var(--hema-primary-dark); }
.hema-btn-outline { background:#fff; border:1px solid var(--hema-primary); color:var(--hema-primary); padding:9px 16px; border-radius:8px; font-weight:700; }

/* ---------- TAKE EXAM ---------- */
.hema-exam-header { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:14px 20px; border-radius:12px; margin-bottom:18px; }
.hema-countdown { background:var(--hema-primary); color:#fff; padding:8px 18px; border-radius:30px; font-weight:700; font-size:16px; }
.hema-countdown.hema-warning { background:#c47a00; }
.hema-question-card { background:#fff; border-radius:12px; padding:18px 20px; margin-bottom:14px; }
.hema-question-card h4 { margin-top:0; color:#222; }
.hema-answer-option { display:block; padding:10px 14px; border:1px solid #ddd; border-radius:8px; margin-bottom:8px; cursor:pointer; }
.hema-answer-option:hover { border-color:var(--hema-primary); }
.hema-answer-option input { margin-left:8px; }
.hema-answer-option.selected { border-color:var(--hema-primary); background:#fdf1f1; }

/* ---------- RESULTS ---------- */
.hema-cta-banner { background:linear-gradient(90deg,var(--hema-primary),#a30006); color:#fff; padding:18px 22px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.hema-cta-banner button { background:#fff; color:var(--hema-primary); border:none; padding:10px 18px; border-radius:8px; font-weight:700; }

.hema-result-exam-group { margin-bottom:26px; }
.hema-result-exam-group > h3 { color:var(--hema-primary); border-bottom:2px solid var(--hema-primary); display:inline-block; padding-bottom:4px; }
.hema-attempt-card { background:#fff; border-radius:12px; padding:16px 20px; margin-bottom:12px; }
.hema-attempt-summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.hema-score-badge { background:var(--hema-primary); color:#fff; padding:6px 14px; border-radius:20px; font-weight:700; }
.hema-attempt-details { display:none; margin-top:16px; border-top:1px dashed #ddd; padding-top:14px; }
.hema-attempt-details.open { display:block; }
.hema-review-q { padding:12px 0; border-bottom:1px solid #f1f1f1; }
.hema-review-opt { padding:6px 10px; border-radius:6px; margin:4px 0; font-size:14px; }
.hema-review-opt.correct { background:#e5f6e9; color:#1a7a34; font-weight:700; }
.hema-review-opt.wrong-selected { background:#fdeaea; color:#a30006; font-weight:700; }
.hema-review-note { background:#fff8e6; border-right:3px solid #c47a00; padding:8px 12px; margin-top:8px; font-size:13px; border-radius:6px; }

/* ---------- PROGRESS ---------- */
.hema-progress-select { margin-bottom:0; padding:8px 12px; border-radius:8px; border:1px solid #ddd; }
.hema-chart-wrap { background:#fff; border-radius:12px; padding:20px; }

/* ---------- PROGRESS STATS & EXTRAS ---------- */
.hema-stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px; }
.hema-stat-card { background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.hema-stat-value { font-size:22px; font-weight:800; color:var(--hema-primary); }
.hema-stat-label { font-size:12px; color:#777; margin-top:4px; }
.hema-trend-up { color:#1a7a34 !important; }
.hema-trend-down { color:#a30006 !important; }

.hema-progress-controls { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.hema-trend { font-size:13px; font-weight:700; padding:6px 12px; border-radius:20px; background:#f4f4f4; }
.hema-trend.hema-trend-up { background:#e5f6e9; }
.hema-trend.hema-trend-down { background:#fdeaea; }
.hema-trend.hema-trend-flat { background:#f0f0f0; color:#666; }

.hema-weak-box { background:#fff; border-radius:12px; padding:18px 20px; margin-top:20px; border-right:4px solid #c47a00; }
.hema-weak-box h3 { margin-top:0; color:#8a5800; font-size:16px; }
.hema-weak-item { padding:10px 0; border-bottom:1px solid #f1f1f1; }
.hema-weak-item:last-child { border-bottom:none; }
.hema-weak-q { font-weight:600; }
.hema-weak-count { font-weight:400; color:#a30006; font-size:12px; }

.hema-empty-state { text-align:center; color:#888; padding:40px 0; }
.hema-loading { text-align:center; color:var(--hema-primary); padding:30px 0; font-weight:700; }

@media (max-width: 720px) {
    .hema-exam-app { font-size:14px; }

    /* Navbar: stack brand + datetime, keep compact */
    .hema-navbar { flex-direction:column; align-items:flex-start; gap:6px; padding:12px 14px; }
    .hema-navbar-brand span { font-size:14px; }
    .hema-navbar-brand img { width:28px; height:28px; }
    .hema-navbar-datetime { font-size:12px; }

    /* Sidebar becomes a horizontal scrollable tab bar */
    .hema-panel-body { flex-direction:column; min-height:0; }
    .hema-sidebar { width:100%; border-left:none; border-bottom:1px solid #eee; flex-direction:row; align-items:center; padding:10px; gap:6px; }
    .hema-sidebar-user { display:none; }
    .hema-sidebar-nav { flex:1; flex-direction:row; gap:6px; overflow-x:auto; }
    .hema-nav-btn { flex:1 0 auto; white-space:nowrap; text-align:center; padding:9px 10px; font-size:12px; }
    .hema-logout-btn { width:auto; margin-top:0; padding:9px 12px; font-size:12px; white-space:nowrap; }

    .hema-content { padding:14px; }

    /* Auth box */
    .hema-auth-view { min-height:auto; padding:10px; }
    .hema-auth-box { padding:26px 20px; }

    /* Exam cards */
    .hema-exam-card { flex-direction:column; align-items:stretch; gap:12px; }
    .hema-exam-card .hema-btn { width:100%; }

    /* Take-exam */
    .hema-exam-header { flex-direction:column; align-items:stretch; gap:10px; text-align:center; }
    .hema-countdown { align-self:center; }
    .hema-options-grid { grid-template-columns:1fr; }

    /* CTA banner */
    .hema-cta-banner { flex-direction:column; align-items:stretch; gap:12px; text-align:center; }
    .hema-cta-banner button { width:100%; }

    /* Results */
    .hema-attempt-summary { flex-direction:column; align-items:flex-start; gap:8px; }

    /* Progress */
    .hema-stats-grid { grid-template-columns:repeat(2, 1fr); }
    .hema-progress-controls { flex-direction:column; align-items:stretch; }
    .hema-progress-select { width:100%; }
    .hema-chart-wrap { padding:12px; }
}

@media (max-width: 400px) {
    .hema-stats-grid { grid-template-columns:1fr 1fr; }
    .hema-stat-value { font-size:18px; }
}