@font-face {
    font-family: 'IRANSansWeb';
    src: url('fonts/iransans/IRANSansWeb(FaNum).eot');
    src: url('fonts/iransans/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype');
    font-weight: normal;
}
/* ─── TORANJ WINNING COMBO REDESIGN — MOBILE GAME UI ─── */
:root {
    --brand: #50B70D;
    --brand-2: #76E21E;
    --brand-3: #1F8E16;
    --gold: #F4C95D;
    --gold-2: #A97923;
    --danger: #FF7A7A;
    --warn: #FFD166;
    --good: #89F05B;
    --bg: #050706;
    --ink: #F4F7F1;
    --muted: rgba(244,247,241,.68);
    --muted-2: rgba(244,247,241,.44);
    --glass: rgba(14,18,14,.70);
    --glass-2: rgba(255,255,255,.055);
    --card: rgba(19,25,20,.82);
    --card-2: rgba(9,13,10,.86);
    --line: rgba(80,183,13,.22);
    --line-2: rgba(255,255,255,.12);
    --shadow: 0 22px 70px rgba(0,0,0,.62);
    --glow: 0 0 30px rgba(80,183,13,.23);
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --grad-brand: linear-gradient(135deg,#8CF131 0%,#50B70D 45%,#277A18 100%);
    --grad-gold: linear-gradient(135deg,#FFF0A7 0%,#F4C95D 42%,#A97923 100%);
    --grad-card: linear-gradient(180deg,rgba(255,255,255,.082),rgba(255,255,255,.025));
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "IRANSansWeb", system-ui, sans-serif;
    background: radial-gradient(circle at 50% -10%, rgba(80,183,13,.20), transparent 33%), radial-gradient(circle at 15% 8%, rgba(244,201,93,.10), transparent 28%), linear-gradient(180deg,#060806 0%,#020302 100%);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow-x: hidden;
    direction: rtl;
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%);
    }

@media (min-width: 520px) {
    body {
        padding: 22px 0;
        align-items: flex-start;
    }
}

.app {
    position: relative;
    width: 100%;
    max-width: 432px;
    margin: 0 auto;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 50% 0%, rgba(80,183,13,.18), transparent 30%), radial-gradient(circle at 18% 18%, rgba(244,201,93,.12), transparent 22%), linear-gradient(180deg,#0b100b 0%,#050706 46%,#030403 100%);
}

    .app::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at center top, rgba(255,255,255,.07), transparent 24%), linear-gradient(90deg, transparent 0 8%, rgba(80,183,13,.045) 8% 8.5%, transparent 8.5% 91.5%, rgba(80,183,13,.045) 91.5% 92%, transparent 92%);
    }

@media (min-width: 520px) {
    .app {
        min-height: auto;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow), 0 0 0 1px rgba(80,183,13,.14), var(--glow);
    }
}

.screen {
    position: relative;
    z-index: 1;
    display: none;
    flex-direction: column;
    min-height: 100vh !important;
    padding: 16px 14px 22px;
}

    .screen.active {
        display: flex;
        animation: screenIn .32s cubic-bezier(.22,.9,.28,1) both;
    }

@keyframes screenIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.992);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 10px;
    margin-bottom: 12px;
}

.iconbtn {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--brand-2);
    border: 1px solid rgba(80,183,13,.24);
    border-radius: 15px;
    background: rgba(4,7,5,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    cursor: pointer;
    transition: .18s ease;
}

    .iconbtn:hover {
        transform: translateY(-1px);
        border-color: rgba(80,183,13,.48);
        background: rgba(80,183,13,.10);
    }

    .iconbtn:active {
        transform: translateY(0) scale(.98);
    }

    .iconbtn svg {
        width: 19px;
        height: 19px;
    }

.brand {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .brand img {
        height: 50px !important;
        width: auto;
        max-width: 180px;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 0 16px rgba(80,183,13,.15));
    }

    .brand .mark {
        width: 28px;
        height: 28px;
        color: var(--brand);
        filter: drop-shadow(0 0 12px rgba(80,183,13,.4));
    }

    .brand .b-name {
        display: none;
    }

    .brand .b-sub {
        font-size: 8px;
        line-height: 1;
 
        color: rgba(244,247,241,.48);
        font-weight: 900;
        text-transform: uppercase;
    }

.title {
    margin: 6px 0 6px;
    text-align: center;
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.12;
  
    font-weight: 950;
    color: var(--ink);
    text-shadow: 0 12px 32px rgba(0,0,0,.42);
}

#screen-entry .title::after {
    content: "";
    display: block;
    width: 94px;
    height: 5px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: var(--grad-brand);
    box-shadow: 0 0 22px rgba(80,183,13,.42);
}

.subtitle {
    margin: 0 auto;
    max-width: 350px;
    text-align: center;
    color: var(--muted);
    font-size: 12.4px;
    font-weight: 700;
    line-height: 2;
}

#screen-entry .subtitle {
    margin-bottom: 12px;
}

#screen-entry .topbar {
    margin-bottom: 18px;
}

#screen-entry::after {
    content: "";
    position: absolute;
    right: -55px;
    top: 98px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,183,13,.16), transparent 64%);
    pointer-events: none;
}

.hero {
    margin: 16px 0 8px;
    text-align: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-2);
    padding: 7px 13px;
    border: 1px solid rgba(80,183,13,.26);
    border-radius: 999px;
    background: rgba(80,183,13,.08);
    font-size: 11px;
    font-weight: 900;
}

    .hero-eyebrow span.dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 12px rgba(80,183,13,.8);
    }

.hero h1 {
    margin: 8px 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 950;
    color: var(--ink);
}
.subsitle {
    margin: 0px;
    padding: 0px;
    font-size: 19px;
    color: #c81029;
    margin-top: -10px;
    margin-bottom: 5px;
}
.hero p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.9;
    font-weight: 700;
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.stat-cell {
    position: relative;
    min-height: 116px;
    padding: 13px 8px 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 19px;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
    box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}

    .stat-cell::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 0, rgba(80,183,13,.15), transparent 52%);
        pointer-events: none;
    }

    .stat-cell:not(:last-child)::after {
        display: none;
    }

    .stat-cell svg {
        position: relative;
        width: 24px;
        height: 24px;
        color: var(--brand-2);
        margin-bottom: 8px;
        filter: drop-shadow(0 0 10px rgba(80,183,13,.42));
    }

    .stat-cell .s-val {
        position: relative;
        font-size: 13.2px;
        line-height: 1.35;
        color: var(--ink);
        font-weight: 950;
    }

    .stat-cell .s-lbl {
        position: relative;
        margin-top: 5px;
        font-size: 9.6px;
        line-height: 1.75;
        color: var(--muted-2);
        font-weight: 800;
    }

.card {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-md);
    background: var(--grad-card), rgba(9,12,10,.72);
    box-shadow: 0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
}

.form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field label {
    display: block;
    margin: 0 4px 7px;
    font-size: 11.4px;
    color: rgba(244,247,241,.72);
    font-weight: 900;
}

.input {
    width: 100%;
    min-height: 52px;
    color: var(--ink);
    font: 800 15px/1.4 inherit;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 17px;
    background: rgba(2,4,3,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(0,0,0,.20);
    outline: none;
    transition: .18s ease;
}

    .input::placeholder {
        color: rgba(244,247,241,.30);
        font-weight: 700;
    }

    .input:focus {
        border-color: rgba(80,183,13,.72);
        box-shadow: 0 0 0 4px rgba(80,183,13,.14), inset 0 1px 0 rgba(255,255,255,.08);
        background: rgba(5,8,6,.82);
    }

    .input.bad {
        border-color: rgba(255,122,122,.72);
        box-shadow: 0 0 0 4px rgba(255,122,122,.12);
    }

    .input[dir=ltr] {
        direction: ltr;
        text-align: right;
    }

.hint {
    min-height: 14px;
    margin: 5px 4px 0;
    font-size: 10.4px;
    color: var(--danger);
    font-weight: 800;
}

.note-box {
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .note-box .badge {
        width: 43px;
        height: 43px;
        flex: none;
        display: grid;
        place-items: center;
        color: var(--brand-2);
        border: 1px solid rgba(80,183,13,.25);
        border-radius: 15px;
        background: rgba(80,183,13,.09);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

        .note-box .badge svg {
            width: 22px;
            height: 22px;
        }

    .note-box h3 {
        margin: 1px 0 5px;
        font-size: 13px;
        line-height: 1.7;
        color: var(--ink);
        font-weight: 950;
    }

    .note-box p {
        margin: 0;
        font-size: 11.3px;
        line-height: 2;
        color: var(--muted);
        font-weight: 700;
    }

.ref-note {
    margin-top: 10px;
    padding: 0 9px;
    text-align: center;
    color: var(--muted-2);
    font-size: 10.7px;
    line-height: 1.8;
    font-weight: 700;
}

.sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 20;
}

.foot-note {
    margin-top: 9px;
    text-align: center;
    color: rgba(244,247,241,.38);
    font-size: 10px;
    line-height: 1.8;
    font-weight: 700;
}

.btn-primary, .btn-ghost {
    font-family: inherit;
    user-select: none;
}

.btn-primary {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 18px;
    color: #071007;
    background: var(--grad-brand);
    box-shadow: 0 16px 34px rgba(80,183,13,.30), inset 0 1px 0 rgba(255,255,255,.40);
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    transition: .18s ease;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(80,183,13,.38), inset 0 1px 0 rgba(255,255,255,.45);
    }

    .btn-primary:active {
        transform: translateY(0) scale(.99);
    }

    .btn-primary.muted {
        background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
        color: rgba(244,247,241,.58);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.09);
    }

    .btn-primary:disabled {
        opacity: .52;
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
    }

    .btn-primary svg {
        width: 18px;
        height: 18px;
    }

.btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 13px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.11);
    color: var(--brand-2);
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

    .btn-ghost:hover {
        border-color: rgba(80,183,13,.42);
        background: rgba(80,183,13,.08);
    }

    .btn-ghost:disabled {
        opacity: .42;
        cursor: not-allowed;
    }

    .btn-ghost svg {
        width: 15px;
        height: 15px;
    }

.cap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    margin-top: 12px;
}

    .cap .k {
        margin-bottom: 5px;
        font-size: 10.2px;
        color: var(--muted-2);
        font-weight: 900;
    }

    .cap .v {
        color: var(--brand-2);
        font-size: 15px;
        font-weight: 950;
        line-height: 1.6;
        text-shadow: 0 0 12px rgba(80,183,13,.32);
    }

        .cap .v small {
            margin-inline-start: 4px;
            color: var(--muted-2);
            font-size: 10px;
            font-weight: 800;
        }

    .cap .spent {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

        .cap .spent .item {
            padding: 9px;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px;
            background: rgba(0,0,0,.24);
        }

            .cap .spent .item strong {
                display: block;
                margin-bottom: 4px;
                color: rgba(244,247,241,.40);
                font-size: 9.6px;
                line-height: 1.5;
                font-weight: 900;
            }

            .cap .spent .item span {
                display: block;
                color: rgba(244,247,241,.88);
                font-size: 11px;
                line-height: 1.65;
                font-weight: 900;
            }

    .cap .rempill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 9px;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid rgba(80,183,13,.25);
        background: rgba(80,183,13,.08);
        color: var(--brand-2);
        font-size: 10.3px;
        font-weight: 950;
    }

        .cap .rempill.done {
            color: var(--good);
            border-color: rgba(137,240,91,.38);
            background: rgba(137,240,91,.08);
        }

        .cap .rempill .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 10px currentColor;
        }

.ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .ring svg {
        width: 64px;
        height: 64px;
        transform: rotate(-90deg);
        filter: drop-shadow(0 0 12px rgba(80,183,13,.28));
    }

    .ring .num {
        color: var(--brand-2);
        font-size: 14px;
        font-weight: 950;
    }

    .ring .sub {
        color: var(--muted-2);
        font-size: 8.5px;
        font-weight: 800;
        white-space: nowrap;
    }

.build-sub {
    margin: 9px 0 0;
    text-align: center;
    color: rgba(244,247,241,.42);
    font-size: 10.8px;
    line-height: 1.8;
    font-weight: 700;
}

.stage {
    position: relative;
    margin-top: 12px;
    min-height: 438px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0%, rgba(80,183,13,.30), transparent 38%), radial-gradient(ellipse at 50% 115%, rgba(0,0,0,.88), transparent 42%), #031006;
    box-shadow: inset 0 0 70px rgba(0,0,0,.72), 0 18px 44px rgba(0,0,0,.36);
    perspective: 1000px;
    perspective-origin: 50% 34%;
    isolation: isolate;
}

    .stage::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(circle at 14% 0%, rgba(255,255,255,.18), transparent 12%), radial-gradient(circle at 86% 0%, rgba(255,255,255,.15), transparent 13%), linear-gradient(180deg, rgba(255,255,255,.05), transparent 36%);
        pointer-events: none;
    }

.turf {
    position: absolute;
    left: -14%;
    right: -14%;
    top: -25%;
    bottom: -8%;
    transform: rotateX(38deg);
    transform-origin: 50% 100%;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 8%, rgba(0,0,0,.13) 8% 16%), radial-gradient(ellipse at center, rgba(80,183,13,.22), transparent 63%), linear-gradient(180deg,#08250c 0%,#061b0a 48%,#041206 100%);
    box-shadow: inset 0 0 120px rgba(0,0,0,.82);
}

    .turf .lines {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 4px rgba(80,183,13,.22));
    }

.far-glow {
    position: absolute;
    inset: 0 0 auto;
    height: 44%;
    z-index: 1;
    background: radial-gradient(120% 90% at 50% 0%, rgba(80,183,13,.26), transparent 66%);
    pointer-events: none;
}

.vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    box-shadow: inset 0 -52px 74px rgba(0,0,0,.62), inset 0 0 80px rgba(0,0,0,.42);
}

.field-rows {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 7px 14px;
}

.field-row {
    display: flex;
    justify-content: center;
    transform-origin: center;
    will-change: transform;
}

.pos-card {
    position: relative;
    width: 110px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 7px 10px;
    border-radius: 18px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: radial-gradient(circle at 50% -12%, rgba(80,183,13,.16), transparent 54%), linear-gradient(180deg, rgba(17,28,18,.96), rgba(4,8,5,.96));
    box-shadow: 0 12px 20px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
    animation: rise .52s cubic-bezier(.2,.8,.2,1) backwards;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .pos-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 36%);
        pointer-events: none;
    }



    .pos-card:hover, .pos-card:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(80,183,13,.54);
        box-shadow: 0 16px 26px rgba(0,0,0,.52), 0 0 20px rgba(80,183,13,.12);
        outline: none;
    }

    .pos-card:active {
        transform: translateY(-1px) scale(.99);
    }

.pos-token {
    position: relative;
    min-width: 70px;
    min-height: 26px;
    display: grid;
    place-items: center;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(80,183,13,.24);
    background: rgba(80,183,13,.10);
    color: var(--brand-2);
    font-size: 9px;
    line-height: 1.25;
    font-weight: 950;
}


.pos-fund {
    position: relative;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 950;
}

.risk-chip {
    position: relative;
    margin-top: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 8.2px;
    line-height: 1;
    font-weight: 950;
}

.risk-low {
    color: #9BFF78;
    background: rgba(137,240,91,.10);
    border: 1px solid rgba(137,240,91,.22);
}

.risk-mid {
    color: #FFE08A;
    background: rgba(255,209,102,.10);
    border: 1px solid rgba(255,209,102,.22);
}

.risk-high {
    color: #FFA1A1;
    background: rgba(255,122,122,.10);
    border: 1px solid rgba(255,122,122,.22);
}

.pos-pct {
    position: relative;
    color: var(--brand-2);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 950;
    text-shadow: 0 0 10px rgba(80,183,13,.28);
}



.pos-card .hover-hint {
    position: absolute;
    inset: auto 7px 7px;
    z-index: 3;
    padding: 5px 6px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: rgba(0,0,0,.78);
    color: rgba(244,247,241,.82);
    font-size: 8.7px;
    line-height: 1.5;
    font-weight: 800;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: .18s ease;
}

.pos-card:hover .hover-hint, .pos-card:focus-visible .hover-hint {
    opacity: 1;
    transform: translateY(0);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shake {
    0%,100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.pos-card.shake {
    animation: shake .34s;
}

input[type=range] {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    margin-top: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    outline: none;
    direction: ltr;
    cursor: pointer;
}

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: 2px solid rgba(7,16,7,.95);
        background: radial-gradient(circle at 33% 28%, #E5FFD9, #76E21E 45%, #2C9118 100%);
        box-shadow: 0 0 0 3px rgba(80,183,13,.16), 0 4px 10px rgba(0,0,0,.45);
    }

    input[type=range]::-moz-range-thumb {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: 2px solid rgba(7,16,7,.95);
        background: radial-gradient(circle at 33% 28%, #E5FFD9, #76E21E 45%, #2C9118 100%);
        box-shadow: 0 0 0 3px rgba(80,183,13,.16), 0 4px 10px rgba(0,0,0,.45);
    }

.quick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 12px;
}

    .quick-row .btn-ghost {
        width: 100%;
    }

.toast {
    position: absolute;
    border: 100px;
    z-index: 60;
    max-width: 330px;
    width: calc(100% - 42px);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid rgba(80, 183, 13, .36);
    border-radius: 16px;
    background: rgba(8, 13, 9, .94);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 22px rgba(80, 183, 13, .12);
    color: var(--ink);
    font-size: 11.5px;
    text-align: right;
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
    pointer-events: none;
    transition: .23s ease;
    margin: 0 auto;
    left: 39%;
}

    .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .toast svg {
        width: 16px;
        height: 16px;
        color: var(--brand-2);
        flex: none;
        margin-top: 3px;
    }

.verdict {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 0 4px;
}

    .verdict .medal {
        width: 76px;
        height: 76px;
        filter: drop-shadow(0 12px 24px rgba(80,183,13,.28));
    }

    .verdict .v-tag {
        text-align: center;
        color: var(--ink);
        font-size: 18px;
        line-height: 1.6;
        font-weight: 950;
    }

        .verdict .v-tag::first-letter {
            color: var(--brand-2);
        }

    .verdict .v-hi {
        max-width: 330px;
        text-align: center;
        color: var(--muted);
        font-size: 11.6px;
        line-height: 1.9;
        font-weight: 750;
    }

.profit-card {
    position: relative;
    margin-top: 14px;
    padding: 18px 14px;
    text-align: center;
    overflow: hidden;
}

    .profit-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(330px 150px at 50% 0, rgba(80,183,13,.17), transparent 70%);
        pointer-events: none;
    }

    .profit-card .k {
        position: relative;
        color: var(--muted);
        font-size: 11.3px;
        line-height: 1.8;
        font-weight: 800;
    }

    .profit-card .money {
        position: relative;
        margin: 6px 0 5px;
        color: var(--brand-2);
        font-size: 30px;
        line-height: 1.35;
        font-weight: 950;
        text-shadow: 0 0 18px rgba(80,183,13,.25);
    }

        .profit-card .money small {
            margin-inline-start: 5px;
            color: var(--muted-2);
            font-size: 12.6px;
            font-weight: 800;
        }

    .profit-card .ret {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 7px;
        padding: 6px 13px;
        border-radius: 999px;
        border: 1px solid rgba(80,183,13,.24);
        background: rgba(80,183,13,.08);
        color: var(--brand-2);
        font-size: 11.7px;
        font-weight: 950;
    }

.statgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

    .statgrid .s {
        padding: 10px 6px;
        text-align: center;
        border-radius: 16px;
        background: rgba(0,0,0,.20);
    }

        .statgrid .s small {
            display: block;
            margin-bottom: 5px;
            color: var(--muted-2);
            font-size: 9.4px;
            line-height: 1.5;
            font-weight: 900;
        }

        .statgrid .s strong {
            display: block;
            color: var(--brand-2);
            font-size: 11px;
            line-height: 1.7;
            font-weight: 950;
        }

.mix, .compare, .sharebox, .rosebox, .transferbox {
    margin-top: 12px;
    padding: 14px;
}

    .mix h4, .compare h4, .sharebox h4, .rosebox h4, .transferbox h4 {
        margin: 0 0 10px;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.7;
        font-weight: 950;
    }

.mix-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #1d6e12;
}

    .mix-row:last-child {
        margin-bottom: 0;
    }

.mix-ic {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid rgba(80,183,13,.22);
    border-radius: 10px;
    background: rgba(80,183,13,.08);
    color: var(--brand-2);
}

    .mix-ic svg {
        width: 14px;
        height: 14px;
    }

.mix-name {
    min-width: 78px;
    color: rgb(0 0 0 / 88%);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 900;
    margin-left: 15px;
}

.mix-bar {
    flex: 1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
}

    .mix-bar i {
        display: block;
        width: 0;
        height: 100%;
        border-radius: 999px;
        background: var(--grad-brand);
        transition: width .75s ease;
    }

.mix-pct {
    min-width: 34px;
    text-align: left;
    color: var(--brand-2);
    font-size: 11px;
    font-weight: 950;
}

.compare p, .rosebox p, .sharebox p, .transferbox p {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 2;
    font-weight: 700;
    text-align: justify;
}

.compare .pill, .sharebox .pill, .transferbox .pill {
    display: inline-block;
    align-items: center;
    /* gap: 6px; */
    margin-top: 9px;
    padding: 6px 10px;
    border: 1px solid rgba(80, 183, 13, .24);
    border-radius: 999px;
    background: rgba(80, 183, 13, .08);
    color: var(--brand-2);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 950;
    width: 100%;
    text-align: center;
}

.rosebox {
    border-color: rgba(244,201,93,.18);
    background: radial-gradient(circle at 20% 0, rgba(244,201,93,.12), transparent 42%), var(--grad-card), rgba(9,12,10,.72);
}

    .rosebox h4 {
        color: #FFE08A;
    }

.sharelink {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 15px;
    border: 1px dashed rgba(80,183,13,.28);
    background: rgba(0,0,0,.28);
    color: rgba(244,247,241,.84);
    font-size: 10.5px;
    line-height: 1.8;
    direction: ltr;
    text-align: left;
    word-break: break-all;
}

.share-actions, .result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 10px;
}

.fullbtn {
    margin-top: 10px;
}

.disclaimer {
    margin-top: 14px;
    padding: 0 6px;
    text-align: center;
    color: rgba(244,247,241,.36);
    font-size: 9.8px;
    line-height: 1.9;
    font-weight: 700;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    background: rgba(0,0,0,.66);
    backdrop-filter: blur(8px);
}

    .modal.show {
        display: flex;
    }

.modal-sheet {
    width: 100%;
    max-width: 432px;
    padding: 16px 14px 20px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 26px 26px 20px 20px;
    background: linear-gradient(180deg, rgba(21,29,22,.96), rgba(7,10,8,.98));
    box-shadow: 0 -18px 60px rgba(0,0,0,.60), 0 0 0 1px rgba(80,183,13,.10);
    animation: sheetUp .22s ease;
}

@keyframes sheetUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.modal-handle {
    width: 44px;
    height: 4px;
    margin: 0 auto 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

    .modal-head h3 {
        margin: 0;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.7;
        font-weight: 950;
    }

.modal-close {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: rgba(0,0,0,.22);
    color: var(--muted);
    cursor: pointer;
}

    .modal-close svg {
        width: 16px;
        height: 16px;
    }

.modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid rgba(80,183,13,.22);
    border-radius: 999px;
    background: rgba(80,183,13,.08);
    color: var(--brand-2);
    font-size: 10.3px;
    font-weight: 950;
}

.modal-body {
    margin-top: 12px;
    color: var(--muted);
    font-size: 11.8px;
    line-height: 2;
    font-weight: 700;
}

    .modal-body .mini {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 16px;
        background: rgba(0,0,0,.22);
    }

.hidden {
    display: none !important;
}

@media (max-width: 374px) {
    .screen {
        padding-inline: 10px;
    }

    .stats-strip {
        gap: 6px;
    }

    .stat-cell {
        min-height: 112px;
        padding-inline: 6px;
    }

    .pos-card {
        width: 104px;
    }

    .stage {
        min-height: 426px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ─── LIGHT CLEAN OVERRIDE — requested revision ─── */
:root {
    --brand: #50B70D;
    --brand-2: #42A80B;
    --brand-3: #2F7E16;
    --gold: #D9A72A;
    --gold-2: #B78314;
    --danger: #E25555;
    --warn: #C28B13;
    --good: #2FA414;
    --bg: #F4F7F1;
    --ink: #182315;
    --muted: rgba(24,35,21,.64);
    --muted-2: rgba(24,35,21,.44);
    --glass: rgba(255,255,255,.86);
    --glass-2: rgba(255,255,255,.72);
    --card: rgba(255,255,255,.96);
    --card-2: rgba(248,251,246,.98);
    --line: rgba(80,183,13,.18);
    --line-2: rgba(24,35,21,.08);
    --shadow: 0 18px 42px rgba(31,73,22,.12);
    --glow: 0 10px 28px rgba(80,183,13,.12);
    --grad-brand: linear-gradient(135deg,#63C925 0%,#50B70D 48%,#2E8813 100%);
    --grad-gold: linear-gradient(135deg,#F3D47B 0%,#D9A72A 55%,#A26D10 100%);
    --grad-card: linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,246,.96));
}

html, body {
    background: #EEF3EA !important;
    color: var(--ink) !important;
}

body {
    background: radial-gradient(circle at 50% 0%, rgba(80,183,13,.12), transparent 32%), linear-gradient(180deg,#FFFFFF 0%,#F3F7EF 46%,#EEF3EA 100%) !important;
}



.app::before {
    background: linear-gradient(180deg, rgba(80,183,13,.06), transparent 18%), linear-gradient(90deg, transparent 0 8%, rgba(80,183,13,.035) 8% 8.5%, transparent 8.5% 91.5%, rgba(80,183,13,.035) 91.5% 92%, transparent 92%) !important;
}

@media (min-width: 520px) {
    body {
        padding: 5px 0 !important;
    }
}

.screen {
    padding: 14px 13px 20px !important;
}

.topbar {
    min-height: 54px !important;
    margin-bottom: 10px !important;
    padding: 8px !important;
}

.iconbtn {
    color: var(--brand-3) !important;
    border-color: rgba(80,183,13,.16) !important;
    background: #F7FAF4 !important;
    box-shadow: none !important;
}

    .iconbtn:hover {
        background: #EFF7EA !important;
        border-color: rgba(80,183,13,.26) !important;
        transform: none !important;
    }

.brand img {
    filter: none !important;
    max-height: 50px !important;
}

.brand .b-sub {
    color: rgba(24,35,21,.38) !important;
 
}

.title {
    color: var(--ink) !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
}

#screen-entry .title::after {
    background: var(--brand) !important;
    box-shadow: none !important;
}

.subtitle,
.hero p,
.build-sub,
.ref-note,
.foot-note {
    color: var(--muted) !important;
}

.hero-eyebrow {
    color: var(--brand-3) !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.18) !important;
    box-shadow: none !important;
}

.card,
.compare,
.mix,
.sharebox,
.rosebox,
.transferbox,
.profit-card,
.modal-sheet {
    background: var(--card) !important;
    border: 1px solid rgba(80,183,13,.14) !important;
    box-shadow: 0 14px 32px rgba(31,73,22,.09), inset 0 1px 0 rgba(255,255,255,.95) !important;
    color: var(--ink) !important;
}

    .card::before,
    .profit-card::before {
        opacity: .55 !important;
    }

.stats-strip {
    gap: 8px !important;
    margin: 14px 0 12px !important;
}

.stat-cell {
    min-height: 96px !important;
    padding: 11px 7px 10px !important;
    border: 1px solid rgba(80,183,13,.13) !important;
    background: linear-gradient(180deg,#FFFFFF,#F7FAF4) !important;
    box-shadow: 0 12px 26px rgba(31,73,22,.08) !important;
}

    .stat-cell::before {
        background: radial-gradient(circle at 50% 0, rgba(80,183,13,.10), transparent 54%) !important;
    }

    .stat-cell svg {
        color: var(--brand) !important;
        filter: none !important;
    }

    .stat-cell .s-val,
    .note-box h3,
    .mix h4, .compare h4, .sharebox h4, .rosebox h4, .transferbox h4 {
        color: var(--ink) !important;
    }

    .stat-cell .s-lbl,
    .note-box p,
    .compare p, .rosebox p, .sharebox p, .transferbox p {
        color: var(--muted) !important;
    }

.field label {
    color: rgba(24,35,21,.66) !important;
}

.input {
    color: var(--ink) !important;
    background: #FFFFFF !important;
    border-color: rgba(80,183,13,.17) !important;
    box-shadow: 0 9px 22px rgba(31,73,22,.06) !important;
}

    .input::placeholder {
        color: rgba(24,35,21,.34) !important;
    }

    .input:focus {
        border-color: rgba(80,183,13,.55) !important;
        box-shadow: 0 0 0 3px rgba(80,183,13,.13) !important;
    }

.note-box .badge,
.mix-ic {
    color: var(--brand) !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.17) !important;
}

.sticky-cta {
}

.btn-primary {
    color: #FFFFFF !important;
    background: var(--grad-brand) !important;
    box-shadow: 0 14px 28px rgba(80,183,13,.22), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

    .btn-primary:hover {
        transform: none !important;
        box-shadow: 0 14px 28px rgba(80,183,13,.22), inset 0 1px 0 rgba(255,255,255,.24) !important;
    }

    .btn-primary.muted {
        color: rgba(24,35,21,.55) !important;
        background: #E6EEDF !important;
        filter: none !important;
    }

.btn-ghost {
    color: var(--brand-3) !important;
    background: #FFFFFF !important;
    border-color: rgba(80,183,13,.17) !important;
    box-shadow: 0 9px 20px rgba(31,73,22,.07) !important;
}

    .btn-ghost:hover {
        background: #F2F8EE !important;
        border-color: rgba(80,183,13,.28) !important;
    }

/* Compact capital bar: only the essential numbers remain */
.cap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
    min-height: unset !important;
    border-radius: 15px !important;
    background: #FFFFFF !important;
}

    .cap > div:first-child {
        width: 100%;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    .cap .k {
        margin: 0 !important;
        font-size: 9.4px !important;
        color: rgba(24,35,21,.48) !important;
        white-space: nowrap !important;
    }

    .cap .v {
        font-size: 12.4px !important;
        line-height: 1 !important;
        color: var(--brand-3) !important;
        text-shadow: none !important;
        white-space: nowrap !important;
    }

        .cap .v small {
            color: rgba(24,35,21,.42) !important;
            font-size: 8.8px !important;
        }

    .cap .rempill {
        margin: 0 0 0 auto !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        font-size: 9.3px !important;
        line-height: 1 !important;
        color: var(--brand-3) !important;
        background: #EFF8EA !important;
        border-color: rgba(80,183,13,.18) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

        .cap .rempill .dot {
            display: none !important;
        }

    .cap .spent,
    .cap .ring {
        display: none !important;
    }

.stage {
    margin-top: 10px !important;
    min-height: 418px !important;
    border: 1px solid rgba(80,183,13,.16) !important;
    border-radius: 22px !important;
    background: radial-gradient(ellipse at 50% 0%, rgba(80,183,13,.16), transparent 35%), linear-gradient(180deg,#F9FCF7 0%,#EEF8E9 100%) !important;
    box-shadow: 0 16px 34px rgba(31,73,22,.10), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

    .stage::before {
        background: linear-gradient(180deg, rgba(255,255,255,.65), transparent 45%) !important;
    }

.turf {
    background: repeating-linear-gradient(90deg, rgba(80,183,13,.055) 0 8.5%, transparent 8.5% 17%), linear-gradient(180deg,#DDF1D5 0%,#CFE9C6 48%,#BFE1B5 100%) !important;
    box-shadow: inset 0 0 80px rgba(47,126,22,.13) !important;
}

.far-glow {
    background: radial-gradient(130% 100% at 50% 0%, rgba(80,183,13,.15), transparent 64%) !important;
}

.vignette {
    box-shadow: inset 0 -40px 58px rgba(255,255,255,.55), inset 0 0 46px rgba(80,183,13,.05) !important;
}

.pos-card {
    color: var(--ink) !important;
    border: 1px solid rgba(80,183,13,.16) !important;
    background: linear-gradient(180deg,#FFFFFF 0%,#F7FAF4 100%) !important;
    box-shadow: 0 10px 22px rgba(31,73,22,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
    overflow: visible !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

    .pos-card::before {
        display: none !important;
    }

    .pos-card:hover,
    .pos-card:focus-visible {
        transform: none !important;
        border-color: rgba(80,183,13,.28) !important;
        box-shadow: 0 10px 22px rgba(31,73,22,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
    }



.pos-token {
    color: var(--brand-3) !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.18) !important;
    box-shadow: none !important;
}



.pos-fund {
    color: var(--ink) !important;
}

.pos-pct {
    color: var(--brand-3) !important;
    text-shadow: none !important;
}

.risk-chip {
    background: #F1F6EE !important;
    border-color: rgba(24,35,21,.07) !important;
    color: rgba(24,35,21,.56) !important;
}

.risk-low {
    color: #2B8A15 !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.18) !important;
}

.risk-mid {
    color: #A26D10 !important;
    background: #FBF3D9 !important;
    border-color: rgba(217,167,42,.20) !important;
}

.risk-high {
    color: #B44949 !important;
    background: #FFF0F0 !important;
    border-color: rgba(226,85,85,.16) !important;
}

.hover-hint,
.pos-card:hover .hover-hint,
.pos-card:focus-visible .hover-hint {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.pos-card input[type=range],
input[type=range] {
    position: relative !important;
    z-index: 10 !important;
    height: 5px !important;
    background: #E2EBDD;
}

    input[type=range]::-webkit-slider-thumb {
        width: 17px !important;
        height: 17px !important;
        background: radial-gradient(circle at 35% 30%, #FFFFFF, #50B70D 62%, #2E8813) !important;
        border: 2px solid #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(80,183,13,.25) !important;
    }

    input[type=range]::-moz-range-thumb {
        width: 17px !important;
        height: 17px !important;
        background: radial-gradient(circle at 35% 30%, #FFFFFF, #50B70D 62%, #2E8813) !important;
        border: 2px solid #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(80,183,13,.25) !important;
    }

.quick-row {
    gap: 8px !important;
    margin-top: 10px !important;
}

.toast {
    color: var(--ink) !important;
    background: #FFFFFF !important;
    border-color: rgba(80,183,13,.18) !important;
    box-shadow: 0 16px 38px rgba(31,73,22,.14) !important;
}

    .toast svg {
        color: var(--brand) !important;
    }

.verdict .v-tag,
.profit-card .money,
.title[style],
#vTag {
    color: var(--brand-3) !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--brand-3) !important;
}

.verdict .v-hi,
.profit-card .k,
.statgrid .s small,
.modal-body {
    color: var(--muted) !important;
}

.profit-card .ret,
.compare .pill, .sharebox .pill, .transferbox .pill,
.tag,
.cap .rempill.done {
    color: var(--brand-3) !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.18) !important;
}

.statgrid .s {
    background: #F8FBF5 !important;
}

    .statgrid .s strong,
    .mix-pct {
        color: var(--brand-3) !important;
    }

.mix-bar {
    background: #E2EBDD !important;
}

    .mix-bar i {
        background: var(--grad-brand) !important;
    }

.sharelink {
    color: var(--ink) !important;
    background: #F8FBF5 !important;
    border-color: rgba(80,183,13,.18) !important;
}

.modal {
    background: rgba(24,35,21,.28) !important;
}

.modal-close {
    color: rgba(24,35,21,.62) !important;
    background: #F6FAF2 !important;
    border-color: rgba(80,183,13,.14) !important;
}

.modal-head h3 {
    color: var(--ink) !important;
}

.modal-body .mini {
    background: #000000 !important;
    border-color: rgba(80,183,13,.14) !important;
}

.disclaimer {
    color: rgba(24,35,21,.45) !important;
}

strong[style*="var(--gold)"] {
    color: #A26D10 !important;
}


/* ─── FINAL ATTRACTIVE REDESIGN PASS ─── */
:root {
    --brand: #50B70D;
    --brand-2: #2F9E0B;
    --brand-3: #1D6E12;
    --gold: #E5B83C;
    --gold-2: #9C6812;
    --cream: #FFFDF6;
    --paper: #FFFFFF;
    --soft: #F3F8EF;
    --soft-2: #E8F3E2;
    --ink: #ffffff;
    --muted: rgb(255 255 255 / 62%);
    --muted-2: rgba(20, 34, 15, .44);
    --line: rgba(80, 183, 13, .16);
    --shadow: 0 18px 42px rgba(31, 73, 22, .13);
    --grad-brand: linear-gradient(135deg, #7DDB37 0%, #50B70D 48%, #267E15 100%);
    --grad-gold: linear-gradient(135deg, #FFE99A 0%, #E4B83C 48%, #A36D13 100%);
}

html, body {
    overflow-x: hidden !important;
    background: #EEF5EA !important
}

body {
    color: var(--ink) !important;
    background: radial-gradient(circle at 82% -4%,rgba(80,183,13,.18),transparent 26%),radial-gradient(circle at 10% 6%,rgba(229,184,60,.12),transparent 24%),linear-gradient(180deg,#fff 0%,#F5F9F2 52%,#EEF5EA 100%) !important
}

    body::before {
        display: none !important
    }

.app {
    max-width: 432px !important;
    background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,249,242,.96)),radial-gradient(circle at 50% 0%,rgba(80,183,13,.12),transparent 30%) !important;
    color: var(--ink) !important
}

    .app::before {
        background: url('bg_finance_worldcup.png') !important;
        background-size: cover !important;
        background-position: bottom !important;
    }

.screen {
    padding: 5px 12px 18px !important
}

.card {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(80,183,13,.14) !important;
    box-shadow: 0 14px 32px rgba(31,73,22,.08),inset 0 1px 0 rgba(255,255,255,.85) !important;
    color: var(--ink) !important;
    backdrop-filter: blur(14px)
}

.entry-hero {
    position: relative !important;
    min-height: auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 0 0px !important;
    border-radius: 30px !important;
}

    .entry-hero .hero-bg {
        position: absolute;
        inset: 0;
    }

    .entry-hero::after {
        content: "";
        position: absolute;
        inset: auto -18px -52px -18px;
        height: 80px;
        background: radial-gradient(ellipse at center,rgba(80,183,13,.16),transparent 62%);
        pointer-events: none
    }

.hero-topline {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 12px;
    background: #193f007d;
    position: absolute;
    width: 100%;
}

.hero-brand {
    width: auto !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 8px 25px 10px 0px;
}

    .hero-brand img {
        height: 38px !important;
        max-width: 150px !important;
        filter: none !important
    }

    .hero-brand .b-sub {
        color: rgba(20,34,15,.40) !important;
        font-size: 7px !important;
     
    }

.hero-socials {
    display: flex;
    gap: 7px;
    flex-direction: row-reverse;
    margin-left: 10px;
}

.hero-social {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 61px;
    color: var(--brand-3);
    text-decoration: none;
    background: rgb(0 0 0);
    border: 1px solid rgba(80, 183, 13, .14);
    box-shadow: 0 8px 18px rgba(31, 73, 22, .08);
}

    .hero-social:hover {
        background: #5a011f;
        color: white;
    }

    .hero-social svg {
        width: 16px;
        height: 16px
    }

.hero-copy {
    z-index: 2;
    bottom: 22px;
    text-align: right;
    padding: 30px;
    padding-bottom: 15px;
    padding-top: 15px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--brand-3);
    background: rgba(239,248,234,.92);
    border: 1px solid rgba(80,183,13,.18);
    font-size: 10.5px;
    font-weight: 950
}

    .hero-kicker::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 10px rgba(80,183,13,.55)
    }

.hero-copy h1 {
    margin: 9px 0 7px;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 950;
    color: var(--ink);
  
}

.hero-copy p {
    margin: 0;
    color: rgb(255 255 255 / 70%);
    font-size: 12px;
    line-height: 1.9;
    font-weight: 800;

}

.hero-floating-card {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 86px;
    min-height: 66px;
    border-radius: 22px;
    color: #6B4709;
    background: linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,248,222,.88));
    border: 1px solid rgba(229,184,60,.28);
    box-shadow: 0 14px 28px rgba(156,104,18,.12)
}

    .hero-floating-card span {
        font-size: 9.5px;
        font-weight: 900;
        color: rgba(107,71,9,.62)
    }

    .hero-floating-card strong {
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
        font-weight: 950
    }

.game-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: -10px 0 15px !important;
}

.step-card {
    position: relative;
    min-height: 95px;
    padding: 14px 8px 10px;
    border-radius: 22px;
    background: linear-gradient(180deg, #000000ab, #000000);
    border: 1px solid rgba(80, 183, 13, .14);
    box-shadow: 0 12px 28px rgba(31, 73, 22, .08);
    text-align: center;
    margin-top: 15px;
}

    .step-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 44px;
    }

.step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-brand);
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 8px 16px rgba(80, 183, 13, .20);
    margin: 0 auto;
    margin-top: -34px;
}

.step-icon {
    position: relative;
    width: 36px;
    height: 36px;
    margin: 2px auto 5px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--brand-3);
}

    .step-icon img {
        width: 23px;
        filter: invert(1);
    }

.step-card strong {
    display: block;
    color: var(--ink);
    font-size: 11.5px;
    line-height: 1.55;
    font-weight: 950
}

.step-card small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 800
}

.form {
    margin-top: 10px !important;
    padding: 12px;
    border-radius: 24px;
    background: rgb(26 26 26 / 42%);
    border: 1px solid rgba(80, 183, 13, .13);
    box-shadow: 0 14px 32px rgba(31, 73, 22, .08);
    padding: 10px 30px;
    color: white;
    margin: 25px;
    margin-bottom: 5px;
}

.field label {
    color: rgba(20,34,15,.65) !important;
    font-size: 11px !important
}

.input {
    min-height: 50px !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    background: #000000b8 !important;
    border: none !important;
}

    .input::placeholder {
        color: #7d7d7d !important;
        font-family: 'IRAN Sans';
    }

.note-box {
    margin-top: 10px !important;
    padding: 0px 60px !important;
    border-radius: 22px !important;
}

    .note-box h3 {
        color: var(--ink) !important
    }

    .note-box p {
        color: var(--muted) !important
    }

    .note-box .badge {
        color: var(--brand-3) !important;
        background: #EFF8EA !important;
        border-color: rgba(80,183,13,.15) !important
    }

.ref-note, .foot-note, .build-sub {
    color: var(--muted) !important
}

.sticky-cta {
}

.btn-primary {
    color: #fff !important;
    background: var(--grad-brand) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 30px rgba(80,183,13,.24),inset 0 1px 0 rgba(255,255,255,.28) !important
}

    .btn-primary.muted {
        color: rgba(20,34,15,.55) !important;
        background: #E5EEDF !important;
        box-shadow: none !important
    }

.btn-ghost {
    color: var(--brand-3) !important;
    background: #fff !important;
    border-color: rgba(80,183,13,.15) !important;
    box-shadow: 0 10px 22px rgba(31,73,22,.07) !important
}

.inner-topbar {
    border-radius: 24px;
    min-height: 56px !important;
}

.iconbtn {
    color: var(--brand-3) !important;
    background: #F8FCF6 !important;
    border-color: rgba(80,183,13,.14) !important;
    box-shadow: none !important
}

.brand img {
    filter: none !important
}

.progress-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 39px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    margin-top: 0px !important;
    overflow: hidden !important;
    background: #EEF7EA !important;
    border: 1px solid rgba(80, 183, 13, .16) !important;
    box-shadow: 0 12px 26px rgba(31, 73, 22, .08), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
    width: 100%;
}

    .progress-card > #capProgressFill {
        position: absolute;
        inset: 0 0 0 auto;
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(80,183,13,.14), rgba(80,183,13,.32));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
        transition: width .24s ease;
        pointer-events: none;
        z-index: 0;
    }

.progress-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.progress-label {
    display: block;
    color: rgba(20,34,15,.56);
    font-size: 10.8px;
    font-weight: 900;
    white-space: nowrap;
}

.progress-content strong {
    display: block;
    color: var(--brand-3);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 950;
    white-space: nowrap;
}

    .progress-content strong small {
        margin-inline-start: 4px;
        color: rgba(20,34,15,.48);
        font-size: 9.5px;
        font-weight: 800;
    }

.progress-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.cap .spent, .cap .ring, #remainMoney, #modeText, #remPill {
    display: none !important
}

.stage {
    min-height: 402px !important;
    margin-top: 10px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg,#F9FDF7 0%,#EFF8EA 100%) !important;
    border: 1px solid rgba(80,183,13,.16) !important;
    box-shadow: 0 18px 38px rgba(31,73,22,.10) !important
}

    .stage::before {
        background: linear-gradient(180deg,rgba(255,255,255,.82),transparent 42%) !important
    }

.turf {
    left: -10% !important;
    right: -10% !important;
    top: -24% !important;
    bottom: -9% !important;
    background: repeating-linear-gradient(90deg,rgba(80,183,13,.06) 0 8.5%,rgba(255,255,255,.18) 8.5% 17%),linear-gradient(180deg,#DDF4D4,#C7E9BB) !important;
    box-shadow: inset 0 0 70px rgba(47,126,22,.12) !important
}

.vignette {
    box-shadow: inset 0 -34px 54px rgba(255,255,255,.60),inset 0 0 40px rgba(80,183,13,.04) !important
}

.far-glow {
    background: radial-gradient(120% 90% at 50% 0%,rgba(80,183,13,.14),transparent 66%) !important
}

.pos-card {
    width: 104px !important;
    padding: 8px 7px 10px !important;
    border-radius: 20px !important;
    overflow: visible !important;
    color: var(--ink) !important;
    background: linear-gradient(180deg,#fff,#F8FCF6) !important;
    border: 1px solid rgba(80,183,13,.16) !important;
    box-shadow: 0 10px 22px rgba(31,73,22,.11),inset 0 1px 0 rgba(255,255,255,.9) !important;
    transform: none !important
}

    .pos-card::before {
        display: none !important
    }

    .pos-card:hover, .pos-card:focus-visible {
        transform: none !important;
        border-color: rgba(80,183,13,.24) !important;
        box-shadow: 0 10px 22px rgba(31,73,22,.11),inset 0 1px 0 rgba(255,255,255,.9) !important
    }


.pos-token {
    min-height: 24px !important;
    min-width: 64px !important;
    color: var(--brand-3) !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.14) !important
}



.pos-fund {
    min-height: 29px !important;
    color: var(--ink) !important;
    font-size: 12.4px !important
}

.risk-chip {
    display: none !important
}

.pos-pct {
    color: var(--brand-3) !important;
    text-shadow: none !important;
    font-size: 14px !important
}

.hover-hint, .pos-card:hover .hover-hint, .pos-card:focus-visible .hover-hint {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important
}

input[type=range] {
    height: 6px !important;
    background: #E1ECDC !important;
    z-index: 5 !important
}

    input[type=range]::-webkit-slider-thumb {
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #fff !important;
        background: var(--grad-brand) !important;
        box-shadow: 0 4px 10px rgba(80,183,13,.26) !important
    }

    input[type=range]::-moz-range-thumb {
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #fff !important;
        background: var(--grad-brand) !important;
        box-shadow: 0 4px 10px rgba(80,183,13,.26) !important
    }

.quick-row {
    margin-top: 9px !important;
    gap: 8px !important
}

.result-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px !important;
    background: linear-gradient(180deg,#fff,#F8FCF6) !important
}

    .result-card::before {
        content: "" !important;
        position: absolute;
        inset: 0;
        opacity: 1 !important;
        background: radial-gradient(260px 120px at 50% 0,rgba(80,183,13,.13),transparent 72%) !important
    }

.profit-card .k, .verdict .v-hi, .statgrid .s small {
    color: var(--muted) !important
}

.profit-card .money, #vTag {
    color: var(--brand-3) !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--brand-3) !important
}


.profit-card .ret, .sharebox .pill, .tag {
    color: var(--brand-3) !important;
    background: none !important;
    border: none !important;
}

.statgrid .s {
    background: #F8FCF6 !important;
    border-color: rgba(80,183,13,.10) !important
}

    .statgrid .s strong, .mix-pct {
        color: var(--brand-3) !important
    }

.mix-name {
    color: var(--ink) !important
}

.mix-bar {
    background: #E1ECDC !important
}

.mix-ic {
    color: var(--brand-3) !important;
    background: #EFF8EA !important;
    border-color: rgba(80,183,13,.14) !important
}

.share-card {
    border-radius: 24px !important
}

.sharelink {
    color: var(--ink) !important;
    background: #F8FCF6 !important;
    border-color: rgba(80,183,13,.16) !important
}

.toast, .modal-sheet {
    color: var(--ink) !important;
    background: #000000 !important;
    border-color: rgba(80,183,13,.14) !important;
    box-shadow: 0 18px 42px rgba(31,73,22,.13) !important
}

.modal {
    background: rgba(20,34,15,.28) !important
}

.modal-head h3, .mix h4, .sharebox h4 {
    color: var(--ink) !important
}

.modal-body, .sharebox p {
    color: var(--muted) !important
}

@media(max-width:374px) {
    .entry-hero {
        min-height: 244px !important
    }

    .hero-copy h1 {
        font-size: 34px
    }

    .hero-floating-card {
        width: 78px;
        min-height: 60px
    }

    .step-card {
        padding-inline: 6px
    }

    .pos-card {
        width: 100px !important
    }

    .stage {
        min-height: 390px !important
    }
}


/* ─── RESULT PORTFOLIO POSITION LABELS ─── */
#screen-report .mix-row {
    align-items: center !important;
    gap: 9px !important;
}

#screen-report .mix-ic.mix-pos {
    width: 80px !important;
    height: 38px !important;
    min-width: 58px !important;
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,#F2FAEE,#E7F4DF) !important;
    border: 1px solid rgba(80,183,13,.18) !important;
    color: var(--brand-3) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(31,73,22,.06) !important;
}

    #screen-report .mix-ic.mix-pos strong {
        display: block !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    #screen-report .mix-ic.mix-pos span {
        display: block !important;
        font-size: 8.5px !important;
        line-height: 1.35 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        color: rgba(29,110,18,.82) !important;
    }


/* ─── Prize highlight on entry hero ─── */


.hero-copy {
    bottom: 16px !important;
    text-align:center;
}

.main-prize-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 9px 11px 9px 13px;
    border-radius: 10px;
    isolation: isolate;
}

    .main-prize-badge::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        background: linear-gradient(90deg, rgb(66 164 15 / 0%), #3e9e118c);
        pointer-events: none;
        z-index: -1;
        border-radius: 10px;
    }

.prize-medal {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #5a011f;
    margin: 0px 8px;
}

    .prize-medal svg {
        width: 35px;
        height: 35px;
    }

.prize-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding-right: 15px;
    text-align: right;
}

    .prize-copy span {
        color: rgb(224 171 105);
        font-size: 9.5px;
        line-height: 1.45;
        font-weight: 950;
    }

    .prize-copy strong {
        color: #ffffff;
        font-size: 19px;
        line-height: 1.45;
        font-weight: 950;
        white-space: nowrap;
    }

    .prize-copy small {
        color: #ffffff75;
        font-size: 10.3px;
        line-height: 1.45;
        font-weight: 900;
        white-space: nowrap;
    }

@media(max-width:374px) {


    .hero-copy {
/*        right: 12px !important;
        left: 12px !important;*/
        padding-inline: 18px !important;
    }

    .prize-copy strong {
        font-size: 14.5px;
    }
}

.mix-row strong {
    width: 10px;
}


/* ─── Validation overlay fix: no empty space under inputs ─── */
.form .field {
    position: relative !important;
}

    .form .field .hint {
        position: absolute !important;
        top: 0 !important;
        right: 14px !important;
        left: auto !important;
        z-index: 6 !important;
        display: inline-flex !important;
        align-items: center !important;
        max-width: calc(100% - 28px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 3px 9px 4px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 102, 102, .45) !important;
        background: rgba(8, 8, 8, .92) !important;
        color: #ff6b6b !important;
        box-shadow: 0 0 16px rgba(255, 80, 80, .16), 0 6px 14px rgba(0, 0, 0, .25) !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        pointer-events: none !important;
        transform: translateY(-50%) !important;
    }

        .form .field .hint:empty {
            display: none !important;
        }

.form .input.bad {
    border: 1px solid rgba(255, 102, 102, .72) !important;
    box-shadow: 0 0 0 2px rgba(255, 102, 102, .14), 0 0 20px rgba(255, 102, 102, .12) !important;
}


/* ─── Dark stadium background adaptation for finance + gold fund ─── */
:root {
    --ink: #F3FBEF !important;
    --muted: rgba(243,251,239,.74) !important;
    --muted-2: rgba(243,251,239,.48) !important;
    --line: rgba(117, 255, 123, .16) !important;
    --line-2: rgba(255,255,255,.08) !important;
    --card: rgba(7, 14, 9, .76) !important;
    --card-2: rgba(4, 9, 6, .72) !important;
    --glass: rgba(7,14,9,.62) !important;
    --glass-2: rgba(255,255,255,.05) !important;
    --shadow: 0 22px 48px rgba(0,0,0,.42) !important;
}

html, body {
    background: #020502 !important;
    color: var(--ink) !important;
}

body {
    background: radial-gradient(circle at 82% -4%, rgba(80,183,13,.12), transparent 24%), radial-gradient(circle at 8% 10%, rgba(229,184,60,.08), transparent 22%), linear-gradient(180deg, #061008 0%, #030603 45%, #020402 100%) !important;
}

.app {
    background: linear-gradient(180deg, rgba(2,6,3,.22), rgba(2,6,3,.58)) !important;
    color: var(--ink) !important;
}

    .app::before {
        background: linear-gradient(180deg, rgba(1,4,2,.16), rgba(1,4,2,.42)), radial-gradient(circle at 70% 20%, rgba(80,183,13,.14), transparent 28%), url('../../img/bg2.jpg') center bottom / cover no-repeat !important;
        opacity: 1 !important;
    }

    .app::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 50% 22%, rgba(80,183,13,.16), transparent 30%), linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.55) 100%);
    }

.screen,
.hero-topline,
.hero-copy,
.inner-topbar,
.sticky-cta,
.toast,
.modal-sheet,
.modal {
    position: relative;
    z-index: 2;
}

    .title,
    .hero-copy h1,
    .hero-copy p,
    .subtitle,
    .ref-note,
    .foot-note,
    .build-sub,
    .progress-label,
    .progress-content strong,
    .note-box h3,
    .modal-head h3,
    .mix h4,
    .sharebox h4,
    .compare h4,
    .rosebox h4,
    .transferbox h4,
    .stat-cell .s-val,
    .stat-cell .s-lbl,
    .mix-name,
    .sharebox p,
    .compare p,
    .rosebox p,
    .transferbox p,
    .modal-body,
    .profit-card .k,
    .verdict .v-hi,
    .statgrid .s small,
    .field label {
        color: inherit !important;
    }

.hero-topline {
    background: #50b70d1c;
    backdrop-filter: blur(14px) !important;
}

.hero-kicker,
.hero-floating-card,
.main-prize-badge,
.pos-token,
.tag,
.cap .rempill,
.hero-social,
.iconbtn,
.btn-ghost,
.note-box .badge,
.mix-ic {
    background: rgba(10, 22, 12, .66) !important;
    border: 1px solid rgba(117,255,123,.18) !important;
    color: #98ef52 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(10px) !important;
}

    .hero-social:hover,
    .iconbtn:hover,
    .btn-ghost:hover {
        background: rgba(14, 28, 16, .86) !important;
        border-color: rgba(117,255,123,.32) !important;
    }

.card,
.stat-cell,
.step-card,
.progress-card,
.result-card,
.share-card,
.mix,
.compare,
.sharebox,
.rosebox,
.transferbox,
.profit-card,
.modal-sheet,
.statgrid .s,
.sharelink {
    background: linear-gradient(180deg, rgba(8,16,10,.78), rgba(5,10,7,.72)) !important;
    border: 1px solid rgba(117,255,123,.14) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: var(--ink) !important;
    backdrop-filter: blur(16px) !important;
}

.rosebox {
    border-color: rgba(229,184,60,.24) !important;
    background: linear-gradient(180deg, rgba(24,19,7,.82), rgba(10,8,4,.76)) !important;
}

.btn-primary {
    color: #071007 !important;
    box-shadow: 0 14px 30px rgba(80,183,13,.28), 0 0 24px rgba(80,183,13,.16), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.input {
    color: var(--ink) !important;
    background: rgba(5,10,7,.82) !important;
    border: 1px solid rgba(117,255,123,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.24) !important;
}

    .input::placeholder {
        color: rgba(243,251,239,.34) !important;
    }

    .input:focus {
        background: rgba(7,14,9,.96) !important;
        border-color: rgba(117,255,123,.44) !important;
        box-shadow: 0 0 0 3px rgba(80,183,13,.16), 0 0 22px rgba(80,183,13,.12) !important;
    }

.progress-card,
.cap,
.progress-hidden {
    background: linear-gradient(180deg, rgba(7,15,9,.76), rgba(4,9,6,.72)) !important;
    border: 1px solid rgba(117,255,123,.14) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.stage {
    border: 1px solid rgba(117,255,123,.18) !important;
    background: radial-gradient(ellipse at 50% 0%, rgba(80,183,13,.18), transparent 36%), radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.88), transparent 42%), rgba(3,10,5,.74) !important;
    box-shadow: inset 0 0 80px rgba(0,0,0,.72), 0 22px 44px rgba(0,0,0,.34) !important;
}

    .stage::before {
        background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 34%) !important;
    }

.turf {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 8%, rgba(0,0,0,.11) 8% 16%), radial-gradient(ellipse at center, rgba(80,183,13,.22), transparent 63%), linear-gradient(180deg, #08250c 0%, #061b0a 48%, #041206 100%) !important;
    box-shadow: inset 0 0 120px rgba(0,0,0,.82) !important;
}

.vignette {
    box-shadow: inset 0 -52px 74px rgba(0,0,0,.62), inset 0 0 80px rgba(0,0,0,.42) !important;
}

.pos-card {
    background: linear-gradient(180deg, rgba(12,22,14,.90), rgba(5,10,7,.90)) !important;
    border: 1px solid rgba(117,255,123,.14) !important;
    box-shadow: 0 12px 22px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
    color: var(--ink) !important;
}



.pos-fund,
.mix-name,
.progress-content strong,
.progress-label,
.profit-card .money,
#vTag,
.pos-pct,
.statgrid .s strong {
    color: var(--ink) !important;
    text-shadow: none !important;
}

.risk-chip {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.06) !important;
}

.mix-bar,
input[type=range] {
    background: rgba(255,255,255,.10) !important;
}

    .mix-bar i,
    .progress-card > #capProgressFill {
        box-shadow: 0 0 16px rgba(80,183,13,.26) !important;
    }

.hero-copy p,
.ref-note,
.foot-note,
.build-sub,
.progress-content strong small,
.sharebox p,
.compare p,
.rosebox p,
.transferbox p,
.modal-body,
.stat-cell .s-lbl,
.note-box p {
    color: var(--muted) !important;
}

.main-prize-badge,
.prize-medal,
.prize-copy {
    text-shadow: 0 2px 12px rgba(0,0,0,.28) !important;
}


/* ─── Interaction UX fixes: centered bottom modal, visible card CTA, better toast ─── */
.build-guide {
    margin: 8px 0 10px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(117,255,123,.16) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(8,16,10,.76), rgba(5,10,7,.68)) !important;
    color: rgba(243,251,239,.78) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(12px) !important;
}

    .build-guide strong {
        color: #98ef52 !important;
        font-weight: 950 !important;
    }

    .build-guide span {
        color: rgba(243,251,239,.54) !important;
    }

.pos-card {
    cursor: pointer !important;
}

    .pos-card::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(117,255,123,.18), transparent 42%, rgba(229,184,60,.10));
        opacity: .45;
        z-index: 0;
    }

    .pos-card > * {
        position: relative;
        z-index: 1;
    }

.card-cta {
    position: ABSOLUTE;
    top: -20px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 2px auto 1px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    color: #a6ff58 !important;
    font-size: 8.3px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    box-shadow: 0 0 14px rgba(80, 183, 13, .12), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    pointer-events: none !important;
}

    .card-cta::before {
        content: "ⓘ";
        display: inline-block;
        font-size: 10px;
        line-height: 1;
    }



.pos-card:hover .card-cta,
.pos-card:focus-visible .card-cta {
    transform: translateY(-1px);
    border-color: rgba(117,255,123,.44) !important;
    background: rgba(80,183,13,.18) !important;
}

#fundModal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 14px max(14px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

    #fundModal.modal.show {
        display: flex !important;
    }

#fundModal .modal-sheet {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 408px) !important;
    max-height: min(78vh, 560px) !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    border-radius: 28px 28px 20px 20px !important;
    background: linear-gradient(180deg, rgba(9,18,11,.96), rgba(4,9,6,.98)) !important;
    border: 1px solid rgba(117,255,123,.18) !important;
    box-shadow: 0 -18px 52px rgba(0,0,0,.54), 0 0 0 1px rgba(80,183,13,.10), 0 0 28px rgba(80,183,13,.12) !important;
    transform: translateY(0) !important;
    animation: modalSheetUp .24s cubic-bezier(.22,.9,.28,1) both !important;
}

@keyframes modalSheetUp {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#fundModal .modal-handle {
    background: rgba(117,255,123,.28) !important;
    box-shadow: 0 0 12px rgba(80,183,13,.22) !important;
}

#fundModal .modal-close {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: rgba(243,251,239,.72) !important;
}

#toast.toast {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10000 !important;
    width: min(390px, calc(100% - 28px)) !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(117,255,123,.26) !important;
    background: linear-gradient(180deg, rgba(8,18,10,.98), rgba(4,10,6,.96)) !important;
    color: #F3FBEF !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.46), 0 0 24px rgba(80,183,13,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    opacity: 0 !important;
    transform: translate(-50%, -16px) scale(.98) !important;
    pointer-events: none !important;
}

    #toast.toast.show {
        opacity: 1 !important;
        transform: translate(-50%, 0) scale(1) !important;
    }

    #toast.toast svg {
        color: #98ef52 !important;
        filter: drop-shadow(0 0 8px rgba(80,183,13,.35));
    }

    #toast.toast span {
        display: block;
        padding-top: 1px;
        color: #F3FBEF !important;
        font-weight: 900 !important;
    }

@media (min-width: 520px) {
    #toast.toast {
        top: 28px !important;
    }
}


/* ─── Requested mobile interaction fixes ───
           1) Larger, easier slider handles on phones
           2) Toast appears lower so it does not cover investment progress
           3) Completed allocation CTA gets a short visual hint after auto-scroll
        */
@media (max-width: 519px) {
    .stage {
        min-height: 528px !important;
    }

    .field-rows {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .pos-card {
        width: 108px !important;
        min-height: 128px !important;
        padding: 10px 8px 12px !important;
        gap: 5px !important;
    }



        .pos-card input[type=range]:active,
        input[type=range]:active {
            cursor: grabbing !important;
        }

    input[type=range]::-webkit-slider-thumb {
        width: 34px !important;
        height: 34px !important;
        margin-top: 0 !important;
        border: 3px solid #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(80,183,13,.34), 0 0 0 7px rgba(80,183,13,.12) !important;
    }

    input[type=range]::-moz-range-thumb {
        width: 34px !important;
        height: 34px !important;
        border: 3px solid #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(80,183,13,.34), 0 0 0 7px rgba(80,183,13,.12) !important;
    }

    .pos-pct {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    #toast.toast {
        top: max(92px, calc(env(safe-area-inset-top) + 92px)) !important;
    }
}

@media (min-width: 520px) {
    #toast.toast {
        top: 92px !important;
    }
}

#toReport.cta-attention {
    animation: ctaAttentionPulse .7s ease both;
}

@keyframes ctaAttentionPulse {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #toReport.cta-attention {
        animation: none !important;
    }
}


/* ─── Client copy edits: stronger prize visibility + clearer campaign follow-up ─── */
.hero-copy h1 {
    font-size: 24px !important;
    line-height: normal !important;
    color: #50b70d !important;
}

.main-prize-badge {
    margin-top: 14px !important;
    padding: 11px 12px 11px 14px !important;
    border: 1px solid rgba(255, 233, 154, .30) !important;
    background: linear-gradient(90deg, rgba(80,183,13,.18), rgba(229,184,60,.18)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.26), 0 0 24px rgba(229,184,60,.14) !important;
}

    .main-prize-badge::before {
        background: linear-gradient(90deg, rgba(80,183,13,.10), rgba(229,184,60,.30)) !important;
    }

.prize-copy span {
    color: #FFE99A !important;
    font-size: 11px !important;
}

.prize-copy strong {
    color: #FFFFFF !important;
    font-size: 21px;
    line-height: 1.35 !important;
    text-shadow: 0 0 18px rgba(229, 184, 60, .25), 0 3px 14px rgba(0, 0, 0, .34) !important;
}

.prize-copy small {
    color: rgb(231 196 130) !important;
    font-size: 15.5px;
}

#campaignFollowup p + p {
    margin-top: 8px !important;
}

#campaignFollowup .pill {
    margin-top: 11px !important;
}


/* ─── RESULT LEADERBOARD ─── */
.leaderboard-box {
    margin-top: 12px;
    padding: 14px;
    overflow: hidden;
}

.leaderboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

    .leaderboard-head h4 {
        margin: 0 0 5px;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.7;
        font-weight: 950;
    }

    .leaderboard-head p {
        margin: 0;
        color: var(--muted);
        font-size: 10.8px;
        line-height: 1.9;
        font-weight: 750;
        text-align: right;
    }

.leaderboard-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(217,167,42,.28);
    background: rgba(217,167,42,.12);
    color: #D9A72A;
    font-size: 10.7px;
    line-height: 1.4;
    font-weight: 950;
    white-space: nowrap;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 10px;
    border-radius: 16px;
    border: 1px solid rgba(80,183,13,.13);
    background: rgba(255,255,255,.055);
    white-space: nowrap;
}

    .leaderboard-row.me {
        border-color: rgba(217,167,42,.42);
        background: linear-gradient(135deg, rgba(217,167,42,.16), rgba(80,183,13,.08));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(31,73,22,.08);
    }

.leaderboard-rank {
    min-width: 38px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(80,183,13,.10);
    color: var(--brand-2);
    font-size: 11.5px;
    font-weight: 950;
}

    .leaderboard-rank.starred {
        background: rgba(217,167,42,.17);
        color: #D9A72A;
        border: 1px solid rgba(217,167,42,.25);
    }

.leaderboard-phone {
    direction: ltr;
    text-align: left;
    color: var(--ink);
    font-size: 12.2px;
    line-height: 1.2;
    font-weight: 950;

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

.leaderboard-row.me .leaderboard-phone {
    color: #D9A72A;
}

.leaderboard-player {
    min-width: 0;
}

.leaderboard-name {
    display: block;
    color: var(--ink);
    font-size: 11.8px;
    line-height: 1.55;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-sub {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9.4px;
    line-height: 1.45;
    font-weight: 750;
}

.leaderboard-score {
    direction: ltr;
    text-align: left;
    color: var(--brand-2);
    font-size: 11.4px;
    line-height: 1.2;
    font-weight: 950;
    white-space: nowrap;
}

.leaderboard-row.me .leaderboard-score {
    color: #D9A72A;
}

.leaderboard-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 3px;
    color: var(--muted);
    font-size: 9.4px;
    font-weight: 850;
}

    .leaderboard-sep::before,
    .leaderboard-sep::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(80,183,13,.18);
    }

.leaderboard-note {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(80,183,13,.08);
    color: var(--muted);
    font-size: 10.3px;
    line-height: 1.9;
    font-weight: 750;
    text-align: center;
}

/* ─── OTP VERIFICATION UI ─── */
.otp-section {
    display: none !important;
    flex-direction: column;
    gap: 11px;
}

    .otp-section.show {
        display: flex !important;
        animation: screenIn .32s cubic-bezier(.22,.9,.28,1) both;
    }

.otp-info {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 2;
    font-weight: 800;
    padding: 0 10px;
}

    .otp-info strong {
        color: var(--ink);
        direction: ltr;
        unicode-bidi: isolate;
    }

.otp-timer {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

    .otp-timer span {
        color: #98ef52;
        font-weight: 950;
    }

.otp-resend {
    background: none;
    border: none;
    color: #98ef52;
    font: 800 11.5px/1 inherit;
    cursor: pointer;
    padding: 8px;
    text-align: center;
    display: none;
}

    .otp-resend:hover {
        text-decoration: underline;
    }

    .otp-resend.show {
        display: block;
    }

.otp-back-link {
    text-align: center;
    margin-top: 4px;
}

    .otp-back-link button {
        background: none;
        border: none;
        color: var(--muted);
        font: 800 11px/1 inherit;
        cursor: pointer;
        padding: 6px;
    }

        .otp-back-link button:hover {
            color: #98ef52;
        }