.xa-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--xa-bg)}
.xa-sidebar{background:var(--xa-sidebar-bg);color:var(--xa-sidebar-fg);padding:1.5rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.xa-sidebar__brand{font-weight:800;font-size:1.25rem;color:#fff;padding:.5rem 1rem 1.5rem;display:flex;align-items:center;gap:.5rem}
.xa-sidebar__brand span{background:var(--xa-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.xa-sidebar__section{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#64748B;padding:1rem 1rem .5rem}
.xa-sidebar__nav a{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;border-radius:12px;color:#CBD5E1;margin-bottom:.15rem;font-weight:500;font-size:.92rem;transition:background .2s,color .2s}
.xa-sidebar__nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.xa-sidebar__nav a.is-active{background:var(--xa-grad);color:#fff;box-shadow:0 8px 24px -8px rgba(108,62,244,.6)}
.xa-sidebar__nav .ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem}
.xa-content{display:flex;flex-direction:column;min-width:0}
.xa-topbar{background:#fff;padding:1rem 2rem;border-bottom:1px solid var(--xa-border);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}
.xa-topbar__search{flex:1;max-width:420px}
.xa-topbar__search input{width:100%;padding:.6rem 1rem;border-radius:12px;border:1px solid var(--xa-border);background:#F8FAFC;font-family:inherit}
.xa-topbar__actions{display:flex;gap:1rem;align-items:center}
.xa-avatar{width:40px;height:40px;border-radius:50%;background:var(--xa-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}
.xa-page{padding:2rem;flex:1}
.xa-page__header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1.75rem}
.xa-page__title{font-size:1.75rem;margin:0}
.xa-page__sub{color:var(--xa-muted);margin:.25rem 0 0}
.xa-widget{background:#fff;border-radius:var(--xa-radius);padding:1.5rem;border:1px solid var(--xa-border);box-shadow:0 4px 20px -12px rgba(15,23,42,.08)}
.xa-widget__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.xa-widget__head h3{margin:0}
.timeline__item{display:flex;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--xa-border)}
.timeline__item:last-child{border:0}
.timeline__dot{width:10px;height:10px;border-radius:50%;background:var(--xa-primary);margin-top:.5rem;flex-shrink:0}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:.85rem}
.calendar__cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#F1F5F9;color:var(--xa-dark)}
.calendar__cell.today{background:var(--xa-grad);color:#fff;font-weight:700}
.exam{max-width:900px;margin:0 auto}
.exam__title{
    margin:0 0 20px;
    font-size:28px;
    font-weight:700;
}
.exam__status{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:30px;}
.exam__progress{flex:1;}
.exam__progress-header{display:flex;justify-content:space-between;margin-bottom:8px;font-weight:600;}
.exam__progress-bar{width:100%;height:10px;background:#ececf6;border-radius:20px;overflow:hidden;}
.exam__progress-fill{height:100%;width:0;background:linear-gradient(90deg,#6c4df6,#8d6cff);transition:.4s;}
.exam__progress small{display:block;margin-top:8px;color:#777;}
.exam__timer{min-width:120px;text-align:center;padding:12px 18px;border-radius:10px;background:#fff3f3;color:#ff4b5c;font-weight:700;}
.exam__question{background:#fff;padding:2rem;border-radius:var(--xa-radius-lg);box-shadow:var(--xa-shadow-lg);margin-bottom:1.5rem}
.exam__opt{
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px 18px;
    border:2px solid #E5E7EB;
    border-radius:12px;
    margin-bottom:14px;
    cursor:pointer;
    transition:.25s;
    background:#fff;
}

.exam__opt:hover{
    border-color:#6C3EF4;
    background:#F8F5FF;
}

.exam__opt.selected{
    border-color:#6C3EF4;
    background:#F5F3FF;
    box-shadow:0 0 0 4px rgba(108,62,244,.08);
}

.exam__opt input[type=radio]{
    accent-color:#6C3EF4;
    transform:scale(1.15);
}

.exam__opt span{
    flex:1;
    font-size:15px;
}

.exam__opt:hover{border-color:var(--xa-primary);background:rgba(108,62,244,.03)}
.exam__opt.is-selected{border-color:var(--xa-primary);background:rgba(108,62,244,.08)}
.exam__nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.exam__nav button{width:40px;height:40px;border-radius:10px;border:1px solid var(--xa-border);background:#fff;font-weight:600;cursor:pointer;font-family:inherit}
.exam__nav button.answered{background:var(--xa-grad);color:#fff;border-color:transparent}

/*==================================================
LESSON HERO
==================================================*/

.xa-lesson-hero{
    background:linear-gradient(135deg,#6D4AFF,#8B5CF6);
    border-radius:20px;
    padding:30px;
    color:#fff;
    margin-bottom:25px;
}

.xa-lesson-hero-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.xa-lesson-label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.9;
    font-weight:700;
}

.xa-lesson-title{
    margin:10px 0;
    font-size:34px;
    font-weight:700;
    color:#fff;
}

.xa-lesson-desc{
    margin:0;
    font-size:16px;
    line-height:1.7;
    color:#fff;
    max-width:650px;
}

.xa-lesson-emoji{
    font-size:70px;
    opacity:.9;
}

.xa-lesson-content{
    margin-top:20px;
}

/*==================================================
LESSON SIDEBAR
==================================================*/

.xa-lesson-item{
    padding:15px 0;
    border-bottom:1px solid #eee;
}

.xa-lesson-link{
    display:block;
    padding:8px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    color:#222;
    transition:.25s;
}

.xa-lesson-link:hover{
    background:#F4F1FF;
    color:#6C4CF1;
}

.xa-lesson-link.active{
    background:#F4F1FF;
    color:#6C4CF1;
}
/*==================================================
LESSON / TEST STATISTICS
==================================================*/

.xa-lesson-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:24px;
}

.xa-stat-card{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:18px;
    padding:22px;
    box-shadow:0 10px 25px rgba(15,23,42,.05);
    transition:.25s;
}

.xa-stat-card:hover{
    transform:translateY(-4px);
}

.xa-stat-card span{
    display:block;
    font-size:13px;
    color:#94A3B8;
    margin-bottom:8px;
}

.xa-stat-card strong{
    display:block;
    font-size:34px;
    color:#111827;
    font-weight:700;
}

/*==================================================
TABLE
==================================================*/

.xa-table{
    width:100%;
    border-collapse:collapse;
}

.xa-table th{
    text-align:left;
    padding:15px;
    background:#F8FAFC;
    border-bottom:1px solid #E5E7EB;
    color:#64748B;
    font-size:13px;
}

.xa-table td{
    padding:16px;
    border-bottom:1px solid #EEF2F7;
    vertical-align:middle;
}

.xa-table tr:hover{
    background:#FAFAFC;
}

/*==================================================
BUTTONS
==================================================*/

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
    border:none;
    cursor:pointer;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-sm{
    padding:8px 14px;
    font-size:13px;
}

.btn-primary{
    background:#6C3EF4;
    color:#fff;
}

.btn-danger{
    background:#EF4444;
    color:#fff;
}

.btn-info{
    background:#0EA5E9;
    color:#fff;
}

.btn-success{
    background:#10B981;
    color:#fff;
}

.btn-outline{
    background:#fff;
    border:1px solid #6C3EF4;
    color:#6C3EF4;
}

.btn-outline:hover{
    background:#6C3EF4;
    color:#fff;
}

/*==================================================
ACTION BUTTON
==================================================*/

.xa-action,
.xa-action-buttons{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
}

.xa-action .btn,
.xa-action-buttons .btn{
    flex:0 0 auto;
}

/*==================================================
BADGE
==================================================*/

.badge{
    display:inline-block;
    padding:5px 12px;
    border-radius:20px;
    background:#EEF2FF;
    color:#4338CA;
    font-size:12px;
    font-weight:600;
}

.badge.publish{
    background:#DCFCE7;
    color:#166534;
}

.badge.draft{
    background:#FEF3C7;
    color:#92400E;
}

.badge-success{
    background:#DCFCE7;
    color:#166534;
}

/*==================================================
WIDGET
==================================================*/

.xa-widget__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.xa-header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

/*==================================================
TEST BUILDER
==================================================*/

.xa-test-builder{
    max-width:900px;
}

.xa-question-card{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:16px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.xa-question-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.xa-question-title h4{
    margin:0;
    font-size:18px;
}

.xa-option-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.xa-option-grid input{
    width:100%;
}

.xa-form-actions{
    display:flex;
    gap:12px;
    margin-top:25px;
}

/*==================================================
SPEAKING
==================================================*/

.lesson-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.lesson-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border:1px solid #ECECEC;
    border-radius:14px;
    text-decoration:none;
    color:#222;
    transition:.25s;
    background:#fff;
}

.lesson-item:hover{
    border-color:#6D4AFF;
    background:#F8F6FF;
    transform:translateY(-2px);
}

.lesson-item.active{
    background:#F4F1FF;
    border-color:#6D4AFF;
}

.lesson-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#6D4AFF;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.lesson-info{
    flex:1;
    min-width:0;
}

.lesson-title{
    font-size:15px;
    font-weight:600;
    color:#111827;
    margin-bottom:4px;
}

.lesson-info small{
    display:block;
    color:#6B7280;
    line-height:1.5;
}

.xa-widget ul{
    margin:15px 0 0 20px;
    line-height:1.9;
}

.xa-widget ul li{
    margin-bottom:8px;
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

    .grid.grid-2{
        display:block;
    }

    .xa-left,
    .xa-right{
        width:100%;
    }

    .xa-right{
        margin-top:25px;
    }

    .lesson-item{
        padding:14px;
    }

    .lesson-icon{
        width:42px;
        height:42px;
        font-size:20px;
    }

}