/**
 * ============================================================
 * MathMaroc Premium UI
 * PACK MASTER A1 — Design System Global
 * UX PREMIUM ULTRA PRO BOM TURBO +++
 * ------------------------------------------------------------
 * Rôle :
 * - base UI commune MathMaroc
 * - inspirée de MathMaroc Academy
 * - optionnelle, non destructive
 * - utilisable page par page
 * ============================================================
 */

:root{
    --mmui-bg:#f6f8fb;
    --mmui-surface:#ffffff;
    --mmui-surface-soft:#f8fafc;
    --mmui-ink:#0f172a;
    --mmui-muted:#64748b;
    --mmui-soft:#94a3b8;
    --mmui-line:#e2e8f0;

    --mmui-teal:#0f766e;
    --mmui-blue:#2563eb;
    --mmui-orange:#f97316;
    --mmui-purple:#7c3aed;
    --mmui-red:#b91c1c;
    --mmui-green:#16a34a;
    --mmui-slate:#334155;

    --mmui-radius-xl:54px;
    --mmui-radius-lg:38px;
    --mmui-radius-md:28px;
    --mmui-radius-sm:18px;
    --mmui-radius-pill:999px;

    --mmui-shadow:0 24px 80px rgba(15,23,42,.13);
    --mmui-shadow-soft:0 15px 42px rgba(15,23,42,.08);
    --mmui-shadow-card:0 16px 42px rgba(15,23,42,.10);

    --mmui-grad-main:linear-gradient(135deg,#0f766e,#0f172a 52%,#2563eb);
    --mmui-grad-orange:linear-gradient(135deg,#f97316,#0f172a 55%,#2563eb);
    --mmui-grad-purple:linear-gradient(135deg,#7c3aed,#0f172a 55%,#2563eb);
    --mmui-grad-blue:linear-gradient(135deg,#2563eb,#0f172a 55%,#0f766e);
    --mmui-grad-red:linear-gradient(135deg,#b91c1c,#0f172a 55%,#2563eb);

    --mmui-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ============================================================
   Global wrappers
   ============================================================ */

.mmui-page{
    background:
        radial-gradient(circle at 8% 0%, rgba(15,118,110,.14), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(37,99,235,.11), transparent 30%),
        radial-gradient(circle at 70% 90%, rgba(249,115,22,.08), transparent 35%),
        var(--mmui-bg);
    color:var(--mmui-ink);
    font-family:var(--mmui-font);
}

.mmui-wrap{
    width:min(1320px, calc(100% - 28px));
    margin:0 auto;
    padding:28px 0 92px;
    color:var(--mmui-ink);
}

.mmui-wrap.narrow{
    width:min(1120px, calc(100% - 28px));
}

.mmui-wrap.wide{
    width:min(1480px, calc(100% - 28px));
}

/* ============================================================
   Hero premium
   ============================================================ */

.mmui-hero{
    position:relative;
    overflow:hidden;
    border-radius:var(--mmui-radius-xl);
    padding:52px;
    color:white;
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.17), transparent 30%),
        radial-gradient(circle at 12% 88%, rgba(249,115,22,.26), transparent 34%),
        var(--mmui-grad-main);
    box-shadow:var(--mmui-shadow);
}

.mmui-hero.is-orange{
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.17), transparent 30%),
        radial-gradient(circle at 12% 88%, rgba(255,255,255,.08), transparent 34%),
        var(--mmui-grad-orange);
}

.mmui-hero.is-purple{
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.17), transparent 30%),
        radial-gradient(circle at 12% 88%, rgba(249,115,22,.18), transparent 34%),
        var(--mmui-grad-purple);
}

.mmui-hero.is-blue{
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.17), transparent 30%),
        radial-gradient(circle at 12% 88%, rgba(249,115,22,.18), transparent 34%),
        var(--mmui-grad-blue);
}

.mmui-hero:after{
    content:attr(data-watermark);
    position:absolute;
    right:18px;
    bottom:-24px;
    color:rgba(255,255,255,.055);
    font-size:132px;
    font-weight:950;
    letter-spacing:-.09em;
    pointer-events:none;
}

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

.mmui-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:var(--mmui-radius-pill);
    padding:10px 15px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    color:white;
    font-weight:950;
    line-height:1.2;
}

.mmui-hero h1,
.mmui-title-xl{
    margin:24px 0 14px;
    color:white;
    font-size:clamp(42px,7vw,90px);
    line-height:.94;
    letter-spacing:-.08em;
    max-width:1120px;
}

.mmui-hero p,
.mmui-subtitle{
    margin:0;
    max-width:980px;
    color:#dbeafe;
    line-height:1.85;
    font-size:18px;
    font-weight:760;
}

.mmui-actions{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* ============================================================
   Buttons
   ============================================================ */

.mmui-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    border-radius:17px;
    padding:12px 16px;
    text-decoration:none;
    border:1px solid transparent;
    font-weight:950;
    cursor:pointer;
    font-family:inherit;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.mmui-btn:hover{
    transform:translateY(-1px);
    opacity:.96;
}

.mmui-btn.main{
    color:white;
    background:linear-gradient(135deg,#f97316,#fb923c);
    box-shadow:0 16px 34px rgba(249,115,22,.24);
}

.mmui-btn.soft{
    color:white;
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.25);
}

.mmui-btn.green{
    color:white;
    background:linear-gradient(135deg,#0f766e,#2563eb);
}

.mmui-btn.orange{
    color:white;
    background:linear-gradient(135deg,#f97316,#2563eb);
}

.mmui-btn.purple{
    color:white;
    background:linear-gradient(135deg,#7c3aed,#2563eb);
}

.mmui-btn.gray{
    color:white;
    background:linear-gradient(135deg,#334155,#0f172a);
}

.mmui-btn.light{
    color:#0f172a;
    background:white;
    border-color:#e2e8f0;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

/* ============================================================
   Stats
   ============================================================ */

.mmui-stats{
    margin-top:34px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:13px;
}

.mmui-stat{
    border-radius:25px;
    padding:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
}

.mmui-stat strong{
    display:block;
    color:white;
    font-size:32px;
    font-weight:950;
    letter-spacing:-.04em;
}

.mmui-stat span{
    display:block;
    margin-top:5px;
    color:#dbeafe;
    font-size:13px;
    font-weight:850;
}

/* Light stats */

.mmui-stat-light{
    border-radius:26px;
    padding:18px;
    background:white;
    border:1px solid var(--mmui-line);
    box-shadow:var(--mmui-shadow-soft);
}

.mmui-stat-light strong{
    display:block;
    color:#0f172a;
    font-size:32px;
    font-weight:950;
    letter-spacing:-.04em;
}

.mmui-stat-light span{
    display:block;
    margin-top:5px;
    color:#64748b;
    font-size:13px;
    font-weight:850;
}

/* ============================================================
   Sections and layouts
   ============================================================ */

.mmui-layout{
    margin-top:28px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    gap:22px;
    align-items:start;
}

.mmui-side{
    position:sticky;
    top:18px;
}

.mmui-section{
    margin-top:28px;
    background:white;
    border:1px solid var(--mmui-line);
    border-radius:var(--mmui-radius-lg);
    padding:26px;
    box-shadow:var(--mmui-shadow-soft);
}

.mmui-section:first-child{
    margin-top:0;
}

.mmui-section h2,
.mmui-section-title{
    margin:0 0 16px;
    color:#0f172a;
    font-size:40px;
    letter-spacing:-.07em;
    line-height:1;
}

.mmui-section p{
    color:#475569;
    font-weight:820;
    line-height:1.8;
    margin:0 0 12px;
}

/* ============================================================
   Cards
   ============================================================ */

.mmui-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.mmui-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.mmui-grid.four{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.mmui-card{
    border-radius:var(--mmui-radius-md);
    padding:20px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#0f172a;
}

.mmui-card.white{
    background:white;
    box-shadow:var(--mmui-shadow-soft);
}

.mmui-card.ok{
    background:#ecfdf5;
    border-color:#99f6e4;
}

.mmui-card.warn{
    background:#fff7ed;
    border-color:#fed7aa;
}

.mmui-card.bad{
    background:#fef2f2;
    border-color:#fecaca;
}

.mmui-card strong{
    display:block;
    color:#0f172a;
    font-size:22px;
    letter-spacing:-.045em;
}

.mmui-card span,
.mmui-card p{
    display:block;
    margin-top:8px;
    color:#64748b;
    font-weight:820;
    line-height:1.65;
}

.mmui-action-card{
    min-height:150px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    border-radius:28px;
    padding:20px;
    color:white;
    text-decoration:none;
    background:var(--mmui-grad-main);
    box-shadow:var(--mmui-shadow-card);
}

.mmui-action-card.orange{background:var(--mmui-grad-orange);}
.mmui-action-card.purple{background:var(--mmui-grad-purple);}
.mmui-action-card.blue{background:var(--mmui-grad-blue);}
.mmui-action-card.red{background:var(--mmui-grad-red);}

.mmui-action-icon{
    width:54px;
    height:54px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    font-size:27px;
    flex:0 0 54px;
}

.mmui-action-card strong{
    display:block;
    color:white;
    font-size:22px;
    letter-spacing:-.045em;
}

.mmui-action-card span{
    display:block;
    margin-top:8px;
    color:#dbeafe;
    font-weight:820;
    line-height:1.55;
}

/* ============================================================
   Badges, chips, alerts
   ============================================================ */

.mmui-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
}

.mmui-badge.ok{color:#166534;background:#dcfce7;}
.mmui-badge.warn{color:#9a3412;background:#ffedd5;}
.mmui-badge.bad{color:#b91c1c;background:#fee2e2;}
.mmui-badge.wait{color:#475569;background:#f1f5f9;}
.mmui-badge.premium{color:#6d28d9;background:#ede9fe;}
.mmui-badge.free{color:#047857;background:#d1fae5;}

.mmui-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.mmui-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    border-radius:999px;
    padding:8px 12px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155;
    font-weight:900;
    text-decoration:none;
}

.mmui-chip.active{
    color:white;
    background:linear-gradient(135deg,#0f766e,#2563eb);
    border-color:transparent;
}

.mmui-alert{
    border-radius:24px;
    padding:16px 18px;
    font-weight:900;
    line-height:1.65;
}

.mmui-alert.ok{
    background:#ecfdf5;
    border:1px solid #99f6e4;
    color:#047857;
}

.mmui-alert.warn{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
}

.mmui-alert.bad{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
}

.mmui-alert.info{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
}

/* ============================================================
   Lists, timeline, empty states
   ============================================================ */

.mmui-list{
    display:grid;
    gap:10px;
}

.mmui-list-item{
    border-radius:22px;
    padding:14px 16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155;
    font-weight:850;
    line-height:1.65;
}

.mmui-list a,
a.mmui-list-item{
    text-decoration:none;
}

.mmui-empty{
    border-radius:30px;
    padding:28px;
    text-align:center;
    background:#f8fafc;
    border:1px dashed #94a3b8;
}

.mmui-empty strong{
    display:block;
    color:#0f172a;
    font-size:26px;
    letter-spacing:-.05em;
}

.mmui-empty span{
    display:block;
    margin-top:8px;
    color:#64748b;
    font-weight:820;
    line-height:1.65;
}

.mmui-timeline{
    display:grid;
    gap:12px;
    counter-reset:mmui-step;
}

.mmui-step{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:14px;
    border-radius:28px;
    padding:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.mmui-step:before{
    counter-increment:mmui-step;
    content:counter(mmui-step);
    width:54px;
    height:54px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    background:linear-gradient(135deg,#0f766e,#2563eb);
    font-weight:950;
    font-size:20px;
}

.mmui-step strong{
    display:block;
    color:#0f172a;
    font-size:22px;
    letter-spacing:-.04em;
}

.mmui-step span{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-weight:820;
    line-height:1.65;
}

/* ============================================================
   Forms / filters
   ============================================================ */

.mmui-filterbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    border-radius:28px;
    padding:14px;
    background:white;
    border:1px solid var(--mmui-line);
    box-shadow:var(--mmui-shadow-soft);
}

.mmui-input,
.mmui-select{
    min-height:46px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    padding:10px 13px;
    color:#0f172a;
    font-weight:850;
    font-family:inherit;
    outline:none;
}

.mmui-input:focus,
.mmui-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* ============================================================
   Assistant IA global floating CTA
   ============================================================ */

.mmui-ai-fab{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:60;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    border-radius:999px;
    padding:12px 16px;
    color:white;
    text-decoration:none;
    background:linear-gradient(135deg,#0f766e,#0f172a 55%,#2563eb);
    box-shadow:0 18px 45px rgba(15,23,42,.22);
    font-weight:950;
}

.mmui-ai-fab span:first-child{
    font-size:24px;
}

/* ============================================================
   RTL support
   ============================================================ */

[dir="rtl"] .mmui-hero:after{
    right:auto;
    left:18px;
}

[dir="rtl"] .mmui-action-card,
[dir="rtl"] .mmui-step,
[dir="rtl"] .mmui-filterbar{
    direction:rtl;
}

[dir="rtl"] .mmui-hero h1,
[dir="rtl"] .mmui-section h2{
    letter-spacing:-.04em;
}

/* ============================================================
   Responsive
   ============================================================ */

@media(max-width:1080px){
    .mmui-layout{
        grid-template-columns:1fr;
    }

    .mmui-side{
        position:static;
    }

    .mmui-stats,
    .mmui-grid,
    .mmui-grid.two,
    .mmui-grid.four{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .mmui-wrap{
        width:min(100% - 18px,1320px);
        padding-top:16px;
    }

    .mmui-hero,
    .mmui-section{
        border-radius:28px;
        padding:24px;
    }

    .mmui-hero h1,
    .mmui-title-xl{
        font-size:42px;
    }

    .mmui-actions,
    .mmui-stats,
    .mmui-grid,
    .mmui-grid.two,
    .mmui-grid.four,
    .mmui-filterbar{
        display:grid;
        grid-template-columns:1fr;
    }

    .mmui-btn,
    .mmui-input,
    .mmui-select{
        width:100%;
    }

    .mmui-step{
        grid-template-columns:1fr;
    }

    .mmui-ai-fab{
        right:12px;
        left:12px;
        justify-content:center;
    }
}

/* ============================================================
   Print
   ============================================================ */

@media print{
    .mmui-actions,
    .mmui-ai-fab{
        display:none !important;
    }

    .mmui-page{
        background:white !important;
    }

    .mmui-wrap{
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .mmui-hero,
    .mmui-section,
    .mmui-card,
    .mmui-action-card{
        box-shadow:none !important;
        break-inside:avoid;
    }
}