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

:root {
  /* Waytoresidency grey theme */
  --me-primary   : #2d3748;
  --me-accent    : #4a6fa5;
  --me-success   : #276749;
  --me-danger    : #b91c1c;
  --me-warning   : #92400e;
  --me-bg        : #f1f5f9;
  --me-card      : #ffffff;
  --me-border    : #cbd5e1;
  --me-text      : #1e293b;
  --me-muted     : #64748b;
  --me-radius    : 10px;
}

/* ── Subscription Plans ────────────────────────────────────── */
.me-plans-page { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.me-plans-hero { text-align:center; margin-bottom:40px; }
.me-plans-hero h1 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; color:var(--me-primary); line-height:1.2; }
.me-plans-hero p  { font-size:1rem; color:var(--me-muted); margin-top:10px; }

.me-plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

.me-plan-card {
    background:var(--me-card); border:2px solid var(--me-border);
    border-radius:var(--me-radius); padding:24px 20px;
    display:flex; flex-direction:column; gap:8px;
    transition:box-shadow .2s;
}
.me-plan-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); }
.me-plan-card--featured { border-color:var(--me-accent); }
.me-plan-card--active { border-color:var(--me-success); }

.me-plan-badge {
    color:#fff; font-size:11px; font-weight:700; letter-spacing:.8px;
    text-align:center; padding:5px; border-radius:6px 6px 0 0;
    margin:-24px -20px 8px; text-transform:uppercase;
}
.me-plan-name    { font-size:1.4rem; font-weight:700; text-align:center; color:var(--me-text); }
.me-plan-savings { background:#7b1c1c; color:#fff; font-size:12px; font-weight:700; text-align:center; padding:4px 10px; border-radius:4px; }
.me-plan-price   { font-size:1.3rem; font-weight:700; text-align:center; color:var(--me-text); }
.me-plan-sublabel{ font-size:.8rem; color:var(--me-muted); text-align:center; }
.me-plan-features{ display:flex; flex-direction:column; gap:4px; margin:8px 0; font-size:.85rem; }
.me-feature.yes  { color:var(--me-success); }
.me-feature.no   { color:var(--me-muted); text-decoration:line-through; }

.me-plan-btn {
    display:block; text-align:center; padding:11px;
    border-radius:30px; background:var(--me-accent);
    color:#fff; font-weight:700; font-size:.9rem;
    text-decoration:none; margin-top:auto; cursor:pointer;
    border:none; transition:background .15s;
}
.me-plan-btn:hover    { background:var(--me-primary); color:#fff; text-decoration:none; }
.me-plan-btn--buy     { background:var(--me-accent); }
.me-plan-btn--current { background:#aaa; cursor:default; }

/* ── Profile Layout ────────────────────────────────────────── */
/* Profile layout defined below in hero section */

/* 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; }

/* Subscription status badges */
.me-sub-status { padding:2px 8px; border-radius:10px; font-size:.75rem; font-weight:600; }
.me-sub-status--active  { background:#d5f5e3; color:#1e8449; }
.me-sub-status--trial   { background:#d6eaf8; color:#1a5276; }
.me-sub-status--expired { background:#fadbd8; color:#c0392b; }

/* Active sub banner */
.me-active-sub-banner { background:var(--me-card); border:1px solid var(--me-border); border-left:4px solid var(--me-success); padding:12px 16px; border-radius:6px; margin-bottom:16px; }

/* 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-thumb { height:160px; overflow:hidden; background:var(--me-bg); display:flex; align-items:center; justify-content:center; }
.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-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-price-tag { background:rgba(255,255,255,.25); padding:1px 7px; border-radius:10px; font-size:.78rem; }

/* ── 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 { max-width:1000px; margin:0 auto; }
.me-course-hero { background:var(--me-primary); color:#fff; padding:36px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.me-course-hero-inner { flex:1; }
.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 { 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; }
}

/* ── Avatar Upload ─────────────────────────────────────────── */
.me-avatar-upload-section {
    display         : flex;
    align-items     : center;
    gap             : 20px;
    margin-bottom   : 24px;
    padding         : 16px;
    background      : #f8fafc;
    border          : 1px solid var(--me-border);
    border-radius   : 10px;
}
.me-avatar-preview-wrap {
    position        : relative;
    flex-shrink     : 0;
}
.me-avatar-preview-img {
    width           : 80px;
    height          : 80px;
    border-radius   : 50%;
    object-fit      : cover;
    border          : 3px solid var(--me-border);
    display         : block;
}
.me-avatar-upload-btn {
    position        : absolute;
    bottom          : 0;
    right           : 0;
    width           : 26px;
    height          : 26px;
    background      : var(--me-accent);
    color           : #fff;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    transition      : background .15s;
}
.me-avatar-upload-btn:hover { background: var(--me-primary); }
.me-avatar-upload-hint { font-size: .85rem; color: var(--me-muted); line-height: 1.5; }
.me-avatar-upload-hint strong { color: var(--me-text); font-size: .95rem; }

/* ── Course Page ───────────────────────────────────────────── */
.me-course-page { max-width: 1100px; margin: 0 auto; }
.me-course-hero {
    background      : linear-gradient(135deg, #2d3748 0%, #1e293b 100%);
    color           : #fff;
    padding         : 40px;
    display         : flex;
    align-items     : center;
    gap             : 32px;
    border-radius   : 0 0 16px 16px;
}
.me-course-hero-inner { flex: 1; }
.me-course-breadcrumb {
    font-size       : .8rem;
    opacity         : .7;
    margin-bottom   : 12px;
    display         : flex;
    align-items     : center;
    gap             : 6px;
    flex-wrap       : wrap;
}
.me-course-breadcrumb a { color: #93c5fd; text-decoration: none; }
.me-course-breadcrumb a:hover { color: #fff; }
.me-course-hero h1 { font-size: clamp(1.4rem,3vw,2rem); font-weight: 700; margin: 0 0 14px; line-height: 1.3; }
.me-course-stats-row {
    display         : flex;
    gap             : 20px;
    flex-wrap       : wrap;
    font-size       : .85rem;
}
.me-course-stats-row span {
    background      : rgba(255,255,255,.12);
    padding         : 4px 12px;
    border-radius   : 20px;
    font-weight     : 600;
}
.me-course-hero-thumb { width: 220px; flex-shrink: 0; }
.me-course-hero-thumb img { width: 100%; border-radius: 10px; object-fit: cover; }

.me-course-body { padding: 28px 40px; display: grid; grid-template-columns: 1fr 320px; gap: 28px; }
.me-course-body--full { grid-template-columns: 1fr; }

.me-course-desc {
    background      : #fff;
    border          : 1px solid var(--me-border);
    border-radius   : 10px;
    padding         : 20px;
    margin-bottom   : 20px;
    line-height     : 1.7;
    color           : var(--me-text);
}

.me-lecture-section { margin-bottom: 20px; }
.me-lecture-section-title {
    font-size       : 1rem;
    font-weight     : 700;
    color           : var(--me-primary);
    padding         : 12px 0 8px;
    border-bottom   : 2px solid var(--me-border);
    margin-bottom   : 8px;
}

/* Linked exams sidebar */
.me-course-sidebar { display: flex; flex-direction: column; gap: 16px; }
.me-course-sidebar-card {
    background      : #fff;
    border          : 1px solid var(--me-border);
    border-radius   : 10px;
    overflow        : hidden;
}
.me-course-sidebar-card__head {
    background      : var(--me-primary);
    color           : #fff;
    padding         : 10px 14px;
    font-size       : .8rem;
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .5px;
}
.me-course-sidebar-card__body { padding: 12px 14px; }
.me-exam-link-item {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 8px 0;
    border-bottom   : 1px solid #f1f5f9;
    text-decoration : none;
    color           : var(--me-text);
    font-size       : .88rem;
}
.me-exam-link-item:last-child { border-bottom: none; }
.me-exam-link-item:hover { color: var(--me-accent); }
.me-exam-link-icon {
    width           : 32px;
    height          : 32px;
    background      : #eef3ff;
    color           : var(--me-accent);
    border-radius   : 6px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .85rem;
    flex-shrink     : 0;
}
.me-exam-link-meta { font-size: .75rem; color: var(--me-muted); }

@media (max-width: 768px) {
    .me-course-hero { flex-direction: column; padding: 24px 20px; }
    .me-course-hero-thumb { width: 100%; }
    .me-course-body { grid-template-columns: 1fr; padding: 16px 20px; }
}

/* ================================================================
   PROFILE PAGE — Hero + Layout  (grey theme)
================================================================ */

.me-profile-page {
    background      : #f1f5f9;
    min-height      : 100vh;
    width           : 100%;
    max-width       : 100% !important;
    margin          : 0 !important;
    padding         : 0 !important;
}

/* ── Hero banner ──────────────────────────────────────────────── */
.me-profile-hero {
    background      : linear-gradient(135deg, #2d3748 0%, #1e293b 100%);
    color           : #fff;
    padding         : 0;
    position        : relative;
    width           : 100%;
}

.me-profile-hero-inner {
    max-width       : 1100px;
    margin          : 0 auto;
    padding         : 28px 28px 0;
    display         : flex;
    align-items     : center;
    gap             : 24px;
    flex-wrap       : wrap;
}

/* Avatar circle */
.me-hero-avatar-wrap {
    position        : relative;
    flex-shrink     : 0;
}
.me-hero-avatar {
    width           : 90px;
    height          : 90px;
    border-radius   : 50%;
    object-fit      : cover;
    border          : 3px solid rgba(255,255,255,.5);
    display         : block;
    background      : #4a5568;
}
.me-hero-avatar-btn {
    position        : absolute;
    bottom          : 2px;
    right           : 2px;
    width           : 26px;
    height          : 26px;
    background      : #4a6fa5;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    border          : 2px solid #fff;
    color           : #fff;
    transition      : background .15s;
}
.me-hero-avatar-btn:hover { background: #2d5a8e; }

/* User info block */
.me-hero-info { flex: 1; min-width: 180px; }
.me-hero-name {
    font-size       : 1.4rem;
    font-weight     : 700;
    margin          : 0 0 6px;
    color           : #fff;
    line-height     : 1.2;
}
.me-hero-university,
.me-hero-target {
    font-size       : .82rem;
    color           : rgba(255,255,255,.75);
    margin-bottom   : 3px;
}
.me-hero-days {
    background      : rgba(255,255,255,.15);
    padding         : 1px 8px;
    border-radius   : 10px;
    font-size       : .72rem;
    margin-left     : 6px;
}

/* Plan badge block */
.me-hero-plan {
    text-align      : center;
    flex-shrink     : 0;
}
.me-hero-plan-badge {
    padding         : 5px 16px;
    border-radius   : 20px;
    font-size       : .78rem;
    font-weight     : 700;
    color           : #fff;
    letter-spacing  : .3px;
    display         : inline-block;
    margin-bottom   : 4px;
}
.me-hero-plan-days {
    font-size       : .72rem;
    color           : rgba(255,255,255,.6);
    margin-bottom   : 4px;
}
.me-hero-upgrade-link {
    font-size       : .75rem;
    color           : #93c5fd;
    text-decoration : none;
    font-weight     : 600;
}
.me-hero-upgrade-link:hover { color: #fff; }

/* Stats strip at bottom of hero */
.me-hero-stats {
    max-width       : 1100px;
    margin          : 0 auto;
    display         : grid;
    grid-template-columns: repeat(4, 1fr);
    border-top      : 1px solid rgba(255,255,255,.12);
    margin-top      : 20px;
}
.me-hero-stat {
    padding         : 14px 20px;
    text-align      : center;
    border-right    : 1px solid rgba(255,255,255,.1);
}
.me-hero-stat:last-child { border-right: none; }
.me-hero-stat-val {
    font-size       : 1.5rem;
    font-weight     : 800;
    color           : #fff;
    line-height     : 1;
}
.me-hero-stat-lbl {
    font-size       : .68rem;
    color           : rgba(255,255,255,.6);
    text-transform  : uppercase;
    letter-spacing  : .5px;
    margin-top      : 4px;
}

/* ── Profile body layout ──────────────────────────────────────── */
.me-profile-layout {
    display         : flex;
    max-width       : 1200px;
    margin          : 0 auto;
    min-height      : 60vh;
    gap             : 0;
    width           : 100%;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.me-profile-sidebar {
    width           : 200px;
    flex-shrink     : 0;
    background      : #fff;
    border-right    : 1px solid #e2e8f0;
}

.me-profile-nav {
    display         : flex;
    flex-direction  : column;
    padding         : 12px 0;
}

.me-profile-nav-item {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 10px 16px;
    color           : #475569;
    text-decoration : none;
    font-size       : .85rem;
    font-weight     : 500;
    border-left     : 3px solid transparent;
    transition      : all .12s;
}
.me-profile-nav-item:hover {
    background      : #f1f5f9;
    color           : #2d3748;
    border-left-color: #cbd5e1;
}
.me-profile-nav-item.active {
    background      : #eff6ff;
    color           : #1e40af;
    border-left-color: #4a6fa5;
    font-weight     : 600;
}
.me-nav-svg {
    width           : 16px;
    height          : 16px;
    flex-shrink     : 0;
    opacity         : .7;
}
.me-profile-nav-item.active .me-nav-svg { opacity: 1; }
.me-nav-logout {
    margin-top      : auto;
    border-top      : 1px solid #f1f5f9;
    color           : #dc2626;
}
.me-nav-logout:hover { background: #fff5f5; color: #dc2626; border-left-color: #dc2626; }

/* ── Main content panel ───────────────────────────────────────── */
.me-profile-main {
    flex            : 1;
    background      : #f8fafc;
    padding         : 24px 28px;
    min-width       : 0;
}

.me-panel-header { margin-bottom: 20px; }
.me-panel-title  {
    font-size       : 1.15rem;
    font-weight     : 700;
    color           : #1e293b;
    margin          : 0 0 2px;
}
.me-panel-subtitle {
    font-size       : .82rem;
    color           : #64748b;
}

/* Target exam banner in dashboard */
.me-target-banner {
    background      : linear-gradient(135deg, #2d3748, #3d4e63);
    color           : #fff;
    padding         : 14px 18px;
    border-radius   : 8px;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 20px;
}
.me-target-label {
    font-size       : .7rem;
    text-transform  : uppercase;
    letter-spacing  : .5px;
    opacity         : .7;
    display         : block;
}
.me-target-exam {
    font-size       : .95rem;
    font-weight     : 700;
}
.me-target-countdown { text-align: center; }
.me-target-days {
    font-size       : 1.8rem;
    font-weight     : 800;
    line-height     : 1;
}
.me-target-days-label {
    font-size       : .68rem;
    opacity         : .7;
    text-transform  : uppercase;
}

.me-dashboard-hint {
    background      : #fff;
    border          : 1px solid #e2e8f0;
    border-radius   : 8px;
    padding         : 14px 16px;
    margin-top      : 8px;
}

/* ── Avatar upload section in profile form ────────────────────── */
.me-avatar-upload-section {
    display         : flex;
    align-items     : center;
    gap             : 18px;
    margin-bottom   : 22px;
    padding         : 16px;
    background      : #f8fafc;
    border          : 1px solid #e2e8f0;
    border-radius   : 10px;
}
.me-avatar-preview-wrap { position: relative; flex-shrink: 0; }
.me-avatar-preview-img {
    width           : 72px;
    height          : 72px;
    border-radius   : 50%;
    object-fit      : cover;
    border          : 3px solid #cbd5e1;
    display         : block;
}
.me-avatar-upload-btn {
    position        : absolute;
    bottom          : 0;
    right           : 0;
    width           : 24px;
    height          : 24px;
    background      : #4a6fa5;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    border          : 2px solid #fff;
    color           : #fff;
    transition      : background .15s;
}
.me-avatar-upload-btn:hover { background: #2d5a8e; }
.me-avatar-upload-hint { font-size: .84rem; color: #64748b; line-height: 1.5; }
.me-avatar-upload-hint strong { color: #1e293b; font-size: .92rem; display: block; margin-bottom: 2px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .me-profile-hero-inner { padding: 20px 16px 0; }
    .me-hero-stats { grid-template-columns: repeat(2,1fr); }
    .me-profile-layout { flex-direction: column; }
    .me-profile-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; }
    .me-profile-nav { flex-direction: row; flex-wrap: wrap; padding: 6px; }
    .me-profile-nav-item { padding: 7px 10px; font-size: .8rem; border-left: none; border-bottom: 3px solid transparent; }
    .me-profile-nav-item.active { border-left: none; border-bottom-color: #4a6fa5; }
    .me-profile-main { padding: 16px; }
}