:root {
    --it-green: #64D11E;
    --it-black: #000;
    --it-card: #050505;
    --it-line: rgba(255,255,255,.18);
    --it-muted: #b7b7b7
}

.invoxa-board,.invoxa-board *,.invoxa-admin-wrap,.invoxa-admin-wrap * {
    font-family: Inter,Arial,sans-serif;
    box-sizing: border-box
}

.invoxa-board {
    max-width: 1400px;
    margin: 20px auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: radial-gradient(circle at 20% 40%,rgba(100,209,30,.18),transparent 28%),radial-gradient(circle at 70% 70%,rgba(100,209,30,.15),transparent 35%),#050505;
    box-shadow: 0 25px 80px rgba(0,0,0,.65),inset 0 0 100px rgba(100,209,30,.03);
    color: #fff
}

.invoxa-head {
    background: #000;
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 24px 35px;
    border-bottom: 1px solid rgba(100,209,30,.25)
}

.invoxa-brand {
    /* width:220px; */
    /* min-width:220px; */
    padding-right: 35px;
    border-right: 1px solid rgba(255,255,255,.20)
}

.invoxa-brand img {
    width: auto;
    display: block;
    height: auto
}

.invoxa-title {
    flex: 1
}

.invoxa-title h2 {
    margin: 0;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.15;
    text-transform: uppercase
}

.invoxa-title p {
    margin: 8px 0 0;
    color: var(--it-green);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

.cal-icon {
    color: var(--it-green);
    font-size: 18px;
}

.invoxa-table-wrap {
    padding: 18px;
    overflow-x: auto;
}

.invoxa-table {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
    background: rgba(0,0,0,.18);
    border-color: white !important;
    border: 0;
}

.invoxa-table th {
    padding: 18px;
    font-weight: 600;
    font-size: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgb(255 255 255);
    color: #fff;
    text-transform: uppercase;
    /* border: 0; */
}

tr {border-color: #ffffff !important;border: 0;}

thead {
    border-color: white !important;
    border: 0;
}

table caption+thead tr:first-child td, table caption+thead tr:first-child th, table colgroup+thead tr:first-child td, table colgroup+thead tr:first-child th, table thead:first-child tr:first-child td, table thead:first-child tr:first-child th {
    border-block-start: 1px solid white !important;
}

.invoxa-table td {
    padding: 16px 18px;
    border: 1px solid rgb(255 255 255);
    text-align: center;
    font-size: 17px;
    color: var(--it-green);
    font-weight: 600
}

.invoxa-table tbody tr {
    transition: .35s
}

.invoxa-table tbody tr:hover {
    background: rgba(100,209,30,.08)
}

.invoxa-table .rank {
    color: var(--it-green);
    font-weight: 800;
    width: 58px
}

.invoxa-table .team {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    color: #fff;
    font-weight: 800
}

.invoxa-user-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: .35s;
    flex: 0 0 34px;
    background: rgba(255,255,255,.03)
}

.invoxa-user-icon i {
    font-size: 14px;
    color: #fff;
    line-height: 1
}

.invoxa-table tbody tr:hover .invoxa-user-icon {
    background: var(--it-green);
    border-color: var(--it-green)
}

.invoxa-table tbody tr:hover .invoxa-user-icon i {
    color: #000
}

.completion {
    white-space: nowrap
}

.percent {
    color: #fff;
    font-weight: 700;
    min-width: 45px;
    display: inline-block;
    margin-right: 12px
}

.bar {
    display: inline-block;
    width: 170px;
    height: 10px;
    border-radius: 30px;
    background: #7d7d7d;
    overflow: hidden;
    vertical-align: middle
}

.bar i {
    display: block;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(90deg,#64D11E,#96ff4e);
    box-shadow: 0 0 18px rgba(100,209,30,.5);
    transition: width .5s ease
}

.invoxa-popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.92);
    z-index: 999999;
    background: rgba(2,4,2,.96);
    color: #fff;
    border: 1px solid rgba(100,209,30,.75);
    box-shadow: 0 0 0 9999px rgba(0,0,0,.38),0 30px 90px rgba(0,0,0,.55),0 0 45px rgba(100,209,30,.35);
    padding: 24px 30px;
    border-radius: 22px;
    min-width: 340px;
    max-width: 92vw;
    align-items: center;
    gap: 16px
}

.invoxa-popup.show {
    display: flex;
    animation: itPop .28s ease forwards
}

.invoxa-popup .pop-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--it-green);
    color: #000;
    font-size: 24px;
    font-weight: 900
}

.invoxa-popup .pop-icon i {
    color: #000
}

.invoxa-popup strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px
}

.invoxa-popup p {
    margin: 0;
    color: #dfffd2;
    font-size: 15px;
    font-weight: 700
}

#invoxa-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999998
}

.invoxa-admin-wrap {
    background: radial-gradient(circle at 20% 35%,rgba(100,209,30,.16),transparent 30%),radial-gradient(circle at 85% 70%,rgba(100,209,30,.10),transparent 34%),#000;
    color: #fff;
    margin: 18px 20px 0 2px!important;
    padding: 28px;
    border-radius: 18px;
    min-height: calc(100vh - 80px);
    box-shadow: 0 22px 70px rgba(0,0,0,.35)
}

.invoxa-admin-wrap h1,.invoxa-admin-wrap h2,.invoxa-admin-wrap h3 {
    color: #fff;
    font-weight: 800
}

.invoxa-admin-top {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px
}

.invoxa-admin-top img {
    width: 190px;
    max-width: 45%;
    padding-right: 24px;
    border-right: 1px solid rgba(255,255,255,.18)
}

.invoxa-admin-top p {
    color: var(--it-green);
    font-weight: 700
}

.invoxa-admin-card,.invoxa-score-card {
    background: rgba(5,5,5,.88);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    padding: 24px;
    margin: 20px 0;
    max-width: 1100px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28),inset 0 0 0 1px rgba(100,209,30,.06)
}

.invoxa-admin-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(220px,1fr));
    gap: 16px;
    margin-bottom: 18px
}

.invoxa-admin-grid label,.invoxa-score-form label {
    font-weight: 800;
    color: #fff
}

.invoxa-admin-grid input,.invoxa-score-form input {
    display: block;
    width: 100%;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,.18)!important;
    border-radius: 12px!important;
    padding: 13px 14px!important;
    background: #070707!important;
    color: #fff!important;
    box-shadow: 0 0 0 3px transparent!important
}

.invoxa-admin-grid input:focus,.invoxa-score-form input:focus {
    border-color: var(--it-green)!important;
    box-shadow: 0 0 0 3px rgba(100,209,30,.18)!important;
    outline: none
}

.invoxa-score-card {
    max-width: 900px
}

.invoxa-user-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(130px,1fr));
    gap: 14px;
    margin: 18px 0 22px
}

.invoxa-stat {
    background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    padding: 18px
}

.invoxa-stat small {
    display: block;
    color: var(--it-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px
}

.invoxa-stat strong {
    display: block;
    color: var(--it-green);
    font-size: 30px;
    line-height: 1;
    margin-top: 10px
}

.invoxa-user-progress {
    margin: 18px 0
}

.invoxa-user-progress .bar {
    width: 100%;
    height: 14px
}

.invoxa-score-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 14px;
    max-width: 620px
}

.invoxa-score-form label {
    display: block
}

.invoxa-score-form button,.invoxa-admin-wrap .button-primary,.invoxa-admin-wrap .button {
    background: var(--it-green)!important;
    border: 1px solid var(--it-green)!important;
    color: #000!important;
    border-radius: 12px!important;
    font-weight: 900!important;
    padding: 8px 18px!important;
    min-height: 42px;
    box-shadow: none!important
}

.invoxa-admin-wrap .button:not(.button-primary) {
    background: #111!important;
    color: #fff!important;
    border-color: rgba(255,255,255,.24)!important
}

.invoxa-admin-wrap .button-link-delete {
    color: #ff6b6b!important;
    border-color: #ff6b6b!important;
    background: transparent!important
}

.invoxa-form-message {
    grid-column: 1/-1;
    margin-top: 4px;
    color: var(--it-green);
    font-weight: 800
}

.invoxa-wp-table {
    background: #030303!important;
    border: 1px solid rgba(255,255,255,.16)!important;
    color: #fff!important;
    border-radius: 16px;
    overflow: hidden
}

.invoxa-wp-table th {
    background: #0b0b0b!important;
    color: #fff!important;
    border-color: rgba(255,255,255,.14)!important
}

.invoxa-wp-table td {
    background: #030303!important;
    color: #d8d8d8!important;
    border-color: rgba(255,255,255,.10)!important
}

.invoxa-wp-table strong,.invoxa-wp-table .green {
    color: var(--it-green)!important
}

@keyframes itPop {
    to {
        transform: translate(-50%,-50%) scale(1)
    }
}

@media(max-width: 900px) {
    .invoxa-board {
        margin:10px auto
    }

    .invoxa-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 22px
    }

    .invoxa-brand {
        border: none;
        padding: 0;
        width: 180px;
        min-width: 0
    }

    .invoxa-title h2 {
        font-size: 25px
    }

    .invoxa-title p {
        font-size: 13px
    }

    .invoxa-table th,.invoxa-table td {
        font-size: 14px;
        padding: 12px
    }

    .bar {
        width: 105px
    }

    .invoxa-admin-wrap {
        margin: 10px!important;
        padding: 18px
    }

    .invoxa-admin-top {
        display: block
    }

    .invoxa-admin-top img {
        border: 0;
        padding: 0;
        margin-bottom: 15px
    }

    .invoxa-admin-grid,.invoxa-user-stats,.invoxa-score-form {
        grid-template-columns: 1fr
    }

    .invoxa-popup {
        min-width: 290px;
        padding: 20px
    }
}

/* Force Font Awesome icons to render. Global Inter font was overriding FA font-family. */
.invoxa-board .fa-solid,.invoxa-board .fas,.invoxa-admin-wrap .fa-solid,.invoxa-admin-wrap .fas,.invoxa-popup .fa-solid,.invoxa-popup .fas {
    font-family: "Font Awesome 6 Free"!important;
    font-weight: 900!important;
    font-style: normal!important;
    font-variant: normal!important;
    line-height: 1!important;
    text-rendering: auto!important;
    -webkit-font-smoothing: antialiased!important;
}

.invoxa-user-icon .fa-user:before {
    content: "\f007"!important;
}

.cal-icon.fa-calendar-days:before {
    content: "\f073"!important;
}

.pop-icon .fa-trophy:before {
    content: "\f091"!important;
}