:root {

    /* ============================================================ */
    /* BRAND                                                        */
    /* ============================================================ */

    --color-primary: #28e58b;
    --color-primary-dark: #19b96c;
    --color-primary-deep: #079357;

    --color-secondary: #20d6bc;

    --color-primary-soft: rgba(40, 229, 139, 0.12);
    --color-primary-glow: rgba(40, 229, 139, 0.28);


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

    --color-bg: #f5f7f6;
    --color-bg-soft: #eef4f2;

    --color-surface: #ffffff;
    --color-surface-soft: #f9fbfa;
    --color-surface-hover: #fbfdfc;


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

    --color-sidebar: #0b1713;
    --color-sidebar-soft: #10211a;

    --color-sidebar-hover: rgba(40, 229, 139, 0.08);
    --color-sidebar-active: rgba(40, 229, 139, 0.12);

    --color-sidebar-text: #d8e1dd;
    --color-sidebar-text-soft: #899a93;
    --color-sidebar-text-muted: #687a72;

    --color-sidebar-border: rgba(255, 255, 255, 0.06);


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

    --color-text: #17201d;
    --color-text-soft: #64716b;
    --color-text-muted: #929c97;

    --color-white: #ffffff;


    /* ============================================================ */
    /* STATES                                                       */
    /* ============================================================ */

    --color-success: #19b96c;
    --color-success-soft: rgba(25, 185, 108, 0.10);

    --color-warning: #d99a18;
    --color-warning-soft: rgba(217, 154, 24, 0.11);

    --color-danger: #e55757;
    --color-danger-soft: rgba(229, 87, 87, 0.10);

    --color-info: #3789dd;
    --color-info-soft: rgba(55, 137, 221, 0.10);


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

    --border-soft: rgba(18, 40, 32, 0.08);
    --border-medium: rgba(18, 40, 32, 0.12);

    --border-color: #e7ece9;


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

    --shadow-xs:
        0 2px 8px rgba(10, 28, 21, 0.04);

    --shadow-sm:
        0 8px 24px rgba(10, 28, 21, 0.06);

    --shadow-md:
        0 18px 50px rgba(10, 28, 21, 0.09);

    --shadow-lg:
        0 30px 80px rgba(10, 28, 21, 0.14);


    /* ============================================================ */
    /* LAYOUT                                                       */
    /* ============================================================ */

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 82px;

    --topbar-height: 72px;

    --app-content-max-width: 1600px;


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

    --radius-xs: 7px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;


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

    --transition-fast:
        160ms ease;

    --transition-normal:
        260ms cubic-bezier(.2, .8, .2, 1);

    --transition-slow:
        420ms cubic-bezier(.2, .8, .2, 1);


    /* ============================================================ */
    /* LEGACY ALIASES                                               */
    /* Pour le CSS déjà présent                                     */
    /* ============================================================ */

    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary-color: var(--color-secondary);

    --background-color: var(--color-bg);
    --surface-color: var(--color-surface);

    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-soft);
    --text-muted: var(--color-text-muted);
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    background: var(--color-bg);
}

body {
    min-width: 320px;

    color: var(--color-text);

    background: var(--color-bg);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.pronio-app {
    min-height: 100vh;
}

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

.app-sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(40, 229, 139, 0.075),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #0b1a15 0%,
            #091510 100%
        );

    border-right:
        1px solid rgba(255, 255, 255, 0.055);

    box-shadow:
        10px 0 35px rgba(5, 20, 14, 0.08);

    overflow: hidden;

    z-index: 1000;

    transition:
        width var(--transition-slow),
        transform var(--transition-slow);
}


/* léger halo */

.app-sidebar::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    top: -145px;
    right: -125px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 229, 139, 0.12),
            transparent 70%
        );

    pointer-events: none;
}


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

.sidebar-header {
    position: relative;
    z-index: 2;

    min-height: var(--topbar-height);

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

    padding: 0 18px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);
}

.sidebar-brand {
    display: flex;
    align-items: center;

    min-width: 0;

    overflow: hidden;
}

.sidebar-brand-logo {
    display: block;

    width: 150px;
    max-width: 100%;
    height: auto;
    max-height: 40px;

    object-fit: contain;
    object-position: left center;

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);
}


/* =========================================================
   SIDEBAR COLLAPSE BUTTON
   ========================================================= */

.sidebar-collapse {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    margin-left: 8px;

    color: rgba(255, 255, 255, 0.36);

    background: transparent;

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.sidebar-collapse:hover {
    color: var(--color-white);

    background:
        rgba(255, 255, 255, 0.055);
}


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

.sidebar-content {
    flex: 1;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 25px 12px 18px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.08)
        transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 4px;
}

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

.sidebar-content::-webkit-scrollbar-thumb {
    background:
        rgba(255, 255, 255, 0.08);

    border-radius: 999px;
}


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

.sidebar-group {
    margin-bottom: 25px;
}

.sidebar-group:last-child {
    margin-bottom: 0;
}

.sidebar-group-label {
    margin-bottom: 8px;
    padding: 0 11px;

    color:
        rgba(255, 255, 255, 0.30);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;

    overflow: hidden;
}


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

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sidebar-link {
    position: relative;

    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 5px 10px;

    color:
        rgba(255, 255, 255, 0.58);

    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 10px;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}


/* on retire la grosse barre latérale flottante */

.sidebar-link::before {
    content: none;
}


.sidebar-link:hover {
    color:
        rgba(255, 255, 255, 0.92);

    background:
        rgba(255, 255, 255, 0.035);
}


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

.sidebar-link.active {
    color: var(--color-primary);

    background:
        linear-gradient(
            90deg,
            rgba(40, 229, 139, 0.14),
            rgba(40, 229, 139, 0.065)
        );

    border-color:
        rgba(40, 229, 139, 0.04);
}


/* =========================================================
   SIDEBAR LINK ICON
   ========================================================= */

.sidebar-link-icon {
    width: 31px;
    height: 31px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color:
        rgba(255, 255, 255, 0.48);

    border-radius: 8px;

    background: transparent;

    font-size: 13px;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.sidebar-link:hover
.sidebar-link-icon {
    color: var(--color-white);
}

.sidebar-link.active
.sidebar-link-icon {
    color: var(--color-primary);

    background:
        rgba(40, 229, 139, 0.10);
}

.sidebar-link-icon-ai {
    color: var(--color-primary);
}


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

.sidebar-link-label {
    flex: 1;

    min-width: 0;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    transition:
        opacity var(--transition-normal),
        width var(--transition-normal);
}


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

.sidebar-link-badge {
    flex-shrink: 0;

    padding: 3px 6px;

    color: var(--color-primary);

    background:
        rgba(40, 229, 139, 0.09);

    border:
        1px solid
        rgba(40, 229, 139, 0.11);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.02em;

    white-space: nowrap;
}


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

.sidebar-footer {
    flex-shrink: 0;

    padding: 12px;

    border-top:
        1px solid rgba(255, 255, 255, 0.04);
}


/* =========================================================
   SIDEBAR ENGINE CARD
   ========================================================= */

.sidebar-ai-card {
    position: relative;

    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.025);

    overflow: hidden;
}

.sidebar-ai-glow {
    position: absolute;

    width: 100px;
    height: 100px;

    right: -50px;
    top: -50px;

    background:
        radial-gradient(
            circle,
            rgba(40, 229, 139, 0.14),
            transparent 68%
        );

    pointer-events: none;
}

.sidebar-ai-icon {
    position: relative;
    z-index: 2;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #07130d;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    border-radius: 9px;

    font-size: 11px;

    box-shadow:
        0 0 16px
        rgba(40, 229, 139, 0.13);
}

.sidebar-ai-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-width: 0;
}

.sidebar-ai-label {
    color:
        rgba(255, 255, 255, 0.34);

    font-size: 7px;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-ai-content strong {
    margin-top: 2px;

    color: var(--color-white);

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;
}

.sidebar-ai-status {
    position: relative;
    z-index: 2;

    width: 6px;
    height: 6px;

    margin-left: auto;

    flex-shrink: 0;

    background: var(--color-primary);

    border-radius: 50%;

    box-shadow:
        0 0 8px
        var(--color-primary-glow);

    animation:
        pronioPulse 2.2s infinite;
}


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

.sidebar-version {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 10px 3px 0;

    color:
        rgba(255, 255, 255, 0.23);

    font-size: 8px;
}

.sidebar-version small {
    color:
        rgba(255, 255, 255, 0.14);
}

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

body.sidebar-collapsed
.app-sidebar {
    width:
        var(--sidebar-collapsed-width);
}

body.sidebar-collapsed
.app-wrapper {
    margin-left:
        var(--sidebar-collapsed-width);
}

body.sidebar-collapsed
.sidebar-brand-logo {
    width: 42px;
    max-width: none;

    object-fit: cover;
    object-position: left center;
}

body.sidebar-collapsed
.sidebar-collapse i {
    transform:
        rotate(180deg);
}

body.sidebar-collapsed
.sidebar-header {
    justify-content: center;

    padding-left: 10px;
    padding-right: 10px;
}

body.sidebar-collapsed
.sidebar-brand {
    width: 42px;
}

body.sidebar-collapsed
.sidebar-collapse {
    display: none;
}

body.sidebar-collapsed
.sidebar-group-label,
body.sidebar-collapsed
.sidebar-link-label,
body.sidebar-collapsed
.sidebar-link-badge,
body.sidebar-collapsed
.sidebar-ai-content,
body.sidebar-collapsed
.sidebar-ai-status,
body.sidebar-collapsed
.sidebar-version {
    display: none;
}

body.sidebar-collapsed
.sidebar-content {
    padding-left: 8px;
    padding-right: 8px;
}

body.sidebar-collapsed
.sidebar-link {
    justify-content: center;

    padding-left: 6px;
    padding-right: 6px;
}

body.sidebar-collapsed
.sidebar-link-icon {
    width: 34px;
    height: 34px;
}

body.sidebar-collapsed
.sidebar-ai-card {
    justify-content: center;

    padding: 8px;
}

/* ============================================================= */
/* SIDEBAR OPEN BUTTON                                           */
/* ============================================================= */

.sidebar-reopen {
    position: fixed;

    top: 18px;
    left: 0;

    z-index: 1000;

    width: 34px;
    height: 38px;

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

    padding: 0;

    border: 1px solid var(--border-soft);
    border-left: 0;

    border-radius: 0 10px 10px 0;

    color: var(--color-text-soft);

    background: var(--color-surface);

    box-shadow:
        2px 3px 12px
        rgba(15, 23, 42, .08);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateX(-100%);

    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

.sidebar-reopen svg {
    width: 16px;
    height: 16px;
}

.sidebar-reopen:hover {
    color: var(--color-primary-dark);

    background: var(--color-surface-hover);
}


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

body.sidebar-collapsed
.sidebar-reopen {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}

/* =========================================================
   APP WRAPPER
   ========================================================= */

.app-wrapper {
    min-height: 100vh;

    margin-left:
        var(--sidebar-width);

    transition:
        margin-left var(--transition-slow);
}

/* =========================================================
   MAIN
   ========================================================= */

.app-main {
    min-height:
        calc(
            100vh -
            var(--topbar-height)
        );

    padding: 25px 28px 40px;
}

.app-main-inner {
    width: 100%;

    max-width: var(--app-content-max-width);

    margin: 0 auto;
}


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

.app-overlay {
    position: fixed;

    inset: 0;

    z-index: 900;

    display: none;

    background:
        rgba(3, 13, 9, 0.55);

    backdrop-filter:
        blur(3px);

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

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

.app-topbar {
    position: sticky;

    top: 0;

    z-index: 800;

    height: var(--topbar-height);

    display: grid;

    grid-template-columns:
        minmax(190px, 1fr)
        minmax(280px, 420px)
        minmax(310px, 1fr);

    align-items: center;

    gap: 20px;

    padding: 0 28px;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid var(--border-soft);

    backdrop-filter:
        blur(15px);

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


/* =========================================================
   TOPBAR LEFT / ACTIONS
   ========================================================= */

.topbar-left,
.topbar-actions {
    display: flex;
    align-items: center;
}

.topbar-left {
    min-width: 0;

    gap: 12px;
}

.topbar-actions {
    justify-content: flex-end;

    gap: 8px;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.topbar-menu-button {
    width: 38px;
    height: 38px;

    display: none;

    place-items: center;

    padding: 0;

    border:
        1px solid var(--border-soft);

    border-radius: 9px;

    background: var(--color-surface);

    color: var(--color-text);

    cursor: pointer;
}


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

.topbar-breadcrumb {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    color: var(--color-text-muted);

    font-size: 10px;
}

.topbar-breadcrumb i {
    flex-shrink: 0;

    font-size: 6px;

    opacity: 0.5;
}

.topbar-breadcrumb strong {
    min-width: 0;

    color: var(--color-text);

    font-weight: 750;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   PULSE
   ========================================================= */

@keyframes pronioPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(40, 229, 139, 0.2),
            0 0 8px
            rgba(40, 229, 139, 0.42);
    }

    60% {
        box-shadow:
            0 0 0 6px
            rgba(40, 229, 139, 0),
            0 0 14px
            rgba(40, 229, 139, 0.34);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(40, 229, 139, 0),
            0 0 8px
            rgba(40, 229, 139, 0.42);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .app-topbar {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(240px, 340px)
            minmax(280px, 1fr);
    }
}


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

@media (max-width: 1100px) {

    .app-sidebar {
        width: var(--sidebar-width);

        transform:
            translateX(-100%);

        box-shadow:
            20px 0 55px
            rgba(4, 16, 11, 0.25);
    }

    body.sidebar-mobile-open
    .app-sidebar {
        transform:
            translateX(0);
    }

    body.sidebar-mobile-open
    .app-overlay {
        display: block;
    }

    .app-wrapper,
    body.sidebar-collapsed
    .app-wrapper {
        margin-left: 0;
    }

    .topbar-menu-button {
        display: grid;
    }

    .app-topbar {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(240px, 330px)
            auto;

        padding:
            0 18px;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

    .app-topbar {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 12px;

        padding:
            0 15px;
    }

    .topbar-search {
        display: none;
    }

    .app-main {
        padding:
            20px 15px 32px;
    }
}


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

@media (max-width: 575px) {

    .app-topbar {
        height: 64px;
    }

    .topbar-breadcrumb {
        font-size: 9px;
    }

    .app-main {
        padding:
            16px 11px 28px;
    }
}

/*
 * Pronio - Global application layout
 *
 * Page-specific CSS must not be added here.
 */

.global-search {
    width: 100%;

    height: 46px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 0 12px 0 15px;

    color: var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.72);

    border: 1px solid var(--border-soft);

    border-radius: 15px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        var(--shadow-xs);

    cursor: pointer;

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal),
        background var(--transition-normal);
}

.global-search:hover {
    background: rgba(255, 255, 255, 0.9);

    border-color: rgba(40, 229, 139, 0.22);

    box-shadow:
        0 8px 30px rgba(25, 50, 40, 0.06),
        0 0 0 4px rgba(40, 229, 139, 0.035);

    transform: translateY(-1px);
}

.global-search-icon {
    color: var(--color-primary-dark);
}

.global-search-placeholder {
    flex: 1;

    text-align: left;

    font-size: 13px;
}

.global-search-shortcut {
    padding: 4px 7px;

    color: var(--color-text-muted);

    background: rgba(20, 35, 30, 0.045);

    border: 1px solid var(--border-soft);

    border-radius: 7px;

    font-size: 10px;

    font-weight: 700;
}

.topbar-ai-status {
    height: 38px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    color: var(--color-primary-dark);

    background: rgba(40, 229, 139, 0.08);

    border: 1px solid rgba(40, 229, 139, 0.10);

    border-radius: 12px;

    font-size: 11px;

    font-weight: 700;
}

.topbar-ai-dot {
    width: 7px;
    height: 7px;

    background: var(--color-primary);

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(40, 229, 139, 0.7);

    animation: pronioPulse 2.2s infinite;
}

.topbar-action-button {
    height: 40px;

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

    gap: 8px;

    padding: 0 14px;

    border-radius: 12px;

    border: 0;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        filter var(--transition-normal);
}

.topbar-action-primary {
    color: #05150e;

    background:
        linear-gradient(
            135deg,
            #35ee96,
            #1dd17d
        );

    box-shadow:
        0 8px 22px rgba(40, 229, 139, 0.18);
}

.topbar-action-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 28px rgba(40, 229, 139, 0.27);

    filter: saturate(1.08);
}

.topbar-icon-button {
    width: 42px;
    height: 42px;

    position: relative;

    display: grid;
    place-items: center;

    color: var(--color-text-soft);

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid var(--border-soft);

    border-radius: 13px;

    cursor: pointer;

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal);
}

.topbar-icon-button:hover {
    color: var(--color-text);

    background: var(--color-white);

    transform: translateY(-1px);
}

.notification-indicator {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 7px;
    height: 7px;

    background: var(--color-primary);

    border: 2px solid var(--color-white);

    border-radius: 50%;
}

.topbar-profile {
    position: relative;
}

.topbar-profile-button {
    min-width: 170px;

    height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 5px 8px;

    background: transparent;

    border: 0;

    border-radius: 14px;

    cursor: pointer;

    transition: background var(--transition-normal);
}

.topbar-profile-button:hover {
    background: rgba(255, 255, 255, 0.65);
}

.topbar-avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--color-primary-dark);

    background:
        linear-gradient(
            145deg,
            rgba(40, 229, 139, 0.14),
            rgba(40, 229, 139, 0.045)
        );

    border: 1px solid rgba(40, 229, 139, 0.12);

    border-radius: 12px;
}

.topbar-profile-info {
    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    min-width: 0;
}

.topbar-profile-info strong {
    color: var(--color-text);

    font-size: 12px;

    font-weight: 700;
}

.topbar-profile-info span {
    margin-top: 1px;

    color: var(--color-text-muted);

    font-size: 10px;
}

.topbar-profile-chevron {
    color: var(--color-text-muted);

    font-size: 9px;
}

.topbar-profile-menu {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 220px;

    padding: 9px;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(18px);

    border: 1px solid var(--border-soft);

    border-radius: 17px;

    box-shadow: var(--shadow-md);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-6px) scale(0.98);

    transform-origin: top right;

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal),
        visibility var(--transition-normal);

    z-index: 1500;
}

.topbar-profile-menu.open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);
}

.profile-menu-header {
    display: flex;
    flex-direction: column;

    padding: 8px 10px;
}

.profile-menu-header strong {
    font-size: 13px;
}

.profile-menu-header span {
    margin-top: 2px;

    color: var(--color-text-muted);

    font-size: 11px;
}

.profile-menu-separator {
    height: 1px;

    margin: 6px 0;

    background: var(--border-soft);
}

.topbar-profile-menu a {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px;

    color: var(--color-text-soft);

    text-decoration: none;

    border-radius: 10px;

    font-size: 12px;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.topbar-profile-menu a:hover {
    color: var(--color-text);

    background: rgba(20, 40, 32, 0.045);
}

.topbar-profile-menu a i {
    width: 16px;
}

.topbar-profile-menu .profile-menu-danger {
    color: var(--color-danger);
}

.command-palette {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;
    justify-content: center;

    padding-top: 12vh;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}

.command-palette.open {
    opacity: 1;

    visibility: visible;
}

.command-palette-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(8, 17, 14, 0.24);

    backdrop-filter: blur(10px);
}

.command-palette-dialog {
    position: relative;

    width: min(620px, calc(100vw - 30px));

    max-height: 70vh;

    align-self: flex-start;

    background:
        rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 22px;

    box-shadow:
        0 35px 100px rgba(4, 17, 12, 0.22);

    overflow: hidden;

    transform:
        translateY(-12px)
        scale(0.975);

    transition:
        transform var(--transition-slow);
}

.command-palette.open .command-palette-dialog {
    transform:
        translateY(0)
        scale(1);
}

.command-palette-search {
    height: 64px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 0 18px;

    border-bottom: 1px solid var(--border-soft);
}

.command-palette-search > i {
    color: var(--color-primary-dark);
}

.command-palette-search input {
    flex: 1;

    height: 100%;

    color: var(--color-text);

    background: transparent;

    border: 0;

    outline: 0;

    font-size: 15px;
}

.command-palette-search input::placeholder {
    color: var(--color-text-muted);
}

.command-palette-search kbd {
    padding: 4px 7px;

    color: var(--color-text-muted);

    background: rgba(20, 35, 30, 0.045);

    border: 1px solid var(--border-soft);

    border-radius: 6px;

    font-size: 9px;
}

.command-palette-content {
    max-height: calc(70vh - 64px);

    padding: 12px;

    overflow-y: auto;
}

.command-section-title {
    padding: 7px 10px 9px;

    color: var(--color-text-muted);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}

.command-item {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 8px 10px;

    color: var(--color-text-soft);

    text-decoration: none;

    border-radius: 12px;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.command-item:hover {
    color: var(--color-text);

    background:
        linear-gradient(
            90deg,
            rgba(40, 229, 139, 0.10),
            rgba(40, 229, 139, 0.025)
        );

    transform: translateX(2px);
}

.command-item-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: var(--color-primary-dark);

    background: rgba(40, 229, 139, 0.08);

    border-radius: 10px;
}

body.command-palette-open {
    overflow: hidden;
}

/* ============================================================= */
/* GENERIC UI                                                     */
/* ============================================================= */

.app-card {
    position: relative;

    background: var(--color-surface);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, 0.72);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.app-card::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.40) 35%,
            transparent 65%
        );

    transform: translateX(-120%);

    transition: transform 700ms ease;
}

.app-card:hover {
    transform: translateY(-3px);

    border-color: rgba(40, 229, 139, 0.10);

    box-shadow: var(--shadow-md);
}

.app-card:hover::before {
    transform: translateX(120%);
}

.page-title {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(24px, 2.5vw, 34px);

    font-weight: 800;

    letter-spacing: -0.04em;
}

.page-subtitle {
    margin-top: 7px;

    color: var(--color-text-soft);

    font-size: 13px;
}

/* ================================================================ */
/* DASHBOARD - PRONIO DATA TERMINAL                                 */
/* ================================================================ */

.pronio-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* HEADER */

.pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.pd-header h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.pd-header p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.pd-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pd-date-button,
.pd-refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(17, 28, 23, 0.025);
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.pd-date-button:hover,
.pd-refresh-button:hover {
    border-color: rgba(40, 229, 139, 0.22);
    background: var(--color-surface-hover);
    transform: translateY(-1px);
}

/* KPI */

.pd-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pd-kpi {
    min-width: 0;
    padding: 16px 17px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-color);
    box-shadow: 0 6px 18px rgba(17, 28, 23, 0.025);
}

.pd-kpi-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 650;
}

.pd-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--background-color);
    font-size: 9px;
}

.pd-kpi-icon-green {
    color: #079456;
    background: rgba(33, 220, 129, 0.1);
}

.pd-kpi-icon-orange {
    color: #b67a00;
    background: rgba(242, 177, 44, 0.12);
}

.pd-kpi-icon-blue {
    color: #237bd2;
    background: rgba(47, 139, 225, 0.1);
}

.pd-kpi-value {
    display: block;
    margin-top: 12px;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
}

.pd-kpi-value small {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.pd-kpi-footer {
    min-height: 15px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 600;
}

.pd-positive {
    color: #079456 !important;
}

/* CONTENT */

.pd-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 14px;
}

/* PANELS */

.pd-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: var(--surface-color);
    box-shadow: 0 6px 20px rgba(17, 28, 23, 0.025);
}

.pd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
}

.pd-panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-panel-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    color: #078f54;
    background: rgba(34, 220, 130, 0.09);
    font-size: 9px;
}

.pd-panel-heading-icon.pd-orange {
    color: #b67800;
    background: rgba(241, 177, 40, 0.11);
}

.pd-panel-heading strong {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
}

.pd-panel-header > a,
.pd-panel-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #078f54;
    font-size: 8px;
    font-weight: 750;
    text-decoration: none;
}

.pd-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    border-top: 1px solid var(--border-color);
}

/* MATCH */

.pd-match {
    display: grid;
    grid-template-columns: 95px minmax(80px, 0.8fr) minmax(195px, 1.5fr) minmax(80px, 0.8fr) 51px 15px;
    align-items: center;
    gap: 12px;
    min-height: 91px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.pd-match:last-child {
    border-bottom: 0;
}

.pd-match:hover {
    background: #fbfdfc;
}

.pd-match-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-match-country {
    color: var(--text-muted);
    font-size: 7px;
}

.pd-match-league {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-match-time {
    margin-top: 7px;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 800;
}

.pd-match-team {
    display: block;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
}

.pd-team-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 37px;
    height: 37px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 850;
    margin: 0 auto;
}

.pd-team-logo img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.pd-match-team > strong {
    min-width: 0;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* MARKET */

.pd-match-market {
    min-width: 0;
}

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

.pd-market-option {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 6px;
    padding: 6px 8px 5px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fafcfb;
}

.pd-market-option.is-best {
    border-color: rgba(31, 220, 128, 0.12);
    background: rgba(31, 220, 128, 0.09);
}

.pd-market-option.is-best::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--primary-color);
}

.pd-market-option strong {
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 850;
}

.pd-market-option > span {
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 750;
}

.pd-market-option small {
    grid-column: 1 / -1;
    margin-top: 3px;
    color: var(--text-primary);
    font-size: 7px;
    font-weight: 700;
}

.pd-market-bookmaker {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 6px;
    text-align: center;
}

.pd-match-waiting {
    color: var(--text-muted);
    font-size: 8px;
    text-align: center;
}

/* PREDICTION */

.pd-match-prediction {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
    text-align: center;
}

.pd-match-prediction > span {
    color: var(--text-muted);
    font-size: 7px;
}

.pd-match-prediction > strong {
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.pd-match-prediction small {
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #078c51;
    background: rgba(31, 218, 128, 0.09);
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
}

.pd-match-prediction small.waiting {
    color: var(--text-muted);
    background: var(--background-color);
}

.pd-match-arrow {
    color: var(--text-muted);
    font-size: 8px;
}

/* RIGHT SIDEBAR */

.pd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* VALUES */

.pd-values {
    display: flex;
    flex-direction: column;
}

.pd-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 7px 10px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--border-color);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.pd-value:last-child {
    border-bottom: 0;
}

.pd-value:hover {
    background: #fbfdfc;
}

.pd-value-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pd-value-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: #ffffff;
    font-size: 9px;
    font-weight: 800;
}

.pd-value-logo img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.pd-value-team > div:last-child {
    min-width: 0;
}

.pd-value-team strong {
    display: block;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-value-team span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 7px;
}

.pd-value-ev {
    text-align: right;
}

.pd-value-ev strong {
    display: block;
    color: #079456;
    font-size: 10px;
    font-weight: 850;
}

.pd-value-ev span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 7px;
}

.pd-value-data {
    grid-column: 1 / -1;
    display: flex;
    gap: 15px;
    padding-left: 41px;
}

.pd-value-data span {
    color: var(--text-muted);
    font-size: 7px;
}

.pd-value-data strong {
    margin-left: 3px;
    color: var(--text-secondary);
    font-weight: 750;
}

/* SUMMARY */

.pd-summary {
    padding: 5px 13px;
}

.pd-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 36px;
    border-bottom: 1px solid var(--border-color);
}

.pd-summary-row:last-child {
    border-bottom: 0;
}

.pd-summary-row span {
    color: var(--text-secondary);
    font-size: 8px;
}

.pd-summary-row strong {
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 800;
}

/* EMPTY */

.pd-empty,
.pd-small-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    color: var(--text-muted);
    text-align: center;
}

.pd-empty i,
.pd-small-empty i {
    margin-bottom: 9px;
    font-size: 18px;
}

.pd-empty strong,
.pd-small-empty strong {
    color: var(--text-primary);
    font-size: 10px;
}

.pd-empty span,
.pd-small-empty span {
    margin-top: 4px;
    font-size: 8px;
}


/* ==========================================================
   PRONOSTIC PRINCIPAL - COTES 1X2
   ========================================================== */

.match-detail-prediction {
    display: flex;
    align-items: center;
    gap: 18px;
}

.match-detail-prediction-main {
    min-width: 0;
}

.match-detail-prediction-main > span {
    display: block;
    margin-bottom: 4px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    opacity: 0.65;
}

.match-detail-prediction-main > strong {
    display: block;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================
   COTES
   ========================================================== */

.match-detail-prediction-odds {
    display: grid;
    grid-template-columns: repeat(3, minmax(64px, 1fr));
    gap: 8px;

    margin-left: auto;
}


/* ==========================================================
   COTE
   ========================================================== */

.match-detail-prediction-odd {
    position: relative;

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

    min-width: 68px;
    min-height: 54px;

    padding: 7px 12px;

    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.match-detail-prediction-odd > span {
    display: block;

    margin-bottom: 2px;

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

    text-transform: uppercase;

    opacity: 0.55;
}

.match-detail-prediction-odd > strong {
    display: block;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}


/* ==========================================================
   SÉLECTION PRONIO
   ========================================================== */

.match-detail-prediction-odd.selected {
    border-color: var(--primary, #00d084);

    background: rgba(0, 208, 132, 0.12);
}

.match-detail-prediction-odd.selected > span {
    color: var(--primary, #00d084);
    opacity: 1;
}

.match-detail-prediction-odd.selected > strong {
    color: var(--primary, #00d084);
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1024px) {

    .match-detail-prediction {
        gap: 14px;
    }

    .match-detail-prediction-odds {
        grid-template-columns: repeat(3, 62px);
        gap: 6px;
    }

    .match-detail-prediction-odd {
        min-width: 0;
        min-height: 50px;

        padding: 6px 8px;
    }

    .match-detail-prediction-odd > strong {
        font-size: 14px;
    }

}


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

@media (max-width: 768px) {

    .match-detail-prediction {
        display: grid;
        grid-template-columns: auto 1fr;

        gap: 12px;

        align-items: center;
    }


    /* Icône */

    .match-detail-prediction-icon {
        grid-column: 1;
        grid-row: 1;

        align-self: center;
    }


    /* Pronostic */

    .match-detail-prediction-main {
        grid-column: 2;
        grid-row: 1;

        min-width: 0;
    }

    .match-detail-prediction-main > strong {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;

        font-size: 15px;
    }


    /* Les 3 cotes passent sous le pronostic */

    .match-detail-prediction-odds {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        margin: 2px 0 0;

        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .match-detail-prediction-odd {
        width: 100%;
        min-width: 0;
        min-height: 52px;

        padding: 7px 6px;

        border-radius: 9px;
    }

    .match-detail-prediction-odd > span {
        font-size: 10px;
    }

    .match-detail-prediction-odd > strong {
        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .match-detail-prediction {
        gap: 10px;
    }

    .match-detail-prediction-odds {
        gap: 5px;
    }

    .match-detail-prediction-odd {
        min-height: 48px;

        padding: 6px 4px;

        border-radius: 8px;
    }

    .match-detail-prediction-odd > span {
        margin-bottom: 3px;

        font-size: 9px;
    }

    .match-detail-prediction-odd > strong {
        font-size: 13px;
    }

}


/* ==========================================================
   TRÈS PETIT ÉCRAN
   ========================================================== */

@media (max-width: 360px) {

    .match-detail-prediction {
        grid-template-columns: 1fr;
    }

    .match-detail-prediction-icon {
        display: none;
    }

    .match-detail-prediction-main {
        grid-column: 1;
        grid-row: 1;
    }

    .match-detail-prediction-odds {
        grid-column: 1;
        grid-row: 2;
    }

}

/* ==========================================================
   MATCHS DU JOUR - RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

    /* ======================================================
       CONTENEUR
       ====================================================== */

    .pd-match-list {
        width: 100%;
        overflow: hidden;
    }


    /* ======================================================
       MATCH
       ====================================================== */

    .pd-match {
        position: relative;

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

        grid-template-areas:
            "info info info"
            "home prediction away"
            "market market market";

        width: 100%;
        min-width: 0;

        padding: 14px 12px 16px;

        gap: 12px 8px;

        box-sizing: border-box;
    }


    /* ======================================================
       INFOS MATCH
       ====================================================== */

    .pd-match-info {
        grid-area: info;

        display: flex;
        flex-direction: row;
        align-items: center;

        width: 100%;
        min-width: 0;

        gap: 7px;
    }

    .pd-match-country {
        display: none;
    }

    .pd-match-league {
        min-width: 0;

        font-size: 11px;
        font-weight: 600;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pd-match-time {
        margin-left: auto;

        flex-shrink: 0;

        font-size: 12px;
        font-weight: 800;
    }


    /* ======================================================
       ÉQUIPES
       ====================================================== */

    .pd-match-team {
        display: flex;
        flex-direction: column;

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

        min-width: 0;

        text-align: center;

        gap: 6px;
    }

    .pd-match-team:nth-of-type(2) {
        grid-area: home;
    }

    .pd-match-team:nth-of-type(4) {
        grid-area: away;
    }

    .pd-team-logo {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        flex: 0 0 48px;
    }

    .pd-team-logo img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    .pd-match-team > strong {
        display: -webkit-box;

        width: 100%;

        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;

        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


    /* ======================================================
       SCORE ESTIMÉ
       ====================================================== */

    .pd-match-prediction {
        grid-area: prediction;

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

        min-width: 55px;

        text-align: center;
    }

    .pd-match-prediction > span {
        display: none;
    }

    .pd-match-prediction > strong {
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }

    .pd-match-prediction > small {
        margin-top: 5px;

        font-size: 9px;
        font-weight: 600;

        opacity: .55;
    }


    /* ======================================================
       MARCHÉ 1 / X / 2
       ====================================================== */

    .pd-match-market {
        grid-area: market;

        width: 100%;
        min-width: 0;
    }

    .pd-market-grid {
        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        width: 100%;

        gap: 6px;
    }

    .pd-market-option {
        position: relative;

        display: grid;

        grid-template-columns: 1fr auto;
        grid-template-areas:
            "prob side"
            "odd odd";

        min-width: 0;

        padding: 8px 10px;

        border-radius: 10px;

        box-sizing: border-box;
    }

    .pd-market-option > strong {
        grid-area: prob;

        font-size: 13px;
        font-weight: 800;
    }

    .pd-market-option > span {
        grid-area: side;

        font-size: 10px;
        font-weight: 800;

        opacity: .55;
    }

    .pd-market-option > small {
        grid-area: odd;

        margin-top: 4px;

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


    /* ======================================================
       MEILLEURE SÉLECTION
       ====================================================== */

    .pd-market-option.is-best {
        border-bottom-width: 3px;
    }


    /* ======================================================
       BOOKMAKER
       ====================================================== */

    .pd-market-bookmaker {
        margin-top: 5px;

        text-align: right;

        font-size: 9px;

        opacity: .5;
    }


    /* ======================================================
       FLÈCHE
       ====================================================== */

    .pd-match-arrow {
        display: none;
    }

}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media (max-width: 420px) {

    .pd-match {
        padding:
            12px
            10px
            14px;

        gap: 10px 6px;
    }

    .pd-team-logo {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .pd-match-team > strong {
        font-size: 10px;
    }

    .pd-match-prediction {
        min-width: 48px;
    }

    .pd-match-prediction > strong {
        font-size: 16px;
    }

    .pd-market-grid {
        gap: 4px;
    }

    .pd-market-option {
        padding:
            7px
            8px;
    }

    .pd-market-option > strong {
        font-size: 12px;
    }

    .pd-market-option > small {
        font-size: 10px;
    }

}

/* ============================================================= */
/* LEAGUES                                                        */
/* ============================================================= */

.leagues-page {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

/* HEADER */

.leagues-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.leagues-eyebrow {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--color-primary-dark);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.leagues-eyebrow-dot {
    width: 7px;
    height: 7px;

    background: var(--color-primary);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(40, 229, 139, 0.08),
        0 0 14px rgba(40, 229, 139, 0.45);
}

.leagues-title {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(28px, 3vw, 38px);

    font-weight: 850;

    letter-spacing: -0.045em;
}

.leagues-subtitle {
    max-width: 650px;

    margin: 7px 0 0;

    color: var(--color-text-soft);

    font-size: 13px;

    line-height: 1.6;
}

.leagues-header-actions {
    flex-shrink: 0;
}

.leagues-count-card {
    min-width: 120px;

    padding: 14px 18px;

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

    gap: 5px;

    background:
        rgba(255, 255, 255, 0.75);

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(12, 34, 25, 0.05);
}

.leagues-count-card span {
    color: var(--color-text-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.07em;

    font-weight: 800;
}

.leagues-count-card strong {
    color: var(--color-text);

    font-size: 23px;

    font-weight: 850;
}

.leagues-count-card small {
    color: var(--color-text-muted);

    font-size: 10px;
}

/* TOOLBAR */

.leagues-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(12, 34, 25, 0.045);
}

.leagues-search {
    flex: 1;

    max-width: 500px;

    height: 44px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    background:
        rgba(248, 250, 249, 0.95);

    border:
        1px solid var(--border-soft);

    border-radius: 13px;

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal);
}

.leagues-search:focus-within {
    background: #fff;

    border-color:
        rgba(40, 229, 139, 0.24);

    box-shadow:
        0 0 0 4px rgba(40, 229, 139, 0.05);
}

.leagues-search i {
    color: var(--color-primary-dark);

    font-size: 12px;
}

.leagues-search input {
    width: 100%;

    height: 100%;

    color: var(--color-text);

    background: transparent;

    border: 0;

    outline: 0;

    font-size: 12px;
}

.leagues-search input::placeholder {
    color: var(--color-text-muted);
}

.leagues-toolbar-actions {
    display: flex;

    gap: 7px;
}

.leagues-filter-button {
    height: 38px;

    padding: 0 13px;

    color: var(--color-text-soft);

    background: transparent;

    border: 1px solid transparent;

    border-radius: 11px;

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

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.leagues-filter-button:hover {
    color: var(--color-text);

    background:
        rgba(20, 40, 32, 0.035);
}

.leagues-filter-button.active {
    color: var(--color-primary-dark);

    background:
        rgba(40, 229, 139, 0.09);

    border-color:
        rgba(40, 229, 139, 0.10);
}

/* PANEL */

.leagues-panel {
    position: relative;

    background:
        rgba(255, 255, 255, 0.76);

    border:
        1px solid rgba(255, 255, 255, 0.82);

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(12, 34, 25, 0.055);

    overflow: hidden;
}

.leagues-table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.leagues-table {
    width: 100%;

    border-collapse: collapse;
}

.leagues-table thead {
    background:
        rgba(17, 37, 29, 0.025);
}

.leagues-table th {
    padding: 15px 18px;

    color: var(--color-text-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-align: left;

    text-transform: uppercase;

    border-bottom:
        1px solid var(--border-soft);
}

.leagues-table td {
    padding: 14px 18px;

    border-bottom:
        1px solid rgba(17, 37, 29, 0.055);

    vertical-align: middle;
}

.leagues-table tbody tr {
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.leagues-table tbody tr:hover {
    background:
        rgba(40, 229, 139, 0.025);
}

.leagues-table tbody tr:last-child td {
    border-bottom: 0;
}

/* NAME */

.league-name-cell {
    display: flex;
    align-items: center;

    gap: 11px;
}

.league-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--color-primary-dark);

    background:
        rgba(40, 229, 139, 0.08);

    border-radius: 11px;
}

.league-name-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.league-name-content strong {
    color: var(--color-text);

    font-size: 12px;

    font-weight: 750;
}

.league-name-content span {
    margin-top: 2px;

    color: var(--color-text-muted);

    font-size: 9px;
}

/* SLUG */

.league-slug {
    display: inline-block;

    max-width: 400px;

    padding: 5px 8px;

    color: var(--color-text-soft);

    background:
        rgba(17, 37, 29, 0.04);

    border-radius: 7px;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 9px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

/* SPORT */

.league-sport-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    color: var(--color-text-soft);

    background:
        rgba(17, 37, 29, 0.035);

    border-radius: 999px;

    font-size: 9px;

    font-weight: 700;

    text-transform: capitalize;
}

.league-sport-badge i {
    color: var(--color-primary-dark);
}

/* STATUS */

.leagues-table-status-column {
    width: 180px;
}

.league-status {
    display: flex;
    align-items: center;

    gap: 10px;
}

.league-status-label {
    color: var(--color-text-muted);

    font-size: 10px;

    font-weight: 700;

    transition: color var(--transition-fast);
}

.league-status-label.is-enabled {
    color: var(--color-primary-dark);
}

/* SWITCH */

.pronio-switch {
    position: relative;

    display: inline-flex;

    cursor: pointer;
}

.pronio-switch input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.pronio-switch-track {
    width: 42px;
    height: 24px;

    position: relative;

    display: block;

    background:
        rgba(18, 38, 30, 0.11);

    border:
        1px solid rgba(18, 38, 30, 0.07);

    border-radius: 999px;

    transition:
        background var(--transition-normal),
        box-shadow var(--transition-normal);
}

.pronio-switch-thumb {
    position: absolute;

    width: 18px;
    height: 18px;

    left: 2px;
    top: 2px;

    background: #fff;

    border-radius: 50%;

    box-shadow:
        0 2px 6px rgba(10, 25, 19, 0.18);

    transition:
        transform var(--transition-normal);
}

.pronio-switch input:checked + .pronio-switch-track {
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    box-shadow:
        0 0 0 4px rgba(40, 229, 139, 0.06),
        0 4px 15px rgba(40, 229, 139, 0.15);
}

.pronio-switch input:checked
+ .pronio-switch-track
.pronio-switch-thumb {
    transform: translateX(18px);
}

/* EMPTY */

.leagues-empty,
.leagues-no-result {
    min-height: 300px;

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

    padding: 30px;

    text-align: center;
}

.leagues-empty-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    margin-bottom: 15px;

    color: var(--color-primary-dark);

    background:
        rgba(40, 229, 139, 0.09);

    border-radius: 18px;

    font-size: 20px;
}

.leagues-empty h3,
.leagues-no-result strong {
    margin: 0;

    color: var(--color-text);

    font-size: 14px;

    font-weight: 800;
}

.leagues-empty p,
.leagues-no-result span {
    max-width: 400px;

    margin: 7px 0 0;

    color: var(--color-text-muted);

    font-size: 11px;

    line-height: 1.6;
}

.leagues-no-result {
    display: none;
}

.leagues-no-result i {
    margin-bottom: 12px;

    color: var(--color-primary-dark);

    font-size: 22px;
}

/* ================================================================ */
/* MATCHES PAGE                                                     */
/* ================================================================ */

.matches-page {
    display: flex;
    flex-direction: column;
    gap: 18px;

    width: 100%;
}


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

.matches-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}

.matches-header-content {
    min-width: 0;
}

.matches-header-content h1 {
    margin: 0;

    color: var(--color-text);

    font-size: 28px;
    font-weight: 850;

    line-height: 1.1;
    letter-spacing: -0.04em;
}

.matches-header-content p {
    margin: 6px 0 0;

    color: var(--color-text-soft);

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

.matches-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.matches-date-badge,
.matches-refresh-button {
    min-height: 36px;

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

    gap: 7px;

    padding: 0 11px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

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

.matches-date-badge {
    color: var(--color-text-soft);

    background: var(--color-surface);
}

.matches-refresh-button {
    color: var(--color-text);

    background: var(--color-surface);

    text-decoration: none;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.matches-refresh-button:hover {
    color: var(--color-primary-dark);

    border-color: rgba(40, 229, 139, 0.2);

    background: var(--color-primary-soft);
}

.matches-date-badge svg,
.matches-refresh-button svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;
}


/* ================================================================ */
/* DATE NAVIGATION                                                  */
/* ================================================================ */

.matches-date-navigation {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 52px;

    padding: 8px 9px;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);
}

.matches-date-arrow {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    color: var(--color-text-soft);

    background: var(--color-bg);

    font-size: 18px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.matches-date-arrow:hover {
    color: var(--color-primary-dark);

    border-color: rgba(40, 229, 139, 0.22);

    background: var(--color-primary-soft);
}

.matches-date-arrow:first-child:hover {
    transform: translateX(-1px);
}

.matches-date-arrow:nth-of-type(2):hover {
    transform: translateX(1px);
}

.matches-current-date {
    min-width: 110px;

    display: flex;
    flex-direction: column;

    gap: 1px;

    margin-right: 3px;
}

.matches-current-date span {
    color: var(--color-text-muted);

    font-size: 8px;
    font-weight: 600;
}

.matches-current-date strong {
    color: var(--color-text);

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

.matches-date-form {
    position: relative;

    margin: 0;
}

.matches-date-form input {
    height: 34px;

    padding: 0 9px;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    outline: none;

    color: var(--color-text);

    background: var(--color-bg);

    font-family: inherit;
    font-size: 9px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.matches-date-form input:hover {
    border-color: var(--border-medium);
}

.matches-date-form input:focus {
    border-color: rgba(40, 229, 139, 0.3);

    background: var(--color-surface);

    box-shadow:
        0 0 0 3px
        rgba(40, 229, 139, 0.06);
}

.matches-today {
    min-height: 34px;

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

    margin-left: auto;

    padding: 0 12px;

    border: 1px solid rgba(40, 229, 139, 0.16);
    border-radius: 8px;

    color: var(--color-primary-dark);

    background: var(--color-primary-soft);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

a.matches-today:hover {
    border-color: rgba(40, 229, 139, 0.28);

    background: rgba(40, 229, 139, 0.16);
}

.matches-today.current {
    cursor: default;

    opacity: 0.7;
}


/* ================================================================ */
/* FILTER CARD                                                      */
/* ================================================================ */

.matches-filter-card {
    padding: 10px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);
}

.matches-filters {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(170px, 0.65fr)
        minmax(150px, 0.55fr)
        minmax(170px, 0.6fr)
        auto
        auto;

    align-items: center;

    gap: 8px;
}


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

.matches-filter-search {
    position: relative;

    height: 40px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 12px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    background: var(--color-bg);

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.matches-filter-search:focus-within {
    border-color: rgba(40, 229, 139, 0.28);

    background: var(--color-surface);

    box-shadow:
        0 0 0 3px
        rgba(40, 229, 139, 0.06);
}

.matches-filter-search svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    color: var(--color-text-muted);
}

.matches-filter-search input {
    width: 100%;
    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

    color: var(--color-text);

    background: transparent;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
}

.matches-filter-search input::placeholder {
    color: var(--color-text-muted);

    font-weight: 500;
}


/* ================================================================ */
/* SELECT FILTERS                                                   */
/* ================================================================ */

.matches-filter-field {
    position: relative;

    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding-left: 12px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    background: var(--color-bg);

    overflow: hidden;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.matches-filter-field:focus-within {
    border-color: rgba(40, 229, 139, 0.28);

    background: var(--color-surface);

    box-shadow:
        0 0 0 3px
        rgba(40, 229, 139, 0.06);
}

.matches-filter-field > svg {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    color: var(--color-text-muted);

    pointer-events: none;
}

.matches-filter-field::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 14px;

    width: 6px;
    height: 6px;

    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);

    pointer-events: none;

    transform:
        translateY(-70%)
        rotate(45deg);
}

.matches-filter-field select {
    width: 100%;
    height: 40px;

    min-width: 0;

    padding: 0 36px 0 0;

    border: 0;
    outline: 0;

    color: var(--color-text);

    background: transparent;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* ================================================================ */
/* FILTER BUTTON                                                    */
/* ================================================================ */

.matches-filter-submit {
    height: 40px;

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

    gap: 7px;

    padding: 0 14px;

    border: 1px solid var(--color-primary);
    border-radius: 9px;

    color: #07150f;

    background: var(--color-primary);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.matches-filter-submit:hover {
    border-color: var(--color-primary-dark);

    background: var(--color-primary-dark);

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px
        rgba(40, 229, 139, 0.14);
}

.matches-filter-submit svg {
    width: 13px;
    height: 13px;
}


/* ================================================================ */
/* FILTER RESET                                                     */
/* ================================================================ */

.matches-filter-reset {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    color: var(--color-text-muted);

    background: var(--color-bg);

    text-decoration: none;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.matches-filter-reset:hover {
    color: var(--color-danger);

    border-color: rgba(229, 87, 87, 0.16);

    background: var(--color-danger-soft);
}

.matches-filter-reset svg {
    width: 14px;
    height: 14px;
}


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

.matches-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 2px;
}

.matches-result-header > div {
    display: flex;
    align-items: center;

    gap: 7px;
}

.matches-result-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 0 4px
        rgba(40, 229, 139, 0.08);
}

.matches-result-header strong {
    color: var(--color-text);

    font-size: 10px;
    font-weight: 800;
}

.matches-result-header > span {
    color: var(--color-text-muted);

    font-size: 8px;
    font-weight: 600;
}


/* ================================================================ */
/* MATCH LIST                                                       */
/* ================================================================ */

.matches-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


/* ================================================================ */
/* MATCH ROW                                                        */
/* ================================================================ */

.match-row-card {
    position: relative;

    display: grid;

    grid-template-columns:
        105px
        minmax(135px, 0.8fr)
        minmax(240px, 1.35fr)
        minmax(135px, 0.8fr)
        115px
        120px
        18px;

    align-items: center;

    gap: 12px;

    min-height: 92px;

    padding: 11px 13px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    color: inherit;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);

    text-decoration: none;

    overflow: hidden;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.match-row-card:hover {
    border-color: rgba(18, 40, 32, 0.13);

    background: var(--color-surface-hover);

    box-shadow: var(--shadow-sm);

    transform: translateY(-1px);
}

.match-row-card.has-value {
    border-color: rgba(40, 229, 139, 0.16);
}

.match-row-card.has-value::before {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    left: 0;

    width: 2px;

    border-radius: 0 3px 3px 0;

    background: var(--color-primary);
}


/* ================================================================ */
/* MATCH META                                                       */
/* ================================================================ */

.match-row-meta {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.match-row-competition {
    min-width: 0;
}

.match-row-competition strong {
    display: block;

    overflow: hidden;

    color: var(--color-text-soft);

    font-size: 8px;
    font-weight: 700;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-row-meta time {
    color: var(--color-text);

    font-size: 15px;
    font-weight: 850;

    line-height: 1;
}


/* ================================================================ */
/* TEAMS                                                            */
/* ================================================================ */

.match-row-team {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}

.match-row-team-away {
    flex-direction: row-reverse;

    text-align: right;
}

.match-row-team-logo {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    background: #ffffff;

    overflow: hidden;
}

.match-row-team-logo img {
    width: 25px;
    height: 25px;

    object-fit: contain;
}

.match-row-team-logo span {
    color: var(--color-text-soft);

    font-size: 10px;
    font-weight: 850;
}

.match-row-team > strong {
    min-width: 0;

    overflow: hidden;

    color: var(--color-text);

    font-size: 11px;
    font-weight: 750;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================ */
/* MARKET                                                           */
/* ================================================================ */

.match-row-market {
    min-width: 0;
}

.match-row-market-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;
}

.match-row-market-option {
    min-width: 0;

    display: grid;

    grid-template-columns:
        1fr auto;

    grid-template-areas:
        "prob prob"
        "side odd";

    align-items: center;

    gap: 2px 5px;

    padding: 6px 7px;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    background: var(--color-bg);

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.match-row-market-option.is-best {
    border-color: rgba(40, 229, 139, 0.2);

    background:
        linear-gradient(
            145deg,
            rgba(40, 229, 139, 0.08),
            rgba(255, 255, 255, 0)
        ),
        var(--color-bg);
}

.match-market-probability {
    grid-area: prob;

    color: var(--color-text);

    font-size: 12px;
    font-weight: 850;

    line-height: 1.1;
}

.match-row-market-option.is-best
.match-market-probability {
    color: var(--color-primary-dark);
}

.match-row-market-option > span {
    grid-area: side;

    color: var(--color-text-muted);

    font-size: 7px;
    font-weight: 800;
}

.match-row-market-option > small {
    grid-area: odd;

    color: var(--color-text-soft);

    font-size: 8px;
    font-weight: 750;
}

.match-row-bookmaker {
    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 6px;
    font-weight: 600;

    text-align: center;
}


/* ================================================================ */
/* NO ANALYSIS                                                      */
/* ================================================================ */

.match-row-no-analysis {
    min-height: 47px;

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

    gap: 6px;

    border: 1px dashed var(--border-medium);
    border-radius: 8px;

    color: var(--color-text-muted);

    background: var(--color-bg);

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

.match-row-no-analysis svg {
    width: 13px;
    height: 13px;
}


/* ================================================================ */
/* PREDICTION                                                       */
/* ================================================================ */

.match-row-prediction {
    align-self: stretch;

    min-width: 150px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border-left: 2px solid var(--border-soft);

    background: #fafbfb;
}

.match-row-score {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.match-row-score span {
    color: var(--color-text-muted);

    font-size: 6px;
    font-weight: 600;
}

.match-row-score strong {
    color: var(--color-text);

    font-size: 15px;
    font-weight: 900;

    letter-spacing: -0.03em;
}

.match-row-analysis-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 5px;
}

.match-status-badge {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    width: fit-content;

    color: var(--color-primary-dark);

    font-size: 6px;
    font-weight: 800;
}

.match-status-dot {
    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-primary);
}

.match-row-analysis-status small {
    color: var(--color-text-soft);

    font-size: 7px;
    font-weight: 800;
}

.match-status-badge.pending {
    gap: 5px;

    color: var(--color-text-muted);
}

.match-status-badge.pending svg {
    width: 12px;
    height: 12px;
}


/* ================================================================ */
/* VALUE BET                                                        */
/* ================================================================ */

.match-row-value {
    min-width: 0;
}

.match-value-content {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 7px 8px;

    border: 1px solid rgba(40, 229, 139, 0.14);
    border-radius: 8px;

    background: var(--color-primary-soft);
}

.match-value-content > span {
    display: flex;
    align-items: center;

    gap: 4px;

    color: var(--color-primary-dark);

    font-size: 6px;
    font-weight: 850;
}

.match-value-content > span svg {
    width: 10px;
    height: 10px;
}

.match-value-content > strong {
    color: var(--color-primary-deep);

    font-size: 13px;
    font-weight: 900;

    line-height: 1.1;
}

.match-value-content > small {
    overflow: hidden;

    color: var(--color-text-soft);

    font-size: 6px;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-value-empty {
    display: block;

    color: var(--color-text-muted);

    font-size: 13px;

    text-align: center;
}


/* ================================================================ */
/* ARROW                                                            */
/* ================================================================ */

.match-row-arrow {
    display: grid;
    place-items: center;

    color: var(--color-text-muted);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.match-row-arrow svg {
    width: 14px;
    height: 14px;
}

.match-row-card:hover
.match-row-arrow {
    color: var(--color-primary-dark);

    transform: translateX(2px);
}


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

.matches-empty-state {
    min-height: 280px;

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

    padding: 40px 20px;

    border: 1px dashed var(--border-medium);
    border-radius: 14px;

    background: var(--color-surface);

    text-align: center;
}

.matches-empty-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 13px;

    border: 1px solid rgba(40, 229, 139, 0.12);
    border-radius: 14px;

    color: var(--color-primary-dark);

    background: var(--color-primary-soft);
}

.matches-empty-icon svg {
    width: 24px;
    height: 24px;
}

.matches-empty-state h3 {
    margin: 0;

    color: var(--color-text);

    font-size: 15px;
    font-weight: 850;
}

.matches-empty-state p {
    max-width: 380px;

    margin: 7px 0 0;

    color: var(--color-text-soft);

    font-size: 9px;

    line-height: 1.55;
}

.matches-empty-reset {
    min-height: 36px;

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

    gap: 6px;

    margin-top: 15px;

    padding: 0 12px;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    color: var(--color-text);

    background: var(--color-bg);

    font-size: 8px;
    font-weight: 750;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.matches-empty-reset:hover {
    color: var(--color-primary-dark);

    border-color: rgba(40, 229, 139, 0.2);

    background: var(--color-primary-soft);
}

.matches-empty-reset svg {
    width: 12px;
    height: 12px;
}


/* ================================================================ */
/* RESPONSIVE - 1400                                                */
/* ================================================================ */

@media (max-width: 1400px) {

    .match-row-card {
        grid-template-columns:
            95px
            minmax(120px, 0.75fr)
            minmax(220px, 1.25fr)
            minmax(120px, 0.75fr)
            105px
            110px
            16px;

        gap: 9px;
    }
}


/* ================================================================ */
/* RESPONSIVE - 1200                                                */
/* ================================================================ */

@media (max-width: 1200px) {

    .matches-filters {
        grid-template-columns:
            minmax(200px, 1fr)
            minmax(150px, 0.7fr)
            minmax(140px, 0.65fr)
            minmax(150px, 0.7fr)
            auto
            auto;
    }

    .match-row-card {
        grid-template-columns:
            85px
            minmax(115px, 0.8fr)
            minmax(205px, 1.3fr)
            minmax(115px, 0.8fr)
            95px
            16px;
    }

    .match-row-value {
        display: none;
    }
}


/* ================================================================ */
/* RESPONSIVE - 1000                                                */
/* ================================================================ */

@media (max-width: 1000px) {

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

    .matches-filter-submit {
        width: 100%;
    }

    .matches-filter-reset {
        width: 100%;
    }

    .match-row-card {
        grid-template-columns:
            75px
            minmax(110px, 0.8fr)
            minmax(200px, 1.4fr)
            minmax(110px, 0.8fr)
            16px;
    }

    .match-row-prediction {
        display: none;
    }
}


/* ================================================================ */
/* RESPONSIVE - 820                                                 */
/* ================================================================ */

@media (max-width: 820px) {

    .matches-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .matches-header-actions {
        width: 100%;
    }

    .matches-date-badge,
    .matches-refresh-button {
        flex: 1;
    }

    .matches-date-navigation {
        flex-wrap: wrap;
    }

    .matches-current-date {
        flex: 1;
    }

    .match-row-card {
        grid-template-columns:
            65px
            minmax(100px, 1fr)
            minmax(170px, 1.3fr)
            minmax(100px, 1fr)
            14px;

        padding: 10px;

        gap: 7px;
    }

    .match-row-team-logo {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

    .match-row-team-logo img {
        width: 22px;
        height: 22px;
    }

    .match-row-team > strong {
        font-size: 9px;
    }

    .match-row-market-option {
        padding: 5px;
    }

    .match-market-probability {
        font-size: 10px;
    }
}


/* ================================================================ */
/* RESPONSIVE - 700                                                 */
/* ================================================================ */

@media (max-width: 700px) {

    .matches-result-header > span {
        display: none;
    }

    .match-row-card {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            minmax(0, 1fr)
            14px;

        min-height: 76px;
    }

    .match-row-market {
        display: none;
    }

    .match-row-team {
        gap: 6px;
    }
}


/* ================================================================ */
/* RESPONSIVE - 575                                                 */
/* ================================================================ */

@media (max-width: 575px) {

    .matches-page {
        gap: 14px;
    }

    .matches-header-content h1 {
        font-size: 23px;
    }

    .matches-header-actions {
        flex-direction: column;
    }

    .matches-date-badge,
    .matches-refresh-button {
        width: 100%;
    }

    .matches-date-navigation {
        gap: 6px;
    }

    .matches-current-date {
        min-width: 0;
    }

    .matches-date-form {
        flex: 1;
    }

    .matches-date-form input {
        width: 100%;
    }

    .matches-today {
        width: 100%;

        margin-left: 0;
    }

    .matches-filters {
        grid-template-columns: 1fr;
    }

    .matches-filter-reset {
        width: 100%;
    }

    .match-row-card {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            minmax(0, 1fr)
            12px;

        gap: 6px;

        min-height: 72px;

        padding: 9px 8px;
    }

    .match-row-meta time {
        font-size: 13px;
    }

    .match-row-competition strong {
        font-size: 6px;
    }

    .match-row-team-logo {
        width: 27px;
        height: 27px;

        flex-basis: 27px;

        border-radius: 7px;
    }

    .match-row-team-logo img {
        width: 20px;
        height: 20px;
    }

    .match-row-team > strong {
        font-size: 8px;
    }

    .match-row-arrow svg {
        width: 11px;
        height: 11px;
    }

    .matches-empty-state {
        min-height: 230px;
    }
}

/* ================================================================ */
/* PRONIO + VALUE BET                                               */
/* ================================================================ */

.match-row-prediction {
    align-self: stretch;

    min-width: 150px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border-left: 2px solid var(--border-soft);

    background: #fafbfb;
}


/* ================================================================ */
/* PRONIO RESULT                                                    */
/* ================================================================ */

.prediction-result-box {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}


.prediction-result-title {
    color: #94a3b8;

    font-size: 7px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: .10em;
    text-transform: uppercase;
}


.prediction-result-scores {
    display: flex;
    align-items: flex-end;

    gap: 7px;
}


.prediction-result-score {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.prediction-result-score span {
    color: #94a3b8;

    font-size: 6px;
    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;
}


.prediction-result-score strong {
    color: #0f172a;

    font-size: 16px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -.03em;
}


.prediction-result-arrow {
    padding-bottom: 1px;

    color: #94a3b8;

    font-size: 11px;
}


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

.prediction-result-status {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    width: fit-content;

    font-size: 7px;
    font-weight: 850;

    line-height: 1;
}


.prediction-result-status svg {
    width: 9px;
    height: 9px;
}


.prediction-result-status.is-won {
    color: #059669;
}


.prediction-result-status.is-lost {
    color: #dc2626;
}


.prediction-result-status.pending {
    color: #64748b;
}


.prediction-result-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-primary);
}


/* ================================================================ */
/* PRONIO STATE                                                     */
/* ================================================================ */

.match-row-prediction.is-won {
    border-left-color: #10b981;

    background:
        linear-gradient(
            90deg,
            rgba(16, 185, 129, .055),
            rgba(16, 185, 129, .015)
        );
}


.match-row-prediction.is-lost {
    border-left-color: #ef4444;

    background:
        linear-gradient(
            90deg,
            rgba(239, 68, 68, .05),
            rgba(239, 68, 68, .012)
        );
}


.match-row-prediction.is-won
.prediction-result-score strong {
    color: #047857;
}


.match-row-prediction.is-lost
.prediction-result-score strong {
    color: #dc2626;
}


/* ================================================================ */
/* VALUE BET                                                        */
/* ================================================================ */

.match-row-value {
    align-self: stretch;

    min-width: 125px;

    display: flex;
    align-items: center;

    padding: 0 13px;

    border-left: 1px solid #e5e7eb;

    background: #fafbfb;
}


.match-value-content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}


.match-value-content > span {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #059669;

    font-size: 6px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: .03em;
    text-transform: uppercase;
}


.match-value-content > span svg {
    width: 9px;
    height: 9px;
}


.match-value-content > strong {
    color: #047857;

    font-size: 15px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -.02em;
}


.match-value-content > small {
    display: block;

    max-width: 105px;

    overflow: hidden;

    color: #64748b;

    font-size: 6px;
    font-weight: 650;

    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.match-value-empty {
    width: 100%;

    color: #cbd5e1;

    font-size: 11px;

    text-align: center;
}


.match-row-card {
    grid-template-columns:
        105px
        minmax(135px, .8fr)
        minmax(240px, 1.35fr)
        minmax(135px, .8fr)
        150px
        125px
        18px;
}

/* ================================================================ */
/* MATCH DETAIL                                                     */
/* ================================================================ */

.match-detail-page {
    display: flex;
    flex-direction: column;

    gap: 18px;

    width: 100%;
}


/* ================================================================ */
/* BACK                                                             */
/* ================================================================ */

.match-detail-back {
    display: flex;
}

.match-detail-back-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 34px;

    color: var(--color-text-soft);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.match-detail-back-link svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;
}

.match-detail-back-link:hover {
    color: var(--color-primary-dark);

    transform: translateX(-2px);
}


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

.match-detail-hero {
    position: relative;

    padding: 22px 26px;

    border: 1px solid var(--border-soft);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% -30%,
            rgba(40, 229, 139, 0.09),
            transparent 45%
        ),
        var(--color-surface);

    box-shadow: var(--shadow-xs);

    overflow: hidden;
}

.match-detail-hero-glow {
    position: absolute;

    top: -130px;
    left: 50%;

    width: 360px;
    height: 220px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 229, 139, 0.10),
            transparent 70%
        );

    pointer-events: none;
}


/* ================================================================ */
/* HERO META                                                        */
/* ================================================================ */

.match-detail-meta {
    position: relative;
    z-index: 2;

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

    flex-wrap: wrap;

    gap: 8px 16px;

    margin-bottom: 24px;
}

.match-detail-meta span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--color-text-muted);

    font-size: 8px;
    font-weight: 650;
}

.match-detail-meta svg {
    width: 12px;
    height: 12px;

    color: var(--color-primary-dark);

    flex-shrink: 0;
}


/* ================================================================ */
/* TEAMS                                                            */
/* ================================================================ */

.match-detail-teams {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        235px
        minmax(0, 1fr);

    align-items: center;

    gap: 24px;
}

.match-detail-team {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;

    text-align: center;
}

.match-detail-team-logo {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    margin-bottom: 10px;

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 22px
        rgba(10, 28, 21, 0.045);
}

.match-detail-team-logo img {
    width: 46px;
    height: 46px;

    object-fit: contain;
}

.match-detail-team-logo > span {
    color: var(--color-text);

    font-size: 20px;
    font-weight: 900;
}

.match-detail-team-type {
    color: var(--color-text-muted);

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.match-detail-team h1 {
    max-width: 300px;

    margin: 4px 0 0;

    color: var(--color-text);

    font-size: 17px;
    font-weight: 850;

    line-height: 1.25;

    letter-spacing: -0.025em;
}


/* ================================================================ */
/* SCORE CENTER                                                     */
/* ================================================================ */

.match-detail-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.match-detail-center-label {
    color: var(--color-text-muted);

    font-size: 7px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.match-detail-score {
    margin-top: 3px;

    color: var(--color-text);

    font-size: 38px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.055em;
}

.match-detail-vs {
    color: var(--color-text);

    font-size: 23px;
    font-weight: 900;
}

.match-detail-center small {
    margin-top: 5px;

    color: var(--color-text-muted);

    font-size: 8px;
}


/* ================================================================ */
/* CONFIDENCE                                                       */
/* ================================================================ */

.match-detail-confidence {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-top: 8px;

    padding: 5px 8px;

    border-radius: 999px;

    background: var(--color-primary-soft);
}

.match-detail-confidence span {
    color: var(--color-text-muted);

    font-size: 7px;
}

.match-detail-confidence strong {
    color: var(--color-primary-dark);

    font-size: 8px;
    font-weight: 850;
}


/* ================================================================ */
/* MAIN PREDICTION                                                  */
/* ================================================================ */

.match-detail-prediction {
    position: relative;
    z-index: 2;

    width: fit-content;

    display: block;
    align-items: center;

    gap: 8px;

    margin: 20px auto 0;
    padding: 7px 11px;

    border:
        1px solid
        rgba(40, 229, 139, 0.12);

    border-radius: 10px;

    background:
        rgba(40, 229, 139, 0.05);
}

.match-detail-prediction-icon {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    margin: 0 auto;

    border-radius: 8px;

    color: var(--color-primary-dark);

    background:
        rgba(40, 229, 139, 0.09);
}

.match-detail-prediction-icon svg {
    width: 13px;
    height: 13px;
}

.match-detail-prediction > div:last-child {
    display: flex;
    flex-direction: row;
    margin-top: 10px
}

.match-detail-prediction span {
    color: var(--color-text-muted);

    font-size: 7px;
}

.match-detail-prediction strong {
    margin-top: 1px;

    color: var(--color-text);

    font-size: 9px;
    font-weight: 800;
}


/* ================================================================ */
/* SECTION                                                          */
/* ================================================================ */

.match-detail-section {
    border: 1px solid var(--border-soft);
    border-radius: 14px;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);

    overflow: hidden;
}

.match-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 14px 16px;

    border-bottom:
        1px solid var(--border-soft);
}

.match-detail-section-eyebrow {
    display: block;

    margin-bottom: 2px;

    color: var(--color-primary-dark);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.match-detail-section-header h2 {
    margin: 0;

    color: var(--color-text);

    font-size: 12px;
    font-weight: 800;
}

.match-detail-section-badge {
    flex-shrink: 0;

    padding: 4px 7px;

    color: var(--color-text-muted);

    border-radius: 999px;

    background: var(--color-bg);

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


/* ================================================================ */
/* 1X2                                                              */
/* ================================================================ */

.match-detail-odds-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;

    padding: 12px;
}

.match-detail-odd-card {
    position: relative;

    padding: 13px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 11px;

    background: var(--color-bg);

    overflow: hidden;
}

.match-detail-odd-card.recommended {
    border-color:
        rgba(40, 229, 139, 0.20);

    background:
        linear-gradient(
            145deg,
            rgba(40, 229, 139, 0.08),
            rgba(255, 255, 255, 0)
        ),
        var(--color-bg);
}

.match-detail-odd-card.recommended::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );
}

.match-detail-odd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

.match-detail-odd-side {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    color: var(--color-text);

    background: var(--color-surface);

    font-size: 8px;
    font-weight: 900;
}

.match-detail-recommended {
    padding: 3px 6px;

    border-radius: 999px;

    color: var(--color-primary-dark);

    background:
        rgba(40, 229, 139, 0.09);

    font-size: 6px;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.match-detail-odd-team {
    display: block;

    margin-top: 10px;

    color: var(--color-text-soft);

    font-size: 8px;
    font-weight: 700;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-detail-odd-probability {
    margin-top: 3px;

    color: var(--color-text);

    font-size: 24px;
    font-weight: 900;

    letter-spacing: -0.04em;
}

.match-detail-odd-card.recommended
.match-detail-odd-probability {
    color: var(--color-primary-dark);
}


/* ================================================================ */
/* PROBABILITY BAR                                                  */
/* ================================================================ */

.match-detail-odd-bar {
    height: 4px;

    margin-top: 7px;

    border-radius: 999px;

    background:
        rgba(18, 40, 32, 0.07);

    overflow: hidden;
}

.match-detail-odd-bar > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


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

.match-detail-odd-footer {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 6px;

    margin-top: 10px;
}

.match-detail-odd-footer > div {
    padding: 7px;

    border-radius: 8px;

    background: var(--color-surface);
}

.match-detail-odd-footer span {
    display: block;

    color: var(--color-text-muted);

    font-size: 6px;
}

.match-detail-odd-footer strong {
    display: block;

    margin-top: 1px;

    color: var(--color-text);

    font-size: 9px;
    font-weight: 850;
}

.match-detail-odd-footer strong.positive {
    color: var(--color-primary-dark);
}


/* ================================================================ */
/* VALUE BET                                                        */
/* ================================================================ */

.match-detail-value-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        repeat(
            3,
            90px
        );

    align-items: center;

    gap: 12px;

    padding: 13px 15px;

    border:
        1px solid
        rgba(40, 229, 139, 0.16);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(40, 229, 139, 0.07),
            rgba(32, 214, 188, 0.025)
        );
}

.match-detail-value-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: var(--color-primary-dark);

    background:
        rgba(40, 229, 139, 0.10);
}

.match-detail-value-icon svg {
    width: 16px;
    height: 16px;
}

.match-detail-value-main span,
.match-detail-value-stat span {
    display: block;

    color: var(--color-text-muted);

    font-size: 7px;
}

.match-detail-value-main strong {
    display: block;

    margin-top: 2px;

    color: var(--color-text);

    font-size: 10px;
    font-weight: 800;
}

.match-detail-value-stat {
    text-align: right;
}

.match-detail-value-stat strong {
    display: block;

    margin-top: 2px;

    color: var(--color-text);

    font-size: 10px;
    font-weight: 850;
}

.match-detail-value-stat strong.positive {
    color: var(--color-primary-dark);
}


/* ================================================================ */
/* MODEL                                                            */
/* ================================================================ */

.match-detail-model-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 7px;

    padding: 12px;
}

.match-detail-model-card {
    min-width: 0;

    padding: 10px;

    border:
        1px solid
        rgba(18, 40, 32, 0.045);

    border-radius: 9px;

    background: var(--color-bg);
}

.match-detail-model-card > span {
    display: block;

    color: var(--color-text-muted);

    font-size: 6px;
}

.match-detail-model-card > strong {
    display: block;

    margin-top: 4px;

    color: var(--color-text);

    font-size: 15px;
    font-weight: 900;

    letter-spacing: -0.025em;
}

.match-detail-model-card small {
    display: block;

    margin-top: 2px;

    color: var(--color-text-muted);

    font-size: 6px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.match-detail-prediction-main {
    min-width: 0;
}

.match-detail-prediction-odds {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-left: auto;
}

.match-detail-prediction-odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 64px;
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);
}

.match-detail-prediction-odd span {
    margin-bottom: 2px;

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

    opacity: 0.6;
}

.match-detail-prediction-odd strong {
    font-size: 15px;
    font-weight: 800;
}

.match-detail-prediction-odd.selected {
    border-color: var(--primary);
    background: rgba(0, 255, 163, 0.1);
}

.match-detail-prediction-odd.selected span {
    opacity: 1;
}

@media (max-width: 768px) {
    .match-detail-prediction {
        flex-wrap: wrap;
    }

    .match-detail-prediction-odds {
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
    }

    .match-detail-prediction-odd {
        flex: 1;
    }
}


.match-scorers {
    margin-top: 24px;
}

.scorer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.scorer-team {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
}

.scorer-team h3 {
    padding: 18px 20px;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
}

.scorer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.scorer-row:last-child {
    border-bottom: 0;
}

.scorer-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.scorer-player img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.scorer-player strong {
    display: block;
    font-size: 14px;
}

.scorer-player small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.scorer-probability {
    text-align: right;
    flex-shrink: 0;
}

.scorer-probability strong {
    display: block;
    font-size: 17px;
}

.scorer-probability small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

@media (max-width: 850px) {
    .scorer-columns {
        grid-template-columns: 1fr;
    }
}

/* ================================================================ */
/* HISTORY                                                          */
/* ================================================================ */

.match-detail-history-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.match-history-list {
    display: flex;
    flex-direction: column;
}

.match-history-item {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        50px
        24px;

    align-items: center;

    gap: 8px;

    min-height: 43px;

    padding: 8px 12px;

    border-bottom:
        1px solid var(--border-soft);
}

.match-history-item:last-child {
    border-bottom: 0;
}

.match-history-date {
    color: var(--color-text-muted);

    font-size: 7px;
}

.match-history-opponent {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 5px;
}

.match-history-opponent span {
    color: var(--color-text-muted);

    font-size: 7px;
}

.match-history-opponent strong {
    min-width: 0;

    color: var(--color-text);

    font-size: 8px;
    font-weight: 700;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-history-score {
    color: var(--color-text);

    font-size: 9px;
    font-weight: 850;

    text-align: center;
}

.match-history-result {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    font-size: 7px;
    font-weight: 900;
}

.match-history-result.win {
    color: #087d4b;

    background:
        rgba(25, 185, 108, 0.10);
}

.match-history-result.draw {
    color: #896700;

    background:
        rgba(217, 154, 24, 0.11);
}

.match-history-result.loss {
    color: #b04747;

    background:
        rgba(229, 87, 87, 0.09);
}

.match-history-empty {
    padding: 22px;

    color: var(--color-text-muted);

    font-size: 8px;

    text-align: center;
}


/* ================================================================ */
/* NO ANALYSIS                                                      */
/* ================================================================ */

.match-detail-no-analysis {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px 20px;

    border:
        1px dashed
        var(--border-medium);

    border-radius: 13px;

    background:
        var(--color-surface);

    text-align: center;
}

.match-detail-no-analysis > div {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin-bottom: 10px;

    border-radius: 11px;

    color: var(--color-primary-dark);

    background:
        var(--color-primary-soft);
}

.match-detail-no-analysis svg {
    width: 18px;
    height: 18px;
}

.match-detail-no-analysis h2 {
    margin: 0;

    color: var(--color-text);

    font-size: 12px;
}

.match-detail-no-analysis p {
    max-width: 400px;

    margin: 5px 0 0;

    color: var(--color-text-muted);

    font-size: 8px;
    line-height: 1.5;
}


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

@media (max-width: 1250px) {

    .match-detail-model-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .match-detail-value-card {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            repeat(
                3,
                75px
            );
    }
}


@media (max-width: 900px) {

    .match-detail-teams {
        grid-template-columns:
            minmax(0, 1fr)
            120px
            minmax(0, 1fr);

        gap: 14px;
    }

    .match-detail-team h1 {
        font-size: 14px;
    }

    .match-detail-score {
        font-size: 31px;
    }

    .match-detail-value-card {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            repeat(
                3,
                65px
            );

        gap: 8px;
    }
}


@media (max-width: 760px) {

    .match-detail-hero {
        padding:
            18px 14px;
    }

    .match-detail-meta {
        margin-bottom: 18px;
    }

    .match-detail-teams {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-template-areas:
            "home away"
            "center center";

        row-gap: 18px;
    }

    .match-detail-team:first-child {
        grid-area: home;
    }

    .match-detail-team:last-child {
        grid-area: away;
    }

    .match-detail-center {
        grid-area: center;
    }

    .match-detail-team-logo {
        width: 56px;
        height: 56px;
    }

    .match-detail-team-logo img {
        width: 38px;
        height: 38px;
    }

    .match-detail-odds-grid {
        grid-template-columns: 1fr;
    }

    .match-detail-value-card {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            repeat(
                3,
                auto
            );
    }

    .match-detail-history-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575px) {

    .match-detail-page {
        gap: 13px;
    }

    .match-detail-meta {
        gap: 7px 11px;
    }

    .match-detail-team h1 {
        font-size: 12px;
    }

    .match-detail-score {
        font-size: 29px;
    }

    .match-detail-prediction {
        width: 100%;

        justify-content: center;
    }

    .match-detail-section-header {
        align-items: flex-start;

        padding:
            12px;
    }

    .match-detail-model-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        padding: 10px;
    }

    .match-detail-value-card {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap: 10px;

        padding: 12px;
    }

    .match-detail-value-stat {
        padding-top: 8px;

        border-top:
            1px solid
            rgba(40, 229, 139, 0.09);

        text-align: left;
    }

    .match-history-item {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            44px
            22px;

        gap: 6px;

        padding:
            8px 9px;
    }
}

/* ==========================================================
   MATCH GAGNÉ
   ========================================================== */

.history-row.is-won {
    border-color: rgba(32, 217, 149, .48) !important;

    background:
        linear-gradient(
            90deg,
            rgba(32, 217, 149, .10),
            rgba(32, 217, 149, .02) 55%,
            transparent
        ) !important;

    box-shadow:
        inset 4px 0 0 #20d995 !important;
}

.history-row.is-won:hover {
    border-color: rgba(32, 217, 149, .70) !important;

    background:
        linear-gradient(
            90deg,
            rgba(32, 217, 149, .14),
            rgba(32, 217, 149, .035) 55%,
            transparent
        ) !important;
}


/* ==========================================================
   MATCH PERDU
   ========================================================== */

.history-row.is-lost {
    border-color: rgba(239, 68, 68, .45) !important;

    background:
        linear-gradient(
            90deg,
            rgba(239, 68, 68, .09),
            rgba(239, 68, 68, .02) 55%,
            transparent
        ) !important;

    box-shadow:
        inset 4px 0 0 #ef4444 !important;
}

.history-row.is-lost:hover {
    border-color: rgba(239, 68, 68, .68) !important;

    background:
        linear-gradient(
            90deg,
            rgba(239, 68, 68, .13),
            rgba(239, 68, 68, .03) 55%,
            transparent
        ) !important;
}


/* ==========================================================
   SCORE EXACT
   ========================================================== */

.history-exact-score-badge {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 8px;

    border: 1px solid rgba(234, 179, 8, .35);
    border-radius: 999px;

    background: rgba(234, 179, 8, .10);

    color: #a16207;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}

.history-exact-score-badge i {
    font-size: 9px;
    color: #eab308;
}


/* Le score exact reste distingué même sur une ligne gagnée */

.history-row.is-exact-score {
    position: relative;
}

.history-row.is-exact-score::after {
    content: "👑";

    position: absolute;

    top: 8px;
    right: 8px;

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

    width: 25px;
    height: 25px;

    border: 1px solid rgba(234, 179, 8, .30);
    border-radius: 50%;

    background: #fffbea;

    font-size: 12px;

    box-shadow:
        0 4px 12px rgba(161, 98, 7, .10);
}


/* ==========================================================
   SCORE ESTIMÉ
   ========================================================== */

.history-predicted-score {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}

.history-predicted-score b {
    font-weight: 900;
    color: #111827;
}


/* ==========================================================
   STATUT
   ========================================================== */

.history-row.is-won .history-status-badge.is-won {
    border-color: rgba(32, 217, 149, .25);
    background: rgba(32, 217, 149, .11);
    color: #009c68;
}

.history-row.is-lost .history-status-badge.is-lost {
    border-color: rgba(239, 68, 68, .25);
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}


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

@media (max-width: 768px) {

    .history-row.is-won {
        box-shadow:
            inset 3px 0 0 #20d995 !important;
    }

    .history-row.is-lost {
        box-shadow:
            inset 3px 0 0 #ef4444 !important;
    }

    .history-exact-score-badge {
        padding: 3px 6px;
        font-size: 8px;
    }

    .history-row.is-exact-score::after {
        width: 22px;
        height: 22px;

        top: 7px;
        right: 7px;

        font-size: 10px;
    }

}

/* ================================================================ */
/* VALUE BETS                                                       */
/* ================================================================ */

.value-bets-page {
    display: flex;
    flex-direction: column;

    gap: 18px;

    width: 100%;
}


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

.value-bets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 3px 2px;
}

.value-bets-eyebrow {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 6px;

    color: var(--color-primary-dark);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.value-bets-eyebrow > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 9px
        var(--color-primary-glow);
}

.value-bets-header h1 {
    margin: 0;

    color: var(--color-text);

    font-size: 28px;
    font-weight: 850;

    letter-spacing: -0.035em;
}

.value-bets-header p {
    margin: 5px 0 0;

    color: var(--color-text-soft);

    font-size: 10px;
}

.value-bets-header-badge {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 11px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background: var(--color-surface);
}

.value-bets-header-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 8px var(--color-primary-glow);
}

.value-bets-header-badge div {
    display: flex;
    flex-direction: column;
}

.value-bets-header-badge small {
    color: var(--color-text-muted);

    font-size: 6px;
}

.value-bets-header-badge strong {
    margin-top: 1px;

    color: var(--color-text);

    font-size: 8px;
}


/* ================================================================ */
/* KPI                                                              */
/* ================================================================ */

.value-bets-kpis {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 9px;
}

.value-bets-kpi {
    padding: 12px 14px;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);
}

.value-bets-kpi > span {
    display: block;

    color: var(--color-text-soft);

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

.value-bets-kpi > strong {
    display: block;

    margin-top: 4px;

    color: var(--color-text);

    font-size: 21px;
    font-weight: 900;

    letter-spacing: -0.04em;
}

.value-bets-kpi > strong.positive {
    color: var(--color-primary-dark);
}

.value-bets-kpi > small {
    display: block;

    margin-top: 3px;

    color: var(--color-text-muted);

    font-size: 6px;
}


/* ================================================================ */
/* FILTERS                                                          */
/* ================================================================ */

.value-bets-filter-card {
    padding: 9px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background: var(--color-surface);
}

.value-bets-filters {
    display: grid;

    grid-template-columns:
        minmax(210px, 1fr)
        minmax(140px, .6fr)
        minmax(150px, .6fr)
        minmax(130px, .5fr)
        90px
        auto
        auto;

    gap: 7px;
}

.value-bets-search,
.value-bets-select,
.value-bets-min-ev {
    min-height: 38px;

    display: flex;
    align-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    background: var(--color-bg);
}

.value-bets-search {
    gap: 8px;

    padding: 0 10px;
}

.value-bets-search svg {
    width: 12px;
    height: 12px;

    flex-shrink: 0;

    color: var(--color-text-muted);
}

.value-bets-search input {
    width: 100%;

    border: 0;
    outline: 0;

    color: var(--color-text);

    background: transparent;

    font-size: 9px;
}

.value-bets-select {
    position: relative;

    padding-left: 10px;
}

.value-bets-select::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 11px;

    width: 5px;
    height: 5px;

    border-right:
        1.5px solid
        var(--color-text-muted);

    border-bottom:
        1.5px solid
        var(--color-text-muted);

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events: none;
}

.value-bets-select select {
    width: 100%;
    height: 36px;

    padding:
        0 28px 0 0;

    border: 0;
    outline: 0;

    appearance: none;
    -webkit-appearance: none;

    color: var(--color-text-soft);

    background: transparent;

    font-size: 8px;

    cursor: pointer;
}

.value-bets-min-ev {
    padding: 0 9px;

    gap: 4px;
}

.value-bets-min-ev span,
.value-bets-min-ev small {
    color: var(--color-text-muted);

    font-size: 7px;
}

.value-bets-min-ev input {
    width: 30px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--color-text);

    font-size: 9px;
    font-weight: 800;

    text-align: center;
}

.value-bets-filter-button {
    min-height: 38px;

    padding: 0 13px;

    border: 0;
    border-radius: 8px;

    color: #07140e;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #20d996
        );

    font-size: 8px;
    font-weight: 800;
}

.value-bets-reset {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    color: var(--color-text-muted);

    text-decoration: none;

    background: var(--color-surface);

    font-size: 15px;
}


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

.value-bets-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 3px;
}

.value-bets-list-header > div {
    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--color-text-muted);

    font-size: 8px;
}

.value-bets-list-header strong {
    color: var(--color-text);

    font-size: 9px;
}

.value-bets-list-header > small {
    color: var(--color-text-muted);

    font-size: 7px;
}

.value-bets-live-dot {
    width: 5px;
    height: 5px;

    margin-right: 2px;

    border-radius: 50%;

    background: var(--color-primary);
}


/* ================================================================ */
/* ROW                                                              */
/* ================================================================ */

.value-bets-list {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.value-bet-row {
    display: grid;

    grid-template-columns:
        minmax(190px, 1.5fr)
        minmax(130px, .9fr)
        70px
        70px
        60px
        65px
        80px
        70px
        12px;

    align-items: center;

    gap: 10px;

    min-height: 78px;

    padding: 9px 11px;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    color: inherit;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);

    text-decoration: none;

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.value-bet-row:hover {
    border-color:
        rgba(40, 229, 139, .18);

    transform:
        translateY(-1px);

    box-shadow: var(--shadow-sm);
}


/* ================================================================ */
/* MATCH                                                            */
/* ================================================================ */

.value-bet-match {
    min-width: 0;
}

.value-bet-time {
    margin-bottom: 4px;

    color: var(--color-text-muted);

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

.value-bet-teams {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.value-bet-teams > div {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 6px;
}

.value-bet-team-logo {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid var(--border-soft);
    border-radius: 6px;

    background: #fff;

    color: var(--color-text);

    font-size: 7px;
    font-weight: 800;
}

.value-bet-team-logo img {
    width: 14px;
    height: 14px;

    object-fit: contain;
}

.value-bet-teams strong {
    min-width: 0;

    color: var(--color-text);

    font-size: 8px;
    font-weight: 750;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.value-bet-match > small {
    display: block;

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 6px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================ */
/* SELECTION                                                        */
/* ================================================================ */

.value-bet-selection {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 7px;
}

.value-bet-side {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    color: var(--color-primary-dark);

    background:
        var(--color-primary-soft);

    font-size: 8px;
    font-weight: 900;
}

.value-bet-selection > div {
    min-width: 0;
}

.value-bet-selection small,
.value-bet-stat span,
.value-bet-ev > span,
.value-bet-confidence span {
    display: block;

    color: var(--color-text-muted);

    font-size: 6px;
}

.value-bet-selection strong {
    display: block;

    margin-top: 2px;

    color: var(--color-text);

    font-size: 8px;
    font-weight: 800;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================ */
/* STATS                                                            */
/* ================================================================ */

.value-bet-stat,
.value-bet-confidence {
    text-align: center;
}

.value-bet-stat strong,
.value-bet-confidence strong {
    display: block;

    margin-top: 3px;

    color: var(--color-text);

    font-size: 9px;
    font-weight: 850;
}

.value-bet-stat strong.positive {
    color: var(--color-primary-dark);
}


/* ================================================================ */
/* EV                                                               */
/* ================================================================ */

.value-bet-ev {
    padding: 6px 7px;

    border:
        1px solid
        rgba(40, 229, 139, .11);

    border-radius: 8px;

    background:
        rgba(40, 229, 139, .045);

    text-align: center;
}

.value-bet-ev > strong {
    display: block;

    margin-top: 2px;

    color: var(--color-primary-dark);

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

.value-bet-level {
    display: inline-block;

    margin-top: 2px;

    color: var(--color-text-muted);

    font-size: 5px;
    font-weight: 800;

    text-transform: uppercase;
}

.value-bet-level.level-strong {
    color: var(--color-primary-dark);
}

.value-bet-level.level-good {
    color: #16895b;
}


/* ================================================================ */
/* ARROW                                                            */
/* ================================================================ */

.value-bet-arrow {
    color: var(--color-text-muted);

    font-size: 13px;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.value-bet-row:hover
.value-bet-arrow {
    color: var(--color-primary-dark);

    transform:
        translateX(2px);
}


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

.value-bets-empty {
    min-height: 270px;

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

    border: 1px solid var(--border-soft);
    border-radius: 13px;

    background: var(--color-surface);

    text-align: center;
}

.value-bets-empty > div {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    margin-bottom: 9px;

    border-radius: 12px;

    background: var(--color-primary-soft);

    font-size: 15px;
}

.value-bets-empty h2 {
    margin: 0;

    color: var(--color-text);

    font-size: 12px;
}

.value-bets-empty p {
    max-width: 390px;

    margin: 5px 0 0;

    color: var(--color-text-muted);

    font-size: 8px;
}


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

@media (max-width: 1250px) {

    .value-bet-row {
        grid-template-columns:
            minmax(170px, 1.5fr)
            minmax(120px, .9fr)
            repeat(4, 60px)
            75px
            12px;
    }

    .value-bet-confidence {
        display: none;
    }
}


@media (max-width: 1000px) {

    .value-bets-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .value-bets-filters {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .value-bets-search {
        grid-column:
            1 / -1;
    }

    .value-bet-row {
        grid-template-columns:
            minmax(170px, 1.4fr)
            minmax(120px, .9fr)
            60px
            60px
            70px
            12px;
    }

    .value-bet-stat:nth-of-type(4),
    .value-bet-stat:nth-of-type(5) {
        display: none;
    }
}


@media (max-width: 700px) {

    .value-bets-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .value-bets-header-badge {
        width: 100%;
    }

    .value-bet-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 10px;

        padding: 12px;
    }

    .value-bet-match {
        grid-column: 1;
    }

    .value-bet-selection {
        grid-column: 1;
    }

    .value-bet-stat {
        display: none;
    }

    .value-bet-ev {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .value-bet-arrow {
        display: none;
    }
}


@media (max-width: 520px) {

    .value-bets-kpis {
        grid-template-columns: 1fr;
    }

    .value-bets-filters {
        grid-template-columns: 1fr;
    }

    .value-bets-search {
        grid-column: auto;
    }
}
/* ================================================================ */
/* VALUE BETS DATE NAVIGATION                                       */
/* ================================================================ */

.value-bets-date-navigation {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 8px 9px;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);
}

.value-bets-date-arrow {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    color: var(--color-text-soft);

    background: var(--color-bg);

    font-size: 18px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.value-bets-date-arrow:hover {
    color: var(--color-primary-dark);

    border-color:
        rgba(40, 229, 139, 0.20);

    background:
        var(--color-primary-soft);
}

.value-bets-current-date {
    display: flex;
    flex-direction: column;

    min-width: 105px;

    margin-right: 4px;
}

.value-bets-current-date span {
    color: var(--color-text-muted);

    font-size: 6px;
}

.value-bets-current-date strong {
    margin-top: 1px;

    color: var(--color-text);

    font-size: 9px;
    font-weight: 800;
}

.value-bets-date-form {
    position: relative;
}

.value-bets-date-form input {
    height: 34px;

    padding: 0 9px;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    outline: 0;

    color: var(--color-text);

    background: var(--color-bg);

    font-family: inherit;
    font-size: 8px;

    cursor: pointer;
}

.value-bets-date-form input:focus {
    border-color:
        rgba(40, 229, 139, 0.28);

    box-shadow:
        0 0 0 3px
        rgba(40, 229, 139, 0.06);
}

.value-bets-today {
    min-height: 34px;

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

    margin-left: auto;

    padding: 0 11px;

    border:
        1px solid
        rgba(40, 229, 139, 0.15);

    border-radius: 8px;

    color: var(--color-primary-dark);

    background:
        var(--color-primary-soft);

    font-size: 7px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.value-bets-today:hover {
    border-color:
        rgba(40, 229, 139, 0.25);

    background:
        rgba(40, 229, 139, 0.16);
}


@media (max-width: 600px) {

    .value-bets-date-navigation {
        flex-wrap: wrap;
    }

    .value-bets-current-date {
        flex: 1;
    }

    .value-bets-today {
        width: 100%;

        margin-left: 0;
    }
}
/* ================================================================
   HISTORY
   ================================================================ */

.history-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

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

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 2px 0;
}

.history-header h1 {
    margin: 0;

    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;

    color: var(--color-text, #101828);
}

.history-header p {
    margin: 7px 0 0;

    font-size: 14px;
    line-height: 1.5;

    color: var(--color-text-muted, #667085);
}

.history-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;

    padding: 9px 13px;

    border: 1px solid rgba(18, 183, 106, 0.18);
    border-radius: 999px;

    background: rgba(18, 183, 106, 0.07);

    font-size: 12px;
    font-weight: 700;

    color: #067647;
}

.history-live-badge > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #12b76a;

    box-shadow:
        0 0 0 4px rgba(18, 183, 106, 0.10);
}

/* ================================================================
   KPI
   ================================================================ */

.history-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.history-kpi {
    position: relative;

    min-width: 0;

    padding: 17px 18px;

    overflow: hidden;

    border: 1px solid #eaecf0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03);
}

.history-kpi::before {
    content: "";

    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;

    height: 2px;

    border-radius: 0 0 999px 999px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(16, 185, 129, 0.55),
        transparent
    );

    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-kpi:hover::before {
    opacity: 1;
}

.history-kpi > span {
    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: #98a2b3;
}

.history-kpi > strong {
    display: block;

    overflow: hidden;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;

    color: #101828;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-kpi > small {
    display: block;

    margin-top: 7px;

    overflow: hidden;

    font-size: 11px;
    font-weight: 500;

    color: #98a2b3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-kpi > strong.is-positive,
.history-profit strong.is-positive,
.history-ev strong.is-positive {
    color: #079455;
}

.history-kpi > strong.is-negative,
.history-profit strong.is-negative,
.history-ev strong.is-negative {
    color: #d92d20;
}

/* ================================================================
   FILTER CARD
   ================================================================ */

.history-filter-card {
    padding: 12px;

    border: 1px solid #eaecf0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03);
}

.history-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(160px, 190px)
        minmax(150px, 180px)
        minmax(150px, 180px)
        auto
        auto;
    align-items: center;
    gap: 10px;
}

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

.history-search {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;
    height: 40px;

    padding: 0 12px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.history-search:focus-within {
    border-color: #12b76a;

    box-shadow:
        0 0 0 3px rgba(18, 183, 106, 0.10);
}

.history-search svg {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    color: #98a2b3;
}

.history-search input {
    width: 100%;
    min-width: 0;
    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    color: #101828;
}

.history-search input::placeholder {
    color: #98a2b3;
}

/* ================================================================
   SELECT
   ================================================================ */

.history-select {
    position: relative;
}

.history-select::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 14px;

    width: 6px;
    height: 6px;

    border-right: 1.5px solid #667085;
    border-bottom: 1.5px solid #667085;

    pointer-events: none;

    transform:
        translateY(-65%)
        rotate(45deg);
}

.history-select select {
    width: 100%;
    height: 40px;

    padding: 0 34px 0 12px;

    appearance: none;

    border: 1px solid #d0d5dd;
    border-radius: 10px;
    outline: 0;

    background: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    color: #344054;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.history-select select:focus {
    border-color: #12b76a;

    box-shadow:
        0 0 0 3px rgba(18, 183, 106, 0.10);
}

/* ================================================================
   DATE
   ================================================================ */

.history-date {
    display: flex;
    align-items: center;
    gap: 7px;

    height: 40px;

    padding: 0 10px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #ffffff;
}

.history-date > span {
    flex-shrink: 0;

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

    color: #98a2b3;
}

.history-date input {
    width: 100%;
    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    color: #344054;
}

/* ================================================================
   FILTER BUTTON
   ================================================================ */

.history-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;

    padding: 0 17px;

    border: 0;
    border-radius: 10px;

    background: #101828;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.history-filter-submit:hover {
    background: #1d2939;

    transform: translateY(-1px);
}

.history-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid #eaecf0;
    border-radius: 10px;

    background: #ffffff;

    font-size: 21px;
    font-weight: 400;

    color: #667085;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.history-filter-reset:hover {
    border-color: #fda29b;

    background: #fef3f2;

    color: #d92d20;
}

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

.history-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: -8px;

    padding: 0 3px;

    font-size: 12px;
    font-weight: 500;

    color: #667085;
}

.history-result-header > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-result-header strong {
    color: #344054;
}

.history-result-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #12b76a;
}

/* ================================================================
   LIST
   ================================================================ */

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ================================================================
   ROW
   ================================================================ */

.history-row {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(105px, 0.8fr)
        minmax(360px, 2.7fr)
        minmax(160px, 1.4fr)
        minmax(70px, 0.55fr)
        minmax(85px, 0.65fr)
        minmax(75px, 0.65fr)
        28px;
    align-items: center;
    gap: 16px;

    min-height: 86px;

    padding: 14px 16px;

    overflow: hidden;

    border: 1px solid #eaecf0;
    border-radius: 14px;

    background: #ffffff;

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.025);

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

.history-row::before {
    content: "";

    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;

    width: 3px;

    border-radius: 0 999px 999px 0;

    background: #d0d5dd;
}

.history-row.is-won::before {
    background: #12b76a;
}

.history-row.is-lost::before {
    background: #f04438;
}

.history-row:hover {
    z-index: 1;

    border-color: #d0d5dd;

    background: #fcfcfd;

    box-shadow:
        0 5px 16px rgba(16, 24, 40, 0.06);

    transform: translateY(-1px);
}

/* ================================================================
   META
   ================================================================ */

.history-match-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.history-match-meta time {
    display: flex;
    flex-direction: column;
    gap: 1px;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    color: #667085;
}

.history-match-meta time strong {
    font-size: 12px;
    font-weight: 800;

    color: #344054;
}

.history-match-meta > span {
    overflow: hidden;

    font-size: 10px;
    font-weight: 600;

    color: #98a2b3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================
   MATCH
   ================================================================ */

.history-match {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 14px;

    min-width: 0;
}

.history-team {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;
}

.history-team-away {
    justify-content: flex-end;
    text-align: right;
}

.history-team > span:not(.history-team-placeholder) {
    overflow: hidden;

    font-size: 12px;
    font-weight: 700;

    color: #344054;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-team img,
.history-team-placeholder {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 50%;
}

.history-team img {
    object-fit: contain;

    padding: 3px;

    border: 1px solid #eaecf0;

    background: #ffffff;
}

.history-team-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #eaecf0;

    background: #f9fafb;

    font-size: 11px;
    font-weight: 800;

    color: #667085;
}

/* ================================================================
   FINAL SCORE
   ================================================================ */

.history-final-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 70px;

    padding: 8px 10px;

    border-radius: 9px;

    background: #f2f4f7;
}

.history-final-score strong {
    font-size: 17px;
    font-weight: 850;
    line-height: 1;

    color: #101828;
}

.history-final-score span {
    font-size: 12px;
    font-weight: 700;

    color: #98a2b3;
}

/* ================================================================
   SELECTION
   ================================================================ */

.history-selection {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.history-selection > span,
.history-ev > span,
.history-profit > span {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.045em;
    text-transform: uppercase;

    color: #98a2b3;
}

.history-selection > strong {
    overflow: hidden;

    font-size: 11px;
    font-weight: 750;

    color: #344054;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-selection small {
    font-size: 10px;
    font-weight: 500;

    color: #98a2b3;
}

.history-selection small b {
    margin-left: 3px;

    font-weight: 800;

    color: #344054;
}

/* ================================================================
   EV
   ================================================================ */

.history-ev {
    display: flex;
    flex-direction: column;
    gap: 4px;

    text-align: center;
}

.history-ev strong {
    font-size: 12px;
    font-weight: 800;

    color: #475467;
}

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

.history-status {
    display: flex;
    justify-content: center;
}

.history-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 66px;

    padding: 6px 9px;

    border-radius: 999px;

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

    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.history-status-badge.is-won {
    border: 1px solid rgba(18, 183, 106, 0.18);

    background: rgba(18, 183, 106, 0.08);

    color: #067647;
}

.history-status-badge.is-lost {
    border: 1px solid rgba(240, 68, 56, 0.18);

    background: rgba(240, 68, 56, 0.07);

    color: #b42318;
}

/* ================================================================
   PROFIT
   ================================================================ */

.history-profit {
    display: flex;
    flex-direction: column;
    gap: 4px;

    text-align: right;
}

.history-profit strong {
    font-size: 13px;
    font-weight: 850;

    color: #344054;
}

/* ================================================================
   ARROW
   ================================================================ */

.history-arrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: #98a2b3;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.history-arrow svg {
    width: 18px;
    height: 18px;
}

.history-row:hover .history-arrow {
    color: #344054;

    transform: translateX(2px);
}

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

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 320px;

    padding: 40px 25px;

    border: 1px dashed #d0d5dd;
    border-radius: 16px;

    background: #fcfcfd;

    text-align: center;
}

.history-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 15px;

    border-radius: 14px;

    background: rgba(18, 183, 106, 0.09);

    font-size: 20px;
    font-weight: 900;

    color: #079455;
}

.history-empty > strong {
    font-size: 15px;
    font-weight: 800;

    color: #101828;
}

.history-empty > p {
    max-width: 430px;

    margin: 7px 0 0;

    font-size: 12px;
    line-height: 1.6;

    color: #667085;
}

.history-empty > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 18px;

    padding: 9px 14px;

    border-radius: 9px;

    background: #101828;

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

    color: #ffffff;

    text-decoration: none;
}

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

@media (max-width: 1450px) {

    .history-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .history-filters {
        grid-template-columns:
            minmax(260px, 1fr)
            minmax(160px, 190px)
            minmax(150px, 180px)
            minmax(150px, 180px)
            auto;
    }

    .history-filter-reset {
        grid-column: auto;
    }

    .history-row {
        grid-template-columns:
            100px
            minmax(310px, 2.5fr)
            minmax(145px, 1.3fr)
            65px
            80px
            70px
            22px;

        gap: 11px;

        padding-left: 14px;
        padding-right: 12px;
    }
}

@media (max-width: 1200px) {

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

    .history-search {
        grid-column: 1 / -1;
    }

    .history-filter-submit {
        width: 100%;
    }

    .history-row {
        grid-template-columns:
            90px
            minmax(280px, 1fr)
            130px
            65px
            76px
            22px;
    }

    .history-profit {
        display: none;
    }
}

@media (max-width: 992px) {

    .history-header {
        align-items: flex-start;
    }

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

    .history-row {
        grid-template-columns:
            78px
            minmax(260px, 1fr)
            125px
            74px
            22px;
    }

    .history-ev {
        display: none;
    }
}

@media (max-width: 768px) {

    .history-page {
        gap: 16px;
    }

    .history-header {
        flex-direction: column;
    }

    .history-header h1 {
        font-size: 22px;
    }

    .history-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .history-kpi {
        padding: 14px;
    }

    .history-kpi > strong {
        font-size: 20px;
    }

    .history-filters {
        grid-template-columns: 1fr;
    }

    .history-search {
        grid-column: auto;
    }

    .history-filter-reset {
        width: 100%;
    }

    .history-result-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .history-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 13px;

        padding: 14px;

        min-height: 0;
    }

    .history-row::before {
        top: 12px;
        bottom: 12px;
    }

    .history-match-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        padding-left: 5px;
    }

    .history-match-meta time {
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }

    .history-match {
        padding: 12px;

        border-radius: 11px;

        background: #f9fafb;
    }

    .history-team {
        flex-direction: column;
        gap: 5px;

        text-align: center;
    }

    .history-team-away {
        flex-direction: column-reverse;

        text-align: center;
    }

    .history-team > span:not(.history-team-placeholder) {
        width: 100%;

        font-size: 11px;
    }

    .history-selection {
        padding: 0 5px;
    }

    .history-status {
        justify-content: flex-start;

        padding: 0 5px;
    }

    .history-profit {
        display: flex;

        padding: 0 5px;

        text-align: left;
    }

    .history-ev {
        display: flex;

        padding: 0 5px;

        text-align: left;
    }

    .history-arrow {
        display: none;
    }
}

@media (max-width: 480px) {

    .history-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .history-live-badge {
        width: 100%;

        justify-content: center;
    }

    .history-match {
        gap: 7px;

        padding: 10px 7px;
    }

    .history-final-score {
        min-width: 58px;

        padding: 7px;
    }

    .history-final-score strong {
        font-size: 15px;
    }

    .history-team img,
    .history-team-placeholder {
        width: 26px;
        height: 26px;

        flex-basis: 26px;
    }
}


.history-prediction-type {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.history-value-bet-badge,
.history-main-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.history-value-bet-badge {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.history-main-badge {
    background: #f1f5f9;
    color: #64748b;
}

/* =========================================================
   HISTORY - SELECTION TYPE
   ========================================================= */

.history-selection-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.history-selection-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .04em;

    white-space: nowrap;
}

.history-selection-badge.is-main {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.history-selection-badge.is-value {
    background: rgba(16, 185, 129, .12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, .18);
}

/* =========================================================
   PREDICTION RESULT
   ========================================================= */

.match-row-prediction {
    position: relative;

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


/* =========================================================
   PRONOSTIC GAGNÉ
   ========================================================= */

.match-row-prediction.is-won {
    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .10),
            rgba(16, 185, 129, .04)
        );

    border-color:
        rgba(16, 185, 129, .25);
}

.match-row-prediction.is-won .match-row-score strong {
    color: #059669;
}


/* =========================================================
   PRONOSTIC PERDU
   ========================================================= */

.match-row-prediction.is-lost {
    background:
        linear-gradient(
            135deg,
            rgba(239, 68, 68, .12),
            rgba(239, 68, 68, .04)
        );

    border-color:
        rgba(239, 68, 68, .28);
}

.match-row-prediction.is-lost .match-row-score strong {
    color: #dc2626;
}


/* =========================================================
   RÉSULTAT RÉEL
   ========================================================= */

.match-row-result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 7px;
}

.match-row-result > span {
    color: #64748b;

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.match-row-result > strong {
    color: #0f172a;

    font-size: 15px;
    font-weight: 800;
}


/* =========================================================
   RESULTAT DU PRONOSTIC
   ========================================================= */

.match-row-bet-result {
    margin-top: 7px;
}

.match-bet-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .03em;
}

.match-bet-status svg {
    width: 11px;
    height: 11px;

    flex: 0 0 auto;
}


/* GAGNÉ */

.match-bet-status.is-won {
    color: #047857;

    background:
        rgba(16, 185, 129, .12);

    border:
        1px solid rgba(16, 185, 129, .22);
}


/* PERDU */

.match-bet-status.is-lost {
    color: #dc2626;

    background:
        rgba(239, 68, 68, .12);

    border:
        1px solid rgba(239, 68, 68, .22);
}
/* =========================================================
   MATCH - ZONE PRONOSTIC / RESULTAT
   ========================================================= */

.match-row-prediction {
    position: relative;

    min-width: 190px;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    padding: 14px 18px;

    background: #f8fafc;

    border-left: 1px solid #e5e7eb;

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


/* =========================================================
   PRONOSTIC GAGNÉ
   ========================================================= */

.match-row-prediction.is-won {
    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .10) 0%,
            rgba(16, 185, 129, .04) 100%
        );

    border-left:
        2px solid rgba(16, 185, 129, .55);
}


/* =========================================================
   PRONOSTIC PERDU
   ========================================================= */

.match-row-prediction.is-lost {
    background:
        linear-gradient(
            135deg,
            rgba(239, 68, 68, .10) 0%,
            rgba(239, 68, 68, .035) 100%
        );

    border-left:
        2px solid rgba(239, 68, 68, .50);
}


/* =========================================================
   SCORE ESTIMÉ
   ========================================================= */

.match-row-score {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0;
}

.match-row-score > span {
    color: #94a3b8;

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

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.match-row-score > strong {
    color: #0f172a;

    font-size: 20px;
    line-height: 1;

    font-weight: 900;

    white-space: nowrap;
}


/* SCORE ESTIMÉ SI GAGNÉ */

.match-row-prediction.is-won
.match-row-score > strong {
    color: #059669;
}


/* SCORE ESTIMÉ SI PERDU */

.match-row-prediction.is-lost
.match-row-score > strong {
    color: #dc2626;
}


/* =========================================================
   RESULTAT REEL
   ========================================================= */

.match-row-result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0;
    padding-top: 7px;

    border-top: 1px solid rgba(148, 163, 184, .18);
}

.match-row-result > span {
    color: #64748b;

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

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.match-row-result > strong {
    color: #0f172a;

    font-size: 18px;
    line-height: 1;

    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   GAGNÉ / PERDU
   ========================================================= */

.match-row-bet-result {
    display: flex;
    align-items: center;

    margin: 0;
}

.match-bet-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    width: fit-content;

    padding: 5px 8px;

    border-radius: 6px;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .03em;

    white-space: nowrap;
}

.match-bet-status svg {
    width: 11px;
    height: 11px;

    flex: 0 0 11px;
}


/* GAGNÉ */

.match-bet-status.is-won {
    color: #047857;

    background: rgba(16, 185, 129, .10);

    border: 1px solid rgba(16, 185, 129, .25);
}


/* PERDU */

.match-bet-status.is-lost {
    color: #dc2626;

    background: rgba(239, 68, 68, .08);

    border: 1px solid rgba(239, 68, 68, .25);
}


/* =========================================================
   PRONOSTIC 1 / X / 2
   ========================================================= */

.match-row-predicted-result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 1px;
}

.match-row-predicted-result > span {
    color: #94a3b8;

    font-size: 9px;
    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.match-row-predicted-result > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 22px;

    padding: 0 6px;

    border-radius: 5px;

    color: #334155;

    background: rgba(148, 163, 184, .12);

    font-size: 11px;
    line-height: 1;

    font-weight: 900;
}


/* PRONO GAGNÉ */

.match-row-prediction.is-won
.match-row-predicted-result > strong {
    color: #047857;

    background: rgba(16, 185, 129, .12);
}


/* PRONO PERDU */

.match-row-prediction.is-lost
.match-row-predicted-result > strong {
    color: #dc2626;

    background: rgba(239, 68, 68, .10);
}


/* =========================================================
   MATCH NON TERMINÉ
   ========================================================= */

.match-row-analysis-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 2px;
}

.match-row-analysis-status small {
    color: #64748b;

    font-size: 10px;

    font-weight: 800;
}


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

@media (max-width: 1200px) {

    .match-row-prediction {
        min-width: 165px;

        padding-left: 12px;
        padding-right: 12px;
    }

    .match-row-score > strong {
        font-size: 18px;
    }

    .match-row-result > strong {
        font-size: 16px;
    }
}

/* =========================================================
   PREDICTION
   ========================================================= */

.match-row-prediction {
    min-width: 155px;
    height: 100%;

    display: flex;
    align-items: center;

    padding: 0 16px;

    border-left: 1px solid #edf0f2;

    background: transparent;

    transition:
        background .15s ease,
        border-color .15s ease;
}


/* =========================================================
   RESULT STATE
   ========================================================= */

.match-row-prediction.is-won {
    background: rgba(16, 185, 129, .045);

    border-left-color:
        rgba(16, 185, 129, .25);
}

.match-row-prediction.is-lost {
    background: rgba(239, 68, 68, .045);

    border-left-color:
        rgba(239, 68, 68, .22);
}


/* =========================================================
   CONTENT
   ========================================================= */

.match-prediction-main {
    width: 100%;

    display: grid;

    grid-template-columns:
        auto auto;

    align-items: center;

    column-gap: 14px;
    row-gap: 5px;
}


/* =========================================================
   ESTIMATED SCORE
   ========================================================= */

.match-prediction-score {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.match-prediction-score span {
    color: #94a3b8;

    font-size: 8px;
    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .045em;
}

.match-prediction-score strong {
    color: #0f172a;

    font-size: 17px;
    line-height: 1;

    font-weight: 800;
}


/* =========================================================
   FINAL SCORE
   ========================================================= */

.match-prediction-final {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding-left: 13px;

    border-left: 1px solid #e5e7eb;
}

.match-prediction-final span {
    color: #94a3b8;

    font-size: 8px;
    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .045em;
}

.match-prediction-final strong {
    color: #0f172a;

    font-size: 17px;
    line-height: 1;

    font-weight: 800;
}


/* =========================================================
   OUTCOME
   ========================================================= */

.match-prediction-outcome {
    grid-column: 1 / -1;

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

    gap: 4px;

    width: fit-content;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;
}

.match-prediction-outcome svg {
    width: 11px;
    height: 11px;
}


/* WIN */

.match-prediction-outcome.is-won {
    color: #059669;
}


/* LOSS */

.match-prediction-outcome.is-lost {
    color: #dc2626;
}


/* =========================================================
   PENDING
   ========================================================= */

.match-prediction-pending {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 5px;

    color: #64748b;

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

.match-prediction-pending strong {
    margin-left: auto;

    color: #0f172a;

    font-size: 10px;
}

.match-prediction-pending .match-status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #10b981;
}


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

.match-prediction-empty {
    color: #94a3b8;

    font-size: 10px;
    font-weight: 600;
}

/* Séparation plus nette entre résultat et Value Bet */
.match-row-value {
    min-width: 135px;
    padding: 0 14px;

    border-left: 1px solid #edf0f2;
}

/* Ne pas laisser la Value Bet déborder */
.match-value-content {
    max-width: 125px;
    overflow: hidden;
}

/* Équipe / sélection Value Bet sur une seule ligne */
.match-value-content small {
    display: block;

    max-width: 115px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* =========================================================
   PRONIO RESULT
   ========================================================= */

.match-row-prediction {
    min-width: 150px;
    height: 100%;

    display: flex;
    align-items: center;

    padding: 10px 14px;

    border-left: 1px solid #edf0f2;

    background: #ffffff;
}


/* =========================================================
   BOX
   ========================================================= */

.prediction-result-box {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


/* =========================================================
   TITLE
   ========================================================= */

.prediction-result-title {
    color: #94a3b8;

    font-size: 8px;
    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .08em;
}


/* =========================================================
   SCORES
   ========================================================= */

.prediction-result-scores {
    display: flex;
    align-items: flex-end;

    gap: 8px;
}

.prediction-result-score {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.prediction-result-score span {
    color: #94a3b8;

    font-size: 7px;
    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;
}

.prediction-result-score strong {
    color: #0f172a;

    font-size: 17px;
    line-height: 1;

    font-weight: 900;
}


/* =========================================================
   ARROW
   ========================================================= */

.prediction-result-arrow {
    padding-bottom: 1px;

    color: #cbd5e1;

    font-size: 13px;

    font-weight: 700;
}


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

.prediction-result-status {
    display: flex;
    align-items: center;

    gap: 4px;

    width: fit-content;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;
}

.prediction-result-status svg {
    width: 10px;
    height: 10px;
}


/* =========================================================
   WON
   ========================================================= */

.match-row-prediction.is-won {
    background: #f4fdf9;

    box-shadow:
        inset 2px 0 0 #10b981;
}

.prediction-result-status.is-won {
    color: #059669;
}

.match-row-prediction.is-won
.prediction-result-score strong {
    color: #047857;
}


/* =========================================================
   LOST
   ========================================================= */

.match-row-prediction.is-lost {
    background: #fff7f7;

    box-shadow:
        inset 2px 0 0 #ef4444;
}

.prediction-result-status.is-lost {
    color: #dc2626;
}

.match-row-prediction.is-lost
.prediction-result-score:first-child strong {
    color: #dc2626;
}


/* =========================================================
   PENDING
   ========================================================= */

.prediction-result-status.pending {
    color: #64748b;

    font-weight: 700;
}

.prediction-result-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #10b981;
}


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

.prediction-result-empty {
    color: #94a3b8;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   VALUE BET
   ========================================================= */

.match-row-value {
    min-width: 120px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border-left: 1px solid #edf0f2;

    background: #ffffff;
}

.match-value-content {
    width: 100%;
    max-width: 120px;
}

.match-value-content small {
    display: block;

    max-width: 115px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   PRONOSTIC INITIAL PRONIO
   ========================================================== */

.value-bet-team-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    min-width: 0;
}


.pronio-initial-prediction-badge {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    width: fit-content;

    padding: 4px 7px;

    border: 1px solid rgba(32, 217, 149, .25);
    border-radius: 999px;

    background: rgba(32, 217, 149, .09);

    color: #009c68;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}


.pronio-initial-prediction-badge i {
    font-size: 8px;
}


.pronio-initial-draw {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;

    width: 100%;

    margin-top: 5px;
}


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

@media (max-width: 768px) {

    .value-bet-team-name {
        flex-direction: column;
        align-items: flex-start;

        gap: 4px;
    }

    .pronio-initial-prediction-badge {
        padding: 3px 6px;

        font-size: 8px;
    }

}
/* ==========================================================
   VALUE BET ALIGNÉE AVEC LE PRONOSTIC PRONIO
   ========================================================== */

.value-bet-row.is-pronio-aligned {
    position: relative;

    border-color: rgba(32, 217, 149, .42);

    background:
        linear-gradient(
            90deg,
            rgba(32, 217, 149, .055),
            rgba(255, 255, 255, 0) 38%
        );

    box-shadow:
        inset 4px 0 0 #20d995;
}


/* HOVER */

.value-bet-row.is-pronio-aligned:hover {
    border-color: rgba(32, 217, 149, .65);

    background:
        linear-gradient(
            90deg,
            rgba(32, 217, 149, .09),
            rgba(255, 255, 255, 0) 45%
        );
}


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

.value-bet-pronio-match-badge {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    width: fit-content;

    margin-top: 6px;

    padding: 4px 7px;

    border: 1px solid rgba(32, 217, 149, .28);
    border-radius: 999px;

    background: rgba(32, 217, 149, .1);

    color: #009c68;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}

.value-bet-pronio-match-badge i {
    font-size: 9px;
}


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

@media (max-width: 768px) {

    .value-bet-row.is-pronio-aligned {
        box-shadow:
            inset 3px 0 0 #20d995;
    }

    .value-bet-pronio-match-badge {
        font-size: 8px;

        padding: 3px 6px;
    }

}

/* ==========================================================
   VALUE BET + PRONIO ALIGNÉS
   Match pas encore réglé
   ========================================================== */

.value-bet-row.is-pronio-aligned {
    border-color: rgba(32, 217, 149, .40);

    background:
        linear-gradient(
            90deg,
            rgba(32, 217, 149, .06),
            rgba(255, 255, 255, 0) 45%
        );

    box-shadow:
        inset 4px 0 0 #20d995;
}


/* ==========================================================
   GAGNÉ
   ========================================================== */

.value-bet-row.is-won {
    border-color: rgba(32, 217, 149, .55) !important;

    background:
        linear-gradient(
            90deg,
            rgba(32, 217, 149, .11),
            rgba(32, 217, 149, .025) 55%,
            transparent
        ) !important;

    box-shadow:
        inset 4px 0 0 #20d995 !important;
}


/* ==========================================================
   PERDU
   ========================================================== */

.value-bet-row.is-lost {
    border-color: rgba(239, 68, 68, .48) !important;

    background:
        linear-gradient(
            90deg,
            rgba(239, 68, 68, .10),
            rgba(239, 68, 68, .02) 55%,
            transparent
        ) !important;

    box-shadow:
        inset 4px 0 0 #ef4444 !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

.value-bet-row.is-pronio-aligned:hover {
    border-color: rgba(32, 217, 149, .65);
}

.value-bet-row.is-won:hover {
    border-color: rgba(32, 217, 149, .75) !important;
}

.value-bet-row.is-lost:hover {
    border-color: rgba(239, 68, 68, .70) !important;
}


/* ==========================================================
   RÉSULTAT GAGNÉ
   ========================================================== */

.value-bet-row.is-won .value-bet-result.won,
.value-bet-row.is-won .value-bet-profit.positive {
    color: #009c68;
}


/* ==========================================================
   RÉSULTAT PERDU
   ========================================================== */

.value-bet-row.is-lost .value-bet-result.lost,
.value-bet-row.is-lost .value-bet-profit.negative {
    color: #dc2626;
}


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

@media (max-width: 768px) {

    .value-bet-row.is-pronio-aligned,
    .value-bet-row.is-won {
        box-shadow:
            inset 3px 0 0 #20d995 !important;
    }

    .value-bet-row.is-lost {
        box-shadow:
            inset 3px 0 0 #ef4444 !important;
    }

}

/* ============================================================
   PRONIO - PRONOSTICS IA
   assets/styles/pages/ai.css
   ============================================================ */


/* ============================================================
   PAGE
   ============================================================ */

.ai-page {
    display: flex;
    flex-direction: column;
    gap: 22px;

    width: 100%;
}


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

.ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 4px 0 2px;
}

.ai-header-content {
    display: flex;
    align-items: center;
    gap: 16px;

    min-width: 0;
}

.ai-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    border: 1px solid rgba(18, 214, 151, 0.20);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 214, 151, 0.16),
            rgba(18, 214, 151, 0.05)
        );

    color: var(--primary, #12d697);

    font-size: 21px;
}

.ai-title {
    margin: 0;

    color: var(--text-primary, #111827);

    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.7px;
}

.ai-subtitle {
    margin: 6px 0 0;

    color: var(--text-muted, #6b7280);

    font-size: 13.5px;
    line-height: 1.5;
}

.ai-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 38px;

    padding: 0 14px;

    border: 1px solid rgba(18, 214, 151, 0.18);
    border-radius: 10px;

    background: rgba(18, 214, 151, 0.08);

    color: #079669;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.ai-header-badge i {
    font-size: 12px;
}


/* ============================================================
   INFORMATION
   ============================================================ */

.ai-info {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 15px 17px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #f9fafb;
}

.ai-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    margin-top: 1px;

    border-radius: 8px;

    background: rgba(18, 214, 151, 0.10);

    color: #08a875;

    font-size: 13px;
}

.ai-info > div:last-child {
    min-width: 0;
}

.ai-info strong {
    display: block;

    margin-bottom: 3px;

    color: #1f2937;

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

.ai-info p {
    margin: 0;

    color: #6b7280;

    font-size: 12.5px;
    line-height: 1.55;
}


/* ============================================================
   ANALYSIS CARD
   ============================================================ */

.ai-analysis-card {
    overflow: hidden;

    width: 100%;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.02),
        0 5px 18px rgba(15, 23, 42, 0.035);
}


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

.ai-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px;

    border-bottom: 1px solid #edf0f2;

    background:
        linear-gradient(
            90deg,
            rgba(18, 214, 151, 0.045),
            transparent 38%
        );
}

.ai-analysis-header > div:first-child {
    min-width: 0;
}

.ai-analysis-label {
    display: block;

    margin-bottom: 4px;

    color: #09a874;

    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ai-analysis-header h2 {
    margin: 0;

    color: #111827;

    font-size: 17px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.25px;
}


/* ============================================================
   ANALYSIS META
   ============================================================ */

.ai-analysis-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;

    flex-shrink: 0;
}

.ai-analysis-date,
.ai-analysis-generated {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #6b7280;

    font-size: 11.5px;
    font-weight: 600;

    white-space: nowrap;
}

.ai-analysis-date i,
.ai-analysis-generated i {
    color: #9ca3af;

    font-size: 11px;
}


/* ============================================================
   AI MODEL BAR
   ============================================================ */

.ai-model-bar {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 20px;

    border-bottom: 1px solid #edf0f2;

    background: #fafcfb;
}

.ai-model-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;
    flex: 0 0 27px;

    border-radius: 7px;

    background: rgba(18, 214, 151, 0.09);

    color: #09a874;

    font-size: 11px;
}

.ai-model-bar-content {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;
}

.ai-model-bar-content span {
    color: #9ca3af;

    font-size: 10.5px;
    font-weight: 600;

    white-space: nowrap;
}

.ai-model-bar-content strong {
    overflow: hidden;

    color: #4b5563;

    font-size: 10.5px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   ANALYSIS CONTENT
   ============================================================ */

.ai-analysis-content {
    padding: 22px 24px 25px;
}


/* ============================================================
   GENERATED AI CONTENT
   ============================================================ */

.ai-generated-content {
    position: relative;

    width: 100%;

    color: #374151;

    font-size: 13.5px;
    line-height: 1.75;

    overflow-wrap: anywhere;
    word-break: normal;
}

.ai-generated-content::before {
    content: '';

    position: absolute;

    top: 0;
    bottom: 0;
    left: -24px;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #12d697,
            rgba(18, 214, 151, 0.08)
        );
}


/* ============================================================
   AI CONTENT TYPOGRAPHY
   ============================================================ */

.ai-generated-content strong {
    color: #111827;

    font-weight: 750;
}

.ai-generated-content em {
    color: #4b5563;
}

.ai-generated-content a {
    color: #059669;

    font-weight: 600;

    text-decoration: none;
}

.ai-generated-content a:hover {
    text-decoration: underline;
}


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

.ai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 280px;

    padding: 55px 20px;

    text-align: center;
}

.ai-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 16px;

    border: 1px solid rgba(18, 214, 151, 0.10);
    border-radius: 17px;

    background: rgba(18, 214, 151, 0.08);

    color: #10b981;

    font-size: 22px;
}

.ai-empty h3 {
    margin: 0 0 6px;

    color: #111827;

    font-size: 15px;
    font-weight: 750;
}

.ai-empty p {
    max-width: 390px;

    margin: 0;

    color: #9ca3af;

    font-size: 12.5px;
    line-height: 1.55;
}


/* ============================================================
   EMPTY COMMAND
   ============================================================ */

.ai-empty-command {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    margin-top: 16px;
    padding: 7px 11px;

    border: 1px solid #e5e7eb;
    border-radius: 7px;

    background: #f9fafb;

    color: #6b7280;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 10.5px;

    overflow-wrap: anywhere;
}


/* ============================================================
   DISCLAIMER
   ============================================================ */

.ai-disclaimer {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 16px;

    border: 1px solid #f1e6c8;
    border-radius: 11px;

    background: #fffcf4;

    color: #8a6d2f;
}

.ai-disclaimer > i {
    flex: 0 0 auto;

    color: #d5a72e;

    font-size: 15px;
}

.ai-disclaimer > div {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.ai-disclaimer strong {
    color: #725b26;

    font-size: 11.5px;
    font-weight: 750;

    white-space: nowrap;
}

.ai-disclaimer span {
    color: #9a814a;

    font-size: 11.5px;
    line-height: 1.45;
}


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

.ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 300px;

    color: #6b7280;
}

.ai-loading-spinner {
    width: 34px;
    height: 34px;

    margin-bottom: 13px;

    border: 3px solid #e5e7eb;
    border-top-color: #12d697;
    border-radius: 50%;

    animation: ai-spin 0.7s linear infinite;
}

.ai-loading span {
    font-size: 12px;
    font-weight: 600;
}

@keyframes ai-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   SMALL INTERACTIONS
   ============================================================ */

.ai-header-icon,
.ai-info-icon,
.ai-model-bar-icon,
.ai-empty-icon {
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.ai-header:hover .ai-header-icon {
    transform: translateY(-1px);

    background: rgba(18, 214, 151, 0.13);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .ai-header {
        align-items: flex-start;
    }

    .ai-header-badge {
        display: none;
    }

    .ai-analysis-header {
        align-items: flex-start;
    }

    .ai-analysis-meta {
        align-items: flex-end;
        flex-direction: column;
        gap: 5px;
    }

    .ai-analysis-content {
        padding: 20px 18px 22px;
    }

    .ai-generated-content::before {
        left: -18px;
    }

}


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

@media (max-width: 650px) {

    .ai-page {
        gap: 16px;
    }


    /* HEADER */

    .ai-header-content {
        align-items: flex-start;
    }

    .ai-header-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;

        border-radius: 12px;

        font-size: 18px;
    }

    .ai-title {
        font-size: 22px;
    }

    .ai-subtitle {
        font-size: 12px;
    }


    /* INFO */

    .ai-info {
        padding: 13px;
    }


    /* ANALYSIS */

    .ai-analysis-card {
        border-radius: 12px;
    }

    .ai-analysis-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;

        padding: 16px;
    }

    .ai-analysis-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .ai-analysis-date,
    .ai-analysis-generated {
        font-size: 11px;
    }


    /* MODEL */

    .ai-model-bar {
        padding: 10px 16px;
    }

    .ai-model-bar-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .ai-model-bar-content span,
    .ai-model-bar-content strong {
        white-space: normal;
    }


    /* CONTENT */

    .ai-analysis-content {
        padding: 18px 16px 20px;
    }

    .ai-generated-content {
        font-size: 13px;
        line-height: 1.7;
    }

    .ai-generated-content::before {
        left: -16px;
    }


    /* EMPTY */

    .ai-empty {
        min-height: 240px;

        padding: 40px 15px;
    }

    .ai-empty-icon {
        width: 52px;
        height: 52px;

        border-radius: 15px;

        font-size: 20px;
    }


    /* DISCLAIMER */

    .ai-disclaimer {
        align-items: flex-start;

        padding: 12px 13px;
    }

    .ai-disclaimer > i {
        margin-top: 2px;
    }

    .ai-disclaimer > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .ai-disclaimer strong {
        white-space: normal;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .ai-header-icon {
        display: none;
    }

    .ai-title {
        font-size: 21px;
    }

    .ai-analysis-header h2 {
        font-size: 16px;
    }

    .ai-info-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .ai-empty-command {
        font-size: 9.5px;
    }

}

/* ============================================================
   AI SECTIONS
   ============================================================ */

.ai-section {
    margin-bottom: 32px;
}

.ai-section:last-child {
    margin-bottom: 0;
}

.ai-section h2 {
    margin: 0 0 16px;

    color: #111827;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.ai-section h3 {
    margin: 20px 0 10px;

    color: #1f2937;

    font-size: 14px;
    font-weight: 750;
}

.ai-section p {
    margin: 0 0 14px;

    color: #4b5563;

    line-height: 1.7;
}

.ai-section ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.ai-section li {
    margin-bottom: 7px;

    color: #4b5563;

    line-height: 1.6;
}


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

.ai-table {
    width: 100%;

    margin: 14px 0 18px;

    border-collapse: separate;
    border-spacing: 0;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;
}

.ai-table thead {
    background: #f8faf9;
}

.ai-table th {
    padding: 11px 13px;

    border-bottom: 1px solid #e5e7eb;

    color: #6b7280;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.35px;

    text-align: left;
    text-transform: uppercase;

    white-space: nowrap;
}

.ai-table td {
    padding: 12px 13px;

    border-bottom: 1px solid #f0f1f2;

    color: #374151;

    font-size: 12.5px;
    line-height: 1.5;

    vertical-align: middle;
}

.ai-table tbody tr:last-child td {
    border-bottom: 0;
}

.ai-table tbody tr {
    transition: background-color 0.15s ease;
}

.ai-table tbody tr:hover {
    background: #fafcfb;
}


/* ============================================================
   POSITIVE / NEGATIVE
   ============================================================ */

.ai-positive {
    display: inline-flex;

    padding: 3px 7px;

    border-radius: 6px;

    background: rgba(16, 185, 129, 0.09);

    color: #059669;

    font-size: 11.5px;
    font-weight: 800;
}

.ai-negative {
    display: inline-flex;

    padding: 3px 7px;

    border-radius: 6px;

    background: rgba(239, 68, 68, 0.08);

    color: #dc2626;

    font-size: 11.5px;
    font-weight: 800;
}


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

@media (max-width: 750px) {

    .ai-generated-content {
        overflow-x: auto;
    }

    .ai-table {
        min-width: 650px;
    }

}

.team-logo-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.team-logo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.team-logo-title {
    margin: 0 0 7px;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.team-logo-description {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.team-logo-stats {
    display: flex;
    gap: 10px;
}

.team-logo-stat {
    min-width: 95px;
    padding: 11px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
}

.team-logo-stat strong {
    display: block;
    font-size: 20px;
}

.team-logo-stat span {
    font-size: 11px;
    color: #64748b;
}

.team-logo-stat.is-success strong {
    color: #059669;
}

.team-logo-stat.is-warning strong {
    color: #d97706;
}


/* FILTERS */

.team-logo-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.team-logo-search {
    position: relative;
    flex: 1;
}

.team-logo-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.team-logo-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
}

.team-logo-search input:focus {
    border-color: #10b981;
}

.team-logo-filter-tabs {
    display: flex;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
}

.team-logo-filter-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.team-logo-filter-tab.is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.team-logo-filter-tab span {
    padding: 1px 6px;
    border-radius: 10px;
    background: #fee2e2;
    color: #dc2626;
}

.team-logo-search-button {
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


/* LIST */

.team-logo-list {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.team-logo-row {
    display: grid;
    grid-template-columns: 64px minmax(180px, 1fr) minmax(250px, 2fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 82px;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.team-logo-row:last-child {
    border-bottom: 0;
}

.team-logo-row:hover {
    background: #fafafa;
}


/* LOGO */

.team-logo-preview {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.team-logo-preview img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.team-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #94a3b8;
}


/* INFO */

.team-logo-name {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.team-logo-status {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
}

.team-logo-status .is-defined {
    color: #059669;
}

.team-logo-status .is-missing {
    color: #d97706;
}


/* URL */

.team-logo-url input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    color: #475569;
    font-size: 12px;
    outline: none;
}

.team-logo-url input:focus {
    background: #fff;
    border-color: #10b981;
}


/* ACTIONS */

.team-logo-actions {
    display: flex;
    gap: 6px;
}

.team-logo-button {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.team-logo-button:hover {
    background: #f8fafc;
}

.team-logo-button.is-save {
    color: #059669;
}

.team-logo-button.is-find {
    color: #2563eb;
}

.team-logo-button.is-delete {
    color: #dc2626;
}

.team-logo-button:disabled {
    opacity: .5;
    cursor: wait;
}


/* EMPTY */

.team-logo-empty {
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    color: #64748b;
}

.team-logo-empty i {
    margin-bottom: 8px;
    font-size: 32px;
    color: #cbd5e1;
}

.team-logo-empty strong {
    color: #111827;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .team-logo-row {
        grid-template-columns: 60px 1fr auto;
    }

    .team-logo-url {
        grid-column: 2 / 4;
    }

}

@media (max-width: 800px) {

    .team-logo-header {
        flex-direction: column;
    }

    .team-logo-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .team-logo-row {
        grid-template-columns: 55px 1fr;
    }

    .team-logo-url {
        grid-column: 1 / 3;
    }

    .team-logo-actions {
        grid-column: 1 / 3;
        justify-content: flex-end;
    }

}

/* ============================================================
   PRONIO LOGIN
   ============================================================ */

.login-body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(36, 255, 171, .09),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(34, 197, 94, .07),
            transparent 32%
        ),
        #050908;

    color: #ffffff;

    overflow-x: hidden;
}


/* ============================================================
   PAGE
   ============================================================ */

.login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}


/* ============================================================
   BACKGROUND
   ============================================================ */

.login-background {
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;
    overflow: hidden;
}


/* GRID */

.login-background::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 10%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 10%,
            transparent 72%
        );
}


/* NOISE / DARK LAYER */

.login-background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 8, .25),
            rgba(5, 9, 8, .68)
        );
}


/* ============================================================
   GLOWS
   ============================================================ */

.login-glow {
    position: absolute;

    border-radius: 999px;

    filter: blur(120px);

    opacity: .32;
}

.login-glow-one {
    width: 420px;
    height: 420px;

    left: -140px;
    top: -100px;

    background: #12e394;
}

.login-glow-two {
    width: 360px;
    height: 360px;

    right: -110px;
    top: 34%;

    background: #0da66f;

    opacity: .16;
}

.login-glow-three {
    width: 240px;
    height: 240px;

    left: 44%;
    bottom: -130px;

    background: #1effa8;

    opacity: .12;
}


/* ============================================================
   FOOTBALL BACKGROUND
   ============================================================ */

.login-pitch {
    position: absolute;

    width: min(840px, 65vw);

    left: -100px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-9deg)
        perspective(1000px)
        rotateX(18deg);

    color: #32f4ac;

    opacity: .48;
}


.login-ball {
    position: absolute;

    width: 170px;
    height: 170px;

    left: 44%;
    top: 11%;

    color: #3ff5b2;

    opacity: .065;

    transform: rotate(-18deg);

    animation:
        loginBallFloat 8s ease-in-out infinite;
}


.login-tactical {
    position: absolute;

    color: #31e8a4;

    opacity: .12;
}


.login-tactical-one {
    width: 470px;

    left: 10%;
    bottom: 5%;

    transform: rotate(-7deg);
}


.login-tactical-two {
    width: 390px;

    right: 3%;
    top: 3%;

    opacity: .06;

    transform: rotate(15deg);
}


@keyframes loginBallFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-18deg);
    }

    50% {
        transform:
            translateY(16px)
            rotate(-10deg);
    }
}


/* ============================================================
   SHELL
   ============================================================ */

.login-shell {
    width: min(1420px, calc(100% - 80px));
    min-height: 100vh;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, 520px);

    align-items: center;

    gap: 100px;

    padding:
        60px
        0;

    box-sizing: border-box;
}


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

.login-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 650px;
}


.login-hero-content {
    max-width: 650px;
}


.login-brand {
    display: flex;
    align-items: center;

    margin-bottom: 52px;
}


.login-logo {
    display: block;

    width: auto;
    max-width: 220px;
    height: 52px;

    object-fit: contain;
    object-position: left center;
}


.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding:
        8px
        13px;

    margin-bottom: 25px;

    border:
        1px solid rgba(48, 238, 166, .18);

    border-radius: 999px;

    background:
        rgba(33, 220, 150, .06);

    color: #77f3c4;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.login-badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22e89a;

    box-shadow:
        0 0 0 4px rgba(34, 232, 154, .09),
        0 0 18px rgba(34, 232, 154, .6);
}


.login-hero-title {
    max-width: 650px;

    margin:
        0
        0
        25px;

    color: #f8fafc;

    font-size:
        clamp(
            44px,
            5.4vw,
            77px
        );

    font-weight: 800;

    letter-spacing: -.055em;
    line-height: .98;
}


.login-hero-title span {
    display: block;

    margin-top: 6px;

    color: #22e89a;

    text-shadow:
        0 0 36px rgba(34, 232, 154, .14);
}


.login-hero-description {
    max-width: 560px;

    margin:
        0
        0
        42px;

    color: #8f9c98;

    font-size: 16px;
    line-height: 1.75;
}


/* ============================================================
   FEATURES
   ============================================================ */

.login-features {
    display: grid;
    gap: 13px;

    max-width: 540px;
}


.login-feature {
    display: flex;
    align-items: center;

    gap: 15px;

    padding:
        13px
        14px;

    border:
        1px solid rgba(255, 255, 255, .045);

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025),
            rgba(255, 255, 255, .005)
        );
}


.login-feature-icon {
    flex: 0 0 auto;

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

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background:
        rgba(34, 232, 154, .08);

    border:
        1px solid rgba(34, 232, 154, .10);

    color: #31e8a4;
}


.login-feature-icon svg {
    width: 21px;
    height: 21px;
}


.login-feature > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.login-feature strong {
    color: #dce7e3;

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


.login-feature span:not(.login-feature-icon) {
    color: #70807a;

    font-size: 11px;
}


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

.login-panel {
    position: relative;

    width: 100%;
}


.login-card {
    position: relative;

    padding:
        42px
        42px
        36px;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 24, .90),
            rgba(8, 14, 12, .86)
        );

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .035);

    overflow: hidden;
}


.login-card::before {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(49, 232, 164, .75),
            transparent
        );
}


.login-card::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(34, 232, 154, .12);

    filter: blur(50px);

    pointer-events: none;
}


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

.login-card-top {
    margin-bottom: 31px;
}


.login-card-kicker {
    display: block;

    margin-bottom: 10px;

    color: #22e89a;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.login-title {
    margin:
        0
        0
        9px;

    color: #f5faf8;

    font-size: 29px;
    font-weight: 800;

    letter-spacing: -.035em;
}


.login-subtitle {
    margin: 0;

    color: #75847f;

    font-size: 13px;
    line-height: 1.6;
}


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

.login-alert {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 22px;

    padding:
        12px
        13px;

    border-radius: 11px;

    font-size: 12px;
    line-height: 1.5;
}


.login-alert-error {
    border:
        1px solid rgba(255, 95, 95, .16);

    background:
        rgba(255, 74, 74, .055);

    color: #ff9999;
}


.login-alert-success {
    border:
        1px solid rgba(34, 232, 154, .18);

    background:
        rgba(34, 232, 154, .055);

    color: #66efbc;
}


.login-alert-icon {
    flex: 0 0 auto;

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

    width: 21px;
    height: 21px;

    border-radius: 50%;

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

    font-size: 10px;
    font-weight: 900;
}


/* ============================================================
   FORM
   ============================================================ */

.login-form {
    display: grid;
    gap: 19px;
}


.login-field {
    display: grid;

    gap: 8px;
}


.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.login-label {
    color: #bcc8c3;

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


.login-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;
}


.login-input-icon {
    position: absolute;

    left: 15px;

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

    width: 20px;
    height: 20px;

    color: #66756f;

    pointer-events: none;

    transition:
        color .2s ease;
}


.login-input-icon svg {
    width: 18px;
    height: 18px;
}


.login-input {
    width: 100%;
    height: 51px;

    padding:
        0
        48px;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, .075);

    border-radius: 12px;

    outline: none;

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

    color: #edf4f1;

    font-family: inherit;
    font-size: 13px;

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


.login-input::placeholder {
    color: #53605c;
}


.login-input:hover {
    border-color:
        rgba(255, 255, 255, .13);
}


.login-input:focus {
    border-color:
        rgba(34, 232, 154, .50);

    background:
        rgba(34, 232, 154, .025);

    box-shadow:
        0 0 0 4px rgba(34, 232, 154, .055);
}


.login-input-wrapper:focus-within
.login-input-icon {
    color: #22e89a;
}


/* ============================================================
   PASSWORD
   ============================================================ */

.login-password-input {
    padding-right: 54px;
}


.login-password-toggle {
    position: absolute;

    right: 13px;

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

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #63716c;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.login-password-toggle:hover {
    color: #22e89a;

    background:
        rgba(34, 232, 154, .06);
}


.login-password-toggle svg {
    width: 19px;
    height: 19px;
}


/* ============================================================
   OPTIONS
   ============================================================ */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: -2px;
}


.login-remember {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #7c8a85;

    font-size: 11px;

    cursor: pointer;
}


.login-remember input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


.login-custom-checkbox {
    position: relative;

    width: 16px;
    height: 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, .14);

    border-radius: 5px;

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

    transition:
        background .2s ease,
        border-color .2s ease;
}


.login-remember input:checked
+
.login-custom-checkbox {
    border-color: #22e89a;
    background: #22e89a;
}


.login-remember input:checked
+
.login-custom-checkbox::after {
    content: "";

    position: absolute;

    left: 4px;
    top: 1px;

    width: 5px;
    height: 9px;

    border:
        solid #06100c;

    border-width:
        0
        2px
        2px
        0;

    transform: rotate(45deg);
}


/* ============================================================
   SUBMIT
   ============================================================ */

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;
    height: 52px;

    margin-top: 5px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #20e599,
            #16c984
        );

    color: #04120c;

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 11px 32px rgba(23, 218, 143, .13);

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


.login-submit svg {
    width: 18px;
    height: 18px;

    transition:
        transform .2s ease;
}


.login-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 15px 38px rgba(23, 218, 143, .20);

    filter: brightness(1.04);
}


.login-submit:hover svg {
    transform: translateX(3px);
}


/* ============================================================
   SEPARATOR
   ============================================================ */

.login-separator {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 12px;

    margin:
        27px
        0
        18px;
}


.login-separator span {
    height: 1px;

    background:
        rgba(255, 255, 255, .065);
}


.login-separator em {
    color: #56635f;

    font-size: 10px;
    font-style: normal;
}


/* ============================================================
   REGISTER
   ============================================================ */

.login-register-button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 48px;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius: 12px;

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

    color: #c6d0cc;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}


.login-register-button:hover {
    border-color:
        rgba(34, 232, 154, .23);

    background:
        rgba(34, 232, 154, .045);

    color: #56efb7;
}


/* ============================================================
   SECURITY
   ============================================================ */

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 23px;

    color: #53615c;

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .10em;
}


.login-security svg {
    width: 14px;
    height: 14px;

    color: #527266;
}


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

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 22px;

    color: #46524e;

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .09em;
}


.login-footer-dot {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        #22e89a;

    opacity: .5;
}


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

@media (max-width: 1100px) {

    .login-shell {
        width:
            min(
                100% - 48px,
                620px
            );

        grid-template-columns: 1fr;

        gap: 30px;

        padding:
            45px
            0;
    }


    .login-hero {
        min-height: auto;

        text-align: center;
    }


    .login-hero-content {
        margin:
            0
            auto;
    }


    .login-brand {
        justify-content: center;

        margin-bottom: 30px;
    }


    .login-hero-title {
        font-size:
            clamp(
                38px,
                8vw,
                58px
            );
    }


    .login-hero-description {
        margin:
            0
            auto
            30px;
    }


    .login-features {
        display: none;
    }


    .login-pitch {
        width: 1000px;

        left: 50%;
        top: 38%;

        transform:
            translate(-50%, -50%)
            rotate(-8deg);

        opacity: .23;
    }


    .login-ball {
        left: auto;
        right: -30px;
    }

}


@media (max-width: 640px) {

    .login-shell {
        width:
            calc(
                100% - 28px
            );

        padding:
            26px
            0;
    }


    .login-brand {
        margin-bottom: 22px;
    }


    .login-logo {
        max-width: 170px;
        height: 42px;
    }


    .login-badge {
        margin-bottom: 18px;
    }


    .login-hero-title {
        margin-bottom: 16px;

        font-size:
            clamp(
                34px,
                12vw,
                48px
            );
    }


    .login-hero-description {
        font-size: 13px;
    }


    .login-card {
        padding:
            30px
            22px
            26px;

        border-radius: 20px;
    }


    .login-title {
        font-size: 24px;
    }


    .login-input {
        height: 50px;
    }


    .login-submit {
        height: 50px;
    }


    .login-footer {
        flex-wrap: wrap;
    }

}


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

    .login-ball {
        animation: none;
    }

}

/* ============================================================
   REGISTER
   ============================================================ */

.register-shell {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(520px, 600px);

    gap: 80px;

    padding:
        45px
        0;
}


.register-hero {
    min-height: 760px;
}


.register-card {
    padding:
        38px
        40px
        34px;
}


/* ============================================================
   FORM
   ============================================================ */

.register-form {
    gap: 17px;
}


.register-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.register-input {
    padding-left: 16px;
}


.login-input-wrapper
.register-input {
    padding-left: 48px;
}


/* ============================================================
   ERRORS
   ============================================================ */

.register-errors {
    margin-top: 5px;

    color: #ff8787;

    font-size: 10px;
    line-height: 1.45;
}


.register-errors ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.register-errors li {
    margin: 0;
}


/* ============================================================
   ACCESS CODE
   ============================================================ */

.register-code-info {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: -5px;

    padding:
        10px
        12px;

    border:
        1px solid rgba(34, 232, 154, .10);

    border-radius: 10px;

    background:
        rgba(34, 232, 154, .035);

    color: #71817b;

    font-size: 10px;
    line-height: 1.5;
}


.register-code-info-icon {
    flex: 0 0 auto;

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

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background:
        rgba(34, 232, 154, .10);

    color: #22e89a;

    font-size: 9px;
    font-weight: 900;
}


/* ============================================================
   PASSWORD RULES
   ============================================================ */

.register-password-rules {
    margin-top: -6px;

    padding:
        12px
        13px;

    border:
        1px solid rgba(255, 255, 255, .055);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .018);
}


.register-password-rules-title {
    display: block;

    margin-bottom: 9px;

    color: #67756f;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.register-password-rules-grid {
    display: flex;
    flex-wrap: wrap;

    gap:
        7px
        12px;
}


.register-password-rule {
    position: relative;

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

    gap: 6px;

    color: #5f6d68;

    font-size: 9px;

    transition:
        color .2s ease;
}


.register-password-rule::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #394541;

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


.register-password-rule.is-valid {
    color: #67dbae;
}


.register-password-rule.is-valid::before {
    background:
        #22e89a;

    box-shadow:
        0 0 8px rgba(34, 232, 154, .35);
}


/* ============================================================
   TERMS
   ============================================================ */

.register-terms {
    margin-top: 2px;
}


.register-terms-label {
    line-height: 1.45;
}


.register-terms-checkbox {
    accent-color: #22e89a;

    width: 15px;
    height: 15px;

    cursor: pointer;
}


/* ============================================================
   REGISTER PASSWORD BUTTON
   ============================================================ */

.register-card
.login-password-toggle {
    right: 11px;
}


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

@media (max-width: 1200px) {

    .register-shell {
        width:
            min(
                100% - 48px,
                680px
            );

        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .register-hero {
        min-height: auto;

        text-align: center;
    }


    .register-hero
    .login-hero-content {
        margin:
            0
            auto;
    }

}


@media (max-width: 640px) {

    .register-card {
        padding:
            28px
            20px
            24px;
    }


    .register-row {
        grid-template-columns:
            1fr;
    }


    .register-password-rules-grid {
        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }

}


@media (max-width: 420px) {

    .register-password-rules-grid {
        grid-template-columns:
            1fr;
    }

}

/* ============================================================
   ACCESS CODES
   ============================================================ */

.access-codes-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.access-codes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.access-codes-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.access-codes-description {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
}


/* ============================================================
   CREATE
   ============================================================ */

.access-codes-create {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #22e89a;
    color: #04100c;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.access-codes-create:hover {
    background: #38f0aa;
}

.access-codes-create:disabled {
    opacity: .55;
    cursor: wait;
}


/* ============================================================
   STATS
   ============================================================ */

.access-codes-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.access-code-stat {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.access-code-stat-label {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.access-code-stat strong {
    font-size: 25px;
    font-weight: 800;
}


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

.access-codes-toolbar {
    display: flex;
}

.access-codes-search {
    width: 100%;
    max-width: 520px;
    display: flex;
    gap: 8px;
}

.access-codes-search-input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
}

.access-codes-search-input:focus {
    border-color: #22e89a;
}

.access-codes-search-button,
.access-code-secondary-button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-weight: 700;
    cursor: pointer;
}


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

.access-codes-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.access-codes-tab {
    padding: 9px 14px;
    border-radius: 9px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.access-codes-tab:hover {
    background: #f1f5f9;
}

.access-codes-tab.is-active {
    background: #0f172a;
    color: #fff;
}


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

.access-codes-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.access-codes-table-wrapper {
    overflow-x: auto;
}

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

.access-codes-table th {
    padding: 13px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.access-codes-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 13px;
    vertical-align: middle;
}

.access-codes-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ============================================================
   CODE
   ============================================================ */

.access-code-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.access-code-value code {
    padding: 7px 9px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.access-code-copy {
    border: 0;
    background: transparent;
    color: #0f9f6e;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}


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

.access-code-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.access-code-status.is-available {
    background: #dcfce7;
    color: #15803d;
}

.access-code-status.is-used {
    background: #dbeafe;
    color: #1d4ed8;
}

.access-code-status.is-expired {
    background: #fee2e2;
    color: #b91c1c;
}

.access-code-status.is-disabled {
    background: #f1f5f9;
    color: #64748b;
}

.access-code-date,
.access-code-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.access-code-date small,
.access-code-user small {
    color: #94a3b8;
    font-size: 11px;
}

.access-code-empty-value {
    color: #cbd5e1;
}


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

.access-code-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.access-code-action {
    padding: 7px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.access-code-action:hover {
    background: #f8fafc;
}

.access-code-action.is-delete {
    color: #dc2626;
}

.access-code-action.is-delete:hover {
    border-color: #fecaca;
    background: #fef2f2;
}


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

.access-codes-empty {
    padding: 70px 30px;
    text-align: center;
}

.access-codes-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 13px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 800;
}

.access-codes-empty h3 {
    margin: 0;
}

.access-codes-empty p {
    margin: 7px 0 0;
    color: #94a3b8;
    font-size: 13px;
}


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

body.has-modal {
    overflow: hidden;
}

.access-code-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.access-code-modal.is-open {
    display: flex;
}

.access-code-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

.access-code-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 470px;
    padding: 26px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
}

.access-code-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.access-code-modal-header h2 {
    margin: 0;
    font-size: 21px;
}

.access-code-modal-header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.access-code-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 21px;
    cursor: pointer;
}

.access-code-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.access-code-form-field label {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.access-code-form-field input {
    height: 46px;
    padding: 0 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
}

.access-code-form-field input:focus {
    border-color: #22e89a;
}

.access-code-form-field small {
    color: #94a3b8;
    font-size: 11px;
}

.access-code-modal-error {
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
}

.access-code-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 25px;
}


/* ============================================================
   GENERATED
   ============================================================ */

.access-code-generated {
    text-align: center;
}

.access-code-generated-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-size: 22px;
    font-weight: 900;
}

.access-code-generated h2 {
    margin: 0;
}

.access-code-generated p {
    margin: 7px 0 22px;
    color: #64748b;
    font-size: 13px;
}

.access-code-generated-value {
    padding: 16px;
    border: 1px dashed #22e89a;
    border-radius: 12px;
    background: #f0fdf4;
    color: #0f172a;
    font-family: monospace;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .06em;
}

.access-code-generated-expiration {
    margin: 9px 0 20px;
    color: #64748b;
    font-size: 12px;
}

.access-code-generated .access-code-secondary-button {
    margin-left: 7px;
}


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

@media (max-width: 1100px) {

    .access-codes-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {

    .access-codes-header {
        align-items: stretch;
        flex-direction: column;
    }

    .access-codes-create {
        width: 100%;
    }

    .access-codes-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .access-codes-search {
        max-width: none;
        flex-direction: column;
    }

    .access-codes-search-button {
        height: 42px;
    }

    .access-code-modal-footer {
        flex-direction: column-reverse;
    }

    .access-code-modal-footer button {
        width: 100%;
    }
}

/* ============================================================
   PROFILE
   ============================================================ */

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.profile-description {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
}


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

.profile-user-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;

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

    border-radius: 18px;

    background: #0f172a;
    color: #22e89a;

    font-size: 20px;
    font-weight: 900;
}

.profile-user-info h2 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
}

.profile-user-info p {
    margin: 4px 0 10px;
    color: #64748b;
    font-size: 13px;
}

.profile-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-badge {
    padding: 5px 9px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
}

.profile-badge.is-admin {
    background: #ede9fe;
    color: #6d28d9;
}

.profile-badge.is-verified {
    background: #dcfce7;
    color: #15803d;
}

.profile-badge.is-warning {
    background: #fef3c7;
    color: #b45309;
}


/* ============================================================
   GRID
   ============================================================ */

.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}


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

.profile-card {
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}

.profile-card-header {
    margin-bottom: 24px;
}

.profile-card-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
}

.profile-card-header p {
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: 12px;
}


/* ============================================================
   FORM
   ============================================================ */

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile-field label {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.profile-input {
    width: 100%;
    height: 45px;
    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    outline: none;

    background: #fff;
    color: #0f172a;

    font: inherit;
    font-size: 13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.profile-input:focus {
    border-color: #22e89a;
    box-shadow: 0 0 0 3px rgba(34, 232, 154, .08);
}

.profile-errors {
    color: #dc2626;
    font-size: 11px;
}

.profile-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-form-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.profile-submit {
    min-height: 42px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: #22e89a;
    color: #04100c;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.profile-submit:hover {
    background: #38f0aa;
}


/* ============================================================
   ACCOUNT
   ============================================================ */

.profile-account-list {
    display: flex;
    flex-direction: column;
}

.profile-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 14px 0;

    border-bottom: 1px solid #f1f5f9;
}

.profile-account-item:first-child {
    padding-top: 0;
}

.profile-account-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-account-item span {
    color: #64748b;
    font-size: 12px;
}

.profile-account-item strong {
    color: #334155;
    font-size: 12px;
    text-align: right;
}


/* ============================================================
   PASSWORD
   ============================================================ */

.profile-password-form {
    max-width: 760px;
}

.profile-password-wrapper {
    position: relative;
}

.profile-password-wrapper .profile-input {
    padding-right: 85px;
}

.profile-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    border: 0;
    background: transparent;

    color: #0f9f6e;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


/* ============================================================
   ALERT
   ============================================================ */

.profile-alert {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 15px;

    border-radius: 10px;

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

.profile-alert.is-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.profile-alert-icon {
    font-weight: 900;
}


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

@media (max-width: 900px) {

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .profile-form-row {
        grid-template-columns: 1fr;
    }

    .profile-user-card {
        align-items: flex-start;
    }

    .profile-form-footer {
        display: block;
    }

    .profile-submit {
        width: 100%;
    }
}

/* ============================================================
   PRONIO
   ADMINISTRATION - UTILISATEURS
   ============================================================ */

.admin-users-page {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 26px;
}


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

.admin-users-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}


.admin-users-kicker {
    display: block;

    margin-bottom: 8px;

    color: #18d79b;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .13em;
    text-transform: uppercase;
}


.admin-users-title {
    margin: 0;

    color: #17231f;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -.035em;
}


.admin-users-description {
    margin:
        9px
        0
        0;

    color: #78847f;

    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   STATISTIQUES
   ============================================================ */

.admin-users-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.admin-users-stat {
    position: relative;

    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        18px
        20px
        18px
        22px;

    box-sizing: border-box;

    border:
        1px solid #e7ecea;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 18px rgba(21, 36, 31, .035);

    overflow: hidden;
}


.admin-users-stat::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background: #1ee0a0;
}


.admin-users-stat span {
    display: block;

    margin-bottom: 9px;

    color: #84908b;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.admin-users-stat strong {
    display: block;

    color: #17231f;

    font-size: 27px;
    font-weight: 800;

    line-height: 1;
}


/* ============================================================
   FILTRES
   ============================================================ */

.admin-users-filters {
    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        180px
        190px
        190px
        auto;

    align-items: center;

    gap: 10px;
}


.admin-users-search {
    position: relative;
}


.admin-users-filters input,
.admin-users-filters select {
    width: 100%;
    height: 44px;

    margin: 0;

    padding:
        0
        14px;

    box-sizing: border-box;

    border:
        1px solid #dde5e1;

    border-radius: 11px;

    outline: none;

    background: #ffffff;

    color: #25322d;

    font-family: inherit;
    font-size: 11px;

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


.admin-users-filters input::placeholder {
    color: #9ca6a2;
}


.admin-users-filters input:hover,
.admin-users-filters select:hover {
    border-color: #ccd8d3;
}


.admin-users-filters input:focus,
.admin-users-filters select:focus {
    border-color: #1edc9d;

    box-shadow:
        0 0 0 3px rgba(30, 220, 157, .08);
}


.admin-users-filters select {
    cursor: pointer;
}


.admin-users-filters select option {
    background: #ffffff;

    color: #26332e;
}


.admin-users-filter-button {
    height: 44px;

    padding:
        0
        20px;

    border: 0;
    border-radius: 11px;

    background: #1edc9d;

    color: #073025;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

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


.admin-users-filter-button:hover {
    transform: translateY(-1px);

    background: #19cf92;

    box-shadow:
        0 7px 18px rgba(30, 220, 157, .16);
}


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

.admin-users-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid #e5ebe8;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 8px 26px rgba(21, 36, 31, .045);
}


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

.admin-users-table {
    width: 100%;
    min-width: 1100px;

    margin: 0;

    border-collapse: separate;
    border-spacing: 0;

    background: transparent;
}


.admin-users-table thead {
    background: #f8faf9;
}


.admin-users-table th {
    height: 45px;

    padding:
        0
        16px;

    border: 0;
    border-bottom:
        1px solid #e9eeec;

    background: transparent;

    color: #87938e;

    font-size: 9px;
    font-weight: 800;

    text-align: left;
    vertical-align: middle;

    letter-spacing: .08em;
    text-transform: uppercase;

    white-space: nowrap;
}


.admin-users-table td {
    padding:
        15px
        16px;

    border: 0;
    border-bottom:
        1px solid #eef2f0;

    background: transparent;

    color: #69756f;

    font-size: 11px;

    vertical-align: middle;

    white-space: nowrap;
}


.admin-users-table tbody tr {
    transition:
        background .15s ease;
}


.admin-users-table tbody tr:hover td {
    background: #fbfdfc;
}


.admin-users-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ============================================================
   UTILISATEUR
   ============================================================ */

.admin-user {
    display: flex;
    align-items: center;

    gap: 11px;
}


.admin-user-avatar {
    flex: 0 0 auto;

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

    width: 38px;
    height: 38px;

    border:
        1px solid #cceee1;

    border-radius: 11px;

    background: #effbf6;

    color: #10b87e;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .04em;
}


.admin-user > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.admin-user strong {
    color: #24312c;

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


.admin-user span {
    color: #a0aaa6;

    font-size: 9px;
}


.admin-user-email {
    color: #65716c;

    font-size: 11px;
}


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

.admin-user-role,
.admin-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding:
        0
        9px;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}


/* USER */

.admin-user-role {
    border:
        1px solid #e4e9e7;

    background: #f7f9f8;

    color: #75817c;
}


/* ADMIN */

.admin-user-role.is-admin {
    border-color: #cceee1;

    background: #effbf6;

    color: #0fae78;
}


/* SUCCESS */

.admin-user-badge.is-success {
    border:
        1px solid #cceee1;

    background: #effbf6;

    color: #0ba875;
}


/* WARNING */

.admin-user-badge.is-warning {
    border:
        1px solid #f3e2ba;

    background: #fff9eb;

    color: #b98420;
}


/* DANGER */

.admin-user-badge.is-danger {
    border:
        1px solid #f2d1d1;

    background: #fff3f3;

    color: #cc5d5d;
}


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

.admin-user-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}


.admin-user-action {
    height: 31px;

    margin: 0;

    padding:
        0
        10px;

    border:
        1px solid #dfe6e3;

    border-radius: 8px;

    background: #ffffff;

    color: #6f7b76;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    transition:
        border-color .15s ease,
        color .15s ease,
        background .15s ease;
}


.admin-user-action:hover {
    border-color: #bfe8d9;

    background: #f3fbf8;

    color: #0fae78;
}


.admin-user-self {
    display: inline-flex;
    align-items: center;

    height: 27px;

    padding:
        0
        9px;

    border-radius: 999px;

    background: #f3f6f5;

    color: #8b9691;

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


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

.admin-users-empty {
    padding:
        50px
        20px !important;

    color: #919c97 !important;

    text-align: center !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

.admin-users-table-wrapper::-webkit-scrollbar {
    height: 7px;
}


.admin-users-table-wrapper::-webkit-scrollbar-track {
    background: #f5f7f6;
}


.admin-users-table-wrapper::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #d5ddda;
}


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

@media (max-width: 1200px) {

    .admin-users-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-users-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-users-search {
        grid-column:
            1 / -1;
    }


    .admin-users-filter-button {
        width: 100%;
    }

}


@media (max-width: 700px) {

    .admin-users-page {
        gap: 20px;
    }


    .admin-users-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .admin-users-title {
        font-size: 25px;
    }


    .admin-users-stats {
        grid-template-columns: 1fr;
    }


    .admin-users-filters {
        grid-template-columns: 1fr;
    }


    .admin-users-search {
        grid-column: auto;
    }

}

@media (max-width: 1280px) {

    .app-topbar {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(240px, 420px)
            auto;
    }

    .topbar-ai-status {
        display: none;
    }

}

@media (max-width: 1100px) {

    .app-sidebar {
        left: 12px;
        top: 12px;
        bottom: 12px;

        transform: translateX(calc(-100% - 30px));

        width: min(
            var(--sidebar-width),
            calc(100vw - 45px)
        );
    }

    .app-wrapper,
    body.sidebar-collapsed .app-wrapper {
        margin-left: 0;
    }

    body.sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
    }

    .app-overlay {
        position: fixed;

        inset: 0;

        display: block;

        background: rgba(6, 16, 12, 0.28);

        backdrop-filter: blur(5px);

        opacity: 0;

        visibility: hidden;

        z-index: 950;

        transition:
            opacity var(--transition-normal),
            visibility var(--transition-normal);
    }

    body.sidebar-mobile-open .app-overlay {
        opacity: 1;

        visibility: visible;
    }

    .sidebar-collapse {
        display: none;
    }

    .topbar-menu-button {
        display: grid;
    }

    .app-topbar {
        grid-template-columns:
            auto
            minmax(220px, 1fr)
            auto;
    }

    .topbar-heading {
        display: none;
    }

    .topbar-left {
        width: auto;
    }

    .topbar-search-wrapper {
        width: 100%;
    }

}

@media (max-width: 820px) {

    .app-topbar {
        height: 68px;

        padding: 10px 16px;

        grid-template-columns:
            auto
            1fr
            auto;

        gap: 10px;
    }

    .topbar-action-primary {
        width: 42px;

        padding: 0;

        justify-content: center;
    }

    .topbar-action-primary span {
        display: none;
    }

    .topbar-profile-button {
        min-width: 0;
    }

    .topbar-profile-info,
    .topbar-profile-chevron {
        display: none;
    }

    .app-main {
        padding:
            18px 16px 30px;
    }

}

@media (max-width: 640px) {

    .topbar-search-wrapper {
        display: none;
    }

    .app-topbar {
        grid-template-columns:
            auto
            1fr;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .topbar-icon-button {
        display: none;
    }

    .global-search-shortcut {
        display: none;
    }

    .command-palette {
        padding-top: 8vh;
    }

    .command-palette-dialog {
        width: calc(100vw - 22px);

        border-radius: 18px;
    }

}


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

@media (max-width: 1280px) {

    .dashboard-main-grid {
        grid-template-columns:
            minmax(0, 1fr)
            290px;
    }

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

    .dashboard-match-footer {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .dashboard-match-value {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 1050px) {

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-side {
        display: grid;

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


@media (max-width: 850px) {

    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 24px;
    }

    .dashboard-hero-actions {
        width: 100%;
    }

    .dashboard-hero-actions .app-button {
        flex: 1;
    }

    .dashboard-match-teams {
        grid-template-columns:
            minmax(0, 1fr)
            60px
            minmax(0, 1fr);
    }

    .dashboard-team {
        flex-direction: column;

        text-align: center;
    }

    .dashboard-team-home,
    .dashboard-team-away {
        justify-content: center;
    }

    .dashboard-team > strong {
        max-width: 130px;
    }
}


@media (max-width: 680px) {

    .dashboard-page {
        gap: 16px;
    }

    .dashboard-hero {
        padding: 20px;

        border-radius: 18px;
    }

    .dashboard-hero-title {
        font-size: 26px;
    }

    .dashboard-hero-description {
        font-size: 12px;
    }

    .dashboard-hero-actions {
        flex-direction: column;
    }

    .dashboard-hero-actions .app-button {
        width: 100%;
    }


    /* KPI */

    .dashboard-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .dashboard-stat-card {
        padding: 15px;

        border-radius: 15px;
    }

    .dashboard-stat-value {
        margin-top: 15px;

        font-size: 25px;
    }


    /* PANEL */

    .dashboard-panel {
        border-radius: 17px;
    }

    .dashboard-panel-header {
        align-items: flex-start;

        padding: 17px;
    }

    .dashboard-panel-link {
        font-size: 0;
    }

    .dashboard-panel-link i {
        font-size: 11px;
    }


    /* MATCH */

    .dashboard-match-card {
        padding: 17px;
    }

    .dashboard-match-header {
        align-items: flex-start;
    }

    .dashboard-match-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .dashboard-match-teams {
        grid-template-columns:
            minmax(0, 1fr)
            48px
            minmax(0, 1fr);

        gap: 7px;
    }

    .dashboard-team-logo {
        width: 40px;
        height: 40px;
    }

    .dashboard-team-logo img {
        width: 27px;
        height: 27px;
    }

    .dashboard-team > strong {
        max-width: 110px;

        font-size: 11px;
    }

    .dashboard-match-vs strong {
        font-size: 15px;
    }


    /* PROBABILITIES */

    .dashboard-probabilities {
        gap: 7px;

        padding: 10px;
    }

    .dashboard-probability-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

    .dashboard-probability-header strong {
        font-size: 10px;
    }

    .dashboard-probability small {
        font-size: 8px;
    }


    /* MATCH FOOTER */

    .dashboard-match-footer {
        grid-template-columns: 1fr;
    }

    .dashboard-match-value {
        grid-column: auto;
    }


    /* RIGHT */

    .dashboard-side {
        display: flex;
        flex-direction: column;
    }
}


@media (max-width: 480px) {

    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-stat-card {
        min-width: 0;
    }

    .dashboard-stat-label {
        font-size: 10px;
    }

    .dashboard-stat-value {
        font-size: 23px;
    }

    .dashboard-match-card {
        padding-right: 13px;
        padding-left: 13px;
    }

    .dashboard-match-teams {
        grid-template-columns:
            minmax(0, 1fr)
            38px
            minmax(0, 1fr);
    }

    .dashboard-team-logo {
        width: 37px;
        height: 37px;

        border-radius: 11px;
    }

    .dashboard-team-logo img {
        width: 25px;
        height: 25px;
    }

    .dashboard-team > strong {
        max-width: 95px;

        font-size: 10px;
    }

    .dashboard-analysis-badge {
        padding: 5px 7px;

        font-size: 8px;
    }

    .dashboard-probability {
        overflow: hidden;
    }

    .dashboard-probability small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-value-item {
        grid-template-columns:
            minmax(0, 1fr)
            42px
            50px;

        padding-right: 13px;
        padding-left: 13px;
    }
}


@media (max-width: 1100px) {

    .matches-filters {
        flex-wrap: wrap;
    }

    .matches-filter-search {
        width: 100%;
        flex-basis: 100%;
    }

    .match-row-analysis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 700px) {

    .matches-header h1 {
        font-size: 23px;
    }

    .matches-filter-field,
    .matches-filter-field select,
    .matches-filters .app-button {
        width: 100%;
    }

    .match-row-main {
        grid-template-columns:
            1fr
            45px
            1fr;

        gap: 8px;
    }

    .match-row-team {
        flex-direction: column;

        text-align: center;
    }

    .match-row-team-away {
        flex-direction: column;

        text-align: center;
    }

    .match-row-team > div:last-child > strong {
        font-size: 10px;
    }

    .match-row-analysis {
        grid-template-columns: 1fr;
    }

    .match-row-probabilities {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }
}
@media (max-width: 900px) {

    .match-detail-value-card {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            repeat(
                3,
                65px
            );
    }

    .match-detail-history-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .match-detail-hero {
        padding: 20px 14px;
    }

    .match-detail-teams {


        gap: 8px;
    }

    .match-detail-team-logo {
        width: 55px;
        height: 55px;

        border-radius: 16px;
    }

    .match-detail-team-logo img {
        width: 37px;
        height: 37px;
    }

    .match-detail-team h1 {
        font-size: 13px;
    }

    .match-detail-center > strong {
        font-size: 25px;
    }

    .pd-content {
        display: block;
        align-items: start;
        gap: 14px;
    }

    .match-detail-odds-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .match-detail-model-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .match-detail-value-card {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .match-detail-value-stat {
        padding-top: 8px;

        border-top: 1px solid rgba(30, 70, 50, 0.08);

        text-align: left;
    }
}


@media (max-width: 480px) {

    .match-detail-meta {
        gap: 7px 12px;
    }

    .match-detail-team-logo {
        width: 48px;
        height: 48px;
    }

    .match-detail-team-logo img {
        width: 32px;
        height: 32px;
    }

    .match-detail-team h1 {
        max-width: 100px;

        font-size: 11px;
    }

    .match-detail-center > strong {
        font-size: 21px;
    }

    .match-detail-model-grid {
        grid-template-columns: 1fr 1fr;
    }

    .match-history-item {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            45px
            25px;

        gap: 7px;

        padding-right: 10px;
        padding-left: 10px;
    }
}

/* ==========================================================
   MATCHES PAGE - RESPONSIVE
   ========================================================== */


/* ==========================================================
   TABLETTE / PETIT DESKTOP
   ========================================================== */

@media (max-width: 1200px) {

    .matches-page {
        width: 100%;
        min-width: 0;
    }

    /*
     * La ligne desktop contient beaucoup trop de colonnes.
     * On passe sur une grille plus compacte.
     */

    .match-row-card {
        display: grid;

        grid-template-columns:
            140px
            minmax(130px, 1fr)
            minmax(220px, 1.4fr)
            minmax(130px, 1fr)
            130px
            34px;

        gap: 12px;

        width: 100%;
        min-width: 0;

        padding: 16px;

        box-sizing: border-box;
    }

    .match-row-value {
        display: none;
    }

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 992px) {

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

    .matches-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        gap: 20px;
    }

    .matches-header-content {
        min-width: 0;
    }

    .matches-header-content h1 {
        font-size: 26px;
    }

    .matches-header-actions {
        flex-shrink: 0;
    }


    /* ======================================================
       FILTRES
       ====================================================== */

    .matches-filters {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .matches-filter-search {
        grid-column: 1 / -1;
    }

    .matches-filter-submit {
        width: 100%;
    }


    /* ======================================================
       MATCH
       ====================================================== */

    .match-row-card {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 1.3fr)
            minmax(0, 1fr);

        grid-template-areas:
            "meta meta meta"
            "home market away"
            "prediction prediction prediction"
            "value value value";

        gap: 14px;

        padding: 16px;
    }


    /* META */

    .match-row-meta {
        grid-area: meta;

        display: flex;
        flex-direction: row;
        align-items: center;

        width: 100%;
        min-width: 0;

        gap: 10px;

        padding-bottom: 10px;

        border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    }

    .match-row-competition {
        min-width: 0;
    }

    .match-row-competition strong {
        display: block;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .match-row-meta time {
        margin-left: auto;

        flex-shrink: 0;

        font-weight: 800;
    }


    /* HOME */

    .match-row-team:not(.match-row-team-away) {
        grid-area: home;
    }


    /* AWAY */

    .match-row-team-away {
        grid-area: away;
    }


    /* TEAMS */

    .match-row-team {
        min-width: 0;

        display: flex;
        flex-direction: column;

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

        gap: 7px;

        text-align: center;
    }

    .match-row-team-logo {
        flex-shrink: 0;
    }

    .match-row-team > strong {
        width: 100%;
        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;

        font-size: 12px;
    }


    /* MARKET */

    .match-row-market {
        grid-area: market;

        width: 100%;
        min-width: 0;
    }

    .match-row-market-grid {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        width: 100%;
        min-width: 0;

        gap: 5px;
    }

    .match-row-market-option {
        min-width: 0;
    }


    /* PREDICTION */

    .match-row-prediction {
        grid-area: prediction;

        width: 100%;
        min-width: 0;
    }


    /* VALUE */

    .match-row-value {
        grid-area: value;

        display: block;

        width: 100%;
    }


    /* ARROW */

    .match-row-arrow {
        position: absolute;

        top: 18px;
        right: 14px;
    }

}


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

@media (max-width: 768px) {

    /* ======================================================
       PAGE
       ====================================================== */

    .matches-page {
        width: 100%;
        max-width: 100%;

        padding: 0;

        overflow: hidden;
    }


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

    .matches-header {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 14px;
    }

    .matches-header-content {
        width: 100%;
    }

    .matches-header-content h1 {
        margin-bottom: 5px;

        font-size: 23px;
        line-height: 1.2;
    }

    .matches-header-content p {
        margin: 0;

        font-size: 13px;
        line-height: 1.5;
    }

    .matches-header-actions {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        width: 100%;

        gap: 8px;
    }

    .matches-date-badge,
    .matches-refresh-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /* ======================================================
       NAVIGATION DATE
       ====================================================== */

    .matches-date-navigation {
        display: grid;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px;

        grid-template-areas:
            "previous current next"
            "picker picker picker"
            "today today today";

        width: 100%;

        gap: 8px;

        padding: 12px;

        box-sizing: border-box;
    }

    .matches-date-navigation > .matches-date-arrow:first-of-type {
        grid-area: previous;
    }

    .matches-date-navigation > .matches-date-arrow:nth-of-type(2) {
        grid-area: next;
    }

    .matches-date-arrow {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        padding: 0;
    }

    .matches-current-date {
        grid-area: current;

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

        min-width: 0;

        text-align: center;
    }

    .matches-current-date span {
        font-size: 10px;
    }

    .matches-current-date strong {
        font-size: 13px;
    }

    .matches-date-form {
        grid-area: picker;

        width: 100%;
    }

    .matches-date-form input[type="date"] {
        width: 100%;
        min-height: 42px;

        box-sizing: border-box;
    }

    .matches-today {
        grid-area: today;

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

        width: 100%;
        min-height: 38px;

        box-sizing: border-box;
    }


    /* ======================================================
       FILTRES
       ====================================================== */

    .matches-filter-card {
        width: 100%;

        padding: 12px;

        box-sizing: border-box;
    }

    .matches-filters {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 8px;
    }

    .matches-filter-search,
    .matches-filter-field,
    .matches-filter-submit {
        grid-column: 1;

        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .matches-filter-search input,
    .matches-filter-field select {
        width: 100%;
        min-width: 0;
    }

    .matches-filter-submit {
        min-height: 44px;
    }

    .matches-filter-reset {
        width: 100%;
        min-height: 40px;

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


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

    .matches-result-header {
        display: flex;
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

    .matches-result-header > span {
        font-size: 11px;
    }


    /* ======================================================
       LISTE
       ====================================================== */

    .matches-list {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 10px;
    }


    /* ======================================================
       CARTE MATCH
       ====================================================== */

    .match-row-card {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            64px
            minmax(0, 1fr);

        grid-template-areas:
            "meta meta meta"
            "home prediction away"
            "market market market"
            "value value value";

        width: 100%;
        min-width: 0;

        gap: 13px 8px;

        padding: 14px 12px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ======================================================
       META
       ====================================================== */

    .match-row-meta {
        grid-area: meta;

        display: flex;
        flex-direction: row;
        align-items: center;

        width: 100%;
        min-width: 0;

        gap: 8px;

        padding: 0 28px 9px 0;

        box-sizing: border-box;

        border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    }

    .match-row-competition {
        flex: 1;

        min-width: 0;
    }

    .match-row-competition strong {
        display: block;

        width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 11px;
    }

    .match-row-meta time {
        flex-shrink: 0;

        margin-left: auto;

        font-size: 12px;
        font-weight: 800;
    }


    /* ======================================================
       HOME / AWAY
       ====================================================== */

    .match-row-team:not(.match-row-team-away) {
        grid-area: home;
    }

    .match-row-team-away {
        grid-area: away;
    }

    .match-row-team {
        display: flex;
        flex-direction: column;

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

        width: 100%;
        min-width: 0;

        gap: 7px;

        text-align: center;
    }

    .match-row-team-logo {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        min-width: 48px;

        flex: 0 0 48px;
    }

    .match-row-team-logo img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    .match-row-team-logo span {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
    }

    .match-row-team > strong {
        display: -webkit-box;

        width: 100%;

        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        font-size: 11px;
        line-height: 1.25;

        white-space: normal;
    }


    /* ======================================================
       PRONIO AU CENTRE
       ====================================================== */

    .match-row-prediction {
        grid-area: prediction;

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

        width: 100%;
        min-width: 0;
    }

    .prediction-result-box {
        display: flex;
        flex-direction: column;

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

        width: 100%;
        min-width: 0;

        padding: 0;

        border: 0;
        background: transparent;
    }

    .prediction-result-title {
        margin-bottom: 5px;

        font-size: 9px;
        font-weight: 700;

        opacity: .55;
    }

    .prediction-result-scores {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 4px;
    }

    .prediction-result-score {
        display: flex;
        flex-direction: column;

        align-items: center;
    }

    .prediction-result-score span {
        display: none;
    }

    .prediction-result-score strong {
        font-size: 17px;
        font-weight: 900;
        line-height: 1;
    }

    .prediction-result-arrow {
        font-size: 11px;

        opacity: .45;
    }

    .prediction-result-status {
        margin-top: 6px;

        font-size: 9px;
        white-space: nowrap;
    }

    .prediction-result-status svg {
        width: 11px;
        height: 11px;
    }


    /* ======================================================
       MARCHÉ 1X2
       ====================================================== */

    .match-row-market {
        grid-area: market;

        width: 100%;
        min-width: 0;
    }

    .match-row-market-grid {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        width: 100%;
        min-width: 0;

        gap: 5px;
    }

    .match-row-market-option {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "probability side"
            "odd odd";

        width: 100%;
        min-width: 0;

        padding: 8px 9px;

        box-sizing: border-box;

        border-radius: 9px;
    }

    .match-market-probability {
        grid-area: probability;

        min-width: 0;

        font-size: 12px;
        font-weight: 800;

        white-space: nowrap;
    }

    .match-row-market-option > span {
        grid-area: side;

        margin-left: 4px;

        font-size: 10px;
        font-weight: 800;

        opacity: .5;
    }

    .match-row-market-option > small {
        grid-area: odd;

        display: block;

        margin-top: 4px;

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

    .match-row-market-option.is-best {
        border-bottom-width: 3px;
    }

    .match-row-bookmaker {
        margin-top: 5px;

        text-align: right;

        font-size: 9px;

        opacity: .5;
    }


    /* ======================================================
       VALUE BET
       ====================================================== */

    .match-row-value {
        grid-area: value;

        display: block;

        width: 100%;
        min-width: 0;
    }

    .match-value-content {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "title ev"
            "selection selection";

        width: 100%;

        gap: 3px 10px;

        padding: 9px 10px;

        box-sizing: border-box;
    }

    .match-value-content > span {
        grid-area: title;

        min-width: 0;

        font-size: 10px;
    }

    .match-value-content > strong {
        grid-area: ev;

        font-size: 12px;
    }

    .match-value-content > small {
        grid-area: selection;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 9px;
    }

    .match-value-content svg {
        width: 12px;
        height: 12px;
    }

    .match-value-empty {
        display: none;
    }


    /* ======================================================
       FLÈCHE
       ====================================================== */

    .match-row-arrow {
        position: absolute;

        top: 14px;
        right: 10px;

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

        width: 20px;
        height: 20px;
    }

    .match-row-arrow svg {
        width: 15px;
        height: 15px;
    }


    /* ======================================================
       NO ANALYSIS
       ====================================================== */

    .match-row-no-analysis {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        padding: 10px;

        box-sizing: border-box;
    }


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

    .matches-empty-state {
        width: 100%;

        padding: 35px 18px;

        box-sizing: border-box;

        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .matches-header-content h1 {
        font-size: 21px;
    }

    .matches-header-actions {
        grid-template-columns: 1fr;
    }

    .matches-date-badge,
    .matches-refresh-button {
        min-height: 42px;
    }


    /*
     * Logos légèrement plus petits pour laisser davantage
     * de place aux noms d'équipes.
     */

    .match-row-team-logo {
        width: 43px;
        height: 43px;

        min-width: 43px;

        flex-basis: 43px;
    }

    .match-row-card {
        grid-template-columns:
            minmax(0, 1fr)
            58px
            minmax(0, 1fr);

        padding: 12px 10px;

        gap: 11px 6px;
    }

    .match-row-team > strong {
        font-size: 10px;
    }

    .prediction-result-score strong {
        font-size: 15px;
    }

    .prediction-result-status {
        font-size: 8px;
    }

    .match-row-market-grid {
        gap: 4px;
    }

    .match-row-market-option {
        padding: 7px 7px;
    }

    .match-market-probability {
        font-size: 11px;
    }

    .match-row-market-option > span {
        font-size: 9px;
    }

    .match-row-market-option > small {
        font-size: 10px;
    }

}


/* ==========================================================
   TRÈS PETIT MOBILE
   ========================================================== */

@media (max-width: 360px) {

    .match-row-card {
        grid-template-columns:
            minmax(0, 1fr)
            50px
            minmax(0, 1fr);

        padding-left: 8px;
        padding-right: 8px;
    }

    .match-row-team-logo {
        width: 38px;
        height: 38px;

        min-width: 38px;

        flex-basis: 38px;
    }

    .match-row-market-option {
        padding:
            7px
            5px;
    }

    .match-market-probability {
        font-size: 10px;
    }

    .match-row-market-option > small {
        font-size: 9px;
    }

    .prediction-result-score strong {
        font-size: 14px;
    }

}


/* ==========================================================
   FIX MOBILE - AFFICHAGE DU MARCHE 1X2
   ========================================================== */

@media (max-width: 768px) {

    .match-row-card {
        grid-template-areas:
            "meta meta meta"
            "home prediction away"
            "market market market"
            "value value value" !important;
    }

    /*
     * Certains anciens styles desktop/mobile peuvent
     * masquer le marché.
     */
    .match-row-market {
        grid-area: market !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* ======================================================
       GRILLE 1 / X / 2
       ====================================================== */

    .match-row-market-grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: 6px !important;

        margin: 0 !important;
    }


    /* ======================================================
       OPTION
       ====================================================== */

    .match-row-market-option {
        position: relative;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "probability side"
            "odd odd";

        width: 100%;
        min-width: 0;

        padding: 10px;

        box-sizing: border-box;

        border-radius: 10px;

        background: #f7f9f8;
        border: 1px solid #edf0ef;
    }


    /* ======================================================
       PROBABILITE
       ====================================================== */

    .match-market-probability {
        grid-area: probability;

        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;

        color: #101814;

        white-space: nowrap;
    }


    /* ======================================================
       1 / X / 2
       ====================================================== */

    .match-row-market-option > span {
        grid-area: side;

        align-self: start;

        margin-left: 6px;

        font-size: 10px;
        font-weight: 800;

        color: #8b9791;
    }


    /* ======================================================
       COTE
       ====================================================== */

    .match-row-market-option > small {
        grid-area: odd;

        display: block;

        margin-top: 5px;

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

        color: #101814;
    }


    /* ======================================================
       CHOIX PRONIO
       ====================================================== */

    .match-row-market-option.is-best {
        background: #ecfbf5;

        border-color: #b8f2db;

        box-shadow:
            inset 0 -3px 0 #20d995;
    }

    .match-row-market-option.is-best
    .match-market-probability {
        color: #101814;
    }

    .match-row-market-option.is-best > span {
        color: #00a66f;
    }


    /* ======================================================
       BOOKMAKER
       ====================================================== */

    .match-row-bookmaker {
        display: block !important;

        margin-top: 5px;

        text-align: right;

        font-size: 9px;
        font-weight: 500;

        color: #97a19d;
    }

}


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

@media (max-width: 480px) {

    .match-row-market-grid {
        gap: 5px !important;
    }

    .match-row-market-option {
        padding: 9px 8px;
    }

    .match-market-probability {
        font-size: 12px;
    }

    .match-row-market-option > span {
        font-size: 9px;
    }

    .match-row-market-option > small {
        font-size: 10px;
    }

}


/* ==========================================================
   TRES PETIT MOBILE
   ========================================================== */

@media (max-width: 360px) {

    .match-row-market-option {
        padding:
            8px
            6px;
    }

    .match-market-probability {
        font-size: 11px;
    }

    .match-row-market-option > small {
        font-size: 9px;
    }

}

/* ==========================================================
   FIX MOBILE - BLOC PRONIO ENTRE LES DEUX EQUIPES
   ========================================================== */

@media (max-width: 768px) {

    .match-row-prediction {
        grid-area: prediction;

        position: relative;

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

        width: 100%;
        min-width: 0;
        height: 100%;

        margin: 0;
        padding: 0;

        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .match-row-prediction::before,
    .match-row-prediction::after {
        display: none !important;
        content: none !important;
    }


    /* ======================================================
       BOX PRONIO
       ====================================================== */

    .prediction-result-box {
        position: relative;

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

        width: 100%;
        min-width: 0;
        height: 100%;

        margin: 0;
        padding: 0;

        border: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }

    .prediction-result-box::before,
    .prediction-result-box::after {
        display: none !important;
        content: none !important;
    }


    /* ======================================================
       PRONIO
       ====================================================== */

    .prediction-result-title {
        margin: 0 0 7px;

        font-size: 11px;
        font-weight: 800;
        line-height: 1;

        text-align: center;

        text-transform: uppercase;

        color: #b9c0cc;
    }


    /* ======================================================
       SCORE
       ====================================================== */

    .prediction-result-scores {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        margin: 0;

        gap: 5px;
    }

    .prediction-result-score {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;
    }

    .prediction-result-score span {
        display: none;
    }

    .prediction-result-score strong {
        display: block;

        margin: 0;

        font-size: 21px;
        font-weight: 900;
        line-height: 1;

        color: #000;
    }

    .prediction-result-arrow {
        font-size: 12px;

        color: #98a09c;
    }


    /* ======================================================
       CONFIANCE
       ====================================================== */

    .prediction-result-status {
        display: flex;
        align-items: center;
        justify-content: center;

        width: auto;

        margin: 10px 0 0;
        padding: 0;

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

        white-space: nowrap;

        border: 0 !important;

        background: transparent !important;
    }

    .prediction-result-status.pending {
        color: #64748b;
    }

    .prediction-result-dot {
        width: 7px;
        height: 7px;

        min-width: 7px;

        margin-right: 6px;

        border-radius: 50%;

        background: #22c98b;
    }


    /* ======================================================
       RESULTAT GAGNE / PERDU
       ====================================================== */

    .prediction-result-status.is-won,
    .prediction-result-status.is-lost {
        padding: 0;

        background: transparent !important;
    }


    /* ======================================================
       SUPPRESSION DES SEPARATEURS
       ====================================================== */

    .match-row-team,
    .match-row-team-away,
    .match-row-prediction {
        border-left: 0 !important;
        border-right: 0 !important;
    }

}

/* ==========================================================
   HISTORY PAGE - RESPONSIVE
   ========================================================== */


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1100px) {

    .history-page {
        width: 100%;
        min-width: 0;
    }


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

    .history-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        gap: 20px;
    }

    .history-header > div:first-child {
        min-width: 0;
    }


    /* ======================================================
       KPI
       ====================================================== */

    .history-kpis {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 10px;
    }


    /* ======================================================
       FILTERS
       ====================================================== */

    .history-filters {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .history-search {
        grid-column: 1 / -1;
    }

    .history-filter-submit {
        width: 100%;
    }


    /* ======================================================
       ROW
       ====================================================== */

    .history-row {
        position: relative;

        display: grid;

        grid-template-columns:
            150px
            minmax(260px, 1.4fr)
            minmax(150px, .8fr)
            70px
            80px
            70px;

        gap: 12px;

        padding: 14px;

        box-sizing: border-box;
    }

    .history-arrow {
        display: none;
    }

}


/* ==========================================================
   TABLETTE PORTRAIT
   ========================================================== */

@media (max-width: 900px) {

    /* ======================================================
       KPI
       ====================================================== */

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


    /* ======================================================
       ROW
       ====================================================== */

    .history-row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-areas:
            "meta meta"
            "match match"
            "selection selection"
            "ev status"
            "profit profit";

        gap: 12px;

        padding: 15px;
    }

    .history-match-meta {
        grid-area: meta;

        display: flex;
        flex-direction: row;
        align-items: center;

        gap: 10px;

        width: 100%;

        padding-bottom: 9px;

        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    .history-match-meta time {
        display: flex;
        align-items: center;

        gap: 6px;

        white-space: nowrap;
    }

    .history-match-meta > span {
        margin-left: auto;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        text-align: right;
    }


    /* MATCH */

    .history-match {
        grid-area: match;
    }


    /* SELECTION */

    .history-selection {
        grid-area: selection;
    }


    /* EV */

    .history-ev {
        grid-area: ev;
    }


    /* STATUS */

    .history-status {
        grid-area: status;

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


    /* PROFIT */

    .history-profit {
        grid-area: profit;

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

        padding-top: 10px;

        border-top: 1px solid rgba(15, 23, 42, .07);
    }

}


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

@media (max-width: 768px) {

    /* ======================================================
       PAGE
       ====================================================== */

    .history-page {
        width: 100%;
        max-width: 100%;

        padding: 0;

        overflow: hidden;
    }


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

    .history-header {
        display: flex;
        flex-direction: column;

        gap: 12px;
    }

    .history-header h1 {
        margin-bottom: 5px;

        font-size: 23px;
        line-height: 1.2;
    }

    .history-header p {
        margin: 0;

        font-size: 13px;
        line-height: 1.45;
    }

    .history-live-badge {
        align-self: flex-start;
    }


    /* ======================================================
       KPI
       ====================================================== */

    .history-kpis {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;

        gap: 8px;
    }

    .history-kpi {
        min-width: 0;

        padding: 14px 12px;

        box-sizing: border-box;
    }

    .history-kpi > span {
        display: block;

        margin-bottom: 5px;

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

    .history-kpi > strong {
        display: block;

        font-size: 22px;
        line-height: 1.1;
    }

    .history-kpi > small {
        display: block;

        margin-top: 5px;

        font-size: 9px;
        line-height: 1.3;
    }


    /*
     * Le dernier KPI occupe toute la largeur
     * lorsque le nombre de KPI est impair.
     */

    .history-kpi:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }


    /* ======================================================
       FILTER CARD
       ====================================================== */

    .history-filter-card {
        width: 100%;

        padding: 12px;

        box-sizing: border-box;
    }

    .history-filters {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 8px;
    }

    .history-search,
    .history-select,
    .history-date,
    .history-filter-submit {
        grid-column: 1;

        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .history-search input,
    .history-select select,
    .history-date input {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .history-date {
        display: grid;

        grid-template-columns:
            36px
            minmax(0, 1fr);

        align-items: center;
    }

    .history-date > span {
        font-size: 11px;
        font-weight: 700;
    }

    .history-filter-submit {
        min-height: 43px;
    }

    .history-filter-reset {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 40px;

        box-sizing: border-box;
    }


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

    .history-result-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        width: 100%;
    }

    .history-result-header > div,
    .history-result-header > span {
        font-size: 11px;
    }


    /* ======================================================
       LIST
       ====================================================== */

    .history-list {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 10px;
    }


    /* ======================================================
       HISTORY ROW
       ====================================================== */

    .history-row {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "meta meta"
            "match match"
            "selection selection"
            "ev status"
            "profit profit";

        width: 100%;
        min-width: 0;

        gap: 12px;

        padding: 14px 12px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ======================================================
       META
       ====================================================== */

    .history-match-meta {
        grid-area: meta;

        display: flex;
        flex-direction: row;
        align-items: center;

        width: 100%;
        min-width: 0;

        gap: 8px;

        padding-bottom: 9px;

        border-bottom: 1px solid rgba(15, 23, 42, .07);
    }

    .history-match-meta time {
        display: flex;
        align-items: center;

        gap: 5px;

        flex-shrink: 0;

        font-size: 10px;
    }

    .history-match-meta time strong {
        font-size: 11px;
    }

    .history-match-meta > span {
        margin-left: auto;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 10px;

        text-align: right;
    }


    /* ======================================================
       MATCH
       ====================================================== */

    .history-match {
        grid-area: match;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            58px
            minmax(0, 1fr);

        align-items: center;

        width: 100%;
        min-width: 0;

        gap: 7px;
    }


    /* ======================================================
       TEAM
       ====================================================== */

    .history-team,
    .history-team-away {
        display: flex;
        flex-direction: column;

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

        width: 100%;
        min-width: 0;

        gap: 6px;

        text-align: center;
    }

    /*
     * Ton HTML desktop place le texte avant le logo
     * pour l'équipe extérieure.
     * En mobile on remet toujours :
     *
     * logo
     * nom
     */

    .history-team-away img,
    .history-team-away .history-team-placeholder {
        order: 1;
    }

    .history-team-away > span:not(.history-team-placeholder) {
        order: 2;
    }

    .history-team img,
    .history-team-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 46px;
        height: 46px;

        min-width: 46px;

        object-fit: contain;
    }

    .history-team > span:not(.history-team-placeholder) {
        display: -webkit-box;

        width: 100%;

        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        font-size: 10px;
        font-weight: 700;
        line-height: 1.25;
    }


    /* ======================================================
       FINAL SCORE
       ====================================================== */

    .history-final-score {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 4px;

        width: 58px;

        white-space: nowrap;
    }

    .history-final-score strong {
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
    }

    .history-final-score span {
        font-size: 13px;

        opacity: .4;
    }


    /* ======================================================
       SELECTION PRONIO
       ====================================================== */

    .history-selection {
        grid-area: selection;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "badge odd"
            "selection odd";

        align-items: center;

        width: 100%;
        min-width: 0;

        gap: 5px 10px;

        padding: 10px;

        box-sizing: border-box;

        border-radius: 10px;
    }

    .history-selection-badges {
        grid-area: badge;
    }

    .history-selection-badge {
        font-size: 9px;
    }

    .history-selection > strong {
        grid-area: selection;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 11px;
    }

    .history-selection > small {
        grid-area: odd;

        display: flex;
        flex-direction: column;

        align-items: flex-end;

        gap: 2px;

        white-space: nowrap;

        font-size: 9px;
    }

    .history-selection > small b {
        font-size: 13px;
    }


    /* ======================================================
       EV
       ====================================================== */

    .history-ev {
        grid-area: ev;

        display: flex;
        align-items: center;

        gap: 7px;

        min-width: 0;
    }

    .history-ev > span {
        font-size: 9px;
        font-weight: 700;

        opacity: .55;
    }

    .history-ev > strong {
        font-size: 13px;
    }


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

    .history-status {
        grid-area: status;

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

    .history-status-badge {
        padding: 6px 9px;

        font-size: 9px;
        font-weight: 800;
    }


    /* ======================================================
       PROFIT
       ====================================================== */

    .history-profit {
        grid-area: profit;

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

        width: 100%;

        padding-top: 9px;

        border-top: 1px solid rgba(15, 23, 42, .07);
    }

    .history-profit > span {
        font-size: 10px;
        font-weight: 600;

        opacity: .6;
    }

    .history-profit > strong {
        font-size: 14px;
        font-weight: 900;
    }


    /* ======================================================
       ARROW
       ====================================================== */

    .history-arrow {
        display: none;
    }


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

    .history-empty {
        width: 100%;

        padding: 35px 18px;

        box-sizing: border-box;

        text-align: center;
    }

}


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

@media (max-width: 480px) {

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

    .history-header h1 {
        font-size: 21px;
    }


    /* ======================================================
       KPI
       ====================================================== */

    .history-kpi {
        padding: 12px 10px;
    }

    .history-kpi > strong {
        font-size: 20px;
    }


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

    .history-result-header {
        align-items: flex-start;
    }


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

    .history-row {
        padding: 12px 10px;

        gap: 10px;
    }


    /* ======================================================
       MATCH
       ====================================================== */

    .history-match {
        grid-template-columns:
            minmax(0, 1fr)
            50px
            minmax(0, 1fr);

        gap: 5px;
    }

    .history-team img,
    .history-team-placeholder {
        width: 42px;
        height: 42px;

        min-width: 42px;
    }

    .history-team > span:not(.history-team-placeholder) {
        font-size: 9px;
    }

    .history-final-score {
        width: 50px;
    }

    .history-final-score strong {
        font-size: 18px;
    }


    /* ======================================================
       SELECTION
       ====================================================== */

    .history-selection {
        padding: 9px;
    }

    .history-selection > strong {
        font-size: 10px;
    }

}


/* ==========================================================
   TRÈS PETIT MOBILE
   ========================================================== */

@media (max-width: 360px) {

    .history-kpis {
        grid-template-columns: 1fr;
    }

    .history-kpi:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .history-match {
        grid-template-columns:
            minmax(0, 1fr)
            46px
            minmax(0, 1fr);
    }

    .history-team img,
    .history-team-placeholder {
        width: 38px;
        height: 38px;

        min-width: 38px;
    }

    .history-final-score {
        width: 46px;
    }

    .history-final-score strong {
        font-size: 17px;
    }

    .history-selection {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

}

/* Components */

/* Pages */

/* Global responsive rules */
/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;
}

html {
    background: var(--color-bg);
}

body {
    min-width: 320px;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--color-text);

    background: var(--color-bg);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}


/* =========================================================
   APP
   ========================================================= */

.app-layout {
    display: flex;

    width: 100%;
    min-height: 100vh;
}


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

.app-sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    width: var(--sidebar-width);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(40, 229, 139, 0.07),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            var(--color-sidebar) 0%,
            #091511 100%
        );

    border-right:
        1px solid var(--color-sidebar-border);

    box-shadow:
        12px 0 35px rgba(8, 24, 18, 0.08);

    transition:
        width var(--transition-normal),
        transform var(--transition-normal);
}


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

.sidebar-logo {
    position: relative;

    display: flex;
    align-items: center;

    height: var(--topbar-height);

    flex-shrink: 0;

    padding: 0 20px;

    border-bottom:
        1px solid var(--color-sidebar-border);
}

.sidebar-logo a {
    display: flex;
    align-items: center;

    min-width: 0;

    text-decoration: none;
}

.sidebar-logo img {
    display: block;

    width: 145px;
    max-width: 100%;
    max-height: 42px;

    object-fit: contain;
}


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

.sidebar-nav {
    flex: 1;

    padding: 22px 12px;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.1)
        transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

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

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.1);
}


/* =========================================================
   SIDEBAR SECTION TITLES
   ========================================================= */

.sidebar-section-title {
    display: block;

    margin: 18px 12px 8px;

    color: var(--color-sidebar-text-muted);

    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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


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

.sidebar-link {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 44px;

    margin-bottom: 3px;
    padding: 0 13px;

    color: var(--color-sidebar-text-soft);

    border: 1px solid transparent;
    border-radius: 11px;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.sidebar-link i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;

    flex-shrink: 0;

    color: var(--color-sidebar-text-muted);

    font-size: 14px;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.sidebar-link span:not(.sidebar-badge) {
    min-width: 0;

    font-size: 11px;
    font-weight: 600;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link:hover {
    color: var(--color-white);

    background:
        rgba(255, 255, 255, 0.035);
}

.sidebar-link:hover i {
    color: var(--color-primary);
}

.sidebar-link.active {
    color: var(--color-primary);

    background:
        linear-gradient(
            90deg,
            rgba(40, 229, 139, 0.13),
            rgba(40, 229, 139, 0.07)
        );

    border-color:
        rgba(40, 229, 139, 0.06);
}

.sidebar-link.active i {
    color: var(--color-primary);
}

.sidebar-link.active::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 3px;
    height: 20px;

    border-radius:
        0 999px 999px 0;

    background: var(--color-primary);

    transform:
        translateY(-50%);

    box-shadow:
        0 0 12px
        var(--color-primary-glow);
}


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

.sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;

    padding: 4px 7px;

    border: 1px solid
    rgba(40, 229, 139, 0.12);

    border-radius: 999px;

    color: var(--color-primary);

    background:
        rgba(40, 229, 139, 0.09);

    font-size: 7px;
    font-weight: 800;

    white-space: nowrap;
}


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

.sidebar-separator {
    height: 1px;

    margin: 18px 12px;

    background:
        var(--color-sidebar-border);
}


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

.sidebar-bottom {
    flex-shrink: 0;

    padding: 14px;

    border-top:
        1px solid var(--color-sidebar-border);
}


/* =========================================================
   SIDEBAR AI STATUS
   ========================================================= */

.sidebar-ai-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px;

    border: 1px solid
    rgba(255, 255, 255, 0.07);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(40, 229, 139, 0.07),
            rgba(255, 255, 255, 0.02)
        );
}

.sidebar-ai-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 10px;

    color: #07140e;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    font-size: 12px;

    box-shadow:
        0 0 18px
        rgba(40, 229, 139, 0.18);
}

.sidebar-ai-content {
    min-width: 0;

    flex: 1;
}

.sidebar-ai-content span {
    display: block;

    color: var(--color-sidebar-text-muted);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar-ai-content strong {
    display: block;

    margin-top: 2px;

    color: var(--color-white);

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

.sidebar-ai-status {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 10px
        var(--color-primary-glow);
}


/* =========================================================
   VERSION
   ========================================================= */

.sidebar-version {
    margin-top: 10px;
    padding: 0 3px;

    color: var(--color-sidebar-text-muted);

    font-size: 8px;
}

.sidebar-version span {
    margin-left: 3px;

    color: var(--color-primary);
}


/* =========================================================
   CONTENT
   ========================================================= */

.app-content {
    width:
        calc(
            100% - var(--sidebar-width)
        );

    min-width: 0;
    min-height: 100vh;

    margin-left:
        var(--sidebar-width);

    transition:
        width var(--transition-normal),
        margin-left var(--transition-normal);
}


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

.app-topbar {
    position: sticky;

    top: 0;

    z-index: 500;

    display: flex;
    align-items: center;

    height: var(--topbar-height);

    padding: 0 28px;

    border-bottom:
        1px solid var(--border-soft);

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(16px);

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


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

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    margin-right: 12px;
    padding: 0;

    color: var(--color-text);

    border:
        1px solid var(--border-soft);

    border-radius: 10px;

    background: var(--color-surface);

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.sidebar-toggle:hover {
    border-color:
        rgba(40, 229, 139, 0.2);

    background:
        var(--color-surface-hover);
}


/* =========================================================
   TOPBAR BREADCRUMB / TITLE
   ========================================================= */

.topbar-title {
    display: flex;
    align-items: center;

    min-width: 0;

    flex-shrink: 0;

    margin-right: 26px;

    color: var(--color-text);

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

.topbar-breadcrumb {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}

.topbar-breadcrumb-muted {
    color: var(--color-text-muted);

    font-weight: 500;
}

.topbar-breadcrumb i {
    color: var(--color-text-muted);

    font-size: 7px;
}

.topbar-breadcrumb-current {
    color: var(--color-text);

    font-weight: 750;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


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

.topbar-search {
    position: relative;

    display: flex;
    align-items: center;

    width: min(420px, 32vw);
    height: 40px;

    margin-right: auto;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.topbar-search:focus-within {
    border-color:
        rgba(40, 229, 139, 0.3);

    box-shadow:
        0 0 0 3px
        rgba(40, 229, 139, 0.07);
}

.topbar-search > i {
    margin-left: 13px;

    color: var(--color-text-muted);

    font-size: 11px;
}

.topbar-search input {
    min-width: 0;

    flex: 1;

    height: 100%;

    padding: 0 10px;

    color: var(--color-text);

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 10px;
}

.topbar-search input::placeholder {
    color: var(--color-text-muted);
}

.topbar-search-shortcut {
    flex-shrink: 0;

    margin-right: 8px;
    padding: 3px 6px;

    border: 1px solid var(--border-soft);
    border-radius: 6px;

    color: var(--color-text-muted);

    background: var(--color-bg);

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


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

.topbar-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-left: auto;
}


/* =========================================================
   AI ACTIVE BADGE
   ========================================================= */

.topbar-ai-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    height: 34px;

    padding: 0 11px;

    color: var(--color-primary-dark);

    border:
        1px solid
        rgba(40, 229, 139, 0.12);

    border-radius: 9px;

    background:
        rgba(40, 229, 139, 0.07);

    font-size: 8px;
    font-weight: 750;

    white-space: nowrap;
}

.topbar-ai-badge::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 7px
        var(--color-primary-glow);
}


/* =========================================================
   ANALYSE BUTTON
   ========================================================= */

.topbar-analyse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    height: 38px;

    padding: 0 14px;

    color: #07140e;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #24dca1
        );

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        0 7px 18px
        rgba(40, 229, 139, 0.16);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.topbar-analyse-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 9px 22px
        rgba(40, 229, 139, 0.22);
}


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

.topbar-icon {
    position: relative;

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

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    padding: 0;

    color: var(--color-text-soft);

    border:
        1px solid var(--border-soft);

    border-radius: 10px;

    background: var(--color-surface);

    font-size: 11px;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.topbar-icon:hover {
    color: var(--color-primary-dark);

    border-color:
        rgba(40, 229, 139, 0.2);

    background:
        var(--color-surface-hover);
}

.notification-dot {
    position: absolute;

    top: 7px;
    right: 7px;

    width: 5px;
    height: 5px;

    border: 1px solid #ffffff;
    border-radius: 50%;

    background: var(--color-primary);
}


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

.topbar-user {
    position: relative;

    display: flex;
    align-items: center;

    gap: 9px;

    margin-left: 2px;
}

.topbar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    color: var(--color-text);

    border-radius: 50%;

    background:
        var(--color-primary-soft);

    font-size: 11px;
}

.topbar-user-info {
    display: flex;
    flex-direction: column;

    min-width: 90px;
}

.topbar-user-info strong {
    color: var(--color-text);

    font-size: 9px;
    font-weight: 750;
}

.topbar-user-info span {
    margin-top: 1px;

    color: var(--color-text-muted);

    font-size: 7px;
}

.topbar-user-chevron {
    margin-left: 3px;

    color: var(--color-text-muted);

    font-size: 7px;
}


/* =========================================================
   MAIN
   ========================================================= */

.app-main {
    width: 100%;

    padding: 26px 28px 40px;
}

.app-main-inner {
    width: 100%;
    max-width: var(--app-content-max-width);

    margin: 0 auto;
}


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

.pronio-card {
    border:
        1px solid var(--border-soft);

    border-radius: var(--radius-md);

    background: var(--color-surface);

    box-shadow: var(--shadow-xs);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.pronio-card:hover {
    border-color:
        rgba(40, 229, 139, 0.17);

    box-shadow: var(--shadow-sm);

    transform:
        translateY(-1px);
}


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

.mobile-sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: 900;

    display: none;

    background:
        rgba(4, 13, 9, 0.52);

    backdrop-filter:
        blur(3px);

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

body.sidebar-open
.mobile-sidebar-overlay {
    display: block;
}


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */

.text-secondary {
    color:
        var(--color-text-soft)
    !important;
}


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

@media (max-width: 1200px) {

    .topbar-search {
        width: min(330px, 28vw);
    }

    .topbar-user-info {
        display: none;
    }
}


@media (max-width: 991px) {

    .app-sidebar {
        width: var(--sidebar-width);

        transform:
            translateX(-100%);

        box-shadow:
            20px 0 50px
            rgba(5, 18, 12, 0.2);
    }

    body.sidebar-open
    .app-sidebar {
        transform:
            translateX(0);
    }

    .app-content {
        width: 100%;

        margin-left: 0;
    }

    .sidebar-toggle {
        display: flex;
    }

    .topbar-title {
        margin-right: 15px;
    }

    .topbar-search {
        width: min(360px, 38vw);
    }
}


@media (max-width: 760px) {

    .app-topbar {
        padding:
            0 16px;
    }

    .topbar-search {
        display: none;
    }

    .topbar-title {
        flex: 1;
    }

    .topbar-ai-badge {
        display: none;
    }

    .app-main {
        padding:
            20px 16px 32px;
    }
}


@media (max-width: 575px) {

    .app-topbar {
        height: 64px;
    }

    .topbar-analyse-button {
        width: 38px;

        padding: 0;

        font-size: 0;
    }

    .topbar-analyse-button i {
        font-size: 11px;
    }

    .topbar-user {
        display: none;
    }

    .topbar-title {
        font-size: 10px;
    }

    .app-main {
        padding:
            16px 12px 28px;
    }
}