/* ========== Reset & Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #333; line-height: 1.6; min-height: 100vh; }
a { color: #1890ff; text-decoration: none; }
a:hover { color: #40a9ff; }

/* ========== Navbar ========== */
.navbar { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; height: 56px; gap: 24px; }
.nav-brand { font-size: 18px; font-weight: 700; color: #1a73e8; white-space: nowrap; }
.nav-links { display: flex; gap: 4px; flex: 1; list-style: none; }
.nav-link { padding: 8px 14px; border-radius: 6px; color: #555; font-size: 14px; transition: all .2s; }
.nav-link:hover { background: #e8f0fe; color: #1a73e8; }
.nav-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nav-user-name { font-size: 14px; color: #333; }
.nav-role-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e6f7ff; color: #1890ff; }
.nav-role-badge.admin { background: #fff7e6; color: #fa8c16; }
.nav-logout { font-size: 13px; color: #999; padding: 4px 8px; }
.nav-footer-item { display: none; }
.nav-logout:hover { color: #ff4d4f; }

/* ========== Main Container ========== */
.main-container { max-width: 1400px; margin: 0 auto; padding: 24px 20px; }

/* ========== Flash Messages ========== */
.flash-messages { margin-bottom: 20px; }
.flash-message { padding: 12px 16px; border-radius: 6px; margin-bottom: 8px; font-size: 14px; }
.flash-success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
.flash-error { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; }
.flash-warning { background: #fffbe6; border: 1px solid #ffe58f; color: #faad14; }
.flash-info { background: #e6f7ff; border: 1px solid #91d5ff; color: #1890ff; }

/* ========== Login Page ========== */
.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); }
.login-card { background: #fff; border-radius: 12px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.login-logo { text-align: center; margin-bottom: 30px; }
.login-logo h1 { font-size: 24px; color: #1a73e8; margin-bottom: 4px; }
.login-logo p { font-size: 14px; color: #999; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #555; }
.form-input { width: 100%; padding: 10px 14px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; transition: border-color .2s; }
.form-input:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.2); }
.btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all .2s; font-weight: 500; }
.btn-primary { background: #1a73e8; color: #fff; padding: 10px 20px; font-size: 14px; }
.login-card .btn-primary { width: 100%; padding: 12px; font-size: 16px; }
.btn-primary:hover { background: #1557b0; }
.btn-success { background: #52c41a; color: #fff; }
.btn-success:hover { background: #49b016; }
.btn-danger { background: #ff4d4f; color: #fff; }
.btn-danger:hover { background: #e04345; }
.btn-warning { background: #faad14; color: #fff; }
.btn-outline { background: #fff; color: #1a73e8; border: 1px solid #1a73e8; }
.btn-outline:hover { background: #e8f0fe; }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ========== Cards ========== */
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 20px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid #f0f0f0; background: #fafafa; }

/* ========== Dashboard Grid ========== */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); text-align: center; }
.stat-card .stat-value { font-size: 32px; font-weight: 700; color: #1a73e8; }
.stat-card .stat-label { font-size: 13px; color: #999; margin-top: 4px; }
.stat-card .stat-icon { font-size: 28px; margin-bottom: 8px; }
.stat-card.success .stat-value { color: #52c41a; }
.stat-card.warning .stat-value { color: #faad14; }
.stat-card.danger .stat-value { color: #ff4d4f; }

/* ========== Progress Bars ========== */
.progress-bar-wrap { background: #f0f0f0; border-radius: 10px; height: 10px; overflow: hidden; margin: 8px 0; }
.progress-bar-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #1a73e8, #40a9ff); transition: width 0.5s ease; }
.progress-bar-fill.success { background: linear-gradient(90deg, #52c41a, #73d13d); }
.progress-bar-fill.warning { background: linear-gradient(90deg, #faad14, #ffc53d); }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; color: #666; }

/* ========== Tables ========== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
th { background: #fafafa; font-weight: 600; color: #555; white-space: nowrap; }
tr:hover { background: #fafafa; }

/* ========== Badges ========== */
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.badge-success { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
.badge-danger { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
.badge-warning { background: #fffbe6; color: #faad14; border: 1px solid #ffe58f; }
.badge-info { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
.badge-default { background: #fafafa; color: #999; border: 1px solid #d9d9d9; }

/* ========== Learning Page ========== */
.learning-container { display: grid; grid-template-columns: 1fr 380px; gap: 20px; }
.learning-content { background: #fff; border-radius: 8px; padding: 30px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.learning-highlight { border-radius: 6px; padding: 14px 18px; margin: 16px 0; }
.learning-highlight ul { margin: 8px 0 0 20px; }
.learning-highlight-info { background: #e6f7ff; }
.learning-highlight-warning { background: #fff7e6; border-left: 4px solid #faad14; }
.learning-theory-content { margin-top: 20px; }
.learning-theory-content img { max-width: 100%; height: auto; }
.learning-complete-area { text-align: center; margin-top: 30px; padding: 20px; border-top: 1px solid #f0f0f0; }
.learning-content h3 { color: #1a73e8; margin-bottom: 16px; font-size: 22px; }
.learning-content h4 { margin: 20px 0 10px; color: #333; }
.learning-content p { margin-bottom: 12px; font-size: 15px; line-height: 1.8; }
.learning-content ul, .learning-content ol { margin: 10px 0 10px 24px; }
.learning-content li { margin-bottom: 6px; font-size: 15px; line-height: 1.7; }
.learning-content table { margin: 12px 0; }
.learning-content th, .learning-content td { padding: 8px 12px; border: 1px solid #e8e8e8; font-size: 13px; }
.learning-sidebar { position: sticky; top: 80px; align-self: start; }
.learning-sidebar .card { margin-bottom: 16px; }

/* ========== Exam Page ========== */
.exam-container { max-width: 900px; margin: 0 auto; }
.exam-header { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: center; }
.exam-question { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.exam-submit-area { text-align: center; margin: 30px 0; padding-bottom: 20px; }

/* ========== Edit Lesson Form ========== */
.edit-lesson-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.question-block { padding: 16px; background: #fafafa; border-radius: 6px; margin-bottom: 12px; }
.question-block-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.question-block-row .form-input:not(.question-select) { flex: 1; }
.question-select { width: auto; min-width: 80px; }
.question-block-answer .form-input:first-child { flex: 1; }
.question-block-answer .form-input:last-child { flex: 2; }

/* ========== Form Row ========== */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row-item { flex: 1; min-width: 120px; }
.exam-question .q-num { font-size: 13px; color: #999; margin-bottom: 8px; }
.exam-question .q-text { font-size: 16px; font-weight: 500; margin-bottom: 16px; line-height: 1.6; }
.exam-question .q-options label { display: block; padding: 10px 14px; margin-bottom: 6px; border: 1px solid #e8e8e8; border-radius: 6px; cursor: pointer; transition: all .2s; font-size: 14px; }
.exam-question .q-options label:hover { border-color: #1a73e8; background: #f0f7ff; }
.exam-question .q-options input { margin-right: 8px; }
.exam-question .q-options input:checked + span { font-weight: 600; color: #1a73e8; }

/* ========== Result Modal ========== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-card { background: #fff; border-radius: 12px; padding: 40px; text-align: center; max-width: 420px; width: 90%; box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.modal-score { font-size: 64px; font-weight: 800; margin: 20px 0; }
.modal-score.pass { color: #52c41a; }
.modal-score.fail { color: #ff4d4f; }
.modal-detail { font-size: 14px; color: #666; margin-bottom: 20px; }

/* ========== Tabs ========== */
.tabs { display: flex; gap: 0; border-bottom: 2px solid #f0f0f0; margin-bottom: 20px; }
.tab-btn { padding: 10px 20px; border: none; background: none; font-size: 14px; cursor: pointer; color: #999; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.tab-btn.active { color: #1a73e8; border-bottom-color: #1a73e8; font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ========== Archive Page ========== */
.archive-month { background: #fff; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
.archive-month-header { padding: 16px 20px; background: #fafafa; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.archive-month-header h3 { font-size: 16px; }
.archive-table th { font-size: 13px; }
.archive-table td { font-size: 13px; }

/* ========== Admin Dashboard ========== */
.admin-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.dashboard-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admin-courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.alert-list { list-style: none; }
.alert-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.alert-item:last-child { border-bottom: none; }

/* ========== Certificate ========== */
.certificate-card { background: linear-gradient(135deg, #fff9e6, #fff); border: 2px solid #d4a853; border-radius: 12px; padding: 60px 40px; max-width: 800px; margin: 0 auto; text-align: center; position: relative; }
.certificate-card::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid #d4a853; border-radius: 8px; pointer-events: none; }
.certificate-card h2 { font-size: 28px; color: #8b6914; margin-bottom: 8px; }
.certificate-card .certificate-subtitle { font-size: 22px; color: #8b6914; margin-bottom: 8px; }
.certificate-card .cert-date { font-size: 14px; color: #666; }
.certificate-card .cert-body { margin: 30px 0; font-size: 16px; line-height: 2; }
.certificate-card .cert-number { font-size: 13px; color: #999; margin-top: 20px; }
.certificate-seal { font-size: 18px; color: #d4380d; border: 2px solid #d4380d; display: inline-block; padding: 8px 24px; border-radius: 4px; margin-top: 20px; transform: rotate(-5deg); }

/* ========== Practical Page ========== */
.practical-actions { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.practical-log textarea { width: 100%; min-height: 150px; padding: 12px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; resize: vertical; }
.practical-log textarea:focus { outline: none; border-color: #1a73e8; }
.practical-exam-card { border-left: 4px solid #722ed1; }
.practical-exam-header { background: linear-gradient(135deg, #722ed1, #b37feb); color: #fff; }
.practical-exam-body { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.practical-exam-title { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.practical-exam-desc { font-size: 13px; }
.practical-exam-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.practical-exam-action { text-align: right; }
.practical-exam-passed { font-size: 16px; padding: 8px 16px; }
.practical-exam-attempts { font-size: 13px; color: #999; margin-bottom: 8px; }
.practical-result-card { text-align: center; padding: 40px 20px; }
.practical-result-icon { font-size: 72px; margin-bottom: 16px; }
.practical-result-title { margin-bottom: 12px; }
.practical-result-score { font-size: 48px; font-weight: bold; margin: 16px 0; }
.practical-result-time { margin-top: 8px; }
.practical-detail-item { padding: 16px; border-bottom: 1px solid #f0f0f0; }
.practical-detail-wrong { background: #fff2f0; }
.practical-detail-question { font-weight: 500; margin-bottom: 8px; }
.practical-detail-answers { font-size: 13px; color: #666; }
.practical-detail-explain { font-size: 12px; color: #999; margin-top: 4px; }
.practical-exam-timer { position: fixed; top: 70px; right: 20px; background: #fff; border: 2px solid #1890ff; padding: 12px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 100; font-size: 18px; font-weight: bold; color: #1890ff; }
.practical-question-header { display: flex; justify-content: space-between; align-items: center; }
.practical-question-badges { display: flex; gap: 6px; align-items: center; }
.practical-question-difficulty { font-size: 12px; color: #999; }
.practical-question-text { font-size: 16px; margin-bottom: 16px; font-weight: 500; }
.practical-hint { font-size: 12px; color: #999; margin-top: 8px; }
.practical-submit-area { position: sticky; bottom: 0; background: #fff; padding: 16px; border-top: 1px solid #e8e8e8; text-align: center; box-shadow: 0 -2px 8px rgba(0,0,0,0.05); }
.practical-submit-btn { min-width: 200px; }
.practical-submit-hint { font-size: 12px; color: #999; margin-top: 8px; }
.practical-modal-card { max-width: 500px; text-align: center; }
.practical-modal-icon { font-size: 64px; margin-bottom: 16px; }
.practical-modal-title { margin-bottom: 12px; }
.practical-modal-score { font-size: 36px; font-weight: bold; margin-bottom: 8px; }
.practical-modal-message { margin-bottom: 20px; }
.practical-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ========== 移动端导航按钮 ========== */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; cursor: pointer; z-index: 101; }

/* Overlay */
.menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 98; opacity: 0; transition: opacity .3s; }
.nav-toggle:checked ~ .menu-overlay { display: block; }

/* ========== Responsive ========== */
@media (max-width: 768px) {
    /* ── Hamburger Menu ── */
    .nav-toggle-btn { display: flex; align-items: center; justify-content: center; padding: 6px 12px; font-size: 14px; color: #1a73e8; background: #f0f4ff; border-radius: 8px; order: 1; cursor: pointer; transition: background .2s; }
    .nav-toggle-btn:active { background: #e8ecf1; }
    .nav-brand { order: 2; flex: 1; text-align: center; font-size: 16px; }
    .nav-user { display: none; }
    .nav-container { height: auto; padding: 8px 12px; gap: 0; }

    /* Sliding drawer menu */
    .nav-links { position: fixed; top: 56px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 8px 0; max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .2s; opacity: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-radius: 0 0 16px 16px; z-index: 99; }
    .nav-toggle:checked ~ .navbar .nav-container .nav-links { max-height: 600px; opacity: 1; padding: 8px 0 12px; }

    /* Footer items visible in drawer */
    .nav-footer-item { display: block; }

    /* Menu items */
    .nav-links li { list-style: none; }
    .nav-link { display: flex; align-items: center; padding: 14px 20px; font-size: 15px; color: #333; border-radius: 0; transition: background .15s; border-bottom: none; }
    .nav-link:active { background: #f0f4ff; }

    /* Menu divider & footer */
    .nav-divider { height: 1px; background: #f0f0f0; margin: 4px 16px; }
    .nav-user-info { padding: 12px 20px 4px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #999; }
    .nav-user-info span:first-child { color: #333; font-weight: 500; }
    .nav-role-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e6f7ff; color: #1890ff; }
    .nav-footer-item:last-child .nav-link { color: #ff4d4f; padding-top: 8px; }

    /* Overlay fade-in */
    .nav-toggle:checked ~ .menu-overlay { opacity: 1; display: block; }

    /* ── Main Container ── */
    .main-container { padding: 12px 10px; }

    /* ── Login ── */
    .login-card { padding: 24px 16px; margin: 10px; border-radius: 10px; }
    .login-logo h1 { font-size: 20px; }
    .form-input { padding: 12px 14px; font-size: 16px; }
    .btn { min-height: 44px; }
    .btn-primary { padding: 14px; font-size: 16px; }

    /* ── Dashboard ── */
    .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px 8px; }
    .stat-card .stat-value { font-size: 22px; }
    .stat-card .stat-label { font-size: 11px; }
    .stat-card .stat-icon { font-size: 20px; margin-bottom: 4px; }

    /* ── Cards ── */
    .card { margin-bottom: 12px; border-radius: 6px; }
    .card-header { padding: 12px 14px; font-size: 14px; }
    .card-body { padding: 12px; }

    /* ── Tables → Card Layout ── */
    .table-wrap { margin: 0 -12px; }
    .table-wrap table { border: 0; }
    .table-wrap thead { display: none; }
    .table-wrap tr { display: block; margin-bottom: 10px; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 4px 0; }
    .table-wrap td { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid #f5f5f5; font-size: 13px; text-align: right; white-space: normal; }
    .table-wrap td:last-child { border-bottom: none; }
    .table-wrap td::before { content: attr(data-label); font-weight: 600; color: #666; font-size: 12px; text-align: left; flex-shrink: 0; margin-right: 12px; }
    .table-wrap td:empty::before { content: ''; }

    /* ── Learning ── */
    .learning-container { grid-template-columns: 1fr; gap: 12px; }
    .learning-content { padding: 16px; }
    .learning-content h3 { font-size: 17px; }
    .learning-content h4 { font-size: 15px; }
    .learning-content p { font-size: 14px; line-height: 1.7; }
    .learning-content table { font-size: 12px; }
    .learning-content th, .learning-content td { padding: 6px 8px; }
    .learning-sidebar { position: static; }
    .learning-sidebar .btn { width: 100%; text-align: center; }

    /* ── Admin Grid ── */
    .admin-grid { grid-template-columns: 1fr; }
    .admin-courses-grid { grid-template-columns: 1fr; }

    /* ── Edit Lesson Form ── */
    .edit-lesson-row { grid-template-columns: 1fr; }
    .question-block-row { flex-wrap: wrap; }
    .question-block-row .form-input:not(.question-select) { flex: 1 1 100%; }
    .question-select { width: 100%; }
    .question-block-answer .form-input { flex: 1 1 100%; }

    /* ── Form Row ── */
    .form-row { flex-direction: column; }
    .form-row-item { min-width: 100%; }

    /* ── Exam ── */
    .exam-container { max-width: 100%; }
    .exam-header { padding: 12px; flex-direction: column; gap: 8px; align-items: flex-start; }
    .exam-question { padding: 14px; border-left-width: 3px; }
    .exam-question .q-text { font-size: 14px; }
    .exam-question .q-options label { padding: 12px 10px; font-size: 14px; }

    /* ── Practical Exam Timer ── */
    #exam-timer { position: fixed; top: auto; bottom: 80px; right: 10px; padding: 8px 14px; font-size: 14px; z-index: 101; }
    .exam-submit-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px; background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); z-index: 100; }
    .exam-submit-bar .btn { width: 100%; }

    /* ── Modal ── */
    .modal-overlay { padding: 12px; }
    .modal-card { padding: 24px 14px; width: 100%; max-width: 100%; }
    .modal-score { font-size: 44px; }

    /* ── Certificate ── */
    .certificate-card { padding: 24px 12px; margin: 0 2px; }
    .certificate-card::before { top: 4px; left: 4px; right: 4px; bottom: 4px; }
    .certificate-card h2 { font-size: 18px; }
    .certificate-card .cert-body { font-size: 13px; margin: 16px 0; line-height: 1.8; }
    .certificate-card p { font-size: 13px; }
    .certificate-seal { font-size: 14px; padding: 6px 16px; margin-top: 12px; }

    /* ── Practical Page ── */
    .practical-actions { flex-direction: column; }
    .practical-actions .btn { width: 100%; text-align: center; }
    .practical-log textarea { min-height: 100px; font-size: 16px; }
    .practical-exam-body { flex-direction: column; align-items: stretch; }
    .practical-exam-action { text-align: center; }
    .practical-exam-action .btn { width: 100%; }
    .practical-exam-passed { font-size: 14px; padding: 6px 12px; }
    .practical-result-card { padding: 24px 12px; }
    .practical-result-icon { font-size: 48px; margin-bottom: 12px; }
    .practical-result-score { font-size: 36px; margin: 12px 0; }
    .practical-detail-item { padding: 12px; }
    .practical-detail-question { font-size: 14px; }
    .practical-exam-timer { position: fixed; top: auto; bottom: 70px; right: 10px; padding: 8px 14px; font-size: 14px; }
    .practical-question-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .practical-question-text { font-size: 14px; }
    .practical-submit-area { padding: 12px; }
    .practical-submit-btn { width: 100%; min-width: auto; }
    .practical-modal-card { padding: 20px 12px; max-width: 100%; }
    .practical-modal-icon { font-size: 48px; }
    .practical-modal-score { font-size: 28px; }
    .practical-modal-actions { flex-direction: column; }
    .practical-modal-actions .btn { width: 100%; }

    /* ── Tabs ── */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 10px 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

    /* ── Archive ── */
    .archive-month-header { padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 4px; }
    .archive-month-header h3 { font-size: 14px; }

    /* ── Error Book ── */
    .error-answers { flex-direction: column; gap: 4px; }
    .error-answers span { font-size: 13px; }

    /* ── Exam Result Modal ── */
    #result-actions { display: flex; flex-direction: column; gap: 8px; }
    #result-actions .btn { margin-left: 0 !important; width: 100%; }
    #result-actions .btn-lg { padding: 12px; font-size: 15px; }

    /* ── Learning Content ── */
    .learning-content img { max-width: 100%; height: auto; }
    .learning-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .learning-content iframe { max-width: 100%; }
    .learning-highlight { padding: 12px 14px; margin: 12px 0; }
    .learning-highlight ul { margin-left: 16px; }

    /* ── Error Book ── */
    .error-item-card { padding: 12px; }
    .error-item-options { gap: 6px 12px; }

    /* ── Certificate ── */
    .certificate-card .certificate-subtitle { font-size: 18px; }
    .certificate-card .cert-date { font-size: 13px; }

    /* ── Stat Card Overflow ── */
    .stat-card .stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

    /* ── Touch Target ── */
    .nav-link { min-height: 44px; }
    .btn { min-height: 44px; }

    /* ── Hero CTA ── */
    .hero-cta { flex-direction: column; text-align: center; padding: 20px 16px; }
    .hero-cta-title { font-size: 17px; }
    .hero-cta-btn { width: 100%; }
    .hero-cta-btns { width: 100%; }
    .hero-cta-btns .btn { flex: 1; }

    /* ── Module Lesson List ── */
    .module-lesson-item { padding: 10px 12px; gap: 8px; }
    .module-lesson-day { font-size: 11px; min-width: 44px; }
    .module-lesson-title { font-size: 13px; }

    /* ── Learning Nav ── */
    .learning-nav-top { flex-wrap: wrap; gap: 8px; }
    .learning-nav-bottom { flex-direction: column; gap: 8px; }
    .learning-nav-bottom .btn { width: 100%; text-align: center; }

    /* ── Practical Exam Options ── */
    .options-group { gap: 6px; }
    .option-label { padding: 12px 10px; font-size: 14px; }
    .option-text { font-size: 13px; }

    /* ── Practical Exam Result ── */
    .exam-result-item { padding: 12px; border-left-width: 3px; }

    /* ── Practical Exam Result ── */
    .card[style*="padding:40px"] { padding: 20px 12px !important; }
    .card [style*="font-size:72px"] { font-size: 48px !important; }
    .card [style*="font-size:48px"] { font-size: 32px !important; }

    /* ── Utility ── */
    .flex-between { flex-direction: column; gap: 8px; align-items: stretch; }
    .flex-between .btn { width: 100%; text-align: center; }
    .flex-between h2 { text-align: center; }

    /* ── Form ── */
    .form-group label { font-size: 14px; }
    .form-group .form-input { font-size: 16px; padding: 12px; }

    /* ── Flash ── */
    .flash-message { padding: 10px 12px; font-size: 13px; }

    /* ── Typography ── */
    h2 { font-size: 18px; }
    h3 { font-size: 15px; }

    /* ── Badge ── */
    .badge { font-size: 11px; padding: 2px 7px; }

    /* ── Progress ── */
    .progress-label { font-size: 12px; }

    /* ── Buttons ── */
    .btn-sm { padding: 8px 12px; font-size: 13px; }
    .btn-lg { padding: 12px 18px; font-size: 15px; }

    /* ── Sticky Bottom ── */
    .sticky-bottom { bottom: 10px; left: 10px; right: 10px; padding: 12px; }

    /* ── Certificate Buttons ── */
    .certificate-card + .text-center { display: flex; flex-direction: column; gap: 8px; }
    .certificate-card + .text-center .btn { width: 100%; }
    .ml-10 { margin-left: 0; }

    /* ── Page Title Bar ── */
    .flex-between.mb-20 { margin-bottom: 12px; }

    /* ── Dashboard two-column card ── */
    .dashboard-bottom-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ========== Error Book ========== */
.error-answers { display: flex; gap: 20px; font-size: 13px; flex-wrap: wrap; }
.error-item { position: relative; }
.error-item-card { padding: 16px; margin-bottom: 12px; background: #fff2f0; border-radius: 6px; border-left: 4px solid #ff4d4f; }
.error-item-text { font-weight: 600; margin-bottom: 8px; }
.error-item-options { font-size: 13px; color: #666; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.error-item-explain { margin-top: 8px; font-size: 13px; color: #666; }
.error-item-source { font-size: 12px; margin-top: 4px; color: #999; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-success { color: #52c41a; }
.text-danger { color: #ff4d4f; }
.text-warning { color: #faad14; }
.text-info { color: #1890ff; }
.text-muted { color: #999; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-10 { gap: 10px; }
.w-full { width: 100%; }

/* ========== Hero CTA (Dashboard) ========== */
.hero-cta { background: linear-gradient(135deg, #1a73e8, #40a9ff); border-radius: 12px; padding: 24px 28px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #fff; box-shadow: 0 4px 16px rgba(26,115,232,0.25); }
.hero-cta-success { background: linear-gradient(135deg, #52c41a, #73d13d); box-shadow: 0 4px 16px rgba(82,196,26,0.25); }
.hero-cta-done { background: linear-gradient(135deg, #faad14, #ffc53d); box-shadow: 0 4px 16px rgba(250,173,20,0.25); }
.hero-cta-label { font-size: 13px; opacity: 0.85; margin-bottom: 4px; }
.hero-cta-title { font-size: 20px; font-weight: 700; margin: 0; color: #fff; line-height: 1.3; }
.hero-cta-sub { font-size: 13px; opacity: 0.8; margin-top: 4px; }
.hero-cta-btn { background: #fff; color: #1a73e8; font-weight: 600; padding: 14px 28px; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
.hero-cta-btn:hover { background: #f0f7ff; }
.hero-cta-success .hero-cta-btn { background: #fff; color: #52c41a; }
.hero-cta-btns { display: flex; gap: 10px; flex-shrink: 0; }

/* ========== Module Lesson List (Dashboard) ========== */
.module-lesson-list { display: flex; flex-direction: column; }
.module-lesson-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; text-decoration: none; color: #333; transition: background .15s; }
.module-lesson-item:last-child { border-bottom: none; }
.module-lesson-item:hover { background: #f5f7fa; }
.module-lesson-item.completed { background: #f6ffed; }
.module-lesson-item.completed:hover { background: #e6f7e6; }
.module-lesson-item.locked { opacity: 0.5; pointer-events: none; }
.module-lesson-day { font-size: 12px; color: #999; min-width: 56px; font-weight: 500; }
.module-lesson-title { flex: 1; font-size: 14px; }
.module-lesson-status { flex-shrink: 0; }

/* ========== Learning Nav ========== */
.learning-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.learning-nav-info { font-size: 13px; color: #999; }
.learning-nav-bottom { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.learning-nav-bottom .btn { font-size: 13px; }

/* ========== Archive Lesson Link ========== */
.archive-lesson-link { color: #1a73e8; font-weight: 500; text-decoration: none; }
.archive-lesson-link:hover { text-decoration: underline; }