:root {
    --cff-bg1: #111827;
    --cff-bg2: #172554;
    --cff-bg3: #0f766e;
    --cff-card: rgba(255,255,255,0.095);
    --cff-card2: rgba(255,255,255,0.145);
    --cff-border: #e6e5df;
    --cff-text: #f8fafc;
    --cff-muted: #cbd5e1;
    --cff-accent: #38bdf8;
    --cff-accent2: #facc15;
    --cff-red: #dc2626;
    --cff-red2: #991b1b;
	
	/*Agreement*/
	--sub-muted: #000;
	/*Agreement*/
	
	
/* === CFF Numbers Professional Theme (Updated) === */

    --siteTheme: #FBFAF2;

    --pageBG: #f8f8f8;
    --panelBG: #ffffff;
    --panelSoft: #f8f8f8;
    /*--panelBorder: #f72720; #f72720*/
    --panelBorder: linear-gradient(to right, #f72720, #f72720) 1;
    --panelShadow: 0 8px 24px rgba(51, 51, 51, 0.08);

    --headerBG: #ffffff;
    --headerBorder: #dedbd0;

    --textColor: #575656;
    --muted: #636262;
    --link: #636262;

    --buttonBG: #b4dced;
    --buttonText: #8a989e;
    --buttonHover: #46829c;
    --buttonHoverText: #d8e3e8;
	
    --numberBallBG: #ffffff;
    --numberBallBorder: #d2cec1;
    --numberBallText: #333333;

    --powerRed: #c62828;
    --powerRedDark: #9f1f1f;

    --bonusBG: #e7e1cf;
    --bonusText: #3f3f3f;
/* === CFF Numbers Professional Theme (Updated) === */
}


.cff-ball-big {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: grid;
    place-items: center;

    color: #0f172a;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.5px;

    background:
        radial-gradient(circle at 28% 22%,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.92) 12%,
            rgba(255,255,255,0.45) 22%,
            rgba(255,255,255,0.08) 34%,
            transparent 40%
        ),

        radial-gradient(circle at 50% 38%,
            #ffffff 0%,
            #f8fafc 28%,
            #dbe4ef 62%,
            #a8b7c9 82%,
            #7b8da3 100%
        );

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

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.9),
        inset 0 -10px 18px rgba(15,23,42,0.28),
        inset 0 -18px 28px rgba(0,0,0,0.12),

        0 3px 6px rgba(15,23,42,0.18),
        0 10px 20px rgba(15,23,42,0.22),
        0 18px 34px rgba(0,0,0,0.16);

    transform: translateZ(0);
}

.cff-ball-big::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 10px;
    width: 42%;
    height: 26%;

    border-radius: 999px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0.15)
    );

    transform: rotate(-12deg);

    pointer-events: none;
}





.cff-ball {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 36px;
    vertical-align: middle;

    color: #0f172a;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.5px;

    background:
        radial-gradient(circle at 28% 22%,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.92) 12%,
            rgba(255,255,255,0.45) 22%,
            rgba(255,255,255,0.08) 34%,
            transparent 40%
        ),

        radial-gradient(circle at 50% 38%,
            #ffffff 0%,
            #f8fafc 28%,
            #dbe4ef 62%,
            #a8b7c9 82%,
            #7b8da3 100%
        );

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

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.9),
        inset 0 -10px 18px rgba(15,23,42,0.28),
        inset 0 -18px 28px rgba(0,0,0,0.12),

        0 3px 6px rgba(15,23,42,0.18),
        0 10px 20px rgba(15,23,42,0.22),
        0 18px 34px rgba(0,0,0,0.16);

    transform: translateZ(0);
}

.cff-ball::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 10px;
    width: 42%;
    height: 26%;

    border-radius: 999px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0.15)
    );

    transform: rotate(-12deg);

    pointer-events: none;
}


.cff-ball-mini {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: grid;
    place-items: center;

    color: #0f172a;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -0.5px;

    background:
        radial-gradient(circle at 28% 22%,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.92) 12%,
            rgba(255,255,255,0.45) 22%,
            rgba(255,255,255,0.08) 34%,
            transparent 40%
        ),

        radial-gradient(circle at 50% 38%,
            #ffffff 0%,
            #f8fafc 28%,
            #dbe4ef 62%,
            #a8b7c9 82%,
            #7b8da3 100%
        );

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

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.9),
        inset 0 -10px 18px rgba(15,23,42,0.28),
        inset 0 -18px 28px rgba(0,0,0,0.12),

        0 3px 6px rgba(15,23,42,0.18),
        0 10px 20px rgba(15,23,42,0.22),
        0 18px 34px rgba(0,0,0,0.16);

    transform: translateZ(0);
}

.cff-ball-mini::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 7px;
    width: 34%;
    height: 18%;

    border-radius: 999px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.72),
        rgba(255,255,255,0.06)
    );

    transform: rotate(-14deg);

    pointer-events: none;
}

.cff-ball-power{
    background:radial-gradient(circle at 30% 25%, #f9b6b6, var(--powerRed) 65%, var(--powerRedDark));
    border-color:var(--powerRedDark);
    color:#000;
}

.cff-ball-mega{
    background:radial-gradient(circle at 30% 25%, #fff7c2, #f0b400 65%, #c98a00);
    border-color:#c98a00;
    color:#000;
}

.cff-ball-lucky{
    background:radial-gradient(circle at 30% 25%, #b8f7c5, #2e9f4d 65%, #166534);
    border-color:#166534;
    color:#000;
}