/* ============================================================
   Medical Exam Platform — Full UI CSS v2.0
   Covers: Course Purchases, Profile, Video Library, Player, Create Test
   ============================================================ */

:root {
  --me-primary   : #1a5276;
  --me-accent    : #2e86c1;
  --me-success   : #1e8449;
  --me-danger    : #c0392b;
  --me-warning   : #d68910;
  --me-bg        : #f4f6f8;
  --me-card      : #ffffff;
  --me-border    : #dde1e7;
  --me-text      : #2c3e50;
  --me-muted     : #6c757d;
  --me-radius    : 10px;
}


/* ── Profile Layout ────────────────────────────────────────── */
.me-profile-layout { display:flex; min-height:80vh; max-width:1100px; margin:0 auto; gap:0; }

.me-profile-sidebar {
    width:220px; flex-shrink:0; background:var(--me-primary); color:#fff;
    display:flex; flex-direction:column; min-height:80vh;
}
.me-profile-avatar-wrap { padding:24px 16px 16px; text-align:center; border-bottom:1px solid rgba(255,255,255,.15); }
.me-profile-avatar      { width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.4); }
.me-profile-name        { font-size:.9rem; font-weight:600; margin-top:8px; }

.me-profile-nav { display:flex; flex-direction:column; padding:8px 0; flex:1; }
.me-profile-nav-item {
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    color:rgba(255,255,255,.75); text-decoration:none; font-size:.88rem;
    transition:background .12s;
}
.me-profile-nav-item:hover,
.me-profile-nav-item.active { background:rgba(255,255,255,.15); color:#fff; }
.me-profile-nav-item.me-logout { margin-top:auto; }
.me-nav-icon { font-size:14px; width:18px; text-align:center; }

.me-profile-main { flex:1; background:var(--me-bg); padding:28px; overflow-y:auto; }
.me-panel-title { font-size:1.3rem; font-weight:600; margin-bottom:20px; color:var(--me-primary); }

/* Stats grid */
.me-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.me-stat-card { background:var(--me-card); border-radius:var(--me-radius); padding:16px; text-align:center; border:0.5px solid var(--me-border); }
.me-stat-value { font-size:1.6rem; font-weight:800; color:var(--me-primary); }
.me-stat-label { font-size:.72rem; color:var(--me-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }

/* Target banner */
.me-target-banner { background:var(--me-primary); color:#fff; padding:10px 16px; border-radius:8px; display:flex; justify-content:space-between; margin-bottom:16px; font-size:.9rem; }

/* Profile form */
.me-profile-form { max-width:600px; }
.me-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.me-form-field { display:flex; flex-direction:column; gap:4px; }
.me-form-field--full { grid-column:1/-1; }
.me-form-field label { font-size:.8rem; font-weight:600; color:var(--me-muted); text-transform:uppercase; letter-spacing:.4px; }
.me-form-field input,
.me-form-field select,
.me-form-field textarea { border:1px solid var(--me-border); border-radius:6px; padding:8px 10px; font-size:.9rem; width:100%; background:var(--me-card); }

/* Buttons */
.me-quick-btn { display:inline-block; padding:9px 20px; border-radius:8px; border:1.5px solid var(--me-border); background:var(--me-card); color:var(--me-text); font-size:.88rem; font-weight:600; cursor:pointer; text-decoration:none; transition:all .15s; }
.me-quick-btn:hover         { border-color:var(--me-accent); color:var(--me-accent); text-decoration:none; }
.me-quick-btn--primary      { background:var(--me-accent); color:#fff; border-color:var(--me-accent); }
.me-quick-btn--primary:hover{ background:var(--me-primary); border-color:var(--me-primary); color:#fff; }
.me-quick-links             { display:flex; gap:10px; flex-wrap:wrap; }

/* History table */
.me-history-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.me-history-table th { text-align:left; padding:8px 12px; border-bottom:2px solid var(--me-border); color:var(--me-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }
.me-history-table td { padding:10px 12px; border-bottom:1px solid var(--me-border); vertical-align:middle; }
.me-history-table tr:hover td { background:#f9fbfc; }
.me-score-circle { width:44px; height:44px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; margin:0 auto; }
.me-btn-link { color:var(--me-accent); font-weight:600; text-decoration:none; }
.me-filter-btn { display:inline-block; padding:4px 12px; border-radius:16px; border:1px solid var(--me-border); font-size:.8rem; color:var(--me-muted); cursor:pointer; text-decoration:none; }
.me-filter-btn.active { background:var(--me-accent); color:#fff; border-color:var(--me-accent); }

/* Notices */
.me-notice { padding:10px 14px; border-radius:6px; margin-bottom:16px; font-size:.9rem; }
.me-notice--success { background:#d5f5e3; color:#1e8449; border:1px solid #abebc6; }

/* ── Video Library ──────────────────────────────────────────── */
.me-video-library { max-width:1100px; margin:0 auto; padding:28px 20px; }

.me-video-search-bar { margin-bottom:20px; }
.me-search-wrap { display:flex; align-items:center; gap:10px; background:var(--me-card); border:1px solid var(--me-border); border-radius:30px; padding:8px 16px; max-width:600px; }
.me-search-wrap svg { color:var(--me-muted); flex-shrink:0; }
.me-search-wrap input { flex:1; border:none; outline:none; font-size:.95rem; background:transparent; }
.me-search-wrap button { background:var(--me-accent); color:#fff; border:none; padding:5px 16px; border-radius:20px; cursor:pointer; font-size:.85rem; }

.me-cat-filter { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.me-cat-pill { padding:5px 14px; border-radius:20px; border:1px solid var(--me-border); background:var(--me-card); font-size:.83rem; color:var(--me-text); cursor:pointer; text-decoration:none; transition:all .12s; }
.me-cat-pill:hover,
.me-cat-pill.active { background:var(--me-accent); color:#fff; border-color:var(--me-accent); text-decoration:none; }

.me-course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.me-course-card { background:var(--me-card); border:1px solid var(--me-border); border-radius:var(--me-radius); overflow:hidden; transition:box-shadow .2s; display:flex; flex-direction:column; }
.me-course-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.1); }
.me-course-card--enrolled { border-color:var(--me-success); }
.me-course-thumb { height:160px; overflow:hidden; background:var(--me-bg); display:flex; align-items:center; justify-content:center; position:relative; }
.me-course-thumb img { width:100%; height:100%; object-fit:contain; padding:16px; }
.me-course-thumb-placeholder { font-size:2.5rem; font-weight:800; color:var(--me-primary); }
.me-course-pill {
    position:absolute; top:12px; right:12px; z-index:2;
    background:rgba(0,0,0,.68); color:#fff; font-size:.72rem; font-weight:700;
    padding:5px 10px; border-radius:999px;
}
.me-course-pill--enrolled { background:rgba(30,132,73,.92); }
.me-course-info { padding:14px; flex:1; display:flex; flex-direction:column; gap:8px; }
.me-course-title { font-size:.95rem; font-weight:600; color:var(--me-text); margin:0; }
.me-course-meta { display:flex; flex-direction:column; gap:3px; font-size:.8rem; color:var(--me-muted); }
.me-course-meta span { display:flex; justify-content:space-between; }
.me-course-btn { display:flex; align-items:center; justify-content:space-between; margin-top:auto; background:var(--me-accent); color:#fff; padding:9px 14px; border-radius:6px; font-size:.85rem; font-weight:700; text-decoration:none; transition:background .12s; }
.me-course-btn:hover { background:var(--me-primary); color:#fff; text-decoration:none; }
.me-course-btn--owned { background:var(--me-success); }
.me-course-btn--owned:hover { background:#15623c; color:#fff; }
.me-price-tag { background:rgba(255,255,255,.25); padding:1px 7px; border-radius:10px; font-size:.78rem; }

.me-course-enrolled-list { display:flex; flex-direction:column; gap:10px; }
.me-course-enrolled-item {
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    background:var(--me-card); border:1px solid var(--me-border); border-radius:10px;
    padding:14px 16px; text-decoration:none; color:var(--me-text);
}
.me-course-enrolled-item:hover { border-color:var(--me-accent); text-decoration:none; color:var(--me-text); }
.me-course-enrolled-title { font-weight:700; color:var(--me-primary); }
.me-course-enrolled-sub { font-size:.8rem; color:var(--me-muted); margin-top:3px; }
.me-course-enrolled-actions {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    flex-shrink:0;
}
.me-course-enrolled-badge {
    display:inline-flex; align-items:center; justify-content:center;
    background:#d5f5e3; color:var(--me-success); border-radius:999px;
    font-size:.75rem; font-weight:700; padding:5px 10px; white-space:nowrap;
}
.me-course-enrolled-go {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(46,134,193,.08);
    border-radius:999px;
    padding:4px 10px;
    font-size:.8rem;
    font-weight:700;
    color:var(--me-accent);
    white-space:nowrap;
}
.me-course-enrolled-item:hover .me-course-enrolled-go {
    color:var(--me-primary);
    background:rgba(26,82,118,.12);
}

/* ── Video Player ───────────────────────────────────────────── */
.me-video-page { display:flex; gap:0; min-height:80vh; }
.me-video-main { flex:1; padding:20px; max-width:900px; }
.me-video-breadcrumb { font-size:.8rem; color:var(--me-muted); margin-bottom:12px; }
.me-video-breadcrumb a { color:var(--me-accent); text-decoration:none; }
.me-video-breadcrumb span { margin:0 4px; }
.me-player-wrap { position:relative; background:#000; border-radius:8px; overflow:hidden; }
.me-video-title { font-size:1.2rem; font-weight:600; margin:14px 0 6px; }
.me-video-meta-row { display:flex; gap:8px; flex-wrap:wrap; font-size:.8rem; color:var(--me-muted); margin-bottom:12px; }
.me-cme-badge { background:#e8f4fd; color:#185FA5; padding:2px 8px; border-radius:10px; font-weight:600; }
.me-video-cat-pill { background:var(--me-bg); padding:2px 8px; border-radius:10px; }

/* Preview gate */
.me-preview-gate { position:absolute; inset:0; background:rgba(10,10,10,.88); display:flex; align-items:center; justify-content:center; }
.me-preview-gate-inner { text-align:center; color:#fff; padding:32px; }
.me-preview-gate-inner h2 { font-size:1.4rem; margin-bottom:10px; }
.me-preview-gate-inner p  { font-size:.9rem; opacity:.8; margin-bottom:20px; }

/* Notes panel */
.me-notes-panel { width:300px; flex-shrink:0; border-left:1px solid var(--me-border); background:var(--me-card); display:flex; flex-direction:column; }
.me-notes-header { display:flex; border-bottom:1px solid var(--me-border); }
.me-notes-tab { flex:1; padding:12px; border:none; background:transparent; cursor:pointer; font-size:.88rem; color:var(--me-muted); border-bottom:2px solid transparent; font-weight:600; }
.me-notes-tab.active { color:var(--me-accent); border-bottom-color:var(--me-accent); }
.me-notes-tab-content { padding:12px; flex:1; overflow-y:auto; }
.me-notes-tab-content textarea { width:100%; border:1px solid var(--me-border); border-radius:6px; padding:8px; font-size:.85rem; resize:vertical; }
.me-notes-locked { color:var(--me-muted); font-size:.85rem; text-align:center; padding:20px; }

/* Playlist */
.me-playlist-item { display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--me-border); text-decoration:none; color:var(--me-text); transition:background .1s; }
.me-playlist-item:hover,
.me-playlist-item.active { background:var(--me-bg); }
.me-playlist-item.done .me-playlist-status { color:var(--me-success); }
.me-playlist-item.active .me-playlist-status { color:var(--me-accent); }
.me-playlist-status { font-size:1rem; flex-shrink:0; }
.me-playlist-title  { font-size:.83rem; font-weight:500; line-height:1.4; }
.me-playlist-dur    { font-size:.75rem; color:var(--me-muted); margin-top:2px; }

/* ── Create Test ────────────────────────────────────────────── */
.me-create-test-page { max-width:900px; margin:0 auto; padding:28px 20px; }
.me-test-section { background:var(--me-card); border:1px solid var(--me-border); border-radius:var(--me-radius); padding:20px; margin-bottom:16px; }
.me-section-title { font-size:.78rem; font-weight:700; color:var(--me-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; display:block; }
.me-section-title-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.me-select-all-label { font-size:.8rem; color:var(--me-accent); cursor:pointer; }

/* Toggle */
.me-toggle-row { display:flex; gap:24px; }
.me-toggle-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.9rem; }
.me-toggle-track { position:relative; width:40px; height:22px; background:var(--me-border); border-radius:11px; transition:background .2s; }
.me-toggle-track.me-toggle-on { background:var(--me-accent); }
.me-toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s; }
.me-toggle-thumb-on { left:21px; }
.me-toggle-label input[type=checkbox] { display:none; }

/* Pool */
.me-pool-grid { display:flex; gap:8px; flex-wrap:wrap; }
.me-pool-item { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1.5px solid var(--me-border); border-radius:6px; cursor:pointer; font-size:.85rem; }
.me-pool-item input { margin:0; }
.me-pool-count { padding:1px 8px; border-radius:10px; font-size:.78rem; font-weight:700; }

/* Checklist */
.me-checklist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px; }
.me-check-item { display:flex; align-items:center; gap:6px; font-size:.88rem; cursor:pointer; padding:5px 8px; border-radius:5px; }
.me-check-item:hover { background:var(--me-bg); }
.me-check-count { margin-left:auto; font-size:.75rem; background:var(--me-bg); padding:1px 8px; border-radius:10px; color:var(--me-muted); }
.me-help-icon { display:inline-block; width:16px; height:16px; background:var(--me-accent); color:#fff; border-radius:50%; font-size:10px; font-weight:700; text-align:center; line-height:16px; cursor:help; vertical-align:middle; }
.me-test-footer { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:768px) {
    .me-profile-layout { flex-direction:column; }
    .me-profile-sidebar { width:100%; min-height:auto; }
    .me-profile-nav { flex-direction:row; flex-wrap:wrap; padding:4px; }
    .me-profile-nav-item { padding:8px 12px; font-size:.8rem; }
    .me-stats-grid { grid-template-columns:1fr 1fr; }
    .me-video-page { flex-direction:column; }
    .me-notes-panel { width:100%; border-left:none; border-top:1px solid var(--me-border); }
    .me-form-grid { grid-template-columns:1fr; }
}

/* ── Performance panel additions ───────────────────────────── */
.me-perf-ribbon { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.me-perf-ribbon-item { background:var(--me-card); border:0.5px solid var(--me-border); border-radius:10px; padding:14px; text-align:center; }
.me-perf-value { font-size:1.6rem; font-weight:800; color:var(--me-primary); }
.me-perf-label { font-size:.72rem; color:var(--me-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.me-perf-section { background:var(--me-card); border:0.5px solid var(--me-border); border-radius:10px; padding:18px; margin-bottom:16px; }
.me-perf-section-title { font-size:.9rem; font-weight:600; color:var(--me-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.me-trend-chart canvas { display:block; width:100%; }
.me-subject-breakdown { display:flex; flex-direction:column; gap:8px; }
.me-subject-row { display:flex; align-items:center; gap:12px; font-size:.85rem; }
.me-subject-name { width:160px; flex-shrink:0; font-weight:500; }
.me-subject-bar-wrap { flex:1; background:var(--me-bg); border-radius:4px; height:8px; overflow:hidden; }
.me-subject-bar { height:8px; border-radius:4px; transition:width .4s; }
.me-subject-pct  { width:40px; text-align:right; font-weight:700; font-size:.82rem; }
.me-subject-count{ width:50px; text-align:right; color:var(--me-muted); font-size:.78rem; }

/* ── My Videos panel additions ──────────────────────────────── */
.me-video-section { margin-bottom:24px; }
.me-video-section-title { font-size:.9rem; font-weight:700; color:var(--me-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.me-video-progress-list { display:flex; flex-direction:column; gap:8px; }
.me-video-progress-item { display:flex; gap:12px; align-items:center; background:var(--me-card); border:0.5px solid var(--me-border); border-radius:8px; padding:10px; text-decoration:none; color:var(--me-text); transition:box-shadow .15s; }
.me-video-progress-item:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); text-decoration:none; color:var(--me-text); }
.me-video-progress-thumb { width:70px; height:48px; border-radius:6px; overflow:hidden; background:var(--me-bg); flex-shrink:0; position:relative; }
.me-video-progress-thumb img { width:100%; height:100%; object-fit:cover; }
.me-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--me-primary); color:#fff; }
.me-thumb-overlay { position:absolute; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; font-weight:600; opacity:0; transition:opacity .15s; }
.me-video-progress-item:hover .me-thumb-overlay { opacity:1; }
.me-video-progress-title { font-size:.9rem; font-weight:500; margin-bottom:4px; }
.me-progress-bar-wrap { height:4px; background:var(--me-bg); border-radius:2px; overflow:hidden; margin-bottom:3px; }
.me-progress-bar { height:4px; background:var(--me-accent); border-radius:2px; }
.me-progress-text { font-size:.75rem; color:var(--me-muted); }
.me-empty-state { text-align:center; padding:40px; color:var(--me-muted); }

/* ── Course page ───────────────────────────────────────────── */
.me-course-page { margin:0; }
.me-course-hero { background:var(--me-primary); color:#fff; padding:36px 60px; display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:220px; position:relative; width:100%; box-sizing:border-box; }
.me-course-hero-inner { flex:1; max-width:600px; }
.me-course-hero h1 { font-size:1.6rem; font-weight:700; margin-bottom:10px; }
.me-course-breadcrumb { font-size:.8rem; opacity:.7; margin-bottom:10px; }
.me-course-breadcrumb a { color:rgba(255,255,255,.8); text-decoration:none; }
.me-course-breadcrumb span { margin:0 4px; }
.me-course-stats-row { display:flex; gap:16px; font-size:.85rem; opacity:.85; margin-bottom:16px; }
.me-course-stats-row span { background:rgba(255,255,255,.15); padding:3px 10px; border-radius:12px; }
.me-course-hero-thumb { width:200px; flex-shrink:0; }
.me-course-hero-thumb img { width:100%; border-radius:8px; }
.me-course-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.me-course-body { max-width:1000px; margin:0 auto; padding:28px; }
.me-course-desc { margin-bottom:24px; font-size:.95rem; line-height:1.7; }
.me-lecture-section { margin-bottom:28px; }
.me-lecture-section-title { font-size:1rem; font-weight:700; color:var(--me-primary); border-bottom:2px solid var(--me-border); padding-bottom:8px; margin-bottom:12px; }
.me-lecture-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:0.5px solid var(--me-border); transition:background .1s; }
.me-lecture-row:hover { background:var(--me-bg); }
.me-lecture-row.me-lecture-done { opacity:.75; }
.me-lecture-row.me-lecture-locked .me-lecture-title { color:var(--me-muted); }
.me-lecture-status { width:24px; text-align:center; font-size:.9rem; flex-shrink:0; }
.me-done-dot { color:var(--me-success); font-weight:700; }
.me-lock-icon { filter:grayscale(1); opacity:.5; }
.me-play-icon { color:var(--me-accent); }
.me-lecture-info { flex:1; }
.me-lecture-title { font-size:.9rem; font-weight:500; color:var(--me-text); text-decoration:none; }
.me-lecture-title:hover { color:var(--me-accent); }
.me-lecture-progress { height:3px; background:var(--me-bg); border-radius:2px; margin-top:5px; overflow:hidden; max-width:200px; }
.me-lecture-progress-fill { height:3px; background:var(--me-accent); border-radius:2px; }
.me-lecture-meta { display:flex; gap:8px; align-items:center; font-size:.78rem; color:var(--me-muted); flex-shrink:0; }

/* ── Global search bar ──────────────────────────────────────── */
.me-global-search { position:relative; max-width:560px; margin:0 auto; }
.me-search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--me-border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:1000; overflow:hidden; max-height:360px; overflow-y:auto; }
.me-search-result-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; text-decoration:none; color:var(--me-text); transition:background .1s; }
.me-search-result-item:hover { background:var(--me-bg); }
.me-result-thumb { width:36px; height:36px; border-radius:6px; object-fit:cover; background:var(--me-bg); flex-shrink:0; }
.me-result-type { font-size:.72rem; color:var(--me-muted); text-transform:uppercase; letter-spacing:.4px; }
.me-result-title { font-size:.88rem; font-weight:500; }

@media (max-width:768px) {
    .me-perf-ribbon { grid-template-columns:1fr 1fr; }
    .me-course-hero { flex-direction:column; }
    .me-course-hero-thumb { width:100%; max-width:280px; }
    .me-subject-name { width:100px; }
}

/* ════════════════════════════════════════════════════════════
   Create Test Page — v2 (Mode + Subjects + Time estimate)
   ════════════════════════════════════════════════════════════ */

.me-create-test-page { max-width:900px;margin:0 auto;padding:28px 20px; }

.me-create-test-header {
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;margin-bottom:24px;flex-wrap:wrap;
}
.me-page-title   { font-size:1.5rem;font-weight:700;color:var(--me-primary);margin:0 0 4px; }
.me-page-subtitle{ font-size:.9rem;color:var(--me-muted);margin:0; }

.me-daily-limit-badge {
    display:flex;align-items:center;gap:8px;background:#eaf4fb;
    border:1px solid #b3d4f0;border-radius:8px;padding:8px 14px;font-size:.85rem;color:#1a5276;
}

/* Sections */
.me-test-section {
    background:var(--me-card,#fff);border:1px solid var(--me-border,#dde1e7);
    border-radius:10px;padding:20px;margin-bottom:14px;
}

.me-section-label {
    display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;
    color:var(--me-muted,#6c757d);text-transform:uppercase;letter-spacing:.6px;
    margin-bottom:14px;flex-wrap:wrap;
}

.me-step-badge {
    width:22px;height:22px;border-radius:50%;background:var(--me-primary,#1a5276);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;flex-shrink:0;
}

.me-plan-badge-inline {
    background:#e8f4fd;color:#1a5276;border-radius:10px;
    padding:2px 8px;font-size:11px;font-weight:600;
}

.me-select-all-wrap {
    margin-left:auto;font-size:.78rem;color:var(--me-accent,#2e86c1);
    cursor:pointer;display:flex;align-items:center;gap:5px;font-weight:400;
}

/* ── Mode cards ─────────────────────────────────────────────── */
.me-mode-cards { display:grid;grid-template-columns:1fr 1fr;gap:14px; }

.me-mode-card {
    position:relative;border:2px solid var(--me-border,#dde1e7);border-radius:10px;
    padding:18px;cursor:pointer;transition:all .18s;background:var(--me-card,#fff);
    text-align:center;
}
.me-mode-card:hover          { border-color:var(--me-accent,#2e86c1); }
.me-mode-card--active        { border-color:var(--me-accent,#2e86c1);background:#e8f4fd; }
.me-mode-card--locked        { opacity:.55;cursor:not-allowed; }
.me-mode-icon                { font-size:2rem;margin-bottom:8px; }
.me-mode-name                { font-size:1rem;font-weight:700;color:var(--me-text,#2c3e50);margin-bottom:6px; }
.me-mode-desc                { font-size:.82rem;color:var(--me-muted,#6c757d);line-height:1.5; }
.me-locked-badge             { font-size:.8rem; }

.me-mode-check {
    position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
    background:var(--me-accent,#2e86c1);color:#fff;display:flex;align-items:center;
    justify-content:center;font-size:12px;font-weight:700;
}
.me-hidden { display:none !important; }

/* Tutor info box */
.me-tutor-info {
    display:flex;align-items:flex-start;gap:10px;background:#eafaf1;
    border:1px solid #abebc6;border-radius:8px;padding:12px 14px;
    margin-top:12px;font-size:.88rem;color:#1e8449;
}
.me-info-icon { font-size:1.2rem;flex-shrink:0; }

/* ── Pool grid ──────────────────────────────────────────────── */
.me-pool-grid       { display:flex;gap:8px;flex-wrap:wrap; }
.me-pool-total      { font-size:.78rem;color:var(--me-muted);font-weight:400;text-transform:none;letter-spacing:0; }

.me-pool-item {
    display:flex;align-items:center;gap:7px;padding:7px 14px;
    border:2px solid var(--pool-color,#dde1e7);border-radius:8px;cursor:pointer;
    font-size:.85rem;transition:background .12s;background:var(--me-card,#fff);
}
.me-pool-item:has(input:checked) { background:color-mix(in srgb, var(--pool-color) 10%, white); }
.me-pool-item input { margin:0;accent-color:var(--pool-color,#2e86c1); }
.me-pool-label      { color:var(--pool-color,#333);font-weight:600; }
.me-pool-count      { background:color-mix(in srgb, var(--pool-color) 15%, white);color:var(--pool-color);padding:1px 8px;border-radius:10px;font-size:.78rem;font-weight:700; }

/* ── Checklist grid ─────────────────────────────────────────── */
.me-checklist-grid  { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:5px; }

.me-check-item {
    display:flex;align-items:center;gap:7px;font-size:.88rem;cursor:pointer;
    padding:6px 10px;border-radius:6px;border:1px solid transparent;transition:all .1s;
}
.me-check-item:hover { background:var(--me-bg,#f4f6f8); }
.me-check-item:has(input:checked) {
    background:#e8f4fd;border-color:#b3d4f0;
}
.me-check-item input { margin:0;accent-color:var(--me-accent,#2e86c1); }
.me-check-name       { flex:1; }
.me-check-count      { font-size:.75rem;background:var(--me-bg,#f4f6f8);padding:1px 8px;border-radius:10px;color:var(--me-muted);white-space:nowrap; }

/* ── Footer controls ────────────────────────────────────────── */
.me-footer-controls {
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.me-q-count-label { font-size:.88rem;font-weight:600;color:var(--me-text); }
.me-q-count-limit { font-size:.78rem;color:var(--me-danger,#c0392b);background:#fadbd8;padding:2px 8px;border-radius:10px; }

.me-time-estimate {
    display:flex;align-items:center;gap:6px;background:var(--me-bg,#f4f6f8);
    border-radius:8px;padding:8px 14px;font-size:.88rem;color:var(--me-text);
}
.me-time-icon  { font-size:1rem; }
.me-time-note  { font-size:.75rem;color:var(--me-muted); }

.me-shuffle-label { font-size:.85rem;color:var(--me-muted);display:flex;align-items:center;gap:6px;cursor:pointer; }

/* ── Start button ───────────────────────────────────────────── */
.me-start-section   { text-align:center;padding:20px 0 8px; }
.me-start-btn {
    padding:14px 40px;background:var(--me-accent,#2e86c1);color:#fff;border:none;
    border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;
    transition:background .15s,transform .1s;min-width:220px;
}
.me-start-btn:hover:not(:disabled)  { background:var(--me-primary,#1a5276); }
.me-start-btn:active:not(:disabled) { transform:scale(.98); }
.me-start-btn:disabled              { background:#aaa;cursor:not-allowed;opacity:.7; }
.me-start-note { font-size:.82rem;color:var(--me-muted);margin-top:8px;min-height:18px; }

@media (max-width:600px) {
    .me-mode-cards { grid-template-columns:1fr; }
    .me-footer-controls { flex-direction:column;align-items:flex-start; }
}

/* ── Completed exam card styling ─────────────────────────── */
.me-course-card--completed { opacity:.85; }
.me-course-btn--completed {
  background: #27ae60 !important; color: #fff !important;
  pointer-events: none; cursor: default;
}
.me-course-btn--completed:hover { background: #27ae60 !important; }