/* =========================================================
   STATSLIP — GLOBAL APP + BROWSE / PREDICTION CENTRE
   New shell + SportyBet-inspired match grid
   ========================================================= */

:root {
    --pp-bg: #020914;
    --pp-bg-2: #03111f;
    --pp-panel: #061426;
    --pp-panel-2: #081a2d;
    --pp-card: #071a2d;
    --pp-card-2: #091f35;

    --pp-border: rgba(61, 132, 201, .22);
    --pp-border-strong: rgba(0, 201, 255, .48);

    --pp-text: #f4f8ff;
    --pp-text-2: #d5e4f2;
    --pp-muted: #8298ae;
    --pp-muted-2: #627b94;

    --pp-cyan: #08caff;
    --pp-blue: #087fff;
    --pp-blue-2: #005ed7;
    --pp-red: #ff1744;
    --pp-green: #16dfa0;
    --pp-yellow: #ffd447;

    --pp-sidebar-width: 208px;
    --pp-header-height: 64px;

    --pp-radius: 10px;
    --pp-radius-sm: 7px;
}


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

html {
    min-height: 100%;
    background: var(--pp-bg);
}

body.pp-body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    color: var(--pp-text);
    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(0, 91, 255, .10),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(0, 180, 255, .07),
            transparent 28%
        ),
        #020914;

    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}

body.pp-body *,
body.pp-body *::before,
body.pp-body *::after {
    box-sizing: border-box;
}

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

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

button:disabled {
    cursor: not-allowed;
}

::selection {
    color: #00121c;
    background: var(--pp-cyan);
}


/* =========================================================
   APP SHELL
   ========================================================= */

.pp-app {
    min-height: 100vh;
    display: flex;
    background:
        linear-gradient(
            115deg,
            rgba(0, 101, 255, .025),
            transparent 35%
        );
}

.pp-main {
    min-width: 0;
    flex: 1;
    min-height: 100vh;
    margin-left: var(--pp-sidebar-width);
    display: flex;
    flex-direction: column;
}

.pp-content {
    flex: 1;
    min-width: 0;
    padding: 8px 16px 28px;
}

.pp-footer {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 18px;

    border-top: 1px solid rgba(55, 122, 184, .13);
    color: #5f7891;
    font-size: 9px;
}

.pp-footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pp-footer-links a {
    color: inherit;
    text-decoration: none;
}

.pp-footer-links a:hover {
    color: var(--pp-cyan);
}


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

.pp-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;

    width: var(--pp-sidebar-width);
    min-width: var(--pp-sidebar-width);

    display: flex;
    flex-direction: column;

    border-right: 1px solid rgba(60, 130, 196, .18);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(0, 129, 255, .08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #03101e 0%,
            #020b16 100%
        );

    box-shadow: 12px 0 35px rgba(0, 0, 0, .14);
}

.pp-sidebar-top {
    height: 70px;
    flex: 0 0 70px;

    display: flex;
    align-items: center;

    padding: 0 17px;

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

.pp-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #fff;
    text-decoration: none;

    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.pp-logo:hover {
    color: #fff;
}

.pp-logo-text span {
    color: var(--pp-cyan);
}

.pp-logo-mark {
    position: relative;
    width: 29px;
    height: 34px;
    display: block;
    flex: 0 0 29px;
    transform: skewY(-10deg);
}

.pp-logo-mark::before,
.pp-logo-mark::after,
.pp-logo-mark span {
    content: "";
    position: absolute;
    display: block;
    border-radius: 3px;
}

.pp-logo-mark::before {
    left: 0;
    top: 0;
    width: 12px;
    height: 33px;
    background: linear-gradient(180deg, #08caff, #087fff);
    box-shadow: 0 0 16px rgba(0, 202, 255, .24);
}

.pp-logo-mark::after {
    left: 8px;
    top: 0;
    width: 18px;
    height: 12px;
    background: #0a96ff;
}

.pp-logo-mark span {
    left: 8px;
    top: 15px;
    width: 12px;
    height: 12px;
    background: #005bd2;
}

.pp-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 17px 10px 10px;

    scrollbar-width: thin;
    scrollbar-color: rgba(0, 165, 255, .18) transparent;
}

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

.pp-sidebar-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 165, 255, .18);
}

.pp-nav-section {
    margin-bottom: 19px;
}

.pp-nav-label {
    padding: 0 12px 8px;

    color: #506a83;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.pp-nav-item {
    min-height: 42px;

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

    margin-bottom: 3px;
    padding: 0 11px;

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

    color: #9eb1c4;
    text-decoration: none;

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

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

.pp-nav-item:hover {
    color: #fff;
    background: rgba(0, 157, 255, .07);
}

.pp-nav-item.active {
    color: #fff;

    border-color: rgba(0, 202, 255, .52);

    background:
        linear-gradient(
            90deg,
            rgba(0, 172, 255, .24),
            rgba(0, 89, 198, .08)
        );

    box-shadow:
        inset 0 0 22px rgba(0, 200, 255, .05),
        0 0 18px rgba(0, 170, 255, .06);
}

.pp-nav-icon {
    width: 20px;
    flex: 0 0 20px;

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

    color: #7891a9;
    font-size: 15px;
}

.pp-nav-item.active .pp-nav-icon {
    color: var(--pp-cyan);
}

.pp-nav-badge {
    min-width: 20px;
    height: 19px;

    margin-left: auto;
    padding: 0 6px;

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

    border-radius: 30px;

    color: #00131d;
    background: var(--pp-cyan);

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

.pp-nav-badge.danger {
    color: #fff;
    background: var(--pp-red);
}

.pp-mobile-sidebar-close {
    display: none;
}


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

.pp-sidebar-vip {
    position: relative;
    overflow: hidden;

    margin: 9px 10px 10px;
    padding: 14px;

    border: 1px solid rgba(0, 200, 255, .43);
    border-radius: 13px;

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(0, 176, 255, .20),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #061b30,
            #031020
        );

    box-shadow: 0 0 26px rgba(0, 142, 255, .07);
}

.pp-sidebar-vip::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -55px;
    bottom: -65px;

    border: 1px solid rgba(0, 198, 255, .12);
    border-radius: 50%;
}

.pp-vip-icon {
    color: #ffd447;
    font-size: 21px;
}

.pp-vip-title {
    margin-top: 3px;
    color: #ffd447;
    font-size: 15px;
    font-weight: 900;
}

.pp-vip-text {
    margin: 6px 0 12px;
    color: #9eb5ca;
    font-size: 8px;
    line-height: 1.55;
}

.pp-vip-button {
    position: relative;
    z-index: 2;

    display: block;
    min-height: 34px;

    padding: 0 8px;

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

    border-radius: 8px;

    color: #00131d;
    background: linear-gradient(90deg, #08d0ff, #05b1ed);

    text-decoration: none;

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


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

.pp-sidebar-overlay {
    display: none;
}


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

.pp-header {
    position: sticky;
    top: 0;
    z-index: 900;

    min-height: var(--pp-header-height);

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

    padding: 9px 16px;

    border-bottom: 1px solid rgba(56, 125, 187, .15);

    background: rgba(2, 12, 24, .91);

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

.pp-header-left {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;
}

.pp-search {
    width: min(580px, 100%);
    height: 39px;

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

    padding: 0 12px;

    border: 1px solid rgba(63, 134, 198, .26);
    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 28, 50, .96),
            rgba(5, 20, 37, .96)
        );
}

.pp-search:focus-within {
    border-color: rgba(0, 200, 255, .58);
    box-shadow: 0 0 18px rgba(0, 172, 255, .07);
}

.pp-search i {
    flex: 0 0 auto;
    color: #9db2c7;
    font-size: 15px;
}

.pp-search input {
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    color: #edf7ff;
    background: transparent;

    font-size: 11px;
}

.pp-search input::placeholder {
    color: #6f8499;
}

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

.pp-vip-header {
    height: 38px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 0 15px;

    border: 1px solid rgba(255, 212, 71, .25);
    border-radius: 9px;

    color: #ffd447;
    background: rgba(255, 212, 71, .045);

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

.pp-header-icon {
    position: relative;

    width: 38px;
    height: 38px;

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

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

    color: #9db2c5;
    background: transparent;

    font-size: 17px;
}

.pp-header-icon:hover {
    color: #fff;
    background: rgba(0, 145, 255, .07);
}

.pp-header-icon span {
    position: absolute;
    top: -4px;
    right: -3px;

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

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

    border-radius: 50%;

    color: #fff;
    background: var(--pp-red);

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

.pp-balance {
    height: 38px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 0 12px;

    border: 1px solid rgba(60, 132, 193, .26);
    border-radius: 9px;

    color: #f5f9ff;
    background: #07192c;

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

.pp-balance:hover {
    border-color: rgba(0, 190, 255, .48);
}

.pp-balance-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    color: #dceeff;
    background: rgba(255, 255, 255, .07);

    font-size: 9px;
}

.pp-balance i {
    margin-left: 2px;
    color: #718ba4;
    font-size: 9px;
}

.pp-deposit {
    height: 38px;

    min-width: 96px;

    padding: 0 17px;

    border: 0;
    border-radius: 9px;

    color: #00121c;
    background: linear-gradient(90deg, #08d0ff, #06b3ee);

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

    box-shadow: 0 7px 20px rgba(0, 202, 255, .13);
}

.pp-deposit:hover {
    filter: brightness(1.06);
}

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

    overflow: hidden;
    padding: 0;

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

    border: 1px solid rgba(0, 194, 255, .52);
    border-radius: 50%;

    color: #fff;
    background: #0a2946;

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

.pp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-mobile-menu {
    display: none;
}


/* =========================================================
   BROWSE PAGE
   ========================================================= */

.pp-browse-page {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   HERO
   ========================================================= */

.pp-hero {
    position: relative;
    min-height: 268px;

    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 28px 38px;

    border: 1px solid rgba(0, 148, 255, .36);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 76% 45%,
            rgba(0, 159, 255, .27),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 0%,
            rgba(0, 217, 255, .13),
            transparent 27%
        ),
        linear-gradient(
            110deg,
            #03102b 0%,
            #05204a 52%,
            #021123 100%
        );

    box-shadow:
        inset 0 0 70px rgba(0, 100, 255, .09),
        0 14px 38px rgba(0, 0, 0, .18);
}

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

    background:
        linear-gradient(
            120deg,
            transparent 0 42%,
            rgba(0, 187, 255, .08) 43%,
            transparent 44% 56%,
            rgba(0, 110, 255, .08) 57%,
            transparent 58%
        );

    pointer-events: none;
}

.pp-hero::after {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    right: 2%;
    top: -210px;

    border: 1px solid rgba(0, 193, 255, .17);
    border-radius: 50%;

    box-shadow:
        0 0 0 34px rgba(0, 154, 255, .035),
        0 0 0 70px rgba(0, 154, 255, .025);
}

.pp-hero-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 60% 65%,
            rgba(0, 203, 255, .13),
            transparent 20%
        ),
        repeating-linear-gradient(
            126deg,
            transparent 0,
            transparent 31px,
            rgba(0, 179, 255, .035) 32px,
            transparent 33px
        );

    pointer-events: none;
}

.pp-hero-content {
    position: relative;
    z-index: 4;

    max-width: 560px;
}

.pp-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #9bdcff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.pp-hero-ball {
    font-size: 16px;
}

.pp-hero h1 {
    margin: 9px 0 7px;

    color: #fff;

    font-size: clamp(31px, 4vw, 53px);
    line-height: .92;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -2.6px;
}

.pp-hero h1 span {
    color: var(--pp-cyan);
}

.pp-hero p {
    max-width: 455px;

    margin: 0 0 18px;

    color: #b7cee2;

    font-size: 12px;
    line-height: 1.5;
}

.pp-primary-button {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 0 18px;

    border: 0;
    border-radius: 8px;

    color: #00131d;
    background: linear-gradient(90deg, #08d0ff, #05aeea);

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

    box-shadow: 0 8px 24px rgba(0, 201, 255, .13);
}

.pp-primary-button:hover {
    filter: brightness(1.06);
}

.pp-hero-decoration {
    position: absolute;
    z-index: 2;

    border: 1px solid rgba(0, 192, 255, .15);
    border-radius: 50%;
}

.pp-hero-decoration.hero-one {
    width: 360px;
    height: 360px;
    right: 7%;
    top: -125px;
}

.pp-hero-decoration.hero-two {
    width: 270px;
    height: 270px;
    right: 17%;
    top: -75px;
}

.pp-hero-decoration.hero-three {
    width: 175px;
    height: 175px;
    right: 29%;
    top: -27px;
}


/* =========================================================
   SPORTS STRIP
   ========================================================= */

.pp-sports-strip {
    display: grid;
    grid-template-columns: repeat(10, minmax(70px, 1fr));
    gap: 6px;

    margin-top: 10px;
}

.pp-sport-item {
    min-width: 0;
    min-height: 68px;

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

    gap: 2px;

    padding: 6px;

    border: 1px solid rgba(50, 125, 187, .23);
    border-radius: 9px;

    color: #a7bbcf;
    background: #06172a;

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

.pp-sport-item:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 187, 255, .4);
}

.pp-sport-item i {
    color: #b8cbe0;
    font-size: 17px;
}

.pp-sport-item strong {
    color: inherit;
    font-size: 8px;
    font-weight: 800;
}

.pp-sport-item small {
    color: #69839c;
    font-size: 7px;
}

.pp-sport-item.active {
    color: #00131d;

    border-color: rgba(0, 221, 255, .65);

    background: linear-gradient(
        145deg,
        #08d4ff,
        #008ddd
    );

    box-shadow: 0 8px 20px rgba(0, 191, 255, .13);
}

.pp-sport-item.active i,
.pp-sport-item.active small {
    color: #003448;
}


/* =========================================================
   FILTER BAR
   ========================================================= */

.pp-filter-row {
    min-width: 0;

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

    margin: 10px 0;
}

.pp-filter-scroll {
    min-width: 0;
    flex: 1;

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

    overflow-x: auto;

    scrollbar-width: none;
}

.pp-filter-scroll::-webkit-scrollbar {
    display: none;
}

.pp-filter-chip {
    flex: 0 0 auto;

    min-height: 33px;

    padding: 0 12px;

    border: 1px solid rgba(59, 129, 190, .23);
    border-radius: 7px;

    color: #9db1c4;
    background: #06172a;

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

.pp-filter-chip:hover {
    color: #fff;
    border-color: rgba(0, 184, 255, .35);
}

.pp-filter-chip.active {
    color: #fff;
    border-color: rgba(0, 198, 255, .54);
    background: rgba(0, 143, 226, .19);
}

.pp-filter-chip.danger.active {
    border-color: transparent;
    background: linear-gradient(90deg, #ff1744, #ff3158);
}

.live-dot {
    width: 6px;
    height: 6px;

    display: inline-block;

    margin-right: 5px;

    border-radius: 50%;

    background: #fff;
    box-shadow: 0 0 7px rgba(255, 255, 255, .8);
}

.pp-filter-button {
    flex: 0 0 auto;

    min-height: 33px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 0 12px;

    border: 1px solid rgba(69, 138, 192, .42);
    border-radius: 7px;

    color: #c5d8e9;
    background: #06172a;

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


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

.pp-match-workspace {
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 10px;

    align-items: start;
}

.pp-match-area {
    min-width: 0;
}

.pp-match-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}


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

.pp-match-card {
    min-width: 0;
    position: relative;

    padding: 8px;

    border: 1px solid rgba(46, 121, 187, .30);
    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 27, 47, .99),
            rgba(3, 16, 30, .99)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .02);

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

.pp-match-card:hover {
    transform: translateY(-1px);

    border-color: rgba(0, 187, 255, .55);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .17);
}

.pp-match-card.selected {
    border-color: rgba(0, 204, 255, .76);

    box-shadow:
        inset 2px 0 0 var(--pp-cyan),
        0 0 20px rgba(0, 175, 255, .07);
}

.pp-match-card-top {
    min-width: 0;

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

    margin-bottom: 5px;

    color: #829ab2;

    font-size: 8px;
}

.pp-league {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 5px;
}

.pp-league-ball {
    flex: 0 0 auto;
}

.pp-league span:last-child {
    overflow: hidden;

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

.pp-match-card-top > i {
    flex: 0 0 auto;
    color: #7b93aa;
    font-size: 9px;
}

.pp-match-meta {
    min-height: 19px;

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

    color: #93a9bd;

    font-size: 8px;
}

.pp-live-label {
    padding: 3px 6px;

    border-radius: 4px;

    color: #fff;
    background: var(--pp-red);

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

.pp-live-time {
    margin-left: 4px;

    color: #ff4d69;

    font-weight: 900;
}

.pp-match-interest {
    color: #718ba4;
}

.pp-match-interest i {
    margin-right: 2px;
}


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

.pp-teams {
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    align-items: center;

    margin: 5px 0 8px;
}

.pp-team {
    min-width: 0;
    text-align: center;
}

.pp-team-logo {
    width: 31px;
    height: 31px;

    margin: 0 auto 4px;

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

.pp-team-logo img {
    width: 31px;
    height: 31px;

    display: block;

    object-fit: contain;
}

.pp-team-logo span {
    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    color: #607d98;
    background: #0a2138;
}

.pp-team-name {
    min-width: 0;

    overflow: hidden;

    color: #e1edf7;

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

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

.pp-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    color: #06d2ff;

    font-size: 14px;
}

.pp-score strong {
    font-weight: 900;
}

.pp-score > span {
    color: #627e99;
}

.pp-score .vs {
    color: #7791a9;
    font-size: 8px;
    font-weight: 800;
}


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

.pp-prediction-result {
    margin-top: 5px;

    padding: 7px;

    border: 1px solid rgba(0, 190, 255, .20);
    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(0, 136, 215, .10),
            rgba(5, 25, 43, .72)
        );
}

.pp-prediction-label {
    margin-bottom: 3px;

    color: #6f8ba5;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .75px;
}

.pp-prediction-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pp-prediction-main > div:first-child {
    min-width: 0;
}

.pp-prediction-main strong {
    display: block;

    overflow: hidden;

    color: #fff;

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

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

.pp-prediction-main small {
    display: block;
    margin-top: 2px;

    color: #7892aa;
    font-size: 7px;
}

.pp-prediction-prob {
    flex: 0 0 auto;
    text-align: right;
}

.pp-prediction-prob > strong {
    color: #00d5ff;
    font-size: 13px;
    font-weight: 900;
}

.pp-prediction-prob span {
    display: block;
    margin-top: 1px;

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

.pp-prediction-prob span.success {
    color: var(--pp-green);
}

.pp-prediction-prob span.primary,
.pp-prediction-prob span.info {
    color: var(--pp-cyan);
}

.pp-prediction-prob span.warning {
    color: var(--pp-yellow);
}

.pp-prediction-prob span.secondary,
.pp-prediction-prob span.dark {
    color: #71859a;
}


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

.pp-predict-button,
.pp-analysis-button {
    width: 100%;
    min-height: 31px;

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

    margin-top: 7px;
    padding: 0 9px;

    border-radius: 6px;

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

.pp-predict-button {
    border: 0;

    color: #00131d;
    background: linear-gradient(90deg, #08d0ff, #06afe9);

    box-shadow: 0 5px 14px rgba(0, 197, 255, .08);
}

.pp-predict-button:hover {
    filter: brightness(1.06);
}

.pp-predict-button span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pp-analysis-button {
    border: 1px solid rgba(0, 193, 255, .35);

    color: rgba(0, 158, 230, .14);
    background: #08d0ff;
}

.pp-analysis-button:hover {
    border-color: rgba(0, 210, 255, .62);
    color: #fff;
    background: rgba(0, 158, 230, .14);
}

.pp-selected-indicator {
    margin-top: 6px;

    color: var(--pp-green);

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

.pp-selected-indicator i {
    margin-right: 3px;
}


/* =========================================================
   DESKTOP PREDICTION SLIP
   ========================================================= */

.pp-prediction-slip {
    position: sticky;
    top: 74px;

    min-width: 0;
    min-height: 350px;
    max-height: calc(100vh - 88px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(50, 126, 190, .34);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #06182b,
            #03101e
        );

    box-shadow: 0 15px 40px rgba(0, 0, 0, .23);
}

.pp-slip-header {
    min-height: 47px;

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

    padding: 0 11px;

    border-bottom: 1px solid rgba(55, 126, 190, .15);
}

.pp-slip-title {
    min-width: 0;

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

    color: #f4f8ff;
    font-size: 11px;
}

.pp-slip-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;

    border-radius: 50%;
    background: var(--pp-cyan);
    box-shadow: 0 0 8px rgba(0, 202, 255, .35);
}

.pp-slip-count {
    min-width: 18px;
    height: 18px;

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

    border-radius: 50%;

    color: #00131d;
    background: var(--pp-cyan);

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

.pp-clear-slip {
    border: 0;

    color: #00cfff;
    background: transparent;

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

.pp-clear-slip:disabled {
    opacity: .35;
}

.pp-slip-mode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;

    margin: 7px;
    padding: 3px;

    border-radius: 7px;
    background: #071a2e;
}

.pp-slip-mode button {
    min-height: 28px;

    border: 0;
    border-radius: 5px;

    color: #8298ae;
    background: transparent;

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

.pp-slip-mode button.active {
    color: #00131d;
    background: var(--pp-cyan);
}

.pp-slip-body {
    flex: 1;
    min-height: 0;

    overflow-y: auto;

    padding: 0 7px;

    scrollbar-width: thin;
    scrollbar-color: rgba(0, 173, 255, .18) transparent;
}

.pp-slip-body::-webkit-scrollbar {
    width: 3px;
}

.pp-slip-body::-webkit-scrollbar-thumb {
    background: rgba(0, 173, 255, .18);
}

.pp-slip-match {
    position: relative;

    margin-bottom: 5px;
    padding: 9px;

    border: 1px solid rgba(46, 119, 184, .22);
    border-radius: 7px;

    background: rgba(7, 26, 45, .72);
}

.pp-slip-match:hover {
    border-color: rgba(0, 182, 255, .36);
}

.pp-slip-match-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.pp-slip-match-name {
    min-width: 0;

    color: #e1edf7;

    font-size: 8px;
    font-weight: 750;
    line-height: 1.45;
}

.pp-slip-match-name span {
    color: #607992;
    margin: 0 2px;
}

.pp-slip-match-top button {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    padding: 0;

    border: 0;
    border-radius: 5px;

    color: #849ab0;
    background: rgba(0, 145, 220, .06);

    font-size: 14px;
    line-height: 1;
}

.pp-slip-match-top button:hover {
    color: #fff;
    background: rgba(255, 23, 68, .12);
}

.pp-slip-prediction {
    margin-top: 7px;
    padding-top: 7px;

    border-top: 1px solid rgba(59, 126, 183, .12);

    display: flex;
    flex-direction: column;
}

.pp-slip-prediction small {
    color: #7188a0;
    font-size: 7px;
}

.pp-slip-prediction strong {
    margin-top: 2px;
    color: #fff;
    font-size: 10px;
}

.pp-slip-prob {
    position: absolute;
    right: 9px;
    bottom: 9px;

    color: var(--pp-cyan);

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

.pp-slip-pending {
    margin-top: 7px;
    padding-top: 7px;

    border-top: 1px solid rgba(59, 126, 183, .12);

    color: #6d849b;
    font-size: 7px;
}

.pp-slip-empty {
    min-height: 270px;

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

    padding: 25px 14px;

    text-align: center;
}

.pp-slip-empty-icon {
    width: 49px;
    height: 49px;

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

    margin-bottom: 10px;

    border: 1px solid rgba(0, 190, 255, .22);
    border-radius: 13px;

    color: #4f88ae;
    background: #071b31;

    font-size: 20px;
}

.pp-slip-empty strong {
    color: #dce8f3;
    font-size: 10px;
}

.pp-slip-empty span {
    max-width: 205px;
    margin-top: 5px;

    color: #637d96;
    font-size: 8px;
    line-height: 1.5;
}

.pp-slip-footer {
    flex: 0 0 auto;

    padding: 9px;

    border-top: 1px solid rgba(54, 125, 186, .14);
}

.pp-slip-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #7890a7;
    font-size: 8px;
}

.pp-slip-stat strong {
    color: #fff;
}

.pp-compute-button {
    width: 100%;
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 0;
    border-radius: 7px;

    color: #00131d;
    background: linear-gradient(90deg, #08d0ff, #06afe9);

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

.pp-compute-button:disabled {
    opacity: .35;
}


/* =========================================================
   MOBILE FLOATING SLIP
   ========================================================= */

.pp-mobile-slip-trigger {
    display: none;
}

.pp-mobile-slip-close {
    display: none;
}


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

.pp-empty-state {
    min-height: 300px;

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

    padding: 25px;

    border: 1px dashed rgba(56, 125, 187, .3);
    border-radius: 12px;

    background: rgba(5, 20, 35, .55);

    text-align: center;
}

.pp-empty-icon {
    margin-bottom: 10px;
    color: #4d7699;
    font-size: 29px;
}

.pp-empty-state h3 {
    margin: 0;
    color: #dce9f5;
    font-size: 15px;
    font-weight: 800;
}

.pp-empty-state p {
    max-width: 350px;
    margin: 6px 0 0;
    color: #6c849c;
    font-size: 9px;
}


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

.pp-pagination {
    margin-top: 12px;
}

.pp-pagination .pagination {
    gap: 4px;
    margin: 0;
}

.pp-pagination .page-link {
    min-width: 31px;
    min-height: 30px;

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

    border: 1px solid rgba(54, 124, 184, .22);
    border-radius: 6px !important;

    color: #91a7bb;
    background: #06172a;

    font-size: 9px;
}

.pp-pagination .page-item.active .page-link {
    color: #00131d;
    border-color: transparent;
    background: var(--pp-cyan);
}

.pp-pagination .page-item.disabled .page-link {
    color: #435b72;
    background: #04101e;
}


/* =========================================================
   GLOBAL FORM / BOOTSTRAP DARK OVERRIDES
   ========================================================= */

.pp-body .form-control,
.pp-body .form-select {
    color: #e8f2fb;
    background-color: #06172a;
    border-color: rgba(60, 130, 190, .25);
}

.pp-body .form-control::placeholder {
    color: #6c849c;
}

.pp-body .form-control:focus,
.pp-body .form-select:focus {
    color: #fff;
    background-color: #071b30;
    border-color: rgba(0, 199, 255, .55);
    box-shadow: 0 0 0 .18rem rgba(0, 183, 255, .08);
}

.pp-body .btn-primary {
    border-color: transparent;
    background: var(--pp-cyan);
    color: #00131d;
}

.pp-body .text-muted {
    color: #6f8499 !important;
}


/* =========================================================
   RESPONSIVE — LARGE
   ========================================================= */

@media (max-width: 1350px) {

    .pp-match-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pp-sports-strip {
        grid-template-columns: repeat(5, minmax(70px, 1fr));
    }

    .pp-hero {
        min-height: 250px;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --pp-sidebar-width: 190px;
    }

    .pp-match-workspace {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .pp-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pp-vip-header {
        display: none;
    }

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

    .pp-hero-decoration.hero-one {
        right: -20px;
    }

    .pp-hero-decoration.hero-two {
        right: 5%;
    }

    .pp-hero-decoration.hero-three {
        right: 22%;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --pp-sidebar-width: 245px;
    }

    body.pp-body {
        font-size: 13px;
    }

    .pp-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 18px 0 50px rgba(0, 0, 0, .42);
    }

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

    .pp-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 950;

        display: block;

        background: rgba(0, 0, 0, .68);

        opacity: 0;
        pointer-events: none;

        transition: opacity .25s ease;
    }

    body.pp-sidebar-open .pp-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .pp-mobile-sidebar-close {
        display: inline-flex;

        width: 30px;
        height: 30px;

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

        margin-left: auto;

        padding: 0;

        border: 0;
        border-radius: 7px;

        color: #9cb1c5;
        background: rgba(0, 148, 225, .06);

        font-size: 20px;
        line-height: 1;
    }

    .pp-main {
        width: 100%;
        margin-left: 0;
    }

    .pp-header {
        min-height: 59px;
        padding: 8px 9px;
        gap: 7px;
    }

    .pp-mobile-menu {
        width: 37px;
        height: 37px;
        flex: 0 0 37px;

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

        margin-right: 6px;

        border: 1px solid rgba(55, 130, 190, .3);
        border-radius: 8px;

        color: #fff;
        background: #06172a;

        font-size: 18px;
    }

    .pp-search {
        width: 100%;
        height: 37px;
    }

    .pp-header-actions {
        gap: 5px;
    }

    .pp-vip-header,
    .pp-header-icon,
    .pp-balance,
    .pp-deposit {
        display: none;
    }

    .pp-avatar {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
    }

    .pp-content {
        padding: 6px 8px 82px;
    }

    .pp-footer {
        display: none;
    }

    .pp-hero {
        min-height: 205px;

        padding: 22px 20px;

        border-radius: 12px;
    }

    .pp-hero-content {
        max-width: 82%;
    }

    .pp-hero h1 {
        margin-top: 7px;
        font-size: 33px;
        letter-spacing: -1.7px;
    }

    .pp-hero p {
        font-size: 9px;
    }

    .pp-primary-button {
        min-height: 36px;
        padding: 0 14px;
        font-size: 9px;
    }

    .pp-hero-decoration.hero-one {
        width: 250px;
        height: 250px;
        right: -115px;
        top: -35px;
    }

    .pp-hero-decoration.hero-two {
        width: 185px;
        height: 185px;
        right: -55px;
        top: 0;
    }

    .pp-hero-decoration.hero-three {
        width: 120px;
        height: 120px;
        right: 4px;
        top: 30px;
    }

    .pp-sports-strip {
        display: flex;

        overflow-x: auto;

        margin-top: 8px;
        padding-bottom: 2px;

        scrollbar-width: none;
    }

    .pp-sports-strip::-webkit-scrollbar {
        display: none;
    }

    .pp-sport-item {
        flex: 0 0 70px;
        min-height: 63px;
    }

    .pp-filter-row {
        margin: 8px 0;
    }

    .pp-filter-button {
        display: none;
    }

    .pp-filter-chip {
        min-height: 31px;
        padding: 0 10px;
        font-size: 8px;
    }

    .pp-match-workspace {
        display: block;
    }

    .pp-prediction-slip {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1200;

        display: none;

        width: 100%;
        max-height: 82vh;
        min-height: 0;

        border-radius: 18px 18px 0 0;

        box-shadow: 0 -18px 55px rgba(0, 0, 0, .55);
    }

    body.pp-mobile-slip-open .pp-prediction-slip {
        display: flex;
    }

    body.pp-mobile-slip-open::before {
        content: "";

        position: fixed;
        inset: 0;
        z-index: 1190;

        background: rgba(0, 0, 0, .68);
    }

    .pp-mobile-slip-close {
        width: 30px;
        height: 30px;

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

        border: 0;
        border-radius: 7px;

        color: #9bb1c6;
        background: rgba(0, 160, 230, .07);

        font-size: 15px;
    }

    .pp-mobile-slip-trigger {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1100;

        height: 51px;

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

        padding: 0 12px;

        border: 1px solid rgba(0, 194, 255, .48);
        border-radius: 12px;

        color: #fff;
        background:
            linear-gradient(
                90deg,
                #062743,
                #073b5e
            );

        box-shadow: 0 10px 35px rgba(0, 0, 0, .44);

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

    .pp-mobile-slip-trigger.has-items {
        border-color: rgba(0, 211, 255, .75);
        background:
            linear-gradient(
                90deg,
                #073657,
                #075174
            );
    }

    .pp-mobile-slip-icon {
        color: var(--pp-cyan);
        font-size: 17px;
    }

    .pp-mobile-slip-trigger strong {
        min-width: 23px;
        height: 23px;

        margin-left: auto;

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

        border-radius: 50%;

        color: #00131d;
        background: var(--pp-cyan);

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

    .pp-match-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .pp-match-card {
        padding: 9px;
    }

    .pp-team-name {
        font-size: 10px;
        font-weight: bold;
    }

    .pp-team-logo,
    .pp-team-logo img {
        width: 34px;
        height: 34px;
    }

    .pp-score {
        font-size: 15px;
    }

    .pp-predict-button,
    .pp-analysis-button {
        min-height: 35px;
        font-size: 9px;
    }

    .pp-prediction-main strong {
        font-size: 11px;
    }

    .pp-prediction-prob > strong {
        font-size: 14px;
    }

    .pp-empty-state {
        min-height: 240px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .pp-content {
        padding-left: 6px;
        padding-right: 6px;
    }

    .pp-header {
        padding-left: 6px;
        padding-right: 6px;
    }

    .pp-hero {
        min-height: 195px;
        padding-left: 17px;
        padding-right: 17px;
    }

    .pp-hero-content {
        max-width: 90%;
    }

    .pp-hero h1 {
        font-size: 29px;
    }

    .pp-sport-item {
        flex-basis: 66px;
    }

    .pp-match-card {
        border-radius: 8px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

































 .match-detail-page {
            min-height: 100vh;
            background:
                radial-gradient(circle at 20% 0%, rgba(0, 153, 255, .10), transparent 28%),
                radial-gradient(circle at 90% 10%, rgba(126, 61, 255, .10), transparent 25%),
                #070b14;
            color: #eef4ff;
        }

        .detail-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #aebbd0;
            text-decoration: none;
            font-weight: 600;
        }

        .back-link:hover {
            color: #fff;
        }

        .back-icon {
            font-size: 28px;
            line-height: 1;
        }

        .detail-top-actions {
            display: flex;
            gap: 8px;
        }

        .slip-action {
            border: 1px solid rgba(255,255,255,.10);
            background: rgba(255,255,255,.045);
            color: #fff;
            border-radius: 10px;
            padding: 10px 15px;
            font-weight: 700;
            font-size: 13px;
        }

        .slip-action.active {
            background: rgba(0, 196, 255, .12);
            border-color: rgba(0, 196, 255, .35);
        }

        .match-hero {
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 20px;
            background: linear-gradient(
                145deg,
                rgba(20, 28, 45, .96),
                rgba(8, 13, 24, .98)
            );
            padding: 25px;
            box-shadow: 0 20px 70px rgba(0,0,0,.24);
            margin-bottom: 20px;
        }

        .match-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            color: #8290a7;
            font-size: 12px;
            text-align: center;
        }

        .league-name {
            color: #d9e5f7;
            font-weight: 700;
        }

        .meta-dot {
            opacity: .45;
        }

        .status-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 11px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .status-pill.live {
            background: rgba(255, 55, 80, .12);
            border: 1px solid rgba(255, 55, 80, .28);
            color: #ff6578;
        }

        .status-pill.finished {
            background: rgba(255,255,255,.06);
            color: #aab5c7;
        }

        .status-pill.upcoming {
            background: rgba(0, 180, 255, .10);
            color: #53c8ff;
        }

        .status-pill.cancelled {
            background: rgba(255, 90, 90, .10);
            color: #ff7676;
        }

        .live-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ff5167;
            box-shadow: 0 0 10px rgba(255,81,103,.8);
        }

        .extra-time {
            color: #ff6c78;
            font-size: 11px;
            font-weight: 700;
        }

        .teams-score {
            display: grid;
            grid-template-columns: 1fr 180px 1fr;
            align-items: center;
            gap: 25px;
            max-width: 900px;
            margin: 28px auto 5px;
        }

        .team-block {
            text-align: center;
        }

        .team-block.away {
            text-align: center;
        }

        .team-logo-wrap {
            width: 78px;
            height: 78px;
            margin: 0 auto 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .team-logo {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .team-logo-placeholder {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(
                135deg,
                #172239,
                #0c1220
            );
            border: 1px solid rgba(255,255,255,.10);
            color: #9fb0c9;
            font-size: 25px;
            font-weight: 800;
        }

        .team-name {
            font-size: 18px;
            font-weight: 800;
            color: #f6f9ff;
        }

        .team-side-label {
            margin-top: 5px;
            color: #68768d;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .12em;
        }

        .main-score {
            text-align: center;
        }

        .score-numbers {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font-size: 52px;
            line-height: 1;
            font-weight: 900;
            letter-spacing: -.06em;
        }

        .score-separator {
            color: #59677e;
            font-weight: 500;
        }

        .ht-score {
            margin-top: 10px;
            color: #7f8da4;
            font-size: 11px;
            font-weight: 700;
        }

        .vs-label {
            font-size: 25px;
            font-weight: 900;
            color: #68768b;
        }

        .kickoff-label {
            margin-top: 8px;
            color: #56c9ff;
            font-weight: 700;
            font-size: 13px;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 330px;
            gap: 20px;
            align-items: start;
        }

        .prediction-card,
        .markets-section,
        .intelligence-card,
        .sidebar-card {
            border: 1px solid rgba(255,255,255,.07);
            background: rgba(13, 19, 32, .88);
            border-radius: 18px;
            box-shadow: 0 14px 45px rgba(0,0,0,.16);
        }

        .prediction-card {
            padding: 22px;
        }

        .prediction-card.primary {
            border-color: rgba(0, 187, 255, .16);
            background:
                linear-gradient(
                    135deg,
                    rgba(0, 151, 255, .08),
                    rgba(15, 20, 34, .95) 48%
                );
        }

        .section-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 20px;
        }

        .section-heading h2,
        .sidebar-heading h3 {
            margin: 3px 0 0;
            color: #f4f7fd;
            font-weight: 800;
        }

        .section-heading h2 {
            font-size: 20px;
        }

        .eyebrow {
            color: #4ebfff;
            font-size: 9px;
            letter-spacing: .13em;
            font-weight: 900;
        }

        .engine-badge {
            padding: 6px 9px;
            border-radius: 8px;
            background: rgba(126, 76, 255, .10);
            border: 1px solid rgba(126, 76, 255, .18);
            color: #b79aff;
            font-size: 9px;
            font-weight: 800;
        }

        .best-prediction {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 160px auto;
            align-items: center;
            gap: 18px;
            padding: 20px;
            border-radius: 14px;
            background: rgba(255,255,255,.035);
            border: 1px solid rgba(255,255,255,.055);
        }

        .best-label {
            display: block;
            color: #68778e;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .12em;
            margin-bottom: 6px;
        }

        .best-market strong {
            font-size: 25px;
            color: #fff;
        }

        .best-probability {
            text-align: center;
        }

        .best-probability strong {
            display: block;
            color: #4cc9ff;
            font-size: 30px;
            line-height: 1;
        }

        .best-probability span {
            color: #66748b;
            font-size: 9px;
        }

        .best-confidence {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #c8d4e6;
            font-size: 11px;
            font-weight: 800;
        }

        .confidence-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4cc9ff;
            box-shadow: 0 0 10px rgba(76,201,255,.45);
        }

        .prediction-rationale {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            padding: 13px 15px;
            border-radius: 12px;
            background: rgba(255,255,255,.025);
            color: #9eabc0;
        }

        .prediction-rationale p {
            margin: 0;
            font-size: 12px;
            line-height: 1.6;
        }

        .rationale-icon {
            color: #58caff;
        }

        .best-actions {
            margin-top: 18px;
        }

        .primary-action,
        .sidebar-action {
            width: 100%;
            border: 0;
            border-radius: 11px;
            padding: 12px 16px;
            background: linear-gradient(
                135deg,
                #119bd5,
                #1470ff
            );
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 8px 25px rgba(0, 126, 255, .18);
        }

        .primary-action.selected {
            background: rgba(0, 190, 255, .10);
            border: 1px solid rgba(0, 190, 255, .25);
            color: #67d5ff;
            box-shadow: none;
        }

        .empty-prediction {
            text-align: center;
            padding: 35px 15px;
        }

        .empty-icon {
            font-size: 35px;
            color: #536177;
        }

        .empty-prediction h3 {
            margin: 10px 0 5px;
            color: #dce5f4;
        }

        .empty-prediction p {
            max-width: 500px;
            margin: 0 auto 18px;
            color: #738197;
            font-size: 12px;
        }

        .markets-section {
            margin-top: 20px;
            padding: 22px;
        }

        .market-heading {
            margin-bottom: 15px;
        }

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

        .market-card {
            min-width: 0;
            padding: 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.06);
            background: rgba(255,255,255,.025);
        }

        .market-card.is-best {
            border-color: rgba(0, 190, 255, .24);
            background: rgba(0, 175, 255, .055);
        }

        .market-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 7px;
        }

        .market-name {
            color: #aebbd0;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.35;
        }

        .best-tag {
            flex: 0 0 auto;
            color: #54ccff;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .08em;
        }

        .market-probability {
            margin-top: 13px;
            color: #f7faff;
            font-size: 24px;
            font-weight: 900;
        }

        .probability-track,
        .data-quality-track {
            overflow: hidden;
            height: 4px;
            margin-top: 8px;
            border-radius: 999px;
            background: rgba(255,255,255,.07);
        }

        .probability-track span,
        .data-quality-track span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(
                90deg,
                #187fff,
                #4bcfff
            );
        }

        .market-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-top: 9px;
            color: #64738b;
            font-size: 9px;
        }

        .market-confidence {
            color: #8796ad;
            font-weight: 700;
        }

        .market-info {
            width: 15px;
            height: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 50%;
            color: #718097;
            font-size: 8px;
        }

        .market-unavailable {
            margin-top: 13px;
            color: #4c586b;
            font-size: 24px;
            font-weight: 900;
        }

        .intelligence-card {
            margin-top: 20px;
            padding: 22px;
        }

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

        .signal-item {
            padding: 12px;
            border-radius: 10px;
            background: rgba(255,255,255,.025);
        }

        .signal-label {
            display: block;
            color: #64738b;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .signal-value {
            display: block;
            margin-top: 5px;
            color: #dce7f8;
            font-size: 13px;
        }

        .signals-empty {
            padding: 20px;
            border-radius: 11px;
            background: rgba(255,255,255,.025);
            color: #68778d;
            font-size: 11px;
        }

        .data-quality {
            margin-top: 20px;
        }

        .data-quality-header {
            display: flex;
            justify-content: space-between;
            color: #718097;
            font-size: 10px;
        }

        .data-quality-header strong {
            color: #aebbd0;
        }

        .detail-sidebar {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .sidebar-card {
            padding: 18px;
        }

        .sidebar-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .sidebar-heading h3 {
            font-size: 16px;
        }

        .slip-count {
            width: 27px;
            height: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: rgba(0, 174, 255, .10);
            color: #5acbff;
            font-size: 10px;
            font-weight: 900;
        }

        .slip-match {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 8px;
            align-items: center;
            padding: 12px;
            border-radius: 10px;
            background: rgba(255,255,255,.025);
        }

        .slip-team {
            color: #d9e3f3;
            font-size: 10px;
            font-weight: 700;
        }

        .slip-team:last-child {
            text-align: right;
        }

        .slip-vs {
            color: #5d6b80;
            font-size: 8px;
            font-weight: 900;
        }

        .slip-prediction {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 4px 10px;
            margin: 12px 0;
            padding: 11px;
            border-radius: 10px;
            background: rgba(0, 174, 255, .045);
        }

        .slip-prediction span {
            grid-column: 1 / -1;
            color: #69788f;
            font-size: 8px;
        }

        .slip-prediction strong {
            color: #dce9fa;
            font-size: 11px;
        }

        .slip-prediction b {
            color: #54caff;
            font-size: 11px;
        }

        .sidebar-action.remove {
            background: rgba(255,255,255,.045);
            color: #aebbd0;
            border: 1px solid rgba(255,255,255,.08);
            box-shadow: none;
        }

        .info-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding-bottom: 11px;
            border-bottom: 1px solid rgba(255,255,255,.05);
        }

        .info-row:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .info-row span {
            color: #64728a;
            font-size: 10px;
        }

        .info-row strong {
            color: #cbd7e8;
            font-size: 10px;
            text-align: right;
        }

        @media (max-width: 991px) {
            .detail-grid {
                grid-template-columns: 1fr;
            }

            .detail-sidebar {
                order: -1;
            }

            .sidebar-card.slip-card {
                display: none;
            }

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

        @media (max-width: 767px) {
            .match-hero {
                padding: 18px 12px;
                border-radius: 15px;
            }

            .teams-score {
                grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
                gap: 5px;
                margin-top: 22px;
            }

            .team-logo-wrap {
                width: 55px;
                height: 55px;
            }

            .team-logo-placeholder {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                font-size: 19px;
            }

            .team-name {
                font-size: 13px;
                line-height: 1.3;
            }

            .team-side-label {
                font-size: 7px;
            }

            .score-numbers {
                font-size: 38px;
                gap: 5px;
            }

            .vs-label {
                font-size: 18px;
            }

            .match-meta {
                font-size: 10px;
            }

            .prediction-card,
            .markets-section,
            .intelligence-card {
                padding: 15px;
                border-radius: 14px;
            }

            .best-prediction {
                grid-template-columns: 1fr auto;
                gap: 12px;
                padding: 14px;
            }

            .best-market strong {
                font-size: 20px;
            }

            .best-confidence {
                grid-column: 1 / -1;
            }

            .market-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .market-card {
                padding: 11px;
            }

            .market-probability {
                font-size: 21px;
            }

            .section-heading h2 {
                font-size: 17px;
            }

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

            .detail-topbar {
                margin-bottom: 12px;
            }

            .slip-action {
                padding: 8px 11px;
                font-size: 11px;
            }
        }

        @media (max-width: 420px) {
            .market-grid {
                grid-template-columns: 1fr 1fr;
            }

            .best-probability strong {
                font-size: 24px;
            }

            .best-market strong {
                font-size: 17px;
            }
        }






























        /* ============================================================
   PREDICTPRO — BROWSE MATCH DETAILS
   ============================================================ */

.pp-match-content {
    padding: 0;
}

.pp-match-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #65778e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
}

.pp-match-status-indicator .live-dot {
    width: 6px;
    height: 6px;
}


/* ============================================================
   MATCH DETAILS ACTION
   ============================================================ */

.pp-match-details-action {
    margin: 0 14px 12px;
    padding: 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    border-top: 1px solid rgba(255,255,255,.045);
    color: #687b91;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    transition: color .18s ease;
}

.pp-match-details-action:hover {
    color: #45c3ff;
}

.pp-match-details-action i {
    font-size: 9px;
    transition: transform .18s ease;
}

.pp-match-details-action:hover i {
    transform: translate(2px,-2px);
}


/* ============================================================
   LEAGUE COUNT
   ============================================================ */

.pp-league-count {
    opacity: .65;
    margin-left: 4px;
}


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

.pp-prediction-result {
    margin: 0 12px 9px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 8px;
    background: rgba(255,255,255,.018);
}

.pp-prediction-label {
    margin-bottom: 4px;
    color: #586b82;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.pp-prediction-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pp-prediction-main > div:first-child {
    min-width: 0;
}

.pp-prediction-main strong {
    display: block;
    color: #e5edf7;
    font-size: 12px;
    font-weight: 800;
}

.pp-prediction-main small {
    display: block;
    margin-top: 2px;
    color: #66788f;
    font-size: 8px;
}

.pp-prediction-prob {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.pp-prediction-prob > strong {
    color: #55c7ff;
    font-size: 15px;
}

.pp-prediction-prob span {
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,.045);
    color: #8c9caf;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
}


/* ============================================================
   ADD / REMOVE BUTTON
   ============================================================ */

.pp-predict-button,
.pp-analysis-button {
    width: calc(100% - 24px);
    margin: 0 12px;
    min-height: 36px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800; 
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.pp-predict-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: 1px solid rgba(37,154,235,.20);
    color: #00131d;
    background: linear-gradient(90deg, #08d0ff, #06afe9);
}

.pp-predict-button:hover {
    border-color: rgba(58,183,255,.42);
    background: rgba(18,117,190,.13);
    color: #c6eaff;
}

.pp-predict-button span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pp-predict-button > i {
    color: #5d89aa;
    font-size: 9px;
}

.pp-analysis-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: 1px solid rgba(37,154,235,.16);
    background: rgba(18,117,190,.055);
    color: #75c8f7;
}

.pp-analysis-button:hover {
    background: rgba(18,117,190,.10);
}

.pp-analysis-button.selected {
    border-color: rgba(55,204,143,.16);
    background: rgba(55,204,143,.045);
    color: #63d9a6;
}

.pp-analysis-button span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-analysis-button > i {
    color: #688095;
    font-size: 9px;
}


/* ============================================================
   SELECTED INDICATOR
   ============================================================ */

.pp-selected-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px 10px;
    color: #4cae86;
    font-size: 8px;
    font-weight: 700;
}

.pp-selected-indicator.error {
    color: #ff6b7f;
}


/* ============================================================
   PREDICTION SLIP — MARKET SELECTOR
   ============================================================ */

.pp-slip-market {
    margin-top: 10px;
}

.pp-slip-market label {
    display: block;
    margin-bottom: 5px;
    color: #718399;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.pp-slip-market-select-wrap {
    position: relative;
}

.pp-slip-market-select {
    width: 100%;
    height: 37px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 32px 0 10px;
    border: 1px solid rgba(82,113,141,.28);
    border-radius: 7px;
    outline: none;
    background: #0d1826;
    color: #dce8f3;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.pp-slip-market-select:hover {
    border-color: rgba(62,185,245,.40);
    background: #0f1c2c;
}

.pp-slip-market-select:focus {
    border-color: rgba(62,185,245,.62);
    box-shadow: 0 0 0 2px rgba(62,185,245,.07);
}

.pp-slip-market-select option {
    background: #0d1826;
    color: #dce8f3;
}

.pp-slip-market-select-wrap > i {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #63778d;
    font-size: 9px;
}


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

.pp-slip-prediction {
    margin-top: 8px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.025);
}

.pp-slip-prediction small {
    color: #8292a5;
    font-size: 8px;
    font-weight: 700;
}

.pp-slip-prediction strong {
    color: #dce8f4;
    font-size: 9px;
    font-weight: 800;
}

.pp-slip-prob {
    display: block;
    margin-top: 4px;
    color: #53c5ff;
    font-size: 10px;
    font-weight: 800;
}

.pp-slip-pending {
    margin-top: 8px;
    padding: 7px 9px;
    color: #596d83;
    border-radius: 6px;
    background: rgba(255,255,255,.018);
    font-size: 8px;
}


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

.pp-slip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pp-slip-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pp-slip-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #26a9ff;
    box-shadow: 0 0 8px rgba(38,169,255,.55);
}

.pp-slip-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(38,169,255,.09);
    color: #67c7ff;
    font-size: 8px;
    font-weight: 800;
}

.pp-clear-slip {
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f7185;
    font-size: 8px;
    font-weight: 700;
}

.pp-clear-slip:hover:not(:disabled) {
    color: #e56a7d;
}

.pp-clear-slip:disabled {
    opacity: .35;
    cursor: default;
}


/* ============================================================
   SLIP MATCH NAME
   ============================================================ */

.pp-slip-match-name {
    min-width: 0;
    color: #d7e3ef;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.pp-slip-match-name:hover {
    color: #55c7ff;
}

.pp-slip-match-name span {
    margin: 0 3px;
    color: #56697e;
}


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

@media (max-width: 767.98px) {

    .pp-match-details-action {
        margin-left: 11px;
        margin-right: 11px;
        padding-top: 7px;
    }

    .pp-prediction-result {
        margin-left: 10px;
        margin-right: 10px;
    }

    .pp-predict-button,
    .pp-analysis-button {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }

    .pp-slip-market-select {
        height: 40px;
        font-size: 11px;
    }

}





















/* =========================================================
   PREDICTPRO — COMPUTATION UI
   Simple, professional, button-first loading state.
========================================================= */

.pp-computation-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 9px 14px 8px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
}

.pp-computation-note-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .09);
    animation: pp-computation-dot 1.4s ease-in-out infinite;
}

.pp-computation-note-divider {
    color: #cbd5e1;
}

.pp-compute-button {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    color: #00131d;
    background: linear-gradient(90deg, #08d0ff, #06afe9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.pp-compute-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 22px rgba(15, 23, 42, .16);
}

.pp-compute-button:disabled {
    cursor: not-allowed;
}

.pp-compute-content {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 13px;
}

.pp-compute-content i {
    font-size: 15px;
}

/* The water level. It rises from the bottom of the button. */
.pp-compute-fill {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 2px;
    background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
    opacity: .95;
    transition: height .65s cubic-bezier(.22, 1, .36, 1);
}

/* Soft water surface. */
.pp-compute-fill::before {
    content: '';
    position: absolute;
    top: -3px;
    right: -5%;
    left: -5%;
    height: 7px;
    border-radius: 50%;
    background: rgba(125, 211, 252, .65);
    filter: blur(2px);
    animation: pp-water-surface 2.2s ease-in-out infinite;
}

.pp-compute-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: translateX(-100%);
    animation: pp-water-shine 2.4s ease-in-out infinite;
}

.pp-compute-button.is-computing {
    min-height: 52px;
    border-color: rgba(14, 165, 233, .18);
    background: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 18px rgba(15,23,42,.13);
}

.pp-compute-button.is-computing .pp-compute-label,
.pp-compute-button.is-computing .pp-compute-percent {
    text-shadow: 0 1px 3px rgba(0,0,0,.22);
}

.pp-compute-label {
    font-weight: 700;
    letter-spacing: -.01em;
}

.pp-compute-percent {
    margin-left: auto;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pp-compute-button.is-computing .pp-compute-content {
    padding: 0 2px;
}

.pp-compute-button.is-complete {
    cursor: default;
    background: #0f766e;
    border-color: rgba(45, 212, 191, .22);
}

.pp-compute-button.is-complete .pp-compute-content {
    justify-content: center;
}

.pp-compute-button.is-complete i {
    color: #99f6e4;
}

.pp-compute-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pp-compute-spin .75s linear infinite;
}

.pp-computation-error,
.pp-computation-complete {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 9px 14px 0;
    padding: 10px 11px;
    border-radius: 11px;
    font-size: 10px;
}

.pp-computation-error {
    background: rgba(220, 53, 69, .055);
    border: 1px solid rgba(220, 53, 69, .14);
}

.pp-computation-complete {
    background: rgba(25, 135, 84, .055);
    border: 1px solid rgba(25, 135, 84, .14);
}

.pp-computation-error > div:last-child,
.pp-computation-complete > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-computation-error i { color: #dc3545; font-size: 15px; }
.pp-computation-complete i { color: #20c997; font-size: 15px; }
.pp-computation-error span,
.pp-computation-complete span { color: #64748b; line-height: 1.35; }

@keyframes pp-computation-dot {
    0%, 100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes pp-water-surface {
    0%, 100% { transform: translateX(-2%); }
    50% { transform: translateX(2%); }
}

@keyframes pp-water-shine {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

@keyframes pp-compute-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 767.98px) {
    .pp-computation-note {
        margin: 8px 10px 7px;
        font-size: 9px;
    }

    .pp-compute-button {
        min-height: 50px;
        border-radius: 12px;
    }

    .pp-compute-button.is-computing {
        min-height: 50px;
    }
}

































/* =========================================================
   STATSHOMIE MATCH DETAIL
========================================================= */

.stats-detail-page {
    --stats-bg: #07111f;
    --stats-bg-soft: #0b1728;
    --stats-card: #0d1b2d;
    --stats-card-2: #101f33;
    --stats-border: rgba(255, 255, 255, .075);
    --stats-text: #f7f9fc;
    --stats-muted: #8492a6;
    --stats-blue: #21a4ff;
    --stats-cyan: #39d7ff;
    --stats-green: #24d889;
    --stats-red: #ff5368;
    --stats-yellow: #f7c948;

    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(33, 164, 255, .12),
            transparent 38%
        ),
        var(--stats-bg);
    color: var(--stats-text);
    padding-bottom: 100px;
}


/* =========================================================
   TOP BAR
========================================================= */

.stats-detail-topbar {
    min-height: 64px;
    padding: 12px 28px;

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

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

    background: rgba(7, 17, 31, .88);
    backdrop-filter: blur(18px);

    position: sticky;
    top: 0;
    z-index: 40;
}

.stats-back-button,
.stats-refresh-button {
    border: 0;
    background: transparent;
    color: var(--stats-muted);
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    transition: .2s ease;
}

.stats-back-button:hover,
.stats-refresh-button:hover {
    color: #fff;
}

.stats-back-button i {
    font-size: 17px;
}

.stats-detail-topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.stats-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 8px;
    border-radius: 999px;

    background: rgba(255, 83, 104, .12);
    color: #ff7183;

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

.stats-live-pill i,
.stats-status-live i,
.stats-ai-online i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.stats-refresh-button {
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
}

.stats-spin {
    animation: statsSpin .8s linear infinite;
}

@keyframes statsSpin {
    to {
        transform: rotate(360deg);
    }
}


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

.stats-match-hero {
    position: relative;
    overflow: hidden;

    padding: 34px 24px 30px;

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

    background:
        linear-gradient(
            180deg,
            rgba(15, 34, 57, .96),
            rgba(7, 17, 31, .98)
        );
}

.stats-match-hero-glow {
    position: absolute;
    width: 420px;
    height: 220px;

    left: 50%;
    top: -140px;

    transform: translateX(-50%);

    background: rgba(33, 164, 255, .16);
    filter: blur(80px);
    pointer-events: none;
}

.stats-match-context,
.stats-match-status,
.stats-teams-score,
.stats-match-actions {
    position: relative;
    z-index: 1;
}

.stats-match-context {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;

    color: var(--stats-muted);

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

.stats-context-dot {
    opacity: .4;
}

.stats-match-status {
    display: flex;
    justify-content: center;
    margin-top: 13px;
}

.stats-status-live,
.stats-status-finished,
.stats-status-cancelled,
.stats-status-upcoming {
    padding: 6px 10px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.stats-status-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #ff6478;
    background: rgba(255, 83, 104, .10);
}

.stats-status-finished {
    color: #9ba9ba;
    background: rgba(255, 255, 255, .05);
}

.stats-status-cancelled {
    color: #ff6478;
    background: rgba(255, 83, 104, .10);
}

.stats-status-upcoming {
    color: var(--stats-blue);
    background: rgba(33, 164, 255, .10);
}

.stats-teams-score {
    max-width: 900px;
    margin: 27px auto 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
    align-items: center;
    gap: 30px;
}

.stats-team {
    text-align: center;
}

.stats-team-home {
    text-align: right;
}

.stats-team-away {
    text-align: left;
}

.stats-team-logo {
    width: 76px;
    height: 76px;

    margin: 0 auto 13px;

    border-radius: 22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .10),
            rgba(255, 255, 255, .035)
        );

    border: 1px solid rgba(255, 255, 255, .09);

    box-shadow:
        0 16px 45px rgba(0, 0, 0, .25);
}

.stats-team-home .stats-team-logo {
    margin-left: auto;
}

.stats-team-away .stats-team-logo {
    margin-right: auto;
}

.stats-team-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.stats-team-logo span {
    color: #607086;
    font-size: 30px;
}

.stats-team h1 {
    margin: 0;

    font-size: clamp(17px, 2.2vw, 26px);
    font-weight: 850;
    letter-spacing: -.035em;
}

.stats-team small {
    display: block;
    margin-top: 5px;

    color: var(--stats-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.stats-score-block {
    text-align: center;
}

.stats-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.stats-score strong {
    font-size: clamp(42px, 5vw, 58px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -.06em;
}

.stats-score span {
    color: #53657b;
    font-size: 25px;
    font-weight: 700;
}

.stats-half-score {
    margin-top: 11px;

    color: var(--stats-muted);
    font-size: 11px;
    font-weight: 800;
}

.stats-vs {
    font-size: 26px;
    font-weight: 900;
    color: #61738a;
}

.stats-kickoff {
    margin-top: 9px;

    color: var(--stats-muted);
    font-size: 11px;
    font-weight: 700;
}

.stats-match-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.stats-slip-button {
    border: 1px solid rgba(33, 164, 255, .35);

    background: rgba(33, 164, 255, .09);
    color: #66c7ff;

    padding: 11px 18px;
    border-radius: 12px;

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

    transition: .2s ease;
}

.stats-slip-button:hover {
    background: rgba(33, 164, 255, .15);
}

.stats-slip-button.active {
    color: #73e6b2;
    border-color: rgba(36, 216, 137, .28);
    background: rgba(36, 216, 137, .08);
}


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

.stats-detail-tabs {
    max-width: 1220px;
    margin: 0 auto;

    padding: 0 24px;

    display: flex;
    gap: 7px;

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

.stats-detail-tabs button {
    position: relative;

    border: 0;
    background: transparent;

    color: var(--stats-muted);

    padding: 17px 13px 15px;

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

    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.stats-detail-tabs button.active {
    color: #fff;
}

.stats-detail-tabs button.active::after {
    content: "";

    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;

    height: 2px;

    background: var(--stats-blue);
    box-shadow: 0 0 12px rgba(33, 164, 255, .65);
}


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

.stats-detail-content {
    max-width: 1220px;
    margin: 0 auto;
    padding: 28px 24px;
}

.stats-prediction-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 22px;
    align-items: start;
}


/* =========================================================
   BEST CARD
========================================================= */

.stats-best-card {
    position: relative;
    overflow: hidden;

    padding: 23px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 39, 64, .98),
            rgba(10, 27, 46, .98)
        );

    border: 1px solid rgba(33, 164, 255, .14);
}

.stats-best-card-glow {
    position: absolute;

    width: 220px;
    height: 150px;

    top: -100px;
    right: -40px;

    background: rgba(33, 164, 255, .15);
    filter: blur(55px);
}

.stats-card-eyebrow {
    position: relative;

    color: #69caff;

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

    letter-spacing: .1em;
    text-transform: uppercase;

    display: flex;
    align-items: center;
    gap: 7px;
}

.stats-best-header {
    position: relative;

    margin-top: 18px;

    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
}

.stats-best-label {
    color: var(--stats-muted);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
}

.stats-best-header h2 {
    margin: 5px 0 0;

    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;

    letter-spacing: -.04em;
}

.stats-best-probability {
    text-align: right;
}

.stats-best-probability strong {
    display: block;

    font-size: 34px;
    line-height: 1;

    font-weight: 900;
    letter-spacing: -.05em;
}

.stats-best-probability span {
    display: inline-block;
    margin-top: 7px;

    padding: 5px 8px;
    border-radius: 6px;

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

.stats-best-rationale {
    position: relative;

    max-width: 760px;
    margin: 18px 0 0;

    color: #a9b7c8;

    font-size: 13px;
    line-height: 1.7;
}

.stats-best-footer {
    position: relative;

    display: flex;
    justify-content: space-between;

    margin-top: 20px;
    padding-top: 14px;

    border-top: 1px solid var(--stats-border);

    color: #62758c;

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


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

.stats-best-probability span.banker,
.stats-market-probability span.banker {
    color: #62e6a8;
    background: rgba(36, 216, 137, .10);
}

.stats-best-probability span.yes,
.stats-market-probability span.yes {
    color: #68c7ff;
    background: rgba(33, 164, 255, .10);
}

.stats-best-probability span.shaky,
.stats-market-probability span.shaky {
    color: #f4c75c;
    background: rgba(247, 201, 72, .10);
}

.stats-best-probability span.not-sure,
.stats-market-probability span.not-sure {
    color: #a9b6c7;
    background: rgba(255, 255, 255, .07);
}

.stats-best-probability span.unavailable,
.stats-market-probability span.unavailable {
    color: #6c7b8e;
    background: rgba(255, 255, 255, .04);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.stats-section-heading {
    margin: 30px 0 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}

.stats-section-heading span,
.stats-data-card-header > div > span {
    color: #60738a;

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

    letter-spacing: .1em;
}

.stats-section-heading h2,
.stats-data-card-header h2 {
    margin: 4px 0 0;

    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.025em;
}

.stats-section-heading small {
    color: #60738a;
    font-size: 10px;
}


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

.stats-market-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.stats-market-card {
    padding: 15px;

    min-height: 140px;

    border-radius: 14px;

    background: rgba(13, 27, 45, .82);
    border: 1px solid var(--stats-border);

    transition: .2s ease;
}

.stats-market-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .13);
}

.stats-market-card.is-best {
    border-color: rgba(33, 164, 255, .28);
    background:
        linear-gradient(
            145deg,
            rgba(18, 43, 68, .98),
            rgba(13, 27, 45, .9)
        );
}

.stats-market-card.is-unavailable {
    opacity: .55;
}

.stats-market-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stats-market-top > div {
    min-width: 0;
}

.stats-market-name {
    display: block;

    color: #dbe4ee;

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

.stats-market-best {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-bottom: 5px;

    color: #67c8ff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.stats-market-top > i {
    color: #50647a;
    font-size: 12px;
}

.stats-market-probability {
    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.stats-market-probability strong {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.stats-market-probability span {
    padding: 4px 6px;
    border-radius: 5px;

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

.stats-market-confidence {
    margin-top: 4px;

    color: #64778d;
    font-size: 9px;
    font-weight: 700;
}

.stats-market-card p {
    margin: 11px 0 0;

    color: #74869b;

    font-size: 10px;
    line-height: 1.5;
}

.stats-market-unavailable {
    min-height: 65px;

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

    margin-top: 13px;

    color: #65768a;

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


/* =========================================================
   ENGINE NOTE
========================================================= */

.stats-engine-note {
    margin-top: 16px;

    padding: 14px 15px;

    display: flex;
    gap: 12px;

    border-radius: 13px;

    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--stats-border);
}

.stats-engine-note-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

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

    border-radius: 9px;

    color: #62e6a8;
    background: rgba(36, 216, 137, .08);
}

.stats-engine-note strong {
    display: block;

    color: #cbd6e2;

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

.stats-engine-note p {
    margin: 4px 0 0;

    color: #687b91;

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   AI PANEL
========================================================= */

.stats-ai-panel {
    position: sticky;
    top: 82px;

    padding: 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            155deg,
            rgba(15, 31, 51, .98),
            rgba(9, 22, 38, .98)
        );

    border: 1px solid rgba(33, 164, 255, .13);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .18);
}

.stats-ai-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.stats-ai-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-ai-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    color: #72d5ff;
    background: rgba(33, 164, 255, .10);
}

.stats-ai-brand strong,
.stats-ai-brand span {
    display: block;
}

.stats-ai-brand strong {
    font-size: 12px;
    font-weight: 900;
}

.stats-ai-brand span {
    margin-top: 2px;

    color: #64788f;
    font-size: 9px;
    font-weight: 700;
}

.stats-ai-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 7px;

    color: #64e3a8;
    background: rgba(36, 216, 137, .07);

    border-radius: 999px;

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

.stats-ai-intro {
    margin: 24px 0 17px;
}

.stats-ai-intro h3 {
    margin: 0;

    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.035em;
}

.stats-ai-intro p {
    margin: 7px 0 0;

    color: #72859b;

    font-size: 11px;
    line-height: 1.55;
}

.stats-ai-analyze {
    width: 100%;

    border: 1px solid rgba(33, 164, 255, .25);

    border-radius: 11px;

    padding: 11px 13px;

    background: rgba(33, 164, 255, .09);
    color: #75d1ff;

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

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

.stats-ai-analyze > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stats-ai-analyze:hover {
    background: rgba(33, 164, 255, .14);
}

.stats-ai-response {
    margin-top: 15px;

    padding: 14px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--stats-border);
}

.stats-ai-response-label {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #65caff;

    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stats-ai-response-text {
    margin-top: 10px;

    color: #aebdcd;

    font-size: 11px;
    line-height: 1.65;
}

.stats-ai-answer {
    border-color: rgba(36, 216, 137, .11);
}

.stats-ai-answer .stats-ai-response-label {
    color: #6ce5ac;
}

.stats-ai-form {
    margin-top: 18px;
}

.stats-ai-form label {
    display: block;

    margin-bottom: 7px;

    color: #687b91;

    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stats-ai-input {
    display: flex;

    border-radius: 11px;

    overflow: hidden;

    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--stats-border);
}

.stats-ai-input input {
    width: 100%;

    min-width: 0;

    border: 0;
    outline: 0;

    padding: 11px 12px;

    background: transparent;
    color: #fff;

    font-size: 11px;
}

.stats-ai-input input::placeholder {
    color: #52657b;
}

.stats-ai-input button {
    width: 40px;

    flex: 0 0 40px;

    border: 0;

    color: #7bd7ff;
    background: transparent;
}

.stats-ai-errors {
    margin-top: 12px;

    color: #ff7485;

    font-size: 10px;
}

.stats-ai-errors div {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.stats-ai-unavailable {
    padding: 12px;

    color: #78899d;

    border-radius: 10px;

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

    font-size: 10px;
}


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

.stats-match-data-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.stats-data-card {
    border-radius: 17px;

    background: rgba(13, 27, 45, .82);
    border: 1px solid var(--stats-border);

    overflow: hidden;
}

.stats-lineups-card {
    grid-column: 1 / -1;
}

.stats-data-card-header {
    padding: 18px;

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

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

.stats-data-card-header > i {
    color: #536a82;
    font-size: 17px;
}

.stats-events-list {
    padding: 8px 18px 14px;
}

.stats-event-row {
    display: grid;
    grid-template-columns: 40px 26px minmax(0, 1fr);
    gap: 8px;
    align-items: center;

    padding: 11px 0;

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

.stats-event-row:last-child {
    border-bottom: 0;
}

.stats-event-minute {
    color: #6f8197;

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

.stats-event-minute sup {
    font-size: 7px;
}

.stats-event-icon {
    color: #69c9ff;
}

.stats-event-copy strong,
.stats-event-copy span,
.stats-event-copy small {
    display: block;
}

.stats-event-copy strong {
    color: #d6e0ea;
    font-size: 11px;
}

.stats-event-copy span {
    margin-top: 2px;

    color: #73869c;
    font-size: 9px;
}

.stats-event-copy small {
    margin-top: 2px;

    color: #52677e;
    font-size: 8px;
}

.stats-data-empty {
    min-height: 190px;

    padding: 30px;

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

    text-align: center;
}

.stats-data-empty i {
    color: #40546b;
    font-size: 25px;
}

.stats-data-empty strong {
    margin-top: 11px;

    color: #9aaabd;

    font-size: 11px;
}

.stats-data-empty span {
    max-width: 280px;

    margin-top: 5px;

    color: #596d84;

    font-size: 9px;
    line-height: 1.5;
}

.stats-statistics-list {
    padding: 14px 18px 18px;
}

.stats-team-statistics + .stats-team-statistics {
    margin-top: 20px;
}

.stats-team-statistics h3 {
    margin: 0 0 8px;

    color: #cbd7e3;

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

.stats-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 8px 0;

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

.stats-stat-row span {
    color: #718399;
    font-size: 10px;
}

.stats-stat-row strong {
    color: #b9c7d5;
    font-size: 10px;
}

.stats-lineups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    padding: 18px;
}

.stats-lineup-team {
    padding: 14px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--stats-border);
}

.stats-lineup-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    padding-bottom: 10px;
    margin-bottom: 4px;

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

.stats-lineup-heading strong {
    color: #d9e2ec;
    font-size: 11px;
}

.stats-lineup-heading span {
    color: #5f748b;
    font-size: 9px;
    font-weight: 800;
}

.stats-player-row {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;

    padding: 7px 0;

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

.stats-player-number {
    color: #546a82;
    font-size: 9px;
}

.stats-player-row strong {
    color: #9dacbd;
    font-size: 10px;
}

.stats-player-row small {
    color: #52667d;
    font-size: 8px;
}


/* =========================================================
   EMPTY BEST
========================================================= */

.stats-unavailable-state {
    min-height: 125px;

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

    text-align: center;
}

.stats-unavailable-state i {
    color: #4e6178;
    font-size: 22px;
}

.stats-unavailable-state strong {
    margin-top: 8px;

    font-size: 12px;
}

.stats-unavailable-state span {
    max-width: 420px;

    margin-top: 5px;

    color: #667990;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   MOBILE FLOATING ACTIONS
========================================================= */

.stats-mobile-ai-button,
.stats-mobile-slip {
    display: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .stats-prediction-layout {
        grid-template-columns: 1fr;
    }

    .stats-ai-panel {
        position: static;
    }

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

}


@media (max-width: 767px) {

    .stats-detail-page {
        padding-bottom: 88px;
    }

    .stats-detail-topbar {
        padding: 10px 15px;
    }

    .stats-detail-topbar-title {
        font-size: 10px;
    }

    .stats-back-button span,
    .stats-refresh-button span {
        display: none !important;
    }

    .stats-back-button,
    .stats-refresh-button {
        width: 34px;
        height: 34px;

        justify-content: center;

        border-radius: 9px;

        background: rgba(255, 255, 255, .035);
    }

    .stats-match-hero {
        padding: 25px 14px 23px;
    }

    .stats-match-context {
        font-size: 9px;
    }

    .stats-teams-score {
        grid-template-columns: minmax(0, 1fr) 75px minmax(0, 1fr);
        gap: 8px;
        margin-top: 21px;
    }

    .stats-team-logo {
        width: 58px;
        height: 58px;
        border-radius: 17px;
        margin-bottom: 9px;
    }

    .stats-team-home .stats-team-logo {
        margin-left: auto;
    }

    .stats-team-away .stats-team-logo {
        margin-right: auto;
    }

    .stats-team-logo img {
        width: 47px;
        height: 47px;
    }

    .stats-team-logo span {
        font-size: 23px;
    }

    .stats-team h1 {
        font-size: 14px;
        line-height: 1.2;
    }

    .stats-team small {
        font-size: 8px;
    }

    .stats-score strong {
        font-size: 37px;
    }

    .stats-score {
        gap: 7px;
    }

    .stats-score span {
        font-size: 18px;
    }

    .stats-half-score {
        font-size: 9px;
    }

    .stats-vs {
        font-size: 20px;
    }

    .stats-kickoff {
        font-size: 9px;
    }

    .stats-match-actions {
        margin-top: 20px;
    }

    .stats-slip-button {
        width: 100%;
        max-width: 280px;
        padding: 10px 13px;
        font-size: 10px;
    }

    .stats-detail-tabs {
        padding: 0 13px;
    }

    .stats-detail-tabs button {
        flex: 1;
        justify-content: center;
        font-size: 10px;
    }

    .stats-detail-content {
        padding: 18px 13px;
    }

    .stats-best-card {
        padding: 17px;
        border-radius: 15px;
    }

    .stats-best-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .stats-best-probability {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .stats-best-probability strong {
        font-size: 28px;
    }

    .stats-best-probability span {
        margin-top: 0;
    }

    .stats-section-heading {
        margin-top: 24px;
    }

    .stats-section-heading small {
        display: none;
    }

    .stats-market-grid {
        grid-template-columns: 1fr;
    }

    .stats-market-card {
        min-height: auto;
    }

    .stats-engine-note {
        margin-bottom: 8px;
    }

    .stats-ai-panel {
        display: none;
    }

    .stats-match-data-layout {
        grid-template-columns: 1fr;
    }

    .stats-lineups-card {
        grid-column: auto;
    }

    .stats-lineups-grid {
        grid-template-columns: 1fr;
    }

    .stats-mobile-ai-button {
        position: fixed;

        left: 14px;
        right: 14px;
        bottom: 62px;

        z-index: 50;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        min-height: 44px;

        border: 1px solid rgba(33, 164, 255, .35);
        border-radius: 13px;

        background:
            linear-gradient(
                135deg,
                rgba(15, 47, 74, .97),
                rgba(9, 28, 48, .97)
            );

        color: #75d5ff;

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

        box-shadow:
            0 14px 35px rgba(0, 0, 0, .35);
    }

    .stats-mobile-slip {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 51;

        display: block;

        padding: 9px 13px;

        background: rgba(7, 17, 31, .96);
        border-top: 1px solid var(--stats-border);

        backdrop-filter: blur(18px);
    }

    .stats-mobile-slip button {
        width: 100%;

        min-height: 42px;

        border: 1px solid rgba(33, 164, 255, .28);
        border-radius: 11px;

        background: rgba(33, 164, 255, .08);
        color: #75d5ff;

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

    .stats-mobile-slip button.active {
        color: #71e5ad;
        border-color: rgba(36, 216, 137, .22);
        background: rgba(36, 216, 137, .07);
    }

}















/* =========================================================
   PROFILE
========================================================= */

.profile-page {
    max-width: 1280px;
    margin: 0 auto;
}

.profile-page-header {
    margin-bottom: 28px;
}

.profile-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #35c8ff;
    margin-bottom: 8px;
}

.profile-page-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.profile-page-header p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .52);
}


/* SIDEBAR */

.profile-side-nav {
    position: sticky;
    top: 24px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
}

.profile-side-title {
    padding: 12px 12px 7px;
    color: rgba(255, 255, 255, .35);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.profile-side-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    background: transparent;
    transition: .2s ease;
}

.profile-side-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.profile-side-link.active {
    color: #fff;
    background: rgba(41, 194, 255, .11);
}

.profile-side-icon {
    width: 23px;
    text-align: center;
    color: #35c8ff;
}

.profile-side-balance {
    margin-left: auto;
    font-size: 11px;
    color: #35c8ff;
}

.profile-side-divider {
    height: 1px;
    margin: 10px 4px;
    background: rgba(255, 255, 255, .06);
}

.profile-side-button {
    cursor: pointer;
    text-align: left;
}


/* CARDS */

.profile-card {
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
    overflow: hidden;
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.profile-card-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 750;
}

.profile-card-header p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
}

.profile-card > form {
    padding: 24px;
}

.profile-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}


/* AVATAR */

.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.profile-large-avatar {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #18294c, #07111f);
    border: 1px solid rgba(53, 200, 255, .3);
    color: #35c8ff;
    font-size: 27px;
    font-weight: 800;
}

.profile-large-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-upload-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid rgba(53, 200, 255, .2);
    border-radius: 9px;
    color: #35c8ff;
    background: rgba(53, 200, 255, .07);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.profile-help {
    margin-top: 7px;
    color: rgba(255, 255, 255, .35);
    font-size: 11px;
}


/* FORM */

.profile-card .form-label {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 7px;
}

.pp-form-control {
    min-height: 45px;
    color: #fff !important;
    background: rgba(0, 0, 0, .2) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    border-radius: 10px !important;
}

.pp-form-control:focus {
    border-color: rgba(53, 200, 255, .55) !important;
    box-shadow: 0 0 0 3px rgba(53, 200, 255, .08) !important;
}

.profile-error {
    margin-top: 6px;
    color: #ff6b7d;
    font-size: 11px;
}

.profile-verified {
    margin-top: 6px;
    color: #39df9b;
    font-size: 11px;
}

.profile-unverified {
    margin-top: 6px;
    color: #ffbd58;
    font-size: 11px;
}


/* BUTTONS */

.profile-primary-button,
.profile-secondary-button,
.profile-danger-button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    font-size: 12px;
    font-weight: 750;
}

.profile-primary-button {
    color: #03101a;
    background: #35c8ff;
}

.profile-secondary-button {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.profile-danger-button {
    color: #ff7180;
    border: 1px solid rgba(255, 90, 110, .2);
    background: rgba(255, 90, 110, .08);
}

.profile-danger-card {
    border-color: rgba(255, 90, 110, .13);
}


/* SUCCESS */

.profile-success {
    margin: 18px 24px 0;
    padding: 11px 13px;
    border: 1px solid rgba(57, 223, 155, .15);
    border-radius: 10px;
    color: #39df9b;
    background: rgba(57, 223, 155, .06);
    font-size: 12px;
}

.profile-success i {
    margin-right: 6px;
}


/* LINKS */

.profile-header-link {
    color: #35c8ff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.profile-header-link:hover {
    color: #fff;
}


/* CREDIT WALLET */

.credit-wallet-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 180px;
    padding: 30px;
    border: 1px solid rgba(53, 200, 255, .18);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(53, 200, 255, .14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(13, 29, 53, .95),
            rgba(5, 12, 24, .98)
        );
}

.credit-wallet-label {
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.credit-wallet-balance {
    margin-top: 8px;
    color: #fff;
    font-size: 45px;
    line-height: 1;
    font-weight: 850;
}

.credit-wallet-description {
    margin-top: 12px;
    color: rgba(255, 255, 255, .43);
    font-size: 11px;
}

.credit-wallet-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #35c8ff;
    background: rgba(53, 200, 255, .1);
    font-size: 28px;
}


/* PACKAGES */

.credit-package-card {
    height: 100%;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 15px;
    background: rgba(0, 0, 0, .14);
}

.credit-package-name {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.credit-package-credits {
    margin-top: 10px;
    color: #fff;
    font-size: 27px;
    font-weight: 850;
}

.credit-package-credits span {
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    font-weight: 500;
}

.credit-package-price {
    margin-top: 6px;
    color: #35c8ff;
    font-size: 18px;
    font-weight: 800;
}

.credit-package-per {
    margin-top: 3px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .3);
    font-size: 10px;
}

.credit-buy-button {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    color: #041019;
    background: #35c8ff;
    font-size: 11px;
    font-weight: 800;
}


/* ACTIVITY */

.credit-activity-row,
.credit-history-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.credit-activity-row:last-child,
.credit-history-row:last-child {
    border-bottom: 0;
}

.credit-activity-icon,
.credit-history-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(53, 200, 255, .08);
    color: #35c8ff;
}

.credit-activity-icon.positive,
.credit-history-icon.positive {
    color: #39df9b;
    background: rgba(57, 223, 155, .08);
}

.credit-activity-icon.negative,
.credit-history-icon.negative {
    color: #ff7180;
    background: rgba(255, 113, 128, .08);
}

.credit-activity-info,
.credit-history-main {
    min-width: 0;
    flex: 1;
}

.credit-activity-title,
.credit-history-title {
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 650;
}

.credit-activity-date,
.credit-history-meta {
    margin-top: 3px;
    color: rgba(255, 255, 255, .32);
    font-size: 10px;
}

.credit-activity-amount,
.credit-history-amount {
    font-size: 13px;
    font-weight: 800;
}

.credit-activity-amount.positive,
.credit-history-amount.positive {
    color: #39df9b;
}

.credit-activity-amount.negative,
.credit-history-amount.negative {
    color: #ff7180;
}

.credit-history-balance {
    width: 90px;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    text-align: right;
}

.credit-history-balance span {
    display: block;
    color: rgba(255, 255, 255, .28);
    font-size: 9px;
}

.credit-purchase-price {
    color: #fff;
    font-size: 12px;
    font-weight: 750;
}

.credit-purchase-credit-count {
    margin-left: 7px;
    padding: 3px 6px;
    border-radius: 5px;
    color: #35c8ff;
    background: rgba(53, 200, 255, .08);
    font-size: 9px;
}

.credit-purchase-status {
    min-width: 65px;
    text-align: right;
    font-size: 10px;
    font-weight: 800;
}

.credit-purchase-status.paid {
    color: #39df9b;
}

.credit-purchase-status.pending {
    color: #ffbd58;
}

.credit-purchase-status.failed,
.credit-purchase-status.cancelled {
    color: #ff7180;
}

.profile-empty {
    padding: 35px 24px;
    color: rgba(255, 255, 255, .35);
    text-align: center;
    font-size: 12px;
}

.profile-pagination {
    padding: 18px 24px;
}


/* ACCOUNT DROPDOWN */

.pp-account-dropdown {
    min-width: 230px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: #0b1322;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.pp-account-dropdown-header {
    padding: 10px 11px;
}

.pp-account-dropdown-name {
    color: #fff;
    font-size: 12px;
    font-weight: 750;
}

.pp-account-dropdown-email {
    margin-top: 3px;
    color: rgba(255, 255, 255, .35);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-account-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
}

.pp-account-dropdown .dropdown-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.pp-account-dropdown .dropdown-item i {
    width: 18px;
    color: #35c8ff;
}


/* MOBILE */

@media (max-width: 991px) {

    .profile-side-nav {
        position: static;
    }

    .profile-page-header h1 {
        font-size: 27px;
    }

    .credit-wallet-card {
        min-height: 155px;
        padding: 22px;
    }

    .credit-wallet-balance {
        font-size: 37px;
    }

    .credit-history-balance {
        display: none;
    }

}


@media (max-width: 575px) {

    .profile-card-header {
        padding: 18px;
    }

    .profile-card > form {
        padding: 18px;
    }

    .credit-wallet-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .credit-wallet-description {
        max-width: 230px;
    }

    .credit-activity-row,
    .credit-history-row {
        padding: 14px 18px;
        gap: 10px;
    }

    .credit-purchase-price {
        display: none;
    }

}













/* =========================================================
   NOTIFICATIONS
========================================================= */

.pp-notification-dropdown {
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: #0b1322;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.pp-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.pp-notification-title {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.pp-notification-subtitle {
    margin-top: 3px;
    color: rgba(255, 255, 255, .35);
    font-size: 10px;
}

.pp-notification-mark {
    border: 0;
    padding: 0;
    color: #35c8ff;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
}

.pp-notification-item {
    position: relative;
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    background: transparent;
    text-align: left;
    transition: background .18s ease;
}

.pp-notification-item:hover {
    background: rgba(255, 255, 255, .035);
}

.pp-notification-item.unread {
    background: rgba(53, 200, 255, .045);
}

.pp-notification-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #35c8ff;
    background: rgba(53, 200, 255, .08);
    font-size: 13px;
}

.pp-notification-body {
    min-width: 0;
    display: block;
}

.pp-notification-item-title {
    display: block;
    color: rgba(255, 255, 255, .88);
    font-size: 11px;
    font-weight: 700;
}

.pp-notification-item-message {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .43);
    font-size: 10px;
    line-height: 1.45;
}

.pp-notification-item-date {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .25);
    font-size: 9px;
}

.pp-notification-unread {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin-left: auto;
    margin-top: 5px;
    border-radius: 50%;
    background: #35c8ff;
}

.pp-notification-empty {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-direction: column;
    color: rgba(255, 255, 255, .3);
    font-size: 11px;
}

.pp-notification-empty i {
    font-size: 20px;
}

.pp-notification-footer {
    padding: 11px 15px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}

.pp-notification-footer a {
    color: #35c8ff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}

.pp-notification-footer a i {
    margin-left: 4px;
}


/* =========================================================
   NOTIFICATION PAGE
========================================================= */

.notification-page-item {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.notification-page-item.unread {
    background: rgba(53, 200, 255, .035);
}

.notification-page-button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 14px;
    padding: 17px 24px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.notification-page-button:hover {
    background: rgba(255, 255, 255, .025);
}

.notification-page-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #35c8ff;
    background: rgba(53, 200, 255, .08);
}

.notification-page-content {
    min-width: 0;
    flex: 1;
}

.notification-page-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 750;
}

.notification-page-message {
    margin-top: 4px;
    color: rgba(255, 255, 255, .43);
    font-size: 11px;
    line-height: 1.5;
}

.notification-page-date {
    margin-top: 5px;
    color: rgba(255, 255, 255, .27);
    font-size: 9px;
}

.notification-unread-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35c8ff;
}

.notification-page-arrow {
    color: rgba(255, 255, 255, .25);
}

@media (max-width: 575px) {

    .pp-notification-dropdown {
        position: fixed !important;
        top: 62px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto;
    }

}






























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

.prediction-history-card {
    display: block;
    padding: 20px 24px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: background .18s ease;
}

.prediction-history-card:hover {
    color: inherit;
    background: rgba(255, 255, 255, .025);
}

.prediction-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prediction-slip-number {
    color: #35c8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.prediction-history-date {
    margin-top: 4px;
    color: rgba(255, 255, 255, .32);
    font-size: 10px;
}

.prediction-history-arrow {
    color: rgba(255, 255, 255, .28);
}

.prediction-history-summary {
    display: flex;
    gap: 38px;
    margin-top: 18px;
}

.prediction-history-stat span {
    display: block;
    color: rgba(255, 255, 255, .3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.prediction-history-stat strong {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 750;
}

.prediction-history-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 17px;
    color: #35c8ff;
    font-size: 10px;
    font-weight: 700;
}


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

.prediction-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #35c8ff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.prediction-back-link:hover {
    color: #fff;
}

.prediction-slip-summary {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
}

.prediction-slip-summary-item {
    flex: 1;
    padding: 20px 24px;
    border-right: 1px solid rgba(255, 255, 255, .05);
}

.prediction-slip-summary-item:last-child {
    border-right: 0;
}

.prediction-slip-summary-item span {
    display: block;
    color: rgba(255, 255, 255, .3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.prediction-slip-summary-item strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
}

.prediction-slip-match {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 19px 24px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: background .18s ease;
}

.prediction-slip-match:hover {
    color: inherit;
    background: rgba(255, 255, 255, .025);
}

.prediction-slip-match-main {
    min-width: 0;
    flex: 1;
}

.prediction-slip-league {
    color: rgba(255, 255, 255, .3);
    font-size: 9px;
}

.prediction-slip-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 650;
}

.prediction-slip-vs {
    color: rgba(255, 255, 255, .2);
    font-size: 9px;
}

.prediction-slip-date {
    margin-top: 5px;
    color: rgba(255, 255, 255, .28);
    font-size: 9px;
}

.prediction-slip-selection {
    min-width: 150px;
    text-align: right;
}

.prediction-slip-market {
    color: #35c8ff;
    font-size: 11px;
    font-weight: 750;
}

.prediction-slip-confidence {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 4px;
}

.prediction-slip-confidence strong {
    color: #fff;
    font-size: 12px;
}

.prediction-slip-confidence span {
    color: rgba(255, 255, 255, .3);
    font-size: 9px;
}

.prediction-slip-tier {
    display: inline-block;
    margin-top: 5px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
}

.prediction-slip-tier.banker,
.prediction-slip-tier.yes {
    color: #39df9b;
}

.prediction-slip-tier.shaky {
    color: #ffbd58;
}

.prediction-slip-tier.not_sure,
.prediction-slip-tier.skip {
    color: rgba(255, 255, 255, .38);
}

.prediction-slip-open {
    color: rgba(255, 255, 255, .22);
}


/* MOBILE */

@media (max-width: 575px) {

    .prediction-history-card {
        padding: 17px 18px;
    }

    .prediction-history-summary {
        gap: 22px;
    }

    .prediction-slip-summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .prediction-slip-summary-item {
        border-right: 0;
        padding: 16px 18px;
    }

    .prediction-slip-summary-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .05);
    }

    .prediction-slip-summary-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    .prediction-slip-match {
        align-items: flex-start;
        padding: 16px 18px;
        gap: 10px;
    }

    .prediction-slip-selection {
        min-width: 105px;
    }

    .prediction-slip-teams {
        display: block;
        line-height: 1.6;
    }

    .prediction-slip-vs {
        margin: 0 4px;
    }

}




















/* =========================================================
STATSHOMIE VIP MEMBERSHIP CARD
========================================================= */

.vip-membership-card {
position: relative;
overflow: hidden;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at 85% 15%, rgba(132, 84, 255, 0.22), transparent 32%),
radial-gradient(circle at 15% 90%, rgba(42, 198, 255, 0.10), transparent 35%),
linear-gradient(145deg, #120c26 0%, #0c0a18 55%, #090912 100%);
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vip-membership-card.is-active {
border-color: rgba(181, 139, 255, 0.22);
}

.vip-membership-card.is-inactive {
background:
radial-gradient(circle at 85% 15%, rgba(90, 75, 120, 0.14), transparent 30%),
linear-gradient(145deg, #11101a 0%, #0d0d14 60%, #0a0a10 100%);
}

.vip-card-glow {
position: absolute;
width: 240px;
height: 240px;
top: -130px;
right: -70px;
border-radius: 50%;
background: rgba(180, 130, 255, 0.10);
filter: blur(45px);
pointer-events: none;
}

.vip-card-content {
position: relative;
z-index: 2;
padding: 28px;
}

.vip-card-eyebrow {
color: rgba(255, 255, 255, 0.48);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 3px;
}

.vip-card-title {
margin: 0;
color: #ffffff;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
}

.vip-crown {
width: 48px;
height: 48px;
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
color: #ffd76a;
background:
linear-gradient(145deg, rgba(255, 214, 102, 0.20), rgba(160, 103, 255, 0.12));
border: 1px solid rgba(255, 214, 102, 0.18);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.vip-crown i {
font-size: 18px;
}

.vip-status-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}

.vip-status-badge.active {
color: #8ef0bd;
background: rgba(56, 210, 130, 0.10);
border: 1px solid rgba(56, 210, 130, 0.16);
}

.vip-status-badge.inactive {
color: rgba(255, 255, 255, 0.52);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.07);
}

.vip-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #58e89a;
box-shadow: 0 0 10px rgba(88, 232, 154, 0.65);
}

.vip-active-copy {
margin-top: 26px;
}

.vip-welcome {
color: rgba(255, 255, 255, 0.94);
font-size: 15px;
font-weight: 600;
}

.vip-expiry-copy {
margin-top: 5px;
color: rgba(255, 255, 255, 0.48);
font-size: 13px;
}

.vip-expiry-copy strong {
color: rgba(255, 255, 255, 0.80);
font-weight: 600;
}

.vip-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 24px;
}

.vip-stat {
min-width: 0;
padding: 15px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-stat.highlight {
background:
linear-gradient(
145deg,
rgba(169, 117, 255, 0.14),
rgba(67, 199, 255, 0.06)
);
border-color: rgba(175, 125, 255, 0.15);
}

.vip-stat-label {
color: rgba(255, 255, 255, 0.38);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;
}

.vip-stat-value {
color: rgba(255, 255, 255, 0.94);
font-size: 14px;
font-weight: 700;
}

.vip-stat.highlight .vip-stat-value {
color: #d7bcff;
font-size: 18px;
}

.vip-stat-value span {
color: rgba(255, 255, 255, 0.48);
font-size: 12px;
font-weight: 500;
}

.vip-inactive-content {
display: flex;
align-items: center;
gap: 15px;
margin-top: 27px;
padding: 17px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-inactive-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
color: rgba(255, 255, 255, 0.56);
background: rgba(255, 255, 255, 0.055);
}

.vip-inactive-icon i {
font-size: 17px;
}

.vip-inactive-title {
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 700;
}

.vip-inactive-description {
margin-top: 3px;
color: rgba(255, 255, 255, 0.42);
font-size: 12px;
line-height: 1.5;
}

.vip-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 26px;
padding-top: 17px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.34);
font-size: 11px;
font-weight: 600;
}

.vip-footer-left,
.vip-footer-right {
display: flex;
align-items: center;
gap: 6px;
}

.vip-footer-left i {
color: #b997ff;
}

.vip-footer-right i {
color: #62d6ff;
}

/* =========================================================
CREDIT PACKAGE VIP AREA
========================================================= */

.credit-package-vip {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 11px 12px;
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(181, 139, 255, 0.11),
rgba(255, 206, 92, 0.06)
);
border: 1px solid rgba(190, 145, 255, 0.14);
}

.credit-package-vip-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: #ffd76a;
background: rgba(255, 215, 106, 0.09);
}

.credit-package-vip-icon i {
font-size: 13px;
}

.credit-package-vip-value {
color: #d8c1ff;
font-size: 13px;
font-weight: 800;
}

.credit-package-vip-label {
color: rgba(255, 255, 255, 0.40);
font-size: 10px;
margin-top: 1px;
}

.credit-package-no-vip {
margin-top: 16px;
color: rgba(255, 255, 255, 0.34);
font-size: 11px;
font-weight: 600;
}

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

@media (max-width: 767.98px) {


.vip-card-content {
    padding: 22px;
}

.vip-card-title {
    font-size: 20px;
}

.vip-status-badge {
    padding: 6px 9px;
    font-size: 10px;
}

.vip-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.vip-stat {
    padding: 13px;
}

.vip-card-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.vip-inactive-content {
    align-items: flex-start;
}


}






















/* =========================================================
   STATSHOMIE — PREDICTION VAULT
   DARK / ELECTRIC SPORTS-TECH THEME
========================================================= */

.stats-homie-predictions-page {
    min-height: 100vh;
    padding-bottom: 70px;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(0, 174, 255, 0.055),
            transparent 32%
        ),
        #080b12;
}


/* =========================================================
   HERO
========================================================= */

.sh-predictions-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 30px 30px;

    background:
        radial-gradient(
            circle at 82% 0%,
            rgba(0, 188, 255, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(83, 71, 196, 0.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #080b12 0%,
            #0c111b 52%,
            #090c14 100%
        );

    border-bottom: 1px solid rgba(92, 202, 255, 0.09);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.32);
}

.sh-predictions-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 207, 255, 0.025) 50%,
            transparent 100%
        );

    pointer-events: none;
}

.sh-predictions-hero-glow {
    position: absolute;

    width: 390px;
    height: 390px;

    top: -220px;
    right: -110px;

    border-radius: 50%;

    background: rgba(0, 193, 255, 0.12);

    filter: blur(75px);

    pointer-events: none;
}

.sh-predictions-hero-content {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: 0 auto;

    padding: 28px 24px 34px;
}


/* =========================================================
   TOP BAR
========================================================= */

.sh-predictions-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.sh-back-browse {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 12px;

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

    text-decoration: none;

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

    border-radius: 11px;

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

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

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

.sh-back-browse:hover {
    color: #ffffff;

    background: rgba(0, 194, 255, 0.07);

    border-color: rgba(0, 194, 255, 0.18);

    transform: translateX(-2px);
}

.sh-back-browse i {
    color: #53d8ff;
    font-size: 13px;
}

.sh-predictions-live-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.15em;
}

.sh-predictions-live-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #52d8ff;

    box-shadow:
        0 0 0 3px rgba(82, 216, 255, 0.08),
        0 0 14px rgba(82, 216, 255, 0.65);
}


/* =========================================================
   HEADING
========================================================= */

.sh-predictions-heading {
    max-width: 720px;
    margin-top: 54px;
}

.sh-predictions-eyebrow {
    color: #54d7ff;

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

    letter-spacing: 0.19em;

    margin-bottom: 10px;
}

.sh-predictions-heading h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(36px, 5vw, 58px);

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -0.05em;

    text-shadow:
        0 0 30px rgba(0, 181, 255, 0.08);
}

.sh-predictions-heading p {
    max-width: 620px;

    margin: 17px 0 0;

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

    font-size: 14px;

    line-height: 1.72;
}


/* =========================================================
   OVERVIEW
========================================================= */

.sh-prediction-overview {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    gap: 12px;

    margin-top: 36px;
}

.sh-overview-item {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 72px;

    padding: 13px 15px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.sh-overview-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 12px;

    color: #59dcff;

    background:
        linear-gradient(
            145deg,
            rgba(22, 194, 255, 0.12),
            rgba(22, 117, 255, 0.05)
        );

    border: 1px solid rgba(70, 204, 255, 0.10);
}

.sh-overview-item span {
    display: block;

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

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

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.sh-overview-item strong {
    display: block;

    margin-top: 2px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 850;
}

.sh-overview-action {
    display: flex;
}

.sh-start-analysis {
    min-width: 180px;

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

    gap: 15px;

    padding: 0 17px;

    border-radius: 17px;

    color: #ffffff;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #098ed7 0%,
            #0871b9 48%,
            #164b98 100%
        );

    border: 1px solid rgba(86, 218, 255, 0.18);

    box-shadow:
        0 14px 35px rgba(0, 126, 198, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.sh-start-analysis:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 18px 42px rgba(0, 126, 198, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sh-start-analysis span {
    display: flex;
    align-items: center;

    gap: 8px;

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

.sh-start-analysis > i {
    font-size: 13px;
}


/* =========================================================
   CONTENT SECTION
========================================================= */

.sh-predictions-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 38px 24px 0;
}

.sh-predictions-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 20px;
}

.sh-section-eyebrow {
    color: #52cfff;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.sh-predictions-section-header h2 {
    margin: 5px 0 4px;

    color: #ffffff;

    font-size: 25px;

    font-weight: 850;

    letter-spacing: -0.025em;
}

.sh-predictions-section-header p {
    margin: 0;

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

    font-size: 12px;
}

.sh-section-browse-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #57d8ff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    transition: 0.2s ease;
}

.sh-section-browse-link:hover {
    color: #ffffff;
}


/* =========================================================
   HISTORY GRID
========================================================= */

.sh-prediction-history-grid {
    display: grid;

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

    gap: 14px;
}


/* =========================================================
   HISTORY CARD
========================================================= */

.sh-prediction-history-card {
    position: relative;

    overflow: hidden;

    display: block;

    padding: 20px;

    border-radius: 20px;

    color: inherit;

    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            #101722 0%,
            #0d131c 52%,
            #0a1018 100%
        );

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

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.sh-prediction-history-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #29d2ff 0%,
            #2478ff 48%,
            transparent 100%
        );

    opacity: 0.72;
}

.sh-prediction-history-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -100px;
    right: -60px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.07);

    filter: blur(35px);

    pointer-events: none;
}

.sh-prediction-history-card:hover {
    transform: translateY(-4px);

    color: inherit;

    border-color:
        rgba(54, 205, 255, 0.17);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(31, 189, 255, 0.03);
}


/* =========================================================
   CARD TOP
========================================================= */

.sh-history-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.sh-history-slip-meta {
    min-width: 0;
}

.sh-history-slip-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    border-radius: 999px;

    color: #62dcff;

    background:
        rgba(39, 202, 255, 0.07);

    border:
        1px solid rgba(53, 207, 255, 0.12);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 0.08em;
}

.sh-history-slip-number {
    margin-top: 10px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 850;

    letter-spacing: -0.02em;
}

.sh-history-arrow {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 11px;

    color: #58d9ff;

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

    border:
        1px solid rgba(61, 205, 255, 0.08);

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

.sh-prediction-history-card:hover .sh-history-arrow {
    background: #0da4df;

    color: #ffffff;

    transform:
        translate(2px, -2px);
}


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

.sh-history-date {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 14px;

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

    font-size: 11px;
}

.sh-history-date i {
    color: #48cfff;
}

.sh-history-date span {
    color: rgba(255, 255, 255, 0.16);
}


/* =========================================================
   SUMMARY
========================================================= */

.sh-history-summary {
    display: grid;

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

    gap: 8px;

    margin-top: 18px;
}

.sh-history-stat {
    min-width: 0;

    padding: 12px;

    border-radius: 13px;

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

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

.sh-history-stat span {
    display: block;

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

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 0.10em;
}

.sh-history-stat strong {
    display: block;

    margin-top: 4px;

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

    font-size: 14px;

    font-weight: 850;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


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

.sh-history-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 16px;

    padding-top: 14px;

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

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

    font-size: 11px;

    font-weight: 800;
}

.sh-history-card-footer i {
    color: #4fd4ff;

    transition:
        transform 0.2s ease;
}

.sh-prediction-history-card:hover
.sh-history-card-footer i {
    transform:
        translateX(4px);

    color: #ffffff;
}


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

.sh-predictions-empty {
    max-width: 620px;

    margin: 40px auto 0;

    padding: 50px 28px;

    text-align: center;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 185, 255, 0.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #101722,
            #0c121a
        );

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

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.20);
}

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

    margin: 0 auto;

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

    border-radius: 19px;

    color: #55d8ff;

    background:
        rgba(23, 187, 255, 0.07);

    border:
        1px solid rgba(53, 208, 255, 0.10);

    font-size: 23px;
}

.sh-empty-eyebrow {
    margin-top: 18px;

    color: #54cfff;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 0.14em;
}

.sh-predictions-empty h3 {
    margin: 8px 0 0;

    color: #ffffff;

    font-size: 23px;

    font-weight: 850;

    letter-spacing: -0.025em;
}

.sh-predictions-empty p {
    max-width: 480px;

    margin: 10px auto 0;

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

    font-size: 12px;

    line-height: 1.7;
}

.sh-empty-action {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: 22px;

    padding: 11px 15px;

    border-radius: 12px;

    color: #ffffff;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #0ba3dc,
            #1259a0
        );

    border:
        1px solid rgba(75, 211, 255, 0.14);

    font-size: 11px;

    font-weight: 850;

    box-shadow:
        0 10px 25px rgba(0, 133, 201, 0.18);
}

.sh-empty-action:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #13b5ed,
            #1668b7
        );
}


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

.sh-predictions-pagination {
    margin-top: 25px;
}

.sh-predictions-pagination nav {
    display: flex;

    justify-content: center;
}


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

@media (max-width: 767.98px) {

    .sh-predictions-hero-content {
        padding: 20px 17px 24px;
    }

    .sh-predictions-heading {
        margin-top: 38px;
    }

    .sh-predictions-heading h1 {
        font-size: 39px;
    }

    .sh-predictions-heading p {
        font-size: 13px;
    }

    .sh-back-browse span {
        display: none;
    }

    .sh-back-browse {
        width: 36px;
        height: 36px;

        justify-content: center;

        padding: 0;
    }

    .sh-prediction-overview {
        grid-template-columns: 1fr 1fr;

        gap: 9px;
    }

    .sh-overview-action {
        grid-column: 1 / -1;
    }

    .sh-start-analysis {
        width: 100%;

        min-height: 50px;
    }

    .sh-predictions-section {
        padding: 28px 17px 0;
    }

    .sh-predictions-section-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .sh-predictions-section-header h2 {
        font-size: 22px;
    }

    .sh-prediction-history-grid {
        grid-template-columns: 1fr;
    }

    .sh-prediction-history-card {
        padding: 17px;

        border-radius: 18px;
    }

    .sh-history-summary {
        gap: 6px;
    }

    .sh-history-stat {
        padding: 10px;
    }

    .sh-history-stat strong {
        font-size: 13px;
    }

    .sh-predictions-empty {
        margin-top: 25px;

        padding: 38px 20px;
    }

}






















/* =========================================================
STATSHOMIE — PREDICTION SLIP
DARK / ELECTRIC SPORTS-TECH
========================================================= */

.stats-homie-prediction-show {
min-height: 100vh;
padding-bottom: 70px;
background:
radial-gradient(
circle at 50% -15%,
rgba(0, 184, 255, 0.055),
transparent 32%
),
#080b12;
}

/* =========================================================
HERO
========================================================= */

.sh-slip-hero {
position: relative;
overflow: hidden;


border-radius: 0 0 30px 30px;

background:
    radial-gradient(
        circle at 82% 0%,
        rgba(0, 192, 255, 0.15),
        transparent 28%
    ),
    radial-gradient(
        circle at 8% 100%,
        rgba(75, 91, 190, 0.10),
        transparent 30%
    ),
    linear-gradient(
        145deg,
        #080b12 0%,
        #0c111b 55%,
        #090c14 100%
    );

border-bottom:
    1px solid rgba(77, 204, 255, 0.08);

box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.28);


}

.sh-slip-hero-glow {
position: absolute;


width: 380px;
height: 380px;

top: -240px;
right: -110px;

border-radius: 50%;

background:
    rgba(0, 190, 255, 0.10);

filter: blur(70px);

pointer-events: none;


}

.sh-slip-hero-content {
position: relative;
z-index: 2;


max-width: 1200px;

margin: 0 auto;

padding: 25px 24px 32px;


}

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

.sh-slip-topbar {
display: flex;
align-items: center;
justify-content: space-between;


gap: 15px;


}

.sh-slip-nav-left {
display: flex;
align-items: center;
gap: 8px;
}

.sh-slip-back-button,
.sh-slip-history-link {
display: inline-flex;
align-items: center;


gap: 8px;

padding: 9px 12px;

border-radius: 11px;

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

text-decoration: none;

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

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

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

transition:
    0.2s ease;


}

.sh-slip-back-button i {
color: #52d8ff;
}

.sh-slip-back-button:hover,
.sh-slip-history-link:hover {
color: #ffffff;


background:
    rgba(0, 191, 255, 0.065);

border-color:
    rgba(48, 205, 255, 0.14);


}

.sh-slip-history-link i {
color:
rgba(255, 255, 255, 0.43);
}

.sh-slip-brand {
display: inline-flex;
align-items: center;


gap: 8px;

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

font-size: 10px;

font-weight: 850;

letter-spacing: 0.15em;


}

.sh-slip-brand-dot {
width: 6px;
height: 6px;


border-radius: 50%;

background: #54d9ff;

box-shadow:
    0 0 12px rgba(84, 217, 255, 0.65);


}

/* =========================================================
HEADING
========================================================= */

.sh-slip-heading {
margin-top: 44px;
}

.sh-slip-eyebrow {
color: #55d8ff;


font-size: 10px;

font-weight: 850;

letter-spacing: 0.18em;

margin-bottom: 9px;


}

.sh-slip-title-row {
display: flex;
align-items: center;
justify-content: space-between;


gap: 20px;


}

.sh-slip-title-row h1 {
margin: 0;


color: #ffffff;

font-size:
    clamp(34px, 5vw, 53px);

line-height: 1;

font-weight: 900;

letter-spacing: -0.045em;


}

.sh-slip-title-row p {
margin: 11px 0 0;


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

font-size: 13px;


}

.sh-slip-complete-badge {
display: inline-flex;
align-items: center;


gap: 8px;

padding: 8px 12px;

border-radius: 999px;

color: #64e5a1;

background:
    rgba(52, 215, 134, 0.07);

border:
    1px solid rgba(69, 224, 145, 0.12);

font-size: 11px;

font-weight: 800;

white-space: nowrap;


}

.sh-slip-complete-dot {
width: 6px;
height: 6px;


border-radius: 50%;

background: #58e5a0;

box-shadow:
    0 0 10px rgba(88, 229, 160, 0.65);


}

/* =========================================================
OVERVIEW
========================================================= */

.sh-slip-overview {
display: grid;


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

gap: 10px;

margin-top: 30px;


}

.sh-slip-overview-item {
display: flex;
align-items: center;


gap: 12px;

min-height: 68px;

padding: 12px 14px;

border-radius: 16px;

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

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


}

.sh-slip-overview-icon {
width: 37px;
height: 37px;


flex: 0 0 37px;

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

border-radius: 11px;

color: #53d8ff;

background:
    rgba(16, 192, 255, 0.07);

border:
    1px solid rgba(54, 204, 255, 0.08);


}

.sh-slip-overview-item span {
display: block;


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

font-size: 8px;

font-weight: 850;

letter-spacing: 0.11em;


}

.sh-slip-overview-item strong {
display: block;


margin-top: 2px;

color: #ffffff;

font-size: 17px;

font-weight: 850;


}

.sh-slip-overview-action {
min-width: 150px;


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

gap: 8px;

padding: 0 15px;

border-radius: 16px;

color: #58d9ff;

text-decoration: none;

background:
    rgba(0, 190, 255, 0.045);

border:
    1px solid rgba(50, 201, 255, 0.10);

font-size: 11px;

font-weight: 800;

transition: 0.2s ease;


}

.sh-slip-overview-action:hover {
color: #ffffff;


background:
    rgba(0, 181, 255, 0.09);

border-color:
    rgba(50, 201, 255, 0.17);


}

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

.sh-slip-main {
max-width: 1200px;


margin: 0 auto;

padding:
    36px 24px 0;


}

.sh-slip-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;


gap: 20px;

margin-bottom: 18px;


}

.sh-slip-section-eyebrow {
color: #53d2ff;


font-size: 10px;

font-weight: 850;

letter-spacing: 0.16em;


}

.sh-slip-section-header h2 {
margin: 5px 0 4px;


color: #ffffff;

font-size: 25px;

font-weight: 850;

letter-spacing: -0.025em;


}

.sh-slip-section-header p {
margin: 0;


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

font-size: 12px;


}

.sh-slip-section-note {
display: inline-flex;
align-items: center;


gap: 7px;

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

font-size: 10px;

font-weight: 700;


}

.sh-slip-section-note i {
color: #5edbff;
}

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

.sh-prediction-match-card {
position: relative;


overflow: hidden;

display: grid;

grid-template-columns:
    minmax(0, 1fr)
    245px
    30px;

align-items: stretch;

gap: 0;

margin-bottom: 10px;

border-radius: 18px;

color: inherit;

text-decoration: none;

background:
    linear-gradient(
        145deg,
        #101721 0%,
        #0d131c 55%,
        #0a1017 100%
    );

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

box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18);

transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;


}

.sh-prediction-match-card::before {
content: "";


position: absolute;

top: 0;
left: 0;

width: 100%;
height: 2px;

background:
    linear-gradient(
        90deg,
        #20d2ff,
        #176fd6,
        transparent
    );

opacity: 0.70;


}

.sh-prediction-match-card:hover {
color: inherit;


transform: translateY(-2px);

border-color:
    rgba(48, 205, 255, 0.14);

box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(38, 193, 255, 0.025);


}

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

.sh-prediction-match-main {
padding: 18px 18px 16px;
}

.sh-prediction-match-top {
display: flex;
align-items: center;
justify-content: space-between;


gap: 12px;


}

.sh-prediction-league {
display: flex;
align-items: center;


gap: 7px;

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

font-size: 10px;

font-weight: 700;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;


}

.sh-prediction-league-icon {
font-size: 11px;
}

.sh-prediction-match-number {
color:
rgba(255, 255, 255, 0.20);


font-size: 9px;

font-weight: 850;


}

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

.sh-prediction-teams {
display: grid;


grid-template-columns:
    1fr
    auto
    1fr;

align-items: center;

gap: 12px;

margin-top: 17px;


}

.sh-prediction-team {
min-width: 0;


display: flex;
align-items: center;

justify-content: flex-start;

gap: 10px;


}

.sh-prediction-team.away {
justify-content: flex-end;


text-align: right;


}

.sh-prediction-team strong {
min-width: 0;


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

font-size: 14px;

font-weight: 750;

line-height: 1.25;


}

.sh-prediction-team img,
.sh-team-fallback {
width: 34px;
height: 34px;


flex: 0 0 34px;

object-fit: contain;


}

.sh-team-fallback {
display: flex;
align-items: center;
justify-content: center;


border-radius: 10px;

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

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

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


}

.sh-prediction-vs {
color:
rgba(255, 255, 255, 0.20);


font-size: 9px;

font-weight: 850;

letter-spacing: 0.08em;


}

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

.sh-prediction-match-meta {
display: flex;
align-items: center;
justify-content: space-between;


gap: 12px;

margin-top: 15px;

padding-top: 12px;

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

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

font-size: 10px;


}

.sh-prediction-match-meta > span:first-child {
display: inline-flex;
align-items: center;


gap: 6px;


}

.sh-prediction-match-meta i {
color: #4ed5ff;
}

.sh-open-analysis {
color:
rgba(255, 255, 255, 0.26);


transition:
    color 0.2s ease;


}

.sh-prediction-match-card:hover
.sh-open-analysis {
color: #5ad9ff;
}

/* =========================================================
RESULT PANEL
========================================================= */

.sh-prediction-result-panel {
position: relative;


display: flex;

flex-direction: column;

justify-content: center;

padding: 17px 20px;

background:
    linear-gradient(
        145deg,
        rgba(22, 40, 57, 0.72),
        rgba(13, 25, 38, 0.72)
    );

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


}

.sh-result-label {
color:
rgba(255, 255, 255, 0.28);


font-size: 8px;

font-weight: 850;

letter-spacing: 0.14em;


}

.sh-result-market {
margin-top: 6px;


color: #ffffff;

font-size: 15px;

line-height: 1.25;

font-weight: 800;


}

.sh-result-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;


gap: 10px;

margin-top: 11px;


}

.sh-result-confidence strong {
display: block;


color: #54d8ff;

font-size: 22px;

line-height: 1;

font-weight: 900;

letter-spacing: -0.03em;


}

.sh-result-confidence span {
display: block;


margin-top: 3px;

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

font-size: 8px;

font-weight: 700;


}

.sh-result-tier {
display: inline-flex;


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

min-width: 54px;

padding: 6px 8px;

border-radius: 8px;

font-size: 8px;

font-weight: 850;

letter-spacing: 0.06em;


}

.sh-result-tier.banker {
color: #67e7a5;


background:
    rgba(61, 221, 137, 0.08);

border:
    1px solid rgba(61, 221, 137, 0.10);


}

.sh-result-tier.yes {
color: #5fd9ff;


background:
    rgba(49, 199, 255, 0.08);

border:
    1px solid rgba(49, 199, 255, 0.10);


}

.sh-result-tier.shaky {
color: #ffd166;


background:
    rgba(255, 190, 70, 0.07);

border:
    1px solid rgba(255, 190, 70, 0.09);


}

.sh-result-tier.not-sure {
color:
rgba(255, 255, 255, 0.48);


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

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


}

.sh-result-tier.skip {
color:
rgba(255, 255, 255, 0.30);


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

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


}

.sh-result-tier.default {
color:
rgba(255, 255, 255, 0.48);


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


}

/* =========================================================
ARROW
========================================================= */

.sh-prediction-card-arrow {
display: flex;
align-items: center;
justify-content: center;


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

background:
    rgba(0, 0, 0, 0.08);

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

transition:
    color 0.2s ease,
    background 0.2s ease;


}

.sh-prediction-card-arrow i {
font-size: 12px;
}

.sh-prediction-match-card:hover
.sh-prediction-card-arrow {
color: #5bdcff;


background:
    rgba(0, 192, 255, 0.035);


}

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

.sh-slip-empty {
max-width: 620px;


margin: 35px auto 0;

padding: 48px 25px;

text-align: center;

border-radius: 22px;

background:
    linear-gradient(
        145deg,
        #101721,
        #0c1219
    );

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

box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.20);


}

.sh-slip-empty-icon {
width: 60px;
height: 60px;


margin: 0 auto;

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

border-radius: 18px;

color: #53d7ff;

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

border:
    1px solid rgba(62, 207, 255, 0.08);

font-size: 22px;


}

.sh-slip-empty h3 {
margin: 17px 0 0;


color: #ffffff;

font-size: 22px;

font-weight: 850;


}

.sh-slip-empty p {
margin: 8px auto 0;


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

font-size: 12px;


}

.sh-empty-browse-button {
display: inline-flex;
align-items: center;


gap: 8px;

margin-top: 20px;

padding: 11px 15px;

border-radius: 12px;

color: #ffffff;

text-decoration: none;

background:
    linear-gradient(
        135deg,
        #0ba3dc,
        #13559a
    );

font-size: 11px;

font-weight: 850;


}

/* =========================================================
BOTTOM ACTIONS
========================================================= */

.sh-slip-bottom-actions {
display: flex;
align-items: center;
justify-content: space-between;


gap: 12px;

margin-top: 22px;


}

.sh-slip-secondary-action,
.sh-slip-primary-action {
display: inline-flex;
align-items: center;


gap: 8px;

padding: 11px 15px;

border-radius: 12px;

text-decoration: none;

font-size: 11px;

font-weight: 800;

transition: 0.2s ease;


}

.sh-slip-secondary-action {
color:
rgba(255, 255, 255, 0.52);


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

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


}

.sh-slip-secondary-action:hover {
color: #ffffff;


border-color:
    rgba(255, 255, 255, 0.10);


}

.sh-slip-primary-action {
color: #ffffff;


background:
    linear-gradient(
        135deg,
        #0aa8e3,
        #155a9f
    );

border:
    1px solid rgba(70, 210, 255, 0.14);

box-shadow:
    0 10px 25px rgba(0, 131, 194, 0.18);


}

.sh-slip-primary-action:hover {
color: #ffffff;


transform: translateY(-1px);

box-shadow:
    0 14px 32px rgba(0, 131, 194, 0.24);


}

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

@media (max-width: 767.98px) {


.sh-slip-hero-content {
    padding:
        18px 17px 23px;
}

.sh-slip-nav-left {
    gap: 6px;
}

.sh-slip-history-link span {
    display: none;
}

.sh-slip-history-link,
.sh-slip-back-button {
    width: 36px;
    height: 36px;

    justify-content: center;

    padding: 0;
}

.sh-slip-brand {
    font-size: 9px;
}

.sh-slip-heading {
    margin-top: 34px;
}

.sh-slip-title-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
}

.sh-slip-title-row h1 {
    font-size: 38px;
}

.sh-slip-title-row p {
    font-size: 12px;
}

.sh-slip-overview {
    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 25px;
}

.sh-slip-overview-item {
    min-height: 62px;

    padding: 10px;
}

.sh-slip-overview-icon {
    width: 33px;
    height: 33px;

    flex-basis: 33px;
}

.sh-slip-overview-action {
    grid-column: 1 / -1;

    min-height: 48px;
}

.sh-slip-main {
    padding:
        27px 17px 0;
}

.sh-slip-section-header {
    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
}

.sh-slip-section-header h2 {
    font-size: 22px;
}

.sh-prediction-match-card {
    grid-template-columns: 1fr;

    border-radius: 17px;
}

.sh-prediction-match-main {
    padding: 16px;
}

.sh-prediction-teams {
    gap: 7px;
}

.sh-prediction-team strong {
    font-size: 12px;
}

.sh-prediction-team img,
.sh-team-fallback {
    width: 29px;
    height: 29px;

    flex-basis: 29px;
}

.sh-prediction-vs {
    font-size: 8px;
}

.sh-prediction-match-meta {
    align-items: flex-start;

    flex-direction: column;

    gap: 6px;
}

.sh-prediction-result-panel {
    border-left: 0;

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

    padding: 14px 16px;
}

.sh-result-bottom {
    align-items: center;
}

.sh-prediction-card-arrow {
    display: none;
}

.sh-slip-bottom-actions {
    align-items: stretch;

    flex-direction: column;
}

.sh-slip-secondary-action,
.sh-slip-primary-action {
    justify-content: center;
}


}






























/* =========================================================
   STATSHOMIE — LIVE SCORES
========================================================= */

.stats-live-scores-page {
    width: 100%;
    padding: 24px;
    color: #fff;
}

.stats-live-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.stats-live-header-main {
    max-width: 760px;
}

.stats-live-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #35c8ff;
}

.stats-live-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3d5a;
    box-shadow: 0 0 0 5px rgba(255, 61, 90, .10);
    animation: statsLivePulse 1.6s infinite;
}

.stats-live-header h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.04em;
}

.stats-live-header p {
    max-width: 700px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.60);
    font-size: 14px;
    line-height: 1.65;
}

.stats-live-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-live-updated {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.stats-live-updated strong {
    color: rgba(255,255,255,.82);
    font-size: 12px;
}

.stats-live-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(53, 200, 255, .30);
    border-radius: 12px;
    background: rgba(53, 200, 255, .08);
    color: #35c8ff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.stats-live-refresh:hover {
    background: rgba(53, 200, 255, .15);
    transform: translateY(-1px);
}

.stats-live-refresh:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.stats-spin {
    animation: statsSpin .8s linear infinite;
}

.stats-live-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stats-live-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.02)
        );
    color: #fff;
    text-align: left;
}

button.stats-live-summary-card {
    width: 100%;
    cursor: pointer;
}

.stats-live-summary-card.active {
    border-color: rgba(53, 200, 255, .35);
    box-shadow: 0 0 0 1px rgba(53, 200, 255, .08);
}

.stats-live-summary-card.live.active {
    border-color: rgba(255,61,90,.35);
    box-shadow: 0 0 0 1px rgba(255,61,90,.08);
}

.stats-summary-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: rgba(53,200,255,.08);
    color: #35c8ff;
    font-size: 18px;
}

.stats-live-summary-card.live .stats-summary-icon {
    background: rgba(255,61,90,.08);
    color: #ff3d5a;
}

.stats-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-summary-copy small {
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stats-summary-copy strong {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.stats-live-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.stats-live-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.stats-live-tabs button.active {
    background: rgba(53,200,255,.10);
    color: #fff;
}

.stats-live-tabs strong {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 7px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.72);
    font-size: 10px;
}

.stats-tab-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3d5a;
}

.stats-live-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-live-league {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
}

.stats-live-league-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.025);
}

.stats-live-league-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.stats-live-league-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(53,200,255,.08);
    color: #35c8ff;
}

.stats-live-league-title div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-live-league-title strong {
    font-size: 13px;
    font-weight: 850;
}

.stats-live-league-title small {
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.stats-live-league-count {
    color: rgba(255,255,255,.34);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.stats-live-matches {
    display: flex;
    flex-direction: column;
}

.stats-live-match {
    display: grid;
    grid-template-columns: 86px minmax(240px, 1fr) 110px 150px;
    align-items: center;
    gap: 16px;
    min-height: 82px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: background .2s ease;
}

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

.stats-live-match:hover {
    background: rgba(255,255,255,.025);
}

.stats-live-match.is-live {
    background:
        linear-gradient(
            90deg,
            rgba(255,61,90,.045),
            transparent 35%
        );
}

.stats-live-match-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.stats-match-live-badge,
.stats-match-ft-badge,
.stats-match-time {
    font-size: 11px;
    font-weight: 850;
}

.stats-match-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff5069;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.stats-match-live-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3d5a;
    box-shadow: 0 0 0 4px rgba(255,61,90,.09);
}

.stats-live-match-state strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.stats-match-ft-badge {
    color: rgba(255,255,255,.60);
    letter-spacing: .07em;
}

.stats-match-time {
    color: rgba(255,255,255,.52);
}

.stats-live-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.stats-live-team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stats-live-team:first-child {
    justify-content: flex-end;
}

.stats-live-team:last-child {
    justify-content: flex-start;
}

.stats-live-team-name {
    min-width: 0;
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

.stats-live-team:first-child .stats-live-team-name {
    text-align: right;
}

.stats-live-team-logo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.22);
}

.stats-live-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.stats-live-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 64px;
}

.stats-live-score strong {
    min-width: 18px;
    text-align: center;
    font-size: 21px;
    font-weight: 950;
    line-height: 1;
}

.stats-live-score span {
    color: rgba(255,255,255,.30);
    font-size: 16px;
    font-weight: 700;
}

.stats-live-vs {
    color: rgba(255,255,255,.26) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.stats-live-match-meta {
    display: flex;
    justify-content: center;
}

.stats-live-status-text {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(255,61,90,.08);
    color: #ff5069;
    font-size: 10px;
    font-weight: 800;
}

.stats-finished-status-text {
    color: rgba(255,255,255,.36);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.stats-live-match-action {
    display: flex;
    justify-content: flex-end;
}

.stats-live-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    color: rgba(255,255,255,.58);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    transition: .2s ease;
}

.stats-live-detail-link:hover {
    border-color: rgba(53,200,255,.30);
    color: #35c8ff;
    background: rgba(53,200,255,.05);
}

.stats-live-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 36px 20px;
    border: 1px dashed rgba(255,255,255,.09);
    border-radius: 20px;
    text-align: center;
}

.stats-live-empty-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgba(53,200,255,.07);
    color: #35c8ff;
    font-size: 26px;
}

.stats-live-empty h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
}

.stats-live-empty p {
    max-width: 480px;
    margin: 9px 0 18px;
    color: rgba(255,255,255,.42);
    font-size: 12px;
    line-height: 1.6;
}

.stats-live-empty-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(53,200,255,.28);
    border-radius: 10px;
    background: rgba(53,200,255,.07);
    color: #35c8ff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

@keyframes statsLivePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.8);
    }
}

@keyframes statsSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 991px) {

    .stats-live-scores-page {
        padding: 18px;
    }

    .stats-live-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-live-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .stats-live-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-live-match {
        grid-template-columns: 70px 1fr 96px;
        gap: 12px;
    }

    .stats-live-match-meta {
        justify-content: flex-end;
    }

    .stats-live-match-action {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }

    .stats-live-detail-link {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575px) {

    .stats-live-scores-page {
        padding: 14px;
    }

    .stats-live-header h1 {
        font-size: 32px;
    }

    .stats-live-header p {
        font-size: 12px;
    }

    .stats-live-header-actions {
        align-items: center;
    }

    .stats-live-updated {
        align-items: flex-start;
    }

    .stats-live-summary {
        gap: 8px;
    }

    .stats-live-summary-card {
        min-height: 72px;
        padding: 12px;
    }

    .stats-summary-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 15px;
    }

    .stats-summary-copy strong {
        font-size: 20px;
    }

    .stats-live-tabs {
        display: flex;
        width: 100%;
    }

    .stats-live-tabs button {
        flex: 1;
        justify-content: center;
        padding: 0 8px;
    }

    .stats-live-league-header {
        padding: 12px;
    }

    .stats-live-match {
        grid-template-columns: 58px 1fr 66px;
        gap: 8px;
        padding: 12px;
    }

    .stats-live-teams {
        grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
        gap: 6px;
    }

    .stats-live-team {
        gap: 6px;
    }

    .stats-live-team-name {
        font-size: 10px;
    }

    .stats-live-team-logo {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .stats-live-score strong {
        font-size: 18px;
    }

    .stats-live-status-text {
        font-size: 9px;
        padding: 5px 7px;
    }

    .stats-live-match-meta {
        display: none;
    }

    .stats-live-match-action {
        grid-column: 2 / -1;
    }
}






































/* =========================================================
   STATSHOMIE — MISSANIELLO
========================================================= */

.stats-rollover-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 26px 24px 60px;
    color: #fff;
} 

.stats-rollover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
    margin-bottom: 24px;
}

.stats-rollover-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #35c8ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.stats-rollover-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35c8ff;
    box-shadow: 0 0 0 5px rgba(53,200,255,.08);
}

.stats-rollover-header h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.stats-rollover-header p {
    max-width: 700px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.52);
    font-size: 13px;
    line-height: 1.65;
}

.stats-rollover-method {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: min(360px, 100%);
    padding: 15px;
    border: 1px solid rgba(53,200,255,.18);
    border-radius: 15px;
    background: rgba(53,200,255,.045);
    color: rgba(255,255,255,.70);
}

.stats-rollover-method > i {
    margin-top: 2px;
    color: #35c8ff;
    font-size: 16px;
}

.stats-rollover-method div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-rollover-method strong {
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}

.stats-rollover-method span {
    font-size: 10px;
    line-height: 1.6;
}

.stats-rollover-alert,
.stats-rollover-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 11px;
}

.stats-rollover-alert.success {
    border: 1px solid rgba(0,220,150,.16);
    background: rgba(0,220,150,.05);
    color: rgba(255,255,255,.78);
}

.stats-rollover-alert.success i {
    color: #00dc96;
}

.stats-rollover-alert.error,
.stats-rollover-warning {
    border: 1px solid rgba(255,61,90,.18);
    background: rgba(255,61,90,.055);
    color: rgba(255,255,255,.76);
}

.stats-rollover-alert.error i,
.stats-rollover-warning i {
    color: #ff3d5a;
}

.stats-rollover-panel,
.stats-rollover-active,
.stats-rollover-history-panel,
.stats-rollover-recent,
.stats-rollover-preview {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 19px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    box-shadow: 0 18px 55px rgba(0,0,0,.14);
}

.stats-rollover-panel,
.stats-rollover-active,
.stats-rollover-history-panel,
.stats-rollover-recent {
    margin-bottom: 18px;
}

.stats-rollover-panel-head,
.stats-rollover-active-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.stats-rollover-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #35c8ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.stats-rollover-panel-title i {
    font-size: 14px;
}

.stats-rollover-panel-head > div:first-child > span,
.stats-rollover-active-head > div:first-child > span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.stats-rollover-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.stats-rollover-field label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.stats-rollover-input-wrap {
    display: flex;
    align-items: center;
    min-height: 48px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: rgba(0,0,0,.16);
}

.stats-rollover-input-wrap:focus-within {
    border-color: rgba(53,200,255,.55);
    box-shadow: 0 0 0 3px rgba(53,200,255,.07);
}

.stats-rollover-input-wrap > span {
    display: grid;
    place-items: center;
    min-width: 38px;
    align-self: stretch;
    border-right: 1px solid rgba(255,255,255,.07);
    color: #35c8ff;
    font-weight: 850;
}

.stats-rollover-input-wrap input {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.stats-rollover-example-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 0 18px 17px;
    color: rgba(255,255,255,.36);
    font-size: 10px;
}

.stats-rollover-example-row .high {
    color: #35c8ff;
}

.stats-rollover-example-row .separator {
    margin: 0 6px;
}

.stats-rollover-secondary-button,
.stats-rollover-danger-button,
.stats-rollover-attach-button,
.stats-rollover-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    transition: .2s ease;
}

.stats-rollover-secondary-button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(53,200,255,.22);
    background: rgba(53,200,255,.05);
    color: #35c8ff;
}

.stats-rollover-secondary-button:hover,
.stats-rollover-attach-button:hover {
    background: rgba(53,200,255,.10);
    border-color: rgba(53,200,255,.40);
}

.stats-rollover-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.stats-rollover-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.018);
}

.stats-rollover-summary-card .icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: rgba(53,200,255,.08);
    color: #35c8ff;
}

.stats-rollover-summary-card div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stats-rollover-summary-card small {
    color: rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.stats-rollover-summary-card strong {
    font-size: 18px;
    font-weight: 900;
}

.stats-rollover-summary-card span:not(.icon) {
    color: rgba(255,255,255,.30);
    font-size: 9px;
}

.stats-rollover-live-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, .7fr)) minmax(250px, 1.8fr);
    gap: 9px;
    padding: 14px 18px;
}

.stats-rollover-live-metrics > div {
    min-height: 62px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
}

.stats-rollover-live-metrics small,
.stats-rollover-current-stake small,
.stats-rollover-preview small {
    display: block;
    color: rgba(255,255,255,.34);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.stats-rollover-live-metrics strong {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 900;
}

.stats-rollover-live-metrics .green {
    color: #00dc96;
}

.stats-rollover-live-metrics .red {
    color: #ff5069;
}

.progress-box .progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.progress-box .progress-copy strong {
    margin: 0;
    font-size: 11px;
}

.progress-box .progress-copy span {
    color: #35c8ff;
    font-size: 10px;
    font-weight: 850;
}

.stats-rollover-progress {
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.stats-rollover-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #35c8ff;
}

.stats-rollover-current-stake {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 18px 14px;
    padding: 18px;
    border: 1px solid rgba(53,200,255,.20);
    border-radius: 15px;
    background: radial-gradient(circle at 0 0, rgba(53,200,255,.11), transparent 45%), rgba(53,200,255,.035);
}

.stats-rollover-current-stake > div:first-child > strong {
    display: block;
    margin-top: 7px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 950;
    letter-spacing: -.04em;
}

.stats-rollover-current-stake > div:first-child > span {
    color: rgba(255,255,255,.40);
    font-size: 10px;
}

.stake-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 8px;
}

.stake-side div {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(0,0,0,.12);
}

.stake-side strong {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 900;
}

.stats-rollover-current-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 18px 14px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
}

.stats-rollover-step-copy {
    min-width: 0;
}

.stats-rollover-step-copy > div {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.stats-rollover-step-copy > div > span:last-child {
    color: rgba(255,255,255,.36);
    font-size: 9px;
}

.stats-rollover-step-copy > strong {
    display: block;
    margin-top: 6px;
    font-size: 11px;
}

.day-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 7px;
    background: rgba(53,200,255,.08);
    color: #35c8ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
}

.stats-rollover-attach-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(53,200,255,.22);
    background: rgba(53,200,255,.05);
    color: #35c8ff;
}

.stats-rollover-result-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 0 18px 18px;
}

.stats-rollover-result-actions > span {
    margin-right: auto;
    color: rgba(255,255,255,.36);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.stats-rollover-result-actions .result {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.stats-rollover-result-actions .win {
    border: 1px solid rgba(0,220,150,.18);
    background: rgba(0,220,150,.08);
    color: #00dc96;
}

.stats-rollover-result-actions .loss {
    border: 1px solid rgba(255,61,90,.18);
    background: rgba(255,61,90,.08);
    color: #ff5069;
}

.stats-rollover-result-actions .void {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.62);
}

.stats-rollover-preview {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 0;
    overflow: hidden;
    margin-bottom: 12px;
}

.stats-rollover-preview-main,
.stats-rollover-preview-item {
    padding: 17px;
}

.stats-rollover-preview-item {
    border-left: 1px solid rgba(255,255,255,.06);
}

.stats-rollover-preview-main strong {
    display: block;
    margin-top: 6px;
    color: #35c8ff;
    font-size: 29px;
    font-weight: 950;
}

.stats-rollover-preview-main span {
    color: rgba(255,255,255,.34);
    font-size: 9px;
}

.stats-rollover-preview-item strong {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    font-weight: 900;
}

.stats-rollover-warning div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-rollover-warning strong {
    font-size: 11px;
}

.stats-rollover-warning span {
    color: rgba(255,255,255,.45);
    font-size: 10px;
    line-height: 1.6;
}

.stats-rollover-start-button {
    width: 100%;
    min-height: 50px;
    margin-bottom: 18px;
    border: 0;
    background: #35c8ff;
    color: #06121a;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 12px 30px rgba(53,200,255,.14);
}

.stats-rollover-start-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.stats-rollover-steps-table-wrap {
    overflow-x: auto;
}

.stats-rollover-steps-table {
    width: 100%;
    min-width: 790px;
    border-collapse: collapse;
}

.stats-rollover-steps-table th,
.stats-rollover-steps-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    text-align: left;
    vertical-align: middle;
}

.stats-rollover-steps-table th {
    color: rgba(255,255,255,.30);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stats-rollover-steps-table td {
    color: rgba(255,255,255,.66);
    font-size: 10px;
    font-weight: 700;
}

.stats-rollover-steps-table tr.current td {
    background: rgba(53,200,255,.025);
}

.day-number {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.82);
    font-size: 9px;
    font-weight: 900;
}

.slip-linked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #35c8ff;
}

.slip-empty {
    color: rgba(255,255,255,.25);
}

.step-result {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .05em;
}

.step-result.pending {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.45);
}

.step-result.win {
    background: rgba(0,220,150,.08);
    color: #00dc96;
}

.step-result.loss {
    background: rgba(255,61,90,.08);
    color: #ff5069;
}

.step-result.void {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.54);
}

.stats-rollover-danger-button {
    min-height: 33px;
    padding: 0 11px;
    border: 1px solid rgba(255,61,90,.18);
    background: rgba(255,61,90,.06);
    color: #ff5069;
}

.stats-rollover-danger-button:hover {
    background: rgba(255,61,90,.10);
}

.stats-rollover-recent-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 18px 18px;
}

.stats-rollover-recent-card {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
}

.stats-rollover-recent-card > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-rollover-recent-card strong {
    font-size: 13px;
    font-weight: 900;
}

.stats-rollover-recent-card > div:first-child span {
    color: rgba(255,255,255,.35);
    font-size: 9px;
}

.stats-rollover-recent-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 9px;
}

.stats-rollover-recent-card small {
    color: rgba(255,255,255,.30);
    font-size: 8px;
}

.recent-status {
    display: inline-flex;
    width: max-content;
    margin-top: 9px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 7px !important;
    font-weight: 900;
    letter-spacing: .06em;
}

.recent-status.active {
    background: rgba(53,200,255,.08);
    color: #35c8ff !important;
}

.recent-status.completed {
    background: rgba(0,220,150,.08);
    color: #00dc96 !important;
}

.recent-status.stopped {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.44) !important;
}

.stats-rollover-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(6px);
}

.stats-rollover-modal {
    width: min(620px, 100%);
    max-height: min(80vh, 720px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: #07131c;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.stats-rollover-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 17px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.stats-rollover-modal-head span {
    color: #35c8ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.stats-rollover-modal-head h3 {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 900;
}

.stats-rollover-modal-head button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.65);
    font-size: 18px;
    cursor: pointer;
}

.stats-rollover-modal-body {
    max-height: calc(min(80vh, 720px) - 90px);
    overflow-y: auto;
    padding: 10px;
}

.stats-rollover-slip-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 7px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.stats-rollover-slip-option:hover {
    border-color: rgba(53,200,255,.25);
    background: rgba(53,200,255,.04);
}

.slip-option-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(53,200,255,.08);
    color: #35c8ff;
}

.slip-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slip-option-copy strong {
    font-size: 10px;
    font-weight: 850;
}

.slip-option-copy span {
    color: rgba(255,255,255,.34);
    font-size: 8px;
}

.stats-rollover-slip-option > i:last-child {
    color: rgba(255,255,255,.25);
}

.stats-rollover-no-slips {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 42px 20px;
    text-align: center;
}

.stats-rollover-no-slips i {
    color: #35c8ff;
    font-size: 28px;
}

.stats-rollover-no-slips strong {
    font-size: 12px;
}

.stats-rollover-no-slips span {
    max-width: 380px;
    color: rgba(255,255,255,.35);
    font-size: 9px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .stats-rollover-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stats-rollover-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-rollover-live-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stats-rollover-live-metrics .progress-box {
        grid-column: 1 / -1;
    }

    .stats-rollover-recent-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .stats-rollover-page {
        padding: 18px 14px 50px;
    }

    .stats-rollover-header {
        flex-direction: column;
    }

    .stats-rollover-method {
        width: 100%;
    }

    .stats-rollover-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-rollover-live-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-rollover-current-stake {
        flex-direction: column;
        align-items: stretch;
    }

    .stake-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stats-rollover-preview {
        grid-template-columns: 1fr 1fr;
    }

    .stats-rollover-preview-main {
        grid-column: 1 / -1;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .stats-rollover-preview-item:nth-child(3) {
        border-left: 0;
    }

    .stats-rollover-current-step {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-rollover-attach-button {
        width: 100%;
    }

    .stats-rollover-result-actions {
        flex-wrap: wrap;
    }

    .stats-rollover-result-actions > span {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .stats-rollover-result-actions .result {
        flex: 1;
    }

    .stats-rollover-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .stats-rollover-form-grid,
    .stats-rollover-summary-grid,
    .stats-rollover-live-metrics,
    .stats-rollover-recent-grid {
        grid-template-columns: 1fr;
    }

    .stats-rollover-live-metrics .progress-box {
        grid-column: auto;
    }

    .stats-rollover-preview {
        grid-template-columns: 1fr;
    }

    .stats-rollover-preview-item,
    .stats-rollover-preview-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.06);
    }

    .stake-side {
        grid-template-columns: 1fr;
    }
}



















/* =========================================================
   STATSHOMIE
   MISSANIELLO / ROLLOVER
========================================================= */

.shm-rollover-page {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px 24px 72px;
    color: #f5f8fc;
}

.shm-rollover-page *,
.shm-rollover-page *::before,
.shm-rollover-page *::after {
    box-sizing: border-box;
}

.shm-rollover-page a {
    color: inherit;
    text-decoration: none;
}

.shm-rollover-page button,
.shm-rollover-page input {
    font: inherit;
}

.shm-rollover-page button {
    cursor: pointer;
}

.shm-rollover-page input {
    outline: none;
}


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

.shm-rollover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.shm-rollover-header-copy {
    min-width: 0;
}

.shm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #48d3ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.shm-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48d3ff;
    box-shadow:
        0 0 0 5px rgba(72, 211, 255, .08),
        0 0 18px rgba(72, 211, 255, .36);
}

.shm-rollover-header h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 60px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 950;
}

.shm-rollover-header-copy p {
    max-width: 720px;
    margin: 12px 0 0;
    color: rgba(238, 245, 252, .43);
    font-size: 12px;
    line-height: 1.7;
}

.shm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 17px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(245, 249, 255, .43);
    font-size: 10px;
    font-weight: 800;
}

.shm-back-link:hover {
    color: #fff;
}


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

.shm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 900;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.shm-btn:hover {
    transform: translateY(-1px);
}

.shm-btn-primary {
    border-color: rgba(72, 211, 255, .34);
    background:
        linear-gradient(
            135deg,
            #21b9ee,
            #1c79ef
        );
    color: #fff;
    box-shadow:
        0 13px 35px rgba(28, 121, 239, .18);
}

.shm-btn-primary:hover {
    box-shadow:
        0 16px 42px rgba(28, 121, 239, .27);
}

.shm-btn-secondary {
    border-color: rgba(255, 255, 255, .075);
    background: rgba(255, 255, 255, .032);
    color: rgba(245, 249, 255, .73);
}

.shm-btn-secondary:hover {
    border-color: rgba(72, 211, 255, .2);
    background: rgba(72, 211, 255, .055);
    color: #fff;
}

.shm-btn-danger {
    border-color: rgba(255, 76, 100, .15);
    background: rgba(255, 76, 100, .045);
    color: #ff7187;
}

.shm-btn-danger:hover {
    border-color: rgba(255, 76, 100, .27);
    background: rgba(255, 76, 100, .08);
}


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

.shm-alert-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 15px;
}

.shm-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 10px;
}

.shm-alert-success {
    border: 1px solid rgba(0, 221, 149, .13);
    background: rgba(0, 221, 149, .04);
    color: rgba(245, 255, 251, .76);
}

.shm-alert-success i {
    color: #4ce0b2;
}

.shm-alert-error {
    border: 1px solid rgba(255, 76, 100, .15);
    background: rgba(255, 76, 100, .045);
    color: rgba(255, 247, 249, .76);
}

.shm-alert-error i {
    color: #ff6c85;
}


/* =========================================================
   SECTION / PANEL
========================================================= */

.shm-section,
.shm-panel,
.shm-progress-panel,
.shm-info-card {
    border: 1px solid rgba(255, 255, 255, .065);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .032),
            rgba(255, 255, 255, .013)
        );
    box-shadow:
        0 18px 70px rgba(0, 0, 0, .14);
}

.shm-section,
.shm-panel {
    border-radius: 18px;
}

.shm-section {
    overflow: hidden;
}

.shm-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 19px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.shm-section-label {
    display: block;
    margin-bottom: 5px;
    color: #43d1ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.shm-section-heading h2,
.shm-panel-header h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.025em;
}

.shm-section-heading p {
    margin: 6px 0 0;
    color: rgba(245, 249, 255, .33);
    font-size: 9px;
    line-height: 1.5;
}

.shm-section-count {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    color: rgba(245, 249, 255, .43);
    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   LIBRARY
========================================================= */

.shm-rollover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 15px;
}

.shm-rollover-card {
    display: block;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 15px;
    background: rgba(0, 0, 0, .1);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.shm-rollover-card:hover {
    transform: translateY(-2px);
    border-color: rgba(72, 211, 255, .21);
    background: rgba(72, 211, 255, .025);
}

.shm-card-top,
.shm-card-brand,
.shm-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shm-card-brand {
    justify-content: flex-start;
}

.shm-card-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: rgba(72, 211, 255, .08);
    color: #48d3ff;
}

.shm-card-brand div:last-child {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.shm-card-brand span,
.shm-card-brand strong {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.shm-card-brand span {
    color: rgba(245, 249, 255, .28);
}

.shm-card-brand strong {
    color: rgba(245, 249, 255, .6);
}

.shm-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.shm-status.active {
    border: 1px solid rgba(72, 211, 255, .16);
    background: rgba(72, 211, 255, .045);
    color: #62dcff;
}

.shm-status.completed {
    border: 1px solid rgba(0, 221, 149, .15);
    background: rgba(0, 221, 149, .04);
    color: #5de1b7;
}

.shm-status.stopped {
    border: 1px solid rgba(255, 181, 65, .15);
    background: rgba(255, 181, 65, .04);
    color: #efbd68;
}

.shm-cycle-name {
    margin-top: 15px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.018em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-cycle-financials {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 10px;
    margin-top: 18px;
}

.shm-financial-block {
    min-width: 0;
}

.shm-financial-block.target {
    text-align: right;
}

.shm-financial-label,
.shm-financial-block strong,
.shm-summary-card span,
.shm-summary-card strong {
    display: block;
}

.shm-financial-label {
    color: rgba(245, 249, 255, .29);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.shm-financial-block strong {
    margin-top: 5px;
    color: #fff;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -.035em;
}

.shm-financial-arrow {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-bottom: 1px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .3);
}

.shm-cycle-progress {
    margin-top: 18px;
}

.shm-cycle-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: rgba(245, 249, 255, .31);
    font-size: 8px;
    font-weight: 800;
}

.shm-cycle-progress-head strong {
    color: #53d8ff;
}

.shm-progress-track {
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
}

.shm-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #32caff,
            #716fff
        );
}

.shm-cycle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 12px;
    margin-top: 15px;
    color: rgba(245, 249, 255, .33);
    font-size: 8px;
}

.shm-cycle-meta i {
    margin-right: 4px;
    color: rgba(72, 211, 255, .68);
}

.shm-card-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: rgba(245, 249, 255, .35);
    font-size: 8px;
}

.shm-open-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #55d8ff;
    font-weight: 850;
}

.shm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 54px 20px;
    text-align: center;
}

.shm-empty-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 15px;
    background: rgba(72, 211, 255, .06);
    color: #48d3ff;
    font-size: 20px;
}

.shm-empty-state h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
}

.shm-empty-state p {
    max-width: 420px;
    margin: 7px 0 15px;
    color: rgba(245, 249, 255, .34);
    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   BUILDER
========================================================= */

.shm-builder-header {
    align-items: flex-end;
}

.shm-builder-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    padding: 13px;
    border: 1px solid rgba(72, 211, 255, .12);
    border-radius: 13px;
    background: rgba(72, 211, 255, .025);
}

.shm-builder-badge-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(72, 211, 255, .07);
    color: #48d3ff;
}

.shm-builder-badge div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shm-builder-badge strong {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.shm-builder-badge span {
    color: rgba(245, 249, 255, .31);
    font-size: 8px;
    line-height: 1.45;
}

.shm-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(390px, .86fr);
    gap: 13px;
    align-items: start;
}

.shm-panel {
    overflow: hidden;
}

.shm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.shm-mode-area {
    padding: 17px 18px 0;
}

.shm-field-heading {
    margin-bottom: 10px;
}

.shm-label-title {
    color: rgba(245, 249, 255, .65);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.shm-field-heading small {
    display: block;
    margin-top: 5px;
    color: rgba(245, 249, 255, .3);
    font-size: 9px;
}

.shm-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.shm-mode-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 13px;
    background: rgba(255, 255, 255, .018);
    color: rgba(245, 249, 255, .49);
    text-align: left;
    transition: .18s ease;
}

.shm-mode-option:hover {
    border-color: rgba(72, 211, 255, .16);
    background: rgba(72, 211, 255, .025);
}

.shm-mode-option.active {
    border-color: rgba(72, 211, 255, .24);
    background:
        linear-gradient(
            180deg,
            rgba(72, 211, 255, .065),
            rgba(72, 211, 255, .018)
        );
    color: #fff;
}

.shm-mode-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .35);
}

.shm-mode-option.active .shm-mode-icon {
    background: rgba(72, 211, 255, .08);
    color: #48d3ff;
}

.shm-mode-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.shm-mode-copy strong {
    font-size: 10px;
    font-weight: 900;
}

.shm-mode-copy small {
    color: rgba(245, 249, 255, .3);
    font-size: 8px;
}

.shm-mode-check {
    opacity: 0;
    color: #48d3ff;
}

.shm-mode-option.active .shm-mode-check {
    opacity: 1;
}

.shm-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    padding: 17px 18px 0;
}

.shm-form-field {
    min-width: 0;
}

.shm-form-field.full {
    grid-column: 1 / -1;
}

.shm-field-label-row {
    margin-bottom: 7px;
}

.shm-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    cursor: default;
}

.shm-label-meta {
    flex: 0 0 auto;
    color: rgba(245, 249, 255, .27);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shm-label-meta.fixed {
    color: #55d8ff;
}

.shm-label-meta.derived {
    color: #9e8bff;
}

.shm-text-input,
.shm-money-input,
.shm-simple-input {
    width: 100%;
    min-height: 47px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .075);
    background: rgba(0, 0, 0, .12);
    transition: .18s ease;
}

.shm-text-input:focus,
.shm-money-input:focus-within,
.shm-simple-input:focus-within {
    border-color: rgba(72, 211, 255, .4);
    box-shadow: 0 0 0 3px rgba(72, 211, 255, .045);
}

.shm-text-input {
    display: block;
    padding: 0 13px;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
}

.shm-text-input::placeholder {
    color: rgba(245, 249, 255, .2);
}

.shm-money-input,
.shm-simple-input {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.shm-currency,
.shm-simple-input > i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 47px;
    flex: 0 0 40px;
    border-right: 1px solid rgba(255, 255, 255, .055);
    color: #48d3ff;
}

.shm-simple-input > i {
    font-size: 12px;
}

.shm-money-input input,
.shm-simple-input input {
    width: 100%;
    min-width: 0;
    height: 47px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.shm-money-input input[readonly] {
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .012);
}

.shm-field-help {
    display: block;
    margin-top: 6px;
    color: rgba(245, 249, 255, .25);
    font-size: 8px;
    line-height: 1.45;
}

.shm-builder-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 15px 18px 18px;
    padding: 11px 12px;
    border: 1px solid rgba(72, 211, 255, .09);
    border-radius: 11px;
    background: rgba(72, 211, 255, .025);
    color: rgba(245, 249, 255, .35);
    font-size: 8px;
    line-height: 1.55;
}

.shm-builder-note i {
    color: #48d3ff;
}


/* =========================================================
   PREVIEW
========================================================= */

.shm-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(72, 211, 255, .12);
    background: rgba(72, 211, 255, .035);
    color: #61dcff;
    font-size: 8px;
    font-weight: 850;
}

.shm-live-badge span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #48d3ff;
    box-shadow: 0 0 9px rgba(72, 211, 255, .55);
}

.shm-financial-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 17px 18px 0;
}

.shm-summary-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 13px;
    background: rgba(0, 0, 0, .1);
}

.shm-summary-card.target {
    border-color: rgba(72, 211, 255, .11);
    background: rgba(72, 211, 255, .025);
}

.shm-summary-card span {
    color: rgba(245, 249, 255, .31);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shm-summary-card strong {
    margin-top: 7px;
    overflow: hidden;
    color: #fff;
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 650;
    letter-spacing: -.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-summary-connector {
    display: grid;
    place-items: center;
    width: 34px;
    align-self: center;
    color: rgba(255, 255, 255, .26);
}

.shm-growth-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 18px 0;
    padding: 12px 13px;
    border: 1px solid rgba(72, 211, 255, .09);
    border-radius: 12px;
    background: rgba(72, 211, 255, .026);
}

.shm-growth-banner > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shm-growth-banner span {
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
    text-transform: uppercase;
}

.shm-growth-banner strong {
    color: #5ad9ff;
    font-size: 16px;
    font-weight: 900;
}

.shm-growth-multiplier {
    text-align: right;
}

.shm-growth-multiplier small {
    display: block;
    color: rgba(245, 249, 255, .24);
    font-size: 7px;
    letter-spacing: .08em;
}

.shm-growth-multiplier strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 15px;
}

.shm-preview-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px 18px 0;
}

.shm-preview-metric {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 12px;
    background: rgba(255, 255, 255, .014);
}

.shm-preview-metric span {
    display: block;
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
    font-weight: 800;
}

.shm-preview-metric strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-preview-metric small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: rgba(245, 249, 255, .23);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-risk-summary {
    padding: 15px 18px 0;
}

.shm-risk-summary-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.shm-risk-summary-head div {
    display: flex;
    gap: 5px;
    align-items: center;
}

.shm-risk-summary-head div span,
.shm-risk-summary-head > span {
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
}

.shm-risk-summary-head div strong {
    color: #fff;
    font-size: 8px;
    font-weight: 900;
}

.shm-risk-bar {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
}

.shm-risk-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #35caff,
            #756eff
        );
}

.shm-start-btn {
    width: calc(100% - 36px);
    margin: 16px 18px 0;
}

.shm-start-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px 17px;
    color: rgba(245, 249, 255, .22);
    font-size: 8px;
}

.shm-start-caption i {
    color: #48d3ff;
}

.shm-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 380px;
    padding: 35px;
    text-align: center;
}

.shm-preview-empty-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    border-radius: 15px;
    background: rgba(72, 211, 255, .05);
    color: #48d3ff;
    font-size: 19px;
}

.shm-preview-empty h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
}

.shm-preview-empty p {
    max-width: 340px;
    margin: 7px 0 0;
    color: rgba(245, 249, 255, .3);
    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   DASHBOARD
========================================================= */

.shm-dashboard-header {
    align-items: flex-end;
}

.shm-dashboard-actions {
    display: flex;
    gap: 8px;
}

.shm-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.shm-dashboard-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .017);
}

.shm-dashboard-metric-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(72, 211, 255, .07);
    color: #48d3ff;
}

.shm-dashboard-metric > div:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.shm-dashboard-metric span {
    color: rgba(245, 249, 255, .27);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.shm-dashboard-metric strong {
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-dashboard-metric small {
    overflow: hidden;
    color: rgba(245, 249, 255, .24);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-progress-panel {
    padding: 14px 16px 16px;
    margin-bottom: 13px;
    border-radius: 15px;
}

.shm-progress-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.shm-progress-header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shm-progress-header strong {
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.shm-progress-header > span {
    color: #53d8ff;
    font-size: 10px;
    font-weight: 900;
}

.shm-progress-track.large {
    height: 6px;
}


/* =========================================================
   SLIP STUDIO
========================================================= */

.shm-slip-studio {
    margin-bottom: 13px;
    border-color: rgba(72, 211, 255, .12);
}

.shm-slip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.shm-slip-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
}

.shm-slip-header p {
    max-width: 620px;
    margin: 5px 0 0;
    color: rgba(245, 249, 255, .3);
    font-size: 9px;
    line-height: 1.55;
}

.shm-close-button {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .53);
}

.shm-close-button:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.shm-slip-options {
    display: grid;
    gap: 8px;
    padding: 13px;
}

.shm-slip-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: rgba(0, 0, 0, .08);
    color: #fff;
    text-align: left;
    transition: .18s ease;
}

.shm-slip-option:hover {
    border-color: rgba(72, 211, 255, .2);
    background: rgba(72, 211, 255, .025);
}

.shm-slip-option.external {
    border-color: rgba(157, 117, 255, .11);
    background: rgba(157, 117, 255, .02);
}

.shm-slip-option-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: rgba(72, 211, 255, .07);
    color: #48d3ff;
}

.shm-slip-option.external .shm-slip-option-icon {
    background: rgba(157, 117, 255, .07);
    color: #b495ff;
}

.shm-slip-option-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.shm-slip-option-copy strong {
    font-size: 10px;
    font-weight: 900;
}

.shm-slip-option-copy small {
    color: rgba(245, 249, 255, .3);
    font-size: 8px;
}

.shm-slip-option > i:last-child {
    color: rgba(255, 255, 255, .28);
}

.shm-slip-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 28px 15px;
    text-align: center;
}

.shm-slip-empty-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 5px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .42);
}

.shm-slip-empty strong {
    font-size: 11px;
    font-weight: 900;
}

.shm-slip-empty span {
    max-width: 390px;
    margin-bottom: 8px;
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
    line-height: 1.55;
}

.shm-external-slip-form {
    display: grid;
    gap: 14px;
    padding: 17px 18px 18px;
}

.shm-external-slip-form h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
}

.shm-external-slip-form p {
    margin: 5px 0 0;
    color: rgba(245, 249, 255, .29);
    font-size: 9px;
}

.shm-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


/* =========================================================
   CURRENT POSITION
========================================================= */

.shm-current-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(290px, .58fr);
    gap: 13px;
    margin-bottom: 13px;
}

.shm-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(72, 211, 255, .13);
    border-radius: 999px;
    background: rgba(72, 211, 255, .04);
    color: #5ddaff;
    font-size: 8px;
    font-weight: 900;
}

.shm-current-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    gap: 16px;
    align-items: end;
    padding: 18px;
}

.shm-stake-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shm-stake-display span {
    color: rgba(245, 249, 255, .29);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shm-stake-display strong {
    color: #fff;
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.06em;
}

.shm-stake-display small {
    color: rgba(245, 249, 255, .25);
    font-size: 8px;
}

.shm-current-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.shm-current-stats div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 11px;
    background: rgba(255, 255, 255, .014);
}

.shm-current-stats span {
    color: rgba(245, 249, 255, .25);
    font-size: 7px;
    text-transform: uppercase;
}

.shm-current-stats strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-current-slip {
    margin: 0 18px 14px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 12px;
    background: rgba(0, 0, 0, .08);
}

.shm-current-slip-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.shm-attached-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #58dfb3;
}

.shm-attached-slip,
.shm-unattached-slip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shm-attached-slip > div:first-child,
.shm-unattached-slip > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shm-attached-slip strong,
.shm-unattached-slip strong {
    overflow: hidden;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shm-attached-slip small,
.shm-unattached-slip span {
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
}

.shm-attached-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.shm-icon-danger {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 76, 100, .045);
    color: #ff7187;
}

.shm-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 18px 18px;
}

.shm-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .055);
    background: transparent;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.shm-result-win {
    background: rgba(0, 221, 149, .04);
    color: #5de1b6;
}

.shm-result-loss {
    background: rgba(255, 76, 100, .04);
    color: #ff7187;
}

.shm-result-void {
    background: rgba(255, 255, 255, .018);
    color: rgba(255, 255, 255, .48);
}

.shm-result:disabled,
.shm-result[disabled] {
    opacity: .28;
    cursor: not-allowed;
}

.shm-next-card {
    height: 100%;
}

.shm-engine-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.shm-engine-rule:last-child {
    border-bottom: 0;
}

.shm-engine-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: rgba(72, 211, 255, .06);
    color: #48d3ff;
}

.shm-engine-rule strong {
    display: block;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.shm-engine-rule p {
    margin: 4px 0 0;
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
    line-height: 1.55;
}


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

.shm-closed-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    padding: 15px;
    border-radius: 15px;
}

.shm-closed-panel.success {
    border: 1px solid rgba(0, 221, 149, .13);
    background: rgba(0, 221, 149, .035);
}

.shm-closed-panel.stopped {
    border: 1px solid rgba(255, 181, 65, .13);
    background: rgba(255, 181, 65, .035);
}

.shm-closed-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
}

.shm-closed-panel.success .shm-closed-icon {
    color: #5be0b5;
}

.shm-closed-panel.stopped .shm-closed-icon {
    color: #f1bf6c;
}

.shm-closed-panel > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shm-closed-panel > div:last-child > span {
    color: rgba(245, 249, 255, .27);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.shm-closed-panel strong {
    color: #fff;
    font-size: 21px;
    font-weight: 950;
}

.shm-closed-panel p {
    margin: 0;
    color: rgba(245, 249, 255, .3);
    font-size: 8px;
}


/* =========================================================
   SCHEDULE
========================================================= */

.shm-schedule-panel {
    overflow: hidden;
    margin-bottom: 13px;
}

.shm-schedule-scroll {
    overflow-x: auto;
}

.shm-schedule {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.shm-schedule th,
.shm-schedule td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    text-align: left;
    white-space: nowrap;
}

.shm-schedule th {
    color: rgba(245, 249, 255, .23);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shm-schedule td {
    color: rgba(245, 249, 255, .54);
    font-size: 8px;
}

.shm-schedule tr.current {
    background: rgba(72, 211, 255, .025);
}

.shm-schedule-day {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
}

.shm-schedule-slip {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shm-schedule-slip strong {
    color: rgba(255, 255, 255, .82);
    font-size: 8px;
    font-weight: 850;
}

.shm-schedule-slip span,
.shm-muted {
    color: rgba(245, 249, 255, .25);
    font-size: 7px;
}

.shm-result-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
}

.shm-result-pill.pending {
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .4);
}

.shm-result-pill.win {
    border: 1px solid rgba(0, 221, 149, .14);
    background: rgba(0, 221, 149, .04);
    color: #5be0b5;
}

.shm-result-pill.loss {
    border: 1px solid rgba(255, 76, 100, .14);
    background: rgba(255, 76, 100, .04);
    color: #ff7187;
}

.shm-result-pill.void {
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .48);
}

.shm-table-action {
    min-height: 29px;
    padding: 0 9px;
    border: 1px solid rgba(72, 211, 255, .13);
    border-radius: 8px;
    background: rgba(72, 211, 255, .035);
    color: #59d9ff;
    font-size: 7px;
    font-weight: 900;
}


/* =========================================================
   INFORMATION
========================================================= */

.shm-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.shm-info-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    border-radius: 15px;
}

.shm-info-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(72, 211, 255, .06);
    color: #48d3ff;
}

.shm-info-card h3 {
    margin: 1px 0 5px;
    font-size: 11px;
    font-weight: 900;
}

.shm-info-card p {
    margin: 0;
    color: rgba(245, 249, 255, .28);
    font-size: 8px;
    line-height: 1.6;
}


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

.shm-spin {
    animation: shm-spin .8s linear infinite;
}

@keyframes shm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

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

    .shm-builder-layout {
        grid-template-columns: 1fr;
    }

    .shm-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shm-current-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {

    .shm-rollover-page {
        padding:
            17px
            11px
            55px;
    }

    .shm-rollover-header,
    .shm-builder-header,
    .shm-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .shm-rollover-header h1 {
        font-size: 38px;
    }

    .shm-rollover-header .shm-btn {
        width: 100%;
    }

    .shm-builder-badge {
        min-width: 0;
    }

    .shm-rollover-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .shm-section-heading,
    .shm-panel-header,
    .shm-slip-header {
        padding: 15px;
    }

    .shm-mode-switch,
    .shm-input-grid,
    .shm-preview-metrics,
    .shm-info-grid {
        grid-template-columns: 1fr;
    }

    .shm-form-field.full {
        grid-column: auto;
    }

    .shm-mode-area,
    .shm-input-grid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .shm-builder-note {
        margin-left: 15px;
        margin-right: 15px;
    }

    .shm-financial-summary {
        padding-left: 15px;
        padding-right: 15px;
    }

    .shm-summary-card strong {
        font-size: 22px;
    }

    .shm-growth-banner,
    .shm-risk-summary {
        margin-left: 15px;
        margin-right: 15px;
    }

    .shm-preview-metrics {
        padding-left: 15px;
        padding-right: 15px;
    }

    .shm-start-btn {
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }

    .shm-dashboard-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .shm-dashboard-actions {
        width: 100%;
    }

    .shm-dashboard-actions .shm-btn {
        flex: 1;
    }

    .shm-current-main {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .shm-attached-slip,
    .shm-unattached-slip {
        align-items: flex-start;
        flex-direction: column;
    }

    .shm-attached-actions {
        width: 100%;
    }

    .shm-attached-actions .shm-btn {
        flex: 1;
    }

    .shm-unattached-slip > .shm-btn {
        width: 100%;
    }

}

@media (max-width: 430px) {

    .shm-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .shm-cycle-financials {
        gap: 7px;
    }

    .shm-financial-block strong {
        font-size: 15px;
    }

    .shm-summary-card strong {
        font-size: 20px;
    }

    .shm-result {
        min-height: 40px;
    }

}
















/* ================================================================
   STATSHOMIE MISSANIELLO — COMPACT PREMIUM DASHBOARD
   Same StatsHomie theme.
   Smaller, tighter, denser and more visual.
================================================================ */

.shd2-dashboard {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 18px 34px;
    color: #f5f8ff;
}

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

.shd2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.shd2-header-copy {
    min-width: 0;
}

.shd2-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: rgba(245,249,255,.42);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: color .15s ease;
}

.shd2-back-link:hover {
    color: #ffffff;
}

.shd2-brand-line,
.shd2-kicker,
.shd2-modal-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(130,205,255,.72);
}

.shd2-brand-dot,
.shd2-modal-kicker span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #51c8ff;
    box-shadow: 0 0 12px rgba(81,200,255,.55);
}

.shd2-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.shd2-title-wrap h1 {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 27px);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 760;
}

.shd2-title-wrap p {
    margin: 5px 0 0;
    color: rgba(245,249,255,.38);
    font-size: 10px;
}

.shd2-title-wrap p span {
    margin: 0 4px;
    color: rgba(245,249,255,.20);
}

.shd2-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
}

.shd2-status span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.shd2-status.active {
    color: #68e7a6;
}

.shd2-status.completed {
    color: #7ccaff;
}

.shd2-status.stopped {
    color: #ff8d98;
}

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

.shd2-header-actions {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.shd2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.shd2-btn:hover {
    transform: translateY(-1px);
}

.shd2-btn-primary {
    color: #06101a;
    background: #67d4ff;
}

.shd2-btn-primary:hover {
    color: #06101a;
    background: #82dcff;
}

.shd2-btn-ghost {
    color: #e6eef9;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

.shd2-btn-ghost:hover {
    background: rgba(255,255,255,.07);
}

.shd2-btn-stop {
    color: #ff9ca6;
    background: rgba(255,89,107,.065);
    border-color: rgba(255,89,107,.16);
}

.shd2-btn-stop:hover {
    background: rgba(255,89,107,.11);
}

.shd2-btn.compact {
    min-height: 30px;
    padding: 0 9px;
    font-size: 8px;
}

.shd2-btn.full {
    width: 100%;
}

/* ================================================================
   FEEDBACK
================================================================ */

.shd2-feedback {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.shd2-feedback-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 9px;
    border: 1px solid rgba(255,255,255,.06);
}

.shd2-feedback-item.success {
    background: rgba(84,221,155,.065);
    color: #94edbd;
}

.shd2-feedback-item.error {
    background: rgba(255,90,106,.065);
    color: #ffacb5;
}

/* ================================================================
   OVERVIEW
================================================================ */

.shd2-overview-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr .85fr;
    gap: 8px;
    margin-bottom: 9px;
}

.shd2-wallet-card,
.shd2-progress-card,
.shd2-stats-card,
.shd2-action-card,
.shd2-days-panel,
.shd2-protection-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 13px;
    box-shadow:
        0 10px 30px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.018);
}

/* ================================================================
   OVERVIEW CARD CONTENT
================================================================ */

.shd2-wallet-card,
.shd2-progress-card {
    padding: 13px;
}

.shd2-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(245,249,255,.34);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.shd2-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #8ff2ba;
    background: rgba(80,221,150,.06);
    border: 1px solid rgba(80,221,150,.10);
    letter-spacing: .03em;
}

.shd2-card-chip.blue {
    color: #8bdcff;
    background: rgba(88,202,255,.06);
    border-color: rgba(88,202,255,.10);
}

/* ================================================================
   WALLET
================================================================ */

.shd2-wallet-amount {
    display: block;
    margin-top: 9px;
    font-size: clamp(25px, 3vw, 33px);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 760;
}

.shd2-wallet-change {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
    font-size: 9px;
    font-weight: 800;
}

.shd2-wallet-change small {
    color: rgba(245,249,255,.30);
    font-weight: 600;
}

.shd2-wallet-change.positive {
    color: #81eeb0;
}

.shd2-wallet-change.negative {
    color: #ff8f9b;
}

.shd2-wallet-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.shd2-wallet-line div {
    display: grid;
    gap: 3px;
}

.shd2-wallet-line span,
.shd2-progress-foot span,
.shd2-mini-data span,
.shd2-day-finance span,
.shd2-stat-box span {
    color: rgba(245,249,255,.29);
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.shd2-wallet-line strong {
    font-size: 11px;
    font-weight: 750;
}

/* ================================================================
   PROGRESS
================================================================ */

.shd2-progress-big {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 17px;
}

.shd2-progress-big strong {
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 760;
}

.shd2-progress-big span {
    color: rgba(245,249,255,.36);
    font-size: 9px;
    margin-bottom: 2px;
}

.shd2-progress-track {
    height: 6px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
}

.shd2-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #4fc8ff,
        #8b7cff
    );
    box-shadow: 0 0 18px rgba(79,200,255,.24);
}

.shd2-progress-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

/* ================================================================
   RESULT STATS
================================================================ */

.shd2-stats-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    background-color: rgba(255,255,255,.055);
}

.shd2-stat-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 68px;
    padding: 11px;
    background: rgba(10,14,24,.91);
}

.shd2-stat-box strong {
    margin-top: 7px;
    font-size: 18px;
    letter-spacing: -.035em;
    font-weight: 760;
}

.shd2-stat-box.loss strong {
    color: #ff7f8c;
}

.shd2-stat-box.void strong {
    color: #b5b7c7;
}

.shd2-stat-box.protected strong {
    font-size: 12px;
    color: #9af2c3;
}

/* ================================================================
   TODAY'S MOVE
================================================================ */

.shd2-today {
    margin-bottom: 9px;
    padding: 14px;
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(90,194,255,.085),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(17,26,43,.98),
            rgba(11,16,27,.98)
        );

    border: 1px solid rgba(107,207,255,.11);

    box-shadow:
        0 16px 48px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.018);
}

.shd2-today-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 11px;
}

.shd2-today-heading h2,
.shd2-panel-heading h2,
.shd2-external-form h3,
.shd2-slip-modal h2 {
    margin: 4px 0 0;
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 750;
}

.shd2-today-heading p,
.shd2-panel-heading p,
.shd2-external-form p,
.shd2-slip-modal-head p {
    margin: 4px 0 0;
    color: rgba(245,249,255,.34);
    font-size: 9px;
    line-height: 1.45;
}

.shd2-day-counter {
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.065);
}

.shd2-day-counter strong {
    font-size: 15px;
}

.shd2-day-counter span {
    color: rgba(245,249,255,.27);
    font-size: 9px;
}

/* ================================================================
   TODAY ACTION GRID
================================================================ */

.shd2-action-grid {
    display: grid;
    grid-template-columns: .82fr 1.16fr .95fr;
    gap: 8px;
}

.shd2-action-card {
    padding: 12px;
    border-radius: 11px;
    background: rgba(6,11,21,.66);
}

.shd2-action-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    color: rgba(245,249,255,.38);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.shd2-action-card-head > i {
    color: #78d8ff;
}

.shd2-action-card.stake .shd2-action-card-head > i {
    color: #ffd36a;
}

.shd2-action-card.result .shd2-action-card-head > i {
    color: #c8b7ff;
}

/* ================================================================
   STAKE
================================================================ */

.shd2-stake-amount {
    display: block;
    margin-top: 13px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 760;
}

.shd2-action-note {
    display: block;
    margin-top: 5px;
    color: rgba(245,249,255,.28);
    font-size: 8px;
}

.shd2-mini-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 13px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.shd2-mini-data div {
    display: grid;
    gap: 3px;
}

.shd2-mini-data strong {
    font-size: 10px;
    font-weight: 750;
}

/* ================================================================
   SLIP
================================================================ */

.shd2-small-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
}

.shd2-small-status.attached {
    color: #86efb5;
}

.shd2-small-status.waiting {
    color: #ffca71;
}

.shd2-attached-slip,
.shd2-missing-slip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 39px;
}

.shd2-attached-slip-icon,
.shd2-missing-slip-icon {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(75,202,255,.08);
    color: #80dfff;
}

.shd2-missing-slip-icon {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.37);
}

.shd2-attached-slip-copy,
.shd2-missing-slip > div:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.shd2-attached-slip-copy strong,
.shd2-missing-slip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 750;
}

.shd2-attached-slip-copy span,
.shd2-missing-slip span {
    color: rgba(245,249,255,.28);
    font-size: 8px;
}

.shd2-slip-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}

.shd2-icon-btn,
.shd2-close-btn {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    color: #eaf1fb;
    cursor: pointer;
}

.shd2-icon-btn.danger {
    color: #ff8f9d;
}

.shd2-missing-slip {
    margin-top: 9px;
}

.shd2-missing-slip + .shd2-btn {
    margin-top: 8px;
}

/* ================================================================
   RESULTS
================================================================ */

.shd2-result-help {
    margin: 10px 0 8px;
    color: rgba(245,249,255,.31);
    font-size: 8px;
    line-height: 1.4;
}

.shd2-result-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.shd2-result-button {
    min-height: 39px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 900;
    font-size: 8px;
    border: 1px solid transparent;
    transition:
        transform .15s ease,
        opacity .15s ease;
}

.shd2-result-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.shd2-result-button:disabled {
    opacity: .27;
    cursor: not-allowed;
}

.shd2-result-button i {
    font-size: 12px;
}

.shd2-result-button.win {
    color: #8df0b8;
    background: rgba(83,218,145,.07);
    border-color: rgba(83,218,145,.13);
}

.shd2-result-button.loss {
    color: #ff8897;
    background: rgba(255,88,106,.07);
    border-color: rgba(255,88,106,.13);
}

.shd2-result-button.void {
    color: #c4c6d3;
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.065);
}

.shd2-disabled-note {
    display: block;
    margin-top: 5px;
    text-align: center;
    color: rgba(255,255,255,.23);
    font-size: 7px;
}

/* ================================================================
   FINISH STATE
================================================================ */

.shd2-finish-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}

.shd2-finish-card.completed {
    background: rgba(74,220,150,.045);
}

.shd2-finish-card.stopped {
    background: rgba(255,80,101,.04);
}

.shd2-finish-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    font-size: 17px;
}

.shd2-finish-card.completed .shd2-finish-icon {
    color: #8df0b8;
}

.shd2-finish-card.stopped .shd2-finish-icon {
    color: #ff8a98;
}

.shd2-finish-card > div:last-child > span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
    color: rgba(245,249,255,.35);
}

.shd2-finish-card h2 {
    margin: 4px 0 1px;
    font-size: 21px;
    letter-spacing: -.035em;
}

.shd2-finish-card p {
    margin: 0;
    color: rgba(245,249,255,.31);
    font-size: 9px;
}

/* ================================================================
   EXECUTION HISTORY
================================================================ */

.shd2-days-panel {
    padding: 13px;
}

.shd2-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 9px;
}

.shd2-day-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    color: rgba(245,249,255,.28);
    font-size: 7px;
}

.shd2-day-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.shd2-day-legend b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.shd2-day-legend b.win {
    background: #76e7a4;
}

.shd2-day-legend b.loss {
    background: #ff7f8d;
}

.shd2-day-legend b.void {
    background: #aaaebe;
}

.shd2-days-list {
    display: grid;
    gap: 4px;
}

.shd2-day-row {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,.018);
    border: 1px solid transparent;
}

.shd2-day-row:hover {
    background: rgba(255,255,255,.032);
    border-color: rgba(255,255,255,.055);
}

.shd2-day-row.current {
    background: rgba(78,202,255,.045);
    border-color: rgba(78,202,255,.11);
}

.shd2-day-number {
    display: grid;
    gap: 2px;
}

.shd2-day-number strong {
    font-size: 13px;
    letter-spacing: -.025em;
}

.shd2-day-number span {
    color: #74d7ff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .09em;
}

.shd2-day-content {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.shd2-day-main {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.shd2-day-slip-icon {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.30);
}

.shd2-day-slip-icon.filled {
    background: rgba(82,202,255,.07);
    color: #7edcff;
}

.shd2-day-main > div:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.shd2-day-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 750;
}

.shd2-day-main span {
    color: rgba(245,249,255,.27);
    font-size: 7px;
}

.shd2-day-finance {
    display: grid;
    grid-template-columns: repeat(3, minmax(55px, 1fr));
    gap: 8px;
}

.shd2-day-finance div {
    display: grid;
    gap: 2px;
}

.shd2-day-finance strong {
    font-size: 8px;
    font-weight: 750;
}

.shd2-day-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.shd2-result-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 49px;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .06em;
    border: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.34);
}

.shd2-result-pill.win {
    color: #85edb1;
    background: rgba(77,214,140,.06);
    border-color: rgba(77,214,140,.11);
}

.shd2-result-pill.loss {
    color: #ff8c98;
    background: rgba(255,85,104,.06);
    border-color: rgba(255,85,104,.11);
}

.shd2-result-pill.void {
    color: #c1c3cf;
}

.shd2-result-pill.pending {
    color: #f0c36f;
    background: rgba(242,184,75,.06);
    border-color: rgba(242,184,75,.11);
}

.shd2-timeline-button {
    border: 0;
    background: transparent;
    color: #7dd8ff;
    font-size: 7px;
    font-weight: 800;
    cursor: pointer;
}

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

.shd2-protection-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 8px;
}

.shd2-protection-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px;
    border-radius: 10px;
}

.shd2-protection-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 8px;
    color: #88f0b6;
    background: rgba(86,219,148,.06);
}

.shd2-protection-icon.blue {
    color: #85dcff;
    background: rgba(80,199,255,.06);
}

.shd2-protection-icon.violet {
    color: #c5b8ff;
    background: rgba(141,111,255,.06);
}

.shd2-protection-card > div:last-child {
    display: grid;
    gap: 2px;
}

.shd2-protection-card span {
    color: rgba(245,249,255,.28);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .09em;
}

.shd2-protection-card strong {
    font-size: 13px;
    font-weight: 760;
}

.shd2-protection-card small {
    color: rgba(245,249,255,.25);
    font-size: 7px;
    line-height: 1.35;
}

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

.shd2-slip-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 16px;
}

.shd2-slip-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(3,6,12,.72);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.shd2-slip-modal {
    position: relative;
    width: min(620px, 100%);
    max-height: min(720px, calc(100vh - 32px));
    overflow: hidden;
    border-radius: 16px;
    background: #0d1422;
    border: 1px solid rgba(138,210,255,.12);
    box-shadow: 0 25px 80px rgba(0,0,0,.42);
}

.shd2-slip-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.shd2-slip-modal h2 {
    font-size: 17px;
}

.shd2-close-btn {
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
}

.shd2-slip-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 16px 9px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(80,205,255,.045);
    border: 1px solid rgba(80,205,255,.08);
}

.shd2-slip-summary-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(89,206,255,.08);
    color: #89dfff;
}

.shd2-slip-summary > div:last-child {
    display: grid;
    gap: 3px;
}

.shd2-slip-summary span {
    color: rgba(245,249,255,.27);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.shd2-slip-summary strong {
    font-size: 11px;
}

.shd2-slip-summary strong small {
    margin-left: 3px;
    color: rgba(245,249,255,.25);
    font-size: 7px;
    font-weight: 600;
}

.shd2-slip-options {
    padding: 0 16px 16px;
}

.shd2-option-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0 7px;
}

.shd2-option-heading span {
    color: rgba(245,249,255,.45);
    font-size: 8px;
    font-weight: 800;
}

.shd2-option-heading small {
    color: rgba(245,249,255,.22);
    font-size: 7px;
}

.shd2-slip-scroll {
    display: grid;
    gap: 5px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}

.shd2-slip-scroll::-webkit-scrollbar {
    width: 5px;
}

.shd2-slip-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.10);
    border-radius: 999px;
}

.shd2-slip-option,
.shd2-external-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.022);
    color: #f2f6fb;
    text-align: left;
    cursor: pointer;
    transition:
        background .15s ease,
        transform .15s ease,
        border-color .15s ease;
}

.shd2-slip-option:hover,
.shd2-external-option:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.042);
    border-color: rgba(103,209,255,.12);
}

.shd2-slip-option-icon,
.shd2-external-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    color: #85dbff;
    background: rgba(79,202,255,.06);
}

.shd2-external-icon {
    color: #c9b9ff;
    background: rgba(150,125,255,.06);
}

.shd2-slip-option-copy,
.shd2-external-option > span:nth-child(2) {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.shd2-slip-option-copy strong,
.shd2-external-option strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
}

.shd2-slip-option-copy span,
.shd2-external-option small {
    color: rgba(245,249,255,.27);
    font-size: 7px;
    line-height: 1.35;
}

.shd2-slip-option-copy b {
    margin: 0 2px;
    color: rgba(255,255,255,.15);
}

.shd2-slip-option > i,
.shd2-external-option > i {
    color: rgba(245,249,255,.20);
    font-size: 11px;
}

.shd2-no-slip {
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 21px 13px;
    text-align: center;
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    border: 1px dashed rgba(255,255,255,.07);
}

.shd2-no-slip-icon {
    color: rgba(255,255,255,.24);
    font-size: 21px;
}

.shd2-no-slip strong {
    font-size: 9px;
}

.shd2-no-slip span {
    color: rgba(245,249,255,.25);
    font-size: 7px;
}

.shd2-no-slip .shd2-btn {
    margin-top: 6px;
}

.shd2-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 11px 0;
    color: rgba(245,249,255,.18);
    font-size: 7px;
    font-weight: 900;
}

.shd2-divider::before,
.shd2-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.055);
}

.shd2-external-form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.shd2-external-icon.large {
    width: 38px;
    height: 38px;
}

.shd2-external-field {
    display: grid;
    gap: 5px;
}

.shd2-external-field > span {
    color: rgba(245,249,255,.28);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.shd2-external-field > div {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px;
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
}

.shd2-external-field i {
    color: #9a8aff;
}

.shd2-external-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 10px;
}

.shd2-external-field input::placeholder {
    color: rgba(255,255,255,.20);
}

.shd2-external-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 2px;
}

/* ================================================================
   DESKTOP
================================================================ */

@media (min-width: 1101px) {
    .shd2-wallet-card,
    .shd2-progress-card {
        min-height: 126px;
    }

    .shd2-today {
        min-height: 194px;
    }
}

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

@media (max-width: 1100px) {
    .shd2-overview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .shd2-stats-card {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, 1fr);
    }

    .shd2-action-grid {
        grid-template-columns: 1fr 1fr;
    }

    .shd2-action-card.result {
        grid-column: 1 / -1;
    }
}

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

@media (max-width: 820px) {
    .shd2-dashboard {
        padding: 14px 10px 30px;
    }

    .shd2-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .shd2-header-actions {
        width: 100%;
    }

    .shd2-header-actions .shd2-btn {
        flex: 1;
    }

    .shd2-title-wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .shd2-overview-grid {
        grid-template-columns: 1fr;
    }

    .shd2-stats-card {
        grid-column: auto;
        grid-template-columns: repeat(2, 1fr);
    }

    .shd2-action-grid {
        grid-template-columns: 1fr;
    }

    .shd2-action-card.result {
        grid-column: auto;
    }

    .shd2-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .shd2-day-legend {
        justify-content: flex-start;
    }

    .shd2-day-row {
        grid-template-columns: 42px minmax(0,1fr);
        align-items: start;
    }

    .shd2-day-content {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .shd2-day-status {
        grid-column: 2;
        justify-content: flex-start;
    }

    .shd2-protection-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .shd2-dashboard {
        padding-left: 8px;
        padding-right: 8px;
    }

    .shd2-title-wrap h1 {
        font-size: 20px;
    }

    .shd2-wallet-card,
    .shd2-progress-card,
    .shd2-days-panel,
    .shd2-today {
        padding: 12px;
    }

    .shd2-wallet-amount {
        font-size: 28px;
    }

    .shd2-stake-amount {
        font-size: 21px;
    }

    .shd2-today-heading {
        align-items: flex-start;
    }

    .shd2-day-finance {
        gap: 6px;
    }

    .shd2-day-finance strong {
        font-size: 8px;
    }

    .shd2-slip-overlay {
        padding: 7px;
        place-items: end center;
    }

    .shd2-slip-modal {
        width: 100%;
        max-height: calc(100vh - 12px);
        border-radius: 15px 15px 0 0;
    }

    .shd2-slip-modal-head,
    .shd2-external-form {
        padding: 14px;
    }

    .shd2-slip-options {
        padding: 0 14px 14px;
    }

    .shd2-slip-scroll {
        max-height: 35vh;
    }
}







.shm-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

























/* ================================================================
   STATSHOMIE HEADER — SHH
   FINAL COMPACT / VISIBILITY TWEAK
================================================================ */

.shh-header {
    position: relative;
    z-index: 500;

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

    width: calc(100% - 20px);

    min-height: 57px;

    margin: 6px auto 7px;

    padding: 7px 8px;

    border: 1px solid rgba(84, 180, 238, .11);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(10, 25, 43, .97),
            rgba(6, 17, 31, .97)
        );

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .17),
        inset 0 1px 0 rgba(255,255,255,.025);

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


/* ================================================================
   LEFT
================================================================ */

.shh-header-left {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 10px;
}


.shh-mobile-menu {
    display: none;

    place-items: center;

    width: 33px;
    height: 33px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 8px;

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

    color: #dce9f4;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.shh-mobile-menu:hover {
    background: rgba(255,255,255,.055);
    border-color: rgba(87,198,255,.15);
}


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

.shh-search {
    position: relative;

    display: flex;
    align-items: center;

    width: min(430px, 38vw);
}


.shh-search-icon {
    position: absolute;

    left: 12px;

    display: grid;
    place-items: center;

    color: #7090a9;

    pointer-events: none;
}


.shh-search-icon i {
    font-size: 11px;
}


.shh-search input {
    width: 100%;
    height: 35px;

    padding: 0 61px 0 32px;

    border: 1px solid rgba(105,187,232,.09);
    border-radius: 9px;

    outline: none;

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

    color: #edf5fb;

    font-size: 9.5px;
    font-weight: 500;

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


.shh-search input::placeholder {
    color: #68829a;

    opacity: 1;
}


.shh-search input:focus {
    background: rgba(255,255,255,.052);

    border-color: rgba(78,198,255,.22);

    box-shadow:
        0 0 0 3px rgba(78,198,255,.035);
}


.shh-search-shortcut {
    position: absolute;

    right: 9px;

    display: flex;
    align-items: center;

    gap: 3px;

    pointer-events: none;
}


.shh-search-shortcut kbd {
    display: grid;
    place-items: center;

    min-width: 19px;
    height: 19px;

    padding: 0 4px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 5px;

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

    color: #6c879f;

    font-family: inherit;

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


/* ================================================================
   RIGHT SIDE
================================================================ */

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

    gap: 6px;

    flex-shrink: 0;
}


/* ================================================================
   ACCOUNT TIER
================================================================ */

.shh-tier {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 36px;

    padding: 4px 8px 4px 5px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;

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

    color: #e0ebf4;

    text-decoration: none;

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


.shh-tier:hover {
    color: #fff;

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

    border-color: rgba(255,195,85,.17);

    transform: translateY(-1px);
}


.shh-tier-icon {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    border-radius: 8px;

    color: #ffd36c;

    background:
        linear-gradient(
            135deg,
            rgba(255,202,91,.14),
            rgba(255,158,62,.055)
        );

    font-size: 9px;
}


.shh-tier-text {
    display: grid;

    gap: 2px;
}


.shh-tier-text small {
    color: #607d95;

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

    line-height: 1;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.shh-tier-text strong {
    color: #deebf5;

    font-size: 8.5px;
    line-height: 1.1;

    font-weight: 800;
}


.shh-tier-chevron {
    color: #57728a;

    font-size: 6px;
}


/* ================================================================
   ICON CONTROL
================================================================ */

.shh-icon-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;

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

    color: #9bb3c7;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.shh-icon-button:hover,
.shh-icon-button[aria-expanded="true"] {
    background: rgba(72,194,255,.06);

    border-color: rgba(72,194,255,.17);

    color: #f0f9ff;
}


.shh-icon-button > i {
    font-size: 13px;
}


.shh-notification-count {
    position: absolute;

    top: 3px;
    right: 3px;

    display: grid;
    place-items: center;

    min-width: 13px;
    height: 13px;

    padding: 0 3px;

    border: 2px solid #081522;
    border-radius: 999px;

    background: #ff6075;

    color: #fff;

    font-size: 5.5px;
    font-weight: 900;
}


/* ================================================================
   BALANCE
================================================================ */

.shh-balance {
    display: flex;
    align-items: center;

    gap: 6px;

    min-height: 35px;

    padding: 3px 8px 3px 5px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;

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

    color: #e1ebf4;

    text-decoration: none;

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


.shh-balance:hover {
    color: #fff;

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

    border-color: rgba(71,201,255,.16);

    transform: translateY(-1px);
}


.shh-balance-icon {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    border-radius: 8px;

    background: rgba(66,190,255,.07);

    color: #66d3ff;

    font-size: 9px;
}


.shh-balance-number {
    color: #edf6fc;

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

    font-variant-numeric: tabular-nums;
}


.shh-balance-chevron {
    color: #56728a;

    font-size: 6px;
}


/* ================================================================
   PROFILE
================================================================ */

.shh-profile {
    display: flex;
    align-items: center;

    gap: 6px;

    min-height: 36px;

    padding: 2px 7px 2px 3px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;

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

    color: #dfeaf4;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.shh-profile:hover,
.shh-profile[aria-expanded="true"] {
    background: rgba(255,255,255,.05);

    border-color: rgba(74,200,255,.16);
}


.shh-avatar {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    overflow: hidden;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #2d83ee,
            #194674
        );

    color: #edf9ff;

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


.shh-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.shh-profile-chevron {
    color: #58738b;

    font-size: 6px;

    transition: transform .15s ease;
}


.shh-profile[aria-expanded="true"] .shh-profile-chevron {
    transform: rotate(180deg);
}


/* ================================================================
   MENU WRAPPER
================================================================ */

.shh-menu-wrap {
    position: relative;
}


/* ================================================================
   POPOVER
================================================================ */

.shh-popover {
    position: absolute;

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

    width: 330px;

    overflow: hidden;

    border: 1px solid rgba(91,190,237,.13);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #0e1e31 0%,
            #091625 100%
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.025);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-5px)
        scale(.985);

    transform-origin: top right;

    pointer-events: none;

    transition:
        opacity .14s ease,
        visibility .14s ease,
        transform .14s ease;
}


.shh-popover.is-open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


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

.shh-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding: 14px;

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


.shh-popover-label {
    display: block;

    margin-bottom: 3px;

    color: #5b7c95;

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

    text-transform: uppercase;
    letter-spacing: .12em;
}


.shh-popover-head strong {
    display: block;

    color: #f0f6fb;

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


.shh-popover-head small {
    display: block;

    margin-top: 3px;

    color: #718ba1;

    font-size: 8px;
}


.shh-mark-read {
    padding: 5px 7px;

    border: 0;
    border-radius: 6px;

    background: rgba(70,193,255,.065);

    color: #74d5ff;

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

    cursor: pointer;
}


.shh-mark-read:hover {
    background: rgba(70,193,255,.10);
}


/* ================================================================
   NOTIFICATIONS
================================================================ */

.shh-notification-list {
    max-height: 320px;

    overflow-y: auto;
}


.shh-notification-list::-webkit-scrollbar {
    width: 4px;
}


.shh-notification-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.11);

    border-radius: 999px;
}


.shh-notification-list form {
    margin: 0;
}


.shh-notification-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;

    gap: 9px;

    padding: 10px 12px;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.035);

    background: transparent;

    color: #e5eef6;

    text-align: left;

    cursor: pointer;
}


.shh-notification-item:hover {
    background: rgba(255,255,255,.035);
}


.shh-notification-item.unread {
    background: rgba(62,193,255,.027);
}


.shh-notification-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius: 8px;

    background: rgba(69,195,255,.07);

    color: #70d5ff;

    font-size: 10px;
}


.shh-notification-body {
    display: grid;

    flex: 1;

    min-width: 0;

    gap: 3px;
}


.shh-notification-title {
    overflow: hidden;

    color: #e4eef7;

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

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


.shh-notification-message {
    display: -webkit-box;

    overflow: hidden;

    color: #7993aa;

    font-size: 8px;
    line-height: 1.45;

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


.shh-notification-date {
    color: #58728a;

    font-size: 7px;
}


.shh-notification-unread {
    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    margin-top: 4px;

    border-radius: 50%;

    background: #55caff;

    box-shadow:
        0 0 10px rgba(85,202,255,.45);
}


.shh-notification-empty {
    display: grid;
    place-items: center;

    gap: 5px;

    padding: 29px 20px;

    text-align: center;
}


.shh-empty-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    margin-bottom: 2px;

    border-radius: 10px;

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

    color: #648099;

    font-size: 14px;
}


.shh-notification-empty strong {
    color: #cfdeea;

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


.shh-notification-empty > span:last-child {
    color: #648098;

    font-size: 8px;
}


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

.shh-popover-footer {
    padding: 10px 12px;

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


.shh-popover-footer a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #73d4ff;

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

    text-decoration: none;
}


.shh-popover-footer a:hover {
    color: #b2ebff;
}


/* ================================================================
   ACCOUNT MENU
================================================================ */

.shh-account-menu {
    width: 315px;
}


.shh-account-header {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;
}


.shh-account-avatar {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    overflow: hidden;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #2c82ec,
            #163d68
        );

    color: #eff9ff;

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


.shh-account-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.shh-account-copy {
    display: grid;

    min-width: 0;

    gap: 3px;
}


.shh-account-copy strong {
    overflow: hidden;

    color: #edf5fb;

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

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


.shh-account-copy span {
    overflow: hidden;

    color: #6b859c;

    font-size: 8px;

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


/* ================================================================
   ACCOUNT TIER
================================================================ */

.shh-account-tier {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0 12px 8px;

    padding: 9px 10px;

    border: 1px solid rgba(255,196,81,.08);
    border-radius: 9px;

    background: rgba(255,196,81,.025);
}


.shh-account-tier > span {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 8px;

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

    color: #ffd469;

    font-size: 9px;
}


.shh-account-tier > div {
    display: grid;

    gap: 2px;
}


.shh-account-tier small {
    color: #657f96;

    font-size: 6.5px;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.shh-account-tier strong {
    color: #ebdfba;

    font-size: 8.5px;
}


/* ================================================================
   ACCOUNT LINKS
================================================================ */

.shh-account-links {
    padding: 2px 8px 8px;
}


.shh-account-link {
    display: flex;
    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 8px;

    border-radius: 8px;

    color: #dfeaf3;

    text-decoration: none;

    transition:
        background .13s ease;
}


.shh-account-link:hover {
    color: #fff;

    background: rgba(255,255,255,.035);
}


.shh-link-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 8px;

    font-size: 9px;
}


.shh-link-icon.blue {
    color: #74d7ff;
    background: rgba(64,194,255,.065);
}


.shh-link-icon.cyan {
    color: #61e5e0;
    background: rgba(52,217,210,.055);
}


.shh-link-icon.purple {
    color: #aa9cff;
    background: rgba(137,116,255,.065);
}


.shh-link-icon.green {
    color: #72e5a7;
    background: rgba(64,211,142,.055);
}


.shh-link-copy {
    display: grid;

    flex: 1;

    min-width: 0;

    gap: 2px;
}


.shh-link-copy strong {
    font-size: 9px;
    font-weight: 780;
}


.shh-link-copy small {
    color: #628098;

    font-size: 7px;
}


.shh-account-link > i {
    color: #4a667d;

    font-size: 7px;
}


.shh-link-value {
    color: #72d7ff;

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


/* ================================================================
   LOGOUT
================================================================ */

.shh-account-footer {
    padding: 7px 11px 11px;

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


.shh-account-footer form {
    margin: 0;
}


.shh-logout {
    display: flex;
    align-items: center;

    width: 100%;

    gap: 8px;

    padding: 8px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #ff7f8f;

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

    cursor: pointer;

    text-align: left;
}


.shh-logout:hover {
    background: rgba(255,82,103,.05);
}


.shh-logout > span {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    border-radius: 7px;

    background: rgba(255,82,103,.05);
}


/* ================================================================
   GUEST
================================================================ */

.shh-guest-actions {
    display: flex;
    align-items: center;

    gap: 3px;
}


.shh-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 12px;

    border-radius: 8px;

    color: #b6c9d9;

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

    text-decoration: none;

    transition:
        color .15s ease,
        background .15s ease;
}


.shh-login:hover {
    color: #fff;

    background: rgba(255,255,255,.035);
}


.shh-create-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 34px;

    padding: 0 12px;

    border: 1px solid rgba(70,200,255,.18);
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #2aaeff,
            #2788e8
        );

    color: #041421;

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

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(37,143,220,.13);

    transition:
        transform .15s ease,
        filter .15s ease;
}


.shh-create-account:hover {
    color: #041421;

    filter: brightness(1.07);

    transform: translateY(-1px);
}


.shh-create-account i {
    font-size: 7px;
}


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

@media (max-width: 1050px) {

    .shh-header {
        width: calc(100% - 14px);

        margin-top: 6px;
        margin-bottom: 6px;
    }


    .shh-mobile-menu {
        display: grid;
    }


    .shh-tier {
        display: none;
    }


    .shh-search {
        width: min(380px, 42vw);
    }

}


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

@media (max-width: 720px) {

    .shh-header {
        width: calc(100% - 10px);

        min-height: 53px;

        margin: 5px auto;

        padding: 6px 7px;

        border-radius: 12px;
    }


    .shh-header-left {
        gap: 7px;
    }


    .shh-search {
        display: none;
    }


    .shh-header-actions {
        gap: 4px;
    }


    .shh-balance-number,
    .shh-balance-chevron {
        display: none;
    }


    .shh-balance {
        padding-right: 5px;
    }


    .shh-profile {
        padding-right: 3px;
    }


    .shh-profile-chevron {
        display: none;
    }


    .shh-popover {
        position: fixed;

        top: 62px;
        left: 8px;
        right: 8px;

        width: auto;

        max-width: none;

        transform-origin: top center;
    }


    .shh-account-menu,
    .shh-notifications {
        width: auto;
    }

}


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

@media (max-width: 440px) {

    .shh-header {
        width: calc(100% - 8px);

        min-height: 51px;

        padding: 5px 6px;
    }


    .shh-icon-button {
        width: 33px;
        height: 33px;
    }


    .shh-profile {
        min-height: 34px;
    }


    .shh-avatar {
        width: 28px;
        height: 28px;
    }


    .shh-guest-actions {
        gap: 2px;
    }


    .shh-login {
        padding: 0 9px;

        font-size: 8px;
    }


    .shh-create-account {
        padding: 0 10px;

        font-size: 8px;
    }


    .shh-create-account i {
        display: none;
    }

}
































/*
 * StatsHomie AI / DeepSeek additions.
 * Append these rules to resources/css/app.css.
 */

.smd-ai-intro-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.smd-ai-allowance {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(8, 202, 255, .14);
    border-radius: 999px;
    background: rgba(8, 127, 255, .07);
    color: #86c9df;
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.smd-ai-allowance i {
    color: #08caff;
}

.smd-ai-selection {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid rgba(8, 202, 255, .18);
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 127, 255, .10),
            rgba(4, 17, 30, .76)
        );
}

.smd-ai-selection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.smd-ai-selection-kicker {
    color: #6f879b;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.smd-ai-selection-verdict {
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(22, 223, 160, .08);
    color: #75e7c2;
    font-size: 7px;
    font-weight: 800;
}

.smd-ai-selection-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 9px;
}

.smd-ai-selection-main small,
.smd-ai-selection-probability small {
    display: block;
    margin-bottom: 2px;
    color: #6f879b;
    font-size: 7px;
    font-weight: 700;
}

.smd-ai-selection-main strong {
    display: block;
    color: #eef8ff;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
}

.smd-ai-selection-probability {
    text-align: right;
}

.smd-ai-selection-probability strong {
    color: #08caff;
    font-size: 18px;
}

.smd-ai-challenge {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(61, 132, 201, .10);
    color: #91a9bb;
    font-size: 8px;
    line-height: 1.5;
}

.smd-ai-challenge > i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #7c7cff;
}

.smd-ai-challenge strong {
    color: #d9ebf7;
}

.smd-ai-selection-reason {
    margin-top: 8px;
    color: #b3c6d4;
    font-size: 9px;
    line-height: 1.62;
    font-weight: 600;
}

.smd-ai-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
}

.smd-ai-mini-card,
.smd-ai-risk,
.smd-ai-data-quality {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(61, 132, 201, .10);
    border-radius: 8px;
    background: rgba(4, 17, 30, .42);
}

.smd-ai-mini-card > span,
.smd-ai-risk > span,
.smd-ai-data-quality > span {
    display: block;
    margin-bottom: 6px;
    color: #70879a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.smd-ai-mini-card > div {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    color: #96acbd;
    font-size: 8px;
    line-height: 1.45;
}

.smd-ai-mini-card > div i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #08caff;
}

.smd-ai-risk p,
.smd-ai-data-quality p {
    margin: 0;
    color: #a8bbc9;
    font-size: 8px;
    line-height: 1.5;
}

.smd-ai-risk {
    border-color: rgba(255, 212, 71, .10);
}

.smd-ai-risk > span {
    color: #d8bc57;
}

.smd-ai-data-quality {
    margin-top: 7px;
}

@media (max-width: 767px) {
    .smd-ai-intro-row {
        display: block;
    }

    .smd-ai-allowance {
        margin-top: 7px;
    }

    .smd-ai-selection-main {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .smd-ai-mini-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STATSSLIP INTERACTION FIXES — LIVEWIRE + HEADER MENUS
   ========================================================= */

/* Header must sit above the page content so account/notification
   popovers are clickable instead of being visually covered. */
.shh-header {
    position: relative;
    z-index: 2000;
}

.shh-header-actions,
.shh-menu-wrap {
    position: relative;
    z-index: 2001;
}

.shh-popover {
    z-index: 2100;
}

/* Isolated Livewire polling nodes never need to occupy layout space. */
.pp-live-refresh-pulse,
.smd-live-poll {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    left: -99999px;
    top: -99999px;
}

.pp-sidebar-vip.is-active {
    border-color: rgba(255, 212, 71, .28);
    background:
        radial-gradient(circle at 85% 5%, rgba(255, 212, 71, .13), transparent 42%),
        linear-gradient(145deg, #101d2a, #06111d);
}

.pp-sidebar-vip.is-active .pp-vip-icon,
.pp-sidebar-vip.is-active .pp-vip-title {
    color: #ffd447;
}

.pp-vip-button-member {
    color: #08131c;
    background: linear-gradient(90deg, #ffd447, #ffb72d);
}

/* Livewire can temporarily mark a component busy. Do not let that
   create an accidental interaction-blocking overlay. */
[wire\:loading] {
    --pp-loading-opacity: .72;
}

/* Keep pagination links explicitly clickable above decorative layers. */
.pp-pagination,
.pp-pagination * {
    position: relative;
    z-index: 20;
}

.pp-pagination a,
.pp-pagination button {
    pointer-events: auto;
}


/* =========================================================
   STATSLIP INTERACTION STABILITY / MOBILE SLIP OVERRIDES
   ========================================================= */
.pp-network-status {
    position: fixed;
    left: 50%;
    top: 12px;
    z-index: 5000;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 24px);
    padding: 9px 13px;
    border: 1px solid rgba(255, 86, 86, .45);
    border-radius: 999px;
    color: #fff;
    background: rgba(90, 18, 25, .96);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .35);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.pp-network-status[wire\:offline] {
    display: none;
}

.pp-computation-error-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 6px;
    color: var(--pp-cyan);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.pp-computation-error-action:hover {
    color: #fff;
}

.pp-slip-error {
    margin: 0 12px 10px;
}

@media (max-width: 767.98px) {
    .pp-mobile-slip-trigger {
        left: auto !important;
        right: 18px !important;
        bottom: 18px !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        border: 1px solid rgba(0, 211, 255, .72) !important;
        background: linear-gradient(145deg, #063454, #061b31) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, .48), 0 0 0 1px rgba(0, 211, 255, .08) !important;
    }

    .pp-mobile-slip-icon {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .pp-mobile-slip-trigger strong {
        position: absolute !important;
        top: -3px !important;
        right: -2px !important;
        min-width: 21px !important;
        width: 21px !important;
        height: 21px !important;
        margin: 0 !important;
        border: 2px solid #061b31 !important;
        font-size: 9px !important;
    }

    .pp-mobile-slip-trigger:not(.has-items) strong {
        display: none !important;
    }

    .pp-mobile-slip-close {
        display: inline-flex !important;
    }

    .pp-network-status[wire\:offline] {
        display: inline-flex;
    }
}

@media (min-width: 768px) {
    .pp-mobile-slip-close {
        display: none !important;
    }
}

/* ============================================================
   PREDICTPRO — FINAL INTERACTION / LOADING POLISH
   ============================================================ */

.pp-prediction-slip {
    position: relative;
}

.pp-prediction-loading {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: inherit;
    background: rgba(1, 7, 15, .76);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pp-prediction-loading-card {
    width: min(390px, 100%);
    padding: 22px 20px 18px;
    border: 1px solid rgba(8, 202, 255, .24);
    border-radius: 16px;
    background: linear-gradient(145deg, #071c30, #03101e);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.025);
    text-align: center;
}

.pp-prediction-loading-icon {
    position: relative;
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(8,202,255,.20);
    border-radius: 50%;
    color: #08caff;
    background: rgba(8,127,255,.08);
    font-size: 19px;
}

.pp-loading-orbit {
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-top-color: #08caff;
    border-right-color: rgba(8,127,255,.45);
    border-radius: 50%;
    animation: pp-loading-spin .9s linear infinite;
}

.pp-prediction-loading-copy strong {
    display: block;
    color: #edf7ff;
    font-size: 14px;
    font-weight: 900;
}

.pp-prediction-loading-copy span {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: #7891a8;
    font-size: 9px;
    font-weight: 700;
}

.pp-prediction-loading-bar {
    height: 4px;
    margin-top: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(61,132,201,.12);
}

.pp-prediction-loading-bar span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #087fff, #08caff);
    animation: pp-loading-sweep 1.25s ease-in-out infinite;
}

.pp-prediction-loading-card small {
    display: block;
    margin-top: 10px;
    color: #526b82;
    font-size: 7px;
    font-weight: 700;
}

@keyframes pp-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes pp-loading-sweep {
    0% { transform: translateX(-120%); }
    50% { transform: translateX(145%); }
    100% { transform: translateX(260%); }
}

/* Real backdrop instead of body::before. A real element can receive clicks. */
.pp-mobile-slip-backdrop {
    display: none;
}

@media (max-width: 767.98px) {

    .pp-mobile-slip-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1190;
        border: 0;
        padding: 0;
        background: rgba(0, 0, 0, .68);
        cursor: pointer;
    }

    body.pp-mobile-slip-open .pp-mobile-slip-backdrop {
        display: block;
    }

    /* Override the old pseudo-backdrop. */
    body.pp-mobile-slip-open::before {
        display: none !important;
    }

    /* Compact mobile match list: target roughly 4–5 cards in a normal viewport. */
    .pp-match-grid {
        gap: 5px;
    }

    .pp-match-card {
        padding: 6px;
        border-radius: 8px;
    }

    .pp-match-card-top {
        margin-bottom: 2px;
        font-size: 7px;
    }

    .pp-match-meta {
        min-height: 14px;
        font-size: 7px;
    }

    .pp-live-label {
        padding: 2px 5px;
        font-size: 6px;
    }

    .pp-teams {
        gap: 5px;
        margin-top: 3px;
        margin-bottom: 2px;
    }

    .pp-team {
        gap: 5px;
    }

    .pp-team-logo,
    .pp-team-logo img {
        width: 27px;
        height: 27px;
    }

    .pp-team-logo {
        border-radius: 7px;
    }

    .pp-team-name {
        max-width: 78px;
        font-size: 10px;
        font-weight: bold;
        line-height: 1.12;
    }

    .pp-score {
        font-size: 13px;
    }

    .pp-match-details-action {
        min-height: 16px;
        margin-top: 2px;
        margin-left: 7px;
        margin-right: 7px;
        padding-top: 3px;
        font-size: 6px;
    }

    .pp-predict-button,
    .pp-analysis-button {
        min-height: 27px;
        margin-top: 4px;
        font-size: 7px;
    }

    .pp-selected-indicator {
        margin-top: 3px;
        font-size: 6px;
        line-height: 1.2;
    }

    .pp-prediction-result {
        margin-top: 4px;
        margin-left: 6px;
        margin-right: 6px;
        padding: 5px 6px;
    }

    .pp-prediction-label {
        font-size: 5px;
    }

    .pp-prediction-main {
        margin-top: 2px;
    }

    .pp-prediction-main strong {
        font-size: 8px;
    }

    .pp-prediction-prob > strong {
        font-size: 11px;
    }

    .pp-prediction-prob span {
        font-size: 5px;
    }

    .pp-prediction-loading-card {
        padding: 19px 16px 16px;
    }

    .pp-mobile-slip-trigger {
        left: auto;
        right: 14px;
        bottom: 14px;
        width: 54px;
        height: 54px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .pp-mobile-slip-icon {
        font-size: 18px;
    }

    .pp-mobile-slip-trigger strong {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 20px;
        width: 20px;
        height: 20px;
        margin: 0;
        font-size: 8px;
    }
}


/* FINAL: never let the legacy body pseudo-backdrop intercept page clicks. */
body.pp-mobile-slip-open::before {
    display: none !important;
    content: none !important;
}

/* Cross-page navigation uses normal browser navigation for Browse <-> Detail,
   so no old Livewire component/overlay can survive into the next page. */

/* ============================================================
   FINAL MOBILE SLIP + DESKTOP ALIGNMENT
   ============================================================ */

/* Keep the desktop prediction slip aligned with the top of the
   match workspace. Do not create an unnecessary vertical offset. */
@media (min-width: 768px) {
    .pp-prediction-slip {
        top: 0;
    }
}

/* Mobile prediction slip trigger must always remain visible.
   Keep it above page content and the backdrop. */
@media (max-width: 767.98px) {
    .pp-mobile-slip-trigger {
        position: fixed !important;
        left: auto !important;
        right: 14px !important;
        bottom: 14px !important;
        z-index: 1300 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .pp-mobile-slip-trigger .pp-mobile-slip-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .pp-mobile-slip-trigger strong {
        display: inline-flex !important;
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        z-index: 2 !important;
    }

    .pp-mobile-slip-backdrop {
        z-index: 1290 !important;
    }

    .pp-prediction-slip {
        z-index: 1301 !important;
    }

    /* Direct class fallback: opening the slip must not depend on a
       Livewire-pushed script being re-evaluated after navigation. */
    .pp-prediction-slip.is-mobile-open {
        display: flex !important;
    }
}

/* ============================================================
   PREDICTPRO — AUTHORITATIVE PREDICTION SLIP RESPONSIVE RULES
   ============================================================ */

/* Desktop / tablet: the slip is a permanent part of the workspace.
   Mobile-only JS must never be allowed to hide it here. */
@media (min-width: 768px) {
    .pp-prediction-slip {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        min-height: 350px;
        max-height: calc(100vh - 88px);
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    .pp-mobile-slip-trigger,
    .pp-mobile-slip-backdrop,
    .pp-mobile-slip-close {
        display: none !important;
    }
}

/* Mobile: the right-column slip becomes a bottom sheet. */
@media (max-width: 767.98px) {
    .pp-match-workspace {
        display: block !important;
    }

    .pp-prediction-slip {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 82vh !important;
        min-height: 0 !important;
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1301 !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .pp-prediction-slip.is-mobile-open {
        display: flex !important;
    }

    .pp-mobile-slip-trigger {
        position: fixed !important;
        left: auto !important;
        right: 14px !important;
        bottom: 14px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        z-index: 1302 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .pp-mobile-slip-trigger .pp-mobile-slip-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .pp-mobile-slip-trigger strong {
        display: inline-flex !important;
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        z-index: 2 !important;
    }

    .pp-mobile-slip-backdrop {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        z-index: 1300 !important;
        border: 0 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, .68) !important;
        pointer-events: none !important;
    }

    body.pp-mobile-slip-open .pp-mobile-slip-backdrop {
        display: block !important;
        pointer-events: auto !important;
    }

    .pp-mobile-slip-close {
        display: inline-flex !important;
    }
}





/* ============================================================
   FINAL MOBILE SIDEBAR LAYER
   ============================================================ */

/*
 * Desktop
 * ------------------------------------------------------------
 */

.pp-sidebar-logo {
    display: block;
    width: 130px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.pp-sidebar-top {
    position: relative;
    z-index: 2;
}

.pp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pp-mobile-sidebar-close {
    display: none;
}


/*
 * Mobile
 * ------------------------------------------------------------
 */

@media (max-width: 991.98px) {

    /*
     * HEADER
     *
     * Keep the header below the mobile sidebar.
     */
    .shh-header {
        position: relative !important;
        z-index: 2000 !important;
    }


    /*
     * SIDEBAR
     *
     * The sidebar must sit above BOTH the header
     * and the dark overlay.
     */
    .pp-sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 245px !important;
        max-width: 88vw !important;
        height: 100dvh !important;

        z-index: 3000 !important;

        display: flex !important;
        flex-direction: column !important;

        transform: translateX(-105%) !important;

        transition:
            transform .25s cubic-bezier(.4, 0, .2, 1) !important;

        visibility: visible !important;

        overflow: hidden !important;

        box-shadow:
            18px 0 55px rgba(0, 0, 0, .55) !important;
    }


    /*
     * OPEN SIDEBAR
     */
    body.pp-sidebar-open .pp-sidebar {
        transform: translateX(0) !important;
    }


    /*
     * SIDEBAR TOP / LOGO AREA
     */
    .pp-sidebar-top {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;

        flex: 0 0 72px !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 15px !important;

        border-bottom:
            1px solid rgba(255, 255, 255, .07) !important;

        background:
            linear-gradient(
                180deg,
                rgba(5, 23, 40, .98),
                rgba(3, 15, 28, .98)
            ) !important;
    }


    /*
     * MOBILE LOGO
     */
    .pp-sidebar-logo {
        display: block !important;

        width: 125px !important;
        height: auto !important;

        max-width: 150px !important;

        object-fit: contain !important;
    }


    .pp-logo {
        display: inline-flex !important;

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

        width: auto !important;
        height: 100% !important;

        margin: 0 !important;

        flex: 0 0 auto !important;
    }


    /*
     * CLOSE BUTTON
     */
    .pp-mobile-sidebar-close {
        display: inline-flex !important;

        position: absolute !important;

        top: 50% !important;
        right: 13px !important;

        width: 32px !important;
        height: 32px !important;

        transform: translateY(-50%) !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(75, 145, 200, .20) !important;
        border-radius: 8px !important;

        color: #a8bed1 !important;

        background:
            rgba(0, 143, 218, .07) !important;

        font-size: 13px !important;

        line-height: 1 !important;

        z-index: 10 !important;
    }


    .pp-mobile-sidebar-close:hover {
        color: #fff !important;

        border-color:
            rgba(0, 199, 255, .45) !important;

        background:
            rgba(0, 174, 240, .13) !important;
    }


    /*
     * SIDEBAR CONTENT
     */
    .pp-sidebar-scroll {
        position: relative !important;

        z-index: 2 !important;

        flex: 1 1 auto !important;

        height: auto !important;
        min-height: 0 !important;

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

        -webkit-overflow-scrolling: touch !important;
    }


    /*
     * VIP CARD STAYS INSIDE SIDEBAR
     */
    .pp-sidebar-vip {
        position: relative !important;

        z-index: 3 !important;

        flex: 0 0 auto !important;
    }


    /*
     * DARK BACKDROP
     *
     * Below sidebar, above the rest of the application.
     */
    .pp-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        z-index: 2900 !important;

        display: block !important;

        background:
            rgba(0, 0, 0, .70) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity .25s ease,
            visibility .25s ease !important;
    }


    body.pp-sidebar-open .pp-sidebar-overlay {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /*
     * MAIN CONTENT MUST NEVER CREATE A LAYER
     * ABOVE THE SIDEBAR.
     */
    .pp-main {
        position: relative !important;

        z-index: 1 !important;

        width: 100% !important;

        margin-left: 0 !important;
    }


    /*
     * HEADER CONTENT
     *
     * Keep normal header interactions working when
     * sidebar is closed.
     */
    .shh-header,
    .shh-header-actions,
    .shh-menu-wrap,
    .shh-popover {
        isolation: auto;
    }


    /*
     * WHEN SIDEBAR IS OPEN
     *
     * The header remains physically underneath the
     * sidebar and overlay.
     */
    body.pp-sidebar-open .shh-header {
        z-index: 2000 !important;
    }
}


/*
 * EXTRA SMALL PHONES
 * ------------------------------------------------------------
 */

@media (max-width: 575.98px) {

    .pp-sidebar {
        width: 250px !important;
        max-width: 86vw !important;
    }

    .pp-sidebar-logo {
        width: 120px !important;
    }

    .pp-sidebar-top {
        height: 68px !important;
        min-height: 68px !important;
        flex-basis: 68px !important;
    }
}





















/* ============================================================
   MOBILE HEADER LOGO
   ============================================================ */

.shh-mobile-logo {
    display: none;
}


/* ============================================================
   MOBILE HEADER LOGO — VISIBLE
   ============================================================ */

@media (max-width: 991.98px) {

    .shh-mobile-logo {
        display: inline-flex !important;

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

        flex: 0 0 auto;

        height: 38px;

        margin-left: 4px;
        margin-right: 10px;

        text-decoration: none;
    }

    .shh-mobile-logo img {
        display: block;

        width: 92px;
        height: auto;

        max-width: 92px;

        object-fit: contain;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 575.98px) {

    .shh-mobile-logo {
        margin-left: 3px;
        margin-right: 7px;
    }

    .shh-mobile-logo img {
        width: 82px;
        max-width: 82px;
    }

}















@media (max-width: 575.98px) {

    .shh-header-left {
        min-width: 0;
        flex: 1;
    }

    .shh-search {
        min-width: 0;
        flex: 1;
    }

    .shh-search input {
        min-width: 0;
    }

    .shh-mobile-menu {
        flex: 0 0 37px;
    }

}























/* ================================================================
   STATSLIP GLOBAL SEARCH
================================================================ */

.statslip-search-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 24px 70px;
}


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

.statslip-search-hero {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(35, 199, 255, .10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(18, 28, 48, .96),
            rgba(7, 12, 22, .98)
        );

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .24);
}

.statslip-search-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;

    color: #35c8ff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.statslip-search-hero h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(27px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.04em;
}

.statslip-search-hero p {
    margin: 8px 0 24px;

    color: rgba(255, 255, 255, .50);

    font-size: 13px;
}


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

.statslip-search-form {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 58px;

    border: 1px solid rgba(53, 200, 255, .18);
    border-radius: 14px;

    background: rgba(0, 0, 0, .28);

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

.statslip-search-form:focus-within {
    border-color: rgba(53, 200, 255, .48);

    box-shadow:
        0 0 0 4px rgba(53, 200, 255, .06);
}

.statslip-search-form-icon {
    flex: 0 0 52px;

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

    color: #35c8ff;

    font-size: 17px;
}

.statslip-search-form input {
    flex: 1;

    min-width: 0;

    height: 56px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

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

.statslip-search-form input::placeholder {
    color: rgba(255, 255, 255, .34);
}

.statslip-search-clear {
    width: 34px;
    height: 34px;

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

    margin-right: 4px;

    border-radius: 9px;

    color: rgba(255, 255, 255, .45);

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease;
}

.statslip-search-clear:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.statslip-search-submit {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 42px;

    margin-right: 8px;
    padding: 0 17px;

    border: 0;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #08caff,
        #1687ff
    );

    color: #00121d;

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

    cursor: pointer;

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

.statslip-search-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 22px rgba(8, 202, 255, .18);
}


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

.statslip-search-empty,
.statslip-search-no-results {
    margin-top: 24px;
    padding: 55px 25px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;

    background: rgba(255, 255, 255, .018);
}

.statslip-search-empty-icon,
.statslip-search-no-results-icon {
    width: 62px;
    height: 62px;

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

    margin: 0 auto 17px;

    border: 1px solid rgba(53, 200, 255, .15);
    border-radius: 18px;

    background: rgba(53, 200, 255, .06);

    color: #35c8ff;

    font-size: 22px;
}

.statslip-search-empty h2,
.statslip-search-no-results h2 {
    margin: 0;

    color: #fff;

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

.statslip-search-empty p,
.statslip-search-no-results p {
    margin: 7px 0 22px;

    color: rgba(255, 255, 255, .45);

    font-size: 12px;
}

.statslip-search-examples {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.statslip-search-examples a {
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;

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

    color: rgba(255, 255, 255, .68);

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

    text-decoration: none;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}

.statslip-search-examples a:hover {
    border-color: rgba(53, 200, 255, .25);
    background: rgba(53, 200, 255, .06);
    color: #35c8ff;
}


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

.statslip-search-results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;

    margin: 30px 2px 14px;
}

.statslip-search-results-head > div:first-child > span {
    color: #35c8ff;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.statslip-search-results-head h2 {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, .72);

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

.statslip-search-results-head h2 strong {
    color: #fff;
    font-weight: 800;
}

.statslip-search-result-count {
    color: rgba(255, 255, 255, .35);

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


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

.statslip-search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.statslip-search-match {
    display: block;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 27, 45, .90),
            rgba(8, 13, 24, .94)
        );

    color: inherit;

    text-decoration: none;

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

.statslip-search-match:hover {
    transform: translateY(-2px);

    border-color: rgba(53, 200, 255, .22);

    background:
        linear-gradient(
            145deg,
            rgba(20, 35, 58, .96),
            rgba(8, 14, 26, .98)
        );
}

.statslip-search-match-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 18px;
}

.statslip-search-league {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0;

    color: rgba(255, 255, 255, .38);

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

.statslip-search-league i {
    color: #35c8ff;
}

.statslip-search-league span {
    overflow: hidden;

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

.statslip-search-status {
    flex: 0 0 auto;

    padding: 4px 7px;

    border-radius: 999px;

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

    color: rgba(255, 255, 255, .45);

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

.statslip-search-status.live {
    background: rgba(255, 61, 61, .10);
    color: #ff6262;
}

.statslip-search-status.finished {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .48);
}

.statslip-search-match-body {
    display: grid;
    grid-template-columns: 1fr 55px 1fr;
    align-items: center;
    gap: 8px;
}

.statslip-search-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    min-width: 0;

    text-align: center;
}

.statslip-search-team.away {
    text-align: center;
}

.statslip-search-team span {
    width: 100%;

    overflow: hidden;

    color: rgba(255, 255, 255, .82);

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

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

.statslip-search-team-logo {
    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;

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

    color: rgba(255, 255, 255, .25);

    overflow: hidden;
}

.statslip-search-team-logo img {
    width: 29px;
    height: 29px;

    object-fit: contain;
}

.statslip-search-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    color: #fff;

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

.statslip-search-score span {
    color: rgba(255, 255, 255, .28);
}

.statslip-search-score .vs {
    color: rgba(255, 255, 255, .30);

    font-size: 9px;
    letter-spacing: .08em;
}

.statslip-search-match-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 16px;
    padding-top: 11px;

    border-top: 1px solid rgba(255, 255, 255, .05);

    color: rgba(255, 255, 255, .32);

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

.statslip-search-match-footer i {
    color: #35c8ff;
}


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

.statslip-search-pagination {
    margin-top: 22px;
}

.statslip-search-pagination .pagination {
    justify-content: center;
    gap: 4px;
}

.statslip-search-pagination .page-link {
    border: 1px solid rgba(255, 255, 255, .07);

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

    color: rgba(255, 255, 255, .55);
}

.statslip-search-pagination .page-item.active .page-link {
    border-color: rgba(53, 200, 255, .25);

    background: rgba(53, 200, 255, .10);

    color: #35c8ff;
}


/* ================================================================
   NO RESULTS
================================================================ */

.statslip-search-browse {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 15px;

    border-radius: 10px;

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

    color: #35c8ff;

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

    text-decoration: none;
}


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

@media (max-width: 767.98px) {

    .statslip-search-page {
        padding: 20px 12px 50px;
    }

    .statslip-search-hero {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .statslip-search-hero h1 {
        font-size: 27px;
    }

    .statslip-search-form {
        min-height: 52px;
    }

    .statslip-search-form-icon {
        flex-basis: 43px;
    }

    .statslip-search-form input {
        height: 50px;
        font-size: 12px;
    }

    .statslip-search-submit {
        display: none;
    }

    .statslip-search-results {
        grid-template-columns: 1fr;
    }

    .statslip-search-results-head {
        align-items: center;
    }

    .statslip-search-result-count {
        white-space: nowrap;
    }

}


/* ================================================================
   VERY SMALL MOBILE
================================================================ */

@media (max-width: 440px) {

    .statslip-search-page {
        padding-left: 9px;
        padding-right: 9px;
    }

    .statslip-search-match {
        padding: 13px;
    }

    .statslip-search-team-logo {
        width: 38px;
        height: 38px;
    }

    .statslip-search-team-logo img {
        width: 27px;
        height: 27px;
    }

}











/* ================================================================
   MOBILE HEADER SEARCH
================================================================ */

.shh-mobile-search-button {
    display: none;

    width: 34px;
    height: 34px;

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

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: rgba(255, 255, 255, .72);

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.shh-mobile-search-button:hover,
.shh-mobile-search-button:focus {
    background: rgba(255, 255, 255, .06);
    color: #35c8ff;
}

.shh-mobile-search-panel {
    display: none;
}


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

@media (max-width: 991.98px) {

    .shh-mobile-search-button {
        display: inline-flex;
    }

    .shh-mobile-search-panel {
        position: absolute;

        top: calc(100% + 7px);
        left: 8px;
        right: 8px;

        z-index: 2100;

        padding: 7px;

        border: 1px solid rgba(53, 200, 255, .18);
        border-radius: 13px;

        background:
            linear-gradient(
                145deg,
                rgba(17, 28, 47, .98),
                rgba(7, 12, 22, .99)
            );

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

        opacity: 0;
        visibility: hidden;
        transform: translateY(-7px);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }

    .shh-mobile-search-panel.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .shh-mobile-search-form {
        display: flex;
        align-items: center;

        min-height: 43px;

        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 9px;

        background: rgba(0, 0, 0, .24);
    }

    .shh-mobile-search-icon {
        flex: 0 0 40px;

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

        color: #35c8ff;

        font-size: 14px;
    }

    .shh-mobile-search-form input {
        flex: 1;

        min-width: 0;

        height: 41px;

        padding: 0;

        border: 0;
        outline: 0;

        background: transparent;

        color: #fff;

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

    .shh-mobile-search-form input::placeholder {
        color: rgba(255, 255, 255, .34);
    }

    .shh-mobile-search-close {
        flex: 0 0 35px;

        width: 35px;
        height: 35px;

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

        border: 0;
        border-radius: 8px;

        background: transparent;

        color: rgba(255, 255, 255, .42);

        cursor: pointer;
    }

    .shh-mobile-search-close:hover {
        background: rgba(255, 255, 255, .06);
        color: #fff;
    }

}


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

@media (max-width: 575.98px) {

    .shh-mobile-search-panel {
        left: 7px;
        right: 7px;
    }

}





























/* =========================================================
   MOBILE HEADER SEARCH BUTTON
   Hidden everywhere except mobile
========================================================= */

.shh-mobile-search-trigger {
    display: none;
}


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

@media (max-width: 991.98px) {

    .shh-mobile-search-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        padding: 0;
        margin: 0 2px 0 0;

        border: 0;
        border-radius: 10px;

        background: transparent;
        color: #ffffff;

        font-size: 19px;
        line-height: 1;

        cursor: pointer;

        position: relative;
        z-index: 2100;

        -webkit-appearance: none;
        appearance: none;

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


    .shh-mobile-search-trigger:hover {
        background: rgba(255, 255, 255, .07);
        color: #39c6ff;
    }


    .shh-mobile-search-trigger:active {
        transform: scale(.92);
    }


    .shh-mobile-search-trigger:focus {
        outline: none;
        box-shadow: none;
    }


    .shh-mobile-search-trigger i {
        display: block;
        pointer-events: none;
    }


    /* =====================================================
       MOBILE SEARCH DROPDOWN
    ====================================================== */

    .shh-mobile-search-panel {
        display: none;

        position: absolute;

        top: calc(100% + 6px);
        left: 10px;
        right: 10px;

        z-index: 2200;

        padding: 10px;

        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 14px;

        background: rgba(11, 15, 28, .98);

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

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


    .shh-mobile-search-panel.is-open {
        display: block;
    }


    .shh-mobile-search-panel form {
        display: flex;
        align-items: center;
        gap: 8px;

        width: 100%;
        margin: 0;
    }


    .shh-mobile-search-input-wrap {
        position: relative;

        flex: 1;
        min-width: 0;
    }


    .shh-mobile-search-input-wrap > i {
        position: absolute;

        left: 13px;
        top: 50%;

        transform: translateY(-50%);

        color: #7f8ba3;

        font-size: 16px;

        pointer-events: none;
    }


    .shh-mobile-search-input-wrap input {
        display: block;

        width: 100%;
        height: 44px;

        padding: 0 14px 0 39px;

        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 11px;

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

        color: #ffffff;

        font-size: 14px;

        outline: none;

        box-shadow: none;
    }


    .shh-mobile-search-input-wrap input::placeholder {
        color: #78839a;
    }


    .shh-mobile-search-input-wrap input:focus {
        border-color: rgba(42, 181, 255, .55);
        background: rgba(255, 255, 255, .07);
    }


    .shh-mobile-search-close {
        display: inline-flex;

        flex: 0 0 42px;

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

        width: 42px;
        height: 42px;

        padding: 0;

        border: 0;
        border-radius: 11px;

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

        color: #aeb8ca;

        font-size: 16px;

        cursor: pointer;

        -webkit-appearance: none;
        appearance: none;

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


    .shh-mobile-search-close:hover {
        background: rgba(255, 255, 255, .10);
        color: #ffffff;
    }


    .shh-mobile-search-close:active {
        transform: scale(.92);
    }


    .shh-mobile-search-close:focus {
        outline: none;
        box-shadow: none;
    }


    .shh-mobile-search-close i {
        pointer-events: none;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 575.98px) {

    .shh-mobile-search-trigger {
        flex-basis: 36px;
        width: 36px;
        height: 36px;

        font-size: 18px;
    }


    .shh-mobile-search-panel {
        left: 8px;
        right: 8px;

        padding: 8px;
    }

}


/* =========================================================
   STATSLIP — BROWSE REBRAND / MARKET CENTRE
   Appended override layer. Prediction logic remains untouched.
   ========================================================= */

:root {
    --ss-bg: #020711;
    --ss-panel: #07111e;
    --ss-panel-2: #091827;
    --ss-border: rgba(90, 145, 198, .18);
    --ss-border-hot: rgba(0, 207, 255, .46);
    --ss-cyan: #08d4ff;
    --ss-blue: #0878ff;
    --ss-red: #ff3158;
    --ss-green: #19e3a5;
    --ss-yellow: #ffd45a;
    --ss-text: #f4f8ff;
    --ss-muted: #8298ad;
}

/* --- Hero ------------------------------------------------ */

.ss-command-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 28px;
    align-items: center;
    margin: 2px 0 14px;
    padding: 30px 30px 28px;
    border: 1px solid rgba(0, 203, 255, .18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 82% 22%, rgba(0, 179, 255, .16), transparent 31%),
        radial-gradient(circle at 12% 90%, rgba(22, 83, 255, .13), transparent 32%),
        linear-gradient(135deg, #061324 0%, #03101d 54%, #020914 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
}

.ss-command-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .23;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, black, transparent 85%);
}

.ss-command-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(3px);
    pointer-events: none;
}

.ss-command-glow-one {
    width: 280px;
    height: 280px;
    right: 12%;
    top: -160px;
    background: rgba(0, 204, 255, .12);
}

.ss-command-glow-two {
    width: 220px;
    height: 220px;
    left: -120px;
    bottom: -130px;
    background: rgba(33, 93, 255, .13);
}

.ss-command-copy {
    min-width: 0;
}

.ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7ddfff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.ss-live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ss-cyan);
    box-shadow: 0 0 13px rgba(8, 212, 255, .8);
}

.ss-command-copy h1 {
    margin: 10px 0 8px;
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    line-height: .96;
    letter-spacing: -1.9px;
    font-weight: 950;
}

.ss-command-copy h1 span {
    color: transparent;
    background: linear-gradient(90deg, #fff, var(--ss-cyan));
    background-clip: text;
    -webkit-background-clip: text;
}

.ss-command-copy p {
    max-width: 650px;
    margin: 0;
    color: #8ea6bc;
    font-size: 11px;
    line-height: 1.65;
}

.ss-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 19px;
}

.ss-command-primary,
.ss-command-secondary {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    transition: .18s ease;
}

.ss-command-primary {
    border: 1px solid transparent;
    color: #00121c;
    background: linear-gradient(100deg, #0bd7ff, #0786ff);
    box-shadow: 0 9px 28px rgba(0, 177, 255, .16);
}

.ss-command-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
}

.ss-command-secondary {
    border: 1px solid rgba(121, 169, 209, .22);
    color: #c8d9e8;
    background: rgba(255,255,255,.035);
}

.ss-command-secondary:hover {
    border-color: rgba(0, 204, 255, .38);
    color: #fff;
    background: rgba(0, 204, 255, .07);
}

.ss-command-panel {
    padding: 15px;
    border: 1px solid rgba(100, 157, 207, .18);
    border-radius: 14px;
    background: rgba(2, 10, 19, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(14px);
}

.ss-command-panel-head,
.ss-command-foot,
.ss-intelligence-row,
.ss-market-head,
.ss-match-actions,
.ss-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ss-command-panel-head {
    gap: 12px;
}

.ss-command-panel-head > div {
    display: grid;
    gap: 3px;
}

.ss-command-panel-head span:first-child {
    color: #58728a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.25px;
}

.ss-command-panel-head strong {
    color: #e9f5ff;
    font-size: 11px;
}

.ss-command-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #72eabf;
    font-size: 7px;
    font-weight: 900;
}

.ss-command-status > span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ss-green);
    box-shadow: 0 0 10px rgba(25,227,165,.6);
}

.ss-command-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 15px;
}

.ss-command-stat {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(86, 145, 198, .13);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.ss-command-stat-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--ss-cyan);
    background: rgba(0, 203, 255, .09);
}

.ss-command-stat-icon.bookmaker {
    color: var(--ss-yellow);
    background: rgba(255, 212, 90, .08);
}

.ss-command-stat div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ss-command-stat small {
    color: #58728a;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .9px;
}

.ss-command-stat strong {
    color: #dbeafa;
    font-size: 9px;
}

.ss-command-rule {
    height: 1px;
    margin: 14px 0 10px;
    background: rgba(111, 163, 207, .11);
}

.ss-command-foot {
    gap: 10px;
    color: #607b92;
    font-size: 7px;
}

.ss-command-foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ss-command-foot i {
    color: #6fabc9;
}


/* --- View controls / filters ----------------------------- */

.ss-view-toolbar {
    gap: 15px;
    margin: 8px 0 9px;
    padding: 0 2px;
}

.ss-view-heading {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.ss-view-kicker {
    color: var(--ss-cyan);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.ss-view-heading strong {
    color: #f3f8ff;
    font-size: 15px;
    font-weight: 900;
}

.ss-view-description {
    color: #607b92;
    font-size: 8px;
}

.ss-view-switch {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(84, 141, 193, .15);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}

.ss-view-switch button {
    height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    color: #7189a0;
    background: transparent;
    font-size: 8px;
    font-weight: 850;
}

.ss-view-switch button.active {
    color: #00121c;
    background: linear-gradient(90deg, #08d4ff, #0789ff);
    box-shadow: 0 5px 18px rgba(0, 193, 255, .13);
}

.ss-sb-mini {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    color: #06121c;
    font-size: 6px;
    font-weight: 950;
}

.ss-filter-bar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 7px;
    border: 1px solid rgba(76, 135, 188, .13);
    border-radius: 11px;
    background: rgba(5, 17, 30, .76);
}

.ss-filter-scroll {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ss-filter-scroll::-webkit-scrollbar {
    display: none;
}

.ss-filter {
    flex: 0 0 auto;
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #70889f;
    background: transparent;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.ss-filter:hover {
    color: #eaf5ff;
    background: rgba(0, 180, 255, .055);
}

.ss-filter.active {
    color: #dffaff;
    border-color: rgba(0, 202, 255, .25);
    background: rgba(0, 202, 255, .10);
}

.ss-filter.live.active {
    color: #fff;
    border-color: rgba(255,49,88,.32);
    background: rgba(255,49,88,.10);
}

.ss-filter small {
    color: #4e6a83;
    font-size: 7px;
}

.ss-filter-divider {
    width: 1px;
    height: 19px;
    flex: 0 0 1px;
    margin: 0 2px;
    background: rgba(100,150,195,.15);
}

.ss-filter-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ss-red);
    box-shadow: 0 0 9px rgba(255,49,88,.7);
}

.ss-filter-tools {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.ss-tool-button {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(84,141,193,.16);
    border-radius: 7px;
    color: #8da5ba;
    background: rgba(255,255,255,.025);
    font-size: 8px;
    font-weight: 800;
}


/* --- Match cards ----------------------------------------- */

.ss-match-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(75, 135, 189, .16);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(9, 26, 43, .98), rgba(4, 15, 27, .98));
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ss-match-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 200, 255, .30);
    box-shadow: 0 15px 34px rgba(0,0,0,.20);
}

.ss-match-card.is-selected {
    border-color: rgba(0, 211, 255, .55);
    box-shadow: 0 0 0 1px rgba(0, 211, 255, .08), 0 13px 34px rgba(0, 160, 255, .10);
}

.ss-match-card.is-predicted {
    border-color: rgba(25, 227, 165, .28);
}

.ss-match-head {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid rgba(93, 147, 194, .10);
    background: rgba(255,255,255,.012);
}

.ss-match-league {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-league-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #83dfff;
    background: rgba(0, 201, 255, .08);
    font-size: 9px;
}

.ss-match-league > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ss-match-league strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b9d0e2;
    font-size: 8px;
    font-weight: 850;
}

.ss-match-league span:not(.ss-league-icon) {
    color: #58738b;
    font-size: 7px;
}

.ss-match-head-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.ss-sportybet-pill,
.ss-market-unavailable,
.ss-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 6px;
    font-weight: 900;
    white-space: nowrap;
}

.ss-sportybet-pill {
    color: #dcecff;
    border: 1px solid rgba(255, 211, 72, .20);
    background: rgba(255, 211, 72, .06);
}

.ss-sportybet-pill > span,
.ss-market-provider > span {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: #06131d;
    background: var(--ss-yellow);
    font-size: 5px;
    font-weight: 950;
}

.ss-market-unavailable {
    color: #536c83;
    background: rgba(255,255,255,.025);
}

.ss-status-pill.live {
    color: #ff8ca4;
    background: rgba(255,49,88,.09);
}

.ss-status-pill.live > span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ss-red);
    box-shadow: 0 0 8px rgba(255,49,88,.75);
}

.ss-status-pill.finished {
    color: #7791a6;
    background: rgba(255,255,255,.035);
}

.ss-match-body {
    min-height: 108px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 13px 11px 10px;
}

.ss-team-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.ss-team-block.away {
    text-align: center;
}

.ss-team-logo {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(104,157,202,.16);
    border-radius: 11px;
    color: #58758e;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.ss-team-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.ss-team-block strong {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #dce9f5;
    font-size: 9px;
    font-weight: 850;
}

.ss-team-block > span {
    color: #526c83;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .7px;
}

.ss-match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.ss-match-score strong {
    color: #fff;
    font-size: 19px;
    line-height: 1;
    font-weight: 950;
}

.ss-match-score > span {
    color: #617a91;
    font-size: 12px;
    font-weight: 900;
}

.ss-match-score .ss-vs {
    color: #557089;
    font-size: 10px;
    letter-spacing: 1px;
}

.ss-match-score small {
    color: #4f6a81;
    font-size: 6px;
    font-weight: 900;
}

.ss-match-divider {
    height: 1px;
    margin: 0 11px;
    background: rgba(94, 149, 198, .10);
}

.ss-intelligence-row {
    gap: 10px;
    padding: 10px 11px;
}

.ss-intelligence-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.ss-ai-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #b9f5ff;
    background: linear-gradient(145deg, rgba(0, 204, 255,.15), rgba(0,90,255,.08));
    border: 1px solid rgba(0,204,255,.16);
}

.ss-intelligence-label > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ss-intelligence-label small {
    color: #4f6b82;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .9px;
}

.ss-intelligence-label strong {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #dceeff;
    font-size: 8px;
    font-weight: 850;
}

.ss-confidence {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ss-confidence strong {
    color: var(--ss-cyan);
    font-size: 12px;
    font-weight: 950;
}

.ss-confidence span {
    padding: 3px 5px;
    border-radius: 4px;
    color: #09151e;
    background: #8da2b4;
    font-size: 5px;
    font-weight: 950;
}

.ss-confidence span.success,
.ss-confidence span.YES {
    color: #001810;
    background: var(--ss-green);
}

.ss-confidence span.primary,
.ss-confidence span.info {
    color: #00121c;
    background: var(--ss-cyan);
}

.ss-confidence span.warning,
.ss-confidence span.shaky {
    color: #201600;
    background: var(--ss-yellow);
}

.ss-ai-awaiting {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #557189;
    font-size: 9px;
    font-weight: 800;
}

.ss-market-block {
    margin: 0 9px 9px;
    padding: 8px;
    border: 1px solid rgba(255, 212, 90, .12);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255,212,90,.035), rgba(255,255,255,.012));
}

.ss-market-head {
    gap: 8px;
    margin-bottom: 7px;
}

.ss-market-head > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.ss-market-provider {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #d6e6f4;
    font-size: 6px;
    font-weight: 900;
}

.ss-market-head strong {
    color: #8ca4b9;
    font-size: 7px;
    font-weight: 850;
}

.ss-market-head > small {
    color: #4f6a80;
    font-size: 6px;
    white-space: nowrap;
}

.ss-odds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.ss-odd {
    min-width: 0;
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 5px;
    padding: 6px;
    border: 1px solid rgba(95, 145, 188, .12);
    border-radius: 7px;
    background: rgba(2, 11, 20, .55);
}

.ss-odd > span {
    grid-row: 1 / 3;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    color: #6d8297;
    background: rgba(255,255,255,.05);
    font-size: 6px;
    font-weight: 950;
}

.ss-odd strong {
    color: #f3f8ff;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
}

.ss-odd small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4e687f;
    font-size: 5px;
}

.ss-market-empty {
    margin: 0 10px 9px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    color: #556e84;
    background: rgba(255,255,255,.018);
    font-size: 6px;
}

.ss-market-empty i {
    color: #657d93;
}

.ss-match-actions {
    gap: 6px;
    padding: 8px 10px 10px;
}

.ss-details-link,


.ss-prediction-action {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 7px;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: .17s ease;
}

.ss-prediction-action span {
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ss-prediction-action {
        font-size: 12px !important;
        font-weight: 800;
        gap: 4px;
    }
}



.ss-details-link {
    padding: 0 8px;
    color: #7089a0;
}

.ss-details-link:hover {
    color: #cdefff;
}

.ss-prediction-action {
    flex: 1;
    border: 1px solid rgba(0, 202, 255, .25);
    color: #00131d;
    background: linear-gradient(90deg, #08d4ff, #087fff);
    box-shadow: 0 7px 18px rgba(0, 157, 255, .09);
}

.ss-prediction-action:hover {
    color: #00131d;
    filter: brightness(1.07);
}

.ss-prediction-action.selected {
    color: #d8faff;
    border-color: rgba(0, 207, 255, .32);
    background: rgba(0, 190, 255, .08);
    box-shadow: none;
}

.ss-prediction-action.predicted {
    color: #001810;
    border-color: rgba(25, 227, 165, .35);
    background: linear-gradient(90deg, #19e3a5, #7cf2c9);
}

.ss-match-message {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px 9px;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 6px;
    font-weight: 750;
}

.ss-match-message.success {
    color: #68e4ba;
    background: rgba(25, 227, 165, .055);
}

.ss-match-message.error {
    color: #ff829a;
    background: rgba(255, 49, 88, .055);
}


/* --- Existing workspace refinements ---------------------- */

.pp-match-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.pp-match-area {
    min-width: 0;
}

.pp-match-workspace {
    gap: 10px;
}

.pp-pagination {
    margin-top: 15px;
}


/* --- Mobile ---------------------------------------------- */

@media (max-width: 1100px) {
    .ss-command-hero {
        grid-template-columns: 1fr;
    }

    .ss-command-panel {
        max-width: 560px;
    }

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

@media (max-width: 767.98px) {
    .ss-command-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 0 -2px 11px;
        padding: 21px 17px;
        border-radius: 14px;
    }

    .ss-command-copy h1 {
        margin-top: 8px;
        font-size: 31px;
        letter-spacing: -1.35px;
    }

    .ss-command-copy p {
        font-size: 9px;
        line-height: 1.55;
    }

    .ss-command-actions {
        margin-top: 14px;
    }

    .ss-command-primary,
    .ss-command-secondary {
        min-height: 36px;
        font-size: 8px;
    }

    .ss-command-panel {
        max-width: none;
        padding: 11px;
    }

    .ss-command-foot {
        font-size: 6px;
    }

    .ss-view-toolbar {
        display: block;
        margin-bottom: 8px;
    }

    .ss-view-heading {
        gap: 5px;
        margin-bottom: 7px;
    }

    .ss-view-heading strong {
        font-size: 13px;
    }

    .ss-view-description {
        width: 100%;
        font-size: 7px;
    }

    .ss-view-switch {
        width: 100%;
    }

    .ss-view-switch button {
        flex: 1;
        justify-content: center;
    }

    .ss-filter-bar {
        margin-bottom: 9px;
        padding: 5px;
    }

    .ss-filter-tools {
        display: none;
    }

    .ss-match-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .ss-match-card:hover {
        transform: none;
    }

    .ss-match-body {
        min-height: 105px;
    }

    .ss-team-logo {
        width: 37px;
        height: 37px;
    }

    .ss-team-logo img {
        width: 27px;
        height: 27px;
    }

    .ss-team-block strong {
        font-size: 9px;
    }

    .ss-match-actions {
        padding-bottom: 9px;
    }
}

@media (max-width: 390px) {
    .ss-command-copy h1 {
        font-size: 28px;
    }

    .ss-command-stat-grid {
        gap: 5px;
    }

    .ss-command-stat {
        padding: 8px;
    }

    .ss-match-head {
        padding-left: 9px;
        padding-right: 9px;
    }

    .ss-match-league strong {
        max-width: 130px;
    }

    .ss-sportybet-pill {
        display: none;
    }

    .ss-match-body {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        padding-left: 8px;
        padding-right: 8px;
    }

    .ss-intelligence-row {
        padding-left: 9px;
        padding-right: 9px;
    }

    .ss-confidence strong {
        font-size: 11px;
    }

    .ss-market-block {
        margin-left: 8px;
        margin-right: 8px;
    }
}


/* =========================================================
   STATSLIP v2 — COMPACT MATCH CENTRE + BOOKING SLIP
   ========================================================= */

/* Compact match cards: odds live exclusively in the slip. */
.pp-match-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ss-match-card {
    border-radius: 10px;
}

.ss-match-head {
    min-height: 36px;
    padding: 7px 9px;
}

.ss-match-body {
    min-height: 82px;
    padding: 9px 9px 8px;
    grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr);
}

.ss-team-logo {
    width: 31px;
    height: 31px;
    border-radius: 8px;
}

.ss-team-logo img {
    width: 23px;
    height: 23px;
}

.ss-team-block {
    gap: 3px;
}

.ss-team-block strong {
    font-size: 8px;
}

.ss-team-block > span {
    font-size: 5px;
}

.ss-match-score strong {
    font-size: 15px;
}

.ss-match-score .ss-vs {
    font-size: 8px;
}

.ss-match-score small {
    font-size: 5px;
}

.ss-intelligence-row {
    padding: 7px 9px;
}

.ss-ai-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    border-radius: 6px;
    font-size: 8px;
}

.ss-intelligence-label {
    gap: 6px;
}

.ss-intelligence-label strong {
    font-size: 7px;
}

.ss-confidence strong {
    font-size: 10px;
}

.ss-match-actions {
    padding: 6px 8px 8px;
}

.ss-details-link,
.ss-prediction-action {
    min-height: 27px;
    font-size: 6px;
}

.ss-match-message {
    margin: 0 8px 7px;
    padding: 5px 7px;
    font-size: 5px;
}

/* SportyBet branding: use the real provider favicon/logo asset rather than
   the previous text-only SB block. */
.ss-sportybet-pill {
    min-height: 21px;
    padding: 2px 6px 2px 3px;
    gap: 5px;
    border-radius: 6px;
}

.ss-sportybet-logo {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 5px;
    background: #ffd447;
    box-shadow: 0 0 0 1px rgba(255, 212, 71, .22);
}

.ss-sportybet-logo img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.ss-sportybet-pill > span:last-child {
    color: #d8e9f7;
    font-size: 5px;
    font-weight: 950;
    letter-spacing: .45px;
}

.ss-market-unavailable {
    min-height: 21px;
    font-size: 5px;
}

/* Hide the old card-level odds styles even if legacy markup remains. */
.ss-market-block,
.ss-market-empty,
.ss-odds-grid,
.ss-odd {
    display: none !important;
}

/* Advanced filter: persistent Livewire panel, no Bootstrap collapse. */
.ss-advanced-panel {
    margin: 0 0 11px;
    padding: 13px;
    border: 1px solid rgba(0, 202, 255, .16);
    border-radius: 11px;
    background:
        radial-gradient(circle at 90% 0%, rgba(0, 190, 255, .08), transparent 30%),
        linear-gradient(180deg, rgba(7, 23, 39, .98), rgba(4, 15, 27, .98));
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.ss-advanced-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.ss-advanced-head > div {
    display: grid;
    gap: 2px;
}

.ss-advanced-head span {
    color: #5c7891;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.ss-advanced-head strong {
    color: #e7f4ff;
    font-size: 10px;
}

.ss-advanced-close {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(84,141,193,.16);
    border-radius: 7px;
    color: #7890a6;
    background: rgba(255,255,255,.025);
}

.ss-advanced-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
}

.ss-advanced-field {
    min-width: 0;
    display: grid;
    gap: 5px;
    margin: 0;
}

.ss-advanced-field > span {
    color: #698197;
    font-size: 6px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.ss-advanced-field > div {
    height: 34px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid rgba(76,135,188,.15);
    border-radius: 7px;
    background: rgba(0, 8, 16, .48);
}

.ss-advanced-field > div > i {
    color: #5f8ca9;
    font-size: 10px;
    flex: 0 0 auto;
}

.ss-advanced-field input,
.ss-advanced-field select {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    outline: 0;
    border: 0;
    color: #dceafa;
    background: transparent;
    font-size: 8px;
}

.ss-advanced-field select option {
    color: #07111e;
}

.ss-advanced-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
}

.ss-advanced-foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #506a81;
    font-size: 6px;
}

.ss-advanced-foot button {
    border: 0;
    color: #74dfff;
    background: transparent;
    font-size: 7px;
    font-weight: 850;
}

/* Active advanced filter buttons. */
.ss-tool-button.active,
.ss-command-secondary.active {
    color: #bff5ff;
    border-color: rgba(0, 204, 255, .36);
    background: rgba(0, 190, 255, .08);
}

/* =========================================================
   SLIP — StatSlip prediction + SportyBet market
   ========================================================= */

.ss-slip-match {
    padding: 9px;
    border: 1px solid rgba(79, 141, 193, .14);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(7,22,37,.96), rgba(3,13,23,.96));
}

.ss-slip-event-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ss-slip-event-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ss-slip-event-league {
    color: #506b82;
    font-size: 5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.ss-slip-event-copy strong {
    color: #dceaf6;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.35;
}

.ss-slip-event-copy strong span {
    color: #536c83;
    margin: 0 3px;
    font-weight: 700;
}

.ss-slip-remove {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,49,88,.12);
    border-radius: 6px;
    color: #7a5361;
    background: rgba(255,49,88,.035);
    font-size: 8px;
}

.ss-slip-selection {
    margin-top: 8px;
    padding: 7px;
    border: 1px solid rgba(0, 202, 255, .12);
    border-radius: 7px;
    background: rgba(0, 190, 255, .025);
}

.ss-slip-selection-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.ss-slip-selection-label span {
    color: #50748d;
    font-size: 5px;
    font-weight: 950;
    letter-spacing: .75px;
}

.ss-slip-selection-label i {
    color: var(--ss-cyan);
    font-size: 8px;
}

.ss-slip-market-select-wrap {
    position: relative;
}

.ss-slip-market-select {
    width: 100%;
    min-height: 29px;
    padding: 0 25px 0 8px;
    border: 1px solid rgba(69, 133, 186, .17);
    border-radius: 6px;
    outline: 0;
    appearance: none;
    color: #e4f1fb;
    background: #061421;
    font-size: 9px;
    font-weight: 800;
}

.ss-slip-market-select option {
    color: #07111e;
    background: #fff;
}

.ss-slip-market-select-wrap > i {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #668198;
    font-size: 8px;
}

.ss-slip-ai-result {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 8px;
    border-radius: 7px;
    background: rgba(25,227,165,.035);
}

.ss-slip-ai-result > div {
    display: grid;
    gap: 2px;
}

.ss-slip-ai-result small {
    color: #4f766f;
    font-size: 5px;
    font-weight: 900;
}

.ss-slip-ai-result strong {
    color: #ccefe5;
    font-size: 9px;
    font-weight: 900;
}

.ss-slip-ai-result > span {
    color: var(--ss-green);
    font-size: 11px;
    font-weight: 950;
}

.ss-slip-pending {
    margin-top: 7px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 7px;
    color: #617b91;
    background: rgba(255,255,255,.018);
    font-size: 6px;
}

.ss-slip-sportybet {
    margin-top: 7px;
    padding: 8px;
    border: 1px solid rgba(255,212,71,.12);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,212,71,.035), rgba(255,255,255,.01));
}

.ss-slip-sporty-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.ss-slip-sporty-head > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ss-slip-sporty-head > div > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ss-slip-sporty-head small {
    color: #7e7148;
    font-size: 5px;
    font-weight: 950;
}

.ss-slip-sporty-head strong {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d7dfdf;
    font-size: 6px;
}

.ss-market-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 4px;
    font-weight: 950;
}

.ss-market-state.available {
    color: #071a14;
    background: var(--ss-green);
}

.ss-market-state.unavailable {
    color: #9d6372;
    background: rgba(255,49,88,.08);
}

.ss-slip-odd-row {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,212,71,.08);
}

.ss-slip-odd-row > div {
    display: grid;
    gap: 2px;
}

.ss-slip-odd-row small {
    color: #667d90;
    font-size: 8px;
    font-weight: bold;
}

.ss-slip-odd-row strong {
    color: #fff2bc;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}

.ss-slip-odd-row > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #716743;
    font-size: 4px;
    font-weight: 900;
}

.ss-slip-odd-row > span i {
    color: var(--ss-yellow);
}

.ss-slip-market-warning {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,212,71,.08);
    color: #806e49;
    font-size: 5px;
    line-height: 1.45;
}

.ss-slip-market-warning i {
    color: #a28b4f;
}

/* Booking panel. */
.ss-booking-panel,
.ss-booking-success,
.ss-booking-error {
    margin: 8px 9px 0;
    border-radius: 8px;
}

.ss-booking-panel {
    padding: 9px;
    border: 1px solid rgba(255,212,71,.14);
    background: rgba(255,212,71,.025);
}

.ss-booking-panel-copy {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ss-booking-panel-copy > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ss-booking-panel-copy small,
.ss-booking-success-head small {
    color: #766943;
    font-size: 5px;
    font-weight: 950;
    letter-spacing: .7px;
}

.ss-booking-panel-copy strong,
.ss-booking-success-head strong {
    color: #e8f0f5;
    font-size: 7px;
    font-weight: 900;
}

.ss-booking-panel-copy > div > span {
    color: #61788a;
    font-size: 5px;
}

.ss-generate-code {
    width: 100%;
    min-height: 30px;
    margin-top: 8px;
    border: 0;
    border-radius: 6px;
    color: #111008;
    background: linear-gradient(90deg, #ffd447, #ffdf6d);
    font-size: 7px;
    font-weight: 950;
}

.ss-generate-code:hover {
    filter: brightness(1.05);
}

.ss-booking-success {
    padding: 10px;
    border: 1px solid rgba(25,227,165,.22);
    background: linear-gradient(145deg, rgba(25,227,165,.055), rgba(0,0,0,.06));
}

.ss-booking-success-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ss-booking-success-head > div {
    display: grid;
    gap: 2px;
}

.ss-booking-code-box {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 0 8px;
    border: 1px dashed rgba(25,227,165,.30);
    border-radius: 7px;
    background: rgba(0,0,0,.22);
}

.ss-booking-code-box strong {
    color: #9effd9;
    font-size: 17px;
    letter-spacing: 2px;
    font-weight: 950;
}

.ss-booking-code-box button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(25,227,165,.18);
    border-radius: 6px;
    color: #72dcb7;
    background: rgba(25,227,165,.05);
}

.ss-booking-success p {
    margin: 7px 0 0;
    color: #668092;
    font-size: 5px;
    line-height: 1.5;
}

.ss-booking-actions {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

.ss-booking-open,
.ss-booking-actions button {
    flex: 1;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 6px;
    font-size: 6px;
    font-weight: 900;
    text-decoration: none;
}

.ss-booking-open {
    color: #03130e;
    background: var(--ss-green);
}

.ss-booking-actions button {
    border: 1px solid rgba(102,130,145,.18);
    color: #8299aa;
    background: rgba(255,255,255,.025);
}

.ss-booking-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255,49,88,.16);
    color: #e98599;
    background: rgba(255,49,88,.045);
    font-size: 6px;
    line-height: 1.45;
}

.ss-booking-error i {
    color: var(--ss-red);
}


/* Smaller slip spacing to keep several matches visible. */
.pp-slip-body {
    gap: 7px;
}

.pp-slip-match + .pp-slip-match {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .pp-match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .pp-match-grid {
        grid-template-columns: 1fr !important;
        gap: 7px;
    }

    .ss-match-head {
        min-height: 34px;
    }

    .ss-match-body {
        min-height: 76px;
    }

    .ss-advanced-panel {
        margin-left: -2px;
        margin-right: -2px;
    }

    .ss-advanced-grid {
        grid-template-columns: 1fr;
    }

    .ss-advanced-foot {
        align-items: flex-start;
    }

    .ss-command-secondary.active {
        color: #bff5ff;
    }
}

@media (max-width: 390px) {
    .ss-sportybet-pill > span:last-child {
        display: none;
    }

    .ss-match-head-right .ss-market-unavailable {
        max-width: 74px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* =========================================================
   STATSLIP FINAL POLISH — CLEAN MATCH CENTRE
   ========================================================= */

/* Provider branding: icon only, no yellow badge/background. */
.ss-sportybet-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
}

.ss-sportybet-icon img {
    width: 19px;
    height: 19px;
    object-fit: contain;
    border-radius: 50%;
    /* Removes the yellow cast of the favicon while preserving the mark. */
    filter: grayscale(1) brightness(1.55) contrast(.9);
}

.ss-sportybet-pill {
    width: 21px;
    min-width: 21px;
    min-height: 21px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ss-sportybet-pill > span:last-child {
    display: none !important;
}

.ss-sportybet-pill .ss-sportybet-logo {
    width: 21px;
    height: 21px;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.ss-sportybet-pill .ss-sportybet-logo img {
    filter: grayscale(1) brightness(1.55) contrast(.9);
}

/* Cleaner card proportions. */
.ss-match-card {
    border-radius: 12px;
    overflow: hidden;
}

.ss-match-head {
    min-height: 34px;
    padding: 7px 9px;
}

.ss-match-league strong {
    color: #9eb7cc;
    font-size: 7px;
    font-weight: 800;
}

.ss-match-league span:not(.ss-league-icon) {
    font-size: 6px;
}

.ss-match-body {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    gap: 6px;
    padding: 10px 9px 9px;
}

.ss-team-block {
    gap: 4px;
}

.ss-team-block strong {
    color: #ffffff;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.1px;
}

.ss-team-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.ss-team-logo img {
    width: 24px;
    height: 24px;
}

/* Scores are deliberately horizontal: HOME  1 : 0  AWAY. */
.ss-match-score {
    min-width: 58px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    align-content: center;
}

.ss-match-score strong {
    font-size: 17px;
    line-height: 1;
}

.ss-match-score > span {
    font-size: 12px;
    line-height: 1;
}

.ss-match-score .ss-vs {
    font-size: 8px;
    letter-spacing: .8px;
}

.ss-match-score small {
    flex: 0 0 100%;
    text-align: center;
    margin-top: 1px;
    font-size: 5px;
}

.ss-intelligence-row {
    min-height: 37px;
    padding: 7px 9px;
}

.ss-intelligence-label strong {
    color: #dce9f5;
    font-size: 7px;
    font-weight: 850;
}

.ss-confidence strong {
    font-size: 10px;
}

.ss-match-actions {
    gap: 5px;
    padding: 6px 8px 8px;
}

.ss-details-link,
.ss-prediction-action {
    min-height: 27px;
    font-size: 6px;
}

/* Slip: flatter hierarchy and tighter spacing. */
.pp-slip-body {
    gap: 7px;
}

.pp-slip-match {
    padding: 9px;
    border-radius: 10px;
}

.ss-slip-match-head,
.ss-slip-selection,
.ss-slip-ai-result,
.ss-slip-sportybet {
    border-radius: 8px;
}

.ss-slip-sporty-head > div:first-child {
    min-width: 0;
}

.ss-slip-provider-icon,
.ss-booking-provider-icon {
    flex: 0 0 22px;
}

.ss-slip-provider-icon img,
.ss-booking-provider-icon img {
    width: 19px;
    height: 19px;
}

.ss-slip-odd-row {
    padding-top: 6px;
}

.ss-market-state {
    font-size: 5px;
    padding: 3px 5px;
}

.ss-booking-panel,
.ss-booking-success {
    border-radius: 10px;
    padding: 10px;
}

/* Mobile: 2 compact cards side-by-side, giving four visible matches in two rows. */
@media (max-width: 767.98px) {
    .ss-match-grid,
    .pp-match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px;
    }

    .ss-match-head {
        padding: 6px 7px;
    }

    .ss-match-league {
        gap: 5px;
    }

    .ss-league-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
        border-radius: 5px;
        font-size: 7px;
    }

    .ss-match-league strong {
        max-width: 110px;
        font-size: 6px;
    }

    .ss-match-league span:not(.ss-league-icon) {
        font-size: 5px;
    }

    .ss-match-body {
        min-height: 92px;
        grid-template-columns: minmax(0, 1fr) 43px minmax(0, 1fr);
        gap: 2px;
        padding: 8px 6px 7px;
    }

    .ss-team-logo {
        width: 27px;
        height: 27px;
        border-radius: 7px;
    }

    .ss-team-logo img {
        width: 21px;
        height: 21px;
    }

    .ss-team-block strong {
        font-size: 8px;
        line-height: 1.12;
    }

    .ss-match-score {
        min-width: 43px;
        gap: 2px;
    }

    .ss-match-score strong {
        font-size: 14px;
    }

    .ss-match-score > span {
        font-size: 9px;
    }

    .ss-match-score small {
        font-size: 4.5px;
    }

    .ss-intelligence-row {
        padding: 6px;
        gap: 5px;
    }

    .ss-ai-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
        font-size: 7px;
    }

    .ss-intelligence-label strong {
        font-size: 6px;
    }

    .ss-intelligence-label small {
        font-size: 4.5px;
    }

    .ss-confidence strong {
        font-size: 9px;
    }

    .ss-confidence span {
        font-size: 4px;
    }

    .ss-match-actions {
        grid-template-columns: 1fr !important;
        gap: 4px;
        padding: 5px 6px 6px;
    }

    .ss-details-link,
    .ss-prediction-action {
        min-height: 24px;
        font-size: 5.5px;
    }

    .ss-sportybet-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .ss-sportybet-icon img {
        width: 17px;
        height: 17px;
    }

    .ss-slip-provider-icon,
    .ss-booking-provider-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .ss-slip-provider-icon img,
    .ss-booking-provider-icon img {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 390px) {
    .ss-match-grid,
    .pp-match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px;
    }

    .ss-match-league strong {
        max-width: 82px;
    }

    .ss-match-body {
        grid-template-columns: minmax(0, 1fr) 39px minmax(0, 1fr);
        padding-left: 5px;
        padding-right: 5px;
    }

    .ss-team-block strong {
        font-size: 7px;
    }

    .ss-match-score {
        min-width: 39px;
    }

    .ss-match-score strong {
        font-size: 13px;
    }
}


/* =========================================================
   FINAL STATSLIP CLEANUP — PROVIDER + SLIP BEHAVIOUR
   ========================================================= */

/* SportyBet provider icon: keep the real red mark, never grayscale it. */
.ss-sportybet-icon,
.ss-sportybet-pill .ss-sportybet-logo,
.ss-slip-provider-icon,
.ss-booking-provider-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ss-sportybet-icon img,
.ss-sportybet-pill .ss-sportybet-logo img,
.ss-slip-provider-icon img,
.ss-booking-provider-icon img {
    filter: none !important;
    opacity: 1 !important;
}

/* No yellow provider treatment anywhere in the slip. */
.ss-slip-sportybet {
    border-color: rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.018) !important;
}

.ss-slip-sporty-head small {
    color: #60798f !important;
}

.ss-slip-odd-row {
    border-top-color: rgba(255,255,255,.06) !important;
}

.ss-slip-odd-row strong {
    color: #f2f8ff !important;
}

.ss-slip-odd-row > span {
    color: #5d7890 !important;
}

/* The provider logo is enough on the card; don't create a badge around it. */
.ss-sportybet-pill {
    color: inherit !important;
}

/* Mobile: retain the compact two-column match grid. */
@media (max-width: 767.98px) {
    .pp-match-grid,
    .ss-match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
}

@media (max-width: 390px) {
    .pp-match-grid,
    .ss-match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

/* =========================================================
   FINAL POLISH — PAGINATION + LIVE MATCH CLOCK
   ========================================================= */

.ss-pagination {
    width: 100%;
    margin: 16px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.ss-page-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ss-page-number,
.ss-page-arrow {
    appearance: none;
    border: 1px solid rgba(104, 157, 202, .13);
    outline: 0;
    font-family: inherit;
    cursor: pointer;
    transition: .18s ease;
}

.ss-page-number {
    min-width: 31px;
    height: 31px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #7590a7;
    background: rgba(255,255,255,.025);
    font-size: 9px;
    font-weight: 850;
}

.ss-page-number:hover:not(.active) {
    color: #dcefff;
    border-color: rgba(0, 207, 255, .25);
    background: rgba(0, 207, 255, .055);
}

.ss-page-number.active {
    color: #06131c;
    border-color: rgba(0, 214, 255, .65);
    background: #00d6ff;
    box-shadow: 0 5px 18px rgba(0, 214, 255, .18);
}

.ss-page-arrow {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #a7c0d4;
    background: rgba(255,255,255,.035);
    font-size: 9px;
}

.ss-page-arrow:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(0, 207, 255, .25);
    background: rgba(0, 207, 255, .07);
}

.ss-page-arrow:disabled,
.ss-page-number:disabled {
    opacity: .28;
    cursor: default;
}

.ss-page-dots {
    min-width: 18px;
    color: #526c83;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    user-select: none;
}

/* Stronger live state: unmistakably active, but still compact. */
.ss-status-pill.live {
    min-height: 22px;
    padding: 0 7px;
    gap: 5px;
    color: #fff;
    border: 1px solid rgba(255, 55, 82, .38);
    border-radius: 7px;
    background: rgba(255, 40, 67, .13);
    box-shadow: inset 0 0 0 1px rgba(255, 40, 67, .035);
}

.ss-status-pill.live .ss-live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #ff304f;
    box-shadow: 0 0 0 0 rgba(255,48,79,.65), 0 0 10px rgba(255,48,79,.9);
    animation: ssLivePulse 1.25s infinite;
}

.ss-status-pill.live .ss-live-label {
    color: #ff6d82;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .7px;
}

.ss-status-pill.live .ss-live-minute {
    min-width: 22px;
    color: #fff;
    font-size: 9px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.ss-match-score .ss-live-minute-score {
    color: #ff536b;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .25px;
    animation: ssLiveMinuteGlow 2s ease-in-out infinite;
}

@keyframes ssLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(255,48,79,.60), 0 0 8px rgba(255,48,79,.65); }
    70% { box-shadow: 0 0 0 5px rgba(255,48,79,0), 0 0 12px rgba(255,48,79,.9); }
    100% { box-shadow: 0 0 0 0 rgba(255,48,79,0), 0 0 8px rgba(255,48,79,.65); }
}

@keyframes ssLiveMinuteGlow {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

@media (max-width: 767.98px) {
    .ss-pagination {
        margin-top: 13px;
        gap: 5px;
    }

    .ss-page-list {
        gap: 4px;
    }

    .ss-page-number,
    .ss-page-arrow {
        min-width: 29px;
        width: 29px;
        height: 29px;
        padding: 0;
        border-radius: 7px;
        font-size: 8px;
    }

    .ss-page-dots {
        min-width: 14px;
        font-size: 10px;
    }

    .ss-status-pill.live {
        min-height: 20px;
        padding: 0 5px;
        gap: 4px;
    }

    .ss-status-pill.live .ss-live-label {
        font-size: 6px;
    }

    .ss-status-pill.live .ss-live-minute {
        font-size: 8px;
    }
}


/* =========================================================
   CLEAN LIVE MATCH STATE
   One simple LIVE indicator. Match minute stays in the league line.
   ========================================================= */

.ss-match-card .ss-match-state {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ss-match-card .ss-live-minute-inline {
    display: inline-block;
    margin-left: 4px;
    color: #ff3f5f;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .1px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Simple LIVE indicator — no box, no glow, no heavy background. */
.ss-status-pill.live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ff536b;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .4px;
    line-height: 1;
    box-shadow: none;
}

.ss-status-pill.live > span {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: #ff536b;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .ss-match-card .ss-live-minute-inline {
        font-size: 7px;
    }

    .ss-status-pill.live {
        gap: 3px;
        font-size: 6px;
    }

    .ss-status-pill.live > span {
        width: 4px;
        height: 4px;
        flex-basis: 4px;
    }
}











/* =========================================================
   STATSLIP — FINAL LIVE TIME OVERRIDE
   Keep this as the LAST live-time definition in the stylesheet.
   ========================================================= */

.ss-match-card .ss-match-state {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.ss-match-card .ss-live-minute-inline {
    display: inline-block !important;
    margin-left: 5px !important;
    color: #ff304f !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .15px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

/* Keep LIVE itself small and clean. */
.ss-match-card .ss-status-pill.live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ff536b !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    letter-spacing: .4px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.ss-match-card .ss-status-pill.live > span {
    width: 4px !important;
    height: 4px !important;
    flex: 0 0 4px !important;
    border-radius: 50% !important;
    background: #ff304f !important;
    box-shadow: none !important;
}

/* Mobile: still compact, but the actual minute remains clearly visible. */
@media (max-width: 767.98px) {
    .ss-match-card .ss-live-minute-inline {
        margin-left: 4px !important;
        color: #ff304f !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .ss-match-card .ss-status-pill.live {
        gap: 3px !important;
        font-size: 6px !important;
    }

    .ss-match-card .ss-status-pill.live > span {
        width: 4px !important;
        height: 4px !important;
        flex-basis: 4px !important;
    }
}








/* =========================================================
   STATSLIP LIVE STREAM — CRESTS + CINEMATIC TV PLAYER
   Scoped to streaming components only.
   ========================================================= */
.streaming-team-block  {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}
.streaming-team-block.away  {
     text-align: center;
}
.streaming-crest  {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    overflow: hidden;
    border: 1px solid rgba(8,202,255,.19);
    border-radius: 16px;
    background: radial-gradient(circle at 35% 20%, rgba(8,202,255,.10), transparent 65%), linear-gradient(145deg,#0c2339,#061321);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.14);
}
.streaming-crest img  {
     width: 42px;
     height: 42px;
     object-fit: contain;
}
.streaming-crest-fallback  {
     width: 100%;
     height: 100%;
     place-items: center;
     color: #08caff;
     font-size: 20px;
     font-weight: 950;
}
.streaming-team-name  {
     max-width: 100%;
     color: #e8f3ff;
     font-size: 13px;
     line-height: 1.35;
     font-weight: 850;
     overflow-wrap: anywhere;
}
.streaming-vs  {
     padding: 5px 7px;
     border: 1px solid rgba(90,130,165,.14);
     border-radius: 7px;
     background: rgba(2,9,20,.55);
}
.streaming-league  {
     min-width: 0;
}
.sl-tv-component  {
     margin: 12px 0 14px;
     color: #f4f8ff;
}
.sl-tv-launch-row  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 13px 15px;
     border: 1px solid rgba(8,202,255,.22);
     border-radius: 12px;
     background: radial-gradient(circle at 0 50%,rgba(8,127,255,.10),transparent 45%),linear-gradient(135deg,#071a2d,#04101d);
     box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.sl-tv-launch-copy  {
     min-width: 0;
     display: grid;
     gap: 3px;
}
.sl-tv-live-mark  {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #08caff;
     font-size: 8px;
     font-weight: 950;
     letter-spacing: 1.2px;
}
.sl-tv-live-mark > span  {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #ff3156;
     box-shadow: 0 0 10px rgba(255,49,86,.65);
}
.sl-tv-launch-copy strong  {
     color: #edf7ff;
     font-size: 13px;
     font-weight: 900;
}
.sl-tv-launch-copy small  {
     color: #7892aa;
     font-size: 9px;
}
.sl-tv-launch  {
     min-height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     flex: 0 0 auto;
     padding: 0 17px;
     border: 1px solid rgba(8,202,255,.7);
     border-radius: 9px;
     color: #00121d;
     background: linear-gradient(100deg,#08caff,#5be3ff);
     box-shadow: 0 5px 20px rgba(8,202,255,.13);
     font-size: 10px;
     font-weight: 950;
     letter-spacing: .45px;
     transition: transform .18s ease,filter .18s ease;
}
.sl-tv-launch:hover  {
     transform: translateY(-1px);
     filter: brightness(1.06);
}
.sl-tv-spin  {
     animation: sl-tv-spin .8s linear infinite;
}
@keyframes sl-tv-spin  {
     to  {
     transform: rotate(360deg);
}
}
.sl-tv-overlay  {
     position: fixed;
     inset: 0;
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 22px;
}
.sl-tv-backdrop  {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0;
     background: rgba(0,5,12,.88);
     backdrop-filter: blur(12px);
}
.sl-tv-modal  {
     position: relative;
     z-index: 1;
     width: min(1120px,100%);
     max-height: calc(100dvh - 44px);
     overflow: auto;
     border: 1px solid rgba(8,202,255,.24);
     border-radius: 16px;
     background: #030b14;
     box-shadow: 0 35px 100px rgba(0,0,0,.65),0 0 70px rgba(0,111,255,.08);
}
.sl-tv-modal-head  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 12px 15px;
     border-bottom: 1px solid rgba(90,145,190,.15);
     background: linear-gradient(100deg,#081a2b,#040d18);
}
.sl-tv-brand  {
     display: flex;
     align-items: center;
     gap: 9px;
     min-width: 0;
}
.sl-tv-brand-icon  {
     width: 34px;
     height: 34px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(8,202,255,.23);
     border-radius: 9px;
     color: #08caff;
     background: rgba(8,202,255,.07);
}
.sl-tv-brand strong  {
     display: block;
     color: #eaf6ff;
     font-size: 10px;
     font-weight: 950;
     letter-spacing: .9px;
}
.sl-tv-brand strong b  {
     color: #08caff;
}
.sl-tv-brand small  {
     display: block;
     max-width: 60vw;
     margin-top: 2px;
     overflow: hidden;
     color: #718ba2;
     font-size: 8px;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.sl-tv-modal-actions  {
     display: flex;
     align-items: center;
     gap: 7px;
}
.sl-tv-control,.sl-tv-close  {
     min-height: 34px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     padding: 0 10px;
     border: 1px solid rgba(105,150,184,.2);
     border-radius: 8px;
     color: #9bb1c4;
     background: rgba(255,255,255,.035);
     font-size: 9px;
     font-weight: 850;
}
.sl-tv-control:hover  {
     color: #08caff;
     border-color: rgba(8,202,255,.35);
}
.sl-tv-close  {
     width: 34px;
     padding: 0;
     color: #ff9bac;
}
.sl-tv-scoreboard  {
     display: grid;
     grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     background: radial-gradient(ellipse at 50% 0,rgba(8,127,255,.10),transparent 70%),#050e18;
}
.sl-tv-side  {
     min-width: 0;
     color: #e3eff9;
     font-size: 11px;
     font-weight: 900;
}
.sl-tv-side.away  {
     text-align: right;
}
.sl-tv-score-vs  {
     color: #08caff;
     font-size: 8px;
     font-weight: 950;
     letter-spacing: .7px;
     white-space: nowrap;
}
.sl-tv-score-vs span  {
     color: #ff3156;
}
.sl-tv-screen  {
     position: relative;
     width: 100%;
     aspect-ratio: 16/9;
     min-height: 260px;
     overflow: hidden;
     background: radial-gradient(circle at 50% 40%,#0b1b2b,#010408 70%);
}
.sl-tv-screen iframe,.sl-tv-screen video  {
     display: block;
     width: 100%;
     height: 100%;
     min-height: 260px;
     border: 0;
     background: #010408;
     object-fit: contain;
}
.sl-tv-screen:fullscreen  {
     width: 100vw;
     height: 100vh;
     aspect-ratio: auto;
     border-radius: 0;
}
.sl-tv-screen:fullscreen iframe,.sl-tv-screen:fullscreen video  {
     width: 100%;
     height: 100%;
     min-height: 0;
}
.sl-tv-state  {
     min-height: 300px;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 26px;
     text-align: center;
}
.sl-tv-state > i  {
     margin-bottom: 12px;
     color: #08caff;
     font-size: 35px;
}
.sl-tv-state strong  {
     max-width: 520px;
     color: #edf7ff;
     font-size: 14px;
     font-weight: 900;
}
.sl-tv-state p  {
     max-width: 440px;
     margin: 7px 0 0;
     color: #8298ae;
     font-size: 10px;
     line-height: 1.6;
}
.sl-tv-loader  {
     width: 31px;
     height: 31px;
     margin-bottom: 15px;
     border: 3px solid rgba(8,202,255,.15);
     border-top-color: #08caff;
     border-radius: 50%;
     animation: sl-tv-spin .8s linear infinite;
}
.sl-tv-retry  {
     margin-top: 14px;
     padding: 9px 13px;
     border: 1px solid rgba(8,202,255,.3);
     border-radius: 8px;
     color: #08caff;
     background: rgba(8,202,255,.06);
     font-size: 10px;
     font-weight: 850;
}
.sl-tv-modal-foot  {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     padding: 10px 14px;
     border-top: 1px solid rgba(90,145,190,.13);
     color: #647e95;
     background: #040c15;
     font-size: 8px;
}
.sl-tv-modal-foot i  {
     margin-right: 4px;
     color: #16dfa0;
}
@media (max-width: 650px)  {
 .streaming-crest  {
     width: 48px;
     height: 48px;
     flex-basis: 48px;
     border-radius: 13px;
}
 .streaming-crest img  {
     width: 35px;
     height: 35px;
}
 .streaming-team-name  {
     font-size: 11px;
}
 .sl-tv-launch-row  {
     align-items: stretch;
     padding: 11px;
     gap: 8px;
}
 .sl-tv-launch-copy small  {
     max-width: 210px;
     line-height: 1.4;
}
 .sl-tv-launch  {
     align-self: center;
     min-height: 39px;
     padding: 0 11px;
     font-size: 9px;
}
 .sl-tv-overlay  {
     align-items: center;
     padding: 0;
}
 .sl-tv-modal  {
     width: 100%;
     max-height: 100dvh;
     border-radius: 0;
     border-left: 0;
     border-right: 0;
}
 .sl-tv-modal-head  {
     padding: 10px;
}
 .sl-tv-control  {
     width: 34px;
     padding: 0;
}
 .sl-tv-control span  {
     display: none;
}
 .sl-tv-scoreboard  {
     gap: 6px;
     padding: 10px 9px;
}
 .sl-tv-side  {
     font-size: 9px;
     overflow-wrap: anywhere;
}
 .sl-tv-score-vs  {
     font-size: 7px;
     letter-spacing: .2px;
}
 .sl-tv-screen  {
     min-height: 220px;
     aspect-ratio: 16/9;
}
 .sl-tv-screen iframe,.sl-tv-screen video  {
     min-height: 220px;
}
 .sl-tv-state  {
     min-height: 220px;
     padding: 18px;
}
 .sl-tv-modal-foot  {
     flex-direction: column;
     gap: 4px;
}
}
/* Full Watch page — same broadcast language as the match-detail TV popup. */
.stream-watch-page  {
     padding: 10px 0 34px;
     color: #f4f8ff;
}
.stream-watch-back  {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     margin: 0 0 13px;
     color: #8da5ba;
     text-decoration: none;
     font-size: 10px;
     font-weight: 850;
}
.stream-watch-back:hover  {
     color: #08caff;
}
.stream-watch-heading  {
     overflow: hidden;
     padding: 19px;
     border: 1px solid rgba(61,132,201,.20);
     border-radius: 14px 14px 0 0;
     background: radial-gradient(ellipse at 50% 0,rgba(8,127,255,.13),transparent 55%),linear-gradient(145deg,#081b2e,#030d18);
}
.stream-watch-heading-top  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
}
.stream-watch-league  {
     color: #08caff;
     font-size: 9px;
     font-weight: 900;
     letter-spacing: .8px;
     text-transform: uppercase;
}
.stream-watch-broadcast  {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #8ca3b8;
     font-size: 8px;
     font-weight: 950;
     letter-spacing: .6px;
}
.stream-watch-broadcast > span  {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #8298ae;
}
.stream-watch-broadcast.live  {
     color: #ff647c;
}
.stream-watch-broadcast.live > span  {
     background: #ff3156;
     box-shadow: 0 0 10px rgba(255,49,86,.6);
}
.stream-watch-teams  {
     display: grid;
     grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr);
     align-items: center;
     gap: 12px;
     margin-top: 18px;
}
.stream-watch-team  {
     min-width: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     text-align: center;
}
.stream-watch-team strong  {
     max-width: 100%;
     color: #e9f4ff;
     font-size: clamp(12px,1.8vw,18px);
     font-weight: 950;
     overflow-wrap: anywhere;
}
.stream-watch-team small  {
     color: #5f7a93;
     font-size: 7px;
     font-weight: 900;
     letter-spacing: 1px;
}
.stream-watch-team.away  {
     text-align: center;
}
.stream-watch-crest  {
     width: 54px;
     height: 54px;
     display: grid;
     place-items: center;
     overflow: hidden;
     border: 1px solid rgba(8,202,255,.19);
     border-radius: 15px;
     background: linear-gradient(145deg,#0d263d,#061321);
     color: #08caff;
     font-size: 20px;
     font-weight: 950;
}
.stream-watch-crest img  {
     width: 40px;
     height: 40px;
     object-fit: contain;
}
.stream-watch-vs  {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     color: #08caff;
     font-size: 18px;
     font-weight: 950;
}
.stream-watch-vs small  {
     color: #7890a7;
     font-size: 8px;
     font-weight: 750;
     text-align: center;
}
.stream-watch-broadcast-card  {
     overflow: hidden;
     border: 1px solid rgba(61,132,201,.20);
     border-top: 0;
     border-radius: 0 0 14px 14px;
     background: #030a12;
     box-shadow: 0 20px 55px rgba(0,0,0,.15);
}
.stream-watch-broadcast-head  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 13px 15px;
     border-bottom: 1px solid rgba(61,132,201,.15);
     background: linear-gradient(100deg,#071727,#030a12);
}
.stream-watch-overline  {
     color: #08caff;
     font-size: 7px;
     font-weight: 950;
     letter-spacing: 1.2px;
}
.stream-watch-broadcast-head h1  {
     margin: 4px 0 0;
     color: #e8f4ff;
     font-size: 13px;
     font-weight: 900;
}
.stream-watch-broadcast-head h1 span  {
     color: #59758d;
     font-weight: 700;
}
.stream-watch-fullscreen  {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     min-height: 34px;
     padding: 0 11px;
     border: 1px solid rgba(8,202,255,.23);
     border-radius: 8px;
     color: #08caff;
     background: rgba(8,202,255,.06);
     font-size: 9px;
     font-weight: 850;
}
.stream-watch-player  {
     position: relative;
     width: 100%;
     aspect-ratio: 16/9;
     min-height: 250px;
     overflow: hidden;
     background: #010408;
}
.stream-watch-player iframe,.stream-watch-player video  {
     display: block;
     width: 100%;
     height: 100%;
     min-height: 250px;
     border: 0;
     background: #010408;
     object-fit: contain;
}
.stream-watch-player:fullscreen  {
     width: 100vw;
     height: 100vh;
     aspect-ratio: auto;
}
.stream-watch-player:fullscreen iframe,.stream-watch-player:fullscreen video  {
     height: 100%;
     min-height: 0;
}
.stream-watch-message  {
     display: flex;
     min-height: 300px;
     align-items: center;
     justify-content: center;
     padding: 28px;
     text-align: center;
     background: radial-gradient(ellipse at 50% 0,rgba(8,127,255,.09),transparent 60%),#02070d;
}
.stream-watch-message-icon  {
     display: grid;
     place-items: center;
     width: 48px;
     height: 48px;
     margin: 0 auto 13px;
     border: 1px solid rgba(8,202,255,.18);
     border-radius: 14px;
     color: #08caff;
     background: rgba(8,202,255,.06);
     font-size: 22px;
}
.stream-watch-message h2  {
     margin: 0;
     color: #edf7ff;
     font-size: 15px;
     font-weight: 900;
}
.stream-watch-message p  {
     max-width: 410px;
     margin: 7px auto 0;
     color: #8298ae;
     font-size: 10px;
     line-height: 1.6;
}
.stream-watch-refresh  {
     margin-top: 13px;
     padding: 9px 13px;
     border: 1px solid rgba(8,202,255,.28);
     border-radius: 8px;
     color: #08caff;
     background: rgba(8,202,255,.06);
     font-size: 10px;
     font-weight: 850;
}
.stream-watch-footer  {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 11px 14px;
     border-top: 1px solid rgba(61,132,201,.14);
     color: #617b91;
     background: #040c14;
     font-size: 8px;
}
.stream-watch-footer a  {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #08caff;
     font-weight: 850;
     text-decoration: none;
}
@media (max-width: 600px)  {
     .stream-watch-heading  {
     padding: 14px 10px;
}
 .stream-watch-teams  {
     grid-template-columns: minmax(0,1fr) 65px minmax(0,1fr);
     gap: 5px;
}
 .stream-watch-crest  {
     width: 45px;
     height: 45px;
     border-radius: 12px;
}
 .stream-watch-crest img  {
     width: 34px;
     height: 34px;
}
 .stream-watch-team strong  {
     font-size: 11px;
}
 .stream-watch-vs  {
     font-size: 14px;
}
 .stream-watch-vs small  {
     font-size: 7px;
}
 .stream-watch-broadcast-head  {
     padding: 11px 9px;
}
 .stream-watch-broadcast-head h1  {
     max-width: 60vw;
     font-size: 10px;
     line-height: 1.4;
}
 .stream-watch-fullscreen  {
     width: 34px;
     padding: 0;
     flex: 0 0 34px;
}
 .stream-watch-fullscreen span  {
     display: none;
}
 .stream-watch-player  {
     min-height: 210px;
}
 .stream-watch-player iframe,.stream-watch-player video  {
     min-height: 210px;
}
 .stream-watch-footer  {
     align-items: flex-start;
     flex-direction: column;
}
}

/* =========================================================
           STATSLIP TV — CLEAN BROADCAST REBRAND
           Scoped to this page. Keeps existing markup and behavior.
           ========================================================= */
        .stream-watch-page {
            --sw-bg: #060b14;
            --sw-panel: #0b1422;
            --sw-panel-raised: #0e1b2c;
            --sw-line: rgba(151, 183, 215, .13);
            --sw-cyan: #45d7f5;
            --sw-blue: #3286ff;
            --sw-text: #f4f7fb;
            --sw-muted: #8b9db2;
            padding: 16px 0 30px;
            background:
                radial-gradient(ellipse at 50% -12%, rgba(50,134,255,.13), transparent 48%),
                var(--sw-bg);
            color: var(--sw-text);
            font-family: inherit;
        }
        .stream-watch-page .container-fluid {
            width: min(100% - 28px, 1480px);
            margin-inline: auto;
        }
        .stream-watch-page .sw-topbar-compact {
            display: grid;
            grid-template-columns: auto minmax(0,1fr) auto;
            gap: 18px;
            align-items: center;
            min-height: 58px;
            margin: 0 0 16px;
            padding: 9px 12px;
            border: 1px solid var(--sw-line);
            border-radius: 14px;
            background: rgba(11,20,34,.88);
            box-shadow: 0 10px 28px rgba(0,0,0,.12);
        }
        .stream-watch-page .stream-watch-back {
            min-height: 36px;
            gap: 8px;
            padding: 0 12px;
            border: 1px solid rgba(139,157,178,.18);
            border-radius: 9px;
            color: #b5c2d1;
            background: rgba(255,255,255,.025);
            font-size: 11px;
            font-weight: 750;
            transition: border-color .18s ease, color .18s ease, background .18s ease;
        }
        .stream-watch-page .stream-watch-back:hover {
            color: var(--sw-cyan);
            border-color: rgba(69,215,245,.38);
            background: rgba(69,215,245,.05);
        }
        .stream-watch-page .sw-compact-match {
            max-width: 620px;
            gap: 14px;
        }
        .stream-watch-page .sw-compact-team { gap: 8px; }
        .stream-watch-page .sw-compact-team img,
        .stream-watch-page .sw-compact-initial {
            flex: 0 0 30px;
            width: 30px;
            height: 30px;
            border: 1px solid rgba(139,157,178,.15);
            border-radius: 9px;
            background: #101d2d;
        }
        .stream-watch-page .sw-compact-initial {
            color: var(--sw-cyan);
            font-size: 11px;
        }
        .stream-watch-page .sw-compact-team strong {
            color: #e8eef6;
            font-size: 11px;
            font-weight: 800;
        }
        .stream-watch-page .sw-compact-score { min-width: 58px; gap: 5px; }
        .stream-watch-page .sw-compact-scoreboard { font-size: 17px; }
        .stream-watch-page .sw-compact-scoreboard .sw-score { font-size: 19px !important; }
        .stream-watch-page .sw-compact-status {
            color: #8092a7;
            font-size: 8px;
            letter-spacing: .75px;
        }
        .stream-watch-page .sw-compact-status.is-live { color: #ff6b83; }
        .stream-watch-page .sw-brand {
            gap: 9px;
            color: #eaf0f7;
            font-size: 11px;
            letter-spacing: 1.2px;
            white-space: nowrap;
        }
        .stream-watch-page .sw-brand-icon {
            width: 34px;
            height: 34px;
            border: 1px solid rgba(69,215,245,.25);
            border-radius: 10px;
            color: var(--sw-cyan);
            background: rgba(69,215,245,.07);
        }
        .stream-watch-page .stream-watch-heading { display: none !important; }
        .stream-watch-page .stream-watch-broadcast-card {
            margin-top: 0;
            overflow: hidden;
            border: 1px solid var(--sw-line);
            border-radius: 16px;
            background: #070d17;
            box-shadow: 0 22px 55px rgba(0,0,0,.2);
        }
        .stream-watch-page .stream-watch-broadcast-head {
            min-height: 66px;
            padding: 13px 17px;
            border-bottom: 1px solid var(--sw-line);
            background: linear-gradient(110deg, #0d1929, #0a111d);
        }
        .stream-watch-page .stream-watch-overline {
            gap: 8px;
            color: var(--sw-cyan);
            font-size: 8px;
            letter-spacing: 1.35px;
        }
        .stream-watch-page .stream-watch-broadcast-head h1 {
            margin-top: 5px;
            color: #f1f5fa;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: -.15px;
        }
        .stream-watch-page .sw-broadcast-subtitle {
            color: #8192a7;
            font-size: 10px;
            line-height: 1.5;
        }
        .stream-watch-page .stream-watch-fullscreen {
            min-height: 36px;
            padding: 0 12px;
            border: 1px solid rgba(69,215,245,.23);
            border-radius: 9px;
            color: var(--sw-cyan);
            background: rgba(69,215,245,.055);
            font-size: 10px;
            font-weight: 800;
            transition: background .18s ease, border-color .18s ease;
        }
        .stream-watch-page .stream-watch-fullscreen:hover {
            border-color: rgba(69,215,245,.5);
            background: rgba(69,215,245,.1);
        }
        .stream-watch-page .sw-watch-content-grid {
            display: grid;
            grid-template-columns: minmax(0,1fr) 300px;
            align-items: stretch;
            background: #050a12;
        }
        .stream-watch-page .sw-watch-player-column {
            min-width: 0;
            border-right: 1px solid var(--sw-line);
        }
        .stream-watch-page .stream-watch-player {
            min-height: 0;
            aspect-ratio: 16 / 9;
            background: #000;
        }
        .stream-watch-page .stream-watch-player iframe,
        .stream-watch-page .stream-watch-player video {
            object-fit: contain;
            background: #000;
        }
        .stream-watch-page .stream-watch-player [data-stream-overlay] {
            background: rgba(3,8,15,.94);
        }
        .stream-watch-page .sw-player-spinner {
            width: 38px;
            height: 38px;
            border-width: 2px;
            border-color: rgba(69,215,245,.17);
            border-top-color: var(--sw-cyan);
        }
        .stream-watch-page .sw-player-brand {
            color: var(--sw-cyan);
            font-size: 9px;
            letter-spacing: 2.2px;
        }
        .stream-watch-page .sw-player-status {
            font-size: 14px;
            font-weight: 800;
        }
        .stream-watch-page .sw-player-hint {
            color: #8a9bb0;
            font-size: 11px;
        }
        .stream-watch-page .sw-quality-controls {
            top: 12px;
            right: 12px;
            gap: 7px;
            padding: 7px 9px;
            border-color: rgba(190,211,232,.16);
            border-radius: 9px;
            background: rgba(7,13,23,.88);
            box-shadow: 0 6px 18px rgba(0,0,0,.2);
            font-size: 10px;
        }
        .stream-watch-page .sw-quality-controls label {
            color: #b6c4d4;
            font-size: 10px;
        }
        .stream-watch-page .sw-quality-controls select {
            border-color: rgba(139,157,178,.2);
            border-radius: 7px;
            color: #eaf1f8;
            background: #111c2b;
        }
        .stream-watch-page .stream-watch-message {
            min-height: 330px;
            padding: 30px 20px;
            background: radial-gradient(ellipse at 50% 12%, rgba(50,134,255,.09), transparent 60%), #050a12;
        }
        .stream-watch-page .stream-watch-message-icon {
            width: 46px;
            height: 46px;
            margin-bottom: 16px;
            border-color: rgba(69,215,245,.2);
            border-radius: 13px;
            color: var(--sw-cyan);
            background: rgba(69,215,245,.06);
        }
        .stream-watch-page .stream-watch-message h2 {
            font-size: clamp(17px,2.3vw,22px);
            letter-spacing: -.25px;
        }
        .stream-watch-page .stream-watch-message p {
            color: #8b9db2;
            font-size: 11px;
            line-height: 1.75;
        }
        .stream-watch-page .sw-player-retry,
        .stream-watch-page .stream-watch-refresh {
            min-height: 37px;
            border-radius: 9px;
            color: #06121c;
            background: var(--sw-cyan);
            box-shadow: none;
            font-size: 10px;
            transition: filter .18s ease, transform .18s ease;
        }
        .stream-watch-page .sw-player-retry:hover,
        .stream-watch-page .stream-watch-refresh:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
        }
        .stream-watch-page .sw-match-chat {
            min-height: 0;
            max-height: 560px;
            background: #0a1320;
        }
        .stream-watch-page .sw-chat-head {
            min-height: 62px;
            padding: 13px 14px;
            border-bottom-color: var(--sw-line);
        }
        .stream-watch-page .sw-chat-title strong {
            color: #edf3f9;
            font-size: 12px;
        }
        .stream-watch-page .sw-chat-title small {
            color: #8496aa;
            font-size: 10px;
        }
        .stream-watch-page .sw-chat-toggle {
            border-color: rgba(69,215,245,.2);
            border-radius: 9px;
            color: var(--sw-cyan);
            background: rgba(69,215,245,.06);
        }
        .stream-watch-page .sw-chat-messages { gap: 14px; padding: 15px 13px; }
        .stream-watch-page .sw-chat-message-top strong { color: #75dff4; }
        .stream-watch-page .sw-chat-message-top time { color: #73869b; }
        .stream-watch-page .sw-chat-message p { color: #d6e0eb; line-height: 1.65; }
        .stream-watch-page .sw-chat-empty { color: #8496aa; }
        .stream-watch-page .sw-chat-composer {
            border-top-color: var(--sw-line);
            background: rgba(255,255,255,.012);
        }
        .stream-watch-page .sw-chat-composer textarea {
            min-height: 68px;
            border-color: rgba(139,157,178,.2);
            border-radius: 9px;
            color: #edf3f9;
            background: #070e18;
        }
        .stream-watch-page .sw-chat-composer textarea:focus {
            border-color: rgba(69,215,245,.48);
            box-shadow: 0 0 0 3px rgba(69,215,245,.07);
        }
        .stream-watch-page .sw-chat-send {
            min-height: 37px;
            border-radius: 9px;
            color: #06121c;
            background: var(--sw-cyan);
            font-size: 10px;
            font-weight: 850;
        }
        .stream-watch-page .sw-chat-login {
            color: #9aaabe;
            line-height: 1.7;
        }
        .stream-watch-page .stream-watch-footer {
            gap: 10px;
            padding: 12px 16px;
            border-top-color: var(--sw-line);
            color: #7f91a5;
            background: #080f19;
            font-size: 9px;
        }
        .stream-watch-page .stream-watch-footer a { color: var(--sw-cyan); }
        .stream-watch-page .sw-footer-note i { color: #3dd7a2; }
        .stream-watch-page .sw-bottom-note {
            margin: 15px 4px 0;
            color: #687b90;
            font-size: 9px;
        }
        @media (max-width: 991.98px) {
            .stream-watch-page .sw-watch-content-grid { grid-template-columns: minmax(0,1fr); }
            .stream-watch-page .sw-watch-player-column { border-right: 0; }
            .stream-watch-page .sw-match-chat {
                min-height: 280px;
                max-height: 420px;
                border-top: 1px solid var(--sw-line);
            }
        }
        @media (max-width: 680px) {
            .stream-watch-page { padding-top: 9px; }
            .stream-watch-page .container-fluid { width: calc(100% - 18px); }
            .stream-watch-page .sw-topbar-compact {
                grid-template-columns: minmax(0,1fr) auto;
                gap: 8px;
                margin-bottom: 10px;
                padding: 8px;
                border-radius: 12px;
            }
            .stream-watch-page .sw-topbar-compact .stream-watch-back {
                grid-column: 1;
                grid-row: 1;
                justify-self: start;
                min-height: 34px;
                padding-inline: 9px;
            }
            .stream-watch-page .sw-topbar-compact .sw-brand {
                grid-column: 2;
                grid-row: 1;
                justify-self: end;
                gap: 6px;
                font-size: 10px;
            }
            .stream-watch-page .sw-brand-icon { width: 30px; height: 30px; }
            .stream-watch-page .sw-compact-match {
                grid-column: 1 / -1;
                grid-row: 2;
                max-width: none;
                gap: 8px;
                padding-top: 9px;
                border-top: 1px solid var(--sw-line);
            }
            .stream-watch-page .sw-compact-team { gap: 5px; }
            .stream-watch-page .sw-compact-team img,
            .stream-watch-page .sw-compact-initial {
                flex-basis: 24px;
                width: 24px;
                height: 24px;
                border-radius: 7px;
            }
            .stream-watch-page .sw-compact-team strong {
                max-width: 108px;
                font-size: 10px;
            }
            .stream-watch-page .sw-compact-score { min-width: 47px; }
            .stream-watch-page .sw-compact-scoreboard .sw-score { font-size: 17px !important; }
            .stream-watch-page .sw-compact-status { font-size: 7px; }
            .stream-watch-page .stream-watch-broadcast-card { border-radius: 12px; }
            .stream-watch-page .stream-watch-broadcast-head {
                min-height: 58px;
                gap: 8px;
                padding: 10px 11px;
            }
            .stream-watch-page .stream-watch-overline { font-size: 7px; }
            .stream-watch-page .stream-watch-broadcast-head h1 {
                max-width: 65vw;
                font-size: 12px;
                line-height: 1.4;
            }
            .stream-watch-page .sw-broadcast-subtitle { font-size: 9px; }
            .stream-watch-page .stream-watch-fullscreen {
                flex: 0 0 35px;
                width: 35px;
                min-height: 35px;
                padding: 0;
            }
            .stream-watch-page .stream-watch-fullscreen span { display: none; }
            .stream-watch-page .stream-watch-player { min-height: 0; }
            .stream-watch-page .sw-quality-controls {
                top: 7px;
                right: 7px;
                gap: 5px;
                max-width: calc(100% - 14px);
                padding: 5px 6px;
                font-size: 9px;
            }
            .stream-watch-page .sw-quality-controls > label:first-child { display: none; }
            .stream-watch-page .sw-quality-controls select {
                max-width: 92px;
                min-height: 27px;
                padding-block: 3px;
                font-size: 10px;
            }
            .stream-watch-page .sw-quality-note { display: none !important; }
            .stream-watch-page .stream-watch-footer {
                align-items: flex-start;
                flex-direction: column;
                padding: 11px;
                font-size: 8px;
            }
            .stream-watch-page .sw-bottom-note {
                align-items: flex-start;
                justify-content: flex-start;
                line-height: 1.6;
                text-align: left;
            }
        }
        @media (max-width: 360px) {
            .stream-watch-page .sw-compact-team strong { max-width: 78px; }
            .stream-watch-page .sw-compact-match { gap: 4px; }
            .stream-watch-page .sw-compact-team img,
            .stream-watch-page .sw-compact-initial {
                flex-basis: 21px;
                width: 21px;
                height: 21px;
            }
        }