/* =================================================================
   EduCore Skin v0.5 — uniform site styling
   ================================================================= */

:root {
    /* === EduCore v0.13 palette — softer navy + teal + coral === */
    --ec-primary:        #13213D;     /* softer navy — brand anchor + dark bands */
    --ec-primary-dark:   #0A1428;
    --ec-primary-bright: #1F3458;     /* secondary navy for gradients */
    --ec-primary-soft:   #E2EAF5;
    --ec-accent:         #22D3EE;     /* bright teal — primary action colour */
    --ec-accent-dark:    #0891B2;
    --ec-accent-bright:  #67E8F9;
    --ec-accent-soft:    #CFFAFE;
    --ec-warm:           #FECDD3;     /* coral soft — warm pop backgrounds */
    --ec-warm-deep:      #F97066;     /* coral — secondary accent */
    --ec-warning:        #F59E0B;
    --ec-warning-soft:   #FEF3C7;
    --ec-danger:         #DC2626;
    --ec-danger-soft:    #FEE2E2;
    --ec-success:        #10B981;
    --ec-success-soft:   #D1FAE5;
    --ec-text:           #0E1726;
    --ec-text-soft:      #475569;
    --ec-muted:          #64748B;
    --ec-bg:             #F4F6FB;     /* cool off-white page background */
    --ec-bg-elev:        #FFFFFF;
    --ec-card:           #FFFFFF;
    --ec-border:         #E2E8F0;
    --ec-border-strong:  #CBD5E1;
    --ec-shadow:         0 6px 20px rgba(15,23,42,.08);
    --ec-shadow-lg:      0 24px 60px rgba(15,23,42,.16);
    --ec-shadow-gold:    0 12px 28px rgba(249,112,102,.30);   /* legacy name; now coral glow */
    --ec-radius:         16px;
    --ec-radius-sm:      10px;
    --ec-radius-lg:      24px;
    --ec-ease:           cubic-bezier(.22,.61,.36,1);

    /* v0.13 additions — dark band sections + semantic aliases */
    --ec-bg-dark:        #13213D;     /* business-face section background */
    --ec-bg-dark-2:      #0E1B33;     /* deeper variant for gradients */
    --ec-ink-invert:     #E6EDF7;     /* body text on dark */
    --ec-ink-invert-soft:#94A3B8;     /* muted text on dark */
    --ec-line-dark:      #1F2A3C;     /* dividers on dark */
    --ec-line-light:     #E2E8F0;     /* alias of --ec-border for clarity */
    --ec-eyebrow:        #22D3EE;     /* small teal section labels */
    --ec-coral:          #F97066;     /* alias of --ec-warm-deep */
    --ec-coral-soft:     #FECDD3;
    --ec-page:           #F4F6FB;     /* alias of --ec-bg */
    --ec-surface:        #FFFFFF;     /* alias of --ec-card */
    --ec-ink:            #0E1726;     /* alias of --ec-text */
    --ec-ink-soft:       #475569;     /* alias of --ec-text-soft */

    color-scheme: light;
}

/* =================================================================
   EduCore v0.15 — FUTURISTIC DARK SKIN tokens
   Opt-in via body.educore-v15 (added by educore-theme.php body_class)
   ================================================================= */
:root {
    --ec-deep:           #070B14;     /* near-black page background */
    --ec-deep-2:         #0B1120;     /* slightly lifted */
    --ec-deep-3:         #111827;     /* card / band background */
    --ec-glass:          rgba(255,255,255,.06);
    --ec-glass-strong:   rgba(255,255,255,.10);
    --ec-glass-line:     rgba(255,255,255,.14);
    --ec-glass-glow:     rgba(124, 58, 237, .22);
    --ec-blue:           #2563EB;
    --ec-blue-soft:      rgba(37, 99, 235, .14);
    --ec-cyan:           #22D3EE;
    --ec-cyan-soft:      rgba(34, 211, 238, .18);
    --ec-purple:         #7C3AED;
    --ec-purple-soft:    rgba(124, 58, 237, .18);
    --ec-pink:           #EC4899;
    --ec-ink-15:         #E6EDF7;     /* body text on dark */
    --ec-ink-15-soft:    #94A3B8;     /* muted */
    --ec-ink-15-dim:     #64748B;     /* dimmer */
    --ec-grad-headline:  linear-gradient(120deg, #fff 0%, #C7D2FE 40%, #22D3EE 100%);
    --ec-grad-accent:    linear-gradient(120deg, #2563EB 0%, #7C3AED 100%);
    --ec-grad-cyan:      linear-gradient(120deg, #22D3EE 0%, #2563EB 100%);
    --ec-grad-aurora:    radial-gradient(60% 70% at 20% 20%, rgba(124,58,237,.45), transparent 60%),
                         radial-gradient(50% 60% at 80% 30%, rgba(34,211,238,.35), transparent 60%),
                         radial-gradient(80% 80% at 50% 100%, rgba(37,99,235,.30), transparent 60%);
    --ec-ease-15:        cubic-bezier(.22,.61,.36,1);
    --ec-shadow-15:      0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
    --ec-shadow-glow:    0 0 32px rgba(124,58,237,.35), 0 0 64px rgba(34,211,238,.18);
}

/* ---------- v0.15 BASE ---------- */
html { scroll-behavior: smooth; }

body.educore-v15 {
    background: var(--ec-deep);
    color: var(--ec-ink-15);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
}
body.educore-v15.educore-skin {
    background: var(--ec-deep);
}
body.educore-v15 .site-main,
body.educore-v15 main#content,
body.educore-v15 .page-content {
    max-width: 100%;
    padding: 0;
}
body.educore-v15 h1, body.educore-v15 h2, body.educore-v15 h3, body.educore-v15 h4 {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    color: #fff;
    letter-spacing: -.02em;
}
body.educore-v15 h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.05; }
body.educore-v15 h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; }
body.educore-v15 h3 { font-size: 1.25rem; font-weight: 600; }
body.educore-v15 p { color: var(--ec-ink-15-soft); }

/* persistent ambient aurora behind everything */
body.educore-v15::before {
    content: ""; position: fixed; inset: 0; z-index: 0;
    background: var(--ec-grad-aurora);
    opacity: .55;
    pointer-events: none;
    animation: ec-v15-aurora 20s ease-in-out infinite alternate;
}
body.educore-v15 > * { position: relative; z-index: 1; }
@keyframes ec-v15-aurora {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d( 2%,  1%, 0) scale(1.05); }
}

/* gradient headline helper */
.educore-v15 .ec-grad-head {
    background: var(--ec-grad-headline);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.educore-v15 .ec-grad-accent {
    background: var(--ec-grad-accent);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- v0.15 NAV (transparent → glass on scroll) ---------- */
body.educore-v15 .ec-nav {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    border-bottom: 1px solid transparent;
    transition: background .35s var(--ec-ease-15),
                backdrop-filter .35s var(--ec-ease-15),
                border-color .35s var(--ec-ease-15),
                box-shadow .35s var(--ec-ease-15);
    z-index: 1000;
}
body.educore-v15 .ec-nav.is-scrolled {
    background: rgba(11, 15, 14, .55);             /* LB warm-charcoal scrolled state */
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border-bottom-color: rgba(245,243,238,.06);    /* faint warm hairline */
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
body.educore-v15 .ec-nav-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: 24px;
    padding: 16px 28px;
}
body.educore-v15 .ec-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: #fff;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem;
}
body.educore-v15 .ec-logo-mark {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--ec-grad-accent);
    box-shadow: 0 6px 18px rgba(37,99,235,.45), 0 0 0 1px rgba(255,255,255,.1) inset;
}
body.educore-v15 .ec-nav-links {
    display: flex; gap: 4px; flex: 1; justify-content: center;
}
body.educore-v15 .ec-nav-links a {
    position: relative;
    padding: 10px 14px; border-radius: 8px;
    /* color set at end-of-file canonical block (~line 6616). */
    font-weight: 500;
    font-size: .94rem;
    letter-spacing: .3px;
    text-decoration: none;
    transition: color .3s ease, background .3s ease;
}
/* Quiet beige indicator — only shown on the active (current) page. Hover
   relies on color alone, no aggressive underline animation. */
body.educore-v15 .ec-nav-links a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 1px; border-radius: 1px;
    background: #D8CBB8;
    opacity: 0;
    transition: opacity .3s ease;
}
body.educore-v15 .ec-nav-links a:hover { color: #FFFFFF; }   /* peak white on hover */
body.educore-v15 .ec-nav-links a.is-active { color: #FFFFFF; }
body.educore-v15 .ec-nav-links a.is-active::after { opacity: .8; }
body.educore-v15 .ec-nav-cta { display: flex; align-items: center; gap: 10px; }

/* ---------- v0.15 buttons ---------- */
body.educore-v15 .ec-btn,
body.educore-v15 a.ec-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 12px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform .25s var(--ec-ease-15),
                box-shadow .25s var(--ec-ease-15),
                background .25s var(--ec-ease-15),
                color .25s var(--ec-ease-15);
    position: relative; overflow: hidden;
}
body.educore-v15 a.ec-btn-primary,
body.educore-v15 button.ec-btn-primary {
    background: var(--ec-grad-accent);
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(37,99,235,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
}
body.educore-v15 a.ec-btn-primary:hover,
body.educore-v15 button.ec-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.16) inset;
}
body.educore-v15 a.ec-btn-ghost,
body.educore-v15 button.ec-btn-ghost {
    background: var(--ec-glass);
    color: #fff !important;
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.educore-v15 a.ec-btn-ghost:hover,
body.educore-v15 button.ec-btn-ghost:hover {
    background: var(--ec-glass-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34,211,238,.30);
}
body.educore-v15 .ec-btn-lg { padding: 16px 28px; font-size: 1.02rem; }
body.educore-v15 .ec-btn-xl { padding: 18px 36px; font-size: 1.05rem; }

/* glow hover utility */
.educore-v15 .ec-glow-hover { transition: box-shadow .35s var(--ec-ease-15), transform .35s var(--ec-ease-15); }
.educore-v15 .ec-glow-hover:hover { box-shadow: var(--ec-shadow-glow); transform: translateY(-3px); }

/* ---------- v0.15 GLASS card ---------- */
.educore-v15 .ec-glass-card {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 20px;
    box-shadow: var(--ec-shadow-15);
}

/* eyebrow chip */
.educore-v15 .ec-v15-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ec-cyan);
}
.educore-v15 .ec-v15-eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ec-cyan); box-shadow: 0 0 12px var(--ec-cyan);
    animation: ec-v15-pulse 2s ease-in-out infinite;
}
@keyframes ec-v15-pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }

/* v0.15.2 container width system — per ChatGPT brief
   Hero 1400 · Standard 1240 · Reading 980 · Dashboard 1600 */
.educore-v15 .ec-v15-wrap        { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.educore-v15 .ec-v15-wrap-hero   { max-width: 1400px; margin: 0 auto; padding: 0 28px; }
.educore-v15 .ec-v15-wrap-narrow { max-width: 980px;  margin: 0 auto; padding: 0 28px; }
.educore-v15 .ec-v15-wrap-wide   { max-width: 1600px; margin: 0 auto; padding: 0 28px; }

/* ---------- v0.15.6 HERO — spec match: 42/58 split, capped title, bigger mockup ---------- */
.educore-v15 .ec-v15-hero {
    position: relative;
    display: grid; place-items: center;
    padding: 110px 0 64px;
    overflow: hidden;
}
.educore-v15 .ec-v15-hero-grid {
    display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: 80px; align-items: center;
    max-width: 1400px; margin: 0 auto; padding: 0 32px;
}
.educore-v15 .ec-v15-hero h1 {
    font-size: clamp(3.4rem, 7.5vw, 6rem);
    margin: 22px 0 24px;
    line-height: .98;
    letter-spacing: -.03em;
    font-weight: 700;
    max-width: 520px;
}
.educore-v15 .ec-v15-hero p.lede {
    font-size: 1.15rem; color: var(--ec-ink-15-soft);
    max-width: 460px; line-height: 1.55; margin: 0 0 36px;
}
.educore-v15 .ec-v15-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.educore-v15 .ec-v15-hero-stats {
    display: flex; gap: 36px; margin-top: 48px;
    padding-top: 28px; border-top: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-stat strong {
    display: block; font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem; font-weight: 700; color: #fff;
    background: var(--ec-grad-cyan);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.educore-v15 .ec-v15-stat span { font-size: .85rem; color: var(--ec-ink-15-dim); }

/* particles canvas layer */
.educore-v15 .ec-v15-particles {
    position: absolute; inset: 0; pointer-events: none;
    z-index: 0; opacity: .9;
}

/* ---------- v0.15.6 BIG product dashboard panel (hero right) ---------- */
.educore-v15 .ec-v15-product {
    position: relative;
    aspect-ratio: 5/4;
    perspective: 1400px;
    will-change: transform;
}
.educore-v15 .ec-v15-product-main {
    position: relative;
    width: 100%; height: 100%;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid var(--ec-glass-line);
    border-radius: 22px;
    padding: 22px;
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--ec-shadow-15), 0 50px 100px rgba(124,58,237,.30);
    animation: ec-v15-float 8s ease-in-out infinite;
    transform: rotateX(4deg) rotateY(-7deg);
    transform-style: preserve-3d;
}
.educore-v15 .ec-v15-product-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-product-head-dot { width: 11px; height: 11px; border-radius: 50%; }
.educore-v15 .ec-v15-product-head-dot:nth-child(1) { background: #FF5F57; }
.educore-v15 .ec-v15-product-head-dot:nth-child(2) { background: #FEBC2E; }
.educore-v15 .ec-v15-product-head-dot:nth-child(3) { background: #28C840; }
.educore-v15 .ec-v15-product-head-title {
    margin-left: 10px;
    font-family: 'Space Grotesk', sans-serif;
    color: #fff; font-size: .92rem; font-weight: 600;
}
.educore-v15 .ec-v15-product-head-time {
    margin-left: auto;
    font-size: .72rem; color: var(--ec-ink-15-dim);
    letter-spacing: .08em; text-transform: uppercase;
}
.educore-v15 .ec-v15-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.educore-v15 .ec-v15-product-stat {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    border-radius: 12px;
    padding: 12px;
}
.educore-v15 .ec-v15-product-stat-label {
    font-size: .65rem; color: var(--ec-ink-15-dim);
    text-transform: uppercase; letter-spacing: .1em;
}
.educore-v15 .ec-v15-product-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem; font-weight: 700; color: #fff;
    margin-top: 4px; line-height: 1;
}
.educore-v15 .ec-v15-product-stat-delta {
    font-size: .72rem; color: var(--ec-cyan); margin-top: 4px;
}
.educore-v15 .ec-v15-product-stat-delta.is-pink { color: var(--ec-pink); }

.educore-v15 .ec-v15-product-chart {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    position: relative;
    height: 38%;
    min-height: 130px;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 24px;
}
.educore-v15 .ec-v15-product-chart-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .72rem; color: var(--ec-ink-15-dim);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 8px;
}
.educore-v15 .ec-v15-product-chart svg { width: 100%; height: calc(100% - 28px); display: block; }

.educore-v15 .ec-v15-product-feed {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .82rem;
    color: #fff;
    display: flex; align-items: center; gap: 10px;
}
.educore-v15 .ec-v15-product-feed-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #10B981; box-shadow: 0 0 8px #10B981;
    flex-shrink: 0;
    animation: ec-v15-pulse 2s ease-in-out infinite;
}
.educore-v15 .ec-v15-product-feed-time { margin-left: auto; color: var(--ec-ink-15-dim); font-size: .72rem; }

/* OVERLAPPING widget cards (floating around the main panel) */
.educore-v15 .ec-v15-product-widget {
    position: absolute;
    background: rgba(7,11,20,.88);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.22) inset;
    z-index: 5;
    animation: ec-v15-float-tag 6s ease-in-out infinite;
    min-width: 220px;
}
.educore-v15 .ec-v15-product-widget.is-notif {
    top: 16%; right: -36px;
    animation-delay: .8s;
}
.educore-v15 .ec-v15-product-widget.is-ai {
    bottom: 10%; left: -42px;
    min-width: 240px;
    animation-delay: 1.6s;
}
.educore-v15 .ec-v15-product-widget-row {
    display: flex; align-items: center; gap: 12px;
}
.educore-v15 .ec-v15-product-widget-ic {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--ec-grad-accent);
    color: #fff; flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(37,99,235,.45);
}
.educore-v15 .ec-v15-product-widget.is-ai .ec-v15-product-widget-ic {
    background: linear-gradient(135deg, var(--ec-purple), var(--ec-pink));
    box-shadow: 0 8px 18px rgba(124,58,237,.45);
}
.educore-v15 .ec-v15-product-widget strong {
    display: block; color: #fff; font-size: .88rem; line-height: 1.2;
}
.educore-v15 .ec-v15-product-widget span {
    color: var(--ec-ink-15-dim); font-size: .76rem;
}
.educore-v15 .ec-v15-product-widget-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10B981; box-shadow: 0 0 12px #10B981;
    animation: ec-v15-pulse 1.6s ease-in-out infinite;
}

@media (max-width: 960px) {
    .educore-v15 .ec-v15-product { aspect-ratio: auto; }
    .educore-v15 .ec-v15-product-main { transform: none; animation: none; }
    .educore-v15 .ec-v15-product-widget.is-notif { right: 10px; }
    .educore-v15 .ec-v15-product-widget.is-ai { left: 10px; }
}

/* ---------- v0.15 floating dashboard mockup (right of hero) ---------- */
.educore-v15 .ec-v15-mockup {
    position: relative; perspective: 1200px;
    will-change: transform;
}
.educore-v15 .ec-v15-mockup-inner {
    position: relative;
    transform-style: preserve-3d;
    animation: ec-v15-float 7s ease-in-out infinite;
}
@keyframes ec-v15-float {
    0%, 100% { transform: translateY(0) rotateX(6deg) rotateY(-8deg); }
    50%      { transform: translateY(-14px) rotateX(8deg) rotateY(-6deg); }
}
.educore-v15 .ec-v15-mockup-frame {
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid var(--ec-glass-line);
    border-radius: 24px;
    padding: 22px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--ec-shadow-15), 0 40px 80px rgba(124,58,237,.25);
}
.educore-v15 .ec-v15-mockup-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-mockup-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.15); }
.educore-v15 .ec-v15-mockup-dot:nth-child(1) { background: #FF5F57; }
.educore-v15 .ec-v15-mockup-dot:nth-child(2) { background: #FEBC2E; }
.educore-v15 .ec-v15-mockup-dot:nth-child(3) { background: #28C840; }
.educore-v15 .ec-v15-mockup-title {
    margin-left: 12px; font-size: .85rem; color: var(--ec-ink-15-dim);
}
.educore-v15 .ec-v15-mockup-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
.educore-v15 .ec-v15-mockup-card {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    border-radius: 14px; padding: 14px;
}
.educore-v15 .ec-v15-mockup-card-label {
    font-size: .72rem; color: var(--ec-ink-15-dim); text-transform: uppercase; letter-spacing: .08em;
}
.educore-v15 .ec-v15-mockup-card-value {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700;
    color: #fff; margin-top: 4px;
}
.educore-v15 .ec-v15-mockup-card-value .pos { color: var(--ec-cyan); font-size: .85rem; margin-left: 6px; }
.educore-v15 .ec-v15-mockup-chart {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    border-radius: 14px; padding: 14px;
    height: 120px;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 24px;
    position: relative; overflow: hidden;
}
.educore-v15 .ec-v15-mockup-chart svg { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.educore-v15 .ec-v15-mockup-notif {
    position: absolute; top: 30%; right: -28px;
    background: linear-gradient(135deg, var(--ec-purple) 0%, var(--ec-blue) 100%);
    color: #fff; padding: 12px 16px; border-radius: 14px;
    font-size: .8rem; font-weight: 600;
    box-shadow: 0 16px 40px rgba(124,58,237,.45);
    display: flex; align-items: center; gap: 8px;
    animation: ec-v15-float-tag 5s ease-in-out infinite 1.5s;
}
@keyframes ec-v15-float-tag {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}
.educore-v15 .ec-v15-mockup-ai {
    position: absolute; bottom: -20px; left: -32px;
    background: rgba(7,11,20,.85);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 14px 18px; border-radius: 16px;
    font-size: .85rem; color: var(--ec-ink-15);
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    animation: ec-v15-float-tag 6s ease-in-out infinite;
}
.educore-v15 .ec-v15-mockup-ai-bot {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--ec-grad-cyan);
    display: grid; place-items: center;
    font-size: 1rem;
}

/* ---------- v0.15.2 SECTION shell — varied rhythm + left-aligned heads ---------- */
.educore-v15 .ec-v15-section { position: relative; padding: 88px 0; }
.educore-v15 .ec-v15-section-tight    { padding: 52px 0; }
.educore-v15 .ec-v15-section-spacious { padding: 132px 0; }
/* per ChatGPT brief: STOP CENTERING EVERYTHING.
   Section heads are left-aligned with offset + clamped width. */
.educore-v15 .ec-v15-section-head {
    text-align: left;
    max-width: 680px;
    margin: 0 0 56px;
    padding-right: 24px;
}
.educore-v15 .ec-v15-section-head.is-center {
    text-align: center; margin-left: auto; margin-right: auto;
}
.educore-v15 .ec-v15-section-head h2 { margin: 18px 0 14px; }
.educore-v15 .ec-v15-section-head p { font-size: 1.08rem; line-height: 1.7; }

/* ---------- v0.15 analytics cards row ---------- */
.educore-v15 .ec-v15-analytics {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    margin-bottom: 36px;
}
.educore-v15 .ec-v15-anal-card {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 18px; padding: 22px;
    transition: transform .35s var(--ec-ease-15), border-color .35s, box-shadow .35s;
}
.educore-v15 .ec-v15-anal-card:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,.45);
    box-shadow: 0 24px 48px rgba(34,211,238,.18);
}
.educore-v15 .ec-v15-anal-head { display: flex; align-items: center; gap: 10px; }
.educore-v15 .ec-v15-anal-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--ec-purple-soft); color: var(--ec-purple);
}
.educore-v15 .ec-v15-anal-icon.is-cyan { background: var(--ec-cyan-soft); color: var(--ec-cyan); }
.educore-v15 .ec-v15-anal-icon.is-blue { background: var(--ec-blue-soft); color: var(--ec-blue); }
.educore-v15 .ec-v15-anal-icon.is-pink { background: rgba(236,72,153,.16); color: var(--ec-pink); }
.educore-v15 .ec-v15-anal-label { font-size: .78rem; color: var(--ec-ink-15-dim); text-transform: uppercase; letter-spacing: .1em; }
.educore-v15 .ec-v15-anal-value {
    font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700;
    color: #fff; margin: 14px 0 4px;
}
.educore-v15 .ec-v15-anal-delta { font-size: .85rem; color: var(--ec-cyan); }
.educore-v15 .ec-v15-anal-delta.is-down { color: var(--ec-pink); }

/* dashboard preview big card */
.educore-v15 .ec-v15-dash-preview {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    border-radius: 22px; padding: 28px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--ec-shadow-15);
    display: grid; grid-template-columns: 2fr 1fr; gap: 22px;
}
.educore-v15 .ec-v15-dash-chart {
    background: var(--ec-deep-2); border-radius: 16px;
    padding: 22px; min-height: 280px;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 36px 28px;
    position: relative; overflow: hidden;
}
.educore-v15 .ec-v15-dash-feed { display: flex; flex-direction: column; gap: 10px; }
.educore-v15 .ec-v15-dash-feed-item {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    padding: 12px 14px; border-radius: 12px;
    font-size: .88rem; color: var(--ec-ink-15);
}
.educore-v15 .ec-v15-dash-feed-item .when {
    display: block; font-size: .72rem; color: var(--ec-ink-15-dim); margin-top: 4px;
}

/* ---------- v0.15 SPLIT row (Student / Parent / AI) ---------- */
.educore-v15 .ec-v15-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.educore-v15 .ec-v15-split.is-reverse > :first-child { order: 2; }
.educore-v15 .ec-v15-split h2 { margin-bottom: 18px; }
.educore-v15 .ec-v15-split p { font-size: 1.05rem; line-height: 1.7; }
.educore-v15 .ec-v15-feature-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.educore-v15 .ec-v15-feature-list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px; border-radius: 12px;
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    transition: transform .25s var(--ec-ease-15), background .25s;
}
.educore-v15 .ec-v15-feature-list li:hover {
    transform: translateX(4px);
    background: var(--ec-glass-strong);
}
.educore-v15 .ec-v15-feature-list .ic {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; flex: 0 0 36px;
    background: var(--ec-grad-accent); color: #fff;
}
.educore-v15 .ec-v15-feature-list strong { color: #fff; display: block; margin-bottom: 4px; }
.educore-v15 .ec-v15-feature-list span { color: var(--ec-ink-15-soft); font-size: .92rem; }

/* v0.16 — flow CTAs sitting under each feature list / How-it-works flow.
   Inherits .ec-btn-ghost styling; this just controls layout + breathing room. */
.educore-v15 .ec-v15-section-next {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 28px;
}
.educore-v15 .ec-v15-section-next .ec-btn { font-size: .92rem; }

/* visual side (when no real image — use abstract card stack) */
.educore-v15 .ec-v15-visual-stack {
    position: relative; min-height: 520px;
}
.educore-v15 .ec-v15-visual-stack .layer {
    position: absolute; border-radius: 22px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--ec-shadow-15);
    overflow: hidden;
}
/* Staircase three layers without overlap:
   - layer-1 (My child) occupies the top half
   - layer-2 (Notice from school) sits in the middle, shifted right + down
   - layer-3 (parent photo) is a small fixed-height card pinned to the bottom-right corner */
.educore-v15 .ec-v15-visual-stack .layer-1 {
    top: 0; left: 0; right: 70px;
    height: 260px;
    padding: 24px;
}
.educore-v15 .ec-v15-visual-stack .layer-2 {
    top: 220px; left: 60px; right: 0;
    height: 160px;
    padding: 20px 22px;
}
.educore-v15 .ec-v15-visual-stack .layer-3 {
    bottom: 0; right: 0;
    width: 220px; height: 220px;
    padding: 0;
    background: linear-gradient(135deg, var(--ec-purple), var(--ec-blue));
    border: 1px solid var(--ec-glass-line);
}
/* tablet/mobile — collapse the absolute stack into a vertical column */
@media (max-width: 760px) {
    .educore-v15 .ec-v15-visual-stack { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
    .educore-v15 .ec-v15-visual-stack .layer { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; min-height: 140px; }
    .educore-v15 .ec-v15-visual-stack .layer-3 { aspect-ratio: 16 / 10; height: auto; }
}

/* ---------- v0.15 E-LIBRARY floating book cards ---------- */
.educore-v15 .ec-v15-library {
    position: relative; min-height: 560px;
    display: flex; align-items: center; justify-content: center;
}
.educore-v15 .ec-v15-search {
    display: flex; gap: 8px; max-width: 480px; margin: 0 auto 48px;
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 14px; padding: 6px;
}
.educore-v15 .ec-v15-search input {
    flex: 1; background: transparent; border: 0; outline: 0;
    padding: 10px 14px; color: #fff; font-size: .95rem;
    font-family: inherit;
}
.educore-v15 .ec-v15-search input::placeholder { color: var(--ec-ink-15-dim); }
.educore-v15 .ec-v15-search button {
    padding: 10px 18px; border-radius: 10px; border: 0;
    background: var(--ec-grad-accent); color: #fff; font-weight: 600;
    font-family: 'Poppins', sans-serif; cursor: pointer;
}
.educore-v15 .ec-v15-books {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.educore-v15 .ec-v15-book {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 18px; padding: 22px;
    transition: transform .4s var(--ec-ease-15), box-shadow .4s, border-color .4s;
    cursor: pointer;
    display: block; text-decoration: none; color: inherit;
}
.educore-v15 a.ec-v15-book:hover,
.educore-v15 a.ec-v15-book:focus { text-decoration: none; color: inherit; }
.educore-v15 .ec-v15-book.is-overflow { display: none; }
.educore-v15 .ec-v15-book:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(34,211,238,.45);
    box-shadow: 0 30px 60px rgba(34,211,238,.20), 0 0 0 1px rgba(124,58,237,.30) inset;
}
.educore-v15 .ec-v15-book-cover {
    aspect-ratio: 16/9; border-radius: 12px;
    background-size: cover; background-position: center;
    background: linear-gradient(160deg, var(--ec-purple) 0%, var(--ec-blue) 100%);
    margin-bottom: 14px; position: relative; overflow: hidden;
    display: grid; place-items: center; color: #fff; font-size: 2rem;
    box-shadow: 0 12px 32px rgba(37,99,235,.45);
}
.educore-v15 .ec-v15-book-cover.is-cyan  { background: linear-gradient(160deg, var(--ec-cyan), var(--ec-blue)); }
.educore-v15 .ec-v15-book-cover.is-pink  { background: linear-gradient(160deg, var(--ec-pink), var(--ec-purple)); }
.educore-v15 .ec-v15-book-cover.is-green { background: linear-gradient(160deg, #10B981, var(--ec-cyan)); }
.educore-v15 .ec-v15-book strong { color: #fff; display: block; margin-bottom: 4px; }
.educore-v15 .ec-v15-book span { color: var(--ec-ink-15-dim); font-size: .85rem; }
.educore-v15 .ec-v15-book-progress {
    height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 12px; overflow: hidden;
}
.educore-v15 .ec-v15-book-progress > span {
    display: block; height: 100%;
    background: var(--ec-grad-cyan);
    box-shadow: 0 0 12px var(--ec-cyan);
}

/* ---------- v0.15 WHY-EDUCORE 4-card grid ---------- */
.educore-v15 .ec-v15-why-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.educore-v15 .ec-v15-why-card {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 18px; padding: 28px;
    transition: transform .35s var(--ec-ease-15), border-color .35s, box-shadow .35s;
}
.educore-v15 .ec-v15-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124,58,237,.40);
    box-shadow: 0 30px 60px rgba(124,58,237,.20);
}
.educore-v15 .ec-v15-why-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 18px;
    background: var(--ec-grad-accent); color: #fff;
    box-shadow: 0 12px 28px rgba(37,99,235,.40);
}
.educore-v15 .ec-v15-why-card h3 { margin: 0 0 8px; }
.educore-v15 .ec-v15-why-card p { font-size: .95rem; color: var(--ec-ink-15-soft); margin: 0; }

/* ---------- v0.15 FINAL CTA band ---------- */
.educore-v15 .ec-v15-cta {
    position: relative; padding: 140px 0;
    text-align: center;
}
.educore-v15 .ec-v15-cta-inner {
    max-width: 760px; margin: 0 auto; padding: 60px 40px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-radius: 28px;
    box-shadow: var(--ec-shadow-15), 0 0 80px var(--ec-purple-soft);
    position: relative; overflow: hidden;
}
.educore-v15 .ec-v15-cta-inner::before {
    content: ""; position: absolute; inset: -2px;
    background: conic-gradient(from 180deg, var(--ec-purple), var(--ec-cyan), var(--ec-blue), var(--ec-purple));
    border-radius: 30px; z-index: -1; opacity: .55; filter: blur(20px);
}
.educore-v15 .ec-v15-cta h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 14px; }
.educore-v15 .ec-v15-cta p { font-size: 1.05rem; margin-bottom: 28px; }

/* ---------- v0.15 NOTICE BOARD ---------- */
.educore-v15 .ec-v15-nb-hero {
    padding: 180px 0 80px;
    text-align: center;
    position: relative; overflow: hidden;
}
.educore-v15 .ec-v15-nb-hero h1 { margin: 18px auto 14px; max-width: 800px; }
.educore-v15 .ec-v15-nb-hero p { max-width: 600px; margin: 0 auto; }
.educore-v15 .ec-v15-nb-search {
    max-width: 560px; margin: 36px auto 0;
    display: flex; gap: 8px;
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 14px; padding: 6px;
}
.educore-v15 .ec-v15-nb-search input {
    flex: 1; background: transparent; border: 0; outline: 0;
    padding: 12px 16px; color: #fff; font-size: .98rem; font-family: inherit;
}
.educore-v15 .ec-v15-nb-search input::placeholder { color: var(--ec-ink-15-dim); }
.educore-v15 .ec-v15-nb-filters {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin: 32px 0 56px;
}
.educore-v15 .ec-v15-nb-chip {
    padding: 10px 18px; border-radius: 999px;
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    color: var(--ec-ink-15-soft); cursor: pointer;
    font-size: .88rem; font-weight: 500;
    transition: all .25s var(--ec-ease-15);
    text-decoration: none;
}
.educore-v15 .ec-v15-nb-chip:hover,
.educore-v15 .ec-v15-nb-chip.is-active {
    background: var(--ec-grad-accent); color: #fff; border-color: transparent;
    box-shadow: 0 10px 24px rgba(37,99,235,.35);
}
/* v0.15.2: true masonry via CSS columns (per ChatGPT brief — no equal rows) */
.educore-v15 .ec-v15-nb-grid {
    columns: 3 320px;
    column-gap: 22px;
    max-width: 1240px; margin: 0 auto 100px; padding: 0 28px;
}
.educore-v15 .ec-v15-nb-card {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 18px; padding: 26px;
    transition: transform .35s var(--ec-ease-15), box-shadow .35s, border-color .35s;
    position: relative;
    /* prevent card splitting across columns + create natural varied heights */
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    display: inline-block; width: 100%;
    margin-bottom: 22px;
}
.educore-v15 .ec-v15-nb-card.is-urgent { padding: 32px 26px; }
.educore-v15 .ec-v15-nb-card.is-urgent h3 { font-size: 1.35rem; }
.educore-v15 .ec-v15-nb-card:hover {
    transform: translateY(-8px);
    border-color: rgba(34,211,238,.40);
    box-shadow: 0 30px 60px rgba(34,211,238,.18);
}
.educore-v15 .ec-v15-nb-card.is-urgent::before {
    content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px;
    background: var(--ec-pink);
    border-radius: 2px;
    box-shadow: 0 0 12px var(--ec-pink);
}
.educore-v15 .ec-v15-nb-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 6px;
    background: var(--ec-purple-soft); color: var(--ec-purple);
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 14px;
}
.educore-v15 .ec-v15-nb-tag.is-cyan { background: var(--ec-cyan-soft); color: var(--ec-cyan); }
.educore-v15 .ec-v15-nb-tag.is-blue { background: var(--ec-blue-soft); color: var(--ec-blue); }
.educore-v15 .ec-v15-nb-tag.is-pink { background: rgba(236,72,153,.16); color: var(--ec-pink); }
.educore-v15 .ec-v15-nb-card h3 { margin: 0 0 8px; }
.educore-v15 .ec-v15-nb-card p { font-size: .92rem; color: var(--ec-ink-15-soft); margin: 0 0 16px; }
.educore-v15 .ec-v15-nb-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .82rem; color: var(--ec-ink-15-dim);
    padding-top: 14px; border-top: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-nb-more {
    color: var(--ec-cyan); text-decoration: none; font-weight: 600;
}
.educore-v15 .ec-v15-nb-more:hover { text-shadow: 0 0 12px var(--ec-cyan); }

/* ---------- v0.15 ABOUT ---------- */
.educore-v15 .ec-v15-about-hero {
    padding: 180px 0 80px; text-align: center;
}
.educore-v15 .ec-v15-about-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
}
.educore-v15 .ec-v15-about-col {
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 20px; padding: 36px;
}
.educore-v15 .ec-v15-about-col h3 {
    font-size: 1.4rem; margin: 0 0 14px;
    background: var(--ec-grad-cyan);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.educore-v15 .ec-v15-about-philosophy {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    margin: 56px 0 0;
}

/* ---------- v0.15 SIGN-IN ---------- */
.educore-v15 .ec-v15-signin {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-top: 80px;
}
.educore-v15 .ec-v15-signin-visual {
    position: relative; padding: 60px;
    display: grid; place-items: center;
    overflow: hidden;
}
.educore-v15 .ec-v15-signin-visual::before {
    content: ""; position: absolute; inset: 0;
    background: var(--ec-grad-aurora);
    opacity: .8;
}
.educore-v15 .ec-v15-signin-mockup {
    position: relative; z-index: 2;
    width: 100%; max-width: 480px;
}
.educore-v15 .ec-v15-signin-form-wrap {
    display: grid; place-items: center; padding: 60px;
}
.educore-v15 .ec-v15-signin-card {
    width: 100%; max-width: 440px;
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-radius: 22px; padding: 44px;
    box-shadow: var(--ec-shadow-15);
}
.educore-v15 .ec-v15-signin-card h2 { font-size: 1.8rem; margin: 0 0 6px; }
.educore-v15 .ec-v15-signin-card .sub { color: var(--ec-ink-15-soft); margin: 0 0 28px; font-size: .95rem; }
.educore-v15 .ec-v15-input {
    display: block; margin-bottom: 18px;
}
.educore-v15 .ec-v15-input label {
    display: block; font-size: .82rem; color: var(--ec-ink-15-soft); margin-bottom: 8px; font-weight: 500;
}
.educore-v15 .ec-v15-input input {
    width: 100%; padding: 14px 16px;
    background: rgba(255,255,255,.04); border: 1px solid var(--ec-glass-line);
    border-radius: 12px; color: #fff; font-size: .98rem; font-family: inherit;
    transition: border-color .25s, box-shadow .25s;
    box-sizing: border-box;
}
.educore-v15 .ec-v15-input input:focus {
    outline: 0; border-color: var(--ec-cyan);
    box-shadow: 0 0 0 4px var(--ec-cyan-soft);
}
.educore-v15 .ec-v15-input input::placeholder { color: var(--ec-ink-15-dim); }

/* Show-password toggle inside the password field on the sign-in page */
.educore-v15 .ec-v15-input-pwd { position: relative; }
.educore-v15 .ec-v15-input-pwd input {
    padding-right: 48px;   /* room for the eye button */
}
.educore-v15 .ec-pwd-toggle {
    position: absolute;
    right: 6px;
    /* sit on top of the input — input top = label height (~22px) + margin-bottom 8px */
    bottom: 6px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ec-ink-15-soft);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.educore-v15 .ec-pwd-toggle:hover {
    color: var(--ec-cyan);
    background: rgba(34,211,238,.10);
    border-color: rgba(34,211,238,.25);
}
.educore-v15 .ec-pwd-toggle:focus-visible {
    outline: 2px solid var(--ec-cyan);
    outline-offset: 2px;
}
.educore-v15 .ec-pwd-ic { display: none; }
.educore-v15 .ec-pwd-ic-show { display: block; }
.educore-v15 .ec-pwd-toggle.is-shown .ec-pwd-ic-show { display: none; }
.educore-v15 .ec-pwd-toggle.is-shown .ec-pwd-ic-hide { display: block; }
.educore-v15 .ec-pwd-toggle.is-shown { color: var(--ec-cyan); }
.educore-v15 .ec-v15-signin-row {
    display: flex; justify-content: space-between; align-items: center;
    margin: 4px 0 22px; font-size: .88rem;
}
.educore-v15 .ec-v15-signin-row a { color: var(--ec-cyan); text-decoration: none; }
.educore-v15 .ec-v15-signin-row label { color: var(--ec-ink-15-soft); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.educore-v15 .ec-v15-signin-btn {
    width: 100%; padding: 16px; border-radius: 12px; border: 0;
    background: var(--ec-grad-accent); color: #fff;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(37,99,235,.45);
    transition: transform .25s, box-shadow .25s;
}
.educore-v15 .ec-v15-signin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(124,58,237,.55);
}
.educore-v15 .ec-v15-signin-alert {
    padding: 12px 14px; border-radius: 10px; margin-bottom: 18px;
    font-size: .88rem;
}
.educore-v15 .ec-v15-signin-alert.err {
    background: rgba(236,72,153,.12); border: 1px solid rgba(236,72,153,.28); color: #FBCFE8;
}
.educore-v15 .ec-v15-signin-alert.ok {
    background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.28); color: #A5F3FC;
}

/* ---------- v0.15 FOOTER override ---------- */
body.educore-v15 .ec-footer , body.educore-course-skin .ec-footer {
    background: #0B0F0E;                 /* LB warm charcoal */
    border-top: 1px solid rgba(245,243,238,.06);
    color: #C2BEB5;                      /* warm stone body text — brighter, still atmospheric */
    padding: 60px 0 30px;
}
body.educore-v15 .ec-footer-inner , body.educore-course-skin .ec-footer-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px;
}
body.educore-v15 .ec-footer h5 , body.educore-course-skin .ec-footer h5 {
    color: #FFFFFF;                      /* pure white heading */
    margin: 0 0 18px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}
body.educore-v15 .ec-footer a , body.educore-course-skin .ec-footer a {
    display: block;                  /* one link per row, same as original */
    position: relative;
    width: fit-content;              /* underline only spans the text width */
    color: #DCDCE5 !important;
    text-decoration: none;
    padding: 6px 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.4;
    /* Signature cubic-bezier — matches header + sidebar interactive surfaces. */
    transition: color .28s cubic-bezier(.32,.72,0,1) !important;
}
/* Hairline underline that fades in on hover — opacity-only, no slide, no
 * width animation. Cleanest possible "I am hoverable" cue. */
body.educore-v15 .ec-footer a::after , body.educore-course-skin .ec-footer a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity .28s cubic-bezier(.32,.72,0,1);
    pointer-events: none;
}
body.educore-v15 .ec-footer a:hover::after , body.educore-course-skin .ec-footer a:hover::after { opacity: .55; }
body.educore-v15 .ec-footer a:hover , body.educore-course-skin .ec-footer a:hover {
    color: #FFFFFF !important;
    transform: none;
}
body.educore-v15 .ec-footer > div > p , body.educore-course-skin .ec-footer > div > p {  /* lede paragraph under "EduCore" brand */
    color: #C2BEB5;                      /* warm stone — readable, not faded */
    line-height: 1.6;
    font-size: .92rem;
    letter-spacing: .2px;
    max-width: 320px;
}
body.educore-v15 .ec-footer > div > strong , body.educore-course-skin .ec-footer > div > strong {  /* "EduCore" wordmark in brand block */
    display: block;
    color: #F5F3EE;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .3px;
    margin-bottom: 10px;
}
body.educore-v15 .ec-footer-bottom , body.educore-course-skin .ec-footer-bottom {
    max-width: 1280px; margin: 36px auto 0; padding: 24px 28px 0;
    border-top: 1px solid rgba(245,243,238,.06);
    font-size: .85rem;
    color: #C2BEB5;                      /* brighter warm stone */
}

/* v0.16 simplified footer: brand block on the left, single horizontal nav row on the right,
   matching the home-page top-nav grammar (same gap, padding, font size, hover behavior). */
body.educore-v15 .ec-footer-inner-simple , body.educore-course-skin .ec-footer-inner-simple {
    grid-template-columns: 2fr 3fr;
    align-items: center;
}
body.educore-v15 .ec-footer-nav , body.educore-course-skin .ec-footer-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: flex-end;
}
body.educore-v15 .ec-footer-nav a , body.educore-course-skin .ec-footer-nav a {
    display: inline-block;
    width: auto;                         /* override the per-row width: fit-content */
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: .94rem;
    letter-spacing: .3px;
    color: #DCDCE5 !important;
    transition: color .3s ease, background .3s ease;
}
body.educore-v15 .ec-footer-nav a::after , body.educore-course-skin .ec-footer-nav a::after { display: none; }   /* drop the fade-in underline */
body.educore-v15 .ec-footer-nav a:hover , body.educore-course-skin .ec-footer-nav a:hover {
    color: #FFFFFF !important;
    background: rgba(255,255,255,.06);
}
@media (max-width: 768px) {
    body.educore-v15 .ec-footer-inner-simple , body.educore-course-skin .ec-footer-inner-simple { grid-template-columns: 1fr; gap: 20px; }
    body.educore-v15 .ec-footer-nav , body.educore-course-skin .ec-footer-nav { justify-content: flex-start; }
}
body.educore-v15 .ec-footer-bottom-row , body.educore-course-skin .ec-footer-bottom-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
body.educore-v15 .ec-credit strong { color: #fff; margin-left: 6px; }

/* Designer signature — restored polished treatment for the footer credit line.
   Sits centred at the bottom: © year EduCore · Designed by ★ Arnold Kigozi. */
body.educore-v15 .ec-footer-line , body.educore-course-skin .ec-footer-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #C2BEB5;                      /* warm stone, brighter */
    font-size: .85rem;
    letter-spacing: .3px;
}
body.educore-v15 .ec-footer-copy , body.educore-course-skin .ec-footer-copy { color: #F5F3EE; font-weight: 500; }
body.educore-v15 .ec-footer-sep  , body.educore-course-skin .ec-footer-sep  { color: rgba(245,243,238,.20); margin: 0 2px; }
body.educore-v15 .ec-footer-credit , body.educore-course-skin .ec-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.educore-v15 .ec-footer-credit-label , body.educore-course-skin .ec-footer-credit-label { color: #C2BEB5; }
body.educore-v15 .ec-footer-credit-name , body.educore-course-skin .ec-footer-credit-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 99px;
    background: rgba(245,243,238,.04);
    border: 1px solid rgba(245,243,238,.10);
    transition: background .3s ease, border-color .3s ease;
}
body.educore-v15 .ec-footer-credit-name:hover , body.educore-course-skin .ec-footer-credit-name:hover {
    background: rgba(245,243,238,.08);
    border-color: rgba(245,243,238,.18);
}
body.educore-v15 .ec-footer-credit-spark , body.educore-course-skin .ec-footer-credit-spark {
    color: #D8CBB8;                      /* soft beige sparkle */
    flex-shrink: 0;
}
body.educore-v15 .ec-footer-credit-name strong , body.educore-course-skin .ec-footer-credit-name strong {
    color: #F5F3EE;                      /* warm off-white signature, no gradient */
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: .3px;
    margin: 0;
}

/* ---------- v0.15 RESPONSIVE ---------- */
@media (max-width: 960px) {
    .educore-v15 .ec-v15-hero-grid { grid-template-columns: 1fr; gap: 60px; }
    .educore-v15 .ec-v15-mockup-notif { right: 12px; }
    .educore-v15 .ec-v15-mockup-ai { left: 0; }
    .educore-v15 .ec-v15-split,
    .educore-v15 .ec-v15-about-cols,
    .educore-v15 .ec-v15-signin { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-signin-visual { display: none; }
    .educore-v15 .ec-v15-analytics { grid-template-columns: 1fr 1fr; }
    .educore-v15 .ec-v15-dash-preview { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-why-grid { grid-template-columns: 1fr 1fr; }
    .educore-v15 .ec-v15-books { grid-template-columns: 1fr 1fr; }
    .educore-v15 .ec-v15-about-philosophy { grid-template-columns: 1fr; }
    body.educore-v15 .ec-footer-inner , body.educore-course-skin .ec-footer-inner { grid-template-columns: 1fr 1fr; }
    body.educore-v15 .ec-nav-links { display: none; }
    .educore-v15 .ec-v15-hero-stats { flex-wrap: wrap; gap: 22px; }
}
@media (max-width: 560px) {
    .educore-v15 .ec-v15-analytics { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-why-grid { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-books { grid-template-columns: 1fr; }
    body.educore-v15 .ec-footer-inner , body.educore-course-skin .ec-footer-inner { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-signin-form-wrap,
    .educore-v15 .ec-v15-signin-visual { padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    body.educore-v15::before { animation: none; }
    .educore-v15 .ec-v15-mockup-inner,
    .educore-v15 .ec-v15-mockup-notif,
    .educore-v15 .ec-v15-mockup-ai { animation: none; }
}

/* ---------- v0.15 APP SHELL (private sidebar dashboard) ---------- */
body.educore-v15-app .ec-nav { display: none; }
body.educore-v15-app .site-main,
body.educore-v15-app main#content,
body.educore-v15-app .page-content { padding: 0; max-width: 100%; }
body.educore-v15-app .ec-footer { display: none; } /* sidebar replaces it */
body.educore-v15-app::before { opacity: .35; }

.educore-v15-app .ec-v15-app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    gap: 0;
}
.educore-v15-app .ec-v15-app-side {
    background: rgba(7, 11, 20, .65);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-right: 1px solid var(--ec-glass-line);
    padding: 28px 18px;
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh;
}
.educore-v15-app .ec-v15-app-brand {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem;
    padding: 4px 6px 24px; margin-bottom: 8px;
    border-bottom: 1px solid var(--ec-glass-line);
}
.educore-v15-app .ec-v15-app-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; padding-top: 16px; }
.educore-v15-app .ec-v15-app-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 10px;
    color: var(--ec-ink-15-soft);
    text-decoration: none; font-size: .94rem; font-weight: 500;
    transition: all .25s var(--ec-ease-15);
    position: relative;
}
.educore-v15-app .ec-v15-app-link-ic {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--ec-glass);
    font-size: .95rem;
}
.educore-v15-app .ec-v15-app-link:hover {
    background: var(--ec-glass);
    color: #fff;
}
.educore-v15-app .ec-v15-app-link.is-active {
    background: var(--ec-grad-accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37,99,235,.35);
}
.educore-v15-app .ec-v15-app-link.is-active .ec-v15-app-link-ic { background: rgba(255,255,255,.18); }
.educore-v15-app .ec-v15-app-foot { padding-top: 16px; border-top: 1px solid var(--ec-glass-line); }

.educore-v15-app .ec-v15-app-main {
    padding: 32px 36px 64px;
    min-width: 0; /* prevent grid blowout */
}
.educore-v15-app .ec-v15-app-top {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 22px; flex-wrap: wrap;
    padding-bottom: 28px; margin-bottom: 28px;
    border-bottom: 1px solid var(--ec-glass-line);
}
.educore-v15-app .ec-v15-app-top h1 { line-height: 1.15; }
.educore-v15-app .ec-v15-app-top-right { display: flex; align-items: center; gap: 14px; }
.educore-v15-app .ec-v15-app-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ec-grad-accent);
    color: #fff; font-weight: 700;
    box-shadow: 0 8px 20px rgba(37,99,235,.35);
}

/* Re-skin existing v0.14 cards on dark — fallback so role dashboards inherit */
body.educore-v15-app .ec-card,
body.educore-v15-app .ec-stat-card,
body.educore-v15-app .ec-course-card {
    background: var(--ec-glass) !important;
    border: 1px solid var(--ec-glass-line) !important;
    color: var(--ec-ink-15);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 16px;
    box-shadow: none;
}
body.educore-v15-app .ec-card h1, body.educore-v15-app .ec-card h2,
body.educore-v15-app .ec-card h3, body.educore-v15-app .ec-card h4,
body.educore-v15-app .ec-stat-card strong { color: #fff; }
body.educore-v15-app .ec-muted,
body.educore-v15-app .ec-stat-card .ec-stat-label { color: var(--ec-ink-15-soft); }
body.educore-v15-app .ec-pill,
body.educore-v15-app .ec-pill-soft {
    background: var(--ec-glass) !important;
    color: var(--ec-cyan) !important;
    border: 1px solid var(--ec-glass-line);
}
body.educore-v15-app table { color: var(--ec-ink-15); }
body.educore-v15-app th, body.educore-v15-app td { border-color: var(--ec-glass-line) !important; }
body.educore-v15-app input[type="text"],
body.educore-v15-app input[type="search"],
body.educore-v15-app input[type="number"],
body.educore-v15-app input[type="email"],
body.educore-v15-app input[type="password"],
body.educore-v15-app textarea,
body.educore-v15-app select {
    background: rgba(255,255,255,.04); border: 1px solid var(--ec-glass-line);
    color: #fff; border-radius: 10px; padding: 10px 12px;
}
body.educore-v15-app input::placeholder, body.educore-v15-app textarea::placeholder { color: var(--ec-ink-15-dim); }

@media (max-width: 900px) {
    .educore-v15-app .ec-v15-app-shell { grid-template-columns: 1fr; }
    .educore-v15-app .ec-v15-app-side {
        position: relative; height: auto; flex-direction: row; align-items: center;
        padding: 14px 18px; gap: 12px; overflow-x: auto;
    }
    .educore-v15-app .ec-v15-app-brand { padding: 0; margin: 0 14px 0 0; border: 0; }
    .educore-v15-app .ec-v15-app-nav { flex-direction: row; padding: 0; gap: 6px; }
    .educore-v15-app .ec-v15-app-link { padding: 8px 12px; }
    .educore-v15-app .ec-v15-app-link span:not(.ec-v15-app-link-ic) { display: none; }
    .educore-v15-app .ec-v15-app-foot { border-top: 0; padding: 0; }
    .educore-v15-app .ec-v15-app-main { padding: 22px 18px 48px; }
}

/* ============================================================
   v0.15.1 — composition components
   Reusable widgets so no section is text-only.
   ============================================================ */

/* TOAST / NOTIFICATION POPUP — floats over compositions */
.educore-v15 .ec-v15-toast {
    position: absolute;
    background: rgba(7, 11, 20, .85);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 14px 18px 14px 14px;
    border-radius: 14px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(124,58,237,.18) inset;
    min-width: 240px; max-width: 320px;
    z-index: 5;
    animation: ec-v15-toast-in .9s var(--ec-ease-15) both, ec-v15-toast-float 6s ease-in-out infinite 1s;
}
.educore-v15 .ec-v15-toast-ic {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    color: #fff;
    background: var(--ec-grad-accent);
    box-shadow: 0 8px 20px rgba(37,99,235,.45);
}
.educore-v15 .ec-v15-toast-ic.is-cyan  { background: linear-gradient(135deg, var(--ec-cyan), var(--ec-blue)); box-shadow: 0 8px 20px rgba(34,211,238,.45); }
.educore-v15 .ec-v15-toast-ic.is-pink  { background: linear-gradient(135deg, var(--ec-pink), var(--ec-purple)); box-shadow: 0 8px 20px rgba(236,72,153,.40); }
.educore-v15 .ec-v15-toast-ic.is-green { background: linear-gradient(135deg, #10B981, var(--ec-cyan)); box-shadow: 0 8px 20px rgba(16,185,129,.40); }
.educore-v15 .ec-v15-toast strong { display: block; color: #fff; font-size: .88rem; }
.educore-v15 .ec-v15-toast span { display: block; color: var(--ec-ink-15-dim); font-size: .78rem; margin-top: 2px; }
.educore-v15 .ec-v15-toast-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 12px #10B981;
    margin-left: 8px;
    animation: ec-v15-pulse 1.6s ease-in-out infinite;
}
@keyframes ec-v15-toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ec-v15-toast-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* PROGRESS RING — three sizes via --ring-size */
.educore-v15 .ec-v15-ring {
    position: relative;
    width: var(--ring-size, 120px); height: var(--ring-size, 120px);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.educore-v15 .ec-v15-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.educore-v15 .ec-v15-ring .track { stroke: rgba(255,255,255,.08); fill: none; }
.educore-v15 .ec-v15-ring .fill {
    fill: none;
    stroke: url(#ringGrad);
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(34,211,238,.55));
}
.educore-v15 .ec-v15-ring-label {
    position: absolute; inset: 0;
    display: grid; place-items: center; text-align: center;
}
.educore-v15 .ec-v15-ring-label strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 1.6rem; color: #fff;
}
.educore-v15 .ec-v15-ring-label span { display: block; color: var(--ec-ink-15-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.educore-v15 .ec-v15-ring-sm { --ring-size: 80px; }
.educore-v15 .ec-v15-ring-sm .ec-v15-ring-label strong { font-size: 1.1rem; }
.educore-v15 .ec-v15-ring-lg { --ring-size: 160px; }
.educore-v15 .ec-v15-ring-lg .ec-v15-ring-label strong { font-size: 2.2rem; }

/* COMPOSITION layouts — asymmetric grids */
.educore-v15 .ec-v15-asym {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 22px;
    align-items: stretch;
}
.educore-v15 .ec-v15-asym-side { display: flex; flex-direction: column; gap: 18px; }

/* v0.15.2 — "2 large + 4 small" composition (per ChatGPT brief) */
.educore-v15 .ec-v15-2x4 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.educore-v15 .ec-v15-2x4-bottom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 4px;
}
@media (max-width: 960px) {
    .educore-v15 .ec-v15-2x4 { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-2x4-bottom { grid-template-columns: 1fr 1fr; }
}

/* "Hero" feature card inside an asymmetric grid */
.educore-v15 .ec-v15-feat-hero {
    position: relative;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 22px;
    padding: 36px;
    overflow: hidden;
    box-shadow: var(--ec-shadow-15);
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 460px;
}
.educore-v15 .ec-v15-feat-hero::before {
    content: ""; position: absolute; top: -40%; right: -20%;
    width: 70%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(124,58,237,.35), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
}
.educore-v15 .ec-v15-feat-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; position: relative; z-index: 1; }
.educore-v15 .ec-v15-feat-hero h3 { font-size: 1.8rem; margin: 18px 0 10px; line-height: 1.15; }
.educore-v15 .ec-v15-feat-hero p { font-size: .98rem; line-height: 1.65; max-width: 460px; margin: 0; }
.educore-v15 .ec-v15-feat-hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-top: 28px; position: relative; z-index: 1;
    padding-top: 24px; border-top: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-feat-hero-stat strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 1.5rem; color: #fff;
}
.educore-v15 .ec-v15-feat-hero-stat span { font-size: .78rem; color: var(--ec-ink-15-dim); }

/* Compact side card */
.educore-v15 .ec-v15-feat-side {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 16px;
    padding: 22px;
    flex: 1;
    display: flex; gap: 14px; align-items: flex-start;
    transition: transform .25s var(--ec-ease-15), border-color .25s, box-shadow .25s;
}
.educore-v15 .ec-v15-feat-side:hover {
    transform: translateX(4px);
    border-color: rgba(34,211,238,.40);
    box-shadow: 0 16px 40px rgba(34,211,238,.16);
}
.educore-v15 .ec-v15-feat-side-ic {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--ec-grad-accent); color: #fff;
}
.educore-v15 .ec-v15-feat-side strong { color: #fff; display: block; margin-bottom: 4px; font-size: .98rem; }
.educore-v15 .ec-v15-feat-side p { font-size: .85rem; color: var(--ec-ink-15-soft); margin: 0; line-height: 1.55; }

/* AI CHAT TERMINAL mock */
.educore-v15 .ec-v15-chat {
    background: linear-gradient(160deg, rgba(7,11,20,.95) 0%, rgba(17,24,39,.95) 100%);
    border: 1px solid var(--ec-glass-line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--ec-shadow-15), 0 40px 80px rgba(124,58,237,.20);
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex; flex-direction: column;
}
.educore-v15 .ec-v15-chat-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-chat-bot {
    width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--ec-grad-cyan);
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(34,211,238,.40);
}
.educore-v15 .ec-v15-chat-head strong { color: #fff; font-size: .92rem; display: block; }
.educore-v15 .ec-v15-chat-head span { color: #10B981; font-size: .72rem; display: flex; align-items: center; gap: 6px; }
.educore-v15 .ec-v15-chat-head span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #10B981; box-shadow: 0 0 10px #10B981;
    animation: ec-v15-pulse 1.6s ease-in-out infinite;
}
.educore-v15 .ec-v15-chat-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.educore-v15 .ec-v15-chat-msg {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: .88rem; line-height: 1.5;
    max-width: 85%;
    animation: ec-v15-msg-in .6s var(--ec-ease-15) both;
}
.educore-v15 .ec-v15-chat-msg.is-user {
    align-self: flex-end;
    background: var(--ec-grad-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.educore-v15 .ec-v15-chat-msg.is-bot {
    align-self: flex-start;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--ec-glass-line);
    color: var(--ec-ink-15);
    border-bottom-left-radius: 4px;
}
.educore-v15 .ec-v15-chat-msg:nth-child(2) { animation-delay: .15s; }
.educore-v15 .ec-v15-chat-msg:nth-child(3) { animation-delay: .35s; }
.educore-v15 .ec-v15-chat-msg:nth-child(4) { animation-delay: .55s; }
.educore-v15 .ec-v15-chat-typing {
    align-self: flex-start;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--ec-glass-line);
    border-bottom-left-radius: 4px;
    display: inline-flex; gap: 5px;
    animation: ec-v15-msg-in .6s var(--ec-ease-15) .8s both;
    width: fit-content;
}
.educore-v15 .ec-v15-chat-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ec-cyan);
    animation: ec-v15-typing 1.4s ease-in-out infinite;
}
.educore-v15 .ec-v15-chat-typing span:nth-child(2) { animation-delay: .2s; }
.educore-v15 .ec-v15-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ec-v15-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ec-v15-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30%           { transform: translateY(-5px); opacity: 1; }
}
.educore-v15 .ec-v15-chat-suggest {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-chat-suggest span {
    padding: 6px 12px; border-radius: 999px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    font-size: .78rem;
    color: var(--ec-ink-15-soft);
    cursor: default;
}

/* SVG gradient defs holder (one per page is enough) */
.educore-v15 .ec-v15-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* mini horizontal bar chart for stat cards */
.educore-v15 .ec-v15-bars {
    display: flex; align-items: flex-end; gap: 6px;
    height: 60px; margin-top: 14px;
}
.educore-v15 .ec-v15-bars span {
    flex: 1;
    background: linear-gradient(180deg, var(--ec-cyan), var(--ec-blue));
    border-radius: 4px 4px 0 0;
    opacity: .9;
    transition: transform .25s var(--ec-ease-15);
}
.educore-v15 .ec-v15-bars span:hover { transform: scaleY(1.08); }

@media (max-width: 960px) {
    .educore-v15 .ec-v15-asym { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-toast { position: relative; margin: 14px 0; }
    .educore-v15 .ec-v15-feat-hero { min-height: 360px; padding: 28px; }
    .educore-v15 .ec-v15-feat-hero-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v0.15.3 — Composition polish: section numbers, process flow,
   CTA composition, animated borders, mission visuals
   ============================================================ */

/* SECTION NUMBER LABEL — huge translucent numeral */
.educore-v15 .ec-v15-section-num {
    position: absolute;
    top: 0; right: 5%;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(8rem, 16vw, 14rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.06);
    text-stroke: 1px rgba(255,255,255,.06);
    pointer-events: none;
    z-index: 0;
    letter-spacing: -.04em;
    user-select: none;
}
.educore-v15 .ec-v15-section-num-inline {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .25em;
    color: var(--ec-cyan);
    margin-right: 8px;
}
.educore-v15 .ec-v15-section-num-inline::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: 28px; height: 2px; margin: 0 6px 0 8px;
    background: linear-gradient(90deg, var(--ec-cyan), transparent);
}

/* PROCESS FLOW — 3-step horizontal with connecting line */
.educore-v15 .ec-v15-flow {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}
.educore-v15 .ec-v15-flow::before {
    content: "";
    position: absolute;
    top: 56px; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, var(--ec-cyan) 0%, var(--ec-purple) 50%, var(--ec-blue) 100%);
    opacity: .35;
    z-index: 0;
}
.educore-v15 .ec-v15-flow-step {
    position: relative;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 28px 24px;
    z-index: 1;
    transition: transform .35s var(--ec-ease-15), border-color .35s, box-shadow .35s;
}
.educore-v15 .ec-v15-flow-step:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,.40);
    box-shadow: 0 30px 60px rgba(34,211,238,.20);
}
.educore-v15 .ec-v15-flow-num {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.educore-v15 .ec-v15-flow-num-circle {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ec-grad-accent);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 1.1rem;
    color: #fff;
    box-shadow: 0 8px 20px rgba(37,99,235,.40), 0 0 0 6px rgba(7,11,20,.6);
}
.educore-v15 .ec-v15-flow-step:nth-child(2) .ec-v15-flow-num-circle {
    background: linear-gradient(135deg, var(--ec-purple), var(--ec-pink));
    box-shadow: 0 8px 20px rgba(124,58,237,.40), 0 0 0 6px rgba(7,11,20,.6);
}
.educore-v15 .ec-v15-flow-step:nth-child(3) .ec-v15-flow-num-circle {
    background: linear-gradient(135deg, #10B981, var(--ec-cyan));
    box-shadow: 0 8px 20px rgba(16,185,129,.40), 0 0 0 6px rgba(7,11,20,.6);
}
.educore-v15 .ec-v15-flow-num-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ec-ink-15-dim);
}
.educore-v15 .ec-v15-flow-step h3 { margin: 0 0 8px; font-size: 1.2rem; }
.educore-v15 .ec-v15-flow-step p { font-size: .92rem; line-height: 1.6; margin: 0 0 18px; color: var(--ec-ink-15-soft); }

/* small "mini dashboard" inside each flow step */
.educore-v15 .ec-v15-flow-mini {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ec-glass-line);
    display: flex; gap: 12px; align-items: center;
}
.educore-v15 .ec-v15-flow-mini-ic {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--ec-grad-accent); color: #fff;
}
.educore-v15 .ec-v15-flow-mini-ic.is-purple { background: linear-gradient(135deg, var(--ec-purple), var(--ec-pink)); }
.educore-v15 .ec-v15-flow-mini-ic.is-green  { background: linear-gradient(135deg, #10B981, var(--ec-cyan)); }
.educore-v15 .ec-v15-flow-mini-text { flex: 1; min-width: 0; }
.educore-v15 .ec-v15-flow-mini strong { color: #fff; font-size: .85rem; display: block; }
.educore-v15 .ec-v15-flow-mini span { color: var(--ec-ink-15-dim); font-size: .75rem; }
.educore-v15 .ec-v15-flow-mini-val {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    color: var(--ec-cyan); font-size: 1rem;
}

@media (max-width: 960px) {
    .educore-v15 .ec-v15-flow { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-flow::before { display: none; }
}

/* CTA COMPOSITION — split with mockup */
.educore-v15 .ec-v15-cta-composition {
    position: relative;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-radius: 28px;
    padding: 60px;
    box-shadow: var(--ec-shadow-15);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
    overflow: hidden;
}
/* animated conic gradient border */
.educore-v15 .ec-v15-cta-composition::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, var(--ec-purple), var(--ec-cyan), var(--ec-blue), var(--ec-pink), var(--ec-purple));
    border-radius: 30px;
    z-index: -1;
    opacity: .55;
    filter: blur(18px);
    animation: ec-v15-cta-rotate 18s linear infinite;
}
@keyframes ec-v15-cta-rotate {
    to { transform: rotate(360deg); }
}
.educore-v15 .ec-v15-cta-composition h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 14px 0 16px; line-height: 1.05; }
.educore-v15 .ec-v15-cta-composition p { font-size: 1.05rem; color: var(--ec-ink-15-soft); margin: 0 0 28px; max-width: 480px; }
.educore-v15 .ec-v15-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.educore-v15 .ec-v15-cta-trust {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ec-glass-line);
    display: flex; flex-wrap: wrap; gap: 24px;
    color: var(--ec-ink-15-dim);
    font-size: .85rem;
}
.educore-v15 .ec-v15-cta-trust > span { display: flex; align-items: center; gap: 8px; }
.educore-v15 .ec-v15-cta-trust svg { color: var(--ec-cyan); flex-shrink: 0; }

/* avatar stack */
.educore-v15 .ec-v15-avatar-stack { display: flex; align-items: center; }
.educore-v15 .ec-v15-avatar-stack > span {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ec-grad-accent);
    color: #fff; font-weight: 700; font-size: .82rem;
    border: 3px solid var(--ec-deep);
    margin-left: -10px;
}
.educore-v15 .ec-v15-avatar-stack > span:first-child { margin-left: 0; }
.educore-v15 .ec-v15-avatar-stack > span:nth-child(2) { background: linear-gradient(135deg, var(--ec-cyan), var(--ec-blue)); }
.educore-v15 .ec-v15-avatar-stack > span:nth-child(3) { background: linear-gradient(135deg, var(--ec-pink), var(--ec-purple)); }
.educore-v15 .ec-v15-avatar-stack > span:nth-child(4) { background: linear-gradient(135deg, #10B981, var(--ec-cyan)); }
.educore-v15 .ec-v15-avatar-stack > span.is-plus { background: var(--ec-glass); color: var(--ec-cyan); border-color: var(--ec-glass-line); }
.educore-v15 .ec-v15-avatar-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ec-glass-line);
    max-width: fit-content;
}
.educore-v15 .ec-v15-avatar-row-text strong { color: #fff; font-size: .92rem; display: block; }
.educore-v15 .ec-v15-avatar-row-text span { color: var(--ec-ink-15-dim); font-size: .8rem; }

/* CTA right side mockup */
.educore-v15 .ec-v15-cta-mockup {
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
}
.educore-v15 .ec-v15-cta-mockup .ec-v15-mockup-frame { padding: 18px; }
.educore-v15 .ec-v15-cta-mockup-toast {
    position: absolute; top: -20px; right: -20px;
}

/* MISSION/VISION asymmetric */
.educore-v15 .ec-v15-mv {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}
.educore-v15 .ec-v15-mv-card {
    position: relative;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 22px;
    padding: 40px;
    overflow: hidden;
    box-shadow: var(--ec-shadow-15);
}
.educore-v15 .ec-v15-mv-card::before {
    content: ""; position: absolute; top: -30%; right: -20%;
    width: 60%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(34,211,238,.30), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
}
.educore-v15 .ec-v15-mv-card.is-vision::before {
    background: radial-gradient(circle, rgba(124,58,237,.35), transparent 60%);
}
.educore-v15 .ec-v15-mv-num {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    background: var(--ec-grad-cyan);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    position: relative; z-index: 1;
}
.educore-v15 .ec-v15-mv-card.is-vision .ec-v15-mv-num {
    background: linear-gradient(120deg, var(--ec-purple), var(--ec-pink));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.educore-v15 .ec-v15-mv-card h3 { font-size: 1.4rem; margin: 0 0 12px; position: relative; z-index: 1; line-height: 1.25; }
.educore-v15 .ec-v15-mv-card p { font-size: 1rem; line-height: 1.65; position: relative; z-index: 1; }

/* mission progress chips */
.educore-v15 .ec-v15-mv-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 22px; padding-top: 22px;
    border-top: 1px solid var(--ec-glass-line);
    position: relative; z-index: 1;
}
.educore-v15 .ec-v15-mv-chip {
    padding: 8px 14px; border-radius: 999px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    font-size: .8rem;
    color: var(--ec-ink-15-soft);
    display: inline-flex; align-items: center; gap: 6px;
}
.educore-v15 .ec-v15-mv-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10B981; box-shadow: 0 0 8px #10B981;
}

/* vision timeline */
.educore-v15 .ec-v15-mv-timeline {
    margin-top: 22px; padding-top: 22px;
    border-top: 1px solid var(--ec-glass-line);
    display: flex; align-items: center; gap: 14px;
    font-family: 'Space Grotesk', sans-serif;
    position: relative; z-index: 1;
}
.educore-v15 .ec-v15-mv-timeline-bar {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}
.educore-v15 .ec-v15-mv-timeline-bar > span {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 18%;
    background: linear-gradient(90deg, var(--ec-purple), var(--ec-pink));
    border-radius: 2px;
    box-shadow: 0 0 12px var(--ec-purple);
}
.educore-v15 .ec-v15-mv-timeline strong { color: #fff; font-weight: 700; font-size: .92rem; }
.educore-v15 .ec-v15-mv-timeline span.label { color: var(--ec-ink-15-dim); font-size: .82rem; font-family: 'Inter', sans-serif; }

/* "1 large + 3 small" composition (innovation, modules) */
.educore-v15 .ec-v15-1x3 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
}
.educore-v15 .ec-v15-1x3-side {
    display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 960px) {
    .educore-v15 .ec-v15-1x3 { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-cta-composition { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
    .educore-v15 .ec-v15-mv { grid-template-columns: 1fr; }
}

/* ============================================================
   v0.15.4 — Real photos woven into the dark composition
   ============================================================ */

/* Generic photo card — framed, dark gradient overlay, glass border */
.educore-v15 .ec-v15-photo-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ec-glass-line);
    aspect-ratio: 4/3;
    background: var(--ec-deep-2);
    box-shadow: var(--ec-shadow-15);
}
.educore-v15 .ec-v15-photo-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.78) contrast(1.05) saturate(.95);
    transition: transform .8s var(--ec-ease-15), filter .4s;
}
.educore-v15 .ec-v15-photo-card:hover img {
    transform: scale(1.06);
    filter: brightness(.85) contrast(1.08) saturate(1.05);
}
.educore-v15 .ec-v15-photo-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(165deg, rgba(7,11,20,.30) 0%, rgba(7,11,20,.10) 40%, rgba(7,11,20,.85) 100%);
    pointer-events: none;
}
.educore-v15 .ec-v15-photo-card-caption {
    position: absolute; left: 18px; right: 18px; bottom: 18px;
    z-index: 2; color: #fff;
}
.educore-v15 .ec-v15-photo-card-caption span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: var(--ec-glass-strong);
    border: 1px solid var(--ec-glass-line);
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    margin-bottom: 8px;
    color: var(--ec-cyan);
}
.educore-v15 .ec-v15-photo-card-caption strong {
    display: block; font-size: .98rem; line-height: 1.25;
}

/* Hero backdrop — large blurred classroom photo behind the right column */
.educore-v15 .ec-v15-hero-photo-bg {
    position: absolute;
    top: 50%; right: -10%;
    transform: translateY(-50%);
    width: 80%; max-width: 900px;
    aspect-ratio: 16/10;
    border-radius: 30px;
    overflow: hidden;
    opacity: .35;
    z-index: 0;
    filter: blur(6px) saturate(1.2);
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
.educore-v15 .ec-v15-hero-photo-bg img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Full-bleed BRAND BANNER — illustration-only (no photo) */
.educore-v15 .ec-v15-photo-banner {
    position: relative;
    margin: 100px 0;
    padding: 180px 0;
    overflow: hidden;
    isolation: isolate;
}
.educore-v15 .ec-v15-photo-banner-bg {
    position: absolute; inset: 0;
    z-index: -1;
    background:
        radial-gradient(50% 80% at 20% 50%, rgba(124,58,237,.45), transparent 65%),
        radial-gradient(45% 70% at 80% 50%, rgba(34,211,238,.35), transparent 65%),
        radial-gradient(60% 80% at 50% 120%, rgba(37,99,235,.30), transparent 60%),
        linear-gradient(180deg, var(--ec-deep-2) 0%, var(--ec-deep) 50%, var(--ec-deep-2) 100%);
}
.educore-v15 .ec-v15-photo-banner-bg img { display: none; }
/* Animated abstract grid + drifting sine waves */
.educore-v15 .ec-v15-photo-banner-bg::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.educore-v15 .ec-v15-photo-banner-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(7,11,20,.30) 0%, transparent 30%, transparent 70%, rgba(7,11,20,.40) 100%);
}
.educore-v15 .ec-v15-photo-banner-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 28px;
    text-align: center;
}
.educore-v15 .ec-v15-photo-banner-inner h2 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin: 18px auto 14px;
    max-width: 800px;
}
.educore-v15 .ec-v15-photo-banner-inner p {
    color: var(--ec-ink-15-soft);
    max-width: 640px; margin: 0 auto 48px;
    font-size: 1.05rem;
}
.educore-v15 .ec-v15-photo-banner-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    max-width: 880px; margin: 0 auto;
}
.educore-v15 .ec-v15-photo-banner-stat {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 24px 18px;
    transition: transform .35s var(--ec-ease-15), border-color .35s;
}
.educore-v15 .ec-v15-photo-banner-stat:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,.40);
}
.educore-v15 .ec-v15-photo-banner-stat strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    background: var(--ec-grad-cyan);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.05;
    margin-bottom: 6px;
}
.educore-v15 .ec-v15-photo-banner-stat span {
    color: var(--ec-ink-15-soft);
    font-size: .82rem;
}

/* 4 ROLE CARDS — photo backgrounds, glass overlays */
.educore-v15 .ec-v15-roles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.educore-v15 .ec-v15-role {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    border: 1px solid var(--ec-glass-line);
    box-shadow: var(--ec-shadow-15);
    text-decoration: none;
    display: block;
    isolation: isolate;
    transition: transform .4s var(--ec-ease-15), border-color .4s, box-shadow .4s;
}
.educore-v15 .ec-v15-role img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(.62) saturate(1.05);
    transition: transform .8s var(--ec-ease-15), filter .4s;
}
.educore-v15 .ec-v15-role::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(7,11,20,.85) 100%);
    z-index: 1;
}
.educore-v15 .ec-v15-role:hover {
    transform: translateY(-8px);
    border-color: rgba(34,211,238,.45);
    box-shadow: 0 30px 60px rgba(34,211,238,.25);
}
.educore-v15 .ec-v15-role:hover img {
    transform: scale(1.08);
    filter: brightness(.72) saturate(1.15);
}
.educore-v15 .ec-v15-role-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px;
    z-index: 2;
    color: #fff;
}
.educore-v15 .ec-v15-role-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--ec-glass-strong);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ec-glass-line);
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--ec-cyan);
    margin-bottom: 14px;
}
.educore-v15 .ec-v15-role h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    line-height: 1.2;
}
.educore-v15 .ec-v15-role p {
    margin: 0 0 14px;
    font-size: .88rem;
    color: var(--ec-ink-15-soft);
    line-height: 1.5;
}
.educore-v15 .ec-v15-role-link {
    color: var(--ec-cyan);
    font-size: .85rem;
    font-weight: 600;
    transition: color .25s;
}
.educore-v15 .ec-v15-role:hover .ec-v15-role-link {
    color: #fff;
    text-shadow: 0 0 12px var(--ec-cyan);
}

@media (max-width: 960px) {
    .educore-v15 .ec-v15-roles { grid-template-columns: 1fr 1fr; }
    .educore-v15 .ec-v15-photo-banner-stats { grid-template-columns: 1fr 1fr; }
    .educore-v15 .ec-v15-hero-photo-bg { right: -30%; opacity: .25; }
}
@media (max-width: 560px) {
    .educore-v15 .ec-v15-roles { grid-template-columns: 1fr; }
    .educore-v15 .ec-v15-photo-banner-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   v0.15.5 — FAQ accordion (matches Liquid Brokers section pattern)
   ============================================================ */
.educore-v15 .ec-v15-faq {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
    align-items: start;
}
.educore-v15 .ec-v15-faq-head h2 { margin: 18px 0 14px; }
.educore-v15 .ec-v15-faq-head p { color: var(--ec-ink-15-soft); font-size: 1rem; line-height: 1.65; }
.educore-v15 .ec-v15-faq-list { display: flex; flex-direction: column; gap: 12px; }
.educore-v15 .ec-v15-faq-item {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .35s var(--ec-ease-15), background .35s;
}
.educore-v15 .ec-v15-faq-item[open] {
    border-color: rgba(34,211,238,.35);
    background: var(--ec-glass-strong);
    box-shadow: 0 16px 32px rgba(34,211,238,.10);
}
.educore-v15 .ec-v15-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
}
.educore-v15 .ec-v15-faq-item summary::-webkit-details-marker { display: none; }
.educore-v15 .ec-v15-faq-item summary::after {
    content: "";
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    flex-shrink: 0;
    background-image:
        linear-gradient(90deg, var(--ec-cyan), var(--ec-cyan)),
        linear-gradient(90deg, var(--ec-cyan), var(--ec-cyan));
    background-size: 10px 2px, 2px 10px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .35s var(--ec-ease-15);
}
.educore-v15 .ec-v15-faq-item[open] summary::after {
    background-size: 10px 2px, 0 0;
    transform: rotate(180deg);
}
.educore-v15 .ec-v15-faq-item .ec-v15-faq-body {
    padding: 0 26px 22px;
    color: var(--ec-ink-15-soft);
    font-size: .95rem;
    line-height: 1.65;
}

@media (max-width: 960px) {
    .educore-v15 .ec-v15-faq { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   v0.15.6 — Laptop device frame with student dashboard
   ============================================================ */
.educore-v15 .ec-v15-laptop {
    position: relative;
    width: 100%;
    perspective: 1400px;
}
.educore-v15 .ec-v15-laptop-screen {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--ec-deep-2);
    border-radius: 18px 18px 4px 4px;
    border: 8px solid #0a0e18;
    border-bottom: 14px solid #0a0e18;
    overflow: hidden;
    box-shadow:
        var(--ec-shadow-15),
        0 50px 100px rgba(34,211,238,.18),
        0 0 0 1px rgba(255,255,255,.06) inset;
    animation: ec-v15-laptop-float 9s ease-in-out infinite;
    transform: rotateX(2deg);
}
.educore-v15 .ec-v15-laptop-screen::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 6px;
    background: #050810;
    border-radius: 0 0 6px 6px;
    z-index: 3;
}
.educore-v15 .ec-v15-laptop-base {
    position: relative;
    width: 116%; height: 16px;
    left: -8%;
    background: linear-gradient(180deg, #15192b 0%, #0a0e18 40%, #0a0e18 100%);
    border-radius: 0 0 14px 14px;
    margin-top: 2px;
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.educore-v15 .ec-v15-laptop-base::before {
    content: "";
    display: block;
    width: 100px; height: 4px;
    background: #050810;
    border-radius: 0 0 8px 8px;
    margin: 0 auto;
}
@keyframes ec-v15-laptop-float {
    0%, 100% { transform: rotateX(2deg) translateY(0); }
    50%      { transform: rotateX(2deg) translateY(-10px); }
}

.educore-v15 .ec-v15-laptop-ui {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #0c1322 0%, #050810 100%);
    padding: 16px;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
}
.educore-v15 .ec-v15-laptop-side {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.educore-v15 .ec-v15-laptop-side-item {
    padding: 6px 10px; border-radius: 6px;
    font-size: .68rem; color: var(--ec-ink-15-soft);
    display: flex; align-items: center; gap: 6px;
}
.educore-v15 .ec-v15-laptop-side-item.is-active {
    background: var(--ec-grad-accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(37,99,235,.4);
}
.educore-v15 .ec-v15-laptop-side-item span:first-child { font-size: .85rem; }
.educore-v15 .ec-v15-laptop-main {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
}
.educore-v15 .ec-v15-laptop-headline {
    display: flex; justify-content: space-between; align-items: baseline;
}
.educore-v15 .ec-v15-laptop-headline strong {
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .85rem;
}
.educore-v15 .ec-v15-laptop-headline span {
    color: var(--ec-ink-15-dim);
    font-size: .62rem;
    letter-spacing: .08em; text-transform: uppercase;
}
.educore-v15 .ec-v15-laptop-courses {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.educore-v15 .ec-v15-laptop-course {
    padding: 8px; border-radius: 8px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-laptop-course strong {
    display: block; color: #fff;
    font-size: .68rem; font-family: 'Space Grotesk', sans-serif;
}
.educore-v15 .ec-v15-laptop-course-bar {
    height: 3px; border-radius: 2px; margin-top: 6px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.educore-v15 .ec-v15-laptop-course-bar > span {
    display: block; height: 100%;
    background: var(--ec-grad-cyan);
    box-shadow: 0 0 6px var(--ec-cyan);
}
.educore-v15 .ec-v15-laptop-chart {
    flex: 1;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    border-radius: 8px;
    padding: 8px;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 20px 14px;
    background-position: 0 6px;
    position: relative; overflow: hidden;
    min-height: 60px;
}
.educore-v15 .ec-v15-laptop-chart svg { width: 100%; height: 100%; display: block; }
.educore-v15 .ec-v15-laptop-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.educore-v15 .ec-v15-laptop-mini {
    padding: 7px 9px; border-radius: 7px;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-line);
    display: flex; justify-content: space-between; align-items: center;
}
.educore-v15 .ec-v15-laptop-mini strong {
    color: #fff;
    font-family: 'Space Grotesk', sans-serif; font-size: .72rem;
}
.educore-v15 .ec-v15-laptop-mini span { color: var(--ec-cyan); font-size: .65rem; }
.educore-v15 .ec-v15-laptop-mini span.is-pink { color: var(--ec-pink); }

/* Overlapping widgets on the laptop */
.educore-v15 .ec-v15-laptop-popup {
    position: absolute;
    background: rgba(7,11,20,.92);
    border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    z-index: 5;
    min-width: 200px;
}
.educore-v15 .ec-v15-laptop-popup.is-streak {
    top: -10px; right: -28px;
    animation: ec-v15-float-tag 6s ease-in-out infinite 1.2s;
}
.educore-v15 .ec-v15-laptop-popup.is-quiz {
    bottom: 20px; left: -36px;
    animation: ec-v15-float-tag 7s ease-in-out infinite 2.4s;
}
.educore-v15 .ec-v15-laptop-popup-row { display: flex; align-items: center; gap: 10px; }
.educore-v15 .ec-v15-laptop-popup-ic {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--ec-grad-accent);
    color: #fff; font-size: .85rem;
    flex-shrink: 0;
}
.educore-v15 .ec-v15-laptop-popup-ic.is-green { background: linear-gradient(135deg, #10B981, var(--ec-cyan)); }
.educore-v15 .ec-v15-laptop-popup strong { color: #fff; font-size: .82rem; display: block; }
.educore-v15 .ec-v15-laptop-popup span { color: var(--ec-ink-15-dim); font-size: .72rem; }

@media (max-width: 960px) {
    .educore-v15 .ec-v15-laptop-screen { animation: none; transform: none; }
    .educore-v15 .ec-v15-laptop-popup.is-streak { right: 10px; }
    .educore-v15 .ec-v15-laptop-popup.is-quiz   { left: 10px; }
}

/* ============================================================
   v0.15.6 — Cinematic final CTA (minimal, glow, giant headline)
   ============================================================ */
.educore-v15 .ec-v15-cta-cinematic {
    position: relative;
    padding: 220px 0 240px;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}
.educore-v15 .ec-v15-cta-cinematic-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(40% 60% at 50% 50%, rgba(124,58,237,.45), transparent 65%),
        radial-gradient(30% 50% at 30% 60%, rgba(34,211,238,.32), transparent 70%),
        radial-gradient(35% 55% at 70% 40%, rgba(37,99,235,.30), transparent 70%);
    filter: blur(20px);
    animation: ec-v15-cta-glow 16s ease-in-out infinite alternate;
}
@keyframes ec-v15-cta-glow {
    0%   { transform: translate3d(-2%, 0, 0) scale(1); opacity: .85; }
    100% { transform: translate3d( 2%, 0, 0) scale(1.08); opacity: 1; }
}
.educore-v15 .ec-v15-cta-cinematic-headline {
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 1;
    letter-spacing: -.03em;
    margin: 24px auto 28px;
    max-width: 920px;
    font-weight: 700;
}
.educore-v15 .ec-v15-cta-cinematic-sub {
    color: var(--ec-ink-15-soft);
    font-size: 1.1rem;
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.55;
}

/* ================ end v0.15 block ================ */


/* ---------- Base ---------- */
body.educore-skin {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ec-text);
    background: var(--ec-bg);
    margin: 0;
    line-height: 1.6;
}
.educore-skin h1, .educore-skin h2, .educore-skin h3, .educore-skin h4, .educore-skin h5 {
    font-family: 'Poppins', sans-serif;
    color: var(--ec-text);
    line-height: 1.25;
    margin: 0 0 .6em;
}
.educore-skin h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; }
.educore-skin h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; }
.educore-skin h3 { font-size: 1.25rem; font-weight: 600; }
.educore-skin h4 { font-size: 1.05rem; font-weight: 600; }
.educore-skin a:not(.ec-btn):not(.ec-action):not(.ec-course-card):not(.ec-logo):not(.ep-nav-item):not(.ep-link) { color: var(--ec-primary); }
/* Admin panel sidebar — keep the EduCore skin out of it entirely. */
.educore-skin .ep-side a, .educore-skin .ep-side a:visited, .educore-skin .ep-side a:hover, .educore-skin .ep-side a:focus { color: inherit; }
/* Buttons set their own text colour — use higher specificity to win against the global link rule */
.educore-skin a.ec-btn-primary,  .educore-skin button.ec-btn-primary  { color: var(--ec-primary) !important; }
.educore-skin a.ec-btn-navy,     .educore-skin button.ec-btn-navy     { color: #fff !important; }
.educore-skin a.ec-btn-ghost,    .educore-skin button.ec-btn-ghost    { color: var(--ec-text) !important; }
.educore-skin a.ec-btn-onband,   .educore-skin button.ec-btn-onband   { color: var(--ec-primary) !important; }
.educore-skin a.ec-btn-ghost:hover { color: #fff !important; }

.ec-muted { color: var(--ec-muted); }
.ec-link  { color: var(--ec-primary); font-weight: 600; }

/* Hide Hello Elementor's default site-header */
body.educore-skin .site-header,
body.educore-skin header.site-header { display: none !important; }

body.educore-skin .site-main,
body.educore-skin main#content,
body.educore-skin .page-content {
    padding: 32px 24px 64px;
    max-width: 1200px;
    margin: 0 auto;
}
body.educore-skin .entry-header,
body.educore-skin .entry-title { display: none; }

/* ---------- Top navigation ---------- */
.ec-nav {
    position: sticky; top: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ec-border);
    z-index: 1000;
}
.ec-nav-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; gap: 18px;
}
.ec-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--ec-text);
    font-family: 'Poppins', sans-serif; font-weight: 700;
}
.ec-logo-mark {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(30,58,138,.25);
    transition: transform .4s cubic-bezier(.32,.72,0,1),
                box-shadow .4s cubic-bezier(.32,.72,0,1);
}
.ec-logo:hover .ec-logo-mark {
    transform: rotate(-6deg) scale(1.08);
    box-shadow: 0 10px 24px rgba(30,58,138,.45),
                0 0 0 6px rgba(124,58,237,.08);
}
.ec-logo-text { transition: letter-spacing .35s cubic-bezier(.32,.72,0,1); }
.ec-logo:hover .ec-logo-text { letter-spacing: 0; }
.ec-logo-text {
    font-size: 20px; letter-spacing: -.01em;
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ec-nav-links { display: flex; gap: 6px; flex: 1; justify-content: center; }
.ec-nav-links a {
    position: relative;
    padding: 9px 18px; border-radius: 10px;
    text-decoration: none; color: var(--ec-text);
    font-size: 14px; font-weight: 500;
    overflow: visible;
    transition: color .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1),
                background .3s cubic-bezier(.32,.72,0,1),
                letter-spacing .3s cubic-bezier(.32,.72,0,1),
                box-shadow .3s cubic-bezier(.32,.72,0,1);
}
/* Soft gradient pill that fades in behind the text */
.ec-nav-links a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(34,211,238,.10));
    opacity: 0;
    transform: scale(.94);
    transition: opacity .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1);
    z-index: -1;
    pointer-events: none;
}
/* Animated underline that grows from the centre */
.ec-nav-links a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 2px;
    width: 0; height: 3px;
    background: linear-gradient(90deg, var(--ec-primary), var(--ec-accent));
    transform: translateX(-50%);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(124,58,237,.4);
    transition: width .4s cubic-bezier(.32,.72,0,1);
}
.ec-nav-links a:hover {
    color: var(--ec-primary);
    transform: translateY(-2px);
    letter-spacing: .01em;
    background: transparent;
}
.ec-nav-links a:hover::before {
    opacity: 1;
    transform: scale(1);
}
.ec-nav-links a:hover::after { width: calc(100% - 32px); }
.ec-nav-links a.is-active {
    color: var(--ec-primary);
    background: var(--ec-primary-soft);
}
.ec-nav-links a.is-active::after { width: calc(100% - 32px); }
.ec-nav-cta { display: flex; align-items: center; gap: 10px; }
.ec-user-chip {
    background: var(--ec-primary-soft); color: var(--ec-primary);
    padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    transition: transform .25s cubic-bezier(.32,.72,0,1),
                box-shadow .25s cubic-bezier(.32,.72,0,1);
}
.ec-user-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(124,58,237,.18);
}
/* Hover lift on the header CTA buttons */
.ec-nav .ec-btn-primary,
.ec-nav .ec-btn-ghost {
    transition: transform .25s cubic-bezier(.32,.72,0,1),
                box-shadow .25s cubic-bezier(.32,.72,0,1),
                background .25s cubic-bezier(.32,.72,0,1),
                color .25s cubic-bezier(.32,.72,0,1);
}
.ec-nav .ec-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(124,58,237,.35);
}
.ec-nav .ec-btn-ghost:hover {
    transform: translateY(-1px);
    background: var(--ec-primary-soft);
    color: var(--ec-primary);
}
@media (max-width: 760px) {
    .ec-nav-links { display: none; }
    .ec-nav-inner { padding: 12px 16px; }
}

/* ---------- Buttons (v0.13 — full pill, teal primary, coral warm) ---------- */
.ec-btn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px;
    font-weight: 700; font-size: 14px;
    text-decoration: none; letter-spacing: .01em;
    cursor: pointer; border: 0; overflow: hidden;
    transition: transform .18s var(--ec-ease), box-shadow .25s var(--ec-ease), background .2s, color .2s, border-color .2s;
    font-family: inherit;
}
.ec-btn::after {                                  /* shimmer sweep on hover */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform .55s var(--ec-ease);
    pointer-events: none; z-index: 0;
}
.ec-btn:hover::after { transform: translateX(110%); }
.ec-btn > * { position: relative; z-index: 1; }
.ec-btn:active { transform: translateY(1px) scale(.99); }
.ec-btn:focus-visible { outline: 3px solid var(--ec-accent); outline-offset: 3px; }

/* Primary = solid teal. The brand action colour. */
.ec-btn-primary {
    background: var(--ec-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(34,211,238,.30), inset 0 1px 0 rgba(255,255,255,.20);
}
.ec-btn-primary:hover {
    background: var(--ec-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(8,145,178,.40), inset 0 1px 0 rgba(255,255,255,.25);
    color: #fff;
}

/* Coral = warm secondary. Use sparingly for highlights / "happy face" callouts. */
.ec-btn-coral {
    background: var(--ec-coral);
    color: #fff;
    box-shadow: 0 6px 16px rgba(249,112,102,.30), inset 0 1px 0 rgba(255,255,255,.20);
}
.ec-btn-coral:hover {
    background: #F35347;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(249,112,102,.45);
    color: #fff;
}

/* Secondary navy button — for places where teal would clash */
.ec-btn-navy {
    background: var(--ec-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(19,33,61,.30);
}
.ec-btn-navy:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(19,33,61,.42); color: #fff; background: var(--ec-primary-bright); }

/* Ghost = outlined, fills with teal on hover */
.ec-btn-ghost {
    background: var(--ec-bg-elev); color: var(--ec-text);
    border: 1.5px solid var(--ec-border-strong);
}
.ec-btn-ghost:hover {
    background: var(--ec-accent); border-color: var(--ec-accent); color: #fff !important;
    transform: translateY(-2px); box-shadow: 0 10px 20px rgba(34,211,238,.30);
}

/* On-band = solid teal against navy/photo banners */
.ec-btn-onband {
    background: var(--ec-accent); color: #fff !important;
    box-shadow: 0 8px 20px rgba(34,211,238,.35);
    font-weight: 800;
}
.ec-btn-onband:hover {
    background: var(--ec-accent-dark); transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(8,145,178,.5);
}

.ec-btn-lg { padding: 16px 30px; font-size: 16px; font-weight: 800; }
.ec-btn-xl { padding: 18px 36px; font-size: 17px; font-weight: 800; }
.ec-btn-block { display: block; width: 100%; padding: 14px 18px; font-size: 16px; font-weight: 700; border-radius: 999px; }

/* Make sure every button is readable — no transparent text */
.educore-skin a.ec-btn,
.educore-skin button.ec-btn { text-shadow: none; }

/* ---------- Flash messages ---------- */
.ec-flash {
    max-width: 1200px; margin: 14px auto 0; padding: 12px 18px;
    border-radius: 10px; font-weight: 500;
}
.ec-flash-warn { background: var(--ec-warning-soft); color: #92400E; border: 1px solid #FCD34D; }
.ec-flash-info { background: var(--ec-primary-soft); color: var(--ec-primary); }

/* ---------- Pills, tags ---------- */
.ec-pill {
    display: inline-block;
    background: var(--ec-primary-soft); color: var(--ec-primary);
    padding: 5px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 16px;
}
.ec-pill-soft { background: #F3F4F6; color: var(--ec-muted); }
.ec-grad-text {
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ec-tag {
    display: inline-block; padding: 3px 10px;
    border-radius: 6px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    background: #F3F4F6; color: var(--ec-muted);
}
.ec-tag-paid     { background: var(--ec-accent-soft);  color: var(--ec-accent); }
.ec-tag-partial  { background: var(--ec-warning-soft); color: var(--ec-warning); }
.ec-tag-unpaid   { background: var(--ec-danger-soft);  color: var(--ec-danger); }
.ec-tag-urgent   { background: var(--ec-danger);       color: #fff; }
.ec-tag-all      { background: var(--ec-primary-soft); color: var(--ec-primary); }
.ec-tag-students { background: var(--ec-accent-soft);  color: var(--ec-accent); }
.ec-tag-parents  { background: #FCE7F3;                color: #BE185D; }
.ec-tag-teachers { background: var(--ec-warning-soft); color: var(--ec-warning); }

/* ---------- Card ---------- */
.ec-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 26px;
    box-shadow: var(--ec-shadow);
    margin-bottom: 22px;
}
.ec-empty { text-align: center; padding: 40px 26px; }
.ec-page-head { margin: 0 0 22px; }
.ec-page-head h2 { margin-bottom: 6px; }

/* ---------- HOME hero ---------- */
.ec-hero {
    position: relative; overflow: hidden;
    margin: -32px -24px 60px;
    padding: 80px 24px 100px;
    background: linear-gradient(135deg, var(--ec-primary-soft) 0%, var(--ec-accent-soft) 100%);
}
.ec-hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(30,58,138,.18) 0, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(34,197,94,.18) 0, transparent 50%);
    pointer-events: none;
}
.ec-hero-pattern {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; opacity: .8;
}

/* ---------- Decorative soft band (replaces banner CTA on About) ---------- */
.ec-band-soft {
    background: linear-gradient(135deg, var(--ec-primary-soft), var(--ec-accent-soft));
    border-radius: var(--ec-radius);
    padding: 48px 32px;
    text-align: center;
    margin-top: 30px;
}
.ec-band-soft h2 { margin-bottom: 12px; }
.ec-band-soft p { max-width: 600px; margin: 0 auto; font-size: 16px; }
.ec-hero-inner {
    position: relative; max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
    align-items: center;
}
@media (max-width: 900px) { .ec-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.ec-hero-text p { font-size: 17px; color: var(--ec-muted); max-width: 540px; }
.ec-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ec-hero-stats { display: flex; gap: 36px; margin-top: 48px; flex-wrap: wrap; }
.ec-hero-stats > div { display: flex; flex-direction: column; }
.ec-hero-stats strong { font-family: 'Poppins'; font-size: 28px; font-weight: 700; color: var(--ec-primary); }
.ec-hero-stats span { color: var(--ec-muted); font-size: 13px; }

.ec-hero-mock { display:flex; justify-content:center; }
.ec-mock-card {
    background:#fff; border-radius:18px; box-shadow: var(--ec-shadow-lg);
    width:100%; max-width: 460px; overflow: hidden;
    transform: rotate(-2deg); transition: transform .4s;
}
.ec-mock-card:hover { transform: rotate(0); }
.ec-mock-head { background:#F3F4F6; padding: 12px 16px; display:flex; gap: 6px;}
.ec-mock-dot { width:12px;height:12px;border-radius:50%; }
.ec-mock-dot:nth-child(1){background:#EF4444}
.ec-mock-dot:nth-child(2){background:#F59E0B}
.ec-mock-dot:nth-child(3){background:#22C55E}
.ec-mock-body { padding: 22px; }
.ec-mock-row { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 22px; }
.ec-mock-stat { color:#fff; padding: 16px 12px; border-radius: 10px; font-size: 12px; line-height:1.3; }
.ec-mock-stat strong { font-size:22px; display:block; margin-top:4px; }
.ec-mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 100px; }
.ec-mock-bars span { flex: 1; background: linear-gradient(180deg, var(--ec-primary), var(--ec-accent)); border-radius: 4px 4px 0 0; }

/* ---------- Section helpers ---------- */
.ec-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }

/* ---------- Features grid (home) ---------- */
.ec-features { padding: 60px 0; }
.ec-feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px; max-width: 1200px; margin: 0 auto;
}
.ec-feature {
    background: var(--ec-card); border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius); padding: 28px;
    transition: transform .2s, box-shadow .2s;
}
.ec-feature:hover { transform: translateY(-4px); box-shadow: var(--ec-shadow); }
.ec-feature-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 16px;
}
.ec-feature p { color: var(--ec-muted); margin: 0; font-size: 15px; }

/* ---------- CTA band (full-bleed v0.14) ---------- */
.ec-cta-band {
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-primary-bright));
    margin: 60px calc(50% - 50vw) 0; padding: 70px 24px;
    text-align: center; color: #fff;
}
.ec-cta-band h2 { color: #fff; }
.ec-cta-band p { color: rgba(255,255,255,.85); max-width: 540px; margin: 0 auto 28px; font-size: 17px; }
.ec-cta-row { margin-top: 24px; }

/* ---------- Login split ---------- */
.ec-login-split {
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 70vh;
    margin: -32px -24px 0;
    overflow: hidden;
}
@media (max-width: 800px) { .ec-login-split { grid-template-columns: 1fr; } }
.ec-login-left {
    position: relative;
    background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-bright) 50%, var(--ec-accent) 100%);
    color: #fff;
    padding: 70px 60px;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
}
.ec-login-pattern {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.18) 0, transparent 35%),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,.12) 0, transparent 38%);
}
.ec-login-pattern::before, .ec-login-pattern::after {
    content: ''; position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 65%);
    pointer-events: none;
}
.ec-login-pattern::before { width: 380px; height: 380px; top: -160px; right: -120px; }
.ec-login-pattern::after  { width: 300px; height: 300px; bottom: -130px; left: -100px; }

.ec-login-content {
    position: relative;
    max-width: 460px;
    z-index: 1;
}

/* Brand at top */
.ec-login-brand {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 56px;
    text-decoration: none;
    color: #fff !important;
}
.ec-login-logo-mark {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s;
}
.ec-login-brand:hover .ec-login-logo-mark { transform: rotate(-6deg) scale(1.05); }
.ec-login-brand-text {
    font-family: 'Poppins'; font-size: 28px; font-weight: 700;
    letter-spacing: -.02em;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

/* Headline */
.ec-login-headline {
    color: #fff !important;
    font-size: clamp(2.4rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin: 0 0 16px !important;
    letter-spacing: -.025em;
}
.ec-login-subtitle {
    font-size: 17px;
    line-height: 1.55;
    opacity: .92;
    margin: 0 0 44px !important;
    max-width: 420px;
}

/* Feature list */
.ec-login-features {
    list-style: none; padding: 0; margin: 0;
}
.ec-login-features li {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
}
.ec-login-features li:first-child { padding-top: 0; }
.ec-login-features li:last-child  { border-bottom: 0; padding-bottom: 0; }
.ec-login-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ec-login-features li > div {
    display: flex; flex-direction: column; gap: 2px;
    padding-top: 4px;
}
.ec-login-features strong {
    font-weight: 600; font-size: 15.5px; color: #fff;
}
.ec-login-features span {
    font-size: 13.5px; opacity: .82; line-height: 1.4;
}

/* Mobile: tone down padding */
@media (max-width: 800px) {
    .ec-login-left { padding: 50px 32px; }
    .ec-login-brand { margin-bottom: 32px; }
    .ec-login-subtitle { margin-bottom: 28px !important; }
}
/* ---------- LOGIN — right panel ---------- */
.ec-login-right {
    position: relative;
    background: linear-gradient(135deg, #F0F4FF 0%, #FFFFFF 50%, #F0FFF4 100%);
    padding: 70px 50px;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
}
.ec-login-right-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 80% 18%, rgba(30,58,138,.10) 0, transparent 38%),
        radial-gradient(circle at 18% 90%, rgba(34,197,94,.10) 0, transparent 38%);
}
.ec-login-right-bg::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(30,58,138,.07) 1.2px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .55;
    mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}

/* Card */
.ec-login-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px; margin: 0 auto;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(30,58,138,.08);
    border-radius: 24px;
    padding: 44px 40px 32px;
    box-shadow:
        0 25px 60px rgba(30,58,138,.12),
        0 4px 12px rgba(0,0,0,.04);
}

/* Card head — gradient icon + title */
.ec-login-card-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 14px 28px rgba(30,58,138,.3);
}
.ec-login-card-title {
    text-align: center;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    letter-spacing: -.01em;
}
.ec-login-card-sub {
    text-align: center;
    color: var(--ec-muted);
    margin: 0 0 30px !important;
    font-size: 14.5px;
}

/* Inline alert above the sign-in form */
.ec-login-alert {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 10px;
    margin: -10px 0 22px;
    font-size: 13.5px;
    line-height: 1.45;
    border: 1px solid transparent;
    animation: ec-shake .35s ease;
}
.ec-login-alert strong { font-weight: 700; }
.ec-login-alert span { color: inherit; opacity: .85; }
.ec-login-alert.err {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}
.ec-login-alert.ok {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}
@keyframes ec-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}

/* Modern form */
.ec-form-modern .ec-input-group { margin-bottom: 18px; }
.ec-form-modern .ec-input-group > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    margin: 0 0 7px !important;
    letter-spacing: 0;
    text-transform: none;
}
.ec-input-wrap { position: relative; }
.ec-input-icon {
    position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ec-muted);
    pointer-events: none;
    transition: color .15s;
    display: flex;
}
.ec-form-modern input[type="text"],
.ec-form-modern input[type="password"],
.ec-form-modern input[type="email"] {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid var(--ec-border);
    border-radius: 12px;
    padding: 13px 14px 13px 44px;
    font-size: 14.5px; font-family: inherit;
    background: #FAFBFC;
    transition: border-color .2s, background .2s, box-shadow .2s;
    margin: 0 !important;
}
.ec-form-modern input:focus {
    border-color: var(--ec-primary);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(30,58,138,.10);
}
.ec-input-wrap:focus-within .ec-input-icon { color: var(--ec-primary); }
.ec-form-modern input::placeholder { color: #B7BDC7; }

.ec-form-row-between {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 0 22px;
    font-size: 13px;
}
.ec-form-row-between .ec-check {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--ec-muted) !important;
    font-weight: 500;
}
.ec-forgot-link {
    color: var(--ec-primary) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}
.ec-forgot-link:hover { text-decoration: underline; }

/* Gradient submit */
.ec-btn-gradient {
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-primary-bright)) !important;
    box-shadow: 0 8px 24px rgba(30,58,138,.32) !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    transition: transform .2s, box-shadow .2s !important;
}
.ec-btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(30,58,138,.42) !important;
}
.ec-btn-gradient .ec-arrow {
    display: inline-block;
    transition: transform .2s;
    margin-left: 6px;
}
.ec-btn-gradient:hover .ec-arrow { transform: translateX(4px); }

/* Secure footer */
.ec-login-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 24px;
    color: var(--ec-muted);
    font-size: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--ec-border);
}
.ec-login-secure svg { color: var(--ec-accent); flex-shrink: 0; }

/* Mobile */
@media (max-width: 800px) {
    .ec-login-right { padding: 50px 24px; }
    .ec-login-card { padding: 36px 26px 24px; }
}
.ec-check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ec-text); margin: 8px 0 18px; }

/* ---------- Dashboard ---------- */
.educore-dashboard { display: block; }
.ec-dash-greeting { margin-bottom: 26px; padding: 0; }
.ec-dash-greeting h2 { font-size: 1.9rem; margin: 4px 0; }
.ec-dash-section { padding: 24px; }
.ec-section-title { margin: 0 0 16px; }
.ec-mini-title { margin: 24px 0 12px; font-size: 1rem; color: var(--ec-text); }

/* Stat grid */
.ec-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.ec-stat {
    padding: 18px;
    border-radius: var(--ec-radius-sm);
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    transition: transform .15s, box-shadow .15s;
}
.ec-stat:hover { transform: translateY(-2px); box-shadow: var(--ec-shadow); }
.ec-stat-label { font-size: 12px; color: var(--ec-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.ec-stat-value { font-family: 'Poppins'; font-size: 26px; font-weight: 700; line-height: 1.1; }
.ec-stat-primary .ec-stat-value { color: var(--ec-primary); }
.ec-stat-success .ec-stat-value { color: var(--ec-accent); }
.ec-stat-warning .ec-stat-value { color: var(--ec-warning); }
.ec-stat-danger  .ec-stat-value { color: var(--ec-danger);  }

/* Action grid */
.ec-action-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.ec-action {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px; border-radius: var(--ec-radius-sm);
    background: #fff; border: 1.5px solid var(--ec-border);
    color: var(--ec-text); text-decoration: none;
    font-weight: 600; font-size: 15px;
    transition: background .15s, transform .15s, border-color .15s;
}
.ec-action span { font-size: 24px; }
.ec-action:hover {
    background: var(--ec-primary-soft);
    color: var(--ec-primary);
    border-color: var(--ec-primary);
    transform: translateY(-2px);
}

/* ---------- Chart container sizing ---------- */
.ec-chart-wrap {
    margin: 14px 0; padding: 18px;
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
}
.ec-chart-wrap[data-chart-kind="line"],
.ec-chart-wrap[data-chart-kind="bar"]      { max-width: 720px; }
.ec-chart-wrap[data-chart-kind="doughnut"],
.ec-chart-wrap[data-chart-kind="pie"]      { max-width: 360px; margin-left: auto; margin-right: auto; }
.ec-chart-wrap[data-chart-kind="doughnut"] canvas,
.ec-chart-wrap[data-chart-kind="pie"]      canvas { max-height: 280px; }
.ec-empty-chart { padding: 24px; color: var(--ec-muted); text-align: center; background: #F9FAFB; border-radius: var(--ec-radius); border: 1px dashed var(--ec-border); }

/* ---------- Grade banner ---------- */
.ec-grade-banner {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 22px;
    border-radius: var(--ec-radius);
    background: linear-gradient(90deg, color-mix(in srgb, var(--grade) 14%, transparent), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--grade) 30%, var(--ec-border));
    margin: 4px 0 14px;
}
.ec-grade-letter {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--grade);
    color: #fff;
    font-family: 'Poppins'; font-weight: 800; font-size: 30px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.ec-grade-meta strong { display: block; font-size: 18px; font-family: 'Poppins'; }
.ec-grade-meta span   { color: var(--ec-muted); font-size: 13px; }

/* Course cards in dashboard */
.ec-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ec-course-grid-lg { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.ec-course-classes { margin: 8px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.ec-course-card {
    display: flex; flex-direction: column;
    border-radius: var(--ec-radius-sm); overflow: hidden;
    background: var(--ec-card); border: 1px solid var(--ec-border);
    text-decoration: none; color: var(--ec-text);
    transition: transform .15s, box-shadow .15s;
}
.ec-course-card:hover { transform: translateY(-4px); box-shadow: var(--ec-shadow); color: var(--ec-text); }
.ec-course-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent)) center/cover;
}
.ec-course-body { padding: 14px; }
.ec-course-body h4 { margin: 0 0 6px; font-size: 1rem; }

/* Child card on parent dashboard */
.ec-child-card { padding: 24px; }
.ec-child-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ec-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    color: #fff; font-family: 'Poppins'; font-size: 22px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ec-child-head h3 { margin: 0 0 2px; }
.ec-child-head p { margin: 0; font-size: 14px; }

/* ===================== NOTICE BOARD v2 ===================== */

/* Audience colour map (used as CSS vars for cards) */
.ec-nb-aud-all       { --aud-color: #1E3A8A; --aud-soft: #EEF2FF; --aud-grad: linear-gradient(135deg, #1E3A8A, var(--ec-primary-bright)); }
.ec-nb-aud-students  { --aud-color: #047857; --aud-soft: #ECFDF5; --aud-grad: linear-gradient(135deg, #047857, #22C55E); }
.ec-nb-aud-parents   { --aud-color: #BE185D; --aud-soft: #FCE7F3; --aud-grad: linear-gradient(135deg, #BE185D, #EC4899); }
.ec-nb-aud-teachers  { --aud-color: #B45309; --aud-soft: #FEF3C7; --aud-grad: linear-gradient(135deg, #B45309, #F59E0B); }

/* MASTHEAD */
.ec-nb-mast {
    position: relative; overflow: hidden;
    margin: -32px -24px 28px;
    padding: 60px 32px 50px;
    background: #fff;
    border-bottom: 1px solid var(--ec-border);
}
.ec-nb-mast-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 20%, rgba(30,58,138,.10), transparent 36%),
        radial-gradient(circle at 88% 80%, rgba(34,197,94,.10), transparent 36%);
}
.ec-nb-mast-bg::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(transparent 95%, rgba(30,58,138,.05) 95%),
        linear-gradient(90deg, transparent 95%, rgba(30,58,138,.05) 95%);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 75%);
}
.ec-nb-mast-row {
    position: relative; max-width: 1200px; margin: 0 auto;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.ec-breadcrumb { color: var(--ec-muted); font-size: 13px; margin-bottom: 14px; }
.ec-breadcrumb a { color: var(--ec-muted); text-decoration: none; }
.ec-breadcrumb a:hover { color: var(--ec-primary); }
.ec-breadcrumb span:not(:first-child) { margin: 0 6px; }
.ec-eyebrow {
    display: block;
    color: var(--ec-primary);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.ec-nb-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 800 !important;
    margin: 0 0 12px !important;
    letter-spacing: -.025em;
    line-height: 1;
}
.ec-nb-tagline {
    color: var(--ec-muted);
    max-width: 560px; font-size: 16px;
    margin: 0;
}

/* FEATURE banner */
.ec-nb-feature {
    position: relative;
    margin: 0 0 26px;
    padding: 44px 48px;
    border-radius: 22px;
    color: #fff;
    background: var(--aud-grad, linear-gradient(135deg, #1E3A8A, #22C55E));
    box-shadow: 0 25px 60px rgba(30,58,138,.18);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.ec-nb-feature:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(30,58,138,.22); }
.ec-nb-feature.is-urgent {
    --aud-grad: linear-gradient(135deg, #991B1B, #EF4444);
    box-shadow: 0 25px 60px rgba(239,68,68,.25);
}
.ec-nb-feature-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 90% 0%, rgba(255,255,255,.18), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,.10), transparent 40%);
}
.ec-nb-feature-pattern::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: .35;
}
.ec-nb-feature-meta {
    position: relative;
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap; margin-bottom: 18px;
    font-size: 13px;
}
.ec-nb-feature-meta > span {
    background: rgba(255,255,255,.18);
    padding: 5px 12px; border-radius: 999px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(6px);
}
.ec-nb-pulse {
    color: #fff;
    background: rgba(0,0,0,.25) !important;
    animation: ec-pulse 1.6s ease-in-out infinite;
}
@keyframes ec-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
    50%     { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.ec-nb-feature-title {
    color: #fff !important;
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
    font-weight: 800 !important;
    margin: 0 0 12px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em;
    position: relative;
}
.ec-nb-feature-excerpt {
    position: relative;
    font-size: 16px; line-height: 1.6;
    opacity: .95;
    max-width: 760px;
    margin: 0 0 18px;
}
.ec-nb-feature-foot {
    position: relative;
    display: flex; gap: 14px; align-items: center;
}
.ec-nb-read {
    background: rgba(255,255,255,.95); color: var(--aud-color, #1E3A8A);
    padding: 8px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}

/* FILTER pills */
.ec-nb-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 22px;
    padding: 14px;
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 14px;
    box-shadow: var(--ec-shadow);
}
.ec-nb-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    color: var(--ec-text) !important; text-decoration: none;
    border: 1.5px solid transparent;
    background: #F3F4F6;
    transition: all .15s;
}
.ec-nb-pill span {
    background: rgba(0,0,0,.12);
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; min-width: 16px; text-align: center;
}
.ec-nb-pill:hover { background: var(--ec-primary-soft); color: var(--ec-primary) !important; }
.ec-nb-pill.is-active {
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-primary-bright));
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(30,58,138,.3);
}
.ec-nb-pill.is-active span { background: rgba(255,255,255,.25); color: #fff; }
.ec-nb-pill-students.is-active { background: linear-gradient(135deg, #047857, #22C55E); }
.ec-nb-pill-parents.is-active  { background: linear-gradient(135deg, #BE185D, #EC4899); }
.ec-nb-pill-teachers.is-active { background: linear-gradient(135deg, #B45309, #F59E0B); }

/* CARD GRID — masonry style */
.ec-nb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.ec-nb-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    box-shadow: var(--ec-shadow);
    transition: transform .25s, box-shadow .25s;
    display: flex; flex-direction: column;
}
.ec-nb-card::before {
    content: ''; height: 6px; display: block;
    background: var(--aud-grad);
}
.ec-nb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(30,58,138,.15);
}

.ec-nb-card-top {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px 12px;
}
.ec-nb-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--aud-soft);
    color: var(--aud-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.ec-nb-card-aud-block { display: flex; flex-direction: column; gap: 2px; }
.ec-nb-card-aud {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--aud-color);
}
.ec-nb-card-urg {
    font-size: 10px; font-weight: 700;
    color: #fff;
    background: var(--ec-danger);
    padding: 2px 8px; border-radius: 4px;
    width: fit-content;
    animation: ec-pulse 1.6s ease-in-out infinite;
}
.ec-nb-card-title {
    font-size: 1.1rem; font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    padding: 0 22px;
    color: var(--ec-text);
}
.ec-nb-card-excerpt {
    color: var(--ec-muted);
    font-size: 14px; line-height: 1.55;
    margin: 0 0 16px;
    padding: 0 22px;
    flex: 1;
}
.ec-nb-card-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--ec-border);
    background: #FAFBFC;
    display: flex; justify-content: space-between; align-items: center;
}
.ec-nb-card-time {
    color: var(--ec-muted);
    font-size: 12px; font-weight: 500;
}
.ec-nb-card.is-urgent {
    border-color: rgba(239,68,68,.4);
    box-shadow: 0 8px 24px rgba(239,68,68,.18);
}

@media (max-width: 700px) {
    .ec-nb-mast { padding: 40px 24px; }
    .ec-nb-feature { padding: 30px 24px; }
}

/* (legacy notice classes — keep blank to override defaults) */
.ec-notice-list, .ec-notice, .ec-notice-hero, .ec-notice-stat, .ec-section-bar { all: unset; }
.ec-notice-hero h1, .ec-notice-hero p { all: revert; }
/* ===================== END NOTICE BOARD v2 ===================== */

/* ---------- Tables ---------- */
.educore-skin .ec-table {
    width: 100%; border-collapse: collapse;
    background: var(--ec-card); overflow: hidden;
}
.ec-table thead th {
    background: #F9FAFB; color: var(--ec-muted);
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 600; padding: 14px 16px; text-align: left;
    border-bottom: 1px solid var(--ec-border);
}
.ec-table tbody td {
    padding: 14px 16px; border-bottom: 1px solid var(--ec-border);
    font-size: 14px;
}
.ec-table tbody tr:last-child td { border-bottom: 0; }
.ec-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ec-table .is-success { color: var(--ec-accent); }
.ec-table .is-danger  { color: var(--ec-danger); }
.ec-fees-table-wrap { padding: 0; overflow-x: auto; }

/* ---------- About page ---------- */
.ec-about-hero {
    margin: -32px -24px 40px; padding: 70px 24px;
    background: linear-gradient(135deg, var(--ec-primary-soft), var(--ec-accent-soft));
    text-align: center;
}
.ec-about-hero h1 { font-size: 2.6rem; }
.ec-about-hero p { font-size: 17px; color: var(--ec-muted); max-width: 640px; margin: 0 auto; }
.ec-about-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 28px; margin-bottom: 30px;
}
@media (max-width: 800px) { .ec-about-grid { grid-template-columns: 1fr; } }
.ec-step {
    display: flex; gap: 16px; padding: 22px;
    background: var(--ec-card); border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
}
.ec-step-num {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ec-primary-soft); color: var(--ec-primary);
    font-family: 'Poppins'; font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ec-step h4 { margin: 0 0 4px; }
.ec-step p { color: var(--ec-muted); font-size: 14px; margin: 0; }

/* ---------- Footer (v0.13) ---------- */
.ec-footer {
    background: linear-gradient(180deg, var(--ec-bg-dark) 0%, var(--ec-bg-dark-2) 100%);
    color: #CBD5E1;
    padding: 64px 24px 0; margin-top: 80px; font-size: 14px;
    border-top: 1px solid var(--ec-line-dark);
}
.ec-footer h5 + a { margin-top: 4px; }
.ec-footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 800px) { .ec-footer-inner { grid-template-columns: 1fr 1fr; } }
.ec-footer h5 {
    position: relative;
    color: #fff; font-family: 'Poppins'; font-size: 14px;
    text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
}
/* Animated underline accent on each column heading */
.ec-footer h5::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 24px; height: 2px;
    background: linear-gradient(90deg, #22D3EE, #7C3AED);
    border-radius: 2px;
    transition: width .45s cubic-bezier(.32,.72,0,1);
}
.ec-footer-inner > div:hover h5::after { width: 56px; }

/* Footer link micro-interaction — slide-in chevron + color shift */
.ec-footer a {
    position: relative;
    display: inline-flex; align-items: center;
    color: #94A3B8; text-decoration: none;
    padding: 6px 0;
    transition: color .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1),
                padding-left .3s cubic-bezier(.32,.72,0,1);
}
.ec-footer a::before {
    content: "→";
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(-8px);
    color: #22D3EE;
    font-weight: 700;
    transition: opacity .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1);
    pointer-events: none;
}
.ec-footer a:hover {
    color: #fff;
    padding-left: 18px;
}
.ec-footer a:hover::before {
    opacity: 1;
    transform: translateX(0);
}
.ec-footer strong { color: #fff; font-family: 'Poppins'; font-size: 18px; }
.ec-footer-inner > div > p { color: #94A3B8; margin: 12px 0 0; max-width: 320px; }
.ec-footer-bottom {
    color: #94A3B8;
    padding: 20px 24px; margin-top: 40px;
    border-top: 1px solid var(--ec-line-dark); font-size: 13px;
}
.ec-footer-bottom-row {
    max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.ec-credit {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(34,211,238,.10); color: #fff;
    padding: 8px 16px; border-radius: 999px;
    font-size: 13px;
    border: 1px solid rgba(34,211,238,.30);
}
.ec-credit span { color: #94A3B8; }
.ec-credit strong {
    background: linear-gradient(135deg, var(--ec-accent-bright), var(--ec-coral));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-family: 'Poppins';
}

/* =================================================================
   TUTOR LMS BRANDING — match course pages to EduCore look
   ================================================================= */

/* Course archive (E-Library page) */
.educore-skin .tutor-courses,
.educore-skin .tutor-courses-wrap,
.educore-skin .tutor-wrap { font-family: inherit; }

.educore-skin .tutor-course,
.educore-skin .tutor-course-loop,
.educore-skin .tutor-course-card {
    background: var(--ec-card) !important;
    border: 1px solid var(--ec-border) !important;
    border-radius: var(--ec-radius) !important;
    box-shadow: var(--ec-shadow) !important;
    overflow: hidden !important;
    transition: transform .2s, box-shadow .2s !important;
}
.educore-skin .tutor-course:hover,
.educore-skin .tutor-course-card:hover,
.educore-skin .tutor-course-loop:hover {
    transform: translateY(-4px);
    box-shadow: var(--ec-shadow-lg) !important;
}

/* Buttons inside Tutor LMS */
.educore-skin .tutor-btn-primary,
.educore-skin .tutor-btn.tutor-btn-primary,
.educore-skin .tutor-button.tutor-button-primary,
.educore-skin .tutor-course-loop-enroll-btn {
    background-color: var(--ec-primary) !important;
    border-color: var(--ec-primary) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.educore-skin .tutor-btn-primary:hover,
.educore-skin .tutor-btn.tutor-btn-primary:hover { background-color: var(--ec-primary-dark) !important; }

.educore-skin .tutor-btn-outline-primary,
.educore-skin .tutor-button.tutor-button-outline-primary {
    color: var(--ec-primary) !important;
    border-color: var(--ec-primary) !important;
    border-radius: 10px !important;
}

/* Course title link colors */
.educore-skin .tutor-course-name a,
.educore-skin .tutor-course-loop-title a { color: var(--ec-text) !important; }
.educore-skin .tutor-course-name a:hover,
.educore-skin .tutor-course-loop-title a:hover { color: var(--ec-primary) !important; }

/* Tutor dashboard sidebar */
.educore-skin .tutor-dashboard-menu,
.educore-skin .tutor-dashboard-menu-items {
    background: var(--ec-card) !important;
    border-radius: var(--ec-radius) !important;
    border: 1px solid var(--ec-border) !important;
    box-shadow: var(--ec-shadow) !important;
}
.educore-skin .tutor-dashboard-menu-items .active a,
.educore-skin .tutor-dashboard-menu-items a.active {
    background: var(--ec-primary-soft) !important;
    color: var(--ec-primary) !important;
}

/* Tutor LMS progress bars */
.educore-skin .tutor-progress-bar-filled,
.educore-skin .tutor-progress-filled {
    background: linear-gradient(90deg, var(--ec-primary), var(--ec-accent)) !important;
}

/* Single course header */
.educore-skin .tutor-single-course-header,
.educore-skin .tutor-course-banner {
    background: linear-gradient(135deg, var(--ec-primary-soft), var(--ec-accent-soft)) !important;
    border-radius: var(--ec-radius) !important;
}

/* Quizzes */
.educore-skin .tutor-quiz-question-trunk,
.educore-skin .tutor-quiz-card {
    background: var(--ec-card) !important;
    border-radius: var(--ec-radius) !important;
    border: 1px solid var(--ec-border) !important;
    box-shadow: var(--ec-shadow) !important;
}

/* Form controls inside Tutor */
.educore-skin .tutor-form-control,
.educore-skin .tutor-form input[type="text"],
.educore-skin .tutor-form input[type="email"],
.educore-skin .tutor-form input[type="password"] {
    border-radius: 10px !important;
    border: 1px solid var(--ec-border) !important;
}

/* Login/registration form (Tutor's [tutor_student_registration_form]) */
.educore-skin .tutor-form-row { margin-bottom: 14px; }

/* ---------- Floating chat bubble polish ---------- */
#ec-ai-fab { box-shadow: 0 12px 30px rgba(30,58,138,.35) !important; }

/* ---------- Print ---------- */
@media print {
    .ec-nav, .ec-footer, #ec-ai-fab, #ec-ai-panel { display: none !important; }
}

/* =================================================================
   v0.6 — Home page redesign (hero refresh, AI showcase, roles, testimonial)
   ================================================================= */

/* ---------- Hero refresh ---------- */
.ec-hero {
    padding: 88px 24px 110px;
    background: linear-gradient(135deg, #F5F7FF 0%, #ECFDF5 100%);
}
.ec-hero-glow {
    position: absolute; pointer-events: none; z-index: 0;
    width: 520px; height: 520px; border-radius: 50%;
    filter: blur(80px); opacity: .55;
}
.ec-hero-glow-1 { background: radial-gradient(circle, rgba(11,46,92,.50), transparent 70%); top: -160px; left: -120px; }
.ec-hero-glow-2 { background: radial-gradient(circle, rgba(212,164,55,.45), transparent 70%); bottom: -180px; right: -120px; }

.ec-hero-inner { position: relative; z-index: 2; }

.ec-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(30,58,138,.12);
    color: var(--ec-primary);
    padding: 7px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(30,58,138,.06);
    margin-bottom: 22px;
}
.ec-hero-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ec-accent);
    box-shadow: 0 0 0 4px rgba(34,197,94,.18);
    animation: ec-pulse 2s infinite;
}
.ec-hero-badge-sep { opacity: .35; margin: 0 2px; }
@keyframes ec-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
    50%     { box-shadow: 0 0 0 8px rgba(34,197,94,.05); }
}

.ec-hero h1 {
    font-size: clamp(2.4rem, 5.2vw, 3.8rem);
    line-height: 1.1; letter-spacing: -.025em;
    margin-bottom: 20px;
}
.ec-hero-lede {
    font-size: 17.5px; line-height: 1.65;
    color: var(--ec-muted); max-width: 560px;
    margin: 0 0 32px;
}

.ec-hero-trust {
    list-style: none; padding: 0; margin: 36px 0 0;
    display: flex; flex-wrap: wrap; gap: 14px 26px;
}
.ec-hero-trust li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--ec-text); font-weight: 500;
}
.ec-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ec-accent-soft); color: var(--ec-accent);
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}

/* ---------- Refined hero mockup ---------- */
.ec-hero-mock {
    position: relative;
    display: flex; justify-content: center;
}
.ec-mock-card {
    transform: rotate(-1.5deg);
    box-shadow: 0 30px 60px -20px rgba(17,24,39,.25), 0 18px 36px -18px rgba(30,58,138,.30);
    border: 1px solid rgba(255,255,255,.6);
}
.ec-mock-head {
    position: relative; padding: 11px 14px;
    background: linear-gradient(180deg, #F9FAFB, #F3F4F6);
    border-bottom: 1px solid var(--ec-border);
}
.ec-mock-url {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: #fff; border: 1px solid var(--ec-border);
    color: var(--ec-muted); font-size: 11px;
    padding: 4px 14px; border-radius: 999px;
    font-family: 'Inter', sans-serif;
}
.ec-mock-body { padding: 22px; }
.ec-mock-greet {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.ec-mock-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    color: #fff; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ec-mock-greet strong { display: block; font-size: 14px; }
.ec-mock-greet span { font-size: 12px; color: var(--ec-muted); }

.ec-mock-stat {
    background: var(--ec-bg) !important;
    color: var(--ec-text) !important;
    padding: 12px 14px; border-radius: 10px;
    font-size: 11px; font-weight: 600; line-height: 1.3;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--ec-muted) !important;
    border-left: 3px solid var(--ec-border);
}
.ec-mock-stat strong {
    display: block; margin-top: 4px;
    font-size: 20px; font-weight: 700;
    color: var(--ec-text) !important;
    text-transform: none; letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
}
.ec-mock-stat-blue   { border-left-color: var(--ec-primary); }
.ec-mock-stat-blue strong   { color: var(--ec-primary) !important; }
.ec-mock-stat-green  { border-left-color: var(--ec-accent); }
.ec-mock-stat-green strong  { color: var(--ec-accent) !important; }
.ec-mock-stat-amber  { border-left-color: var(--ec-warning); }
.ec-mock-stat-amber strong  { color: #B45309 !important; }

.ec-mock-section-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; color: var(--ec-muted);
    margin-bottom: 10px;
}
.ec-mock-bars {
    height: 110px; padding-bottom: 18px;
    border-bottom: 1px dashed var(--ec-border);
}
.ec-mock-bars span {
    position: relative;
    background: linear-gradient(180deg, var(--ec-primary), #3B82F6);
}
.ec-mock-bars span:nth-child(even) {
    background: linear-gradient(180deg, var(--ec-accent), #4ADE80);
}
.ec-mock-bars i {
    position: absolute; bottom: -16px; left: 0; right: 0;
    text-align: center; font-style: normal; font-size: 10px;
    color: var(--ec-muted); font-weight: 600;
}

/* Floating chips around the hero mock */
.ec-mock-chip {
    position: absolute;
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 14px; padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 14px 32px rgba(17,24,39,.10);
    font-size: 13px;
    animation: ec-float 4s ease-in-out infinite;
    max-width: 220px;
}
.ec-mock-chip-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.ec-mock-chip strong { display: block; font-size: 13px; }
.ec-mock-chip span   { display: block; font-size: 11.5px; color: var(--ec-muted); margin-top: 1px; }
.ec-mock-chip-ai {
    top: 14%; left: -32px;
    animation-delay: 0s;
}
.ec-mock-chip-ai .ec-mock-chip-icon { background: #E0E7FF; }
.ec-mock-chip-notice {
    bottom: 12%; right: -28px;
    animation-delay: 1.5s;
}
.ec-mock-chip-notice .ec-mock-chip-icon { background: #FEE2E2; }
@keyframes ec-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}

@media (max-width: 900px) {
    .ec-mock-chip-ai     { top: -10px; left: 4px; }
    .ec-mock-chip-notice { bottom: -10px; right: 4px; }
}

/* ---------- "Built for Ugandan schools" trust strip ---------- */
.ec-logos-strip {
    max-width: 1200px; margin: -40px auto 50px;
    padding: 28px 24px;
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 18px; box-shadow: var(--ec-shadow);
    text-align: center;
    position: relative; z-index: 5;
}
.ec-logos-label {
    display: block;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--ec-muted); margin-bottom: 14px;
}
.ec-logos-row {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px;
}
.ec-logo-pill {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    color: var(--ec-text);
    padding: 8px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
}

/* ---------- Pill colour variants ---------- */
.ec-pill-purple { background: var(--ec-coral-soft); color: #B33A30; }

/* ---------- AI Study Buddy showcase (full-bleed v0.14) ---------- */
.ec-ai-showcase {
    margin: 70px calc(50% - 50vw);
    padding: 90px max(24px, calc(50vw - 600px));
    background:
        radial-gradient(circle at 85% 20%, rgba(34,211,238,.14), transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(249,112,102,.10), transparent 55%),
        linear-gradient(135deg, var(--ec-bg-dark) 0%, var(--ec-bg-dark-2) 100%);
    color: var(--ec-ink-invert);
    position: relative; overflow: hidden;
}
.ec-ai-showcase-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px;
    align-items: center;
}
@media (max-width: 900px) { .ec-ai-showcase-inner { grid-template-columns: 1fr; gap: 48px; } }
.ec-ai-showcase-text h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.ec-ai-showcase-text h2 .ec-grad-text {
    background: linear-gradient(135deg, var(--ec-accent-bright), var(--ec-coral));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ec-ai-showcase-text p {
    color: #CBD5E1; font-size: 16.5px; line-height: 1.7;
    max-width: 540px;
}
.ec-ai-showcase-text strong { color: #fff; }
.ec-ai-points {
    list-style: none; padding: 0; margin: 24px 0 0;
    display: flex; flex-direction: column; gap: 12px;
}
.ec-ai-points li {
    display: flex; align-items: center; gap: 12px;
    color: #E2E8F0; font-size: 14.5px;
}
.ec-ai-points .ec-tick {
    background: rgba(34,211,238,.18); color: var(--ec-accent);
}

.ec-ai-chat-mock {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,.45);
    overflow: hidden;
    transform: rotate(1.5deg);
    transition: transform .4s;
}
.ec-ai-chat-mock:hover { transform: rotate(0); }
.ec-ai-chat-head {
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-accent));
    color: #fff;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
}
.ec-ai-chat-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.ec-ai-chat-head strong { display: block; font-size: 14.5px; }
.ec-ai-chat-head span   { display: block; font-size: 11.5px; opacity: .85; margin-top: 1px; }
.ec-ai-chat-body {
    background: #F9FAFB;
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    max-height: 360px;
}
.ec-ai-msg {
    padding: 10px 14px; border-radius: 14px;
    max-width: 85%;
    font-size: 14px; line-height: 1.5;
}
.ec-ai-msg-user {
    align-self: flex-end;
    background: var(--ec-primary); color: #fff;
    border-bottom-right-radius: 4px;
}
.ec-ai-msg-bot {
    align-self: flex-start;
    background: #fff; border: 1px solid var(--ec-border);
    color: var(--ec-text);
    border-bottom-left-radius: 4px;
}

/* ---------- Roles grid ---------- */
.ec-roles { padding: 70px 0 30px; }
.ec-role-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px; max-width: 1200px; margin: 0 auto;
}
.ec-role-card {
    display: block;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 30px 26px;
    text-decoration: none; color: var(--ec-text) !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative; overflow: hidden;
}
.ec-role-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0;
    height: 4px; background: var(--ec-primary);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
}
.ec-role-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px -12px rgba(17,24,39,.12);
    border-color: transparent;
}
.ec-role-card:hover::before { transform: scaleX(1); }
.ec-role-card h3 { margin: 14px 0 8px; }
.ec-role-card p  { color: var(--ec-muted); font-size: 14.5px; margin: 0 0 18px; }
.ec-role-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    background: var(--ec-primary-soft);
}
.ec-role-link {
    color: var(--ec-primary); font-weight: 600; font-size: 14px;
    display: inline-block;
}
.ec-role-student .ec-role-icon { background: #EEF2FF; }
.ec-role-student::before        { background: var(--ec-primary); }
.ec-role-teacher .ec-role-icon { background: var(--ec-accent-soft); }
.ec-role-teacher::before        { background: var(--ec-accent); }
.ec-role-teacher .ec-role-link  { color: var(--ec-accent); }
.ec-role-parent .ec-role-icon  { background: #FCE7F3; }
.ec-role-parent::before         { background: #BE185D; }
.ec-role-parent .ec-role-link   { color: #BE185D; }
.ec-role-admin .ec-role-icon   { background: var(--ec-warning-soft); }
.ec-role-admin::before          { background: var(--ec-warning); }
.ec-role-admin .ec-role-link    { color: #B45309; }

/* ---------- Testimonial (v0.13 — dark navy band) ---------- */
.ec-testimonial {
    max-width: 880px; margin: 70px auto 0;
    padding: 56px 44px;
    background:
        radial-gradient(circle at 14% 16%, rgba(34,211,238,.12), transparent 55%),
        radial-gradient(circle at 86% 92%, rgba(249,112,102,.10), transparent 55%),
        linear-gradient(135deg, var(--ec-bg-dark) 0%, var(--ec-bg-dark-2) 100%);
    border: 1px solid var(--ec-line-dark);
    border-radius: 22px;
    text-align: center;
    position: relative;
    color: var(--ec-ink-invert);
    box-shadow: 0 24px 60px rgba(11,18,32,.32);
}
.ec-quote-mark {
    font-family: 'Poppins', serif;
    font-size: 96px; line-height: 1;
    color: var(--ec-accent); opacity: .35;
    position: absolute; top: 14px; left: 30px;
}
.ec-testimonial blockquote {
    margin: 0 0 28px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(17px, 2.2vw, 21px);
    line-height: 1.55; font-weight: 500;
    color: var(--ec-ink-invert);
}
.ec-testimonial blockquote em {
    font-style: italic; color: var(--ec-accent-bright);
}
.ec-testimonial-meta {
    display: inline-flex; align-items: center; gap: 14px;
}
.ec-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ec-accent), var(--ec-coral));
    color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Poppins', sans-serif; font-size: 15px;
}
.ec-testimonial-meta strong { display: block; color: #fff; }
.ec-testimonial-meta span   { display: block; font-size: 13px; color: var(--ec-ink-invert-soft); }

/* ---------- CTA band refresh (v0.13 — teal + coral glow on navy) ---------- */
.ec-cta-band {
    border-radius: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(34,211,238,.30), transparent 55%),
        radial-gradient(circle at 85% 90%, rgba(249,112,102,.18), transparent 50%),
        linear-gradient(135deg, var(--ec-bg-dark), var(--ec-bg-dark-2));
    margin-top: 70px;
}
.ec-cta-band p { font-size: 17.5px; }

/* =================================================================
   v0.9 — Royal palette: dark-mode toggle, photo hero, photo rows,
   scroll-reveal motion, photo banner, polished AI showcase
   ================================================================= */

/* ---------- Scroll-reveal motion (Apple-inspired) ----------
 * Easing: cubic-bezier(.32,.72,0,1) is Apple's signature reveal curve
 * — same one used on apple.com hero sections. Starts confidently, glides
 * to a stop. Pairs with a 1.1s duration for that unhurried premium feel. */
.ec-reveal,
.ec-reveal-up,
.ec-reveal-left,
.ec-reveal-right,
.ec-reveal-scale {
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(.32,.72,0,1), transform 1.1s cubic-bezier(.32,.72,0,1);
    will-change: opacity, transform;
}
.ec-reveal,      .ec-reveal-up    { transform: translateY(40px); }
.ec-reveal-left  { transform: translateX(-44px); }
.ec-reveal-right { transform: translateX(44px); }
.ec-reveal-scale { transform: scale(.93); }
.ec-reveal.is-visible,
.ec-reveal-up.is-visible,
.ec-reveal-left.is-visible,
.ec-reveal-right.is-visible,
.ec-reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}
.ec-reveal-stagger > *      { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(.32,.72,0,1), transform 1s cubic-bezier(.32,.72,0,1); }
.ec-reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.ec-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.ec-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 110ms; }
.ec-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 220ms; }
.ec-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 330ms; }
.ec-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 440ms; }
.ec-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 550ms; }
.ec-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 660ms; }
.ec-reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 770ms; }

@media (prefers-reduced-motion: reduce) {
    .ec-reveal, .ec-reveal-up, .ec-reveal-left, .ec-reveal-right, .ec-reveal-scale,
    .ec-reveal-stagger > * {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .ec-btn, .ec-feature, .ec-role-card { transition: none !important; }
    .ec-btn::after { display: none; }
    /* Disable new header/footer hover transforms for reduced-motion users */
    .ec-nav-links a, .ec-nav-links a::before, .ec-nav-links a::after,
    .ec-user-chip, .ec-nav .ec-btn-primary, .ec-nav .ec-btn-ghost,
    .ec-logo-mark, .ec-logo-text,
    .ec-footer a, .ec-footer a::before, .ec-footer h5::after,
    .educore-app-light .ec-v15-app-link,
    .educore-app-light .ec-v15-app-link::before,
    .educore-app-light .ec-v15-app-link::after,
    .educore-app-light .ec-v15-app-link-ic {
        transition: none !important;
        transform: none !important;
    }
    .ec-footer a, .educore-app-light .ec-v15-app-link { padding-left: 0 !important; }
}

/* ---------- Photo hero (overrides earlier gradient hero) ---------- */
.ec-hero-photo {
    position: relative; overflow: hidden;
    margin: -32px -24px 60px;
    padding: 110px 24px 130px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(7,31,63,.86) 0%, rgba(11,46,92,.68) 45%, rgba(11,46,92,.30) 100%),
        url('img/hero.jpg') center 30% / cover no-repeat;
    isolation: isolate;
}
.ec-hero-photo::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 120px;
    background: linear-gradient(180deg, transparent, var(--ec-bg));
    pointer-events: none;
}
.ec-hero-photo .ec-hero-inner {
    position: relative; max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px;
    align-items: center;
    z-index: 2;
}
@media (max-width: 960px) { .ec-hero-photo .ec-hero-inner { grid-template-columns: 1fr; gap: 48px; } }

.ec-hero-photo h1,
.ec-hero-photo .ec-hero-text h1 { color: #fff; font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.025em; }
.ec-hero-photo .ec-hero-text p,
.ec-hero-photo .ec-hero-lede { color: rgba(255,255,255,.92); font-size: 18px; max-width: 580px; }
.ec-hero-photo .ec-grad-text {
    background: linear-gradient(135deg, var(--ec-accent-bright), var(--ec-accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ec-hero-photo .ec-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: 12.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    backdrop-filter: blur(6px);
    margin-bottom: 22px;
}
.ec-hero-photo .ec-hero-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ec-accent-bright);
    box-shadow: 0 0 0 4px rgba(212,164,55,.25);
    animation: ec-pulse 1.6s ease-out infinite;
}
@keyframes ec-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(212,164,55,.25); }
    50%     { box-shadow: 0 0 0 9px rgba(212,164,55,.05); }
}
.ec-hero-photo .ec-hero-trust { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 10px; }
.ec-hero-photo .ec-hero-trust li { color: rgba(255,255,255,.92); display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.ec-hero-photo .ec-tick {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ec-accent); color: var(--ec-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}

/* Side photo card inside hero (a smaller photo, layered, tilted) */
.ec-hero-side {
    position: relative;
    aspect-ratio: 4/5; max-width: 440px; justify-self: end;
    border-radius: var(--ec-radius-lg); overflow: hidden;
    transform: rotate(2deg) translateY(0);
    box-shadow:
        0 30px 70px -20px rgba(0,0,0,.55),
        0 0 0 8px rgba(255,255,255,.08);
    transition: transform .5s var(--ec-ease);
}
.ec-hero-side:hover { transform: rotate(0) translateY(-4px); }
.ec-hero-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-hero-side-tag {
    position: absolute; left: 18px; bottom: 18px;
    background: rgba(11,46,92,.88); color: #fff;
    padding: 8px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
}
.ec-hero-side-tag::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ec-accent); margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(212,164,55,.35);
}

/* Floating accent shape behind the hero side photo */
.ec-hero-photo .ec-hero-shape {
    position: absolute; right: -80px; top: 30%;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,164,55,.30), transparent 65%);
    filter: blur(8px); z-index: 1;
    animation: ec-float 12s ease-in-out infinite;
}
@keyframes ec-float {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-30px) scale(1.06); }
}

/* ---------- Photo-text alternating rows ---------- */
.ec-photo-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 70px; align-items: center;
    max-width: 1200px; margin: 90px auto;
}
.ec-photo-row.reverse > :first-child { order: 2; }
@media (max-width: 900px) {
    .ec-photo-row { grid-template-columns: 1fr; gap: 40px; }
    .ec-photo-row.reverse > :first-child { order: 0; }
}
.ec-photo-frame {
    position: relative;
    aspect-ratio: 5/4;
    border-radius: var(--ec-radius-lg); overflow: hidden;
    box-shadow: var(--ec-shadow-lg);
}
.ec-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ec-ease); }
.ec-photo-frame:hover img { transform: scale(1.04); }
.ec-photo-frame::after {        /* gold corner ribbon — Dunham-style accent */
    content: ''; position: absolute; right: -1px; top: -1px;
    width: 70px; height: 70px;
    background: linear-gradient(225deg, var(--ec-accent) 0%, var(--ec-accent) 50%, transparent 50%);
    pointer-events: none;
}
.ec-photo-row .ec-pill { background: var(--ec-accent-soft); color: var(--ec-accent-dark); }
.ec-photo-row h2 { margin-bottom: 18px; }
.ec-photo-row p  { font-size: 16.5px; color: var(--ec-text-soft); line-height: 1.7; }

.ec-bullet-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.ec-bullet-list li {
    display: flex; gap: 14px; align-items: flex-start;
    color: var(--ec-text); font-size: 15.5px;
}
.ec-bullet-list .ec-bullet-icon {
    flex: 0 0 32px; height: 32px; border-radius: 10px;
    background: var(--ec-accent-soft); color: var(--ec-accent-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
}

/* ---------- v0.14: Dominant full-bleed photo hero ---------- */
.ec-photo-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -32px;
    margin-bottom: 0;
    padding: 120px 4vw 140px;
    color: #fff;
    background-position: center 35%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}
.ec-hero-dominant {
    min-height: 88vh;
    display: flex; align-items: center; justify-content: center;
    padding: 140px 4vw 160px;
}
.ec-hero-aurora {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 18% 24%, rgba(34,211,238,.30), transparent 55%),
        radial-gradient(ellipse at 86% 78%, rgba(249,112,102,.22), transparent 55%);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}
.ec-photo-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
.ec-pill-onphoto {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.30);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 22px;
}
.ec-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 18px 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(34,211,238,.35);
    color: rgba(255,255,255,.92);
    font-size: 12.5px; font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    margin-bottom: 28px;
}
.ec-hero-eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ec-accent-bright);
    box-shadow: 0 0 0 0 rgba(34,211,238,.55);
    animation: ec-hero-pulse 2.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes ec-hero-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(34,211,238,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.ec-photo-hero h1 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5.4vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0 0 22px;
    max-width: 14ch;
    margin-inline: auto;
}
.ec-hero-accent {
    background: linear-gradient(135deg, var(--ec-accent-bright) 0%, var(--ec-coral) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}
.ec-photo-hero h2 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 18px;
}
.ec-photo-hero p {
    color: rgba(255,255,255,.88);
    font-size: 17.5px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 36px;
}
.ec-photo-hero-cta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
}
.ec-btn-onphoto {
    display: inline-flex; align-items: center;
    padding: 13px 26px;
    border-radius: 999px;
    background: #fff;
    color: var(--ec-text) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    transition: transform .15s var(--ec-ease), box-shadow .2s;
}
.ec-btn-onphoto:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.28); }
.ec-btn-onphoto-ghost {
    background: rgba(255,255,255,.06);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ec-btn-onphoto-ghost:hover {
    background: rgba(255,255,255,.14);
    border-color: #fff;
    transform: translateY(-2px);
    color: #fff !important;
}
.ec-link-onphoto {
    color: rgba(255,255,255,.88) !important;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,.40);
    padding-bottom: 2px;
    transition: color .15s, border-color .15s;
}
.ec-link-onphoto:hover { color: #fff !important; border-color: #fff; }
.ec-hero-trust {
    list-style: none;
    padding: 0;
    margin: 44px auto 0;
    max-width: 880px;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    letter-spacing: .04em;
}
.ec-hero-trust li {
    position: relative;
    padding-left: 18px;
}
.ec-hero-trust li::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ec-accent-bright);
    box-shadow: 0 0 8px rgba(34,211,238,.6);
}
.ec-hero-wave {
    position: absolute; bottom: -2px; left: 0;
    width: 100%; height: 110px;
    pointer-events: none;
    z-index: 1;
    display: block;
}
.ec-hero-wave-back {
    fill: rgba(34,211,238,.10);
    animation: ec-hero-wave-drift 14s ease-in-out infinite;
    transform-origin: center;
}
.ec-hero-wave-front {
    fill: var(--ec-page);
    animation: ec-hero-wave-drift 18s ease-in-out infinite reverse;
    transform-origin: center;
}
@keyframes ec-hero-wave-drift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3%); }
}
@media (prefers-reduced-motion: reduce) {
    .ec-hero-eyebrow-dot,
    .ec-hero-wave-back,
    .ec-hero-wave-front { animation: none !important; }
}
@media (max-width: 800px) {
    .ec-photo-hero { padding: 90px 5vw 100px; }
    .ec-hero-dominant { min-height: 78vh; padding: 100px 5vw 120px; }
    .ec-hero-trust { gap: 6px 16px; font-size: 12.5px; }
    .ec-hero-wave { height: 70px; }
}

/* ---------- Photo banner — wide image with overlay text (full-bleed v0.14) ---------- */
.ec-photo-banner {
    position: relative;
    margin: 100px calc(50% - 50vw);
    padding: 110px max(24px, calc(50vw - 600px));
    color: #fff;
    background:
        linear-gradient(135deg, rgba(11,46,92,.78), rgba(11,46,92,.42)),
        url('img/banner.jpg') center/cover no-repeat;
    text-align: center;
    overflow: hidden;
}
.ec-photo-banner h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 14px; max-width: 760px; margin-inline: auto; }
.ec-photo-banner p { color: rgba(255,255,255,.92); max-width: 620px; margin: 0 auto 28px; font-size: 17px; }
.ec-photo-banner .ec-photo-banner-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 30px; max-width: 900px; margin: 50px auto 0;
}
@media (max-width: 700px) { .ec-photo-banner .ec-photo-banner-stats { grid-template-columns: repeat(2,1fr); } }
.ec-photo-banner-stat strong {
    display: block; font-family: 'Poppins'; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800;
    color: var(--ec-accent-bright); letter-spacing: -.02em;
}
.ec-photo-banner-stat span { color: rgba(255,255,255,.85); font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Photo role cards (Dunham-style face cards) ---------- */
.ec-roles-photo .ec-role-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.ec-role-card.ec-role-photo {
    padding: 0; overflow: hidden;
    aspect-ratio: 3/4;
    display: flex; flex-direction: column; justify-content: flex-end;
    color: #fff !important;
    background-size: cover; background-position: center 25%;
    border: 0;
    box-shadow: 0 20px 40px -18px rgba(11,46,92,.4);
}
.ec-role-card.ec-role-photo::before { display: none; }
.ec-role-card.ec-role-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(11,46,92,.92) 100%);
    transition: background .35s var(--ec-ease);
    pointer-events: none;
}
.ec-role-card.ec-role-photo:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(11,46,92,.55); border: 0; }
.ec-role-card.ec-role-photo:hover::after { background: linear-gradient(180deg, rgba(11,46,92,.45) 0%, rgba(11,46,92,.95) 100%); }
.ec-role-card.ec-role-photo > * { position: relative; z-index: 2; }
.ec-role-card.ec-role-photo h3 { color: #fff; margin: 0 0 8px; font-size: 1.4rem; }
.ec-role-card.ec-role-photo p  { color: rgba(255,255,255,.92); font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; padding: 0 22px; }
.ec-role-card.ec-role-photo h3,
.ec-role-card.ec-role-photo .ec-role-link { padding: 0 22px; }
.ec-role-card.ec-role-photo .ec-role-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ec-accent-bright) !important; font-weight: 700;
    padding-bottom: 24px; padding-left: 22px;
}
.ec-role-card.ec-role-photo .ec-role-tag {
    position: absolute; top: 18px; left: 18px;
    background: rgba(255,255,255,.92); color: var(--ec-primary);
    padding: 6px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    z-index: 3;
}

/* ---------- Layered section header with kicker line ---------- */
.ec-section-head-fancy { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.ec-section-head-fancy .ec-kicker {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--ec-accent-dark); font-size: 12.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.ec-section-head-fancy .ec-kicker::before,
.ec-section-head-fancy .ec-kicker::after {
    content: ''; width: 32px; height: 2px; background: var(--ec-accent);
}
.ec-section-head-fancy h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); margin-bottom: 14px; }
.ec-section-head-fancy p { color: var(--ec-text-soft); font-size: 16.5px; max-width: 620px; margin: 0 auto; }

/* ---------- Feature card improvements (gold accent line on hover) ---------- */
.ec-feature {
    position: relative;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    overflow: hidden;
}
.ec-feature::before {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
    background: linear-gradient(180deg, var(--ec-accent), var(--ec-accent-dark));
    transform: scaleY(0); transform-origin: top;
    transition: transform .35s var(--ec-ease);
}
.ec-feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--ec-shadow-lg);
    border-color: var(--ec-accent-soft);
}
.ec-feature:hover::before { transform: scaleY(1); }

/* =================================================================
   v0.11 — Ocamba-style carousel hero + "Modules in detail" section
   ================================================================= */

/* ---------- v0.12: Outer band with cool tint behind the card ---------- */
.ec-carousel-hero {
    /* v0.13 — dark navy outer band + light card inside + teal accents */
    --ec-oc-bg:         #13213D;
    --ec-oc-bg-2:       #0E1B33;
    --ec-oc-card-top:   #FFFFFF;
    --ec-oc-card-mid:   #F4F6FC;
    --ec-oc-card-bot:   #E8ECF6;
    --ec-oc-scene-top:  #F4F7FB;
    --ec-oc-scene-bot:  #DEE6F1;
    --ec-oc-cobalt:     #22D3EE;
    --ec-oc-cobalt-dk:  #0891B2;
    --ec-oc-cobalt-soft:#ECFEFF;
    --ec-oc-text:       #1A1F2C;
    --ec-oc-muted:      #6B7280;
    --ec-oc-rule:       rgba(15,23,42,.10);

    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -32px;          /* swallow .site-main's top padding */
    margin-bottom: 40px;
    padding: 24px 3vw;
    background:
        radial-gradient(ellipse at 28% 22%, rgba(34,211,238,.22), transparent 55%),
        radial-gradient(ellipse at 78% 92%, rgba(249,112,102,.18), transparent 60%),
        linear-gradient(135deg, var(--ec-oc-bg) 0%, var(--ec-oc-bg-2) 100%);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/* ---------- The floating rounded card ---------- */
.ec-ch-card {
    position: relative;
    width: 94vw;
    max-width: 1480px;
    min-height: 90vh;
    border-radius: 32px;
    background:
        linear-gradient(135deg, var(--ec-oc-card-top) 0%, var(--ec-oc-card-mid) 60%, var(--ec-oc-card-bot) 100%);
    box-shadow:
        0 40px 90px -20px rgba(15,23,42,.18),
        0 0 0 1px rgba(15,23,42,.04);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: auto 1fr auto;   /* nav, body, footer */
    isolation: isolate;
}
.ec-ch-card:focus { outline: none; }
.ec-ch-card:focus-visible { box-shadow: 0 0 0 3px var(--ec-oc-cobalt), 0 30px 80px -20px rgba(15,23,42,.18); }

/* ---------- v0.12 in-card nav (top row, spans both columns) ---------- */
.ec-ch-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 22px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    z-index: 5;
    position: relative;
}
.ec-ch-nav-logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--ec-oc-text);
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px;
    letter-spacing: -.01em;
}
.ec-ch-nav-logo-mark {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #2A2F3E, #0F1220);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.10);
}
.ec-ch-nav-logo-mark svg { width: 14px; height: 14px; }
.ec-ch-nav-logo-text {
    background: none;
    -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: var(--ec-oc-text);
    color: var(--ec-oc-text);
}
.ec-ch-nav-links {
    display: flex; gap: 4px; justify-content: center;
    align-items: center;
}
.ec-ch-nav-links a {
    position: relative;
    font-size: 13.5px; font-weight: 500;
    color: var(--ec-oc-text);
    opacity: .78;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background .15s var(--ec-ease), color .15s, opacity .15s;
}
/* Bullet separators between links — Ocamba touch */
.ec-ch-nav-links a + a::before {
    content: '·';
    position: absolute;
    left: -2px;
    color: rgba(15,23,42,.30);
    pointer-events: none;
}
.ec-ch-nav-links a:hover { opacity: 1; color: var(--ec-oc-cobalt); }
.ec-ch-nav-links a.is-active,
.ec-ch-nav-links a[aria-current="page"] {
    color: var(--ec-oc-cobalt);
    opacity: 1;
    font-weight: 600;
}
.ec-ch-nav-cta { display: inline-flex; align-items: center; gap: 10px; }
.ec-ch-cta-ghost {
    font-size: 13px; font-weight: 500;
    color: var(--ec-oc-text);
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.15);
    transition: background .15s, border-color .15s, color .15s;
}
.ec-ch-cta-ghost:hover { background: var(--ec-oc-cobalt-soft); color: var(--ec-oc-cobalt); border-color: var(--ec-oc-cobalt); }
.ec-ch-cta-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--ec-oc-cobalt);
    color: #fff !important;
    text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 6px 16px rgba(34,211,238,.32);
    transition: transform .15s var(--ec-ease), box-shadow .2s, background .15s;
}
.ec-ch-cta-btn:hover {
    background: var(--ec-oc-cobalt-dk);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(34,211,238,.42);
}

/* ---------- Text column (left) ---------- */
.ec-ch-text {
    grid-column: 1; grid-row: 2;
    padding: 24px 56px 24px;
    align-self: center;
    min-height: 620px;          /* hold height for intro + tallest expanded slide */
    z-index: 4;
    position: relative;
}
.ec-ch-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 300;
    line-height: 1.32;
    color: var(--ec-text);
    margin: 0 0 22px;
    letter-spacing: -.01em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.ec-ch-chip {
    position: relative;
    display: inline-flex;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--ec-feat-accent, #DBEAFE);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: 0 4px 12px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.45);
    transition: background-color .8s var(--ec-ease);
}
.ec-ch-chip svg { width: 26px; height: 26px; }

/* ---------- Opening phase (PHASE 0): tagline + subtitle + try-demo pill ---------- */
.ec-ch-intro {
    position: absolute;
    left: 56px; right: 56px; top: 24px;
    max-width: 620px;
    z-index: 3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .4s ease-out, transform .4s ease-out;
    will-change: opacity, transform;
}
.ec-ch-intro.is-active {
    opacity: 1;
    transform: none;
}
.ec-ch-intro.is-leaving {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease-in, transform .3s ease-in;
    pointer-events: none;
}
.ec-ch-intro.is-hidden { display: none; }

.ec-ch-intro-sub {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ec-oc-muted, #6B7280);
    max-width: 460px;
    margin: 18px 0 28px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .5s ease-out .15s, transform .5s ease-out .15s;
}
.ec-ch-intro.is-active .ec-ch-intro-sub {
    opacity: 1; transform: none;
}
.ec-ch-intro-cta {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .5s ease-out .30s, transform .5s ease-out .30s;
}
.ec-ch-intro.is-active .ec-ch-intro-cta {
    opacity: 1; transform: none;
}
.ec-ch-intro-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--ec-oc-cobalt, #4F46E5);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(34,211,238,.32);
    transition: transform .2s var(--ec-ease), box-shadow .2s, background .15s;
}
.ec-ch-intro-pill:hover {
    background: var(--ec-oc-cobalt-dk, #4338CA);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(34,211,238,.42);
    color: #fff;
}
.ec-ch-intro-pill svg { transition: transform .2s var(--ec-ease); }
.ec-ch-intro-pill:hover svg { transform: translate(2px, -2px); }

.ec-ch-slides {
    position: relative;
    min-height: 560px;          /* hold height for the tallest expanded slide */
}
.ec-ch-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.ec-ch-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.ec-ch-slide.is-leaving {
    z-index: 1;       /* let entering slide stack above briefly */
    pointer-events: none;
}
/* Slide children — incoming defaults (start position before is-active) */
.ec-ch-slide .ec-ch-label,
.ec-ch-slide .ec-ch-name,
.ec-ch-slide .ec-ch-desc,
.ec-ch-slide .ec-ch-detail,
.ec-ch-slide .ec-ch-bullets,
.ec-ch-slide .ec-ch-btn {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .4s ease-out, transform .4s ease-out;
}
/* Entering: stagger 80ms */
.ec-ch-slide.is-active .ec-ch-label,
.ec-ch-slide.is-active .ec-ch-name,
.ec-ch-slide.is-active .ec-ch-desc,
.ec-ch-slide.is-active .ec-ch-detail,
.ec-ch-slide.is-active .ec-ch-bullets,
.ec-ch-slide.is-active .ec-ch-btn { opacity: 1; transform: none; }
.ec-ch-slide.is-active .ec-ch-label   { transition-delay: 0ms; }
.ec-ch-slide.is-active .ec-ch-name    { transition-delay: 80ms; }
.ec-ch-slide.is-active .ec-ch-desc    { transition-delay: 160ms; }
.ec-ch-slide.is-active .ec-ch-detail  { transition-delay: 240ms; }
.ec-ch-slide.is-active .ec-ch-bullets { transition-delay: 320ms; }
.ec-ch-slide.is-active .ec-ch-btn     { transition-delay: 400ms; }
/* Leaving: 300ms ease-in, translateY +8 (down), stagger 80ms */
.ec-ch-slide.is-leaving .ec-ch-label,
.ec-ch-slide.is-leaving .ec-ch-name,
.ec-ch-slide.is-leaving .ec-ch-desc,
.ec-ch-slide.is-leaving .ec-ch-detail,
.ec-ch-slide.is-leaving .ec-ch-bullets,
.ec-ch-slide.is-leaving .ec-ch-btn {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease-in, transform .3s ease-in;
}
.ec-ch-slide.is-leaving .ec-ch-label   { transition-delay: 0ms; }
.ec-ch-slide.is-leaving .ec-ch-name    { transition-delay: 80ms; }
.ec-ch-slide.is-leaving .ec-ch-desc    { transition-delay: 160ms; }
.ec-ch-slide.is-leaving .ec-ch-detail  { transition-delay: 240ms; }
.ec-ch-slide.is-leaving .ec-ch-bullets { transition-delay: 320ms; }
.ec-ch-slide.is-leaving .ec-ch-btn     { transition-delay: 400ms; }

.ec-ch-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(15,23,42,.58);
    margin-bottom: 18px;
}
.ec-ch-name {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.022em;
    color: var(--ec-text);
    margin: 0 0 16px;
    max-width: 560px;
}
.ec-ch-word { display: inline-block; }
.ec-ch-name.is-revealing .ec-ch-word,
.ec-ch-tagline.is-revealing .ec-ch-word {
    opacity: 0;
    transform: translateY(14px);
    animation: ec-ch-word-in .55s var(--ec-ease) forwards;
    animation-delay: calc(var(--ec-word-i, 0) * 60ms + 80ms);
}

.ec-ch-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ec-text);
    opacity: .85;
    max-width: 520px;
    margin: 0 0 14px;
}
.ec-ch-detail {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ec-oc-muted, #6B7280);
    max-width: 520px;
    margin: 0 0 16px;
}
.ec-ch-bullets {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 22px;
    max-width: 580px;
}
.ec-ch-bullets li {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ec-text);
    opacity: .82;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ec-ch-bullet-tick {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--ec-oc-cobalt-soft, #EEF0FE);
    color: var(--ec-oc-cobalt, #4F46E5);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-top: 1px;
}
@media (max-width: 920px) {
    .ec-ch-bullets { grid-template-columns: 1fr; }
}
.ec-ch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ec-oc-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.08);
    transition: transform .2s var(--ec-ease), box-shadow .2s var(--ec-ease);
}
.ec-ch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15,23,42,.15), 0 0 0 1px rgba(15,23,42,.14);
    color: var(--ec-oc-text);
}
.ec-ch-btn:focus-visible { outline: 2px solid var(--ec-oc-cobalt); outline-offset: 3px; }
.ec-ch-btn svg { transition: transform .2s var(--ec-ease); }
.ec-ch-btn:hover svg { transform: translate(2px, -2px); }

/* ---------- 3D-look scene (right) ---------- */
.ec-ch-scene {
    grid-column: 2; grid-row: 2;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Layer 1 — animated SVG waves */
.ec-ch-waves {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}
.ec-ch-wave-g { will-change: transform; }
.ec-ch-wave-g-1 { animation: ec-ch-drift1 30s ease-in-out infinite; }
.ec-ch-wave-g-2 { animation: ec-ch-drift2 36s ease-in-out infinite -3s; }
.ec-ch-wave-g-3 { animation: ec-ch-drift3 42s ease-in-out infinite -6s; }

/* Layer 2 — perspective floor (v0.12: deeper grid + horizon glow) */
.ec-ch-floor {
    position: absolute;
    left: -15%; right: -15%;
    bottom: -2%;
    height: 62%;
    transform: perspective(700px) rotateX(64deg);
    transform-origin: center bottom;
    background:
        repeating-linear-gradient(0deg,  rgba(11,46,92,.12) 0 1.5px, transparent 1.5px 44px),
        repeating-linear-gradient(90deg, rgba(11,46,92,.12) 0 1.5px, transparent 1.5px 44px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
    z-index: 1;
    pointer-events: none;
}
.ec-ch-floor::after {       /* horizon glow band */
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(160,195,235,.45) 0%, rgba(160,195,235,.15) 25%, transparent 50%),
        linear-gradient(180deg, transparent 55%, rgba(255,255,255,.18) 70%, transparent 85%);
    pointer-events: none;
}

/* Layer 3 — frosted glass cube (v0.12: bigger + pedestal shadow) */
.ec-ch-cube {
    position: absolute;
    top: 50%; left: 55%;
    margin-left: -190px;
    margin-top: -210px;        /* lifted slightly above geometric centre */
    width: 380px; height: 380px;
    border-radius: 44px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 60%, rgba(255,255,255,.05) 100%),
        var(--ec-feat-accent, #DBEAFE);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow:
        0 50px 90px -18px rgba(15,23,42,.36),
        inset 0 1px 0 rgba(255,255,255,.7);
    z-index: 3;
    overflow: hidden;
    animation: ec-ch-cube-breathe 6s ease-in-out infinite;
    transition: background-color .8s var(--ec-ease);
    will-change: transform, opacity;
}
/* Soft pedestal shadow under the cube on the floor */
.ec-ch-cube-shadow {
    position: absolute;
    top: 50%; left: 55%;
    margin-left: -160px;
    margin-top: 150px;
    width: 320px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(15,23,42,.28) 0%, transparent 70%);
    filter: blur(6px);
    z-index: 2;
    pointer-events: none;
    animation: ec-ch-shadow-breathe 6s ease-in-out infinite;
}
.ec-ch-cube.is-pulsing { animation: ec-ch-cube-pulse .8s var(--ec-ease); }
/* The one-shot blur change is via class toggle, not the breathing loop */
.ec-ch-cube.is-pulsing { backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }

/* Cube refraction highlights via pseudo-elements */
.ec-ch-cube::before, .ec-ch-cube::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ec-ch-cube::before {
    background: linear-gradient(135deg, rgba(255,255,255,.65) 0%, transparent 50%);
    clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
    opacity: .35;
}
.ec-ch-cube::after {
    background:
        radial-gradient(circle at 78% 22%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 22% 82%, rgba(255,255,255,.20), transparent 45%);
    opacity: .65;
}

.ec-ch-bloom {
    position: absolute;
    top: 50%; left: 50%;
    width: 320px; height: 320px;
    margin-left: -160px; margin-top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ec-feat-accent, #DBEAFE) 0%, transparent 65%);
    opacity: .5;
    z-index: 0;
    transition: background .8s var(--ec-ease), opacity .8s var(--ec-ease);
    pointer-events: none;
}

/* ---------- Scene decorations: secondary pill + rear-right small cube + floor streaks ---------- */
.ec-ch-deco-pill {
    position: absolute;
    top: 50%;
    left: 55%;
    margin-left: 130px;     /* sits to the right of the main cube */
    margin-top: 130px;      /* close to floor level */
    width: 78px; height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        0 10px 24px -8px rgba(15,23,42,.30),
        inset 0 1px 0 rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
    transform: rotate(-4deg);
    animation: ec-ch-deco-pill-breathe 7s ease-in-out infinite;
}
.ec-ch-deco-cube {
    position: absolute;
    top: 50%;
    left: 55%;
    margin-left: -290px;    /* rear-left of main cube */
    margin-top: -40px;
    width: 84px; height: 84px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 65%),
        rgba(220,228,245,.40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        0 16px 28px -8px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.55);
    z-index: 2;        /* behind main cube */
    transform: scale(.95);
    animation: ec-ch-deco-cube-breathe 8s ease-in-out infinite -2s;
}
/* ---------- Rotating icon badges on the ice plates (2s cycle) ---------- */
.ec-ch-cube-badges {
    position: absolute;
    inset: 0;
    z-index: 4;            /* above the cube's pseudo-element refraction */
    pointer-events: none;
}
.ec-ch-cube-badge {
    position: absolute;
    top: 50%; left: 50%;
    width: 112px; height: 112px;
    margin: -56px 0 0 -56px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.92), rgba(255,255,255,.65) 65%),
        var(--ec-feat-accent, #DBEAFE);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow:
        0 12px 28px -8px rgba(15,23,42,.30),
        inset 0 1px 0 rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .35s ease-out, transform .35s ease-out, background-color .35s ease-out;
}
.ec-ch-cube-badge.is-active {
    opacity: 1;
    transform: scale(1);
}
.ec-ch-cube-badge svg {
    width: 64px; height: 64px;
    filter: drop-shadow(0 6px 10px rgba(15,23,42,.18));
}
.ec-ch-cube-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
/* Extra floating ice tiles scattered around the scene */
.ec-ch-extra-tile {
    position: absolute;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.20) 60%, rgba(255,255,255,.10) 100%),
        rgba(220,228,245,.40);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        0 14px 28px -8px rgba(15,23,42,.20),
        inset 0 1px 0 rgba(255,255,255,.55);
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ec-ch-extra-tile-a {     /* top-right, small */
    top: 8%; right: 7%;
    width: 64px; height: 64px;
    animation: ec-ch-extra-float-a 9s ease-in-out infinite;
}
.ec-ch-extra-tile-b {     /* mid-left, medium */
    top: 36%; left: 4%;
    width: 76px; height: 76px;
    animation: ec-ch-extra-float-b 11s ease-in-out infinite -2s;
}
.ec-ch-extra-tile-c {     /* bottom-right, small */
    bottom: 18%; right: 12%;
    width: 58px; height: 58px;
    animation: ec-ch-extra-float-c 10s ease-in-out infinite -4s;
}
.ec-ch-extra-tile-d {     /* mid-far-right, tiny */
    top: 52%; right: 4%;
    width: 50px; height: 50px;
    animation: ec-ch-extra-float-a 12s ease-in-out infinite -6s;
}
.ec-ch-extra-badges {
    position: relative;
    width: 100%; height: 100%;
    pointer-events: none;
}
.ec-ch-extra-badge {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .3s ease-out, transform .3s ease-out;
}
.ec-ch-extra-badge.is-active {
    opacity: 1;
    transform: scale(1);
}
.ec-ch-extra-badge svg {
    filter: drop-shadow(0 4px 8px rgba(15,23,42,.20));
}
.ec-ch-extra-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;       /* slightly inside the tile's 16px radius */
    display: block;
}

/* Small badge on the deco-cube */
.ec-ch-deco-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ec-ch-deco-badge {
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #F4F6FC);
    box-shadow: 0 4px 10px -2px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.65);
    transition: opacity .3s ease-out, transform .3s ease-out;
}
.ec-ch-deco-badge.is-active {
    opacity: 1;
    transform: scale(1);
}
.ec-ch-deco-badge svg { width: 28px; height: 28px; }
.ec-ch-deco-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ec-ch-streak {
    position: absolute;
    height: 1.2px;
    background: linear-gradient(90deg, transparent 0%, rgba(96,140,210,.55) 50%, transparent 100%);
    border-radius: 2px;
    pointer-events: none;
}
.ec-ch-streak-1 { left: -10%; right: -10%; top: 38%; animation: ec-ch-streak-drift 11s linear infinite; }
.ec-ch-streak-2 { left: -10%; right: -10%; top: 56%; animation: ec-ch-streak-drift 14s linear infinite -3s; opacity: .55; }
.ec-ch-streak-3 { left: -10%; right: -10%; top: 74%; animation: ec-ch-streak-drift 17s linear infinite -7s; opacity: .35; }

/* ---------- Right-edge dot column ---------- */
.ec-ch-dots {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 11px;
    z-index: 5;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.ec-ch-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(15,23,42,.30);
    cursor: pointer;
    padding: 0;
    transition: background .25s var(--ec-ease), transform .25s var(--ec-ease), border-color .25s;
}
.ec-ch-dot:hover { border-color: var(--ec-oc-cobalt); transform: scale(1.30); }
.ec-ch-dot.is-active { background: var(--ec-oc-cobalt); border-color: var(--ec-oc-cobalt); transform: scale(1.55); }
.ec-ch-dot:focus-visible { outline: 2px solid var(--ec-oc-cobalt); outline-offset: 3px; }

/* ---------- Card footer row ---------- */
.ec-ch-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 22px 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    color: rgba(15,23,42,.55);
    font-size: 10.5px;
    line-height: 1.65;
    letter-spacing: .12em;
    text-transform: uppercase;
    z-index: 4;
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(15,23,42,.02));
}
.ec-ch-foot-l { text-align: left; }
.ec-ch-foot-c {
    display: inline-flex; align-items: center; gap: 9px;
    justify-self: center;
    font-size: 10px;
}
.ec-ch-foot-ring {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(15,23,42,.30);
    color: rgba(15,23,42,.55);
    transition: border-color .2s, color .2s;
}
.ec-ch-foot-ring svg {
    animation: ec-ch-chevron 1.6s ease-in-out infinite;
    will-change: transform;
}
.ec-ch-foot-r {
    text-align: right;
    text-transform: none;
    letter-spacing: .02em;
    font-size: 11px;
    color: rgba(15,23,42,.50);
}

/* ---------- "Modules in detail" anchor target section ---------- */
.ec-modules-detail {
    max-width: 1200px;
    margin: 80px auto 30px;
    padding: 0 0 30px;
}
.ec-modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 36px;
}
@media (max-width: 760px) { .ec-modules-grid { grid-template-columns: 1fr; } }
.ec-module-card {
    scroll-margin-top: 90px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--ec-feat-accent, var(--ec-accent));
    border-radius: var(--ec-radius);
    padding: 30px 30px 28px;
    transition: transform .25s var(--ec-ease), box-shadow .25s var(--ec-ease);
    position: relative;
}
.ec-module-card:hover { transform: translateY(-4px); box-shadow: var(--ec-shadow-lg); }
.ec-module-card:target {
    box-shadow: 0 0 0 3px var(--ec-feat-accent, var(--ec-accent-soft)), var(--ec-shadow-lg);
    transform: translateY(-2px);
}
.ec-module-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.ec-module-icon {
    width: 68px; height: 68px;
    background: var(--ec-feat-accent, var(--ec-accent-soft));
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ec-module-icon svg { filter: drop-shadow(0 6px 12px rgba(15,23,42,.12)); }
.ec-module-kicker {
    font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ec-muted);
    display: block; margin-bottom: 4px;
}
.ec-module-name { font-family: 'Poppins'; font-size: 1.4rem; font-weight: 600; margin: 0; color: var(--ec-text); }
.ec-module-desc { font-size: 15.5px; color: var(--ec-text); margin: 0 0 14px; line-height: 1.6; }
.ec-module-detail { font-size: 14.5px; color: var(--ec-text-soft); margin: 0 0 18px; line-height: 1.65; }
.ec-module-inside { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ec-module-inside li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ec-text-soft); }
.ec-module-tick {
    flex: 0 0 20px; height: 20px; border-radius: 50%;
    background: var(--ec-feat-accent, var(--ec-accent-soft));
    color: var(--ec-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}

/* ---------- Mobile pass (v0.12) ---------- */
@media (max-width: 900px) {
    .ec-carousel-hero { padding: 14px 10px; margin-bottom: 24px; }
    .ec-ch-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        min-height: 700px;
        border-radius: 18px;
    }
    /* Nav on mobile: keep logo + CTA, hide central links */
    .ec-ch-nav { grid-column: 1; grid-row: 1; padding: 16px 18px; grid-template-columns: auto 1fr; gap: 12px; }
    .ec-ch-nav-links { display: none; }
    .ec-ch-cta-ghost { display: none; }
    .ec-ch-nav-cta { justify-self: end; }
    .ec-ch-cta-btn { padding: 9px 16px; font-size: 12.5px; }

    .ec-ch-text  { grid-column: 1; grid-row: 2; padding: 24px 22px 12px; }
    .ec-ch-scene { grid-column: 1; grid-row: 3; min-height: 320px; }
    .ec-ch-foot  { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; gap: 8px; padding: 18px 22px; text-align: center; }
    .ec-ch-foot-l, .ec-ch-foot-c, .ec-ch-foot-r { text-align: center; justify-self: center; }

    .ec-ch-name    { font-size: 42px; }
    .ec-ch-tagline { font-size: 22px; }
    .ec-ch-slides  { min-height: 320px; }
    .ec-ch-cube    { width: 220px; height: 220px; margin-left: -110px; margin-top: -120px; border-radius: 30px; left: 50%; }
    .ec-ch-cube-icon svg { width: 84px; height: 84px; }
    .ec-ch-bloom   { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; }
    .ec-ch-cube-shadow { margin-left: -100px; margin-top: 90px; width: 200px; height: 24px; left: 50%; }
    .ec-ch-floor   { display: none; }
    .ec-ch-wave-g-2, .ec-ch-wave-g-3 { display: none; }

    .ec-ch-dots {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        padding: 10px 0 20px;
    }
    .ec-modules-detail { padding: 0 12px 30px; margin-top: 30px; }
}

/* ---------- Reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
    .ec-ch-cube,
    .ec-ch-wave-g,
    .ec-ch-foot-c svg,
    .ec-ch-cube.is-pulsing { animation: none !important; }
    .ec-ch-slide,
    .ec-ch-cube-icon,
    .ec-ch-chip-icon,
    .ec-ch-cube,
    .ec-ch-bloom,
    .ec-ch-chip { transition: none !important; }
    .ec-ch-name.is-revealing .ec-ch-word { opacity: 1 !important; transform: none !important; animation: none !important; }
    .ec-ch-slide .ec-ch-label,
    .ec-ch-slide .ec-ch-name,
    .ec-ch-slide .ec-ch-desc,
    .ec-ch-slide .ec-ch-btn { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ec-ch-slide:not(.is-active) .ec-ch-label,
    .ec-ch-slide:not(.is-active) .ec-ch-name,
    .ec-ch-slide:not(.is-active) .ec-ch-desc,
    .ec-ch-slide:not(.is-active) .ec-ch-btn { opacity: 0 !important; }
}

/* =================================================================
   v0.13 — Section archetypes (eyebrow, 3-col features, security band, FAQ)
   ================================================================= */

/* ---------- Shared: section eyebrow + section head ---------- */
.ec-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--ec-accent-dark);
    margin-bottom: 12px;
    position: relative; padding-left: 22px;
}
.ec-eyebrow::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 14px; height: 2px; background: var(--ec-accent);
    transform: translateY(-50%);
}
.ec-eyebrow-on-dark { color: var(--ec-accent-bright); }
.ec-eyebrow-on-dark::before { background: var(--ec-accent-bright); }

/* ---------- 3-column feature cards (signature pattern) ---------- */
.ec-features-3col {
    max-width: 1200px; margin: 80px auto 0;
    padding: 0 24px;
}
.ec-features-3col-head {
    text-align: center; max-width: 720px;
    margin: 0 auto 48px;
}
.ec-features-3col-head h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    margin-bottom: 12px;
}
.ec-features-3col-head p {
    color: var(--ec-ink-soft); font-size: 16px; line-height: 1.65;
    margin: 0;
}
.ec-features-3col-grid {
    display: grid; gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .ec-features-3col-grid { grid-template-columns: 1fr; }
}
.ec-feat3-card {
    background: var(--ec-surface);
    border: 1px solid var(--ec-line-light);
    border-radius: 18px;
    padding: 32px 28px 28px;
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
    transition: transform .25s var(--ec-ease), box-shadow .25s var(--ec-ease), border-color .25s;
    position: relative;
}
.ec-feat3-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -8px rgba(15,23,42,.12);
    border-color: var(--ec-accent-soft);
}
.ec-feat3-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ec-accent-soft);
    color: var(--ec-accent-dark);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.ec-feat3-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 10px;
    color: var(--ec-ink);
}
.ec-feat3-rule {
    display: block; width: 36px; height: 2px;
    background: var(--ec-accent);
    margin: 0 0 16px;
}
.ec-feat3-card p {
    color: var(--ec-ink-soft);
    font-size: 14.5px; line-height: 1.65;
    margin: 0;
}

/* ---------- Dark security / privacy band (full-bleed v0.14) ---------- */
.ec-security-band {
    margin: 80px calc(50% - 50vw) 0;
    padding: 88px max(24px, calc(50vw - 600px));
    background:
        radial-gradient(circle at 12% 14%, rgba(34,211,238,.18), transparent 55%),
        radial-gradient(circle at 88% 88%, rgba(249,112,102,.12), transparent 55%),
        linear-gradient(135deg, var(--ec-bg-dark) 0%, var(--ec-bg-dark-2) 100%);
    color: var(--ec-ink-invert);
}
.ec-security-band-inner {
    max-width: 1180px; margin: 0 auto;
}
.ec-security-band-head {
    max-width: 760px; margin: 0 auto 48px;
    text-align: center;
}
.ec-security-band-head h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3.8vw, 2.5rem);
    margin-bottom: 14px;
}
.ec-security-band-head h2 .ec-grad-text {
    background: linear-gradient(135deg, var(--ec-accent-bright), var(--ec-coral));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ec-security-band-head p {
    color: var(--ec-ink-invert-soft);
    font-size: 16.5px; line-height: 1.7;
    margin: 0;
}
.ec-security-pillars {
    display: grid; gap: 22px;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) { .ec-security-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ec-security-pillars { grid-template-columns: 1fr; } }
.ec-security-pillar {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 24px 22px;
    backdrop-filter: blur(4px);
    transition: transform .25s var(--ec-ease), border-color .25s, background .25s;
}
.ec-security-pillar:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.07);
    border-color: rgba(34,211,238,.30);
}
.ec-security-pillar-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(34,211,238,.14);
    color: var(--ec-accent-bright);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.ec-security-pillar strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.ec-security-pillar p {
    color: var(--ec-ink-invert-soft);
    font-size: 14px; line-height: 1.6;
    margin: 0;
}

/* ---------- FAQ accordion (native details/summary) ---------- */
.ec-faq {
    max-width: 860px; margin: 80px auto 0;
    padding: 0 24px;
}
.ec-faq-head {
    text-align: center; margin-bottom: 36px;
}
.ec-faq-head h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    margin: 0;
}
.ec-faq-list {
    display: flex; flex-direction: column; gap: 12px;
}
.ec-faq-item {
    background: var(--ec-surface);
    border: 1px solid var(--ec-line-light);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.ec-faq-item[open],
.ec-faq-item:hover {
    border-color: var(--ec-accent-soft);
    box-shadow: 0 8px 24px -10px rgba(15,23,42,.10);
}
.ec-faq-item > summary {
    list-style: none;
    padding: 20px 60px 20px 24px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ec-ink);
    position: relative;
    user-select: none;
}
.ec-faq-item > summary::-webkit-details-marker { display: none; }
.ec-faq-item > summary::after {
    content: '+';
    position: absolute; right: 22px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ec-accent-soft);
    color: var(--ec-accent-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; line-height: 1;
    transition: transform .25s var(--ec-ease), background .2s, color .2s;
}
.ec-faq-item[open] > summary::after {
    content: '×';
    transform: translateY(-50%) rotate(0deg);
    background: var(--ec-accent);
    color: #fff;
}
.ec-faq-item > summary:hover { color: var(--ec-accent-dark); }
.ec-faq-body {
    padding: 0 24px 22px;
    color: var(--ec-ink-soft);
    font-size: 14.5px; line-height: 1.7;
}

/* ============================================================
   EDUCORE — LIGHT APP THEME (post-auth pages)
   Scope: body.educore-app-light
   Applies to /portal, /e-library, /my-progress, /fees.
   Self-contained: does not depend on or override the v0.15 dark
   marketing skin. Quiet white/slate palette, single blue accent,
   hairline borders, no gradients or glass.
   ============================================================ */

body.educore-app-light {
    --la-bg:        #EEF1F6;   /* cool slate page background (around shell + behind sidebar) */
    --la-surface:   #FAF7F0;   /* soft cream cards — sit on the cream main panel, blend in */
    --la-surface-2: #EBEEF3;   /* hover, table stripe */
    --la-rail:      #E5EAF0;   /* sidebar rail */
    --la-rail-hover:#DDE3EB;   /* contrast hover against the rail */
    --la-border:    #E5E7EB;   /* warm hairline */
    --la-border-2:  #D1D5DB;   /* warm input border */
    --la-text:      #0F172A;   /* deep warm-black — headings */
    --la-text-2:    #334155;   /* warm slate-700 — body */
    --la-muted:     #64748B;   /* warm muted — secondary */
    --la-dim:       #94A3B8;   /* warm dim — placeholder */
    --la-accent:    #2563EB;   /* blue-600 — primary action */
    --la-accent-2:  #1D4ED8;   /* blue-700 — hover */
    --la-accent-bg: #EFF6FF;   /* blue-50 — tinted panel */
    --la-success:   #16A34A;
    --la-success-bg:#F0FDF4;
    --la-success-bd:#BBF7D0;
    --la-warn:      #B45309;
    --la-warn-bg:   #FFFBEB;
    --la-warn-bd:   #FDE68A;
    --la-danger:    #DC2626;
    --la-danger-bg: #FEF2F2;
    --la-danger-bd: #FECACA;
    --la-shadow:    0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
    --la-shadow-2:  0 4px 12px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --la-radius:    12px;
    --la-radius-sm: 8px;

    background: var(--la-bg);
    color: var(--la-text-2);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Kill marketing chrome on app pages */
body.educore-app-light .ec-nav,
body.educore-app-light .ec-footer,
body.educore-app-light .ec-v15-toast,
body.educore-app-light .entry-title,
body.educore-app-light .page-header,
body.educore-app-light .elementor-location-header,
body.educore-app-light .elementor-location-footer { display: none !important; }
body.educore-app-light::before,
body.educore-app-light::after { content: none !important; }

/* v0.17 — Tutor LMS course + course-archive pages carry BOTH educore-app-light
   (for the sidebar shell) and educore-course-skin. The app-light rule above
   hides .ec-footer, but these are public Tutor pages that should keep the
   site footer. Re-show it ONLY for the two-class combo, which is unique to
   Tutor course pages — the real sidebar apps (portal / e-library / my-progress
   / admin-panel) have app-light WITHOUT course-skin, so they stay footer-less. */
body.educore-app-light.educore-course-skin .ec-footer { display: block !important; }

/* Strip page-content padding so the shell can go edge-to-edge */
body.educore-app-light .site-main,
body.educore-app-light main#content,
body.educore-app-light .page-content,
body.educore-app-light .entry-content { padding: 0; max-width: 100%; margin: 0; background: transparent; }

/* ---------- Shell ---------- */
.educore-app-light .ec-v15-app-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
    background: var(--la-bg);
}

/* ---------- Sidebar ----------
   The sidebar uses a distinct sand tone (--la-rail) and has NO right
   border. The color step itself draws the boundary, so the sidebar and
   main column read as one continuous surface split into two zones. */
.educore-app-light .ec-v15-app-side {
    background: var(--la-rail);
    border-right: 0;
    padding: 20px 14px;
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh;
    transition: width .2s ease, padding .2s ease;
}
.educore-app-light .ec-v15-app-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--la-text);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700; font-size: 1.05rem;
    padding: 6px 10px 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--la-border);
}
.educore-app-light .ec-app-mark {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--la-accent); color: #fff;
    flex-shrink: 0;
}
.educore-app-light .ec-v15-app-nav {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; padding-top: 14px;
}
.educore-app-light .ec-v15-app-link {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border-radius: var(--la-radius-sm);
    color: var(--la-text-2);
    text-decoration: none;
    font-size: .92rem; font-weight: 500;
    isolation: isolate;
    transition: color .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1),
                padding-left .3s cubic-bezier(.32,.72,0,1),
                letter-spacing .3s cubic-bezier(.32,.72,0,1);
}
/* Soft gradient pill that fades in behind the text (effect 1) */
.educore-app-light .ec-v15-app-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--la-radius-sm);
    background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(34,211,238,.10));
    opacity: 0;
    transform: scale(.96);
    transition: opacity .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1);
    z-index: -1;
    pointer-events: none;
}
/* Animated left accent rail (effect 2) — grows from 0 → 60% of height */
.educore-app-light .ec-v15-app-link::after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    background: linear-gradient(180deg, #22D3EE, #7C3AED);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(124,58,237,.4);
    transition: height .4s cubic-bezier(.32,.72,0,1);
}
.educore-app-light .ec-v15-app-link-ic {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    color: var(--la-muted);
    background: none;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color .3s cubic-bezier(.32,.72,0,1),
                transform .3s cubic-bezier(.32,.72,0,1);
}
.educore-app-light .ec-v15-app-link:hover {
    color: var(--la-text);
    padding-left: 18px;
    letter-spacing: .01em;
    transform: translateY(-1px);
}
.educore-app-light .ec-v15-app-link:hover::before { opacity: 1; transform: scale(1); }
.educore-app-light .ec-v15-app-link:hover::after { height: 60%; }
/* Icon micro-motion (effect 3) */
.educore-app-light .ec-v15-app-link:hover .ec-v15-app-link-ic {
    color: var(--la-text);
    transform: scale(1.12) rotate(-4deg);
}
.educore-app-light .ec-v15-app-link.is-active {
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    font-weight: 600;
    box-shadow: none;
    padding-left: 18px;
}
.educore-app-light .ec-v15-app-link.is-active::after { height: 75%; }
.educore-app-light .ec-v15-app-link.is-active .ec-v15-app-link-ic { color: var(--la-accent); background: none; }
.educore-app-light .ec-v15-app-foot {
    padding-top: 12px;
    border-top: 1px solid var(--la-border);
}

/* ---------- Topbar ---------- */
.educore-app-light .ec-v15-app-main {
    padding: 0;
    min-width: 0;
    background: var(--la-bg);
}
.educore-app-light .ec-v15-app-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
    padding: 22px 36px;
    background: var(--la-bg);                   /* matches page bg — topbar visually continues the main area */
    border-bottom: 1px solid var(--la-border);
    position: sticky; top: 0; z-index: 10;
}
.educore-app-light .ec-v15-app-top-left {
    display: flex; align-items: center; gap: 14px;
    min-width: 0; flex: 1;
}
.educore-app-light .ec-v15-app-top h1 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 4px 0 0;
    color: var(--la-text);
    letter-spacing: -.01em;
    background: none; -webkit-text-fill-color: currentColor;
}
.educore-app-light .ec-v15-eyebrow {
    color: var(--la-muted);
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: none; -webkit-text-fill-color: currentColor;
}
.educore-app-light .ec-v15-app-top-right { display: flex; align-items: center; gap: 12px; }
.educore-app-light .ec-v15-app-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: none;
}

/* ---------- Content area ---------- */
.educore-app-light .ec-v15-app-content {
    padding: 28px 36px 56px;
    display: flex; flex-direction: column;
    gap: 20px;
}
.educore-app-light .educore-dashboard {
    display: flex; flex-direction: column; gap: 20px;
}

/* ---------- Page head (sub-title row) ---------- */
.educore-app-light .ec-page-head {
    margin: 0;
}
.educore-app-light .ec-page-head h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--la-text);
    margin: 0 0 4px;
}
.educore-app-light .ec-page-head p,
.educore-app-light .ec-muted {
    color: var(--la-muted);
    font-size: .9rem;
    margin: 0;
}

/* ---------- Cards ---------- */
.educore-app-light .ec-card,
.educore-app-light .ec-dash-section {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    padding: 22px 24px;
    box-shadow: var(--la-shadow);
    color: var(--la-text-2);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.educore-app-light .ec-card h2,
.educore-app-light .ec-card h3,
.educore-app-light .ec-card h4,
.educore-app-light .ec-section-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--la-text);
    font-weight: 600;
    margin: 0 0 14px;
    letter-spacing: -.005em;
}
.educore-app-light .ec-section-title { font-size: 1rem; }
.educore-app-light .ec-mini-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: var(--la-text);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 18px 0 10px;
}

/* ---------- Stat grid ---------- */
.educore-app-light .ec-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.educore-app-light .ec-stat,
.educore-app-light .ec-stat-card {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    padding: 16px 18px;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--la-text-2);
}
.educore-app-light .ec-stat-label,
.educore-app-light .ec-stat-card .ec-stat-label {
    color: var(--la-muted);
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.educore-app-light .ec-stat-value,
.educore-app-light .ec-stat-card strong {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--la-text);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    -webkit-text-fill-color: currentColor;
}
.educore-app-light .ec-stat-primary { border-left: 3px solid var(--la-accent); }
.educore-app-light .ec-stat-success { border-left: 3px solid var(--la-success); }
.educore-app-light .ec-stat-warning { border-left: 3px solid var(--la-warn); }
.educore-app-light .ec-stat-danger  { border-left: 3px solid var(--la-danger); }

/* Stat cards nested INSIDE another card — drop redundant border/padding */
.educore-app-light .ec-card .ec-stat-grid .ec-stat,
.educore-app-light .ec-card .ec-stat-grid .ec-stat-card {
    border: 1px solid var(--la-border);
    background: var(--la-surface);
}

/* ---------- Buttons ---------- */
.educore-app-light .ec-btn,
.educore-app-light .ec-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--la-radius-sm);
    background: var(--la-surface);
    color: var(--la-text);
    border: 1px solid var(--la-border-2);
    font-size: .9rem; font-weight: 500;
    text-decoration: none;
    box-shadow: var(--la-shadow);
    transition: background .15s ease, border-color .15s ease;
}
.educore-app-light .ec-btn:hover,
.educore-app-light .ec-btn-ghost:hover {
    background: var(--la-surface-2);
    border-color: #94A3B8;
}
.educore-app-light .ec-btn-primary {
    background: var(--la-accent);
    color: #fff;
    border-color: var(--la-accent);
    box-shadow: var(--la-shadow);
}
.educore-app-light .ec-btn-primary:hover {
    background: var(--la-accent-2);
    border-color: var(--la-accent-2);
}
.educore-app-light .ec-btn-lg { padding: 11px 20px; font-size: .95rem; }

/* ---------- Tables ---------- */
.educore-app-light table,
.educore-app-light .ec-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--la-surface);
    color: var(--la-text-2);
    font-size: .9rem;
}
.educore-app-light .ec-table thead th {
    text-align: left;
    padding: 12px 14px;
    background: var(--la-surface-2);
    color: var(--la-muted);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--la-border);
}
.educore-app-light .ec-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--la-border);
    color: var(--la-text-2);
}
.educore-app-light .ec-table tbody tr:last-child td { border-bottom: 0; }
.educore-app-light .ec-table tbody tr:hover td { background: var(--la-surface-2); }
.educore-app-light .ec-table td.num,
.educore-app-light .ec-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.educore-app-light .ec-table strong { color: var(--la-text); font-weight: 600; }
.educore-app-light .ec-table .is-danger { color: var(--la-danger); }
.educore-app-light .ec-table .is-success { color: var(--la-success); }
.educore-app-light .ec-fees-table-wrap { padding: 0; overflow-x: auto; }
.educore-app-light .ec-fees-table-wrap .ec-table { min-width: 720px; }

/* ---------- Tags / pills ---------- */
.educore-app-light .ec-tag,
.educore-app-light .ec-pill,
.educore-app-light .ec-pill-soft {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--la-surface-2);
    color: var(--la-text-2);
    border: 1px solid var(--la-border);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.educore-app-light .ec-tag-paid,
.educore-app-light .ec-tag-success {
    background: var(--la-success-bg); color: var(--la-success); border-color: var(--la-success-bd);
}
.educore-app-light .ec-tag-unpaid,
.educore-app-light .ec-tag-overdue,
.educore-app-light .ec-tag-danger {
    background: var(--la-danger-bg); color: var(--la-danger); border-color: var(--la-danger-bd);
}
.educore-app-light .ec-tag-partial,
.educore-app-light .ec-tag-pending,
.educore-app-light .ec-tag-warning {
    background: var(--la-warn-bg); color: var(--la-warn); border-color: var(--la-warn-bd);
}
.educore-app-light .ec-tag-all {
    background: var(--la-accent-bg); color: var(--la-accent-2); border-color: #BFDBFE;
}

/* ---------- Course / E-Library grid ---------- */
.educore-app-light .ec-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.educore-app-light .ec-course-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.educore-app-light .ec-course-card {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--la-text-2);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    box-shadow: var(--la-shadow);
    display: flex; flex-direction: column;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.educore-app-light .ec-course-card:hover {
    border-color: var(--la-border-2);
    box-shadow: var(--la-shadow-2);
    transform: translateY(-1px);
}
.educore-app-light .ec-course-thumb {
    aspect-ratio: 16 / 9;
    background-color: var(--la-surface-2);
    background-size: cover; background-position: center;
    border-bottom: 1px solid var(--la-border);
}
.educore-app-light .ec-course-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.educore-app-light .ec-course-body h4 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1rem; font-weight: 600;
    color: var(--la-text);
    margin: 0;
}
.educore-app-light .ec-course-body p { font-size: .87rem; color: var(--la-muted); margin: 0; }
.educore-app-light .ec-course-classes { display: flex; flex-wrap: wrap; gap: 4px; }
.educore-app-light .ec-link {
    color: var(--la-accent);
    font-weight: 600;
    font-size: .87rem;
    margin-top: auto;
    text-decoration: none;
}
.educore-app-light .ec-course-card:hover .ec-link { color: var(--la-accent-2); }

/* ---------- Quick actions ---------- */
.educore-app-light .ec-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.educore-app-light .ec-action {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: var(--la-radius-sm);
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    color: var(--la-text);
    text-decoration: none;
    font-size: .92rem; font-weight: 500;
    transition: background .15s ease, border-color .15s ease;
}
.educore-app-light .ec-action:hover {
    background: var(--la-accent-bg);
    border-color: #BFDBFE;
    color: var(--la-accent-2);
}
.educore-app-light .ec-action span { font-size: 1.05rem; }

/* ---------- Grade banner ---------- */
.educore-app-light .ec-grade-banner {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 20px;
    border-radius: var(--la-radius);
    background: var(--la-surface-2);
    border: 1px solid var(--la-border);
    margin-bottom: 16px;
}
.educore-app-light .ec-grade-letter {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: var(--la-accent);
    color: #fff;
    display: grid; place-items: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.6rem; font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.educore-app-light .ec-grade-meta strong {
    display: block;
    color: var(--la-text);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.educore-app-light .ec-grade-meta span { color: var(--la-muted); font-size: .85rem; }

/* ---------- Forms ---------- */
.educore-app-light input[type="text"],
.educore-app-light input[type="search"],
.educore-app-light input[type="number"],
.educore-app-light input[type="email"],
.educore-app-light input[type="password"],
.educore-app-light input[type="date"],
.educore-app-light textarea,
.educore-app-light select {
    background: var(--la-surface);
    border: 1px solid var(--la-border-2);
    color: var(--la-text);
    border-radius: var(--la-radius-sm);
    padding: 9px 12px;
    font-size: .92rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.educore-app-light input:focus,
.educore-app-light textarea:focus,
.educore-app-light select:focus {
    outline: 0;
    border-color: var(--la-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.educore-app-light input::placeholder,
.educore-app-light textarea::placeholder { color: var(--la-dim); }

/* ---------- Charts container ---------- */
.educore-app-light canvas { max-width: 100%; }
.educore-app-light .ec-chart-wrap {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    padding: 14px;
    margin-top: 8px;
}

/* ---------- Empty states / flashes ---------- */
.educore-app-light .ec-empty {
    text-align: center;
    color: var(--la-muted);
}
.educore-app-light .ec-flash { padding: 10px 14px; border-radius: var(--la-radius-sm); font-size: .88rem; }
.educore-app-light .ec-flash-warn {
    background: var(--la-warn-bg);
    color: var(--la-warn);
    border: 1px solid var(--la-warn-bd);
}

/* ---------- CTA row ---------- */
.educore-app-light .ec-cta-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding-top: 6px;
}

/* ---------- Parent child card ---------- */
.educore-app-light .ec-child-card .ec-child-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--la-border);
}
.educore-app-light .ec-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    font-weight: 600;
    font-size: 1rem;
}
.educore-app-light .ec-child-head h3 { margin: 0; font-size: 1.05rem; color: var(--la-text); }

/* ---------- Tutor LMS dashboard (embedded on /my-progress) ----------
   Tutor renders its own dashboard chrome (left menu, header avatar,
   greetings). Our app shell already provides those, so we hide Tutor's
   duplicates and let only the content panel show through. */
.educore-app-light .tutor-dashboard-left-menu,
.educore-app-light .tutor-dashboard-header-greetings,
.educore-app-light .tutor-dashboard-header-avatar,
.educore-app-light .tutor-dashboard-footer-mobile,
.educore-app-light .tutor-dashboard-menu-toggler { display: none !important; }

/* ---------- Tutor dashboard quick-link button row ----------
   Tutor renders #tutor-dashboard-footer-mobile (3 quick links:
   Dashboard / Quiz Attempts / Menu). On /my-progress and other
   app-light pages we keep them but override Tutor's fixed-bottom
   mobile positioning and present them as a clean inline button
   row that matches the EduCore card aesthetic. */
.educore-app-light #tutor-dashboard-footer-mobile {
    position: static !important;
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: 16px;
    padding: 10px;
    margin: 20px 0 28px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.educore-app-light #tutor-dashboard-footer-mobile .tutor-container { padding: 0; max-width: none; background: transparent; border: 0; box-shadow: none; }
.educore-app-light #tutor-dashboard-footer-mobile .tutor-row {
    display: flex;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4 {
    flex: 1 1 0;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--la-surface-2);
    border: 1px solid var(--la-border);
    border-radius: 12px;
    color: var(--la-text);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4 i {
    font-size: 1.1rem;
    color: var(--la-accent);
}
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4 span { line-height: 1; }
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4:hover {
    background: var(--la-accent-bg);
    border-color: var(--la-accent);
    color: var(--la-accent-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(37,99,235,.35);
}
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4:hover i { color: var(--la-accent-2); }
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4.active {
    background: var(--la-accent);
    border-color: var(--la-accent);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(37,99,235,.5);
}
.educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4.active i { color: #fff; }
@media (max-width: 520px) {
    .educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4 {
        min-width: 0;
        padding: 10px 12px;
        font-size: .8rem;
    }
    .educore-app-light #tutor-dashboard-footer-mobile a.tutor-col-4 i { font-size: 1rem; }
}

.educore-app-light .tutor-dashboard,
.educore-app-light .tutor-wrap,
.educore-app-light .tutor-dashboard-content,
.educore-app-light .tutor-dashboard-content-inner {
    color: var(--la-text-2);
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}
.educore-app-light .tutor-dashboard-header {
    background: transparent;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--la-border);
    margin-bottom: 20px;
}
.educore-app-light .tutor-dashboard a { color: var(--la-accent); }
.educore-app-light .tutor-dashboard a:hover { color: var(--la-accent-2); }
.educore-app-light .tutor-card,
.educore-app-light .tutor-dashboard .tutor-card {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    box-shadow: var(--la-shadow);
}
.educore-app-light .tutor-btn,
.educore-app-light .tutor-dashboard .tutor-btn-primary {
    background: var(--la-accent);
    color: #fff;
    border-color: var(--la-accent);
    border-radius: var(--la-radius-sm);
}
.educore-app-light .tutor-btn:hover { background: var(--la-accent-2); border-color: var(--la-accent-2); }
.educore-app-light .tutor-color-black,
.educore-app-light .tutor-fs-5,
.educore-app-light .tutor-fs-6,
.educore-app-light .tutor-fs-7 { color: var(--la-text); }

/* ---------- Mobile: collapse sidebar into a top row ---------- */
@media (max-width: 900px) {
    .educore-app-light .ec-v15-app-shell { grid-template-columns: 1fr; }
    .educore-app-light .ec-v15-app-side {
        position: relative; height: auto;
        flex-direction: row; align-items: center;
        padding: 10px 14px; gap: 10px;
        overflow-x: auto;
        border-right: 0; border-bottom: 1px solid var(--la-border);
    }
    .educore-app-light .ec-v15-app-brand { padding: 0; margin: 0 8px 0 0; border: 0; flex-shrink: 0; }
    .educore-app-light .ec-v15-app-nav { flex-direction: row; padding: 0; gap: 4px; flex: 0 1 auto; }
    .educore-app-light .ec-v15-app-link { padding: 7px 10px; }
    .educore-app-light .ec-v15-app-link span:not(.ec-v15-app-link-ic) { display: none; }
    .educore-app-light .ec-v15-app-foot { border-top: 0; padding: 0; margin-left: auto; }
    .educore-app-light .ec-v15-app-top { padding: 16px 18px; position: static; }
    .educore-app-light .ec-v15-app-top h1 { font-size: 1.25rem; }
    .educore-app-light .ec-v15-app-content { padding: 18px 16px 40px; }
}

/* ============================================================
   HIDE HELLO ELEMENTOR'S DEFAULT HEADER / FOOTER
   We render our own .ec-nav and .ec-footer (and the .ec-v15-app
   shell on post-auth pages). The theme's #site-header and
   #site-footer duplicate that role and leak strings like the
   tagline and "All rights reserved" — kill them site-wide.
   ============================================================ */
body.educore-skin #site-header.site-header,
body.educore-skin #site-footer.site-footer,
body.educore-skin .site-header .site-description,
body.educore-skin .site-footer .site-description,
body.educore-skin .site-footer .copyright { display: none !important; }

/* ============================================================
   HEADER NAV — Liquid Brokers warm-neutral palette.
   Soft, editorial, NOT techy: no glow, no bright bg, no harsh white.
   Idle color per spec (#C5C5D1 soft lavender-white). Subtle dark
   text-shadow keeps it legible over the transparent-nav hero bg.
   ============================================================ */
/* ============================================================
 * v0.16 — Header nav motion (polished, professional, premium)
 * ------------------------------------------------------------
 * - Idle: lavender #DCDCE5 with a soft dark text-halo for
 *   legibility over any hero background.
 * - Hover: text brightens to white, a soft glass pill fades
 *   IN behind the text (no width-grow, no slide — opacity
 *   only, the signature smooth feel).
 * - Active: same pill but tinted purple to mark the current
 *   page; persistent, no animation between pages.
 * - Signature cubic-bezier(.32,.72,0,1) matches every other
 *   interactive surface on the site (sidebar, stat cards).
 * ============================================================ */
body.educore-v15 .ec-nav-links a {
    position: relative;
    color: #DCDCE5 !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: .94rem;
    letter-spacing: .3px;
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
    border-radius: 10px;
    padding: 10px 16px;
    transition:
        color .28s cubic-bezier(.32,.72,0,1),
        text-shadow .28s cubic-bezier(.32,.72,0,1),
        transform .28s cubic-bezier(.32,.72,0,1) !important;
    transform: none !important;
    overflow: visible;
}

/* Gradient glass pill — fades in behind text on hover & stays on active.
 * Opacity-only transition (no scale, no width-grow) for the cleanest
 * professional feel — nothing slides, nothing morphs in size. */
body.educore-v15 .ec-nav-links a::before {
    display: block !important;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    opacity: 0;
    transform: none !important;
    z-index: -1;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.32,.72,0,1),
                background .28s cubic-bezier(.32,.72,0,1),
                box-shadow .28s cubic-bezier(.32,.72,0,1);
}

/* Kill the legacy animated underline (3px bar that grew on hover). */
body.educore-v15 .ec-nav-links a::after { display: none !important; }

body.educore-v15 .ec-nav-links a:hover {
    color: #FFFFFF !important;
    background: transparent !important;       /* let ::before pill carry the bg */
    text-shadow: 0 1px 12px rgba(0,0,0,.65);
    transform: translateY(-1px) !important;   /* whisper-thin lift, premium feel */
    letter-spacing: .3px !important;
}
body.educore-v15 .ec-nav-links a:hover::before { opacity: 1; }

body.educore-v15 .ec-nav-links a.is-active {
    color: #FFFFFF !important;
    background: transparent !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.6);
    transform: none !important;
}
body.educore-v15 .ec-nav-links a.is-active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(168,85,247,.28), rgba(124,58,237,.18));
    box-shadow: inset 0 0 0 1px rgba(168,85,247,.30),
                0 4px 14px -4px rgba(124,58,237,.35);
}

@media (prefers-reduced-motion: reduce) {
    body.educore-v15 .ec-nav-links a,
    body.educore-v15 .ec-nav-links a::before {
        transition: none !important;
        transform: none !important;
    }
}

/* Header CTA buttons — make Login/Logout/Admin Panel obvious */
body.educore-v15 .ec-nav-cta .ec-btn-ghost {
    color: #fff !important;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 600;
}
body.educore-v15 .ec-nav-cta .ec-btn-ghost:hover {
    background: rgba(34,211,238,.18);
    border-color: rgba(34,211,238,.55);
    color: #fff !important;
}
body.educore-v15 .ec-user-chip {
    background: rgba(37,99,235,.22);
    color: #DBEAFE;
    border: 1px solid rgba(37,99,235,.45);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
}

/* Older "bright lit" footer treatment removed — the warm-neutral LB
   palette lives in the single source of truth at line 1056+ above. */

/* ============================================================
   LIGHT APP THEME — POLISH PASS
   Adds visual hierarchy to the post-auth dashboard while keeping
   the formal admin-SaaS character: muted accent bars, tinted
   stat variants, richer grade banner, depth on cards.
   ============================================================ */

/* Page bg — subtle two-stop wash so it doesn't read as a flat sheet of white */
body.educore-app-light {
    background:
        radial-gradient(1200px 360px at 8% -10%, rgba(37,99,235,.05), transparent 60%),
        radial-gradient(900px 300px at 100% 0%, rgba(124,58,237,.04), transparent 60%),
        var(--la-bg);
    background-attachment: fixed;
}

/* Topbar — add an accent strip under the bottom border for a stronger anchor */
.educore-app-light .ec-v15-app-top {
    box-shadow: 0 1px 0 var(--la-border), 0 6px 18px -16px rgba(15,23,42,.18);
}
.educore-app-light .ec-v15-app-top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--la-accent) 0%, transparent 35%);
    opacity: .85; pointer-events: none;
}
.educore-app-light .ec-v15-app-top h1 {
    font-size: 1.65rem; font-weight: 700;
    letter-spacing: -.015em;
}

/* Section cards — colored left accent rail + a touch of depth */
.educore-app-light .ec-card,
.educore-app-light .ec-dash-section {
    position: relative;
    overflow: hidden;
    box-shadow: var(--la-shadow-2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.educore-app-light .ec-dash-section::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--la-accent) 0%, #60A5FA 100%);
    opacity: .85;
}

/* Section title — colored marker block on the left */
.educore-app-light .ec-section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.05rem;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--la-border);
}
.educore-app-light .ec-section-title::before {
    content: ""; display: inline-block;
    width: 6px; height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--la-accent), #60A5FA);
    flex-shrink: 0;
}

/* Stat cards — full tinted backgrounds per variant (replaces the thin left border) */
.educore-app-light .ec-stat,
.educore-app-light .ec-stat-card {
    border-left: 0;
    padding: 18px 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--la-border);
    box-shadow: var(--la-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.educore-app-light .ec-stat:hover,
.educore-app-light .ec-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--la-shadow-2);
}
.educore-app-light .ec-stat-value,
.educore-app-light .ec-stat-card strong {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.015em;
}
.educore-app-light .ec-stat-primary {
    background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #BFDBFE;
}
.educore-app-light .ec-stat-primary .ec-stat-label { color: var(--la-accent-2); }
.educore-app-light .ec-stat-primary strong,
.educore-app-light .ec-stat-primary .ec-stat-value { color: var(--la-accent-2); }

.educore-app-light .ec-stat-success {
    background: linear-gradient(180deg, var(--la-success-bg) 0%, #DCFCE7 100%);
    border-color: var(--la-success-bd);
}
.educore-app-light .ec-stat-success .ec-stat-label { color: var(--la-success); }
.educore-app-light .ec-stat-success strong,
.educore-app-light .ec-stat-success .ec-stat-value { color: #15803D; }

.educore-app-light .ec-stat-warning {
    background: linear-gradient(180deg, var(--la-warn-bg) 0%, #FEF3C7 100%);
    border-color: var(--la-warn-bd);
}
.educore-app-light .ec-stat-warning .ec-stat-label { color: var(--la-warn); }
.educore-app-light .ec-stat-warning strong,
.educore-app-light .ec-stat-warning .ec-stat-value { color: #92400E; }

.educore-app-light .ec-stat-danger {
    background: linear-gradient(180deg, var(--la-danger-bg) 0%, #FEE2E2 100%);
    border-color: var(--la-danger-bd);
}
.educore-app-light .ec-stat-danger .ec-stat-label { color: var(--la-danger); }
.educore-app-light .ec-stat-danger strong,
.educore-app-light .ec-stat-danger .ec-stat-value { color: #B91C1C; }

/* Re-apply the stat-grid card styles when nested inside a card (the earlier
   .ec-card .ec-stat-grid override was flattening the variants) */
.educore-app-light .ec-card .ec-stat-grid .ec-stat,
.educore-app-light .ec-card .ec-stat-grid .ec-stat-card { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); }
.educore-app-light .ec-card .ec-stat-grid .ec-stat-primary { background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%); border-color: #BFDBFE; }
.educore-app-light .ec-card .ec-stat-grid .ec-stat-success { background: linear-gradient(180deg, var(--la-success-bg) 0%, #DCFCE7 100%); border-color: var(--la-success-bd); }
.educore-app-light .ec-card .ec-stat-grid .ec-stat-warning { background: linear-gradient(180deg, var(--la-warn-bg) 0%, #FEF3C7 100%); border-color: var(--la-warn-bd); }
.educore-app-light .ec-card .ec-stat-grid .ec-stat-danger  { background: linear-gradient(180deg, var(--la-danger-bg) 0%, #FEE2E2 100%); border-color: var(--la-danger-bd); }

/* Grade banner — premium, integrates inside the Academic Performance
   section card (no card-in-card look). Uses inline --grade CSS var
   (e.g. --grade:#16A34A) set by educore_dash_student/parent. */
.educore-app-light .ec-grade-banner {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 20px;
    align-items: center;
    padding: 4px 0 18px;
    margin: 0 0 16px;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--la-border);
    position: relative;
}
.educore-app-light .ec-grade-letter {
    width: 84px; height: 84px;
    border-radius: 18px;
    display: grid; place-items: center;
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--grade, var(--la-accent)) 92%, transparent) 0%,
            color-mix(in srgb, var(--grade, var(--la-accent)) 70%, #FFFFFF) 100%);
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    box-shadow:
        0 12px 26px -10px color-mix(in srgb, var(--grade, var(--la-accent)) 60%, transparent),
        inset 0 1px 0 rgba(255,255,255,.18);
    flex-shrink: 0;
}
.educore-app-light .ec-grade-meta {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.educore-app-light .ec-grade-meta strong {
    display: block;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--la-text);
    margin-bottom: 2px;
}
.educore-app-light .ec-grade-meta span {
    color: color-mix(in srgb, var(--grade, var(--la-accent)) 55%, var(--la-muted));
    font-size: .85rem;
    font-weight: 500;
}
/* Mini progress rail under the meta — shows 0–100 position using --grade.
   The actual score % isn't available in CSS, so we paint a full-width rail
   with a tinted fill that visually anchors the grade. */
.educore-app-light .ec-grade-meta::after {
    content: "";
    display: block;
    margin-top: 8px;
    height: 6px;
    border-radius: 99px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--grade, var(--la-accent)) 70%, transparent) 0%,
            color-mix(in srgb, var(--grade, var(--la-accent)) 25%, transparent) 100%),
        var(--la-surface-2);
    background-blend-mode: normal;
    max-width: 280px;
}
@media (max-width: 520px) {
    .educore-app-light .ec-grade-banner {
        grid-template-columns: 64px 1fr;
        gap: 14px;
    }
    .educore-app-light .ec-grade-letter {
        width: 64px; height: 64px; font-size: 1.7rem; border-radius: 14px;
    }
    .educore-app-light .ec-grade-meta strong { font-size: 1.4rem; }
}

/* Course cards — gradient overlay on thumb, stronger hover lift */
.educore-app-light .ec-course-card {
    border: 1px solid var(--la-border);
    box-shadow: var(--la-shadow);
}
.educore-app-light .ec-course-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
}
.educore-app-light .ec-course-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15,23,42,.45) 100%);
    pointer-events: none;
}
.educore-app-light .ec-course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px rgba(15,23,42,.22), 0 4px 8px -4px rgba(15,23,42,.08);
    border-color: #BFDBFE;
}
.educore-app-light .ec-course-body h4 { font-size: 1.02rem; }

/* Action tiles (Lab practicals quick actions) — bigger, more obvious as buttons */
.educore-app-light .ec-action {
    padding: 16px 18px;
    border: 1px solid var(--la-border);
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: var(--la-shadow);
    font-size: .98rem;
    font-weight: 600;
    color: var(--la-text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.educore-app-light .ec-action span {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-right: 4px;
}
.educore-app-light .ec-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -14px rgba(37,99,235,.45), 0 2px 6px -2px rgba(15,23,42,.08);
    border-color: #BFDBFE;
    background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
    color: var(--la-accent-2);
}
.educore-app-light .ec-action:hover span {
    background: var(--la-accent);
    color: #fff;
}

/* Charts — softer panel + a touch of inner glow */
.educore-app-light .ec-dash-section canvas {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    padding: 8px;
}

/* CTA row primary button — soft blue shadow + lift on hover */
.educore-app-light .ec-cta-row .ec-btn-primary {
    box-shadow: 0 6px 16px -6px rgba(37,99,235,.55);
}
.educore-app-light .ec-cta-row .ec-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(37,99,235,.6);
}

/* Avatar in topbar — soft tint + tiny ring */
.educore-app-light .ec-v15-app-avatar {
    background: linear-gradient(180deg, var(--la-accent-bg) 0%, #DBEAFE 100%);
    color: var(--la-accent-2);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* Section header inside card — when we render a child card or similar */
.educore-app-light .ec-card h3,
.educore-app-light .ec-card h4 { font-weight: 600; }

/* Mini titles between widgets get a small color dot */
.educore-app-light .ec-mini-title {
    display: flex; align-items: center; gap: 8px;
}
.educore-app-light .ec-mini-title::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--la-accent);
    box-shadow: 0 0 0 3px var(--la-accent-bg);
    flex-shrink: 0;
}

/* Course grid — soft entry stripe at the top of the section */
.educore-app-light .ec-course-grid {
    padding-top: 4px;
}

/* ============================================================
   STAT CARDS — icon on the left, text stacked on the right
   ============================================================ */
.educore-app-light .ec-stat,
.educore-app-light .ec-stat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
}
.educore-app-light .ec-stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.72);
    color: currentColor;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}
.educore-app-light .ec-stat-icon svg { width: 22px; height: 22px; }
.educore-app-light .ec-stat-body { flex: 1; min-width: 0; }
.educore-app-light .ec-stat .ec-stat-label,
.educore-app-light .ec-stat-card .ec-stat-label {
    margin-bottom: 4px;
    font-size: .72rem;
}
.educore-app-light .ec-stat .ec-stat-value,
.educore-app-light .ec-stat-card .ec-stat-value,
.educore-app-light .ec-stat-card strong {
    font-size: 1.55rem;
    line-height: 1.1;
}

/* Per-variant: tint the icon chip to match the surrounding tone */
.educore-app-light .ec-stat-primary .ec-stat-icon { color: var(--la-accent-2); background: rgba(255,255,255,.85); }
.educore-app-light .ec-stat-success .ec-stat-icon { color: #15803D;        background: rgba(255,255,255,.85); }
.educore-app-light .ec-stat-warning .ec-stat-icon { color: #92400E;        background: rgba(255,255,255,.85); }
.educore-app-light .ec-stat-danger  .ec-stat-icon { color: #B91C1C;        background: rgba(255,255,255,.85); }

/* ============================================================
   QUICK ACTION TILES — SVG icon chip + label
   ============================================================ */
.educore-app-light .ec-action {
    gap: 12px;
}
.educore-app-light .ec-action-ic {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.educore-app-light .ec-action-ic svg { width: 20px; height: 20px; }
.educore-app-light .ec-action-label {
    font-weight: 600;
    font-size: .95rem;
    color: inherit;
}
.educore-app-light .ec-action:hover .ec-action-ic {
    background: var(--la-accent);
    color: #fff;
}

/* Stacked action grid — used inside 2-col dashboard halves */
.educore-app-light .ec-action-grid-stacked {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* ============================================================
   DASHBOARD 2-COLUMN GRID
   Wraps two sibling .ec-dash-section cards into a side-by-side
   layout on desktop, collapsing to a stack on tablet.
   ============================================================ */
.educore-app-light .ec-dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 980px) {
    .educore-app-light .ec-dash-grid-2 { grid-template-columns: 1fr; }
}
.educore-app-light .ec-dash-grid-2 > .ec-dash-section { margin: 0; }

/* Brand-cyan links on Home (25), About (26), Notices (30) — matches the "EduCore" wordmark accent for legibility. */
body.page-id-25 a:not([class]),
body.page-id-26 a:not([class]),
body.page-id-30 a:not([class]) {
    color: var(--ec-cyan);
}
body.page-id-25 a:not([class]):hover,
body.page-id-26 a:not([class]):hover,
body.page-id-30 a:not([class]):hover {
    color: var(--ec-accent-bright);
}

/* =====================================================================
   v0.16 — LIGHT DASHBOARD SKIN
   ---------------------------------------------------------------------
   Scope: body.educore-app-light (applied to /portal, /e-library,
   /my-progress, /fees, /admin-panel). Reference design: warm cream
   canvas + off-cream card panel + light sidebar with purple-tinted
   active state. Easy on the eyes — no pure white, no grey sidebar.
   Purple #7C3AED is the brand accent throughout.
   ===================================================================== */

/* Site-wide: only our custom .ec-footer renders. Any theme- or
   plugin-injected footer markup is suppressed so the footer is identical
   on every page. Specificity is boosted with html body... so the rule wins
   over Hello Elementor / Elementor Pro footer templates on pages that
   don't carry body.educore-skin or body.educore-app-light (e.g. /voting-admin
   which uses body.educore-admin-shell). */
html body .site-footer:not(.ec-footer),
html body footer.site-footer,
html body footer#site-footer,
html body footer#colophon,
html body .ehf-footer,
html body .elementor-location-footer,
html body [data-elementor-type="footer"] { display: none !important; }
.ec-footer-line { text-align: center; }
.ec-footer-line strong { color: #fff; margin: 0 4px; }
body.educore-app-light .ec-footer-bottom-row { justify-content: center; }

:root {
    --ec16-canvas:        #EEF1F6;
    --ec16-canvas-2:      #E8ECF2;
    --ec16-side:          #E5EAF0;
    --ec16-side-hover:    #DDE3EB;
    --ec16-surface:       #FAF7F0;
    --ec16-surface-soft:  #FAF7F0;
    --ec16-surface-alt:   #F5F0E5;
    --ec16-border:        #E5E7EB;
    --ec16-border-strong: #D1D5DB;
    --ec16-ink:           #0F172A;
    --ec16-ink-soft:      #475569;
    --ec16-ink-mute:      #64748B;
    --ec16-brand:         #7C3AED;
    --ec16-brand-hover:   #6D28D9;
    --ec16-brand-deep:    #5B21B6;
    --ec16-brand-soft:    #EFE5FB;
    --ec16-brand-tint-6:  rgba(124, 58, 237, .06);
    --ec16-brand-tint-12: rgba(124, 58, 237, .12);
    --ec16-brand-tint-18: rgba(124, 58, 237, .18);
    --ec16-success:       #10B981;
    --ec16-success-soft:  #DCFCE7;
    --ec16-warn:          #F59E0B;
    --ec16-warn-soft:     #FEF3C7;
    --ec16-danger:        #EF4444;
    --ec16-danger-soft:   #FEE2E2;
    --ec16-info:          #3B82F6;
    --ec16-info-soft:     #DBEAFE;
    --ec16-shadow-xs:     0 1px 2px rgba(26, 23, 48, .04);
    --ec16-shadow-sm:     0 2px 6px rgba(26, 23, 48, .05);
    --ec16-shadow:        0 6px 18px rgba(70, 50, 130, .07);
    --ec16-shadow-md:     0 12px 32px rgba(70, 50, 130, .09);
    --ec16-radius:        16px;
    --ec16-radius-sm:     10px;
    --ec16-radius-lg:     20px;
    --ec16-radius-pill:   999px;
}

/* ---------- Page + canvas ---------- */
body.educore-app-light {
    background: var(--ec16-canvas) !important;
    color: var(--ec16-ink);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
body.educore-app-light::before,
body.educore-app-light::after { display: none !important; } /* kill any v0.15 aurora */
/* Hide every flavor of site header on logged-in dashboard pages — the sidebar is the nav.
   Covers both .educore-app-light (/portal etc.) and .educore-admin-shell (/voting-admin)
   body classes so the Hello Elementor / theme nav doesn't leak through anywhere. */
body.educore-app-light .ec-nav,
body.educore-app-light header.ec-nav,
body.educore-app-light .site-header,
body.educore-app-light #masthead,
body.educore-app-light header[role="banner"],
body.educore-app-light .ehf-header,
body.educore-app-light .elementor-location-header,
body.educore-app-light [data-elementor-type="header"],
body.educore-admin-shell .ec-nav,
body.educore-admin-shell header.ec-nav,
body.educore-admin-shell .site-header,
body.educore-admin-shell #masthead,
body.educore-admin-shell header[role="banner"],
body.educore-admin-shell .ehf-header,
body.educore-admin-shell .elementor-location-header,
body.educore-admin-shell [data-elementor-type="header"] { display: none !important; }
/* Footer stays — user wants the same footer site-wide, including dashboards. */
body.educore-app-light .site-main,
body.educore-app-light main#content,
body.educore-app-light .page-content,
body.educore-app-light .entry-content,
body.educore-app-light article { padding: 0 !important; margin: 0 !important; max-width: 100% !important; background: transparent !important; }

/* ---------- App shell layout ---------- */
body.educore-app-light .ec-v15-app-shell {
    display: grid;
    grid-template-columns: 256px 1fr;
    min-height: 100vh;
    background: var(--ec16-canvas);
    padding: 6px;
    gap: 6px;
}
body.educore-app-light .ec-v15-app-side {
    background: var(--ec16-side);
    border: 1px solid var(--ec16-border);
    border-radius: var(--ec16-radius-lg);
    padding: 22px 14px;
    display: flex; flex-direction: column;
    position: sticky; top: 6px;
    height: calc(100vh - 12px);
    box-shadow: var(--ec16-shadow-xs);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.educore-app-light .ec-v15-app-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    color: var(--ec16-ink);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700; font-size: 1.05rem;
    padding: 6px 10px 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ec16-border);
}
body.educore-app-light .ec-v15-app-brand .ec-app-mark {
    width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--ec16-brand);
    color: #fff;
    box-shadow: 0 6px 14px rgba(124, 58, 237, .35);
}
body.educore-app-light .ec-v15-app-nav {
    display: flex; flex-direction: column;
    gap: 2px; flex: 1;
    padding-top: 12px;
}
body.educore-app-light .ec-v15-app-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ec16-radius-sm);
    color: var(--ec16-ink-soft);
    text-decoration: none;
    font-size: .925rem;
    font-weight: 500;
    transition: background .18s ease, color .18s ease;
    position: relative;
}
body.educore-app-light .ec-v15-app-link-ic {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    color: var(--ec16-ink-mute);
    background: transparent;
    transition: color .18s ease;
}
body.educore-app-light .ec-v15-app-link:hover {
    background: var(--ec16-side-hover);
    color: var(--ec16-ink);
}
body.educore-app-light .ec-v15-app-link:hover .ec-v15-app-link-ic {
    color: var(--ec16-brand);
}
body.educore-app-light .ec-v15-app-link.is-active {
    background: var(--ec16-brand-soft);
    color: var(--ec16-brand-deep);
    font-weight: 600;
    box-shadow: none;
}
body.educore-app-light .ec-v15-app-link.is-active .ec-v15-app-link-ic {
    color: var(--ec16-brand);
    background: transparent;
}
body.educore-app-light .ec-v15-app-foot {
    padding-top: 14px;
    border-top: 1px solid var(--ec16-border);
}

/* ---------- Main pane + topbar ---------- */
body.educore-app-light .ec-v15-app-main {
    background: var(--ec16-surface);
    border-radius: var(--ec16-radius-lg);
    border: 1px solid var(--ec16-border);
    padding: 28px 32px 48px;
    min-width: 0;
    box-shadow: var(--ec16-shadow-xs);
}
body.educore-app-light .ec-v15-app-top {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 18px; flex-wrap: wrap;
    padding-bottom: 22px; margin-bottom: 26px;
    border-bottom: 1px solid var(--ec16-border);
}
body.educore-app-light .ec-v15-app-top h1 {
    margin: 4px 0 0;
    font-size: 1.5rem; line-height: 1.2;
    color: var(--ec16-ink);
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    background: none; -webkit-text-fill-color: var(--ec16-ink);
}
body.educore-app-light .ec-v15-eyebrow {
    color: var(--ec16-ink-mute);
    font-size: .78rem; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    background: none; -webkit-text-fill-color: var(--ec16-ink-mute);
}
body.educore-app-light .ec-v15-app-top-right { display: flex; align-items: center; gap: 12px; }
body.educore-app-light .ec-v15-app-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ec16-brand);
    color: #fff; font-weight: 700;
    box-shadow: 0 6px 14px rgba(124, 58, 237, .3);
}

/* ---------- Cards ---------- */
body.educore-app-light .ec-card,
body.educore-app-light .ec-stat-card,
body.educore-app-light .ec-course-card,
body.educore-app-light .ec-dash-section {
    background: var(--ec16-surface) !important;
    border: 1px solid var(--ec16-border) !important;
    color: var(--ec16-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--ec16-radius) !important;
    box-shadow: var(--ec16-shadow-xs) !important;
    padding: 22px 22px !important;
}
body.educore-app-light .ec-card:hover {
    box-shadow: var(--ec16-shadow-sm) !important;
}
body.educore-app-light .ec-card h1,
body.educore-app-light .ec-card h2,
body.educore-app-light .ec-card h3,
body.educore-app-light .ec-card h4,
body.educore-app-light .ec-stat-card strong,
body.educore-app-light .ec-section-title {
    color: var(--ec16-ink) !important;
    background: none !important;
    -webkit-text-fill-color: var(--ec16-ink) !important;
}
body.educore-app-light .ec-section-title {
    margin: 0 0 16px !important;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--ec16-ink) !important;
}
body.educore-app-light .ec-muted,
body.educore-app-light .ec-stat-card .ec-stat-label {
    color: var(--ec16-ink-mute) !important;
}
body.educore-app-light p { color: var(--ec16-ink-soft); }

/* ---------- KPI stat tiles ---------- */
body.educore-app-light .ec-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
body.educore-app-light .ec-stat {
    background: var(--ec16-surface);
    border: 1px solid var(--ec16-border);
    border-radius: var(--ec16-radius);
    padding: 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--ec16-shadow-xs);
    transition: box-shadow .18s ease, transform .18s ease;
}
body.educore-app-light .ec-stat:hover {
    box-shadow: var(--ec16-shadow);
    transform: translateY(-1px);
}
body.educore-app-light .ec-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--ec16-brand-soft);
    color: var(--ec16-brand);
    flex-shrink: 0;
}
body.educore-app-light .ec-stat-success .ec-stat-icon { background: var(--ec16-success-soft); color: var(--ec16-success); }
body.educore-app-light .ec-stat-danger  .ec-stat-icon { background: var(--ec16-danger-soft);  color: var(--ec16-danger); }
body.educore-app-light .ec-stat-warn    .ec-stat-icon { background: var(--ec16-warn-soft);    color: var(--ec16-warn); }
body.educore-app-light .ec-stat-body { min-width: 0; }
body.educore-app-light .ec-stat-label {
    color: var(--ec16-ink-mute);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}
body.educore-app-light .ec-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ec16-ink);
    line-height: 1.2;
    margin-top: 2px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---------- Dash grid utilities ---------- */
body.educore-app-light .ec-dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
body.educore-app-light .ec-dash-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 1100px) {
    body.educore-app-light .ec-dash-grid-2,
    body.educore-app-light .ec-dash-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Action tiles ---------- */
body.educore-app-light .ec-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
body.educore-app-light .ec-action-grid-stacked {
    grid-template-columns: 1fr;
}
body.educore-app-light .ec-action {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--ec16-surface-alt);
    border: 1px solid var(--ec16-border);
    border-radius: var(--ec16-radius-sm);
    color: var(--ec16-ink);
    text-decoration: none;
    font-weight: 500;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
body.educore-app-light .ec-action:hover {
    background: var(--ec16-brand-soft);
    border-color: var(--ec16-brand-tint-18);
    color: var(--ec16-brand-deep);
    transform: translateY(-1px);
}
body.educore-app-light .ec-action-ic {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: var(--ec16-brand-soft);
    color: var(--ec16-brand);
    flex-shrink: 0;
}
body.educore-app-light .ec-action:hover .ec-action-ic {
    background: var(--ec16-brand);
    color: #fff;
}

/* ---------- Tables ---------- */
body.educore-app-light table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ec16-ink);
    font-size: .92rem;
}
body.educore-app-light table thead th {
    text-align: left;
    padding: 12px 14px;
    background: var(--ec16-surface-alt);
    color: var(--ec16-ink-mute);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ec16-border);
}
body.educore-app-light table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--ec16-border) !important;
    color: var(--ec16-ink);
    background: transparent;
}
body.educore-app-light table tbody tr:hover td {
    background: var(--ec16-surface-soft);
}
body.educore-app-light table tbody tr:last-child td { border-bottom: 0 !important; }

/* ---------- Progress bars ---------- */
body.educore-app-light .ec-bar,
body.educore-app-light .ec-progress {
    width: 100%; height: 8px;
    background: var(--ec16-surface-alt);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
body.educore-app-light .ec-bar > span,
body.educore-app-light .ec-bar-fill,
body.educore-app-light .ec-progress-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ec16-brand) 0%, #A78BFA 100%);
    border-radius: 999px;
}

/* ---------- Pills / status badges ---------- */
body.educore-app-light .ec-pill,
body.educore-app-light .ec-pill-soft,
body.educore-app-light .ec-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--ec16-brand-soft) !important;
    color: var(--ec16-brand-deep) !important;
    border: 0 !important;
}
body.educore-app-light .ec-pill-success { background: var(--ec16-success-soft) !important; color: #047857 !important; }
body.educore-app-light .ec-pill-danger  { background: var(--ec16-danger-soft)  !important; color: #B91C1C !important; }
body.educore-app-light .ec-pill-warn    { background: var(--ec16-warn-soft)    !important; color: #92400E !important; }
body.educore-app-light .ec-pill-info    { background: var(--ec16-info-soft)    !important; color: #1E40AF !important; }

/* ---------- Buttons (light context) ---------- */
body.educore-app-light .ec-btn,
body.educore-app-light a.ec-btn,
body.educore-app-light button.ec-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--ec16-radius-pill);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.educore-app-light .ec-btn-primary,
body.educore-app-light a.ec-btn-primary,
body.educore-app-light button.ec-btn-primary {
    background: var(--ec16-brand) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(124, 58, 237, .25);
    -webkit-text-fill-color: #fff !important;
}
body.educore-app-light .ec-btn-primary:hover {
    background: var(--ec16-brand-hover) !important;
    transform: translateY(-1px);
}
body.educore-app-light .ec-btn-ghost,
body.educore-app-light a.ec-btn-ghost,
body.educore-app-light button.ec-btn-ghost {
    background: transparent !important;
    color: var(--ec16-ink) !important;
    border: 1px solid var(--ec16-border-strong) !important;
    -webkit-text-fill-color: var(--ec16-ink) !important;
}
body.educore-app-light .ec-btn-ghost:hover {
    background: var(--ec16-surface-alt) !important;
    color: var(--ec16-brand-deep) !important;
    border-color: var(--ec16-brand-tint-18) !important;
}

/* ---------- Form inputs (light) ---------- */
body.educore-app-light input[type="text"],
body.educore-app-light input[type="search"],
body.educore-app-light input[type="number"],
body.educore-app-light input[type="email"],
body.educore-app-light input[type="password"],
body.educore-app-light input[type="date"],
body.educore-app-light textarea,
body.educore-app-light select {
    background: var(--ec16-surface) !important;
    border: 1px solid var(--ec16-border-strong) !important;
    color: var(--ec16-ink) !important;
    border-radius: var(--ec16-radius-sm);
    padding: 10px 14px;
    font-size: .92rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body.educore-app-light input:focus,
body.educore-app-light textarea:focus,
body.educore-app-light select:focus {
    outline: none;
    border-color: var(--ec16-brand) !important;
    box-shadow: 0 0 0 3px var(--ec16-brand-tint-12);
}
body.educore-app-light input::placeholder,
body.educore-app-light textarea::placeholder { color: var(--ec16-ink-mute); }

/* ---------- Chart wrappers ---------- */
body.educore-app-light .ec-chart,
body.educore-app-light .ec-chart-wrap,
body.educore-app-light canvas.ec-chart { background: transparent; }

/* ---------- Course cards (E-Library) ---------- */
body.educore-app-light .ec-course-card {
    padding: 0 !important;
    overflow: hidden;
    display: flex; flex-direction: column;
}
body.educore-app-light .ec-course-card-body { padding: 18px; }
body.educore-app-light .ec-course-card h3 { margin: 0 0 6px; font-size: 1rem; }
body.educore-app-light .ec-course-card .ec-course-meta { color: var(--ec16-ink-mute); font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    body.educore-app-light .ec-v15-app-shell {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }
    body.educore-app-light .ec-v15-app-side {
        position: relative; height: auto;
        flex-direction: row; align-items: center;
        padding: 12px 14px;
        overflow-x: auto;
        gap: 10px;
    }
    body.educore-app-light .ec-v15-app-brand { padding: 0 8px 0 0; margin: 0; border-bottom: 0; }
    body.educore-app-light .ec-v15-app-nav { flex-direction: row; padding-top: 0; flex: 1; }
    body.educore-app-light .ec-v15-app-link { padding: 8px 10px; white-space: nowrap; }
    body.educore-app-light .ec-v15-app-link span:not(.ec-v15-app-link-ic) { display: none; }
    body.educore-app-light .ec-v15-app-foot { border-top: 0; padding-top: 0; }
    body.educore-app-light .ec-v15-app-main { padding: 20px 18px 36px; }
    body.educore-app-light .ec-v15-app-top h1 { font-size: 1.25rem; }
}

/* ============================================================
   EDUCORE — SIDEBAR COLLAPSE
   Toggle button in the topbar collapses the sidebar to icon-only
   (~72px). Persists in localStorage and is applied before paint via
   html.ec-side-collapsed-preload (set by inline head script).
   Applies on ANY body.educore-app-light page (portal, e-library,
   my-progress, fees, admin-panel) — not on sims, voting, or marketing.
   ============================================================ */

/* The hamburger toggle button itself */
body.educore-app-light .ec-side-toggle {
    appearance: none; -webkit-appearance: none;
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    border-radius: 10px;
    background: transparent;
    color: var(--la-text-2);
    border: 1px solid transparent;
    cursor: pointer; padding: 0;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.educore-app-light .ec-side-toggle:hover {
    background: var(--la-surface-2);
    color: var(--la-text);
    border-color: var(--la-border);
}
body.educore-app-light .ec-side-toggle:focus-visible {
    outline: 2px solid var(--la-accent);
    outline-offset: 2px;
}

/* Collapsed state — matches either the click-toggle (body.is-sidebar-collapsed)
   or the pre-paint hint (html.ec-side-collapsed-preload). The pre-paint hint
   is wiped by JS once it runs, leaving only the body class authoritative. */
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-shell,
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-shell {
    grid-template-columns: 72px 1fr;
}
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-side,
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-side {
    padding: 18px 10px;
    align-items: center;
}
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-brand span:not(.ec-app-mark),
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-brand span:not(.ec-app-mark) {
    display: none;
}
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-brand,
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-brand {
    padding: 6px 0 14px;
    justify-content: center;
    width: 100%;
}
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-link,
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-link {
    justify-content: center;
    padding: 11px 0;
    width: 100%;
}
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-link span:not(.ec-v15-app-link-ic),
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-link span:not(.ec-v15-app-link-ic) {
    display: none;
}
html.ec-side-collapsed-preload body.educore-app-light .ec-v15-app-foot,
body.educore-app-light.is-sidebar-collapsed .ec-v15-app-foot {
    width: 100%;
}

/* On the existing mobile media query (<960px), the sidebar already
   becomes a horizontal scroll rail — the collapsed-class behaviour is
   irrelevant at that size; the @media rules above keep winning. */


/* ============================================================
   EDUCORE — PREMIUM OVERVIEW (cards + stat tiles)
   These overrides sit AFTER all earlier .educore-app-light rules,
   so they win on specificity-tie via source order. Affects the
   overview/dashboard cards consistently across portal, e-library,
   my-progress, fees, admin-panel.
   ============================================================ */

/* Section cards — refined elevation, warm shadow, tighter padding rhythm */
body.educore-app-light .ec-card,
body.educore-app-light .ec-dash-section {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow:
        0 1px 0 rgba(31,26,18,.02),
        0 1px 2px rgba(31,26,18,.04),
        0 12px 24px -16px rgba(31,26,18,.10);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Section title — sharper hierarchy, hairline underline */
body.educore-app-light .ec-dash-section > .ec-section-title:first-child,
body.educore-app-light .ec-card > h2:first-child,
body.educore-app-light .ec-card > h3:first-child {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -.005em;
    color: var(--la-text);
    margin: -4px -4px 18px;
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--la-border);
}

/* Stat tiles — premium look: tinted icon chip, big Space Grotesk value,
   small uppercase label, soft hover lift. */
body.educore-app-light .ec-stat,
body.educore-app-light .ec-stat-card {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    box-shadow:
        0 1px 0 rgba(31,26,18,.02),
        0 1px 2px rgba(31,26,18,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}
body.educore-app-light .ec-stat::before,
body.educore-app-light .ec-stat-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--la-accent);
    opacity: .85;
}
body.educore-app-light .ec-stat-success::before { background: var(--la-success); }
body.educore-app-light .ec-stat-warning::before { background: var(--la-warn); }
body.educore-app-light .ec-stat-danger::before  { background: var(--la-danger); }

body.educore-app-light .ec-stat:hover,
body.educore-app-light .ec-stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 0 rgba(31,26,18,.02),
        0 10px 24px -8px rgba(31,26,18,.16);
    border-color: var(--la-border-2);
}

body.educore-app-light .ec-stat-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(31,26,18,.04);
}
body.educore-app-light .ec-stat-icon svg { width: 22px; height: 22px; }

/* Variant tints — opaque, visible against the white card */
body.educore-app-light .ec-stat-primary .ec-stat-icon { background: #DBEAFE; color: #1D4ED8; }
body.educore-app-light .ec-stat-success .ec-stat-icon { background: #DCFCE7; color: #15803D; }
body.educore-app-light .ec-stat-warning .ec-stat-icon { background: #FEF3C7; color: #92400E; }
body.educore-app-light .ec-stat-danger  .ec-stat-icon { background: #FEE2E2; color: #B91C1C; }
body.educore-app-light .ec-stat-info    .ec-stat-icon { background: #CFFAFE; color: #0E7490; }
body.educore-app-light .ec-stat-purple  .ec-stat-icon { background: #EDE9FE; color: #6D28D9; }
body.educore-app-light .ec-stat-amber   .ec-stat-icon { background: #FEF3C7; color: #B45309; }

/* New tones for left accent stripe */
body.educore-app-light .ec-stat-info::before   { background: #06B6D4; }
body.educore-app-light .ec-stat-purple::before { background: #7C3AED; }
body.educore-app-light .ec-stat-amber::before  { background: #F59E0B; }

/* Per-tone soft gradient backdrop — gives each tile its own personality
   while staying subtle enough not to overpower the cream dashboard. */
body.educore-app-light .ec-stat-primary { background: linear-gradient(135deg, rgba(219,234,254,.55) 0%, var(--la-surface) 60%); }
body.educore-app-light .ec-stat-success { background: linear-gradient(135deg, rgba(220,252,231,.55) 0%, var(--la-surface) 60%); }
body.educore-app-light .ec-stat-warning { background: linear-gradient(135deg, rgba(254,243,199,.55) 0%, var(--la-surface) 60%); }
body.educore-app-light .ec-stat-danger  { background: linear-gradient(135deg, rgba(254,226,226,.55) 0%, var(--la-surface) 60%); }
body.educore-app-light .ec-stat-info    { background: linear-gradient(135deg, rgba(207,250,254,.55) 0%, var(--la-surface) 60%); }
body.educore-app-light .ec-stat-purple  { background: linear-gradient(135deg, rgba(237,233,254,.55) 0%, var(--la-surface) 60%); }
body.educore-app-light .ec-stat-amber   { background: linear-gradient(135deg, rgba(254,243,199,.55) 0%, var(--la-surface) 60%); }

/* Clickable stat tiles (admin overview links to admin-panel tabs) */
body.educore-app-light a.ec-stat.is-clickable {
    cursor: pointer;
    text-decoration: none;
    color: var(--la-text-2);
}
body.educore-app-light a.ec-stat.is-clickable:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px -10px rgba(31,26,18,.18),
        0 2px 6px rgba(31,26,18,.06);
}
body.educore-app-light a.ec-stat.is-clickable:hover .ec-stat-icon {
    transform: scale(1.05);
    transition: transform .15s ease;
}
body.educore-app-light a.ec-stat.is-clickable:focus-visible {
    outline: 2px solid var(--la-accent);
    outline-offset: 3px;
}
body.educore-app-light .ec-stat-chev {
    position: absolute;
    right: 14px; top: 14px;
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    color: var(--la-dim);
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease, color .15s ease, background .15s ease;
    pointer-events: none;
}
body.educore-app-light a.ec-stat.is-clickable:hover .ec-stat-chev {
    opacity: 1;
    transform: translateX(0);
    color: var(--la-accent);
    background: #FFFFFF;
}

body.educore-app-light .ec-stat .ec-stat-label,
body.educore-app-light .ec-stat-card .ec-stat-label {
    color: var(--la-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}
body.educore-app-light .ec-stat .ec-stat-value,
body.educore-app-light .ec-stat-card .ec-stat-value,
body.educore-app-light .ec-stat-card strong {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--la-text);
    -webkit-text-fill-color: currentColor;
}

/* Stat grid — slightly more breathing room */
body.educore-app-light .ec-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

/* Premium chart wrapper — soft inset so charts sit on the card cleanly */
body.educore-app-light .ec-dash-section .ec-chart-wrap {
    background: transparent;
    padding: 4px 0 0;
    margin: 4px 0 0;
}
body.educore-app-light .ec-chart-wrap canvas {
    max-width: 100%;
}

/* ============================================================
   FEES CARD (student/parent /portal)
   Uses the standard .ec-card shell now; these rules style the
   inner two-column layout (doughnut + numbers), progress bar,
   payment code chip, and collapsible history table.
   ============================================================ */
body.educore-app-light .ec-fees-section .ec-fee-student + .ec-fee-student {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--la-border);
}
body.educore-app-light .ec-fee-student-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
body.educore-app-light .ec-fee-student-id strong {
    display: block;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.05rem;
    color: var(--la-text);
    line-height: 1.2;
}
body.educore-app-light .ec-fee-student-id .ec-muted {
    font-size: .85rem;
    margin-top: 2px;
}
body.educore-app-light .ec-fee-code {
    display: inline-block;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    padding: 5px 10px;
    border-radius: 7px;
    font: 600 .78rem/1.1 'Inter', system-ui, sans-serif;
    letter-spacing: .04em;
    border: 1px solid rgba(37,99,235,.18);
}
body.educore-app-light .ec-fee-body {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 28px;
    align-items: center;
}
body.educore-app-light .ec-fee-chart-col {
    min-width: 0;
}
body.educore-app-light .ec-fee-numbers-col {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 16px;
}
body.educore-app-light .ec-fee-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
body.educore-app-light .ec-fee-stat-grid .ec-stat {
    padding: 14px 14px;
}
body.educore-app-light .ec-fee-stat-grid .ec-stat-value {
    font-size: 1.15rem;
}
body.educore-app-light .ec-fee-stat-grid .ec-stat-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
}
body.educore-app-light .ec-fee-stat-grid .ec-stat-icon svg { width: 18px; height: 18px; }

/* Progress bar — cream rail, accent fill, success at 100% */
body.educore-app-light .ec-fee-progress {
    background: var(--la-surface-2);
    border: 1px solid var(--la-border);
    border-radius: 10px;
    padding: 12px 14px;
}
body.educore-app-light .ec-fee-progress-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px;
}
body.educore-app-light .ec-fee-progress-label {
    font: 600 .85rem/1.2 'Inter', sans-serif;
    color: var(--la-text);
}
body.educore-app-light .ec-fee-progress-remaining {
    font: 500 .78rem/1.2 'Inter', sans-serif;
    color: var(--la-muted);
}
body.educore-app-light .ec-fee-progress-remaining.is-success { color: var(--la-success); }
body.educore-app-light .ec-fee-progress-bar {
    position: relative;
    height: 8px;
    background: rgba(31,26,18,.06);
    border-radius: 99px;
    overflow: hidden;
}
body.educore-app-light .ec-fee-progress-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--la-accent) 0%, #60A5FA 100%);
    border-radius: 99px;
    transition: width .4s ease;
}
body.educore-app-light .ec-fee-progress-bar > span.is-success {
    background: linear-gradient(90deg, var(--la-success) 0%, #4ADE80 100%);
}

/* History — collapsible */
body.educore-app-light .ec-fee-history {
    margin-top: 18px;
    border-top: 1px solid var(--la-border);
    padding-top: 14px;
}
body.educore-app-light .ec-fee-history summary {
    cursor: pointer;
    font: 600 .88rem/1.2 'Inter', sans-serif;
    color: var(--la-accent-2);
    padding: 6px 0;
    list-style: none;
}
body.educore-app-light .ec-fee-history summary::-webkit-details-marker { display: none; }
body.educore-app-light .ec-fee-history summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform .15s ease;
    color: var(--la-muted);
}
body.educore-app-light .ec-fee-history[open] summary::before { transform: rotate(90deg); }
body.educore-app-light .ec-fee-history-table {
    width: 100%; border-collapse: collapse; margin-top: 10px;
    font-size: .85rem;
}
body.educore-app-light .ec-fee-history-table th,
body.educore-app-light .ec-fee-history-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--la-border);
    text-align: left;
    color: var(--la-text-2);
}
body.educore-app-light .ec-fee-history-table th {
    background: var(--la-surface-2);
    color: var(--la-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
body.educore-app-light .ec-fee-history-table code {
    background: var(--la-surface-2);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: .8rem;
    color: var(--la-text-2);
}

/* Tablet/mobile — stack chart over numbers */
@media (max-width: 820px) {
    body.educore-app-light .ec-fee-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    body.educore-app-light .ec-fee-chart-col {
        max-width: 220px; margin: 0 auto;
    }
    body.educore-app-light .ec-fee-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    body.educore-app-light .ec-fee-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   TALK TO CLASS TEACHER (parent /portal)
   .ec-talk-card sits inside a standard .ec-card.ec-dash-section
   shell. These rules style the header icon, form fields, and
   submit button to match the cream dashboard.
   ============================================================ */

body.educore-app-light .ec-talk-card .ec-section-title {
    display: flex; align-items: center; gap: 10px;
}
body.educore-app-light .ec-talk-ic {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border-radius: 9px;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.15);
    flex-shrink: 0;
}
body.educore-app-light .ec-talk-lede {
    margin: -8px 0 18px;
    font-size: .9rem;
    line-height: 1.55;
}

body.educore-app-light .ec-talk-form {
    display: flex; flex-direction: column;
    gap: 14px;
}
body.educore-app-light .ec-talk-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
body.educore-app-light .ec-talk-form label {
    display: flex; flex-direction: column;
    gap: 6px;
    min-width: 0;
}
body.educore-app-light .ec-talk-label {
    font: 600 .8rem/1.2 'Inter', system-ui, sans-serif;
    color: var(--la-text);
    letter-spacing: .01em;
}
body.educore-app-light .ec-talk-form input,
body.educore-app-light .ec-talk-form select,
body.educore-app-light .ec-talk-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--la-border-2);
    border-radius: 10px;
    background: var(--la-surface);
    color: var(--la-text);
    font: 400 .92rem/1.4 'Inter', system-ui, sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: inset 0 1px 0 rgba(31,26,18,.02);
}
body.educore-app-light .ec-talk-form textarea {
    resize: vertical;
    min-height: 110px;
}
body.educore-app-light .ec-talk-form select {
    appearance: none; -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--la-muted) 50%),
        linear-gradient(135deg, var(--la-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    padding-right: 32px;
}
body.educore-app-light .ec-talk-form input::placeholder,
body.educore-app-light .ec-talk-form textarea::placeholder {
    color: var(--la-dim);
}
body.educore-app-light .ec-talk-form input:focus,
body.educore-app-light .ec-talk-form select:focus,
body.educore-app-light .ec-talk-form textarea:focus {
    outline: none;
    border-color: var(--la-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    background: #FFFFFF;
}

body.educore-app-light .ec-talk-actions {
    display: flex; justify-content: flex-end;
    margin-top: 4px;
}
body.educore-app-light .ec-talk-actions .ec-btn-primary {
    background: var(--la-accent);
    color: #fff;
    border: 1px solid var(--la-accent);
    padding: 10px 18px;
    font-weight: 600;
    box-shadow: 0 4px 14px -6px rgba(37,99,235,.5);
}
body.educore-app-light .ec-talk-actions .ec-btn-primary:hover {
    background: var(--la-accent-2);
    border-color: var(--la-accent-2);
    box-shadow: 0 6px 18px -6px rgba(29,78,216,.55);
}

/* Cream-skin flash chips (success/error) — used by .ec-talk-card and others */
body.educore-app-light .ec-flash {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font: 500 .88rem/1.4 'Inter', system-ui, sans-serif;
    margin: 0 0 14px;
    border: 1px solid;
}
body.educore-app-light .ec-flash-ok {
    background: var(--la-success-bg);
    color: #14532D;
    border-color: var(--la-success-bd);
}
body.educore-app-light .ec-flash-err {
    background: var(--la-danger-bg);
    color: #7F1D1D;
    border-color: var(--la-danger-bd);
}
body.educore-app-light .ec-flash-warn {
    background: var(--la-warn-bg);
    color: #78350F;
    border-color: var(--la-warn-bd);
}

@media (max-width: 640px) {
    body.educore-app-light .ec-talk-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   WELCOME HERO STRIP (admin + teacher overview)
   A premium intro card with greeting + date eyebrow + KPI rail.
   Sits above the stat grid as the first thing on the dashboard.
   ============================================================ */
body.educore-app-light .ec-hero-strip {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 26px 30px;
    margin: 0 0 4px;
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 55%),
        linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 60%, #FAF4E4 100%);
    border: 1px solid var(--la-border);
    box-shadow:
        0 1px 0 rgba(31,26,18,.02),
        0 1px 2px rgba(31,26,18,.04),
        0 24px 48px -32px rgba(31,26,18,.18);
    position: relative;
    overflow: hidden;
}
body.educore-app-light .ec-hero-strip::after {
    content: "";
    position: absolute;
    right: -120px; top: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.10) 0%, rgba(124,58,237,0) 70%);
    pointer-events: none;
}
body.educore-app-light .ec-hero-strip-main { min-width: 0; position: relative; z-index: 1; }
body.educore-app-light .ec-hero-strip-eyebrow {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    font: 600 .72rem/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid rgba(37,99,235,.15);
    margin-bottom: 12px;
}
body.educore-app-light .ec-hero-strip h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--la-text);
    margin: 0 0 6px;
}
body.educore-app-light .ec-hero-strip-lede {
    color: var(--la-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
    max-width: 540px;
}

body.educore-app-light .ec-hero-strip-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    gap: 0;
    position: relative; z-index: 1;
    border-left: 1px solid var(--la-border);
    padding-left: 24px;
}
body.educore-app-light .ec-hero-strip-kpi {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 6px 18px;
    border-right: 1px solid var(--la-border);
    min-width: 92px;
}
body.educore-app-light .ec-hero-strip-kpi:last-child { border-right: 0; padding-right: 0; }
body.educore-app-light .ec-hero-strip-kpi-value {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--la-text);
}
body.educore-app-light .ec-hero-strip-kpi-label {
    font: 500 .72rem/1.1 'Inter', sans-serif;
    color: var(--la-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

@media (max-width: 980px) {
    body.educore-app-light .ec-hero-strip {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px 24px;
    }
    body.educore-app-light .ec-hero-strip-kpis {
        border-left: 0;
        border-top: 1px solid var(--la-border);
        padding-left: 0;
        padding-top: 16px;
        grid-template-columns: repeat(2, 1fr);
    }
    body.educore-app-light .ec-hero-strip-kpi {
        border-right: 0;
        padding: 6px 0;
    }
}
@media (max-width: 520px) {
    body.educore-app-light .ec-hero-strip h2 { font-size: 1.4rem; }
    body.educore-app-light .ec-hero-strip-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PREMIUM ACTION TILES (admin + teacher overview)
   Bigger touch target, chevron, hover lift, optional 2-line
   layout with description under the label.
   ============================================================ */
body.educore-app-light .ec-action {
    display: flex; align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--la-text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    box-shadow: 0 1px 0 rgba(31,26,18,.02);
    position: relative;
    overflow: hidden;
}
body.educore-app-light .ec-action::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(37,99,235,0) 50%);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
body.educore-app-light .ec-action:hover {
    transform: translateY(-2px);
    border-color: var(--la-accent);
    box-shadow:
        0 4px 12px -4px rgba(37,99,235,.18),
        0 1px 2px rgba(31,26,18,.04);
    background: var(--la-surface);
    color: var(--la-text);
}
body.educore-app-light .ec-action:hover::before { opacity: 1; }
body.educore-app-light .ec-action-ic {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--la-accent-bg);
    color: var(--la-accent-2);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.10);
    transition: background .15s ease, color .15s ease;
}
body.educore-app-light .ec-action-ic svg { width: 20px; height: 20px; }
body.educore-app-light .ec-action:hover .ec-action-ic {
    background: var(--la-accent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.30), 0 2px 8px -2px rgba(37,99,235,.40);
}
body.educore-app-light .ec-action-body {
    display: flex; flex-direction: column;
    gap: 2px;
    flex: 1; min-width: 0;
}
body.educore-app-light .ec-action-label {
    font: 600 .95rem/1.3 'Inter', sans-serif;
    color: var(--la-text);
    letter-spacing: -.005em;
}
body.educore-app-light .ec-action-desc {
    font: 500 .8rem/1.4 'Inter', sans-serif;
    color: var(--la-muted);
}
body.educore-app-light .ec-action-chev {
    display: grid; place-items: center;
    flex-shrink: 0;
    color: var(--la-dim);
    transition: transform .15s ease, color .15s ease;
}
body.educore-app-light .ec-action:hover .ec-action-chev {
    color: var(--la-accent);
    transform: translateX(3px);
}

/* ============================================================
   v0.16 — COURSE-SKIN
   Scope: body.educore-course-skin
   Applies the admin-panel cream/purple look to Tutor LMS
   public-facing pages (course archive, single course, lessons,
   quizzes). The EduCore top nav + footer stay visible — only
   the Tutor-rendered content gets reskinned.
   Palette: cream canvas (#F7F8FA), warm card (#FFFFFF),
   border (#E5E7EB), ink (#0F172A), muted (#64748B),
   primary purple (#7C3AED), cyan accent (#22D3EE).
   ============================================================ */
body.educore-course-skin {
    background: #EEF1F6 !important;   /* matches --ec16-canvas across all dashboards */
    color: #0F172A;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
/* Override Tutor's blue primary -> EduCore purple. Tutor reads
   these as CSS vars on body, so flipping them retones every
   tutor-color-primary / tutor-btn-primary on the page. */
body.educore-course-skin {
    --tutor-color-primary: #7C3AED;
    --tutor-color-primary-rgb: 124, 58, 237;
    --tutor-color-primary-hover: #6D28D9;
    --tutor-color-primary-hover-rgb: 109, 40, 217;
    --tutor-body-color: #0F172A;
    --tutor-body-color-rgb: 31, 26, 46;
    --tutor-border-color: #E5E7EB;
    --tutor-border-color-rgb: 236, 231, 218;
}
/* Hide Hello Elementor's default page title block — Tutor renders its own. */
body.educore-course-skin .page-header,
body.educore-course-skin .entry-header > .entry-title { display: none; }

/* Frame the Tutor content area as one big admin-panel card. */
body.educore-course-skin .site-main,
body.educore-course-skin main#content,
body.educore-course-skin .page-content,
body.educore-course-skin .entry-content {
    background: transparent;
    padding: 24px 0 48px;
}
body.educore-course-skin .tutor-container {
    background: #FAF7F0;   /* matches the cream right-panel on /portal + /admin-panel */
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    max-width: 1180px;
    margin: 0 auto;
}

/* Typography — match the admin panel. */
body.educore-course-skin h1,
body.educore-course-skin h2,
body.educore-course-skin h3,
body.educore-course-skin h4,
body.educore-course-skin h5 {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    color: #0F172A;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.educore-course-skin .tutor-course-details-title { font-size: 2rem; line-height: 1.15; }
body.educore-course-skin .tutor-color-black { color: #0F172A !important; }
body.educore-course-skin .tutor-color-muted,
body.educore-course-skin .tutor-color-secondary { color: #64748B !important; }

/* Cards — match .ep-card. */
body.educore-course-skin .tutor-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.educore-course-skin .tutor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -12px rgba(15,23,42,.18);
    border-color: rgba(124,58,237,.4);
}
body.educore-course-skin .tutor-card-body { padding: 18px 20px; }
body.educore-course-skin .tutor-card-footer { padding: 14px 20px; border-top: 1px solid #E5E7EB; background: rgba(241,244,248,.5); }

/* Course thumbnails: clean rounded corner inside the card. */
body.educore-course-skin .tutor-course-thumbnail img,
body.educore-course-skin .tutor-course-thumbnail { border-radius: 12px 12px 0 0; }
body.educore-course-skin .tutor-sidebar-card .tutor-course-thumbnail,
body.educore-course-skin .tutor-sidebar-card .tutor-course-thumbnail img { border-radius: 16px 16px 0 0; }

/* Buttons — purple primary, cream ghost. */
body.educore-course-skin .tutor-btn-primary {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(124,58,237,.28);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.educore-course-skin .tutor-btn-primary:hover,
body.educore-course-skin .tutor-btn-primary:focus {
    background: #6D28D9;
    border-color: #6D28D9;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(124,58,237,.34);
    color: #fff;
}
body.educore-course-skin .tutor-btn-ghost {
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #0F172A;
    border-radius: 10px;
    transition: background .15s ease, border-color .15s ease;
}
body.educore-course-skin .tutor-btn-ghost:hover {
    background: #F1F4F8;
    border-color: #7C3AED;
    color: #0F172A;
}
body.educore-course-skin .tutor-btn-outline-primary {
    background: transparent;
    border: 1px solid #7C3AED;
    color: #7C3AED;
    border-radius: 10px;
}
body.educore-course-skin .tutor-btn-outline-primary:hover {
    background: #7C3AED;
    color: #fff;
}
body.educore-course-skin .tutor-btn-link { color: #7C3AED; }
body.educore-course-skin .tutor-btn-link:hover { color: #6D28D9; }

/* Accordion (curriculum / topics). */
body.educore-course-skin .tutor-accordion-item {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #FFFFFF;
    margin-bottom: 10px;
    overflow: hidden;
}
body.educore-course-skin .tutor-accordion-item-header {
    background: #F7F8FA;
    color: #0F172A;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-weight: 600;
    padding: 14px 18px;
}
body.educore-course-skin .tutor-accordion-item-header.is-active { background: #EFE5FB; color: #5B21B6; }
body.educore-course-skin .tutor-accordion-item-body { background: #FFFFFF; padding: 8px 18px 14px; }

/* Course details tabs. */
body.educore-course-skin .tutor-course-details-tab .tutor-nav-link,
body.educore-course-skin .tutor-nav-link {
    color: #64748B;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 18px;
    transition: color .15s ease, border-color .15s ease;
}
body.educore-course-skin .tutor-nav-link.is-active,
body.educore-course-skin .tutor-nav-link.active {
    color: #7C3AED;
    border-bottom-color: #7C3AED;
    background: transparent;
}
body.educore-course-skin .tutor-nav-link:hover { color: #5B21B6; }
body.educore-course-skin .tutor-nav { border-bottom: 1px solid #E5E7EB; }

/* Course list grid spacing. */
body.educore-course-skin .tutor-course-list { gap: 22px; }

/* Pricing + sidebar card highlight. */
body.educore-course-skin .tutor-sidebar-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 14px 30px -18px rgba(15,23,42,.25);
}
body.educore-course-skin .tutor-course-single-pricing { color: #7C3AED; font-family: 'Space Grotesk', 'Poppins'; }

/* Avatars + tags. */
body.educore-course-skin .tutor-avatar { border: 1px solid #E5E7EB; }
body.educore-course-skin .tutor-badge,
body.educore-course-skin .tutor-tag {
    background: #EFE5FB;
    color: #5B21B6;
    border: 1px solid rgba(124,58,237,.18);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: .8rem;
}

/* Form inputs inside Tutor (login modal, search). */
body.educore-course-skin .tutor-form-control,
body.educore-course-skin .tutor-form-check input[type=text],
body.educore-course-skin input.tutor-form-control,
body.educore-course-skin .tutor-modal input[type=text],
body.educore-course-skin .tutor-modal input[type=email],
body.educore-course-skin .tutor-modal input[type=password] {
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0F172A;
}
body.educore-course-skin .tutor-form-control:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124,58,237,.18);
    outline: none;
}

/* Modal (login + course preview) — warmer. */
body.educore-course-skin .tutor-modal-content { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 18px; }
body.educore-course-skin .tutor-modal-overlay { background: rgba(31,26,46,.55); }

/* Responsive tightening. */
@media (max-width: 768px) {
    body.educore-course-skin .tutor-container { padding: 20px; border-radius: 14px; }
    body.educore-course-skin .tutor-course-details-title { font-size: 1.5rem; }
}

/* ============================================================
   v0.16.1 — LESSON / QUIZ SPOTLIGHT VIEW
   Tutor LMS renders lesson + quiz + assignment singles inside a
   "spotlight" shell: left topic sidebar + right content area +
   internal top-bar. None of those wrappers map to .tutor-container,
   so they need their own cream palette overrides.
   ============================================================ */
body.educore-course-skin.single-lesson,
body.educore-course-skin.single-tutor_quiz,
body.educore-course-skin.single-tutor_assignments,
body.educore-course-skin .tutor-course-single-content-wrapper {
    background: #F7F8FA !important;
}

/* Outer two-column shell. */
body.educore-course-skin .tutor-course-single-content-wrapper {
    padding: 0;
}

/* Left topic / curriculum sidebar — match .ep-side. */
body.educore-course-skin .tutor-course-single-sidebar-wrapper,
body.educore-course-skin .tutor-lesson-sidebar {
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    color: #0F172A;
}
body.educore-course-skin .tutor-course-single-sidebar-title {
    background: #FFFFFF;
    color: #0F172A;
    border-bottom: 1px solid #E5E7EB;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-weight: 700;
    padding: 14px 18px;
}
body.educore-course-skin .tutor-course-topic { background: transparent; border-bottom: 1px solid #E5E7EB; }
body.educore-course-skin .tutor-course-topic .tutor-accordion-item-header { border-radius: 0; }
body.educore-course-skin .tutor-course-topic-title { font-family: 'Space Grotesk', 'Poppins'; color: #0F172A; }

/* Topic items in the left rail. */
body.educore-course-skin .tutor-course-topic-item {
    background: transparent;
    border-bottom: 1px solid rgba(230,218,184,.6);
    color: #475569;
    transition: background .15s ease, color .15s ease, padding-left .2s ease;
    padding: 10px 18px;
}
body.educore-course-skin .tutor-course-topic-item:hover {
    background: rgba(124,58,237,.06);
    color: #0F172A;
    padding-left: 22px;
}
body.educore-course-skin .tutor-course-topic-item.is-active {
    background: #EFE5FB;
    color: #5B21B6;
    font-weight: 600;
    border-left: 3px solid #7C3AED;
    padding-left: 16px;
}

/* Internal top bar that sits above the lesson body. */
body.educore-course-skin .tutor-course-topic-single-header,
body.educore-course-skin .tutor-single-page-top-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB;
    color: #0F172A;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.educore-course-skin .tutor-course-topic-single-header * { color: inherit; }
body.educore-course-skin .tutor-course-topic-single-header-title {
    font-family: 'Space Grotesk', 'Poppins';
    font-weight: 700;
    color: #0F172A;
}

/* Right-hand lesson body + spotlight tabs. */
body.educore-course-skin .tutor-course-topic-single-body,
body.educore-course-skin .tutor-course-spotlight-wrapper {
    background: #F7F8FA;
}
body.educore-course-skin .tutor-course-spotlight-wrapper .tutor-container {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    margin: 24px auto;
    padding: 26px 30px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.educore-course-skin .tutor-course-spotlight-tab .tutor-tab-item { background: transparent; }
body.educore-course-skin .tutor-quiz-single-entry-wrap { background: transparent; }

/* Lesson video player wrapper — keep it dark for legibility,
   but round + frame it inside the cream card. */
body.educore-course-skin .tutor-video-player-wrapper {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px -12px rgba(31,26,46,.25);
}

/* Tutor login wall on gated lesson view (anonymous user). */
body.educore-course-skin .tutor-template-segment.tutor-login-wrap {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 520px;
    margin: 32px auto;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* ============================================================
   v0.16.1 — "Back to Dashboard" pill injected into the Tutor
   top-bar by the wp_footer JS below. Always visible, brand purple.
   ============================================================ */
.ec-back-to-portal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7C3AED;
    color: #fff !important;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
    box-shadow: 0 6px 14px rgba(124,58,237,.28);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    margin-right: 12px;
    white-space: nowrap;
}
.ec-back-to-portal:hover,
.ec-back-to-portal:focus {
    background: #6D28D9;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(124,58,237,.34);
    color: #fff !important;
    text-decoration: none !important;
}
.ec-back-to-portal svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Mobile floating back-button fallback for very narrow screens
   where the top-bar can't fit the pill. */
@media (max-width: 640px) {
    .ec-back-to-portal.is-floating {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        padding: 10px 18px;
    }
    .ec-back-to-portal.is-floating:hover { transform: translateX(-50%) translateY(-1px); }
}

/* ============================================================
   v0.16.3 — Tutor LMS /dashboard/* (student area) skin
   The /dashboard page hosts Tutor's [tutor_dashboard]; it shares
   `body.educore-course-skin` with course pages but adds its own
   sidebar menu, stat round-boxes, and a mobile bottom tab bar
   (#tutor-dashboard-footer-mobile) — all reskinned here.
   ============================================================ */

/* Page title above the dashboard grid. */
body.educore-course-skin .tutor-dashboard-title {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    color: #0F172A;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.01em;
}

/* Sidebar menu — cream rail, purple active state. */
body.educore-course-skin .tutor-dashboard-menu,
body.educore-course-skin .tutor-dashboard-menu-items {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 10px 8px;
    overflow: hidden;
}
body.educore-course-skin .tutor-dashboard-menu-item {
    border: none;
    background: transparent;
}
body.educore-course-skin .tutor-dashboard-menu-item-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #0F172A !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
body.educore-course-skin .tutor-dashboard-menu-item-link:hover {
    background: rgba(124,58,237,.08);
    color: #5B21B6 !important;
}
body.educore-course-skin .tutor-dashboard-menu-item.active > .tutor-dashboard-menu-item-link,
body.educore-course-skin .tutor-dashboard-menu-items .active a {
    background: #EFE5FB;
    color: #5B21B6 !important;
    font-weight: 600;
}
body.educore-course-skin .tutor-dashboard-menu-item-icon { color: inherit; }
body.educore-course-skin .tutor-dashboard-menu-divider {
    border-top: 1px solid #E5E7EB;
    margin: 8px 12px;
    height: 0;
    background: transparent;
}

/* Stat-card round icon boxes. */
body.educore-course-skin .tutor-round-box {
    background: #EFE5FB;
    color: #5B21B6;
    border: 1px solid rgba(124,58,237,.18);
}
body.educore-course-skin .tutor-card .tutor-icon-book-open,
body.educore-course-skin .tutor-card [class^="tutor-icon-"],
body.educore-course-skin .tutor-card [class*=" tutor-icon-"] { color: inherit; }

/* Avatar greeting strip at the top of the dashboard. */
body.educore-course-skin .tutor-dashboard-header,
body.educore-course-skin .tutor-dashboard-header-greetings {
    background: transparent;
    color: #0F172A;
}

/* Mobile bottom tab bar (Dashboard / Quiz Attempts / Menu).
   On desktop Tutor hides this via its own @media query; we just
   ensure that when it does show on phones, it matches the skin. */
body.educore-course-skin #tutor-dashboard-footer-mobile {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -6px 18px -10px rgba(15,23,42,.18);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
body.educore-course-skin #tutor-dashboard-footer-mobile .tutor-row {
    align-items: stretch;
}
body.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    color: #64748B !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
}
body.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4 i {
    font-size: 1.15rem;
    color: inherit;
}
body.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4:hover {
    background: rgba(124,58,237,.06);
    color: #5B21B6 !important;
}
body.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4.active {
    color: #5B21B6 !important;
    background: #EFE5FB;
}

/* Tutor renders the mobile footer for every screen size; force it
   hidden on >=992px so the desktop sidebar is the only nav. */
@media (min-width: 992px) {
    body.educore-course-skin #tutor-dashboard-footer-mobile { display: none !important; }
}

/* ============================================================
   v0.16.4 — Tutor /dashboard professional tone-down
   Scoped to `body.tutor-screen-frontend-dashboard` (the Tutor
   student dashboard page) only. Strips the lavender tinting
   from sidebar nav, stat-card icons, and the mobile tab bar so
   the chrome stays cream + ink. Brand purple is reserved for
   primary action buttons (Save, Submit, Continue) — the only
   place a true action colour belongs.
   ============================================================ */

/* Sidebar menu — warm sand hover, ink-bar active state */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link {
    color: #0F172A !important;
    font-weight: 500;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:hover {
    background: #F1F4F8;
    color: #0F172A !important;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item.active > .tutor-dashboard-menu-item-link,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-items .active a {
    background: #E5E7EB;
    color: #0F172A !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #0F172A;
}

/* Stat-card round icon boxes — warm sand, ink fg */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-round-box {
    background: #E5E7EB;
    color: #0F172A;
    border: 1px solid #E5E7EB;
}

/* Cards: keep cream, drop the purple hover-border for a neutral lift */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-card:hover {
    border-color: #D2C29A;
    box-shadow: 0 14px 30px -14px rgba(15,23,42,.22);
}

/* Page title weight only — colour already ink */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-title {
    color: #0F172A;
}

/* Mobile bottom tab bar — match the sidebar treatment */
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4 {
    color: #5A4E36 !important;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4 i {
    color: #5A4E36;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4:hover {
    background: #F1F4F8;
    color: #0F172A !important;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4:hover i {
    color: #0F172A;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4.active {
    background: #E5E7EB;
    color: #0F172A !important;
    box-shadow: inset 0 -2px 0 0 #0F172A;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4.active i {
    color: #0F172A;
}

/* Pricing / link accents on the dashboard — keep ink, drop purple */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-btn-link {
    color: #0F172A;
    text-decoration: underline;
    text-decoration-color: rgba(31,26,46,.35);
    text-underline-offset: 3px;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-btn-link:hover {
    color: #000;
    text-decoration-color: #000;
}

/* ============================================================
   v0.16.5 — Designed icons + admin-style nav animation
   Mirrors the .ep-nav-item treatment used on /admin-panel:
   gradient hover overlay, growing left bar, icon chip that
   scales + rotates. Palette stays warm/neutral so the page
   keeps the professional tone from v0.16.4.
   ============================================================ */

/* Sidebar nav item: relative + isolation for the gradient layer */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link {
    position: relative;
    isolation: isolate;
    padding: 10px 14px 10px 16px;
    border-radius: 10px;
    transition:
        color .3s cubic-bezier(.32,.72,0,1),
        transform .3s cubic-bezier(.32,.72,0,1),
        padding-left .3s cubic-bezier(.32,.72,0,1),
        letter-spacing .3s cubic-bezier(.32,.72,0,1);
}
/* Hover glow underlay (warm cream gradient — no purple) */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(214,193,140,.45), rgba(252,243,219,.55));
    opacity: 0;
    transform: scale(.96);
    transition:
        opacity .3s cubic-bezier(.32,.72,0,1),
        transform .3s cubic-bezier(.32,.72,0,1);
    z-index: -1;
    pointer-events: none;
}
/* Left bar that grows on hover/active (warm ink → amber) */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #0F172A, #64748B);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    box-shadow: 0 0 6px rgba(31,26,46,.18);
    transition: height .4s cubic-bezier(.32,.72,0,1);
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:hover,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:focus {
    background: transparent !important;
    color: #0F172A !important;
    outline: none;
    padding-left: 22px;
    letter-spacing: .01em;
    transform: translateY(-1px);
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:hover::before,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:focus::before {
    opacity: 1;
    transform: scale(1);
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:hover::after,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:focus::after {
    height: 60%;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item.active > .tutor-dashboard-menu-item-link,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-items .active a {
    padding-left: 22px;
    transform: none;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item.active > .tutor-dashboard-menu-item-link::after,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-items .active a::after {
    height: 75%;
}

/* Icon chip — cream tile, ink glyph, scales + tilts on hover */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #475569 !important;
    font-size: 14px;
    margin-right: 6px;
    flex-shrink: 0;
    transition:
        transform .3s cubic-bezier(.32,.72,0,1),
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item-link:focus .tutor-dashboard-menu-item-icon {
    background: #E5E7EB;
    border-color: #D2C29A;
    color: #0F172A !important;
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 4px 10px -4px rgba(15,23,42,.25);
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-item.active > .tutor-dashboard-menu-item-link .tutor-dashboard-menu-item-icon,
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-dashboard-menu-items .active a .tutor-dashboard-menu-item-icon {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF !important;
    box-shadow: 0 6px 14px -6px rgba(31,26,46,.45);
}

/* Stat-card icons: chip them the same way for visual cohesion */
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-round-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #0F172A;
    border: 1px solid #E5E7EB;
    font-size: 1.15rem;
    transition: transform .3s cubic-bezier(.32,.72,0,1), background .25s ease, color .25s ease, box-shadow .25s ease;
}
body.tutor-screen-frontend-dashboard.educore-course-skin .tutor-card:hover .tutor-round-box {
    background: #0F172A;
    color: #FFFFFF;
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 8px 18px -8px rgba(31,26,46,.45);
}

/* Mobile bottom tab bar icons: same chip treatment */
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4 {
    flex-direction: column;
    gap: 4px;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #475569;
    font-size: 1rem;
    transition:
        transform .3s cubic-bezier(.32,.72,0,1),
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4:hover i {
    background: #E5E7EB;
    border-color: #D2C29A;
    color: #0F172A;
    transform: scale(1.08) rotate(-4deg);
}
body.tutor-screen-frontend-dashboard.educore-course-skin #tutor-dashboard-footer-mobile a.tutor-col-4.active i {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

/* ============================================================
 * v0.16.1 — Portal stat cards aligned with the admin Overview
 * pattern (.ep-stat in educore-admin-panel.php): subtle pastel-
 * to-cream card body, dark number, muted brown label, fully
 * saturated pastel icon tile carrying the tone color.
 *
 * These rules deliberately override the earlier .educore-app-
 * light .ec-stat block (around line 6720+) — kept here at end-
 * of-file so cascade always wins, even when nested inside .ec-card.
 * ============================================================ */
body.educore-app-light .ec-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
body.educore-app-light .ec-stat,
body.educore-app-light .ec-stat-card,
body.educore-app-light .ec-card .ec-stat-grid .ec-stat,
body.educore-app-light .ec-card .ec-stat-grid .ec-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.educore-app-light .ec-stat::before,
body.educore-app-light .ec-stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: currentColor;
    opacity: .9;
}
body.educore-app-light .ec-stat:hover,
body.educore-app-light .ec-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -12px rgba(15,23,42,.18);
    border-color: rgba(120,90,40,.18) !important;
}
body.educore-app-light a.ec-stat:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 3px;
}

body.educore-app-light .ec-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(31,26,18,.05);
    transition: transform .15s ease;
}
body.educore-app-light .ec-stat:hover .ec-stat-icon,
body.educore-app-light .ec-stat-card:hover .ec-stat-icon { transform: scale(1.05); }
body.educore-app-light .ec-stat-icon svg { width: 22px; height: 22px; display: block; }

body.educore-app-light .ec-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
body.educore-app-light .ec-stat-label,
body.educore-app-light .ec-stat-card .ec-stat-label {
    font-size: 12px !important;
    color: #64748B !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: 0 !important;
    order: 2;
}
body.educore-app-light .ec-stat-value,
body.educore-app-light .ec-stat-card .ec-stat-value,
body.educore-app-light .ec-stat-card strong {
    display: block;
    font-family: 'Space Grotesk','Poppins',sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: -.015em !important;
    color: #0F172A !important;
    order: 1;
}

body.educore-app-light .ec-stat-chev {
    position: absolute;
    right: 14px; top: 14px;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #94A3B8;
    background: rgba(255,255,255,.6);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease, color .15s ease, background .15s ease;
    pointer-events: none;
}
body.educore-app-light a.ec-stat:hover .ec-stat-chev {
    opacity: 1;
    transform: translateX(0);
    color: #0F172A;
    background: #fff;
}

/* Tone palette — mirrors .ep-stat-* in educore-admin-panel.php.
   The color: declaration drives the ::before stripe (currentColor). */
body.educore-app-light .ec-stat-primary,
body.educore-app-light .ec-card .ec-stat-grid .ec-stat-primary {
    color: #1D4ED8 !important;
    background: linear-gradient(135deg, rgba(219,234,254,.65) 0%, #FFFFFF 60%) !important;
}
body.educore-app-light .ec-stat-primary .ec-stat-icon { background: #DBEAFE; color: #1D4ED8; }

body.educore-app-light .ec-stat-success,
body.educore-app-light .ec-card .ec-stat-grid .ec-stat-success {
    color: #15803D !important;
    background: linear-gradient(135deg, rgba(220,252,231,.65) 0%, #FFFFFF 60%) !important;
}
body.educore-app-light .ec-stat-success .ec-stat-icon { background: #DCFCE7; color: #15803D; }

body.educore-app-light .ec-stat-warning,
body.educore-app-light .ec-card .ec-stat-grid .ec-stat-warning {
    color: #B45309 !important;
    background: linear-gradient(135deg, rgba(254,243,199,.65) 0%, #FFFFFF 60%) !important;
}
body.educore-app-light .ec-stat-warning .ec-stat-icon { background: #FEF3C7; color: #B45309; }

body.educore-app-light .ec-stat-danger,
body.educore-app-light .ec-card .ec-stat-grid .ec-stat-danger {
    color: #B91C1C !important;
    background: linear-gradient(135deg, rgba(254,226,226,.65) 0%, #FFFFFF 60%) !important;
}
body.educore-app-light .ec-stat-danger .ec-stat-icon { background: #FEE2E2; color: #B91C1C; }

/* ============================================================
 * v0.16.1 — Portal sidebar harmonised with admin sidebar.
 * Cream rail + purple accents (was sand rail + blue accents).
 * Mirrors .ep-side rules in educore-admin-panel.php so /portal,
 * /e-library, /my-progress, /fees and /admin-panel all read as
 * the same shell with a consistent active-purple identity.
 * ============================================================ */
body.educore-app-light .ec-v15-app-side {
    background: #FFFFFF !important;
    border-right: 1px solid #E5E7EB;
}
body.educore-app-light .ec-v15-app-brand {
    color: #0F172A !important;
    font-family: 'Space Grotesk','Poppins',sans-serif;
    border-bottom-color: #E5E7EB !important;
}
body.educore-app-light .ec-app-mark {
    background: #7C3AED !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(124,58,237,.3);
}

/* Nav items — idle */
body.educore-app-light .ec-v15-app-link {
    color: #475569 !important;
}

/* Per-item colored icon tile — bg/fg supplied inline via --ic-bg/--ic-fg.
   Keep colors stable across idle / hover / active so each item has a
   recognisable identity, like the stat-card tiles. */
body.educore-app-light .ec-v15-app-link-ic {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    color: var(--ic-fg, #64748B) !important;
    background: var(--ic-bg, transparent) !important;
    box-shadow: inset 0 0 0 1px rgba(31,26,18,.04);
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.32,.72,0,1);
}
body.educore-app-light .ec-v15-app-link-ic svg { width: 16px; height: 16px; }

/* Left rail accent gradient — purple → cyan, matches admin .ep-side */
body.educore-app-light .ec-v15-app-link::after {
    background: linear-gradient(180deg, #7C3AED, #22D3EE) !important;
    box-shadow: 0 0 8px rgba(124,58,237,.4) !important;
}

/* Hover — text deepens, icon tile keeps its tone but scales */
body.educore-app-light .ec-v15-app-link:hover {
    color: #0F172A !important;
}
body.educore-app-light .ec-v15-app-link:hover .ec-v15-app-link-ic {
    transform: scale(1.08) rotate(-3deg);
}

/* Active — purple pill bg around whole row, icon keeps its own color */
body.educore-app-light .ec-v15-app-link.is-active {
    background: #EFE5FB !important;
    color: #5B21B6 !important;
}

/* Foot divider matches the cream hairline */
body.educore-app-light .ec-v15-app-foot {
    border-top-color: #E5E7EB !important;
}

/* Topbar avatar — purple to echo brand mark */
body.educore-app-light .ec-v15-app-avatar {
    background: #7C3AED !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(124,58,237,.25);
}

/* ============================================================
   v0.16.3 — Tutor course pages inside the app shell
   When a logged-in student lands on /courses/ or /courses/<slug>/,
   the page now wraps in the cream sidebar shell (educore-app-light)
   in addition to the existing educore-course-skin tutor reskin.
   These rules reconcile the two: drop redundant chrome that the
   shell topbar already provides, and let Tutor's container fill
   the shell's main column without a double-card look.
   ============================================================ */

/* Topbar shows the course title — hide Tutor's own duplicate. */
body.educore-app-light.educore-course-skin .tutor-course-details-title {
    display: none;
}

/* Hello Elementor's <main id="content"> on single course wraps the
   whole tutor template; reset its top padding so the shell content
   area's own padding (28px) controls the gap. */
body.educore-app-light.educore-course-skin .site-main,
body.educore-app-light.educore-course-skin main#content,
body.educore-app-light.educore-course-skin .page-content,
body.educore-app-light.educore-course-skin .entry-content {
    padding: 0 !important;
}

/* The Tutor container becomes the only card — drop its outer
   border/shadow since the shell main column already provides
   the cream frame. Width stretches to fill the column. */
body.educore-app-light.educore-course-skin .tutor-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: 100%;
}

/* Archive page's <main> isn't a single .tutor-container; the
   .tutor-wrap renders the filter sidebar + grid. Strip its outer
   margins inside the shell. */
body.educore-app-light.educore-course-skin .tutor-wrap,
body.educore-app-light.educore-course-skin .tutor-courses-wrap {
    padding: 0;
    margin: 0;
}

/* ============================================================
   v0.16.4 — Hero eyebrow, humanised
   The default .ec-v15-eyebrow is a SaaS pill chip (uppercase,
   pulsing cyan dot) — reads as AI-generated on the home hero.
   This override targets the hero one only and rebuilds it as
   an editorial-style deck line with a left accent bar.
   Text is unchanged: "EduCore · Smart-school platform".
   ============================================================ */
.educore-v15 .ec-v15-hero-text > .ec-v15-eyebrow {
    /* lose the pill chip entirely */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;

    /* lose the all-caps marketing treatment */
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;

    /* readable on dark glass — mid ink, not washed-out */
    color: #C7D2FE;

    /* anchor an editorial left accent bar */
    border-left: 2px solid var(--ec-cyan);

    /* breathing room above the headline */
    margin-bottom: 22px;
}

/* Kill the inherited pulsing-dot pseudo from the global rule. */
.educore-v15 .ec-v15-hero-text > .ec-v15-eyebrow::before {
    content: none;
    display: none;
    background: none;
    box-shadow: none;
    animation: none;
}

/* ============================================================
   EDUCORE — MOBILE OVERFLOW FIX  (2026-05-25, additive)
   Fixes horizontal overflow on app-light pages (portal,
   e-library, my-progress, fees, admin-panel) on phones/tablets.
   Root cause: a collapsed grid `1fr` track expands to a wide
   child's min-content (nav strip / chart / table), pushing the
   main pane past the viewport so everything is clipped on the
   right. `minmax(0,1fr)` is identical to `1fr` when content
   fits — it only differs when content WOULD overflow — so the
   desktop layout is unchanged. Everything here is scoped to
   body.educore-app-light AND to <=960px only.
   ============================================================ */
@media (max-width: 960px) {
    /* page-level backstop (app-light only; marketing v15 untouched) */
    body.educore-app-light { overflow-x: hidden; }

    /* Portal-family shell (portal / e-library / my-progress / fees) */
    body.educore-app-light .ec-v15-app-shell { grid-template-columns: minmax(0, 1fr); }
    body.educore-app-light .ec-v15-app-side,
    body.educore-app-light .ec-v15-app-main { min-width: 0; max-width: 100%; }

    /* Admin panel shell (.ep-*) — had NO mobile collapse at all.
       The body.educore-app-light prefix raises specificity above
       the panel's inline .ep-shell rule, so this wins regardless
       of source order. */
    body.educore-app-light .ep-shell { grid-template-columns: minmax(0, 1fr); }
    body.educore-app-light .ep-side,
    body.educore-app-light .ep-main { min-width: 0; max-width: 100%; }

    /* Inner-content guards (both skins) */
    body.educore-app-light canvas { max-width: 100% !important; height: auto !important; }
    body.educore-app-light .ep-table-wrap,
    body.educore-app-light .ec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* wide data tables scroll inside their wrap instead of squishing */
    body.educore-app-light .ep-table { width: auto; min-width: 100%; }
}

/* ===== New Curriculum Notes — course chapter list (added 2026-06-05) ===== */
.ec-note-list{list-style:none;padding:0;margin:18px 0}
.ec-note-item{margin:0 0 10px}
.ec-note-item a{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;text-decoration:none;color:#0F172A;transition:.15s ease}
.ec-note-item a:hover{border-color:#7C3AED;box-shadow:0 6px 16px rgba(124,58,237,.12);transform:translateY(-1px)}
.ec-note-num{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:linear-gradient(120deg,#2563EB,#7C3AED);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.ec-note-title{flex:1;font-weight:600;line-height:1.3}
.ec-note-open{flex:0 0 auto;color:#7C3AED;font-weight:600;font-size:14px;white-space:nowrap}
.ec-note-byline{color:#64748B;font-size:14px;margin-top:-4px}

/* ===== 2026-06-06 judge-readiness pass ===================================
   Hide Hello Elementor's site header unconditionally (was previously keyed
   to body.educore-skin — pages cached before that class existed could still
   leak the raw WP page-list menu with its gated E-Library link). */
#site-header.site-header,
header.site-header,
.site-navigation,
.site-navigation-toggle-holder,
.site-navigation-dropdown { display: none !important; }

/* ===== 2026-06-07 ABOUT — Meet-the-team cards (section 06) ============== */
.educore-v15 .ec-v15-team {
    display: flex; flex-direction: column;
    gap: 26px; max-width: 880px; margin: 0 auto;
}
.educore-v15 .ec-v15-team-card {
    display: flex; align-items: center; gap: 36px;
    background: var(--ec-glass); border: 1px solid var(--ec-glass-line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 22px; padding: 34px 40px; text-align: left;
    transition: transform .35s var(--ec-ease-15), border-color .35s, box-shadow .35s;
}
.educore-v15 .ec-v15-team-card.is-flip {
    flex-direction: row-reverse; text-align: right;
}
.educore-v15 .ec-v15-team-body { flex: 1; min-width: 0; }
.educore-v15 .ec-v15-team-card:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,.40);
    box-shadow: 0 30px 60px rgba(34,211,238,.16);
}
.educore-v15 .ec-v15-team-ava {
    flex: 0 0 150px; width: 150px; height: 150px; margin: 0;
    border-radius: 50%; position: relative;
    box-shadow: 0 18px 40px rgba(2,6,23,.55);
}
.educore-v15 .ec-v15-team-ava img {
    width: 100%; height: 100%; display: block; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--ec-glass-line);
}
.educore-v15 .ec-v15-team-ava::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset 0 0 26px rgba(2,6,23,.35);
    pointer-events: none;
}
.educore-v15 .ec-v15-team-card h3 {
    margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem; color: #fff;
}
.educore-v15 .ec-v15-team-role {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ec-cyan); background: var(--ec-cyan-soft);
    border: 1px solid rgba(34,211,238,.35); margin-bottom: 16px;
}
.educore-v15 .ec-v15-team-role.is-dev {
    color: #C4B5FD; background: var(--ec-purple-soft); border-color: rgba(124,58,237,.40);
}
.educore-v15 .ec-v15-team-card p {
    margin: 0; font-size: .95rem; line-height: 1.7;
    color: var(--ec-ink-15-soft); font-style: italic;
}
@media (max-width: 760px) {
    .educore-v15 .ec-v15-team-card,
    .educore-v15 .ec-v15-team-card.is-flip {
        flex-direction: column; text-align: center; gap: 20px;
        padding: 32px 26px;
    }
}