/* ============================================================
   Aitronic Academy — main.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --p-dark:  #461E5F;
    --p-mid:   #734687;
    --p-light: #9B6DB5;
    --cyan:    #05A5EB;
    --bg:      #FFFFFF;
    --bg2:     #F7F5FA;
    --bg3:     #F0EBF6;
    --border:  #E2D9EC;
    --text:    #1A0A25;
    --text2:   #5A4870;
    --text3:   #9B8AAA;
    --green:   #1A7A4A;
    --green-bg:#E6F4ED;
    --red:     #C0392B;
    --gold:    #B8860B;
    --gold-bg: #FDF6E3;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg2);
    color: var(--text);
    line-height: 1.6;
}

/* ── AUTH ─────────────────────────────────────────────────── */
.auth-page  { min-height: 100vh; display: flex;
              align-items: center; justify-content: center; }
.auth-wrap  { width: 100%; max-width: 420px; padding: 1rem; }
.auth-logo  { display: flex; align-items: center; gap: 10px;
              justify-content: center; margin-bottom: 1.5rem; }
.auth-logo img       { width: 40px; }
.auth-logo-text      { display: flex; flex-direction: column; line-height: 1.15; }
.auth-logo-name      { font-size: 20px; font-weight: 500;
                        color: var(--p-dark); letter-spacing: -0.3px; }
.auth-logo-sub       { font-size: 9px; letter-spacing: 2.5px;
                        text-transform: uppercase; color: var(--p-light); }
.auth-card           { background: var(--bg); border: 1px solid var(--border);
                        border-radius: 12px; padding: 2rem; }
.auth-card h1        { font-size: 22px; font-weight: 500;
                        color: var(--p-dark); margin-bottom: 4px; }
.auth-sub            { font-size: 14px; color: var(--text3); margin-bottom: 1.5rem; }
.auth-footer         { text-align: center; font-size: 13px;
                        color: var(--text3); margin-top: 1.25rem; }
.auth-footer a       { color: var(--p-mid); text-decoration: none; }
.auth-footer a:hover { color: var(--p-dark); }

/* ── FORMS ────────────────────────────────────────────────── */
.form-group         { margin-bottom: 1rem; }
.form-group label   { display: block; font-size: 13px; font-weight: 500;
                       color: var(--text2); margin-bottom: 5px; }
.form-group input   { width: 100%; padding: 10px 12px;
                       border: 1.5px solid var(--border); border-radius: 6px;
                       font-size: 14px; color: var(--text); background: var(--bg);
                       outline: none; transition: border-color 0.15s;
                       font-family: inherit; }
.form-group input:focus { border-color: var(--p-mid); }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary       { padding: 11px 24px; background: var(--p-mid); color: #fff;
                      border: none; border-radius: 6px; font-size: 14px;
                      font-weight: 500; cursor: pointer; font-family: inherit;
                      transition: background 0.15s; display: inline-block;
                      text-decoration: none; }
.btn-primary:hover { background: var(--p-dark); }
.btn-block         { width: 100%; text-align: center; }
.btn-sm            { font-size: 13px; padding: 6px 14px; border-radius: 6px;
                      text-decoration: none; }
.btn-outline-sm    { font-size: 13px; padding: 6px 14px;
                      border: 1px solid var(--border); border-radius: 6px;
                      color: var(--text2); text-decoration: none; }
.btn-outline-sm:hover { border-color: var(--p-mid); color: var(--p-mid); }

/* ── ALERTS ───────────────────────────────────────────────── */
.alert         { padding: 0.875rem 1rem; border-radius: 6px;
                  font-size: 13px; margin-bottom: 1rem; line-height: 1.5; }
.alert a       { font-weight: 500; }
.alert-error   { background: #FDECEA; color: var(--red);
                  border: 1px solid #F0BCBA; }
.alert-error a { color: var(--red); }
.alert-success { background: var(--green-bg); color: var(--green);
                  border: 1px solid #A8D5B8; }
.alert-success a { color: var(--green); }

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar         { background: var(--bg); border-bottom: 1px solid var(--border); }
.navbar-inner   { max-width: 1000px; margin: 0 auto; padding: 0.875rem 1.5rem;
                   display: flex; align-items: center; gap: 1.5rem; }
.navbar-logo    { display: flex; flex-direction: column; line-height: 1.1;
                   margin-right: 1rem; }
.logo-name      { font-size: 16px; font-weight: 500; color: var(--p-dark); }
.logo-sub       { font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
                   color: var(--p-light); }
.navbar-links   { display: flex; gap: 1.25rem; flex: 1; }
.navbar-links a { font-size: 13px; color: var(--text2); text-decoration: none; }
.navbar-links a:hover,
.navbar-links a.active { color: var(--p-mid); font-weight: 500; }
.navbar-right   { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.navbar-xp      { font-size: 12px; font-weight: 500; color: var(--gold);
                   background: var(--gold-bg); border: 1px solid #E8D5A0;
                   border-radius: 5px; padding: 3px 10px; }
.navbar-streak  { font-size: 12px; font-weight: 500; color: #E65100;
                   background: #FFF3E0; border: 1px solid #FFCC80;
                   border-radius: 5px; padding: 3px 10px; }
.navbar-user    { font-size: 13px; color: var(--text2); font-weight: 500; }
.navbar-logout  { font-size: 12px; color: var(--text3); text-decoration: none; }
.navbar-logout:hover { color: var(--p-mid); }

/* ── PAGE WRAP ────────────────────────────────────────────── */
.page-wrap { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }

/* ── DASHBOARD HERO ───────────────────────────────────────── */
.dash-hero        { background: var(--bg); border: 1px solid var(--border);
                     border-radius: 12px; padding: 1.5rem;
                     display: flex; gap: 1.25rem; align-items: center;
                     margin-bottom: 1.25rem; flex-wrap: wrap; }
.dash-avatar      { width: 56px; height: 56px; border-radius: 50%;
                     background: var(--bg3); border: 2px solid var(--p-mid);
                     display: flex; align-items: center; justify-content: center;
                     font-size: 20px; font-weight: 500; color: var(--p-mid);
                     flex-shrink: 0; }
.dash-hero-info   { flex: 1; min-width: 200px; }
.dash-hero-info h1 { font-size: 20px; font-weight: 500;
                      color: var(--p-dark); margin-bottom: 4px; }
.dash-hero-info p  { font-size: 13px; color: var(--text3); margin-bottom: 0.75rem; }
.badge-premium    { background: var(--bg3); color: var(--p-dark);
                     border: 1px solid var(--border); border-radius: 4px;
                     padding: 2px 10px; font-size: 12px; font-weight: 500; }
.badge-free       { background: var(--bg2); color: var(--text3);
                     border: 1px solid var(--border); border-radius: 4px;
                     padding: 2px 10px; font-size: 12px; }
.link-upgrade     { font-size: 12px; color: var(--p-mid);
                     text-decoration: none; margin-left: 8px; }
.link-upgrade:hover { color: var(--p-dark); }
.xp-level-row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.level-badge      { font-size: 11px; font-weight: 500; background: var(--bg3);
                     color: var(--p-dark); border: 1px solid var(--border);
                     border-radius: 4px; padding: 2px 10px; white-space: nowrap; }
.xp-bar-wrap      { flex: 1; min-width: 150px; }
.xp-bar-labels    { display: flex; justify-content: space-between;
                     font-size: 11px; color: var(--text3); margin-bottom: 3px; }
.xp-bar-bg        { height: 5px; background: var(--border);
                     border-radius: 3px; overflow: hidden; }
.xp-bar-fill      { height: 5px; border-radius: 3px;
                     background: linear-gradient(90deg, var(--gold), #E8A000); }
.dash-premium-box { text-align: center; padding: 1rem 1.5rem;
                     background: var(--bg2); border: 1px solid var(--border);
                     border-radius: 10px; flex-shrink: 0; }
.prem-days-num    { font-size: 32px; font-weight: 500;
                     color: var(--p-dark); line-height: 1; }
.prem-days-label  { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* ── STATS ROW ────────────────────────────────────────────── */
.stats-row  { display: grid; grid-template-columns: repeat(4,1fr);
               gap: 10px; margin-bottom: 1.25rem; }
.stat-card  { background: var(--bg); border: 1px solid var(--border);
               border-radius: 10px; padding: 1rem; text-align: center; }
.stat-icon  { font-size: 18px; margin-bottom: 4px; }
.stat-num   { font-size: 24px; font-weight: 500; color: var(--p-mid); }
.stat-label { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── SECTION HEADER ───────────────────────────────────────── */
.section-header    { display: flex; justify-content: space-between;
                      align-items: center; margin-bottom: 0.875rem; }
.section-header h2 { font-size: 16px; font-weight: 500; color: var(--p-dark); }
.section-header a  { font-size: 13px; color: var(--p-mid); text-decoration: none; }

/* ── COURSES LIST (dashboard) ─────────────────────────────── */
.courses-list      { background: var(--bg); border: 1px solid var(--border);
                      border-radius: 12px; overflow: hidden; }
.course-row        { display: flex; align-items: center; gap: 1rem;
                      padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.course-row:last-child { border-bottom: none; }
.course-row:hover  { background: var(--bg2); }
.course-row-info   { flex: 1; min-width: 0; }
.course-row-cat    { font-size: 11px; color: var(--p-light); letter-spacing: 1px;
                      text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }
.course-row-title  { font-size: 14px; font-weight: 500; color: var(--text);
                      white-space: nowrap; overflow: hidden;
                      text-overflow: ellipsis; margin-bottom: 3px; }
.course-row-meta   { font-size: 12px; color: var(--text3); margin-bottom: 6px; }
.prog-bg           { height: 4px; background: var(--border);
                      border-radius: 2px; overflow: hidden; }
.prog-fill         { height: 4px; border-radius: 2px;
                      background: linear-gradient(90deg, var(--p-mid), var(--p-light)); }
.course-row-right  { display: flex; flex-direction: column;
                      align-items: center; gap: 6px; flex-shrink: 0; }
.course-row-pct    { font-size: 14px; font-weight: 500; color: var(--p-mid); }
.btn-continue      { font-size: 12px; padding: 5px 14px;
                      background: var(--bg3); color: var(--p-mid);
                      border: 1px solid var(--border); border-radius: 5px;
                      cursor: pointer; text-decoration: none; font-weight: 500;
                      white-space: nowrap; }
.btn-continue:hover { background: var(--p-mid); color: #fff; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state      { background: var(--bg); border: 1px solid var(--border);
                     border-radius: 12px; padding: 3rem;
                     text-align: center; color: var(--text3); }
.empty-icon       { font-size: 36px; margin-bottom: 0.75rem; }
.empty-state p    { margin-bottom: 1rem; font-size: 14px; }

/* ── ACTIVITY ─────────────────────────────────────────────── */
.activity-card    { background: var(--bg); border: 1px solid var(--border);
                     border-radius: 12px; overflow: hidden; }
.act-item         { display: flex; align-items: flex-start; gap: 10px;
                     padding: 0.875rem 1.25rem;
                     border-bottom: 1px solid var(--border); }
.act-item:last-child { border-bottom: none; }
.act-dot          { width: 30px; height: 30px; border-radius: 50%;
                     background: var(--bg3); display: flex;
                     align-items: center; justify-content: center;
                     font-size: 13px; flex-shrink: 0; }
.act-text         { flex: 1; }
.act-title        { font-size: 13px; color: var(--text); margin-bottom: 2px; }
.act-title strong { color: var(--p-dark); }
.act-meta         { font-size: 11px; color: var(--text3); }
.act-xp           { font-size: 11px; font-weight: 500; color: var(--gold);
                     background: var(--gold-bg); padding: 2px 8px;
                     border-radius: 3px; border: 1px solid #E8D5A0;
                     white-space: nowrap; }

/* ── COURSES PAGE ─────────────────────────────────────────── */
.courses-header    { display: flex; justify-content: space-between;
                      align-items: flex-start; margin-bottom: 1.5rem;
                      flex-wrap: wrap; gap: 1rem; }
.courses-header h1 { font-size: 26px; font-weight: 500;
                      color: var(--p-dark); margin-bottom: 4px; }
.courses-header p  { font-size: 14px; color: var(--text3); }
.btn-premium-cta   { padding: 10px 20px; background: var(--p-mid); color: #fff;
                      border-radius: 6px; font-size: 13px; font-weight: 500;
                      text-decoration: none; white-space: nowrap; }
.btn-premium-cta:hover { background: var(--p-dark); }

.cat-filters    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cat-btn        { font-size: 13px; padding: 6px 14px;
                   border: 1px solid var(--border); border-radius: 20px;
                   background: var(--bg); color: var(--text2);
                   text-decoration: none; transition: all 0.15s; }
.cat-btn:hover  { border-color: var(--p-mid); color: var(--p-mid); }
.cat-btn.active { background: var(--p-mid); color: #fff; border-color: var(--p-mid); }

.courses-grid   { display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
                   gap: 1rem; }
.course-card    { background: var(--bg); border: 1px solid var(--border);
                   border-radius: 12px; overflow: hidden;
                   display: flex; flex-direction: column;
                   transition: border-color 0.15s; }
.course-card:hover  { border-color: var(--p-light); }
.course-card.locked { opacity: 0.85; }

.course-card-thumb  { height: 100px; background: var(--bg2);
                       display: flex; align-items: center;
                       justify-content: center; position: relative; }
.course-card-icon   { font-size: 36px; }

.badge-free-card    { position: absolute; top: 8px; right: 8px;
                       font-size: 10px; font-weight: 500;
                       background: #E8F6FD; color: #0577A8;
                       border: 1px solid #C5E8F8;
                       padding: 2px 8px; border-radius: 3px; }
.badge-premium-card { position: absolute; top: 8px; right: 8px;
                       font-size: 10px; font-weight: 500;
                       background: var(--bg3); color: var(--p-dark);
                       border: 1px solid var(--border);
                       padding: 2px 8px; border-radius: 3px; }
.badge-locked       { position: absolute; top: 8px; right: 8px;
                       font-size: 10px; font-weight: 500;
                       background: var(--bg2); color: var(--text3);
                       border: 1px solid var(--border);
                       padding: 2px 8px; border-radius: 3px; }

.course-card-body   { padding: 1rem; flex: 1; }
.course-card-cat    { font-size: 10px; letter-spacing: 1.5px;
                       text-transform: uppercase; color: var(--p-light);
                       font-weight: 500; margin-bottom: 4px; }
.course-card-title  { font-size: 14px; font-weight: 500; color: var(--text);
                       margin-bottom: 6px; line-height: 1.4; }
.course-card-desc   { font-size: 12px; color: var(--text3); line-height: 1.6;
                       margin-bottom: 10px; display: -webkit-box;
                       -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                       overflow: hidden; }
.course-card-meta   { font-size: 12px; color: var(--text3);
                       display: flex; gap: 12px; }
.course-card-prog   { margin-top: 10px; }
.prog-labels        { display: flex; justify-content: space-between;
                       font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.course-card-footer { padding: 0.875rem 1rem; border-top: 1px solid var(--border); }

.btn-start,
.btn-continue-card,
.btn-unlock         { display: block; width: 100%; padding: 9px;
                       text-align: center; border-radius: 6px; font-size: 13px;
                       font-weight: 500; text-decoration: none;
                       cursor: pointer; transition: all 0.15s; }
.btn-start          { background: var(--p-mid); color: #fff; border: none; }
.btn-start:hover    { background: var(--p-dark); }
.btn-continue-card  { background: var(--bg3); color: var(--p-mid);
                       border: 1px solid var(--border); }
.btn-continue-card:hover { background: var(--p-mid); color: #fff; }
.btn-unlock         { background: var(--bg2); color: var(--text3);
                       border: 1px solid var(--border); }
.btn-unlock:hover   { border-color: var(--p-mid); color: var(--p-mid); }

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb-bar   { background: var(--bg); border-bottom: 1px solid var(--border); }
.breadcrumb-inner { max-width: 1000px; margin: 0 auto;
                     padding: 0.625rem 1.5rem; display: flex;
                     gap: 6px; align-items: center;
                     font-size: 12px; color: var(--text3); }
.breadcrumb-inner a       { color: var(--text3); text-decoration: none; }
.breadcrumb-inner a:hover { color: var(--p-mid); }

/* ── COURSE PAGE ──────────────────────────────────────────── */
.course-layout { display: grid; grid-template-columns: 1fr 280px;
                  gap: 1.25rem; align-items: start; }
.course-main   { display: flex; flex-direction: column; gap: 1rem; }

.course-hdr-card  { background: var(--bg); border: 1px solid var(--border);
                     border-radius: 12px; padding: 1.5rem; }
.course-hdr-cat   { font-size: 12px; font-weight: 500; color: var(--p-light);
                     letter-spacing: 1px; text-transform: uppercase;
                     margin-bottom: 0.5rem; }
.course-hdr-card h1 { font-size: 22px; font-weight: 500; color: var(--p-dark);
                       margin-bottom: 0.75rem; line-height: 1.3; }
.course-hdr-desc  { font-size: 14px; color: var(--text);
                     line-height: 1.7; margin-bottom: 1rem; }
.course-hdr-meta  { display: flex; gap: 1.25rem; flex-wrap: wrap;
                     font-size: 13px; color: var(--text3); }
.tag-free-inline    { color: #0577A8; font-weight: 500; }
.tag-premium-inline { color: var(--p-mid); font-weight: 500; }

.progress-card     { background: var(--bg); border: 1px solid var(--border);
                      border-radius: 10px; padding: 1.25rem; }
.progress-card-top { display: flex; justify-content: space-between;
                      font-size: 13px; font-weight: 500;
                      color: var(--text); margin-bottom: 0.625rem; }
.progress-pct      { color: var(--p-mid); }
.progress-card-sub { font-size: 12px; color: var(--text3); margin-top: 6px; }

.lessons-card       { background: var(--bg); border: 1px solid var(--border);
                       border-radius: 12px; overflow: hidden; }
.lessons-card-hdr   { display: flex; justify-content: space-between;
                       align-items: center; padding: 1rem 1.25rem;
                       border-bottom: 1px solid var(--border);
                       font-size: 14px; font-weight: 500; color: var(--p-dark); }
.lessons-card-count { font-size: 12px; color: var(--text3); font-weight: 400; }

.chapter-block      { border-bottom: 1px solid var(--border); }
.chapter-block:last-child { border-bottom: none; }
.chapter-hdr        { display: flex; justify-content: space-between;
                       align-items: center; padding: 0.875rem 1.25rem;
                       background: var(--bg2); }
.chapter-hdr-left   { display: flex; align-items: center; gap: 8px; }
.chapter-num        { font-size: 10px; letter-spacing: 1px; color: var(--text3);
                       font-weight: 500; text-transform: uppercase; }
.chapter-title      { font-size: 13px; font-weight: 500; color: var(--p-dark); }
.chapter-meta       { font-size: 12px; color: var(--text3); }

.lesson-row         { display: flex; align-items: center; gap: 10px;
                       padding: 0.875rem 1.25rem;
                       border-top: 1px solid var(--border);
                       transition: background 0.1s; }
.lesson-row:hover   { background: var(--bg2); }
.lesson-current     { background: #EEF7FD !important;
                       border-left: 3px solid var(--cyan); }
.lesson-locked      { opacity: 0.65; }

.lsi         { width: 28px; height: 28px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                font-size: 11px; font-weight: 500; flex-shrink: 0;
                border: 1.5px solid var(--border); color: var(--text3); }
.lsi-done    { background: var(--bg3); border-color: var(--p-mid); color: var(--p-mid); }
.lsi-current { background: #EEF7FD; border-color: var(--cyan); color: var(--cyan); }
.lsi-locked  { background: var(--bg2); font-size: 12px; }

.lesson-info       { flex: 1; min-width: 0; }
.lesson-title      { font-size: 13px; color: var(--text); margin-bottom: 3px; }
.lesson-done .lesson-title    { color: var(--text3); }
.lesson-current .lesson-title { font-weight: 500; color: var(--p-dark); }
.lesson-meta-row   { display: flex; gap: 10px; font-size: 11px;
                      color: var(--text3); flex-wrap: wrap; }
.lesson-free-tag   { background: #E8F6FD; color: #0577A8;
                      border: 1px solid #C5E8F8; padding: 1px 6px;
                      border-radius: 3px; font-size: 9px; font-weight: 500;
                      text-transform: uppercase; letter-spacing: 0.5px; }

.btn-lesson              { font-size: 11px; padding: 5px 12px; border-radius: 5px;
                             text-decoration: none; font-weight: 500;
                             white-space: nowrap; border: 1px solid var(--border);
                             background: var(--bg); color: var(--text2); }
.btn-lesson:hover        { border-color: var(--p-mid); color: var(--p-mid); }
.btn-lesson-current      { background: var(--cyan); color: #fff !important;
                             border-color: var(--cyan) !important; }
.btn-lesson-current:hover { background: #0590CC !important; }
.btn-lesson-done         { background: var(--bg3); color: var(--p-light) !important;
                             border-color: var(--border) !important; }
.btn-lesson-locked       { color: var(--text3) !important; cursor: pointer; }

.course-sidebar    { display: flex; flex-direction: column; gap: 1rem;
                      position: sticky; top: 1rem; }
.sidebar-card      { background: var(--bg); border: 1px solid var(--border);
                      border-radius: 12px; padding: 1.25rem; }
.sidebar-card-title { font-size: 13px; font-weight: 500;
                       color: var(--p-dark); margin-bottom: 1rem; }
.sidebar-locked-info { text-align: center; }
.sidebar-stats     { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.ss-item  { background: var(--bg2); border: 1px solid var(--border);
             border-radius: 6px; padding: 0.625rem; text-align: center; }
.ss-num   { font-size: 20px; font-weight: 500; color: var(--p-mid); }
.ss-label { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── LESSON PAGE ──────────────────────────────────────────── */
.lesson-page-wrap { display: grid; grid-template-columns: 1fr 260px;
                     gap: 0; max-width: 1100px; margin: 0 auto;
                     padding: 1.5rem; align-items: start; }
.lesson-content   { min-width: 0; padding-right: 1.5rem; }

.lesson-topnav      { display: flex; justify-content: space-between;
                       align-items: center; margin-bottom: 1.25rem; }
.lesson-topnav-btns { display: flex; gap: 8px; }
.topnav-btn         { font-size: 12px; padding: 6px 14px;
                       border: 1px solid var(--border); border-radius: 6px;
                       background: var(--bg); color: var(--text2);
                       text-decoration: none; }
.topnav-btn:hover   { border-color: var(--p-mid); color: var(--p-mid); }
.topnav-btn-next    { background: var(--p-mid); color: #fff !important;
                       border-color: var(--p-mid); }
.topnav-btn-next:hover { background: var(--p-dark) !important; }

.lesson-header    { margin-bottom: 1.25rem; }
.lesson-cat-label { font-size: 11px; letter-spacing: 1.5px;
                     text-transform: uppercase; color: var(--cyan);
                     font-weight: 500; margin-bottom: 0.5rem; }
.lesson-header h1 { font-size: 24px; font-weight: 500; color: var(--p-dark);
                     margin-bottom: 0.625rem; line-height: 1.3; }
.lesson-meta-bar  { display: flex; gap: 1rem; flex-wrap: wrap;
                     font-size: 12px; color: var(--text3); }
.lesson-xp-tag    { color: var(--gold); font-weight: 500;
                     background: var(--gold-bg); padding: 2px 8px;
                     border-radius: 3px; border: 1px solid #E8D5A0; }
.lesson-done-tag  { color: var(--green); font-weight: 500;
                     background: var(--green-bg); padding: 2px 8px;
                     border-radius: 3px; border: 1px solid #A8D5B8; }

.video-wrap        { margin-bottom: 1.5rem; }
.video-wrap iframe { width: 100%; aspect-ratio: 16/9; border-radius: 10px; }

.video-placeholder { background: #0D0D0D; border-radius: 10px;
                      aspect-ratio: 16/9; display: flex; align-items: center;
                      justify-content: center; margin-bottom: 1.5rem;
                      cursor: pointer; }
.vp-inner   { display: flex; flex-direction: column;
               align-items: center; gap: 12px; }
.vp-play    { width: 56px; height: 56px; border-radius: 50%;
               background: rgba(115,70,135,0.85); display: flex;
               align-items: center; justify-content: center;
               font-size: 18px; color: #fff; }
.vp-label   { color: rgba(255,255,255,0.7); font-size: 13px; }

.lesson-body  { margin-bottom: 1.5rem; }
.lesson-text { font-size: 16px; color: var(--text);
               line-height: 1.8; background: var(--bg);
               border: 1px solid var(--border);
               border-radius: 10px; padding: 1.5rem;
               max-width: 780px; }

.complete-section { margin-bottom: 1.5rem; }
.btn-complete  { width: 100%; padding: 14px; background: var(--green);
                  color: #fff; border: none; border-radius: 8px;
                  font-size: 15px; font-weight: 500; cursor: pointer;
                  font-family: inherit; transition: background 0.15s; }
.btn-complete:hover    { background: #155F3A; }
.btn-complete:disabled { background: var(--text3); cursor: default; }
.complete-done { display: flex; align-items: center; padding: 1rem 1.25rem;
                  background: var(--green-bg); border: 1px solid #A8D5B8;
                  border-radius: 8px; font-size: 14px; font-weight: 500;
                  color: var(--green); flex-wrap: wrap; gap: 8px; }

.xp-popup     { position: fixed; top: 80px; right: 20px;
                 background: var(--p-mid); color: #fff;
                 padding: 10px 20px; border-radius: 8px;
                 font-size: 15px; font-weight: 500;
                 opacity: 0; transform: translateY(-10px);
                 transition: all 0.3s; pointer-events: none; z-index: 1000; }
.xp-popup.show { opacity: 1; transform: translateY(0); }

.quiz-section     { background: var(--bg); border: 1px solid var(--border);
                     border-radius: 12px; overflow: hidden; }
.quiz-section-hdr { padding: 1.25rem; border-bottom: 1px solid var(--border); }
.quiz-section-hdr h2 { font-size: 16px; font-weight: 500;
                         color: var(--p-dark); margin-bottom: 2px; }
.quiz-section-hdr p  { font-size: 13px; color: var(--text3); }

.quiz-q-block  { padding: 1.25rem; border-bottom: 1px solid var(--border); }
.qq-num   { font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
             color: var(--text3); font-weight: 500; margin-bottom: 0.5rem; }
.qq-text  { font-size: 14px; color: var(--text); line-height: 1.6;
             margin-bottom: 0.875rem; }
.qq-opts  { display: flex; flex-direction: column; gap: 6px; }
.qq-opt   { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
             border: 1.5px solid var(--border); border-radius: 6px;
             cursor: pointer; font-size: 13px; color: var(--text2);
             background: var(--bg); transition: border-color 0.1s, background 0.1s; }
.qq-opt:hover      { border-color: var(--p-mid); background: var(--bg3); }
.qq-opt.selected   { border-color: var(--p-mid); background: var(--bg3);
                      color: var(--p-dark); font-weight: 500; }
.qq-opt.qq-correct { border-color: var(--green); background: var(--green-bg);
                      color: var(--green); }
.qq-opt.qq-wrong   { border-color: #C0392B; background: #FDECEA; color: #C0392B; }
.qq-opt-circle     { width: 22px; height: 22px; border-radius: 50%;
                      border: 1.5px solid var(--border); display: flex;
                      align-items: center; justify-content: center;
                      font-size: 10px; font-weight: 500; flex-shrink: 0;
                      color: var(--text3); }
.qq-opt.selected .qq-opt-circle  { border-color: var(--p-mid);
                                     background: var(--p-mid); color: #fff; }
.qq-opt.qq-correct .qq-opt-circle { border-color: var(--green);
                                      background: var(--green); color: #fff; }
.qq-opt.qq-wrong .qq-opt-circle   { border-color: #C0392B;
                                      background: #C0392B; color: #fff; }
.quiz-submit-row  { padding: 1.25rem; display: flex; justify-content: flex-end;
                     gap: 8px; border-top: 1px solid var(--border); }
.btn-quiz-reset   { font-size: 13px; padding: 8px 16px;
                     border: 1px solid var(--border); border-radius: 6px;
                     background: var(--bg); color: var(--text2);
                     cursor: pointer; font-family: inherit; }
.btn-quiz-submit  { font-size: 13px; padding: 8px 20px;
                     background: var(--p-mid); color: #fff; border: none;
                     border-radius: 6px; cursor: pointer;
                     font-family: inherit; font-weight: 500; }
.btn-quiz-submit:hover { background: var(--p-dark); }
.quiz-result-box  { margin: 0 1.25rem 1.25rem; background: var(--bg2);
                     border: 1px solid var(--border); border-radius: 10px;
                     padding: 1.5rem; text-align: center; }
.qrb-title { font-size: 18px; font-weight: 500; color: var(--p-dark);
              margin-bottom: 4px; }
.qrb-score { font-size: 40px; font-weight: 500; color: var(--p-mid); }
.qrb-max   { font-size: 20px; color: var(--text3); }
.qrb-xp    { display: inline-block; margin-top: 4px; font-size: 13px;
              font-weight: 500; color: var(--gold); background: var(--gold-bg);
              padding: 4px 14px; border-radius: 5px; border: 1px solid #E8D5A0; }
.qrb-msg   { font-size: 13px; color: var(--text2); margin-top: 0.75rem; }

.lesson-sidebar      { position: sticky; top: 1rem; }
.lesson-sidebar-card { background: var(--bg); border: 1px solid var(--border);
                         border-radius: 12px; overflow: hidden;
                         max-height: calc(100vh - 100px); overflow-y: auto; }
.lsc-title   { padding: 1rem 1.25rem; font-size: 13px; font-weight: 500;
                color: var(--p-dark); border-bottom: 1px solid var(--border); }
.lsc-chapter { padding: 0.5rem 1.25rem; font-size: 10px; font-weight: 500;
                letter-spacing: 1.5px; text-transform: uppercase;
                color: var(--text3); background: var(--bg2);
                border-bottom: 1px solid var(--border); }
.lsc-lessons { display: flex; flex-direction: column; }
.lsc-lesson  { display: flex; align-items: center; gap: 8px;
                padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--border);
                text-decoration: none; transition: background 0.1s; }
.lsc-lesson:hover   { background: var(--bg2); }
.lsc-current        { background: #EEF7FD !important;
                       border-left: 3px solid var(--cyan); }
.lscd      { width: 20px; height: 20px; border-radius: 50%;
              border: 1.5px solid var(--border); display: flex;
              align-items: center; justify-content: center;
              font-size: 9px; color: var(--text3); flex-shrink: 0; }
.lscd-done { background: var(--bg3); border-color: var(--p-mid);
              color: var(--p-mid); font-size: 10px; }
.lscd-cur  { background: #EEF7FD; border-color: var(--cyan); color: var(--cyan); }
.lsc-lesson-title  { font-size: 12px; color: var(--text2); line-height: 1.3; }
.lsc-current .lsc-lesson-title { font-weight: 500; color: var(--p-dark); }
.lsc-done .lsc-lesson-title    { color: var(--text3); }

/* ── PRICING PAGE ─────────────────────────────────────────── */
.pricing-wrap    { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem; }
.pricing-header  { text-align: center; margin-bottom: 3rem; }
.pricing-label   { font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
                    color: var(--cyan); font-weight: 500; margin-bottom: 0.75rem; }
.pricing-header h1 { font-size: 32px; font-weight: 500; color: var(--p-dark);
                      margin-bottom: 0.75rem; letter-spacing: -0.5px; }
.pricing-header p  { font-size: 15px; color: var(--text2); line-height: 1.7; }
.pricing-active-info { display: inline-block; margin-top: 0.75rem;
                         font-size: 13px; color: var(--green);
                         background: var(--green-bg); border: 1px solid #A8D5B8;
                         padding: 6px 14px; border-radius: 6px; }

.pricing-grid    { display: grid; grid-template-columns: repeat(3,1fr);
                    gap: 1rem; margin-bottom: 2rem; align-items: start; }
.pricing-card    { background: var(--bg); border: 1px solid var(--border);
                    border-radius: 14px; padding: 2rem 1.5rem;
                    position: relative; transition: border-color 0.15s; }
.pricing-card:hover { border-color: var(--p-light); }
.pricing-card-featured { border: 2px solid var(--p-mid);
                           transform: scale(1.03);
                           box-shadow: 0 4px 24px rgba(115,70,135,0.12); }

.pc-badge    { position: absolute; top: -14px; left: 50%;
                transform: translateX(-50%);
                background: var(--p-mid); color: #fff;
                font-size: 11px; font-weight: 500;
                padding: 4px 16px; border-radius: 20px;
                letter-spacing: 0.5px; white-space: nowrap; }
.pc-name     { font-size: 14px; font-weight: 500;
                color: var(--text2); margin-bottom: 0.75rem; }
.pc-price    { font-size: 48px; font-weight: 500; color: var(--p-dark);
                line-height: 1; letter-spacing: -2px; }
.pc-currency { font-size: 20px; font-weight: 400;
                color: var(--text3); letter-spacing: 0; }
.pc-period   { font-size: 13px; color: var(--text3); margin-top: 4px; }
.pc-saving   { display: inline-block; margin-top: 6px; font-size: 12px;
                font-weight: 500; color: var(--green); background: var(--green-bg);
                border: 1px solid #A8D5B8; padding: 2px 8px; border-radius: 3px; }
.pc-divider  { height: 1px; background: var(--border); margin: 1.25rem 0; }
.pc-features { list-style: none; margin-bottom: 1.5rem; }
.pc-features li { font-size: 13px; color: var(--text2); padding: 5px 0;
                    display: flex; align-items: center; gap: 6px; }
.pc-footer   { display: flex; flex-direction: column; gap: 8px; }
.pc-note     { font-size: 11px; color: var(--text3); text-align: center; }

.btn-buy          { display: block; width: 100%; padding: 12px;
                     text-align: center; background: var(--bg3);
                     color: var(--p-mid); border: 1.5px solid var(--p-mid);
                     border-radius: 8px; font-size: 14px; font-weight: 500;
                     cursor: pointer; text-decoration: none;
                     font-family: inherit; transition: all 0.15s; }
.btn-buy:hover    { background: var(--p-mid); color: #fff; }
.btn-buy-featured { background: var(--p-mid); color: #fff !important;
                     border-color: var(--p-mid); }
.btn-buy-featured:hover { background: var(--p-dark) !important; }

.pricing-free-info { display: flex; align-items: center; gap: 1rem;
                       background: var(--bg); border: 1px solid var(--border);
                       border-radius: 10px; padding: 1.25rem 1.5rem;
                       margin-bottom: 3rem; font-size: 14px; color: var(--text2); }
.pfi-icon          { font-size: 24px; flex-shrink: 0; }
.pricing-free-info a       { color: var(--p-mid); text-decoration: none; margin-left: 6px; }
.pricing-free-info a:hover { color: var(--p-dark); }

.pricing-faq    { }
.pricing-faq h2 { font-size: 22px; font-weight: 500; color: var(--p-dark);
                   margin-bottom: 1.5rem; text-align: center; }
.faq-grid  { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.faq-item  { background: var(--bg); border: 1px solid var(--border);
              border-radius: 10px; padding: 1.25rem; }
.faq-q     { font-size: 14px; font-weight: 500; color: var(--p-dark);
              margin-bottom: 0.5rem; }
.faq-a     { font-size: 13px; color: var(--text2); line-height: 1.7; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .stats-row      { grid-template-columns: repeat(2,1fr); }
    .dash-hero      { flex-wrap: wrap; }
    .dash-premium-box { width: 100%; }
    .course-layout  { grid-template-columns: 1fr; }
    .course-sidebar { position: static; }
    .lesson-page-wrap { grid-template-columns: 1fr; padding: 1rem; }
    .lesson-content   { padding-right: 0; }
    .lesson-sidebar   { position: static; }
    .pricing-grid   { grid-template-columns: 1fr; }
    .pricing-card-featured { transform: none; }
    .faq-grid       { grid-template-columns: 1fr; }
}

/* ── LANDING PAGE ─────────────────────────────────────────── */

/* HERO */
.hero-section  { background: var(--bg); border-bottom: 1px solid var(--border);
                  padding: 5rem 1.5rem 4rem; }
.hero-inner    { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-label    { font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
                  color: var(--cyan); font-weight: 500; margin-bottom: 1rem;
                  display: inline-block; background: #E8F6FD;
                  padding: 4px 14px; border-radius: 4px;
                  border: 1px solid #C5E8F8; }
.hero-h1       { font-size: 42px; font-weight: 500; color: var(--p-dark);
                  line-height: 1.18; letter-spacing: -1px;
                  margin-bottom: 1.25rem; }
.hero-accent   { color: var(--cyan); }
.hero-desc     { font-size: 16px; color: var(--text2); line-height: 1.75;
                  margin-bottom: 2rem; max-width: 560px; margin-left: auto;
                  margin-right: auto; }
.hero-actions  { display: flex; gap: 12px; justify-content: center;
                  flex-wrap: wrap; margin-bottom: 1rem; }
.btn-hero      { padding: 13px 28px; font-size: 15px; }
.btn-hero-ghost { padding: 13px 28px; font-size: 15px; font-weight: 500;
                   background: transparent; color: var(--p-dark);
                   border: 1.5px solid var(--p-mid); border-radius: 6px;
                   text-decoration: none; transition: all 0.15s; }
.btn-hero-ghost:hover { background: var(--bg3); }
.hero-note     { font-size: 13px; color: var(--text3); }

/* STATS BAR */
.stats-bar       { background: var(--p-dark); }
.stats-bar-inner { max-width: 900px; margin: 0 auto; padding: 1.5rem;
                    display: flex; justify-content: center;
                    align-items: center; gap: 0; flex-wrap: wrap; }
.sb-item    { text-align: center; padding: 0.5rem 2.5rem; }
.sb-num     { font-size: 28px; font-weight: 500; color: #fff;
               letter-spacing: -0.5px; }
.sb-label   { font-size: 12px; color: rgba(255,255,255,0.55);
               margin-top: 2px; }
.sb-divider { width: 1px; height: 40px;
               background: rgba(255,255,255,0.15); flex-shrink: 0; }

/* LANDING SECTIONS */
.landing-section     { padding: 4rem 1.5rem; }
.landing-section-alt { background: var(--bg2); }
.landing-inner       { max-width: 960px; margin: 0 auto; }
.ls-label   { font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
               color: var(--p-light); font-weight: 500; margin-bottom: 0.5rem; }
.ls-title   { font-size: 28px; font-weight: 500; color: var(--p-dark);
               letter-spacing: -0.5px; margin-bottom: 0.5rem; }
.ls-desc    { font-size: 15px; color: var(--text2); margin-bottom: 2rem;
               line-height: 1.7; max-width: 600px; }
.ls-title-row { display: flex; justify-content: space-between;
                 align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap;
                 gap: 0.5rem; }
.ls-link    { font-size: 13px; color: var(--p-mid); text-decoration: none; }
.ls-link:hover { color: var(--p-dark); }

/* CATEGORIES GRID */
.categories-grid { display: grid;
                     grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
                     gap: 1rem; }
.cat-card       { background: var(--bg); border: 1px solid var(--border);
                   border-radius: 12px; padding: 1.5rem 1rem;
                   text-align: center; text-decoration: none;
                   transition: border-color 0.15s, background 0.15s; }
.cat-card:hover { border-color: var(--p-mid); background: var(--bg3); }
.cat-card-icon  { font-size: 28px; margin-bottom: 0.75rem; display: block; }
.cat-card-name  { font-size: 14px; font-weight: 500; color: var(--text);
                   margin-bottom: 4px; }
.cat-card-count { font-size: 12px; color: var(--text3); }

/* HOW GRID */
.how-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.how-card     { background: var(--bg); border: 1px solid var(--border);
                 border-radius: 10px; padding: 1.5rem;
                 border-top: 3px solid var(--border); }
.how-card-a   { border-top-color: var(--p-dark); }
.how-card-b   { border-top-color: var(--p-mid); }
.how-card-c   { border-top-color: var(--cyan); }
.how-num      { font-size: 11px; letter-spacing: 1.5px; color: var(--text3);
                 font-weight: 500; margin-bottom: 0.6rem; }
.how-card h3  { font-size: 15px; font-weight: 500; color: var(--p-dark);
                 margin-bottom: 6px; }
.how-card p   { font-size: 13px; color: var(--text2); line-height: 1.65; }

/* WHY GRID */
.why-grid    { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.why-card    { background: var(--bg); border: 1px solid var(--border);
                border-radius: 10px; padding: 1.25rem; }
.why-icon    { font-size: 24px; margin-bottom: 0.75rem; }
.why-card h3 { font-size: 14px; font-weight: 500; color: var(--p-dark);
                margin-bottom: 6px; }
.why-card p  { font-size: 13px; color: var(--text2); line-height: 1.65; }

/* CTA SECTION */
.cta-section  { background: var(--p-dark); padding: 4rem 1.5rem; }
.cta-inner    { max-width: 600px; margin: 0 auto; text-align: center; }
.cta-inner h2 { font-size: 30px; font-weight: 500; color: #fff;
                 margin-bottom: 0.75rem; letter-spacing: -0.5px; }
.cta-inner p  { font-size: 15px; color: rgba(255,255,255,0.65);
                 margin-bottom: 2rem; }
.cta-actions  { display: flex; gap: 12px; justify-content: center;
                 flex-wrap: wrap; }
.btn-cta-primary { padding: 13px 28px; background: var(--p-mid); color: #fff;
                     border-radius: 6px; font-size: 15px; font-weight: 500;
                     text-decoration: none; border: none;
                     transition: background 0.15s; }
.btn-cta-primary:hover { background: var(--p-light); }
.btn-cta-ghost   { padding: 13px 28px; background: transparent;
                     color: rgba(255,255,255,0.8);
                     border: 1.5px solid rgba(255,255,255,0.3);
                     border-radius: 6px; font-size: 15px; font-weight: 500;
                     text-decoration: none; transition: all 0.15s; }
.btn-cta-ghost:hover { border-color: rgba(255,255,255,0.7);
                         color: #fff; }

/* FOOTER */
.site-footer   { background: var(--bg); border-top: 1px solid var(--border);
                  padding: 2rem 1.5rem; }
.footer-inner  { max-width: 960px; margin: 0 auto; display: flex;
                  align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-logo   { display: flex; flex-direction: column; line-height: 1.1;
                  margin-right: auto; }
.footer-links  { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--text3); text-decoration: none; }
.footer-links a:hover { color: var(--p-mid); }
.footer-copy   { font-size: 12px; color: var(--text3);
                  width: 100%; margin-top: 0.5rem; }

/* RESPONSIVE LANDING */
@media (max-width: 680px) {
    .hero-h1      { font-size: 28px; }
    .how-grid     { grid-template-columns: 1fr; }
    .why-grid     { grid-template-columns: repeat(2,1fr); }
    .stats-bar-inner { gap: 0; }
    .sb-item      { padding: 0.5rem 1.25rem; }
    .sb-divider   { display: none; }
}

/* KaTeX */
.katex-content .katex-display {
    margin: 1.25rem 0;
    overflow-x: auto;
    padding: 0.875rem 1rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--p-mid);
    border-radius: 0 6px 6px 0;
}
.katex-content .katex {
    font-size: 1.05em;
}
.katex-content .katex-display > .katex {
    font-size: 1.15em;
}

.animation-wrap  { margin-bottom: 1.5rem; }
.animation-label { font-size: 11px; letter-spacing: 1.5px;
                    text-transform: uppercase; color: var(--cyan);
                    font-weight: 500; margin-bottom: 8px; }
.animation-frame { width: 100%; min-height: 500px; border: none;
                    border-radius: 10px; display: block;
                    border: 1px solid var(--border); }

.navbar-admin-link {
    font-size: 13px;
    color: var(--cyan) !important;
    text-decoration: none;
    font-weight: 500;
}
.navbar-admin-link:hover {
    color: #0590CC !important;
}

/* ADMIN BTN */
.navbar-admin-btn {
    font-size: 12px;
    padding: 5px 14px;
    background: transparent;
    color: var(--p-dark) !important;
    border: 1.5px solid var(--p-mid);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.navbar-admin-btn:hover {
    background: var(--p-mid) !important;
    color: #fff !important;
    border-color: var(--p-mid);
}

/* PREMIUM BADGE */
.navbar-premium {
    font-size: 12px;
    font-weight: 500;
    color: var(--p-dark);
    background: var(--bg3);
    border: 1.5px solid var(--p-mid);
    border-radius: 5px;
    padding: 3px 10px;
    letter-spacing: 0.2px;
}

/* AVATAR w navbarze */
.navbar-user-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.navbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg3);
    border: 1.5px solid var(--p-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--p-mid);
    flex-shrink: 0;
}