/*==================================================
 EasyPeasy UI Framework
 SKIN.CSS v1.0
 Visual theme (requires variables.css + structure.css)
==================================================*/

/* ---------- BODY ---------- */

body{
    background:var(--ep-body);
    color:var(--ep-text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ---------- LINKS ---------- */

a{
    color:inherit;
}

/* ---------- SIDEBAR ---------- */

.ep-sidebar{
    background:var(--ep-sidebar);
    border-right:1px solid var(--ep-border);
    box-shadow:var(--ep-shadow-md);
}

.ep-logo{
    font-family:var(--ep-font-title);
    font-size:1.45rem;
    font-weight:var(--ep-bold);
    color:var(--ep-primary);
}

.ep-logo i{
    color:var(--ep-primary);
}

.ep-menu-item{
    color:var(--ep-text-light);
    font-weight:600;
    position:relative;
}

.ep-menu-item:hover{
    background:#EEF4FF;
    color:var(--ep-primary);
}

.ep-menu-item.ep-active{
    color:#fff;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    box-shadow:var(--ep-shadow-glow);
}

.ep-menu-item.ep-active i{
    color:#fff;
}

.ep-menu-item.ep-active::before{
    content:"";
    position:absolute;
    left:-10px;
    top:12px;
    width:4px;
    height:28px;
    border-radius:999px;
    background:var(--ep-primary);
}

/* ---------- HEADER ---------- */

.ep-header{
    background:var(--ep-header);
    backdrop-filter:blur(var(--ep-glass-blur));
    -webkit-backdrop-filter:blur(var(--ep-glass-blur));
    border-bottom:1px solid rgba(255,255,255,.4);
    box-shadow:0 5px 20px rgba(0,0,0,.04);
}

/* ---------- ICON BUTTONS ---------- */

.ep-btn-icon{
    background:#fff;
    color:var(--ep-text);
    box-shadow:var(--ep-shadow-sm);
}

.ep-btn-icon:hover{
    background:var(--ep-primary);
    color:#fff;
    box-shadow:var(--ep-shadow-glow);
}

/* ---------- PROFILE ---------- */

.ep-profile{
    padding:6px 14px;
    border-radius:999px;
}

.ep-profile:hover{
    background:#fff;
    box-shadow:var(--ep-shadow-sm);
}

.ep-profile img{
    border:3px solid #fff;
    box-shadow:var(--ep-shadow-sm);
}

/* ---------- CONTENT ---------- */

.ep-content{
    background:
        radial-gradient(circle at top right,#EDF3FF 0,#F8FAFE 30%,var(--ep-body) 70%);
}

/* ---------- CARDS ---------- */

.ep-card{
    background:var(--ep-card);
    box-shadow:var(--ep-shadow-md);
    border:1px solid rgba(255,255,255,.7);
}

.ep-card:hover{
    box-shadow:var(--ep-shadow-lg);
}


.ep-action-card{
    padding:2rem;
}

.ep-action-card > i{
    margin-bottom:1rem;
}

.ep-action-card h5{
    margin-bottom:.6rem;
}

.ep-action-card small{
    display:block;
    line-height:1.6;
    color:var(--ep-text-light);
}

/* ---------- HEADINGS ---------- */

h1,h2,h3,h4,h5{
    font-family:var(--ep-font-title);
    color:var(--ep-text);
}

p{
    color:var(--ep-text-light);
}

/* ---------- BUTTONS ---------- */

.ep-btn{
    border:none;
    border-radius:var(--ep-button-radius);
    padding:.8rem 1.4rem;
    font-weight:600;
    cursor:pointer;
}

.ep-btn-primary{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
    box-shadow:var(--ep-shadow-sm);
}

.ep-btn-primary:hover{
    filter:brightness(1.04);
    box-shadow:var(--ep-shadow-glow);
}

.ep-btn-soft{
    background:#EEF4FF;
    color:var(--ep-primary);
}

.ep-btn-soft:hover{
    background:#DFE9FF;
}

.ep-btn-outline{
    border:2px solid var(--ep-primary);
    color:var(--ep-primary);
    background:transparent;
}

.ep-btn-outline:hover{
    background:var(--ep-primary);
    color:#fff;
}

.ep-btn-success{
    background:var(--ep-success);
    color:#fff;
}

.ep-btn-danger{
    background:var(--ep-danger);
    color:#fff;
}

.ep-btn-warning{
    background:var(--ep-warning);
    color:#fff;
}


/* ==========================================
   Exercise Type Segmented Control
========================================== */

.ep-segmented{
    display:flex;
    gap:8px;
    padding:6px;
    background:#EEF4FF;
    border-radius:18px;
    margin-bottom:1rem;
}

.ep-segmented .btn-check{
    display:none;
}

.ep-segment{

    flex:1;

    text-align:center;

    padding:14px 18px;

    border-radius:14px;

    cursor:pointer;

    font-weight:600;

    color:#667085;

    transition:.25s;

    user-select:none;
}

.ep-segment:hover{

    background:#DCE8FF;

}

.btn-check:checked + .ep-segment{

    background:#4F7CFF;

    color:#fff;

    box-shadow:0 10px 24px rgba(79,124,255,.25);

}

.btn-check:checked + .ep-segment i{

    color:#fff;

}
/* ---------- INPUTS ---------- */

input,
textarea,
select{
    border:1px solid var(--ep-border);
    border-radius:14px;
    background:#fff;
    padding:.8rem 1rem;
    box-shadow:var(--ep-shadow-xs);
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:var(--ep-primary);
    box-shadow:0 0 0 .25rem rgba(79,124,255,.18);
}

/* ---------- TABLES ---------- */

table{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
}

thead{
    background:#F6F9FF;
}

th{
    color:var(--ep-text);
    font-weight:600;
}

td,th{
    padding:1rem;
    border-color:var(--ep-border);
}

/* ---------- BADGES ---------- */

.ep-badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    border-radius:999px;
    padding:.35rem .8rem;
    font-size:.8rem;
    font-weight:600;
}

.ep-badge-primary{background:#EEF4FF;color:var(--ep-primary);}
.ep-badge-success{background:#EAFBF2;color:var(--ep-success);}
.ep-badge-warning{background:#FFF6E3;color:var(--ep-warning);}
.ep-badge-danger{background:#FFECEC;color:var(--ep-danger);}

/* ---------- DROPDOWNS ---------- */

.dropdown-menu{
    border:none;
    border-radius:18px;
    box-shadow:var(--ep-shadow-lg);
    padding:.75rem;
}

.dropdown-item{
    border-radius:12px;
}

.dropdown-item:hover{
    background:#EEF4FF;
    color:var(--ep-primary);
}

/* ---------- PROGRESS ---------- */

.progress{
    height:10px;
    border-radius:999px;
    overflow:hidden;
    background:#E8EEF7;
}

.progress-bar{
    background:linear-gradient(90deg,var(--ep-primary),var(--ep-secondary));
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#EEF2F8;
}

::-webkit-scrollbar-thumb{
    background:#C8D4E8;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#A9BBD8;
}

/* ---------- SELECTION ---------- */

::selection{
    background:var(--ep-primary);
    color:#fff;
}


/*==================================================
 BREADCRUMB
==================================================*/



.ep-breadcrumb{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.9rem;
    color:var(--ep-text-light);
}
.ep-breadcrumb a:hover{color:var(--ep-primary);}
.ep-breadcrumb .active{font-weight:600;color:var(--ep-text);}


/*==================================================
 SEARCH
==================================================*/



.ep-search{
    position:relative;
}
.ep-search input{
    padding-left:2.8rem;
}
.ep-search i{
    position:absolute;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--ep-text-muted);
}


/*==================================================
 TOPBAR
==================================================*/



.ep-topbar-badge {
    position: absolute;

    top: 2px;
    right: 2px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--ep-danger);
    color: #fff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    border: 2px solid var(--ep-header-bg);

    z-index: 10;
}



.ep-dropdown-header .ep-topbar-badge{
    position:static;
    margin-left:auto;

    min-width:22px;
    height:22px;
    padding:0 6px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

@media (max-width: 600px) {

    .ep-topbar-badge {
        top: 1px;
        right: 1px;

        min-width: 16px;
        height: 16px;

        font-size: 9px;

        border-width: 1.5px;
    }

}
/*==================================================
 USER MENU
==================================================*/



.ep-user-card{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem;
}
.ep-user-card small{
    color:var(--ep-text-light);
}


/*==================================================
 TABS
==================================================*/



.ep-tabs{
    display:flex;
    gap:.5rem;
    border-bottom:1px solid var(--ep-border);
}
.ep-tab{
    padding:.8rem 1rem;
    border-radius:12px 12px 0 0;
    cursor:pointer;
}
.ep-tab.active{
    background:#fff;
    color:var(--ep-primary);
    font-weight:600;
}


/*==================================================
 PILLS
==================================================*/



.ep-pill{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:.45rem .9rem;
    background:#eef4ff;
    color:var(--ep-primary);
    font-weight:600;
}


/*==================================================
 STATISTIC CARDS
==================================================*/



.ep-stat-card{
    background:linear-gradient(180deg,#fff,#f8fbff);
    border-radius:22px;
    padding:1.5rem;
    box-shadow:var(--ep-shadow-md);
}
.ep-stat-value{
    font-size:2rem;
    font-family:var(--ep-font-title);
    font-weight:700;
}
.ep-stat-label{
    color:var(--ep-text-light);
}


/*==================================================
 STUDENT CARD
==================================================*/



.ep-student-card{
    display:flex;
    gap:1rem;
    align-items:center;
    padding:1.25rem;
    background:#fff;
    border-radius:22px;
    box-shadow:var(--ep-shadow-sm);
}
.ep-student-avatar{
    width:64px;
    height:64px;
    border-radius:50%;
}


/*==================================================
 AI CARD
==================================================*/



.ep-ai-card{
    background:linear-gradient(135deg,#6f59ff,#4f7cff);
    color:#fff;
    border-radius:22px;
    padding:1.5rem;
}
.ep-ai-card h3,
.ep-ai-card p{color:#fff;}


/*==================================================
 EMPTY STATE
==================================================*/



.ep-empty{
    text-align:center;
    padding:4rem 2rem;
}
.ep-empty i{
    font-size:4rem;
    color:var(--ep-primary-light);
}
.ep-empty h3{
    margin-top:1rem;
}


/*==================================================
 TOAST
==================================================*/



.ep-toast{
    border:none;
    border-radius:18px;
    box-shadow:var(--ep-shadow-lg);
}
.ep-toast-success{border-left:5px solid var(--ep-success);}
.ep-toast-danger{border-left:5px solid var(--ep-danger);}


/*==================================================
 MODAL
==================================================*/



.ep-modal .modal-content{
    border:none;
    border-radius:24px;
    box-shadow:var(--ep-shadow-xl);
}
.ep-modal .modal-header{
    border-bottom:1px solid var(--ep-border);
}


/*==================================================
 TIMELINE
==================================================*/



.ep-timeline{
    border-left:3px solid var(--ep-border);
    padding-left:2rem;
}
.ep-timeline-item{
    position:relative;
    margin-bottom:2rem;
}
.ep-timeline-item::before{
    content:"";
    position:absolute;
    left:-2.55rem;
    top:.2rem;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--ep-primary);
}


/*==================================================
 CALENDAR PLACEHOLDER
==================================================*/



.ep-calendar{
    background:#fff;
    border-radius:22px;
    padding:1.5rem;
    box-shadow:var(--ep-shadow-sm);
}

/* ---------- GLASS SURFACES ---------- */

.ep-glass{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 12px 40px rgba(30,60,120,.10);
}

.ep-glass-dark{
    background:rgba(31,41,55,.78);
    color:#fff;
}

/* ---------- HERO ---------- */

.ep-hero{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    padding:3rem;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
    box-shadow:var(--ep-shadow-xl);
}

.ep-hero h1,
.ep-hero h2,
.ep-hero p{
    color:#fff;
}

.ep-hero::before,
.ep-hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.ep-hero::before{
    width:240px;
    height:240px;
    right:-60px;
    top:-60px;
}

.ep-hero::after{
    width:160px;
    height:160px;
    left:-40px;
    bottom:-40px;
}




/* ---------- AI HERO ---------- */

.ep-ai-hero{
    position:relative;
    overflow:hidden;

background:
linear-gradient(
    90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.92) 38%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.15) 68%,
    rgba(255,255,255,0) 78%
),
url("../AI/AI bot.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.ep-ai-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(79,124,255,.18),
            transparent 35%
        );

    pointer-events:none;
}

.ep-ai-hero h1{
    color:#1F2937;
}

.ep-ai-hero p{
    color:#4B5563;
}

.ep-ai-hero > *{
    position:relative;
    z-index:2;
}
.ep-ai-hero > *{
    position:relative;
    z-index:2;
}




/* ---------- PREMIUM CARD ---------- */

.ep-card-premium{
    position:relative;
    overflow:hidden;
    background:#fff;
    border-radius:24px;
    box-shadow:var(--ep-shadow-lg);
    border:1px solid rgba(255,255,255,.75);
}

.ep-card-premium::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:linear-gradient(90deg,var(--ep-primary),var(--ep-secondary));
}

.ep-card-premium::after{
    content:"";
    position:absolute;
    top:-90px;
    right:-90px;
    width:190px;
    height:190px;
    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(79,124,255,.18),
        transparent 72%
    );

    pointer-events:none;
}


/* ---------- PREMIUM CARD - EMERALD ---------- */

.ep-card-premium-green{
    position:relative;
    overflow:hidden;
    background:#fff;
    border-radius:24px;
    box-shadow:
        0 18px 45px rgba(20,120,80,.12);
    border:1px solid rgba(32,201,151,.15);
}

.ep-card-premium-green::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;

    background:linear-gradient(
        90deg,
        #20C997,
        #34D399,
        #7EE8C6
    );
}
.ep-card-premium-green::after{
    content:"";
    position:absolute;
    top:-90px;
    right:-90px;
    width:190px;
    height:190px;
    border-radius:50%;

    background:radial-gradient(
    circle,
    rgba(52,211,153,.18),
    transparent 72%
);

    pointer-events:none;
}


/* ---------- PREMIUM CARD - GOLD ---------- */

.ep-card-premium-gold{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#fffafb);
    border-radius:24px;
    box-shadow:
        0 18px 45px rgba(232,161,22,.14);
    border:1px solid rgba(255,205,86,.20);
}

.ep-card-premium-gold::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;

    background:linear-gradient(
        90deg,
        #FFB347,
        #FFD54F,
        #FFF1A6
    );
}
.ep-card-premium-gold::after{
    content:"";
    position:absolute;
    top:-90px;
    right:-90px;
    width:190px;
    height:190px;
    border-radius:50%;

    background:radial-gradient(
    circle,
    rgba(255,213,79,.18),
    transparent 72%
);

    pointer-events:none;
}

/* ---------- PREMIUM CARD - AURORA ---------- */

.ep-card-premium-aurora{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#fcfbff);
    border-radius:24px;

    border:1px solid rgba(170,140,255,.18);

    box-shadow:
        0 18px 45px rgba(115,95,255,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.ep-card-premium-aurora::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:5px;

    background:linear-gradient(
        90deg,
        #6E5BFF 0%,
        #9B7BFF 35%,
        #D16BFF 70%,
        #FF8CC8 100%
    );
}

.ep-card-premium-aurora::after{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:180px;
    height:180px;
    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(209,107,255,.18),
        transparent 70%
    );

    pointer-events:none;
}


/* ---------- PREMIUM CARD - CRIMSON ---------- */

.ep-card-premium-crimson{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#fffafb);
    border-radius:24px;

    border:1px solid rgba(220,53,69,.16);

    box-shadow:
        0 18px 45px rgba(220,53,69,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.ep-card-premium-crimson::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:5px;

    background:linear-gradient(
        90deg,
        #C1121F 0%,
        #DC3545 35%,
        #F05A6E 70%,
        #FF9BA8 100%
    );
}

.ep-card-premium-crimson::after{
    content:"";
    position:absolute;
    top:-90px;
    right:-90px;
    width:190px;
    height:190px;
    border-radius:50%;

    background:radial-gradient(
    circle,
    rgba(240,90,110,.18),
    transparent 72%
);

    pointer-events:none;
}



/* ---------- STATUS DOT ---------- */

.ep-status{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
}

.ep-status.online{background:var(--ep-success);}
.ep-status.busy{background:var(--ep-danger);}
.ep-status.away{background:var(--ep-warning);}
.ep-status.offline{background:#cbd5e1;}

/* ---------- AVATAR GROUP ---------- */

.ep-avatar-group{
    display:flex;
}

.ep-avatar-group img{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid #fff;
    margin-left:-10px;
    box-shadow:var(--ep-shadow-xs);
}

.ep-avatar-group img:first-child{
    margin-left:0;
}

/* ---------- LIST GROUP ---------- */

.ep-list{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--ep-shadow-sm);
}

.ep-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--ep-border);
}

.ep-list-item:last-child{
    border-bottom:none;
}

.ep-list-item:hover{
    background:#f8fbff;
}

/* ---------- NOTIFICATION CENTER ---------- */

.ep-notification-center{
    width:380px;
    max-height:520px;
    overflow:auto;
}

.ep-notification-header{
    padding:1.2rem;
    font-weight:700;
    border-bottom:1px solid var(--ep-border);
}

.ep-notification-footer{
    padding:1rem;
    border-top:1px solid var(--ep-border);
    text-align:center;
}

/* Top bar notifications always above workspace */
.ep-header{
    position:relative;
    z-index:3000;
}

.ep-header .dropdown{
    position:relative;
}

.ep-header .dropdown-menu,
.ep-notification-center{
    z-index:3100 !important;
}

.dropdown-backdrop{
    z-index:2999 !important;
}



/* ---------- FEATURE ICON ---------- */

.ep-feature-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    color:#fff;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    box-shadow:var(--ep-shadow-glow);
}

/* ---------- RIBBON ---------- */

.ep-ribbon{
    position:absolute;
    top:18px;
    right:-34px;
    transform:rotate(45deg);
    width:140px;
    text-align:center;
    background:linear-gradient(90deg,#ffb347,#ffcc33);
    color:#6b4a00;
    font-size:.75rem;
    font-weight:700;
    padding:.35rem 0;
}

/* ---------- GLOW ---------- */

.ep-glow-primary{
    box-shadow:0 0 30px rgba(79,124,255,.30);
}

.ep-glow-success{
    box-shadow:0 0 25px rgba(40,199,111,.30);
}

/* ---------- HOVER SCALE ---------- */

.ep-hover-scale{
    transition:.25s;
}

.ep-hover-scale:hover{
    transform:translateY(-4px) scale(1.02);
}

/* ---------- DASHBOARD GRID ---------- */

.ep-dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem;
}

.ep-dashboard-wide{
    grid-column:span 2;
}

@media(max-width:992px){
    .ep-dashboard-wide{
        grid-column:span 1;
    }
}

/* ---------- QUICK ACTION ---------- */

.ep-quick-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:1rem;
}

.ep-quick-card{
    background:#fff;
    border-radius:20px;
    padding:1rem;
    text-align:center;
    box-shadow:var(--ep-shadow-sm);
}

.ep-quick-card:hover{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
}

/* ---------- DIVIDER ---------- */

.ep-divider{
    height:1px;
    background:var(--ep-border);
    margin:1.5rem 0;
}


/*==========================
 TABLES
==========================*/

.ep-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--ep-shadow-sm);
}

.ep-table thead{
    background:#F6F9FF;
}

.ep-table th{
    padding:1rem;
    text-align:left;
    font-weight:700;
    color:var(--ep-text);
}

.ep-table td{
    padding:1rem;
    border-top:1px solid var(--ep-border);
}

.ep-table-striped tbody tr:nth-child(even) > td{
    background:#F5F9FF;
}

.ep-table-striped tbody tr:nth-child(odd) > td{
    background:#FFFFFF;
}

.ep-table-striped tbody tr:hover > td{
    background:#E8F1FF;
}

.ep-table-responsive{
    overflow:auto;
    border-radius:20px;
}

/*==========================
 PAGINATION
==========================*/

.ep-pagination{
    display:flex;
    gap:.5rem;
    justify-content:center;
    margin-top:1.5rem;
}

.ep-page{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fff;
    box-shadow:var(--ep-shadow-xs);
    cursor:pointer;
}

.ep-page:hover,
.ep-page.active{
    background:var(--ep-primary);
    color:#fff;
}

/*==========================
 ACCORDION
==========================*/

.ep-accordion-item{
    background:#fff;
    border-radius:18px;
    margin-bottom:1rem;
    box-shadow:var(--ep-shadow-xs);
    overflow:hidden;
}

.ep-accordion-header{
    padding:1rem 1.25rem;
    cursor:pointer;
    font-weight:600;
}

.ep-accordion-body{
    padding:1.25rem;
    border-top:1px solid var(--ep-border);
}

/*==========================
 TREE
==========================*/

.ep-tree ul{
    list-style:none;
    padding-left:1.2rem;
}

.ep-tree li{
    margin:.45rem 0;
}

/*==========================
 ALERTS
==========================*/

.ep-alert{
    padding:1rem 1.2rem;
    border-radius:18px;
    display:flex;
    gap:.8rem;
    align-items:flex-start;
    margin-bottom:1rem;
}

.ep-alert-success{background:#EAFBF2;color:#1C7A49;}
.ep-alert-warning{background:#FFF7E4;color:#A16A00;}
.ep-alert-danger{background:#FFECEC;color:#A42020;}
.ep-alert-info{background:#EAF8FF;color:#0D6E9F;}

/*==========================
 LOADING OVERLAY
==========================*/

.ep-loading-overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
}

/*==========================
 SPINNER
==========================*/

.ep-spinner{
    width:54px;
    height:54px;
    border-radius:50%;
    border:4px solid #dfe8f7;
    border-top-color:var(--ep-primary);
    animation:epSpin .8s linear infinite;
}

/*==========================
 SKELETON
==========================*/

.ep-skeleton{
    border-radius:12px;
    background:
    linear-gradient(90deg,#eef2f8 25%,#f9fbff 50%,#eef2f8 75%);
    background-size:300% 100%;
    animation:epSkeleton 1.3s infinite;
}

@keyframes epSkeleton{
    from{background-position:100% 0;}
    to{background-position:-100% 0;}
}

/*==========================
 EMPTY STATE
==========================*/

.ep-empty-state{
    text-align:center;
    padding:4rem 2rem;
}

.ep-empty-state i{
    font-size:4rem;
    color:var(--ep-primary-light);
}

.ep-empty-state h3{
    margin-top:1rem;
}

/*==========================
 TOOLTIP
==========================*/

.ep-tooltip{
    position:absolute;
    background:#1f2937;
    color:#fff;
    padding:.45rem .7rem;
    border-radius:8px;
    font-size:.75rem;
    white-space:nowrap;
}

/*==========================
 DRAWER
==========================*/

.ep-drawer{
    background:#fff;
    box-shadow:var(--ep-shadow-xl);
    border-left:1px solid var(--ep-border);
}

/*==========================
 BREADCRUMB
==========================*/

.ep-breadcrumb{
    display:flex;
    gap:.5rem;
    align-items:center;
    margin-bottom:1.5rem;
}

.ep-breadcrumb .current{
    font-weight:700;
    color:var(--ep-primary);
}

/*==========================
 UTILITY COLORS
==========================*/

.ep-text-primary{color:var(--ep-primary);}
.ep-text-success{color:var(--ep-success);}
.ep-text-warning{color:var(--ep-warning);}
.ep-text-danger{color:var(--ep-danger);}

.ep-bg-primary{background:var(--ep-primary);color:#fff;}
.ep-bg-success{background:var(--ep-success);color:#fff;}
.ep-bg-warning{background:var(--ep-warning);color:#fff;}
.ep-bg-danger{background:var(--ep-danger);color:#fff;}

/*==========================
 PRINT
==========================*/

@media print{

.ep-sidebar,
.ep-header,
.ep-fab{
    display:none !important;
}

.ep-content{
    padding:0;
    background:#fff;
}

.ep-card{
    box-shadow:none;
    border:1px solid #ddd;
}

}


/* ---------- FORM GROUP ---------- */

.ep-form-group{margin-bottom:1.4rem;}
.ep-label{
 display:block;
 margin-bottom:.45rem;
 font-weight:600;
 color:var(--ep-text);
}

/* ---------- FLOATING LABEL ---------- */

.ep-floating{
 position:relative;
}
.ep-floating input,
.ep-floating textarea{
 width:100%;
 padding:1.3rem 1rem .55rem;
}
.ep-floating label{
 position:absolute;
 left:1rem;
 top:.95rem;
 color:var(--ep-text-muted);
 pointer-events:none;
 transition:.2s;
 background:#fff;
 padding:0 .25rem;
}
.ep-floating input:focus+label,
.ep-floating input:not(:placeholder-shown)+label,
.ep-floating textarea:focus+label,
.ep-floating textarea:not(:placeholder-shown)+label{
 top:-.55rem;
 font-size:.75rem;
 color:var(--ep-primary);
}

/* ---------- SWITCH ---------- */
.ep-switch{
    position:relative;
    display:inline-block;
    width:54px;
    height:30px;
}

.ep-switch input{
    position:absolute;
    opacity:0;
    width:54px;
    height:30px;
    margin:0;
    cursor:pointer;
    z-index:2;
}

.ep-slider{
    position:absolute;
    inset:0;
    background:#d9e2ef;
    border-radius:999px;
    transition:.25s;
    pointer-events:none;
}

.ep-slider:before{
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    left:4px;
    top:4px;
    border-radius:50%;
    background:#fff;
    transition:.25s;
}

.ep-switch input:checked + .ep-slider{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
}

.ep-switch input:checked + .ep-slider:before{
    transform:translateX(24px);
}

/* ---------- CHECKBOX ---------- */

.ep-check{
 display:flex;
 align-items:center;
 gap:.7rem;
 cursor:pointer;
}
.ep-check input{
 accent-color:var(--ep-primary);
 width:18px;
 height:18px;
}

/* ---------- RANGE ---------- */

.ep-range{
 width:100%;
 accent-color:var(--ep-primary);
}

/* ---------- UPLOAD ---------- */

.ep-upload{
 border:2px dashed var(--ep-border);
 border-radius:22px;
 padding:2.5rem;
 text-align:center;
 background:#fbfcff;
 transition:.25s;
}
.ep-upload:hover{
 border-color:var(--ep-primary);
 background:#f4f8ff;
}
.ep-upload i{
 font-size:2.5rem;
 color:var(--ep-primary);
 margin-bottom:1rem;
}

/* ---------- STAT GRID ---------- */

/* Compact assessment score cards */
/* ---------- STAT GRID ---------- */

.ep-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.6rem;
    margin:1rem 0;
}

.ep-stat-card{
    padding:.65rem .5rem;
    border-radius:12px;
    text-align:center;
    min-height:70px;
    background:#F3F6FB;
    border:1px solid #E4EAF3;
}

.ep-stat-value{
    font-size:1.15rem;
    font-weight:700;
    line-height:1.1;
    margin-bottom:.2rem;
    color:#26364A;
}

.ep-stat-label{
    font-size:.72rem;
    line-height:1.2;
    color:#667085;
    font-weight:600;
}
/* ---------- WELCOME PANEL ---------- */

.ep-welcome{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
    border-radius:28px;
    padding:2rem;
    overflow:hidden;
    position:relative;
}

.ep-welcome h2,
.ep-welcome p{
    color:#fff;
}

.ep-welcome::after{
    content:"";
    position:absolute;
    right:-85px;
    top:-85px;
    width:240px;
    height:240px;
    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
            rgba(255,255,255,.20),
            rgba(255,255,255,.08) 55%,
            rgba(255,255,255,.03) 100%);
}

.ep-language-ribbon{
    position:absolute;
    top:22px;
    right:18px;
    z-index:5;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 22px 12px 28px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        rgba(255,255,255,.15)
    );

    backdrop-filter:blur(14px);

    border-left:1px solid rgba(255,255,255,.35);
    border-bottom:1px solid rgba(255,255,255,.25);

    border-radius:0 28px 0 28px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);
}



.ep-language-ribbon img{
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.7);
}

.ep-language-ribbon span{
    color:#fff;
    font-weight:700;
    letter-spacing:.03em;
}


/* =========================================================
   LANGUAGE RIBBON — MOBILE
   ========================================================= */

@media (max-width: 768px){

    .ep-language-ribbon{
        top:14px;
        right:12px;

        gap:7px;

        padding:8px 13px 8px 16px;

        border-radius:0 20px 0 20px;

        box-shadow:
            0 7px 20px rgba(0,0,0,.14);

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    .ep-language-ribbon img{
        width:22px;
        height:22px;

        border-width:1.5px;
    }

    .ep-language-ribbon span{
        font-size:.78rem;
        letter-spacing:.02em;
    }
}


/* Small phones */
@media (max-width:480px){

    .ep-language-ribbon{
        top:10px;
        right:8px;

        gap:5px;

        padding:6px 10px 6px 12px;

        border-radius:0 16px 0 16px;
    }

    .ep-language-ribbon img{
        width:20px;
        height:20px;
    }

    .ep-language-ribbon span{
        font-size:.7rem;
    }
}
/* ---------- Language Badge ---------- */

.ep-welcome{
    position:relative;
    overflow:hidden;
}

/* Decorative circle */
.ep-hero-flag{
    position:absolute;
    top:-70px;
    right:-70px;

    width:220px;
    height:220px;
    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;
    justify-content:center;
    align-items:center;

    pointer-events:none;
}

/* Flag inside the circle */
.ep-hero-flag img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;

    border:5px solid rgba(255,255,255,.75);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

    opacity:.95;
}

/* ---------- ACTIVITY FEED ---------- */

.ep-feed{
 display:flex;
 flex-direction:column;
 gap:1rem;
}
.ep-feed-item{
 display:flex;
 gap:1rem;
 align-items:flex-start;
 padding:1rem;
 background:#fff;
 border-radius:18px;
 box-shadow:var(--ep-shadow-xs);
}
.ep-feed-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:var(--ep-primary);
 margin-top:.35rem;
}

/* ---------- PROGRESS RING PLACEHOLDER ---------- */

.ep-ring{
    --progress:0%;

    width:160px;
    height:160px;
    border-radius:50%;

    background:
        conic-gradient(
            var(--ep-primary) 0 var(--progress),
            #e8eef7 var(--progress) 100%
        );

    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
}
.ep-ring-inner{
 width:122px;
 height:122px;
 background:#fff;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font:700 2rem var(--ep-font-title);
}

.ep-ring-inner,
.ep-ring-inner *{
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;

    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;

    cursor: default;
}

/* ---------- HOMEWORK CARD ---------- */

.ep-homework{
 border-left:6px solid var(--ep-warning);
 background:#fff;
 border-radius:18px;
 padding:1.2rem;
 box-shadow:var(--ep-shadow-sm);
}

/* ---------- RECORDING CARD ---------- */

.ep-recording{
 border-left:6px solid #ff6b35;
 background:#fff;
 border-radius:18px;
 padding:1.2rem;
 box-shadow:var(--ep-shadow-sm);
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:768px){
 .ep-stat-grid{
   grid-template-columns:1fr;
 }
 .ep-welcome{
   padding:1.5rem;
 }
 .ep-upload{
   padding:1.5rem;
 }
}

/* Base */
.ep-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    min-height:46px;
    padding:.8rem 1.35rem;
    border:none;
    border-radius:14px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:.25s;
    box-shadow:var(--ep-shadow-sm);
}

.ep-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--ep-shadow-lg);
}

.ep-btn:active{
    transform:scale(.97);
}

/* Sizes */
.ep-btn-xs{min-height:28px;padding:.3rem .6rem;font-size:.75rem;}
.ep-btn-sm{min-height:36px;padding:.55rem .9rem;font-size:.85rem;}
.ep-btn-lg{min-height:56px;padding:1rem 1.8rem;font-size:1.05rem;}
.ep-btn-xl{min-height:64px;padding:1.2rem 2.2rem;font-size:1.2rem;}

/* Shapes */
.ep-btn-round{width:52px;height:52px;padding:0;border-radius:50%;}
.ep-btn-pill{border-radius:999px;}
.ep-btn-block{display:flex;width:100%;}

/* Theme buttons */
.ep-btn-secondary{background:var(--ep-secondary);color:#fff;}
.ep-btn-success{background:var(--ep-success);color:#fff;}
.ep-btn-warning{background:var(--ep-warning);color:#fff;}
.ep-btn-danger{background:var(--ep-danger);color:#fff;}

.ep-btn-outline{
    background:#fff;
    border:2px solid var(--ep-primary);
    color:var(--ep-primary);
}
.ep-btn-outline:hover{
    background:var(--ep-primary);
    color:#fff;
}

.ep-btn-ghost{
    background:transparent;
    color:var(--ep-text);
    box-shadow:none;
}
.ep-btn-ghost:hover{
    background:#EEF4FF;
}

.ep-btn-soft{
    background:#EEF4FF;
    color:var(--ep-primary);
}

.ep-btn-gradient{
    color:#fff;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
}

/* Education buttons */

.ep-btn-ai{
    background:linear-gradient(135deg,#7C5CFF,#4F7CFF);
    color:#fff;
}

.ep-btn-reading{
    background:#EDF5FF;
    color:#3478F6;
}

.ep-btn-listening{
    background:#E8FCFF;
    color:#00A8CC;
}

.ep-btn-speaking{
    background:#FFF1EC;
    color:#FF6B35;
}

.ep-btn-podcast{
    background:#F3EDFF;
    color:#7B61FF;
}

.ep-btn-game{
    background:#EAFBF2;
    color:#20B26B;
}

.ep-btn-certificate{
    background:linear-gradient(135deg,#FFD95B,#F4B400);
    color:#6B4A00;
}

/* Floating Action */

.ep-fab{
    position:fixed;
    right:30px;
    bottom:30px;
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
    box-shadow:var(--ep-shadow-xl);
    z-index:999;
}

.ep-fab:hover{
    transform:translateY(-4px) scale(1.04);
}

/* Split */

.ep-btn-group{
    display:inline-flex;
    overflow:hidden;
    border-radius:14px;
    box-shadow:var(--ep-shadow-sm);
}

.ep-btn-group .ep-btn{
    border-radius:0;
    box-shadow:none;
}

.ep-btn-group .ep-btn:first-child{
    border-radius:14px 0 0 14px;
}

.ep-btn-group .ep-btn:last-child{
    border-radius:0 14px 14px 0;
}

/* Loading */

.ep-btn-loading{
    pointer-events:none;
    opacity:.8;
}

.ep-btn-loading::after{
    content:"";
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    animation:epSpin .8s linear infinite;
}

/* Notification badge */

.ep-btn-badge{
    position:relative;
}

.ep-btn-badge span{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:20px;
    height:20px;
    border-radius:999px;
    background:var(--ep-danger);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.65rem;
    font-weight:700;
}


/* DASHBOARD TILES */
.ep-tile{
 background:linear-gradient(180deg,#fff,#f8fbff);
 border-radius:24px;
 padding:1.5rem;
 box-shadow:var(--ep-shadow-md);
 position:relative;
 overflow:hidden;
}
.ep-tile::after{
 content:"";
 position:absolute;
 right:-30px;top:-30px;
 width:120px;height:120px;
 border-radius:50%;
 background:rgba(79,124,255,.08);
}
.ep-tile-icon{
 width:64px;height:64px;
 display:flex;align-items:center;justify-content:center;
 border-radius:18px;
 background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
 color:#fff;font-size:1.6rem;
 margin-bottom:1rem;
}
.ep-tile-value{
 font:700 2.2rem var(--ep-font-title);
 color:var(--ep-text);
}
.ep-tile-label{color:var(--ep-text-light);}
.ep-tile-change-up{color:var(--ep-success);}
.ep-tile-change-down{color:var(--ep-danger);}

/* COURSE CARD */
.ep-course-card{
 background:#fff;
 border-radius:24px;
 overflow:hidden;
 box-shadow:var(--ep-shadow-md);
}
.ep-course-banner{
 height:140px;
 background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
}
.ep-course-body{padding:1.4rem;}
.ep-course-footer{
 padding:1rem 1.4rem;
 border-top:1px solid var(--ep-border);
 display:flex;justify-content:space-between;align-items:center;
}

/* LESSON CARD */
.ep-lesson-card{
 border-left:6px solid var(--ep-primary);
 background:#fff;
 border-radius:18px;
 padding:1.3rem;
 box-shadow:var(--ep-shadow-sm);
}

/* AI PANEL */
.ep-ai-panel{
 background:linear-gradient(135deg,#6E5BFF,#4F7CFF);
 color:#fff;
 border-radius:24px;
 padding:2rem;
 position:relative;
 overflow:hidden;
}
.ep-ai-panel::before{
 content:"";
 position:absolute;
 inset:auto -60px -60px auto;
 width:180px;height:180px;
 border-radius:50%;
 background:rgba(255,255,255,.08);
}
.ep-ai-title,.ep-ai-panel p{color:#fff;}



/* CHAT */
.ep-chat{
 display:flex;
 flex-direction:column;
 gap:1rem;
}
.ep-chat-msg{
 max-width:75%;
 padding:1rem 1.2rem;
 border-radius:20px;
}
.ep-chat-ai{
 background:#EEF4FF;
 color:var(--ep-text);
 border-bottom-left-radius:6px;
}
.ep-chat-user{
 align-self:flex-end;
 background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
 color:#fff;
 border-bottom-right-radius:6px;
}

/* READING */
.ep-reading{
 background:#fff;
 border-radius:24px;
 padding:2rem;
 line-height:1.8;
 box-shadow:var(--ep-shadow-md);
}
.ep-reading-toolbar{
 display:flex;
 gap:.75rem;
 margin-bottom:1.5rem;
}

/* LISTENING PLAYER */
.ep-player{
 background:#fff;
 border-radius:22px;
 padding:1.4rem;
 box-shadow:var(--ep-shadow-sm);
}
.ep-player-controls{
 display:flex;
 align-items:center;
 gap:1rem;
}

/* SPEAKING */
.ep-recorder{
 background:#fff;
 border-radius:24px;
 padding:2rem;
 text-align:center;
 box-shadow:var(--ep-shadow-md);
}
.ep-record-button{
 width:90px;height:90px;
 border-radius:50%;
 background:linear-gradient(135deg,#ff5f6d,#ff2d55);
 color:#fff;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:2rem;
 margin:auto;
}

/* FLASHCARD */
.ep-flashcard{
 perspective:1000px;
}
.ep-flashcard-inner{
 background:#fff;
 border-radius:24px;
 min-height:260px;
 padding:2rem;
 box-shadow:var(--ep-shadow-md);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:2rem;
 font-weight:700;
}

/* CEFR BADGE */
.ep-cefr{
 display:inline-flex;
 padding:.45rem .9rem;
 border-radius:999px;
 background:linear-gradient(135deg,#5B8CFF,#7868FF);
 color:#fff;
 font-weight:700;
}

.ep-cefr-white{
    display:inline-flex;
    align-items:center;

    padding:.45rem .9rem;

    border-radius:999px;

    background:#fff;

    color:#4F7CFF;

    font-weight:700;

    box-shadow:
        0 8px 18px rgba(0,0,0,.12);
}
/* XP BAR */
.ep-xp{
 height:12px;
 border-radius:999px;
 overflow:hidden;
 background:#E8EEF7;
}
.ep-xp-fill{
 height:100%;
 background:linear-gradient(90deg,#FDAE2D,#F49229);
}

/* ACHIEVEMENT */
.ep-achievement{
 display:flex;
 align-items:center;
 gap:1rem;
 padding:1rem;
 border-radius:18px;
 background:#FFF9E8;
}
.ep-achievement i{
 font-size:2rem;
 color:#F5B301;
}


/*==============================
 SIDEBAR SEARCH
==============================*/

.ep-sidebar-search{
    position:relative;
    margin:1rem;
}

.ep-sidebar-search input{
    width:100%;
    border:none;
    border-radius:16px;
    padding:.9rem 1rem .9rem 2.8rem;
    background:#F5F8FE;
}

.ep-sidebar-search i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--ep-text-muted);
}

/*==============================
 MENU GROUPS
==============================*/

.ep-menu-title{
    font-size:.72rem;
    font-weight:700;
    color:var(--ep-text-muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:1.6rem 1rem .6rem;
}

.ep-menu-group{
    margin-bottom:.5rem;
}

.ep-menu-parent{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ep-menu-arrow{
    transition:transform .25s;
}

.ep-menu-group.open .ep-menu-arrow{
    transform:rotate(90deg);
}

.ep-submenu{
    display:none;
    padding-left:1.2rem;
    margin-top:.35rem;
}

.ep-menu-group.open .ep-submenu{
    display:block;
}

.ep-submenu .ep-menu-item{
    height:42px;
    font-size:.92rem;
}

/*==============================
 SIDEBAR BADGES
==============================*/

.ep-menu-badge{
    margin-left:auto;
    min-width:22px;
    height:22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ep-primary);
    color:#fff;
    font-size:.7rem;
    font-weight:700;
}

/*==============================
 FAVORITES
==============================*/

.ep-favorite{
    color:#F5B301;
}

/*==============================
 USER PANEL
==============================*/

.ep-sidebar-user{
    margin-top:auto;
    padding:1rem;
    border-top:1px solid var(--ep-border);
    background:linear-gradient(to bottom,#fff,#fafcff);
}

.ep-sidebar-user-card{
    display:flex;
    align-items:center;
    gap:1rem;
}

.ep-sidebar-user-card img{
    width:54px;
    height:54px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:var(--ep-shadow-sm);
}

.ep-sidebar-user-name{
    font-weight:700;
}

.ep-sidebar-user-role{
    font-size:.85rem;
    color:var(--ep-text-light);
}

/*==============================
 QUICK ACTIONS
==============================*/

.ep-quick-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.6rem;
    margin-top:1rem;
}

.ep-quick-action{
    aspect-ratio:1;
    border-radius:16px;
    background:#F5F8FE;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.ep-quick-action:hover{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
}

/*==============================
 TOPBAR SEARCH
==============================*/

.ep-top-search{
    width:340px;
    position:relative;
}

.ep-top-search input{
    width:100%;
    border:none;
    border-radius:999px;
    padding:.85rem 1rem .85rem 2.8rem;
    background:#fff;
    box-shadow:var(--ep-shadow-xs);
}

.ep-top-search i{
    position:absolute;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--ep-text-muted);
}

/*==============================
 COMMAND PALETTE
==============================*/

.ep-command{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .8rem;
    border-radius:14px;
    background:#fff;
    box-shadow:var(--ep-shadow-xs);
    color:var(--ep-text-light);
    cursor:pointer;
}

.ep-command kbd{
    margin-left:auto;
    background:#EEF3FF;
    color:var(--ep-primary);
    padding:.2rem .5rem;
    border-radius:8px;
    font-size:.72rem;
}

/*==============================
 NOTIFICATION PANEL
==============================*/

.ep-notification{
    display:flex;
    gap:.9rem;
    padding:.9rem;
    border-radius:16px;
}

.ep-notification:hover{
    background:#F7FAFF;
}

.ep-notification-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#EEF4FF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ep-primary);
}

.ep-notification-title{
    font-weight:600;
}

.ep-notification-time{
    color:var(--ep-text-muted);
    font-size:.8rem;
}

/*==============================
 MOBILE
==============================*/

@media(max-width:992px){

.ep-top-search{
    display:none;
}

.ep-command{
    display:none;
}

.ep-sidebar-user{
    padding-bottom:2rem;
}

}


/*==================================================

    EasyPeasy UI Framework
    Version 1.0

    ANIMATIONS.CSS

==================================================*/


/****************************************************

GLOBAL TRANSITIONS

****************************************************/

*{

    transition-property:
        background-color,
        color,
        border-color,
        box-shadow,
        transform,
        opacity;

    transition-duration:var(--ep-normal-speed);

    transition-timing-function:var(--ep-ease);

}


/****************************************************

PAGE FADE

****************************************************/

.ep-page-enter{

    animation:epFadePage .45s var(--ep-ease);

}

@keyframes epFadePage{

    from{

        opacity:0;
        transform:translateY(14px);

    }

    to{

        opacity:1;
        transform:none;

    }

}



/****************************************************

SLIDE UP

****************************************************/

.ep-slide-up{

    animation:epSlideUp .45s var(--ep-ease);

}

@keyframes epSlideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/****************************************************

SLIDE LEFT

****************************************************/

.ep-slide-left{

    animation:epSlideLeft .35s;

}

@keyframes epSlideLeft{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/****************************************************

SLIDE RIGHT

****************************************************/

.ep-slide-right{

    animation:epSlideRight .35s;

}

@keyframes epSlideRight{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/****************************************************

ZOOM

****************************************************/

.ep-zoom{

    animation:epZoom .35s;

}

@keyframes epZoom{

    from{

        opacity:0;

        transform:scale(.94);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/****************************************************

POP

****************************************************/

.ep-pop{

    animation:epPop .45s;

}

@keyframes epPop{

0%{

transform:scale(.8);

opacity:0;

}

60%{

transform:scale(1.06);

}

100%{

transform:scale(1);

opacity:1;

}

}



/****************************************************

CARD LIFT

****************************************************/

.ep-card{

    transition:
        transform .25s,
        box-shadow .25s;

}

.ep-card:hover{

    transform:

        translateY(-6px);

}



/****************************************************

BUTTON

****************************************************/

.ep-btn{

    transition:.25s;

}

.ep-btn:hover{

    transform:translateY(-2px);

}

.ep-btn:active{

    transform:scale(.96);

}



/****************************************************

ICON BUTTON

****************************************************/

.ep-btn-icon:hover i{

    transform:scale(1.15) rotate(3deg);

}



/****************************************************

MENU

****************************************************/

.ep-menu-item{

    transition:.25s;

}

.ep-menu-item:hover{

    transform:translateX(5px);

}



/****************************************************

PROFILE

****************************************************/

.ep-profile img{

    transition:.25s;

}

.ep-profile:hover img{

    transform:rotate(6deg);

}



/****************************************************

SPIN

****************************************************/

.ep-spin{

    animation:epSpin 1s linear infinite;

}

@keyframes epSpin{

to{

transform:rotate(360deg);

}

}



/****************************************************

PULSE

****************************************************/

.ep-pulse{

animation:epPulse 1.4s infinite;

}

@keyframes epPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}



/****************************************************

FLOAT

****************************************************/

.ep-float{

animation:epFloat 4s ease-in-out infinite;

}

@keyframes epFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}



/****************************************************

SHAKE

****************************************************/

.ep-shake{

animation:epShake .45s;

}

@keyframes epShake{

0%,100%{

transform:none;

}

20%{

transform:translateX(-6px);

}

40%{

transform:translateX(6px);

}

60%{

transform:translateX(-4px);

}

80%{

transform:translateX(4px);

}

}



/****************************************************

SUCCESS

****************************************************/

.ep-success-pop{

animation:epSuccess .55s;

}

@keyframes epSuccess{

0%{

transform:scale(.4);

opacity:0;

}

70%{

transform:scale(1.1);

}

100%{

transform:scale(1);

opacity:1;

}

}



/****************************************************

NOTIFICATION

****************************************************/

.ep-toast-enter{

animation:epToast .45s;

}

@keyframes epToast{

from{

opacity:0;

transform:translateX(100%);

}

to{

opacity:1;

transform:none;

}

}



/****************************************************

SKELETON

****************************************************/

.ep-skeleton{

background:

linear-gradient(

90deg,

#eceff4 25%,

#f8f9fb 50%,

#eceff4 75%

);

background-size:300% 100%;

animation:epSkeleton 1.4s infinite;

border-radius:10px;

}

@keyframes epSkeleton{

0%{

background-position:100% 0;

}

100%{

background-position:-100% 0;

}

}



/****************************************************

LOADING DOTS

****************************************************/

.ep-loading span{

display:inline-block;

animation:epDots 1.4s infinite;

}

.ep-loading span:nth-child(2){

animation-delay:.2s;

}

.ep-loading span:nth-child(3){

animation-delay:.4s;

}

@keyframes epDots{

0%,80%,100%{

opacity:.2;

transform:translateY(0);

}

40%{

opacity:1;

transform:translateY(-5px);

}

}



/****************************************************

STAGGER

****************************************************/

.ep-delay-1{

animation-delay:.1s;

}

.ep-delay-2{

animation-delay:.2s;

}

.ep-delay-3{

animation-delay:.3s;

}

.ep-delay-4{

animation-delay:.4s;

}

.ep-delay-5{

animation-delay:.5s;

}



/****************************************************

DISABLE ANIMATIONS

****************************************************/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

}

}


/*==================================================

    EasyPeasy UI Framework
    Version 1.0

    VARIABLES.CSS

==================================================*/

:root{

/*==================================================
 COLORS
==================================================*/

--ep-primary:#4F7CFF;
--ep-primary-light:#7FA2FF;
--ep-primary-dark:#2D5BFF;

--ep-secondary:#7C5CFF;

--ep-accent:#16C7B7;

--ep-success:#28C76F;
--ep-warning:#FFB547;
--ep-danger:#EA5455;
--ep-info:#00CFE8;


/*==================================================
 BACKGROUNDS
==================================================*/

--ep-body:#F4F7FC;

--ep-sidebar:#FFFFFF;

--ep-header:rgba(255,255,255,.72);

--ep-card:#FFFFFF;

--ep-dropdown:#FFFFFF;

--ep-modal:#FFFFFF;

--ep-footer:#FFFFFF;

--ep-overlay:rgba(18,27,52,.45);


/*==================================================
 TEXT
==================================================*/

--ep-text:#24324B;

--ep-text-light:#64748B;

--ep-text-muted:#94A3B8;

--ep-text-disabled:#CBD5E1;

--ep-text-white:#FFFFFF;


/*==================================================
 BORDERS
==================================================*/

--ep-border:#E8EEF7;

--ep-border-light:#F2F5FA;


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

--ep-sidebar-width:280px;

--ep-sidebar-collapsed:84px;


/*==================================================
 HEADER
==================================================*/

--ep-header-height:76px;


/*==================================================
 FOOTER
==================================================*/

--ep-footer-height:60px;


/*==================================================
 RADIUS
==================================================*/

--ep-radius-xs:4px;

--ep-radius-sm:8px;

--ep-radius-md:12px;

--ep-radius-lg:18px;

--ep-radius-xl:24px;

--ep-radius-xxl:32px;

--ep-radius-pill:999px;


/*==================================================
 SPACING
==================================================*/

--ep-space-2:2px;

--ep-space-4:4px;

--ep-space-6:6px;

--ep-space-8:8px;

--ep-space-10:10px;

--ep-space-12:12px;

--ep-space-16:16px;

--ep-space-20:20px;

--ep-space-24:24px;

--ep-space-30:30px;

--ep-space-40:40px;

--ep-space-50:50px;

--ep-space-60:60px;


/*==================================================
 FONTS
==================================================*/

--ep-font-main:"Inter",sans-serif;

--ep-font-title:"Poppins",sans-serif;

--ep-font-mono:"JetBrains Mono",monospace;


/*==================================================
 FONT SIZES
==================================================*/

--ep-font-xs:.75rem;

--ep-font-sm:.875rem;

--ep-font-md:1rem;

--ep-font-lg:1.125rem;

--ep-font-xl:1.35rem;

--ep-font-2xl:1.7rem;

--ep-font-3xl:2.25rem;

--ep-font-4xl:3rem;


/*==================================================
 FONT WEIGHTS
==================================================*/

--ep-light:300;

--ep-normal:400;

--ep-medium:500;

--ep-semibold:600;

--ep-bold:700;


/*==================================================
 SHADOWS
==================================================*/

--ep-shadow-xs:
0 2px 6px rgba(20,40,80,.05);

--ep-shadow-sm:
0 5px 15px rgba(20,40,80,.07);

--ep-shadow-md:
0 10px 30px rgba(20,40,80,.09);

--ep-shadow-lg:
0 18px 45px rgba(20,40,80,.11);

--ep-shadow-xl:
0 25px 60px rgba(20,40,80,.13);

--ep-shadow-glow:
0 0 30px rgba(79,124,255,.25);


/*==================================================
 TRANSITIONS
==================================================*/

--ep-fast:.15s;

--ep-normal-speed:.25s;

--ep-slow:.40s;


/*==================================================
 ICONS
==================================================*/

--ep-icon-sm:16px;

--ep-icon-md:20px;

--ep-icon-lg:26px;

--ep-icon-xl:34px;


/*==================================================
 Z INDEX
==================================================*/

--ep-z-sidebar:900;

--ep-z-header:950;

--ep-z-dropdown:1000;

--ep-z-modal:1100;

--ep-z-toast:1200;

--ep-z-loader:1300;


/*==================================================
 GLASS
==================================================*/

--ep-glass-blur:20px;


/*==================================================
 CONTAINERS
==================================================*/

--ep-content-max:1600px;


/*==================================================
 AVATAR
==================================================*/

--ep-avatar-sm:34px;

--ep-avatar-md:44px;

--ep-avatar-lg:60px;

--ep-avatar-xl:90px;


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

--ep-button-height:44px;

--ep-button-radius:14px;


/*==================================================
 INPUTS
==================================================*/

--ep-input-height:46px;


/*==================================================
 CARDS
==================================================*/

--ep-card-radius:22px;

--ep-card-padding:24px;


/*==================================================
 DROPDOWNS
==================================================*/

--ep-dropdown-radius:18px;


/*==================================================
 CHARTS
==================================================*/

--ep-chart-height:320px;


/*==================================================
 BADGES
==================================================*/

--ep-badge-radius:999px;


/*==================================================
 ANIMATION CURVES
==================================================*/

--ep-ease:cubic-bezier(.4,0,.2,1);

--ep-bounce:cubic-bezier(.175,.885,.32,1.275);

}


/*==================================================
AUTHENTICATION
==================================================*/

.ep-auth{

background:
radial-gradient(circle at top right,
#eef4ff,
transparent 40%),
var(--ep-body);

}

.ep-auth-panel .ep-card{

box-shadow:var(--ep-shadow-xl);

}

.ep-auth-preview{

opacity:.93;

transform:scale(.94);

pointer-events:none;

}

.ep-auth-logo{

font-size:3rem;

color:var(--ep-primary);

}


/*==================================================
 STUDENT ACTIVITY WIDGET
==================================================*/

.ep-widget-body{

    justify-content:center;

}

.ep-widget-body .ep-feature-icon{

    margin-left:auto;

    margin-right:auto;

}




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

.ep-btn:disabled,
.ep-btn[disabled],
button:disabled,
button[disabled] {
    background: #dfe3ea !important;
    background-image: none !important;
    color: #8a919d !important;
    border-color: #dfe3ea !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    filter: grayscale(0.15);
}

/* Disabled primary */
.ep-btn-primary:disabled,
.ep-btn-primary[disabled] {
    background: #dfe3ea !important;
    color: #8a919d !important;
    box-shadow: none !important;
}

/* Kill the primary hover effect */
.ep-btn-primary:disabled:hover,
.ep-btn-primary[disabled]:hover {
    background: #dfe3ea !important;
    color: #8a919d !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}




/* =========================================================
   EASY PEASY — PEPPY & COLOURFUL SIDEBAR
   ========================================================= */

/* ---------- SIDEBAR BACKGROUND ---------- */

.ep-sidebar{
    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(255,190,92,.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 35%,
            rgba(111,89,255,.12),
            transparent 26%
        ),
        radial-gradient(
            circle at 20% 85%,
            rgba(32,201,151,.12),
            transparent 25%
        ),
        #ffffff;

    border-right:1px solid rgba(79,124,255,.10);

    box-shadow:
        8px 0 30px rgba(60,80,140,.08);
}


/* ---------- LOGO ---------- */

.ep-logo{
    background:
        linear-gradient(
            135deg,
            #FFF7E8 0%,
            #F5F1FF 48%,
            #EAF7FF 100%
        );

    border-bottom:1px solid rgba(79,124,255,.10);
}

.ep-logo i{
    color:#FFB347;

    filter:
        drop-shadow(0 4px 7px rgba(255,179,71,.30));

    transition:
        transform .3s ease,
        color .3s ease;
}

.ep-logo:hover i{
    transform:rotate(-8deg) scale(1.08);
    color:#FF8A3D;
}

.ep-logo span{
    background:
        linear-gradient(
            90deg,
            #5B5FEF,
            #8B5CF6,
            #EC4899
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    font-weight:800;
}


/* ---------- MENU AREA ---------- */

.ep-menu{
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(79,124,255,.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 55%,
            rgba(255,179,71,.045),
            transparent 25%
        );
}


/* ---------- NORMAL MENU ITEMS ---------- */

.ep-menu-item,
.ep-menu-parent{
    position:relative;

    color:#536174;

    border:1px solid transparent;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* little coloured indicator */


.ep-menu-item.ep-active::before{
    left:0;

    width:5px;
    height:24px;

    top:50%;
    transform:translateY(-50%);

    background:#FFD166;

    border-radius:0 6px 6px 0;

    box-shadow:
        0 0 10px rgba(255,209,102,.55);
}

@media(max-width:576px){

    .ep-menu{
        padding:16px 12px;
    }

    .ep-menu-item,
    .ep-menu-parent{
        min-height:50px;
        padding-left:14px;
        padding-right:14px;
    }

    .ep-menu-item > i,
    .ep-menu-left > i{
        width:32px;
        height:32px;
    }

    .ep-submenu{
        margin-left:12px;
        padding-left:8px;
    }
}


/* ---------- ICONS ---------- */

.ep-menu-item > i,
.ep-menu-left > i{
    color:#718096;

    transition:
        color .22s ease,
        transform .22s ease,
        background .22s ease;
}


/* ---------- HOVER ---------- */

.ep-menu-item:hover,
.ep-menu-parent:hover{
    transform:translateX(4px);

    color:#4F5FD7;

    background:
        linear-gradient(
            90deg,
            rgba(79,124,255,.09),
            rgba(139,92,246,.055)
        );

    border-color:rgba(79,124,255,.10);

    box-shadow:
        0 6px 18px rgba(79,124,255,.08);
}

.ep-menu-item:hover::before,
.ep-menu-parent:hover::before{
    height:26px;
    background:#4F7CFF;
}

.ep-menu-item:hover > i,
.ep-menu-parent:hover .ep-menu-left > i{
    color:#4F7CFF;
    transform:scale(1.12);
}


/* ---------- ACTIVE ITEM ---------- */

.ep-menu-item.ep-active{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #5B63F6 0%,
            #7565F5 45%,
            #9B5DE5 100%
        );

    border:none;

    box-shadow:
        0 10px 24px rgba(91,99,246,.28),
        inset 0 1px 0 rgba(255,255,255,.25);

    transform:translateX(3px);
}

.ep-menu-item.ep-active::before{
    left:-2px;

    width:5px;
    height:32px;

    background:#FFD166;

    box-shadow:
        0 0 10px rgba(255,209,102,.55);
}

.ep-menu-item.ep-active > i{
    color:#fff;

    filter:
        drop-shadow(0 2px 5px rgba(0,0,0,.15));
}


/* ---------- COLOURFUL ICON BUBBLE EFFECT ---------- */

.ep-menu-item:not(.ep-active) > i,
.ep-menu-left > i{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:#F1F4FA;
}


/* individual menu colours */

.ep-menu-item[href*="CLASSPAGE"] > i,
.ep-menu-item[href*="WORKSPACE"] > i{
    background:#E8F0FF;
    color:#4F7CFF;
}

.ep-menu-item[href*="TEST"] > i{
    background:#FFF0E6;
    color:#FF8A3D;
}

.ep-menu-item[href*="NOTEPAD"] > i{
    background:#FFF7D9;
    color:#E5A900;
}

.ep-menu-item[href*="IRREGULAR"] > i{
    background:#E9F9F2;
    color:#20A879;
}

.ep-menu-item[href*="CHATBOT"] > i{
    background:#F0E9FF;
    color:#8B5CF6;
}

.ep-menu-item[href*="POPQUIZ"] > i{
    background:#FFF0F3;
    color:#EC4899;
}

.ep-menu-item[href*="LIBRARY"] > i{
    background:#E8F7FF;
    color:#0EA5E9;
}

.ep-menu-item[href*="LANGUAGELAB"] > i{
    background:#EAFBF4;
    color:#10B981;
}

.ep-menu-item[href*="wordcloud"] > i{
    background:#F1ECFF;
    color:#7C5CFC;
}


/* ---------- SUBMENUS ---------- */

.ep-submenu{
    margin-left:16px;

    padding-left:10px;

    border-left:
        2px dashed rgba(79,124,255,.18);
}

.ep-submenu .ep-menu-item{
    min-height:44px;

    margin-bottom:4px;

    padding-left:12px;

    border-radius:13px;

    font-size:.94rem;
}

.ep-submenu .ep-menu-item > i{
    width:30px;
    height:30px;

    border-radius:9px;

    font-size:15px;
}


/* submenu hover */

.ep-submenu .ep-menu-item:hover{
    transform:translateX(3px);

    background:
        linear-gradient(
            90deg,
            rgba(255,190,92,.10),
            rgba(79,124,255,.06)
        );
}


/* ---------- GROUP PARENTS ---------- */

.ep-menu-parent{
    font-weight:700;
}

.ep-menu-parent .ep-menu-arrow{
    color:#94A3B8;

    transition:
        transform .25s ease,
        color .25s ease;
}

.ep-menu-parent:hover .ep-menu-arrow{
    color:#4F7CFF;
}

.ep-menu-group.ep-open > .ep-menu-parent{
    background:
        linear-gradient(
            90deg,
            rgba(79,124,255,.075),
            rgba(139,92,246,.045)
        );

    color:#4F5FD7;
}

.ep-menu-group.ep-open > .ep-menu-parent::before{
    height:26px;
    background:#8B5CF6;
}

.ep-menu-group.ep-open > .ep-menu-parent .ep-menu-arrow{
    color:#8B5CF6;
}


/* ---------- BADGES ---------- */

.ep-menu-right .ep-badge{
    border:none;

    background:
        linear-gradient(
            135deg,
            #FFB347,
            #FF8A3D
        );

    color:#fff;

    box-shadow:
        0 4px 10px rgba(255,138,61,.25);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ep-menu-item:hover .ep-badge{
    transform:scale(1.12) rotate(-2deg);

    box-shadow:
        0 5px 14px rgba(255,138,61,.30);
}

.ep-menu-item.ep-active .ep-badge{
    background:#FFD166;
    color:#6B4F00;
}


/* ---------- ACTIVE CLASS GROUP ---------- */

#classMenuGroup{
    background:
        linear-gradient(
            135deg,
            rgba(79,124,255,.10),
            rgba(139,92,246,.07),
            rgba(32,201,151,.06)
        );

    border:
        1px solid rgba(79,124,255,.13);

    box-shadow:
        0 10px 28px rgba(79,124,255,.09);
}

#classMenuGroup .ep-menu-left i{
    background:
        linear-gradient(
            135deg,
            #4F7CFF,
            #7B61FF
        );

    color:#fff;

    box-shadow:
        0 7px 16px rgba(79,124,255,.28);
}

#classMenuGroup .ep-menu-arrow{
    color:#6E5BFF;
}


/* ---------- SCROLLBAR ---------- */

.ep-sidebar .ep-menu::-webkit-scrollbar{
    width:6px;
}

.ep-sidebar .ep-menu::-webkit-scrollbar-track{
    background:transparent;
}

.ep-sidebar .ep-menu::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #A78BFA,
            #60A5FA
        );

    border-radius:999px;
}


/* ---------- COLLAPSED SIDEBAR ---------- */

.ep-sidebar.ep-collapsed .ep-menu-item:hover,
.ep-sidebar.ep-collapsed .ep-menu-parent:hover{
    transform:scale(1.05);
}

.ep-sidebar.ep-collapsed .ep-menu-item > i,
.ep-sidebar.ep-collapsed .ep-menu-left > i{
    width:38px;
    height:38px;
}


/* ---------- MOBILE ---------- */

@media(max-width:992px){

    .ep-sidebar{
        box-shadow:
            12px 0 40px rgba(40,55,100,.18);
    }

    .ep-menu-item:hover,
    .ep-menu-parent:hover{
        transform:none;
    }

    .ep-menu-item.ep-active{
        transform:none;
    }
}


/* ---------- REDUCED MOTION ---------- */

@media(prefers-reduced-motion:reduce){

    .ep-menu-item,
    .ep-menu-parent,
    .ep-menu-item > i,
    .ep-menu-left > i{
        transition:none;
    }
}

/* =========================================================
   HEADER — ALWAYS ABOVE PAGE CONTENT
   ========================================================= */

.ep-header{
    position:relative !important;
    z-index:9500 !important;
    isolation:isolate;
}

.ep-main{
    position:relative;
    z-index:1;
}

.ep-content{
    position:relative;
    z-index:1;
}

/* Hero/background images must never cover the header */
.ep-hero-background,
.ep-hero-background-faded{
    position:relative;
    z-index:1;
}


/* =========================================================
   SIDEBAR — HOME ICON
   ========================================================= */

.ep-menu-item i.bi-house,
.ep-menu-item i.bi-house-door-fill{
    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 36px;

    border-radius:11px;

    background:linear-gradient(
        135deg,
        #EEF4FF 0%,
        #DDE8FF 100%
    );

    color:#4F7CFF;

    font-size:18px;

    box-shadow:
        0 3px 8px rgba(79,124,255,.14),
        inset 0 1px 0 rgba(255,255,255,.8);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* Active Home */

.ep-menu-item.ep-active i.bi-house,
.ep-menu-item.ep-active i.bi-house-door-fill{
    background:linear-gradient(
        135deg,
        #4F7CFF,
        #6E5BFF
    );

    color:#fff;

    box-shadow:
        0 6px 16px rgba(79,124,255,.30),
        inset 0 1px 0 rgba(255,255,255,.25);

    transform:translateY(-1px);
}


/* Hover */

.ep-menu-item:hover i.bi-house,
.ep-menu-item:hover i.bi-house-door-fill{
    transform:translateY(-1px) scale(1.04);
}


.ep-content .ep-stat-card{
    display:flex;
    flex-direction:column;
    justify-content:center !important;
    align-items:center;
    gap:0;
}

.ep-content .ep-stat-card i{
    margin-bottom:6px !important;
}

.ep-content .ep-stat-card h2{
    margin:0 0 3px 0 !important;
    line-height:1 !important;
}

.ep-content .ep-stat-card p{
    margin:0 !important;
    line-height:1.2 !important;
}


/* =========================================================
   PEPPY ACTIVITY CARDS
   Bright, playful, colourful EasyPeasy treatment
   Scope: only quick/activity cards
   ========================================================= */

.ep-quick-card.ep-activity-card{
    position:relative;
    min-height:145px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.15rem;

    padding:1.25rem 1rem 1.15rem;

    border-radius:24px;
    border:2px solid transparent;

    color:#24324A;
    text-align:center;

    box-shadow:
        0 10px 24px rgba(60,80,120,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    transform:translateY(0) rotate(0deg);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

/* Give the whole card a friendly "sticker" feel */
.ep-quick-card.ep-activity-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    background:
        radial-gradient(circle at 15% 15%,rgba(255,255,255,.85),transparent 24%),
        radial-gradient(circle at 90% 85%,rgba(255,255,255,.55),transparent 28%);
    pointer-events:none;
    z-index:0;
}

/* Small playful colour blob */
.ep-quick-card.ep-activity-card::after{
    content:"";
    position:absolute;
    width:95px;
    height:95px;
    right:-28px;
    bottom:-30px;
    border-radius:50%;
    opacity:.35;
    pointer-events:none;
    z-index:0;
}

/* Keep all real content above decoration */
.ep-quick-card.ep-activity-card > *{
    position:relative;
    z-index:2;
}

/* Main activity icon */
.ep-quick-card.ep-activity-card > i:not(.ep-activity-watermark){
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 0 .25rem;

    border-radius:17px;
    font-size:1.55rem !important;

    color:#fff;

    box-shadow:
        0 8px 16px rgba(50,70,100,.16),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition:transform .22s ease;
}

/* Activity name */
.ep-quick-card.ep-activity-card{
    font-family:var(--ep-font-main);
    font-weight:800;
    font-size:.98rem;
    letter-spacing:-.01em;
}

/* Large watermark becomes a soft hand-drawn background element */
.ep-quick-card.ep-activity-card .ep-activity-watermark{
    right:-4px;
    bottom:-10px;
    font-size:5.2rem;

    opacity:.11;
    transform:rotate(-14deg);

    filter:none;
    text-shadow:none;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

/* Hover = lift + tiny playful rotation */
.ep-quick-card.ep-activity-card:hover{
    transform:translateY(-7px) rotate(-1deg);
    box-shadow:
        0 18px 34px rgba(60,80,120,.17),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ep-quick-card.ep-activity-card:hover > i:not(.ep-activity-watermark){
    transform:translateY(-2px) rotate(4deg) scale(1.06);
}

.ep-quick-card.ep-activity-card:hover .ep-activity-watermark{
    transform:rotate(-14deg) scale(1.12);
    opacity:.17;
}

/* =========================================================
   COLOUR FAMILIES
   ========================================================= */

/* Vocabulary — sunny orange / yellow */
.ep-quick-card.ep-card-premium-gold{
    background:linear-gradient(145deg,#FFF9E8 0%,#FFF1BF 100%);
    border-color:#FFD45A;
    box-shadow:
        0 10px 26px rgba(245,177,45,.18),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ep-quick-card.ep-card-premium-gold::after{
    background:#FFB52E;
}

.ep-quick-card.ep-card-premium-gold > i:not(.ep-activity-watermark){
    background:linear-gradient(145deg,#FFB52E,#F28C28);
}

.ep-quick-card.ep-card-premium-gold .ep-activity-watermark{
    color:#F29B24;
}

/* Grammar — fresh green / mint */
.ep-quick-card.ep-card-premium-green{
    background:linear-gradient(145deg,#ECFFF6 0%,#D2F7E8 100%);
    border-color:#54D6A0;
    box-shadow:
        0 10px 26px rgba(39,190,133,.17),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ep-quick-card.ep-card-premium-green::after{
    background:#27C98A;
}

.ep-quick-card.ep-card-premium-green > i:not(.ep-activity-watermark){
    background:linear-gradient(145deg,#27C98A,#13A873);
}

.ep-quick-card.ep-card-premium-green .ep-activity-watermark{
    color:#16B57A;
}

/* Language practice — coral / pink */
.ep-quick-card.ep-card-premium-crimson{
    background:linear-gradient(145deg,#FFF0F2 0%,#FFD8DE 100%);
    border-color:#FF8291;
    box-shadow:
        0 10px 26px rgba(235,77,101,.17),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ep-quick-card.ep-card-premium-crimson::after{
    background:#FF6377;
}

.ep-quick-card.ep-card-premium-crimson > i:not(.ep-activity-watermark){
    background:linear-gradient(145deg,#FF6377,#E83D5A);
}

.ep-quick-card.ep-card-premium-crimson .ep-activity-watermark{
    color:#E94A63;
}

/* General / Language Lab — electric blue */
.ep-quick-card.ep-card-premium{
    background:linear-gradient(145deg,#EEF5FF 0%,#DCE8FF 100%);
    border-color:#79A0FF;
    box-shadow:
        0 10px 26px rgba(79,124,255,.16),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ep-quick-card.ep-card-premium::after{
    background:#5B82FF;
}

.ep-quick-card.ep-card-premium > i:not(.ep-activity-watermark){
    background:linear-gradient(145deg,#5B82FF,#4267E8);
}

.ep-quick-card.ep-card-premium .ep-activity-watermark{
    color:#4F7CFF;
}

/* Aurora cards — playful purple */
.ep-quick-card.ep-card-premium-aurora{
    background:linear-gradient(145deg,#F7F0FF 0%,#EBDFFF 100%);
    border-color:#B58AFF;
    box-shadow:
        0 10px 26px rgba(137,91,220,.16),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ep-quick-card.ep-card-premium-aurora::after{
    background:#B06CFF;
}

.ep-quick-card.ep-card-premium-aurora > i:not(.ep-activity-watermark){
    background:linear-gradient(145deg,#A66BFF,#7850D8);
}

.ep-quick-card.ep-card-premium-aurora .ep-activity-watermark{
    color:#9B62E8;
}

/* =========================================================
   BADGE INSIDE ACTIVITY CARDS
   ========================================================= */

.ep-quick-card.ep-activity-card .ep-badge{
    margin-top:.25rem;
    padding:.28rem .65rem;
    font-size:.68rem;
    box-shadow:0 4px 10px rgba(60,80,120,.10);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:576px){
    .ep-quick-card.ep-activity-card{
        min-height:128px;
        padding:1rem .75rem;
        border-radius:20px;
    }

    .ep-quick-card.ep-activity-card > i:not(.ep-activity-watermark){
        width:46px;
        height:46px;
        font-size:1.35rem !important;
        border-radius:15px;
    }

    .ep-quick-card.ep-activity-card .ep-activity-watermark{
        font-size:4.5rem;
    }
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
    .ep-quick-card.ep-activity-card,
    .ep-quick-card.ep-activity-card > i:not(.ep-activity-watermark),
    .ep-quick-card.ep-activity-card .ep-activity-watermark{
        transition:none;
    }

    .ep-quick-card.ep-activity-card:hover{
        transform:none;
    }
}


/* =========================================================
   PEPPY QUICK CARDS — FINAL GRID ALIGNMENT
   ========================================================= */

/* The grid, not the content, determines the card height */
.ep-quick-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    grid-auto-rows:108px;
    gap:1rem;
    align-items:stretch;
}

/* Every direct grid child fills exactly one grid row */
.ep-quick-grid > *{
    min-width:0;
    min-height:0;
    height:100%;
    align-self:stretch;
}

/* Links must stretch too */
.ep-quick-grid > a{
    display:block;
    height:100%;
}

/* The actual card is always exactly the grid-row height */
.ep-quick-grid .ep-quick-card.ep-activity-card{
    width:100%;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding:.55rem .65rem;
    gap:.2rem;

    overflow:hidden;
    position:relative;
}

/* Every main icon gets exactly the same top slot */
.ep-quick-grid .ep-quick-card.ep-activity-card
> i:not(.ep-activity-watermark){
    width:36px;
    height:36px;

    min-width:36px;
    min-height:36px;

    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto !important;

    font-size:1.05rem !important;
    line-height:1;
}

/* Text is centred and cannot change card height */
.ep-quick-grid .ep-quick-card.ep-activity-card{
    text-align:center;
    line-height:1.1;
}

.ep-quick-grid .ep-quick-card.ep-activity-card
> *:not(.ep-activity-watermark):not(i){
    position:relative;
    z-index:3;
    flex:0 0 auto;
    max-width:100%;
}

/* Keep the watermark OUT of the flex layout */
.ep-quick-grid .ep-quick-card.ep-activity-card
.ep-activity-watermark{
    position:absolute !important;

    right:-8px !important;
    bottom:-8px !important;

    top:auto !important;
    left:auto !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;

    display:block !important;

    font-size:4.6rem !important;
    line-height:1 !important;

    opacity:.15;

    transform:rotate(-18deg);

    z-index:1 !important;
    pointer-events:none;
}

/* Main icon and text always above watermark */
.ep-quick-grid .ep-quick-card.ep-activity-card
> i:not(.ep-activity-watermark),
.ep-quick-grid .ep-quick-card.ep-activity-card
.ep-badge{
    position:relative;
    z-index:3;
}

/* Remove accidental legacy vertical spacing */
.ep-quick-grid .ep-quick-card.ep-activity-card br{
    display:none;
}

/* =========================================================
   MOBILE — SAME HEIGHT FOR EVERY CARD
   ========================================================= */

@media(max-width:576px){

    .ep-quick-grid{
        grid-auto-rows:96px;
        gap:.75rem;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card{
        height:100% !important;
        padding:.45rem .5rem;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    > i:not(.ep-activity-watermark){
        width:34px;
        height:34px;
        min-width:34px;
        min-height:34px;
        flex-basis:34px;
        font-size:1rem !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    .ep-activity-watermark{
        right:-6px !important;
        bottom:-6px !important;
        font-size:3.7rem !important;
    }
}

@media(max-width:380px){

    .ep-quick-grid{
        grid-auto-rows:90px;
        gap:.6rem;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    .ep-activity-watermark{
        right:-5px !important;
        bottom:-5px !important;
        font-size:3.2rem !important;
    }
}



/* =========================================================
   NEW SCHOOL YEAR — SAFETY / ALERT ACTION
   ========================================================= */

.ep-new-school-year{
    position:relative;
    min-height:62px;
    height:auto;
    padding:9px 12px !important;
    gap:10px !important;

    background:linear-gradient(
        135deg,
        rgba(255,193,7,.10),
        rgba(255,87,34,.08)
    );

    border:1px solid rgba(245,158,11,.22);
    box-shadow:0 4px 12px rgba(245,158,11,.08);

    overflow:hidden;
}

.ep-new-school-year::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(
        180deg,
        #FFB020,
        #F97316
    );
}

.ep-new-school-year:hover{
    background:linear-gradient(
        135deg,
        rgba(255,193,7,.18),
        rgba(255,87,34,.14)
    ) !important;

    color:#B45309 !important;
    border-color:rgba(245,158,11,.40);
    box-shadow:
        0 8px 20px rgba(245,158,11,.16),
        0 0 0 3px rgba(245,158,11,.07);
    transform:translateY(-1px);
}

.ep-new-school-year-icon{
    width:34px;
    height:34px;
    min-width:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:linear-gradient(
        135deg,
        #FFB020,
        #F97316
    );

    color:#fff;

    box-shadow:
        0 5px 12px rgba(249,115,22,.22);
}

.ep-new-school-year-icon i{
    width:auto !important;
    font-size:17px !important;
    color:#fff !important;
}

.ep-new-school-year-text{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    min-width:0;
    flex:1;
    gap:1px;
}

.ep-new-school-year-text strong{
    display:block;
    color:#9A5B00;
    font-size:.88rem;
    line-height:1.15;
    font-weight:750;
}

.ep-new-school-year-text small{
    display:block;
    color:#9CA3AF;
    font-size:.67rem;
    line-height:1.2;
    font-weight:500;
    white-space:nowrap;
}

.ep-new-school-year-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 7px;
    border-radius:999px;

    background:#FFF3CD;
    color:#A16207;

    border:1px solid rgba(245,158,11,.22);

    font-size:.56rem;
    font-weight:800;
    letter-spacing:.06em;

    flex-shrink:0;
}

.ep-new-school-year:hover .ep-new-school-year-badge{
    background:#F59E0B;
    color:#fff;
}

@media(max-width:992px){

    .ep-new-school-year{
        min-height:60px;
    }

}

/* Collapsed sidebar: keep the action recognisable */
.ep-sidebar.ep-collapsed .ep-new-school-year{
    justify-content:center;
    padding:0 !important;
}

.ep-sidebar.ep-collapsed .ep-new-school-year-text,
.ep-sidebar.ep-collapsed .ep-new-school-year-badge{
    display:none !important;
}

.ep-sidebar.ep-collapsed .ep-new-school-year-icon{
    margin:0;
}


/*==================================================
  DISABLED ACTIVITY CARDS
==================================================*/

.ep-activity-disabled-link{
    display:block;
    cursor:not-allowed;
    pointer-events:none;
}

.ep-activity-card.ep-activity-disabled{
    background:#E5E7EB !important;
    color:#8A93A3 !important;
    border-color:#D5DAE1 !important;
    box-shadow:none !important;
    filter:grayscale(1);
    opacity:.72;
    cursor:not-allowed;
}

.ep-activity-card.ep-activity-disabled i,
.ep-activity-card.ep-activity-disabled .ep-activity-watermark{
    color:#8A93A3 !important;
    opacity:.45;
}

.ep-activity-card.ep-activity-disabled:hover{
    transform:none;
    box-shadow:none !important;
}

.ep-activity-disabled-label{
    display:block;
    margin-top:5px;
    font-size:.72rem;
    font-weight:600;
    color:#8A93A3;
}


/* =========================================================
   LEARNING ANALYTICS
   Uses the EasyPeasy structure helpers:
   ep-space-between / ep-cluster / ep-stat-card / ep-pill
   ========================================================= */

.ep-analytics-card{
    position:relative;
    overflow:hidden;
    padding:1.35rem !important;
    border:1px solid rgba(79,124,255,.16) !important;
    background:
        radial-gradient(circle at 100% 0%,rgba(79,124,255,.16),transparent 32%),
        radial-gradient(circle at 0% 100%,rgba(111,89,255,.10),transparent 30%),
        linear-gradient(145deg,#FFFFFF 0%,#F8FAFF 100%) !important;
    box-shadow:
        0 18px 45px rgba(50,70,120,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.ep-analytics-orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
    opacity:.5;
}

.ep-analytics-orb-one{
    width:150px;
    height:150px;
    right:-70px;
    top:-70px;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    opacity:.08;
}

.ep-analytics-orb-two{
    width:90px;
    height:90px;
    left:-45px;
    bottom:60px;
    background:#22C55E;
    opacity:.05;
}

.ep-analytics-header{
    position:relative;
    z-index:1;
    margin-bottom:1rem;
    gap:1rem;
}

.ep-analytics-heading h3{
    margin:.7rem 0 .15rem;
    color:var(--ep-text);
    font-family:var(--ep-font-title);
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:-.035em;
}

.ep-analytics-heading h3 i{
    margin-right:.35rem;
    color:var(--ep-primary);
}

.ep-analytics-heading p{
    margin:0;
    color:var(--ep-text-light);
    font-size:.72rem;
}

.ep-cluster-sm{
    gap:.4rem !important;
}

.ep-analytics-title-pill{
    gap:.4rem;
    padding:.38rem .7rem;
    background:linear-gradient(135deg,#EEF3FF,#F4F0FF);
    color:var(--ep-primary);
    border:1px solid rgba(79,124,255,.08);
    font-size:.62rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.ep-analytics-account-pill{
    gap:.35rem;
    padding:.38rem .7rem;
    background:#fff;
    color:var(--ep-text-light);
    border:1px solid var(--ep-border);
    font-size:.62rem;
}

.ep-analytics-period-pill{
    display:flex;
    align-items:center;
    gap:.45rem;
    flex-shrink:0;
    padding:.55rem .75rem;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--ep-border);
    color:var(--ep-text-light);
    box-shadow:var(--ep-shadow-sm);
    font-size:.6rem;
}

.ep-analytics-period-pill i{
    color:var(--ep-primary);
}

.ep-analytics-period-pill strong{
    color:var(--ep-text);
    font-weight:800;
}


/* =========================================================
   STATUS
   ========================================================= */

.ep-analytics-status-hero{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:.9rem;
    padding:1rem;
    margin-bottom:.8rem;
    border-radius:22px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(120,135,160,.12);
    box-shadow:var(--ep-shadow-sm);
}

.ep-analytics-status-icon{
    position:relative;
    width:74px;
    height:74px;
    min-width:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    font-size:2.15rem;
    box-shadow:
        0 12px 25px rgba(50,70,100,.14),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.ep-analytics-status-icon-ring{
    position:absolute;
    inset:-5px;
    border-radius:28px;
    border:2px solid currentColor;
    opacity:.13;
}

.ep-analytics-card-success .ep-analytics-status-icon{
    color:var(--ep-success);
    background:linear-gradient(145deg,#E2FAEE,#BDEFD7);
}

.ep-analytics-card-primary .ep-analytics-status-icon{
    color:var(--ep-primary);
    background:linear-gradient(145deg,#EAF0FF,#D9E4FF);
}

.ep-analytics-card-warning .ep-analytics-status-icon{
    color:var(--ep-warning);
    background:linear-gradient(145deg,#FFF7DF,#FFE8A3);
}

.ep-analytics-card-danger .ep-analytics-status-icon{
    color:var(--ep-danger);
    background:linear-gradient(145deg,#FFE9EB,#FFD1D6);
}

.ep-analytics-card-neutral .ep-analytics-status-icon{
    color:var(--ep-text-light);
    background:linear-gradient(145deg,#F3F5F8,#E4E9F0);
}

.ep-analytics-status-copy{
    min-width:0;
    flex:1;
}

.ep-analytics-status-topline{
    margin-bottom:.15rem;
}

.ep-analytics-status-label{
    color:var(--ep-text-muted);
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.12em;
}

.ep-analytics-status-pill{
    gap:.35rem;
    padding:.28rem .55rem;
    background:#F4F6FA;
    color:var(--ep-text);
    border:1px solid var(--ep-border);
    font-size:.55rem;
    font-weight:800;
    text-transform:uppercase;
}

.ep-analytics-card-success .ep-analytics-status-pill{
    background:#EAFBF2;
    color:var(--ep-success);
    border-color:#D3F3E1;
}

.ep-analytics-card-warning .ep-analytics-status-pill{
    background:#FFF6E3;
    color:var(--ep-warning);
    border-color:#FFE9B0;
}

.ep-analytics-card-danger .ep-analytics-status-pill{
    background:#FFECEC;
    color:var(--ep-danger);
    border-color:#FFD6D6;
}

.ep-analytics-status-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 4px currentColor;
    opacity:.8;
}

.ep-analytics-status-copy strong{
    display:block;
    color:var(--ep-text);
    font-size:1.22rem;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.025em;
}

.ep-analytics-status-copy p{
    margin:.18rem 0 0;
    color:var(--ep-text-light);
    font-size:.68rem;
    line-height:1.35;
}

.ep-analytics-evolution{
    min-width:88px;
    padding-left:.8rem;
    text-align:right;
   
}

.ep-analytics-evolution-label{
    display:block;
    color:var(--ep-text-muted);
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.1em;
}

.ep-analytics-evolution strong{
    display:block;
    margin-top:.15rem;
    font-size:1.25rem;
    line-height:1;
    font-weight:900;
}

.ep-analytics-evolution strong.positive{
    color:var(--ep-success);
}

.ep-analytics-evolution strong.negative{
    color:var(--ep-danger);
}

.ep-analytics-evolution small{
    display:block;
    margin-top:.2rem;
    color:var(--ep-text-muted);
    font-size:.48rem;
}


/* =========================================================
   KPI STACK — COMPACT VERTICAL QUICK WIDGET
   ========================================================= */

.ep-analytics-kpis{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin-bottom:.75rem;
}

.ep-analytics-kpi{
    position:relative;
    width:100%;
    min-height:76px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.25rem;
    padding:.7rem .5rem !important;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:17px;
    box-shadow:var(--ep-shadow-sm);
}

.ep-analytics-kpi::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    right:-45px;
    bottom:-45px;
    border-radius:50%;
    opacity:.07;
    pointer-events:none;
}

/* Individual colours */
.ep-analytics-kpi-blue{
    background:linear-gradient(145deg,#F5F8FF,#EDF3FF) !important;
    border-color:#E2EAFF;
}
.ep-analytics-kpi-blue::after{background:var(--ep-primary);}

.ep-analytics-kpi-purple{
    background:linear-gradient(145deg,#FAF7FF,#F3EEFF) !important;
    border-color:#EAE1FF;
}
.ep-analytics-kpi-purple::after{background:var(--ep-secondary);}

.ep-analytics-kpi-green{
    background:linear-gradient(145deg,#F4FCF8,#EAFBF2) !important;
    border-color:#DDF4E8;
}
.ep-analytics-kpi-green::after{background:var(--ep-success);}

/* ICON — vertical / centred */
.ep-analytics-kpi-icon{
    position:relative;
    z-index:1;
    width:31px;
    height:31px;
    min-width:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:.78rem;
    box-shadow:0 4px 10px rgba(50,70,100,.08);
}

.ep-analytics-kpi-blue .ep-analytics-kpi-icon{
    background:#E3EBFF;
    color:var(--ep-primary);
}

.ep-analytics-kpi-purple .ep-analytics-kpi-icon{
    background:#EDE4FF;
    color:var(--ep-secondary);
}

.ep-analytics-kpi-green .ep-analytics-kpi-icon{
    background:#DDF7E9;
    color:var(--ep-success);
}

/* TEXT — intentionally short and controlled */
.ep-analytics-kpi .ep-kpi-content{
    position:relative;
    z-index:1;
    width:100%;
    min-width:0;
    overflow:hidden;
}

.ep-analytics-kpi .ep-stat-label{
    display:block;
    margin:0 0 .12rem;
    color:#667085;
    font-size:.55rem;
    line-height:1.1;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ep-analytics-kpi .ep-stat-value{
    display:block;
    margin:0;
    color:var(--ep-text);
    font-size:1.18rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.02em;
}

.ep-analytics-kpi-blue .ep-stat-value{
    color:var(--ep-primary);
}

.ep-analytics-kpi-purple .ep-stat-value{
    color:var(--ep-secondary);
}

.ep-analytics-kpi-green .ep-stat-value{
    color:var(--ep-success);
}

/* Hide the extra descriptive pills in the narrow widget */
.ep-analytics-kpi-pill{
    display:none !important;
}

@media(max-width:576px){

    .ep-analytics-kpi{
        min-height:72px;
        padding:.6rem .45rem !important;
    }

    .ep-analytics-kpi-icon{
        width:29px;
        height:29px;
        min-width:29px;
        font-size:.72rem;
    }

    .ep-analytics-kpi .ep-stat-value{
        font-size:1.1rem;
    }
}

/* =========================================================
   CHART
   ========================================================= */

.ep-analytics-chart-box{
    position:relative;
    z-index:1;
    padding:.8rem .85rem .55rem;
    border-radius:20px;
    background:rgba(255,255,255,.92);
    border:1px solid var(--ep-border);
    box-shadow:var(--ep-shadow-sm);
}

.ep-analytics-chart-title{
    margin-bottom:.35rem;
}

.ep-analytics-chart-title > div > small{
    display:block;
    margin-top:.15rem;
    padding-left:2rem;
    color:var(--ep-text-muted);
    font-size:.52rem;
}

.ep-analytics-chart-title .ep-cluster{
    gap:.45rem;
}

.ep-analytics-chart-title .ep-cluster > span:last-child{
    color:var(--ep-text);
    font-size:.73rem;
    font-weight:900;
}

.ep-analytics-chart-icon{
    width:27px;
    height:27px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff;
    font-size:.72rem;
    box-shadow:var(--ep-shadow-glow);
}

.ep-analytics-chart-pill{
    gap:.3rem;
    padding:.32rem .55rem;
    background:#F4F7FC;
    color:var(--ep-text-light);
    border:1px solid var(--ep-border);
    font-size:.52rem;
}

.ep-analytics-chart-wrap{
    height:145px;
    position:relative;
}

.ep-analytics-chart-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
    margin-top:.25rem;
    padding-top:.45rem;
    border-top:1px solid #EEF1F6;
    color:var(--ep-text-muted);
    font-size:.5rem;
}

.ep-analytics-chart-footer > span:first-child{
    display:flex;
    align-items:center;
    gap:.3rem;
}

.ep-analytics-chart-footer i{
    color:var(--ep-primary);
}

.ep-analytics-schoolyear-pill{
    gap:.3rem;
    padding:.27rem .5rem;
    background:#EEF4FF;
    color:var(--ep-primary);
    font-size:.48rem;
    font-weight:800;
}


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

@media(max-width:768px){

    .ep-analytics-kpi{
        grid-template-columns:auto minmax(0,1fr) auto;
    }

    .ep-analytics-kpi-pill{
        justify-self:end;
        align-self:start;
    }

    .ep-analytics-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .ep-analytics-period-pill{
        align-self:flex-start;
    }

    .ep-analytics-status-hero{
        align-items:flex-start;
    }

    .ep-analytics-status-icon{
        width:62px;
        height:62px;
        min-width:62px;
        border-radius:20px;
        font-size:1.7rem;
    }

    .ep-analytics-evolution{
        min-width:74px;
    }

    .ep-analytics-kpis{
        grid-template-columns:1fr;
    }

}

@media(max-width:576px){

    .ep-analytics-card{
        padding:1rem !important;
    }

    .ep-analytics-status-hero{
        gap:.65rem;
        padding:.75rem;
    }

    .ep-analytics-status-copy strong{
        font-size:1.05rem;
    }

    .ep-analytics-evolution{
        display:none;
    }

    .ep-analytics-chart-wrap{
        height:130px;
    }

    .ep-analytics-chart-footer > span:first-child{
        max-width:70%;
        line-height:1.35;
    }

    .ep-analytics-heading h3{
        font-size:1.2rem;
    }
}

.ep-analytics-evolution{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35rem .5rem;
    margin-top:.55rem;
    padding-top:.45rem;
    border-top:1px solid rgba(120,135,160,.12);
}

.ep-analytics-evolution > span{
    color:var(--ep-text-muted);
    font-size:.5rem;
    font-weight:900;
    letter-spacing:.1em;
    line-height:1;
}

.ep-analytics-evolution strong{
    font-size:1rem;
    font-weight:900;
    line-height:1;
}

.ep-analytics-evolution strong.positive{
    color:var(--ep-success);
}

.ep-analytics-evolution strong.negative{
    color:var(--ep-danger);
}

.ep-analytics-evolution small{
    flex-basis:100%;
    margin-top:.05rem;
    color:var(--ep-text-light);
    font-size:.62rem;
    line-height:1.25;
}

/* =========================================================
   TEST RESULTS PAGE — MOBILE RESPONSIVE LAYER
   ========================================================= */

@media (max-width: 767.98px){
    .ep-content{padding:16px;}

    .ep-hero-background h1{
        font-size:clamp(1.65rem,7vw,2.25rem);
        line-height:1.15;
    }

    .ep-hero-background p{
        font-size:.95rem;
        line-height:1.5;
    }

    .ep-hero-background .btn{min-height:42px;}

    .ep-card-header{min-width:0;}

    .ep-card-header .ep-pill{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .ep-card-body.p-0{min-width:0;}

    .table-responsive{
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table-responsive table{min-width:max-content;}

    .table-responsive th,
    .table-responsive td{white-space:nowrap;}

    .table-responsive th:first-child,
    .table-responsive td:first-child{
        min-width:40px;
        width:40px;
    }

    .table-responsive th:nth-child(2),
    .table-responsive td:nth-child(2){
        min-width:170px;
    }
}

@media (max-width:575.98px){
    .ep-content{padding:12px;}

    .ep-hero-background{
        padding:1.25rem !important;
    }

    .ep-hero-background h1{
        margin-bottom:.65rem !important;
    }

    .ep-hero-background p{
        margin-bottom:1rem !important;
    }

    .ep-hero-background .d-flex{width:100%;}

    .ep-hero-background .d-flex .btn{
        flex:1 1 auto;
    }

    .ep-hero-background .col-lg-3{display:none;}

    .ep-card-header .d-flex.justify-content-between{
        align-items:flex-start !important;
        gap:.75rem;
    }

    .ep-card-title{
        font-size:1.15rem;
        line-height:1.25;
    }

    .ep-card-header > .d-flex,
    .ep-card-header .w-100{
        flex-wrap:wrap;
        gap:.65rem;
    }

    .ep-card-header .w-100 > .d-flex{
        flex-wrap:wrap;
        width:100%;
    }

    .ep-card-header .ep-pill{
        font-size:.72rem;
        padding:.35rem .65rem;
    }

    .table-responsive th,
    .table-responsive td{
        padding:.7rem .65rem;
    }

    .table-responsive th:nth-child(2),
    .table-responsive td:nth-child(2){
        min-width:150px;
    }
}

@media (max-width:420px){
    .ep-content{padding:8px;}

    .ep-hero-background{
        padding:1rem !important;
        border-radius:18px;
    }

    .ep-hero-background .btn{
        font-size:.85rem;
        padding:.6rem .75rem;
    }

    .ep-card-premium{border-radius:18px;}

    .ep-card-header{padding:.9rem !important;}

    .ep-card-title{font-size:1.05rem;}

    .table-responsive th,
    .table-responsive td{
        padding:.6rem .55rem;
        font-size:.85rem;
    }

    .table-responsive th:nth-child(2),
    .table-responsive td:nth-child(2){
        min-width:140px;
    }
}

@media (max-width:767.98px) and (orientation:landscape){
    .table-responsive{max-height:72vh;}

    .ep-hero-background{
        padding:1rem 1.25rem !important;
    }

    .ep-hero-background .col-lg-3{display:none;}
}


/* =========================================================
   LEGACY iPAD LANDSCAPE — COMPACT SIDEBAR
   ---------------------------------------------------------
   Older iPads in landscape (typically 1024px wide) lose too
   much horizontal space to the standard 280px sidebar.
   This changes ONLY the landscape tablet range.
   Portrait and desktop layouts remain unchanged.
   ========================================================= */
@media (min-width: 993px) and (max-width: 1100px) and (orientation: landscape){
    :root{
        --ep-sidebar-width:230px;
    }
}

/* =========================================================
   EASY PEASY — LEGACY iPAD / iOS 14.6 SAFETY OVERRIDES
   ---------------------------------------------------------
   Page/activity cards only.
   Does NOT modify the sidebar.
   ========================================================= */

/*
 * Older Safari can be less reliable when transformed/absolutely
 * positioned decorative circles are clipped by rounded cards.
 * Keep every decorative layer physically inside the activity tile.
 */
.ep-quick-card.ep-activity-card{
    position:relative !important;
    overflow:hidden !important;
    min-width:0 !important;
    box-sizing:border-box !important;

    /* Extra clipping support for older WebKit/iOS Safari */
    -webkit-mask-image:-webkit-radial-gradient(white, black);
    isolation:isolate;
}

/* Keep the decorative circle safely inside the tile */
.ep-quick-card.ep-activity-card::after{
    width:72px !important;
    height:72px !important;
    right:-20px !important;
    bottom:-22px !important;
    border-radius:50% !important;
    z-index:0 !important;
}

/* Keep the large watermark from escaping narrow iPad tiles */
.ep-quick-card.ep-activity-card .ep-activity-watermark{
    right:-3px !important;
    bottom:-5px !important;
    font-size:4.2rem !important;
    line-height:1 !important;
    max-width:none !important;
    pointer-events:none !important;
}

/*
 * iPad portrait and similar tablet widths.
 * The previous 90px auto-fit minimum can create too many
 * very narrow columns on older iPads. Use a stable 2-column
 * layout so icons and labels remain inside their cards.
 */
@media (min-width:577px) and (max-width:820px){

    .ep-content{
        overflow-x:hidden !important;
    }

    .ep-quick-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:112px !important;
        gap:.9rem !important;
        width:100% !important;
        min-width:0 !important;
    }

    .ep-quick-grid > *{
        min-width:0 !important;
        max-width:100% !important;
        width:100% !important;
        height:100% !important;
    }

    .ep-quick-grid > a{
        min-width:0 !important;
        max-width:100% !important;
        overflow:hidden !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card{
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:100% !important;
        max-height:none !important;
        padding:.6rem .65rem !important;
        border-radius:20px !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    > i:not(.ep-activity-watermark){
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        flex:0 0 40px !important;
        font-size:1.15rem !important;
        margin:0 auto .2rem !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    .ep-activity-watermark{
        right:-3px !important;
        bottom:-5px !important;
        font-size:4rem !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card .ep-badge{
        max-width:100% !important;
        white-space:nowrap;
    }
}

/*
 * iPad landscape / wider tablets.
 * Two activity cards per row so the main content remains
 * comfortable when the sidebar is reduced on older iPads.
 */
@media (min-width:768px) and (max-width:1024px){

    .ep-content{
        overflow-x:hidden !important;
    }

    .ep-quick-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:112px !important;
        gap:.9rem !important;
        width:100% !important;
        min-width:0 !important;
    }

    .ep-quick-grid > *{
        min-width:0 !important;
        max-width:100% !important;
        width:100% !important;
        height:100% !important;
    }

    .ep-quick-grid > a{
        min-width:0 !important;
        max-width:100% !important;
        overflow:hidden !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card{
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:100% !important;
        padding:.6rem .55rem !important;
        border-radius:20px !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    > i:not(.ep-activity-watermark){
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        flex:0 0 40px !important;
        font-size:1.15rem !important;
        margin:0 auto .2rem !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    .ep-activity-watermark{
        right:-3px !important;
        bottom:-5px !important;
        font-size:4rem !important;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card .ep-badge{
        max-width:100% !important;
        white-space:nowrap;
    }
}

/*
 * iOS Safari 14.x: prevent long activity names from forcing
 * a visual overflow without changing the content.
 */
@media (min-width:577px) and (max-width:1024px){

    .ep-quick-grid .ep-quick-card.ep-activity-card{
        overflow:hidden !important;
        text-overflow:clip !important;
        word-break:normal;
        overflow-wrap:anywhere;
    }

    .ep-quick-grid .ep-quick-card.ep-activity-card
    > *:not(.ep-activity-watermark):not(i){
        min-width:0 !important;
        max-width:100% !important;
    }
}



/* =========================================================
   CLASSPAGE HERO — PREVENT LANGUAGE RIBBON FROM CLIPPING
   "Welcome back" text must always remain clear of the flag.
   Desktop + iPad/tablet.
   ========================================================= */

.ep-welcome{
    position:relative;
    overflow:hidden;
}

/* Keep the hero text above the decorative background
   and give it room on the right for the language ribbon. */
.ep-welcome h2,
.ep-welcome p{
    position:relative;
    z-index:6;
    max-width:calc(100% - 190px);
}

/* The ribbon stays above the background but does not cover
   the welcome text. */
.ep-welcome .ep-language-ribbon{
    z-index:10;
}

/* Tablet / older iPad: the available hero width is smaller,
   so reserve a little more horizontal space for the ribbon. */
@media (min-width:768px) and (max-width:1024px){
    .ep-welcome h2,
    .ep-welcome p{
        max-width:calc(100% - 165px);
    }

    .ep-welcome .ep-language-ribbon{
        right:14px;
        padding-left:18px;
        padding-right:16px;
        gap:8px;
    }

    .ep-welcome .ep-language-ribbon img{
        width:26px;
        height:26px;
    }
}

/* If the hero becomes particularly narrow, make the
   reservation smaller while still preventing overlap. */
@media (min-width:768px) and (max-width:900px){
    .ep-welcome h2,
    .ep-welcome p{
        max-width:calc(100% - 145px);
    }

    .ep-welcome .ep-language-ribbon span{
        font-size:.78rem;
    }
}


/* =========================================================
   LEGACY iPAD LANDSCAPE — SIDEBAR COMPACT TYPOGRAPHY
   ---------------------------------------------------------
   The sidebar was already reduced to 230px for older iPads.
   These overrides make the contents fit that narrower width.
   ONLY landscape tablets in the 993–1100px range are affected.
   Portrait iPads and desktop remain unchanged.
   ========================================================= */
@media (min-width:993px) and (max-width:1100px) and (orientation:landscape){

    .ep-logo{
        font-size:1.12rem;
    }

    .ep-logo i{
        font-size:24px;
    }

    .ep-menu-item,
    .ep-menu-parent{
        font-size:.88rem;
        font-weight:600;
    }

    .ep-submenu .ep-menu-item{
        font-size:.82rem;
    }

    .ep-menu-item i,
    .ep-menu-left > i{
        font-size:17px;
    }

    .ep-badge{
        font-size:.64rem;
    }

    .ep-menu-right .ep-badge{
        font-size:.60rem;
    }
}


/* =========================================================
   CLASSPAGE WELCOME HERO — PHONE FIX
   The ribbon is absolute and therefore reduces the usable
   visual width of the welcome text. On phones only, reserve
   space explicitly so the text never gets squeezed.
   ========================================================= */
@media (max-width:576px){

    .ep-welcome{
        position:relative !important;
        overflow:hidden !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .ep-welcome h2,
    .ep-welcome p{
        display:block !important;
        position:relative !important;
        z-index:6 !important;

        /* Full width of the hero content, not a desktop
           reservation for the language ribbon. */
        width:100% !important;
        max-width:100% !important;

        margin-right:0 !important;
        padding-right:0 !important;

        overflow:visible !important;
        white-space:normal !important;
        overflow-wrap:break-word !important;
        word-break:normal !important;
    }

    .ep-welcome h2{
        font-size:1.35rem !important;
        line-height:1.25 !important;
    }

    .ep-welcome p{
        font-size:.95rem !important;
        line-height:1.55 !important;
    }

    /* Keep the flag in the corner, but do not let its
       dimensions participate in the text layout. */
    .ep-welcome .ep-language-ribbon{
        position:absolute !important;
        top:10px !important;
        right:8px !important;
        width:auto !important;
        max-width:none !important;
        z-index:10 !important;
    }
}

/* Very narrow phones: slightly smaller title so the name
   itself cannot create an ugly wrap. */
@media (max-width:420px){
    .ep-welcome h2{
        font-size:1.2rem !important;
    }

    .ep-welcome p{
        font-size:.9rem !important;
    }
}