:root{
    --red:#e50914;
    --red-soft:rgba(229,9,20,.28);
    --red-faint:rgba(229,9,20,.11);
    --panel:rgba(13,13,13,.88);
    --panel-2:rgba(19,19,19,.92);
    --line:rgba(255,255,255,.075);
    --line-red:rgba(229,9,20,.24);
    --text:#fff;
    --muted:#aaa;
    --gold:#d8b66a;
}

html,
body{
    width:100%;
    max-width:100%;
    min-height:100%;
    overflow-x:hidden;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-tap-highlight-color:transparent;
}

html{
    min-height:100%;
    background:#000;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
    min-height:100dvh;
    padding:
        calc(22px + env(safe-area-inset-top))
        calc(22px + env(safe-area-inset-right))
        calc(26px + env(safe-area-inset-bottom))
        calc(22px + env(safe-area-inset-left));
    color:var(--text);
    font-family:Arial,sans-serif;
    background:
        radial-gradient(circle at 14% 0%,rgba(229,9,20,.25),transparent 34%),
        radial-gradient(circle at 86% 6%,rgba(216,182,106,.11),transparent 26%),
        linear-gradient(135deg,#020202,#120000 48%,#000);
    -webkit-font-smoothing:antialiased;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:none;
    touch-action:auto;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 78%);
    z-index:-1;
}

.page{
    width:min(100%,900px);
    margin:0 auto;
}

.hero-card,
.referral-panel,
.stats-card,
.info-card{
    position:relative;
    border:1px solid var(--line-red);
    background:
        linear-gradient(155deg,rgba(24,24,24,.94),rgba(7,7,7,.97));
    box-shadow:
        0 18px 42px rgba(0,0,0,.36),
        0 0 24px rgba(229,9,20,.08),
        inset 0 1px 0 rgba(255,255,255,.045);
}

.hero-card{
    margin:0 0 16px;
    padding:24px 22px 22px;
    border-radius:26px;
    text-align:center;
    overflow:hidden;
}

.hero-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top,rgba(229,9,20,.13),transparent 48%);
    pointer-events:none;
}

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

.hero-topline,
.eyebrow{
    color:var(--gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.6px;
}

.logo{
    display:block;
    width:66px;
    height:66px;
    max-width:66px;
    max-height:66px;
    margin:10px auto 12px;
    border:2px solid rgba(216,182,106,.38);
    border-radius:50%;
    object-fit:cover;
    box-shadow:
        0 0 18px rgba(229,9,20,.24),
        0 0 0 5px rgba(255,255,255,.025);
}

.hero-card h1{
    margin-bottom:8px;
    font-size:34px;
    line-height:1.12;
}

.hero-card p{
    max-width:620px;
    margin:0 auto;
    color:#c8c8c8;
    font-size:15px;
    line-height:1.65;
}

.hero-card strong,
.highlight{
    color:#fff;
    font-weight:800;
}

.referral-panel,
.stats-card{
    margin-bottom:16px;
    padding:20px;
    border-radius:22px;
}

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

.section-head.compact{
    margin-bottom:14px;
}

.section-head h2{
    margin-top:3px;
    font-size:20px;
    line-height:1.2;
}

.pill{
    flex:0 0 auto;
    padding:6px 10px;
    border:1px solid rgba(216,182,106,.25);
    border-radius:999px;
    background:rgba(216,182,106,.08);
    color:#e7d09a;
    font-size:12px;
    font-weight:700;
}

.panel-text{
    color:#bdbdbd;
    font-size:14px;
    line-height:1.65;
}

.ref-box{
    margin-top:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    color:#eee;
    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
        rgba(0,0,0,.35);
    font-size:14px;
    line-height:1.55;
    word-break:break-all;
    user-select:text;
    -webkit-user-select:text;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

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

.btn,
button{
    width:100%;
    min-height:46px;
    padding:13px 14px;
    appearance:none;
    -webkit-appearance:none;
    border-radius:14px;
    color:#fff;
    cursor:pointer;
    font-size:15px;
    font-weight:800;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

.btn.primary{
    border:1px solid rgba(229,9,20,.42);
    background:
        linear-gradient(135deg,rgba(229,9,20,.20),rgba(70,0,5,.36)),
        rgba(16,16,16,.94);
    box-shadow:0 10px 24px rgba(229,9,20,.12),inset 0 1px 0 rgba(255,255,255,.06);
}

.btn.secondary{
    border:1px solid rgba(216,182,106,.26);
    background:rgba(255,255,255,.045);
    color:#f2e7c8;
}

.btn:hover:not(:disabled),
button:hover:not(:disabled){
    transform:translateY(-1px);
    filter:brightness(1.06);
    box-shadow:0 12px 26px rgba(0,0,0,.28),0 0 20px rgba(229,9,20,.10);
}

.btn:active,
button:active{
    transform:scale(.985);
}

.btn:disabled,
button:disabled{
    cursor:not-allowed;
    opacity:.55;
    transform:none;
    box-shadow:none;
}

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

.stat{
    min-width:0;
    padding:15px 12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
        rgba(0,0,0,.25);
    text-align:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.stat strong{
    display:block;
    margin-bottom:5px;
    overflow:hidden;
    color:#fff;
    font-size:21px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.stat span{
    color:var(--muted);
    font-size:12px;
}

.info-list{
    display:grid;
    gap:12px;
}

.info-card{
    border-radius:18px;
    overflow:hidden;
}

.info-card summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    cursor:pointer;
    list-style:none;
}

.info-card summary::-webkit-details-marker{
    display:none;
}

.info-card summary span{
    font-weight:800;
}

.info-card summary small{
    color:#9d9d9d;
    font-size:12px;
}

.info-card summary::after{
    content:"+";
    flex:0 0 auto;
    width:24px;
    height:24px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    color:#d4d4d4;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.info-card[open] summary::after{
    content:"−";
}

.info-card ol{
    padding:0 18px 16px 34px;
}

.info-card li{
    padding:8px 0;
    color:#d2d2d2;
    line-height:1.55;
}

.note{
    max-width:720px;
    margin:16px auto 0;
    color:#9c9c9c;
    text-align:center;
    font-size:12.5px;
    line-height:1.65;
}

@media(max-width:600px){
    body{
        padding:
            calc(18px + env(safe-area-inset-top))
            calc(16px + env(safe-area-inset-right))
            calc(22px + env(safe-area-inset-bottom))
            calc(16px + env(safe-area-inset-left));
    }

    .hero-card{
        padding:20px 16px 18px;
        border-radius:22px;
    }

    .logo{
        width:58px;
        height:58px;
        max-width:58px;
        max-height:58px;
    }

    .hero-card h1{
        font-size:28px;
    }

    .hero-card p,
    .panel-text{
        font-size:14px;
    }

    .referral-panel,
    .stats-card{
        padding:16px;
        border-radius:19px;
    }

    .section-head{
        align-items:flex-start;
    }

    .pill{
        font-size:11px;
    }

    .action-row{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:1fr 1fr;
    }

    .stat:last-child{
        grid-column:1 / -1;
    }

    .stat{
        padding:13px 10px;
    }

    .stat strong{
        font-size:19px;
    }

    .info-card summary{
        padding:15px;
    }
}

@media(max-width:760px){
    *{
        animation:none !important;
    }

    .hero-card,
    .referral-panel,
    .stats-card,
    .info-card{
        box-shadow:0 8px 18px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04) !important;
    }

    .btn:hover:not(:disabled),
    button:hover:not(:disabled){
        transform:none;
    }
}

.row-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:auto;
}