/* TPR World — member area (sidebar + dashboard). Palette follows tprnew/assets/v2/base.css. */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
    --ink: #06051a;
    --line: rgba(170, 160, 255, .16);
    --line-2: rgba(170, 160, 255, .3);
    --text: #c7c3ea;
    --muted: #9591c4;
    --white: #f6f5ff;
    --green: #34d399;
    --edge: linear-gradient(135deg, rgba(34, 211, 238, .5), rgba(99, 102, 241, .2) 40%, rgba(139, 92, 246, .18) 60%, rgba(236, 72, 153, .45));
    --f-display: "Space Grotesk", system-ui, sans-serif;
    --f-hero: "Orbitron", "Space Grotesk", sans-serif;
    --f-body: "Inter", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --side-w: 256px;
    --r: 22px;
    --ease: cubic-bezier(.2, .75, .2, 1);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.m-body {
    margin: 0; min-height: 100vh;
    background: var(--ink); color: var(--text);
    font: 400 14px/1.5 var(--f-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--f-mono); }

/* ---------- Background, stars, storm ---------- */
.m-bg {
    position: fixed; inset: 0; z-index: -3;
    background:
        radial-gradient(ellipse 60% 50% at 55% 42%, rgba(6, 5, 26, .5), rgba(6, 5, 26, .08) 75%),
        linear-gradient(180deg, rgba(6, 5, 26, .12), rgba(6, 5, 26, .55)),
        var(--bg) var(--bg-pos, center) / cover no-repeat;
}
.m-stars {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
        radial-gradient(1px 1px at 33% 72%, #cfe8ff, transparent),
        radial-gradient(1.6px 1.6px at 58% 12%, #fff, transparent),
        radial-gradient(1px 1px at 77% 38%, #e9d5ff, transparent),
        radial-gradient(1.3px 1.3px at 88% 82%, #fff, transparent),
        radial-gradient(1px 1px at 45% 44%, #bae6fd, transparent),
        radial-gradient(1.2px 1.2px at 22% 90%, #fff, transparent);
    animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .95; } }
.m-storm { position: fixed; inset: 0; z-index: 44; width: 100%; height: 100%; pointer-events: none; }
.m-flash {
    position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at var(--fx, 50%) 0, rgba(191, 219, 254, .5), rgba(139, 92, 246, .16) 45%, transparent 75%);
    mix-blend-mode: screen;
}

/* ---------- Sidebar ---------- */
.m-side {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--side-w);
    display: flex; flex-direction: column;
    padding: 18px 16px 20px;
    background: linear-gradient(180deg, rgba(10, 8, 40, .92), rgba(8, 6, 32, .84));
    border-right: 1px solid var(--line);
    box-shadow: 1px 0 0 rgba(139, 92, 246, .2), 12px 0 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
    overflow: hidden auto;
    transition: transform .35s var(--ease);
}
.m-side::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1;
    background: var(--bg, none) 4% 100% / auto 230% no-repeat;
    opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
    mask-image: linear-gradient(180deg, transparent, #000 60%);
    pointer-events: none;
}
.m-logo { display: block; padding: 4px 6px 18px; }
.m-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(99, 102, 241, .55)); animation: logoGlow 4s ease-in-out infinite alternate; }
@keyframes logoGlow { to { filter: drop-shadow(0 0 28px rgba(139, 92, 246, .85)); } }
body.is-strike .m-logo img, body.is-strike .m-top-logo img { animation: none; filter: drop-shadow(0 0 30px rgba(191, 219, 254, 1)) brightness(1.5); }

.m-nav { display: flex; flex-direction: column; gap: 6px; }
.m-nav-link {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 16px;
    border: 1px solid transparent; border-radius: 12px;
    background: none; color: var(--text);
    font: 500 15px var(--f-display);
    cursor: pointer; list-style: none;
    transition: background .25s, color .25s, transform .25s var(--ease);
}
.m-nav-link::-webkit-details-marker { display: none; }
.m-nav-link:hover { background: rgba(99, 102, 241, .14); color: var(--white); transform: translateX(3px); }
.m-nav-ico { width: 22px; text-align: center; font-size: 17px; color: #a5b4fc; }
.m-nav-link.is-active {
    color: #fff;
    background: linear-gradient(100deg, rgba(59, 130, 246, .9), rgba(124, 58, 237, .85));
    border-color: rgba(165, 180, 252, .6);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35), 0 8px 28px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.m-nav-link.is-active .m-nav-ico { color: #fff; }
.m-caret { margin-left: auto; font-size: 12px; transition: transform .25s; }
.m-nav-group[open] .m-caret { transform: rotate(180deg); }
.m-nav-sub { display: block; margin: 2px 0 2px 52px; padding: 7px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; }
.m-nav-sub:hover { color: var(--white); background: rgba(99, 102, 241, .1); }
.m-logout { margin-top: auto; padding-top: 20px; }
.m-scrim { display: none; }

/* ---------- Main + mobile top bar ---------- */
.m-main { margin-left: var(--side-w); min-height: 100vh; }
.m-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 18px clamp(16px, 3vw, 44px) 0; }
.m-top .m-burger, .m-top .m-top-logo { display: none; }
.m-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.m-top-right form { margin: 0; }
.m-top-id { padding: 6px 12px; border-radius: 999px; font: 700 12.5px var(--f-display); color: #e0e7ff; letter-spacing: .02em; background: linear-gradient(135deg, #3730a3, #1e1b4b); border: 1px solid rgba(129, 140, 248, .7); box-shadow: 0 0 12px rgba(99, 102, 241, .35); }
.m-top-logout {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border-radius: 11px; cursor: pointer; font: 600 13px var(--f-display); color: #fecaca;
    background: linear-gradient(145deg, rgba(220, 38, 38, .22), rgba(76, 5, 25, .45));
    border: 1px solid rgba(248, 113, 113, .45); box-shadow: 0 0 14px rgba(239, 68, 68, .18);
    transition: background .2s, box-shadow .2s, color .2s;
}
.m-top-logout:hover, .m-top-logout:focus-visible { color: #fff; background: linear-gradient(145deg, rgba(220, 38, 38, .45), rgba(127, 29, 29, .6)); box-shadow: 0 0 20px rgba(239, 68, 68, .4); }
.m-impersonate { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 8px 16px; background: linear-gradient(90deg, #b45309, #d97706); color: #fff; font-size: 13px; }
.m-impersonate button { padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .2); color: #fff; font: 600 12.5px var(--f-display); cursor: pointer; }
.m-content { padding: clamp(18px, 3vh, 32px) clamp(16px, 3vw, 44px) 48px; }

.m-avatar {
    position: relative; flex: none;
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    font: 800 17px var(--f-hero); color: #fff;
    background: radial-gradient(circle at 35% 30%, #818cf8, #4338ca 55%, #1e1b4b);
    box-shadow: 0 0 0 2px rgba(165, 180, 252, .55), 0 0 18px rgba(99, 102, 241, .6);
}
.m-avatar-sm { width: 36px; height: 36px; font-size: 15px; }
.m-avatar-lg { width: 58px; height: 58px; font-size: 25px; box-shadow: 0 0 0 2px rgba(165, 180, 252, .7), 0 0 0 6px rgba(59, 130, 246, .15), 0 0 30px rgba(99, 102, 241, .75); }
.m-avatar-check { position: absolute; right: -3px; bottom: -2px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #052e1f; font-size: 10px; box-shadow: 0 0 0 3px var(--ink); }

/* ---------- Grid ---------- */
.d-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);

    grid-template-areas:
        "prof  prof"
        "stats stats"
        "link  link"
        "slot  earn"
        "act   act";

    gap: 22px 26px;
    max-width: 1320px;
    margin: 0 auto;
}

.d-profile {
    grid-area: prof;
}

.metrics-grid {
    grid-area: stats;
}

.d-link {
    grid-area: link;
}

.d-slot {
    grid-area: slot;
}

.d-earn {
    grid-area: earn;
}

.d-activity {
    grid-area: act;
}


/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .d-grid {
        grid-template-columns: minmax(0, 1fr);

        grid-template-areas:
            "prof"
            "stats"
            "link"
            "slot"
            "earn"
            "act";

        gap: 18px;
    }
}

/* ---------- Standalone Transparent Metric Cards Grid ---------- */
.metrics-grid {
    grid-area: stats;

    width: 100%;
    max-width: none;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card {
    position: relative;
    isolation: isolate;
    padding: 22px 24px;
    border: 1px solid rgba(170, 160, 255, .22);
    border-radius: var(--r);
    background: rgba(255, 255, 255, .03);          /* almost fully transparent */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
}

.metric-ico {
    width: 48px;
    height: 48px;
    flex: none;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: #93c5fd;
    font-size: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, .45),
            rgba(30, 27, 75, .7)
        );

    border: 1px solid rgba(96, 165, 250, .45);

    box-shadow:
        0 0 16px rgba(59, 130, 246, .4);
}

.metric-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1.3;
}

.metric-content span {
    font-size: 12.5px;
    color: var(--muted);
}

.metric-content strong {
    font: 700 16px/1.3 var(--f-display);
    color: #fff;
    overflow-wrap: anywhere;
}


/* ---------- Metric Cards Responsive ---------- */
@media (max-width: 640px) {
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .metric-card {
        padding: 16px;
        gap: 12px;
        border-radius: 16px;
    }

    .metric-ico {
        width: 38px;
        height: 38px;
        font-size: 14px;
        border-radius: 10px;
    }

    .metric-content strong {
        font-size: 13.5px;
    }
}
/* ---------- Card ---------- */
.card {
    position: relative; isolation: isolate; min-width: 0;
    padding: 26px 30px;
    border: 1px solid transparent; border-radius: var(--r);
    background:
        linear-gradient(160deg, rgba(14, 12, 48, .55), rgba(6, 5, 24, .45)) padding-box,
        var(--edge) border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: rise .7s var(--ease) both;
}
/* electric spark travelling around every card edge */
.card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--spin), transparent 0 72%, rgba(34, 211, 238, .9) 82%, #fff 86%, rgba(167, 139, 250, .95) 90%, rgba(236, 72, 153, .8) 95%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 7s linear infinite;
}
.d-link::after { animation-delay: -2.3s; }
.d-earn::after { animation-delay: -4.6s; }
.d-activity::after { animation-duration: 11s; }
@keyframes spin { to { --spin: 360deg; } }
/* lit up when a bolt lands on the card */
.card::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .38), transparent 65%);
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .9), inset 0 0 40px rgba(125, 211, 252, .45);
    opacity: 0; transition: opacity .6s;
}
.card.is-struck::before { opacity: 1; transition: opacity .04s; }
.card > * { position: relative; z-index: 3; }
.d-grid > .card:nth-child(2) { animation-delay: .08s; }
.d-grid > .card:nth-child(3) { animation-delay: .16s; }
.d-grid > .card:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-title { display: flex; align-items: center; gap: 10px; font: 700 22px var(--f-display); color: var(--white); }
.card-title i { font-size: 13px; color: var(--muted); }
.card > .card-title { margin-bottom: 18px; }
.card-title-lg { font: 800 clamp(20px, 2.2vw, 26px) var(--f-hero); letter-spacing: .02em; }

.icon-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(99, 102, 241, .2); color: #c7d2fe; cursor: pointer; transition: background .2s, transform .2s; }
.icon-btn:hover { background: rgba(99, 102, 241, .45); transform: scale(1.06); }
.btn-mini { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(165, 180, 252, .5); background: linear-gradient(100deg, #4f46e5, #7c3aed); color: #fff; font: 600 13px var(--f-display); cursor: pointer; box-shadow: 0 6px 20px rgba(79, 70, 229, .5); transition: transform .2s; }
.btn-mini:hover { transform: translateY(-2px); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 7px; background: linear-gradient(100deg, #6d28d9, #9333ea); color: #fff; font-size: .82em; text-decoration: underline; box-shadow: 0 0 14px rgba(147, 51, 234, .6); }

/* ---------- Shared bits ---------- */
.d-label { font-size: 12.5px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; font: 700 11px var(--f-display); letter-spacing: .08em; text-transform: uppercase; border: 1px solid; vertical-align: middle; }
.chip-green { color: #d1fae5; border-color: #34d399; background: linear-gradient(135deg, #047857, #065f46); box-shadow: 0 0 14px rgba(52, 211, 153, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.chip-green i { color: #6ee7b7; }
.chip-amber { color: #fef3c7; border-color: #fbbf24; background: linear-gradient(135deg, #b45309, #78350f); box-shadow: 0 0 14px rgba(251, 191, 36, .35); }
.bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(99, 102, 241, .2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #8b5cf6, #c084fc); box-shadow: 0 0 12px rgba(139, 92, 246, .9); animation: barIn 1.4s var(--ease) both; }
@keyframes barIn { from { transform: translateX(-100%); } }

/* blue glass for the left column */
.d-slot {
    background:
        linear-gradient(160deg, rgba(14, 22, 78, .9), rgba(8, 10, 44, .86)) padding-box,
        linear-gradient(135deg, rgba(96, 165, 250, .85), rgba(59, 130, 246, .25) 45%, rgba(139, 92, 246, .6)) border-box;
}
.d-profile, .d-slot { box-shadow: 0 22px 60px rgba(0, 0, 0, .4), 0 0 30px rgba(59, 130, 246, .22), inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ---------- Profile ---------- */
.d-profile {
    padding: 0; display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(ellipse at 82% 18%, rgba(59, 130, 246, .28), transparent 55%) padding-box,
        linear-gradient(160deg, rgba(10, 16, 62, .96), rgba(6, 8, 36, .95)) padding-box,
        linear-gradient(135deg, rgba(96, 165, 250, .85), rgba(59, 130, 246, .25) 45%, rgba(139, 92, 246, .6)) border-box;
}
/* castle art sits in the top-right, fading into the card on the left and bottom */
.d-profile > .d-profile-art {
    position: absolute; top: 0; right: 0; z-index: 1;
    height: 80%; width: auto; max-width: 64%;
    object-fit: cover; object-position: right top;
    border-top-right-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 58%, transparent 100%);
    mask-composite: intersect;
    animation: artGlow 6s ease-in-out infinite;
}
@keyframes artGlow { 50% { filter: brightness(1.18) saturate(1.1); } }
.d-hero { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; padding: 24px 28px 20px; }
.m-avatar-xl {
    width: 96px; height: 96px; font-size: 42px;
    background: radial-gradient(circle at 35% 30%, #a78bfa, #5b21b6 55%, #1e1b4b);
    box-shadow: 0 0 0 3px rgba(196, 181, 253, .85), 0 0 0 8px rgba(124, 58, 237, .22), 0 0 44px rgba(139, 92, 246, .9);
    animation: avatarGlow 3.2s ease-in-out infinite;
}
@keyframes avatarGlow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(124, 58, 237, .35), 0 0 60px rgba(167, 139, 250, 1); } }
.m-avatar-xl .m-avatar-check { width: 24px; height: 24px; font-size: 11px; right: 2px; bottom: 4px; }
.d-hello-sub { font: 500 16px var(--f-display); color: var(--text); }
.d-hello h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 2px 0 10px; font: 700 clamp(22px, 2.2vw, 28px) var(--f-display); color: #fff; }
.d-regid { font: 700 18px var(--f-display); color: #fff; letter-spacing: .02em; }

.d-facts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 14px 14px; padding: 12px 6px;
    border-radius: 14px; border: 1px solid rgba(96, 165, 250, .28);
    background: rgba(6, 8, 36, .72); backdrop-filter: blur(6px);
}
.fact { display: flex; align-items: center; gap: 11px; padding: 2px 12px; min-width: 0; }
.d-profile { container-type: inline-size; }
.fact + .fact { border-left: 1px solid rgba(96, 165, 250, .22); }
.fact-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #93c5fd; font-size: 16px; background: linear-gradient(145deg, rgba(37, 99, 235, .45), rgba(30, 27, 75, .7)); border: 1px solid rgba(96, 165, 250, .45); box-shadow: 0 0 14px rgba(59, 130, 246, .35); }
.fact div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fact div > span { font-size: 12.5px; color: var(--muted); }
.fact strong { font: 700 14px/1.25 var(--f-display); color: #fff; }
.fact small { font-size: 10.5px; color: var(--muted); }
@container (max-width: 780px) {
    .d-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; border: 0; background: none; backdrop-filter: none; }
    .fact { padding: 10px 12px; border-radius: 12px; background: rgba(6, 10, 40, .66); border: 1px solid rgba(96, 165, 250, .24); }
    .fact + .fact { border-left: 1px solid rgba(96, 165, 250, .24); }
    .fact strong { line-height: 1.2; overflow-wrap: anywhere; }
    .fact small { display: none; }
}

/* ---------- Gold cards ---------- */
.card-gold {
    border-width: 1.5px;
    background:
        radial-gradient(ellipse at 0 0, rgba(251, 191, 36, .16), transparent 45%) padding-box,
        radial-gradient(ellipse at 100% 100%, rgba(217, 119, 6, .16), transparent 55%) padding-box,
        linear-gradient(160deg, rgba(36, 27, 30, .95), rgba(15, 12, 22, .95) 60%, rgba(24, 18, 22, .95)) padding-box,
        linear-gradient(135deg, #fef3c7, #f59e0b 28%, #92400e 52%, #fcd34d 78%, #fde68a) border-box;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(251, 191, 36, .18), 0 0 30px rgba(251, 191, 36, .32), inset 0 0 36px rgba(251, 191, 36, .07), inset 0 1px 0 rgba(254, 243, 199, .2);
}
.d-earn > .d-earn-art {
    position: absolute; top: 0; right: 0; z-index: 1;
    width: 62%; height: auto;
    border-top-right-radius: inherit;
    pointer-events: none; opacity: .9; mix-blend-mode: screen;
    filter: sepia(1) saturate(3) hue-rotate(-14deg) brightness(2.1) contrast(1.35);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 18%, transparent 72%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 18%, transparent 72%);
    mask-composite: intersect;
}
.card-gold::after { background: conic-gradient(from var(--spin), transparent 0 72%, rgba(251, 191, 36, .9) 82%, #fff7d6 86%, rgba(245, 158, 11, .95) 91%, transparent); }
.card-gold .card-title { font: 700 18px var(--f-display); }
.card-gold .card-title i { font-size: 17px; color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, .8); }

.d-link-box { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; border: 1px solid rgba(203, 213, 225, .35); background: rgba(6, 6, 22, .65); }
.d-link-box span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 14px; }
.icon-btn-plain { flex: none; background: none; border: 0; color: #cbd5e1; font-size: 16px; cursor: pointer; transition: color .2s, transform .2s; }
.icon-btn-plain:hover { color: #fbbf24; transform: scale(1.12); }
.d-link-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.d-link-foot p { font-size: 13px; color: var(--text); }
.btn-gold { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 11px; border: 1px solid #fde68a; background: linear-gradient(180deg, #fef3c7, #fcd34d 55%, #f59e0b); color: #3b2305; font: 700 13.5px var(--f-display); cursor: pointer; box-shadow: 0 6px 22px rgba(245, 158, 11, .45), inset 0 1px 0 #fff; transition: transform .2s, box-shadow .2s; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245, 158, 11, .65), inset 0 1px 0 #fff; }

/* ---------- Slot strip ---------- */
.d-slot { display: flex; align-items: center; gap: 14px; padding: 20px 20px; }
.d-link { display: flex; flex-direction: column; justify-content: center; }
.slot-side { display: flex; align-items: center; gap: 16px; }
.slot-name { font: 800 22px var(--f-display); color: #fff; letter-spacing: .02em; }
.slot-price { font-size: 15px; color: var(--text); }
.gem {
    width: 62px; height: 92px; flex: none; display: block;
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, .9)) drop-shadow(0 0 26px rgba(139, 92, 246, .6));
    animation: gemFloat 4s ease-in-out infinite;
}
.gem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gem-sm { width: 44px; height: 66px; animation-delay: -2s; }
@keyframes gemFloat { 50% { transform: translateY(-6px); filter: drop-shadow(0 0 20px rgba(147, 197, 253, 1)) drop-shadow(0 0 40px rgba(167, 139, 250, .9)); } }
.btn-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(96, 165, 250, .5); background: rgba(30, 58, 138, .55); color: #fff; font: 600 12px var(--f-display); transition: background .2s, box-shadow .2s; }
.btn-chip:hover { background: rgba(37, 99, 235, .7); box-shadow: 0 0 16px rgba(59, 130, 246, .6); }

.slot-cycle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-left: 1px solid rgba(96, 165, 250, .25); }
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 8px rgba(96, 165, 250, .6)); }
.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: rgba(96, 165, 250, .16); }
.ring-bar { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: ringIn 1.4s var(--ease) both; }
@keyframes ringIn { from { stroke-dasharray: 0 100; } }
.ring-val { position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px var(--f-display); color: #fff; }
.cycle-meta { flex: 1; min-width: 120px; }
.cycle-meta p { font: 600 15px var(--f-display); color: #fff; margin-bottom: 10px; }
.cycle-bar { display: flex; align-items: center; gap: 12px; }
.cycle-bar span { font-size: 12.5px; color: var(--text); }
.slot-arrow { color: #93c5fd; font-size: 18px; }
.slot-next { padding: 10px 16px 10px 8px; border-radius: 14px; border: 1px solid rgba(96, 165, 250, .4); background: rgba(6, 8, 36, .55); box-shadow: inset 0 0 20px rgba(59, 130, 246, .15); }
.slot-next .slot-name { font-size: 20px; }

/* ---------- Earnings ---------- */
.d-earn { container-type: inline-size; }
.earn-body { display: flex; align-items: center; gap: 18px; }
.earn-main { flex: 1; display: flex; align-items: center; gap: 16px; min-width: 0; }
.earn-main > div { min-width: 0; }
.d-coin { width: 70px; height: 70px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 28px; color: #78350f; background: radial-gradient(circle at 35% 30%, #fef3c7, #fbbf24 45%, #b45309); box-shadow: 0 0 0 3px rgba(253, 230, 138, .55), 0 0 32px rgba(245, 158, 11, .8); animation: coinSpin 5s ease-in-out infinite; }
@keyframes coinSpin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.earn-total { font: 800 clamp(24px, 5.4cqw, 34px)/1.15 var(--f-display); color: #fff; white-space: nowrap; }
.earn-btc { font-size: 15px; color: var(--text); }
.earn-split { list-style: none; margin: 0; padding: 4px 0 4px 20px; display: grid; gap: 12px; min-width: 190px; border-left: 1px solid rgba(251, 191, 36, .35); position: relative; }
.earn-split::before { content: "\203A"; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); width: 13px; text-align: center; background: #1a1419; color: #fbbf24; font-size: 18px; line-height: 1; }
.earn-split li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.earn-split li i { width: 16px; text-align: center; color: #fbbf24; }
.earn-split b { margin-left: auto; padding-left: 10px; color: #fff; font-weight: 700; white-space: nowrap; }
@container (max-width: 620px) {
    .earn-body { flex-direction: column; align-items: stretch; gap: 14px; }
    .earn-split { min-width: 0; border-left: 0; border-top: 1px solid rgba(251, 191, 36, .35); padding: 14px 0 0; }
    .earn-split::before { display: none; }
    .earn-total { font-size: clamp(26px, 9cqw, 34px); }
}

/* ---------- Activity ---------- */
.act-head, .act-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: 12px; }
.act-head { padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(49, 46, 129, .35); font: 700 15px var(--f-hero); color: var(--white); }
.act-head span:not(:first-child), .act-row > span:not(:first-child) { justify-self: center; }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-row { padding: 16px 0; border-bottom: 1px solid var(--line-2); animation: rise .6s var(--ease) both; }
.act-row:last-child { border-bottom: 0; }
.act-row.is-extra { display: none; }
.act-list.is-open .act-row.is-extra { display: grid; }
.act-name { display: flex; align-items: center; gap: 12px; font: 500 16px var(--f-display); color: var(--white); text-transform: uppercase; }
.act-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #6d28d9, #a855f7); color: #fff; font-size: 16px; box-shadow: 0 0 18px rgba(168, 85, 247, .55); }
.act-id { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 9px; background: linear-gradient(100deg, #6d28d9, #9333ea); color: #fff; font: 600 15px var(--f-display); box-shadow: 0 0 18px rgba(147, 51, 234, .45); white-space: nowrap; }
.act-id i { color: #fbbf24; font-size: 18px; }
.act-time { font: 500 16px var(--f-display); color: var(--white); }
.act-empty { padding: 26px 0 8px; text-align: center; color: var(--muted); }

/* ---------- Slots page ---------- */
.s-page { max-width: 1320px; margin: 0 auto; }
.s-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.s-title { display: flex; align-items: center; gap: 18px; }
.s-title h1 { font: 900 clamp(28px, 3vw, 38px) var(--f-hero); color: #fff; letter-spacing: .02em; text-shadow: 0 0 24px rgba(139, 92, 246, .7); }
.s-id { padding: 6px 14px; border-radius: 10px; background: linear-gradient(100deg, #6d28d9, #9333ea); color: #fff; font: 700 14px var(--f-display); box-shadow: 0 0 20px rgba(147, 51, 234, .6); }
.s-summary { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.s-summary > div { display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(10, 8, 40, .7); backdrop-filter: blur(8px); }
.s-summary span { font-size: 12px; color: var(--muted); }
.s-summary strong { font: 700 16px var(--f-display); color: #fff; }
.s-summary .s-banner { flex-direction: row; align-items: center; gap: 10px; border-color: rgba(251, 191, 36, .6); background: linear-gradient(100deg, rgba(120, 53, 15, .55), rgba(30, 20, 60, .7)); color: #fde68a; font: 700 13px var(--f-display); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 20px rgba(251, 191, 36, .2); }
.s-flash { margin-bottom: 18px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(52, 211, 153, .5); background: rgba(16, 185, 129, .12); color: #6ee7b7; }
.s-note { margin-top: 22px; font-size: 12.5px; color: var(--muted); }

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }

.slot {
    position: relative; isolation: isolate; overflow: hidden;
    border: 1px solid transparent; border-radius: 20px;
    background:
        radial-gradient(ellipse at 100% 100%, rgba(147, 51, 234, .35), transparent 60%) padding-box,
        linear-gradient(160deg, rgba(20, 18, 80, .92), rgba(10, 8, 42, .9)) padding-box,
        linear-gradient(135deg, rgba(96, 165, 250, .9), rgba(59, 130, 246, .25) 45%, rgba(168, 85, 247, .75)) border-box;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 26px rgba(99, 102, 241, .25);
    animation: rise .6s var(--ease) both;
    animation-delay: calc(var(--i) * 40ms);
    transition: transform .3s var(--ease), box-shadow .3s;
}
.slot.is-active:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(139, 92, 246, .55); }
.slot.is-active::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--spin), transparent 0 72%, rgba(34, 211, 238, .9) 82%, #fff 86%, rgba(167, 139, 250, .95) 90%, rgba(236, 72, 153, .8) 95%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 6s linear infinite;
    animation-delay: calc(var(--i) * -1.3s);
}
.slot::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .38), transparent 65%);
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .9), inset 0 0 40px rgba(125, 211, 252, .45);
    opacity: 0; transition: opacity .6s;
}
.slot.is-struck::before { opacity: 1; transition: opacity .04s; }

.slot-body { padding: 0 20px 18px; }
.slot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.slot-no {
    min-width: 48px; padding: 8px 12px 10px; text-align: center;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #4c1d95, #7c3aed);
    font: 900 28px/1 var(--f-hero); color: #fff;
    box-shadow: 0 8px 22px rgba(124, 58, 237, .55), inset 0 -2px 0 rgba(255, 255, 255, .2);
    text-shadow: 0 0 12px rgba(221, 214, 254, .9);
}
.slot-cost { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 700 18px var(--f-display); color: #fff; white-space: nowrap; }
.slot-cost i { font-size: 20px; color: #f59e0b; filter: drop-shadow(0 0 8px rgba(245, 158, 11, .8)); }

.slot-panel { margin-top: 16px; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid rgba(96, 165, 250, .3); background: rgba(6, 6, 30, .6); box-shadow: inset 0 0 22px rgba(59, 130, 246, .12); }
.slot-dots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; }
.slot-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(99, 102, 241, .22); border: 1px solid rgba(129, 140, 248, .35); }
.slot-dots i.on { background: radial-gradient(circle at 35% 30%, #e0f2fe, #38bdf8 50%, #7c3aed); border-color: #7dd3fc; box-shadow: 0 0 8px rgba(56, 189, 248, .9); animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse { 50% { box-shadow: 0 0 14px rgba(125, 211, 252, 1); } }
.slot-stats { display: flex; justify-content: space-between; margin-top: 12px; font: 600 15px var(--f-display); color: #e0e7ff; }
.slot-stats span { display: inline-flex; align-items: center; gap: 7px; }
.slot-stats i { color: #a78bfa; font-size: 13px; }

.slot-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.slot-medal { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0abfc, #a21caf 70%); color: #fff; font-size: 16px; box-shadow: 0 0 16px rgba(217, 70, 239, .6); }
.slot-foot div { display: flex; flex-direction: column; line-height: 1.25; }
.slot-foot span { font-size: 12px; color: var(--muted); }
.slot-foot strong { font: 700 15px var(--f-display); color: #fff; }
.slot-income { margin-left: auto; text-align: right; }
.slot-income strong { color: #fcd34d; }
.s-potential strong { color: #fcd34d; }
.slot-recycle { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(167, 139, 250, .18); }
.slot-recycle-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.slot-recycle-head b { font: 700 11.5px var(--f-display); color: #e9d5ff; }
.slot-recycle-bar { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(15, 10, 45, .85); border: 1px solid rgba(167, 139, 250, .25); }
.slot-recycle-bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #c084fc 60%, #fbbf24); box-shadow: 0 0 10px rgba(192, 132, 252, .7); transition: width .8s var(--ease); }
@media (max-width: 640px) {
    .slot-recycle { margin-top: 7px; padding-top: 7px; }
    .slot-recycle-head, .slot-recycle-head b { font-size: 10.5px; }
    .slot-recycle-bar { height: 5px; }
}

/* locked */
.slot.is-locked { background: linear-gradient(160deg, rgba(40, 32, 90, .75), rgba(20, 16, 56, .75)) padding-box, linear-gradient(135deg, rgba(129, 140, 248, .45), rgba(76, 29, 149, .4)) border-box; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.slot.is-locked .slot-body { filter: blur(3px) saturate(.6); opacity: .45; pointer-events: none; user-select: none; }
.slot-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.lock-ico { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; font-size: 30px; color: #fff; background: radial-gradient(circle at 35% 30%, #c084fc, #7e22ce 55%, #3b0764); box-shadow: 0 0 0 4px rgba(233, 213, 255, .55), 0 0 34px rgba(168, 85, 247, .85); }
.slot-lock p { margin-top: 8px; font: 800 15px var(--f-hero); color: #fff; letter-spacing: .08em; text-transform: uppercase; }
.slot-lock em { font: 700 12px var(--f-display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.slot.is-next .slot-lock em { color: #fbbf24; }
.slot-lock small { font: 600 13px var(--f-display); color: #ddd6fe; }

/* next upgrade */
.slot.is-next { background: radial-gradient(ellipse at 50% 40%, rgba(251, 191, 36, .14), transparent 60%) padding-box, linear-gradient(160deg, rgba(40, 30, 80, .85), rgba(20, 14, 52, .85)) padding-box, linear-gradient(135deg, #fde68a, rgba(217, 119, 6, .6) 40%, #fbbf24) border-box; box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 30px rgba(251, 191, 36, .3); }
.slot.is-next .lock-ico { background: radial-gradient(circle at 35% 30%, #fef3c7, #f59e0b 55%, #92400e); color: #3b2305; box-shadow: 0 0 0 4px rgba(253, 230, 138, .6), 0 0 38px rgba(245, 158, 11, .9); animation: lockPulse 2.2s ease-in-out infinite; }
.slot.is-next .slot-lock p { color: #fde68a; }
@keyframes lockPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(253, 230, 138, .7), 0 0 54px rgba(251, 191, 36, 1); } }

.slot-link { display: block; border-radius: 20px; color: inherit; }
.slot-link:focus-visible { outline: 2px solid #67e8f9; outline-offset: 4px; }

@media (max-width: 640px) {
    .s-head { margin-bottom: 18px; }
    .s-summary { width: 100%; }
    .s-summary > div { flex: 1 1 40%; }
    .s-summary .s-banner { flex-basis: 100%; justify-content: center; }
    .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .slot { border-radius: 16px; }
    .slot-body { padding: 0 10px 12px; }
    .slot-top { flex-direction: column; gap: 6px; }
    .slot-no { min-width: 36px; padding: 6px 9px 8px; font-size: 20px; border-radius: 0 0 11px 11px; }
    .slot-cost { margin-top: 0; font-size: 13px; gap: 5px; }
    .slot-cost i { font-size: 14px; }
    .slot-panel { margin-top: 10px; padding: 9px 8px 8px; border-radius: 11px; }
    .slot-dots { gap: 2px; }
    .slot-stats { margin-top: 8px; font-size: 11.5px; }
    .slot-stats span { gap: 3px; }
    .slot-stats i { font-size: 10px; }
    .slot-foot { flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
    .slot-medal { width: 26px; height: 26px; font-size: 11px; }
    .slot-foot strong { font-size: 12.5px; }
    .slot-foot span { font-size: 10.5px; }
    .slot-income { margin-left: 0; flex-basis: 100%; text-align: left; flex-direction: row !important; justify-content: space-between; align-items: baseline; }
    .lock-ico { width: 50px; height: 50px; font-size: 20px; }
    .slot-lock p { margin-top: 4px; font-size: 12.5px; }
    .slot-lock em { font-size: 10px; }
    .slot-lock small { font-size: 11.5px; }
}

/* ---------- 14-position slot tree ---------- */
.tr-page { max-width: 1320px; margin: 0 auto; }
.tr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tr-head h1 { font: 900 clamp(24px, 3vw, 36px) var(--f-hero); color: #fff; text-shadow: 0 0 22px rgba(139, 92, 246, .6); }
.tr-back { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(20, 16, 60, .6); color: #c4b5fd; transition: background .2s, color .2s; }
.tr-back:hover { background: rgba(99, 102, 241, .35); color: #fff; }
.tr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tr-card {
    position: relative; overflow: hidden; padding: 22px 24px 20px;
    border: 1px solid transparent; border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0, rgba(124, 58, 237, .3), transparent 60%) padding-box, linear-gradient(160deg, rgba(10, 8, 44, .95), rgba(6, 5, 28, .95)) padding-box, linear-gradient(135deg, rgba(96, 165, 250, .8), rgba(124, 58, 237, .3) 45%, rgba(236, 72, 153, .6)) border-box;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 0 40px rgba(124, 58, 237, .22);
    animation: rise .6s var(--ease) both;
}
.tr-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .25), transparent 65%); opacity: 0; transition: opacity .6s; }
.tr-card.is-struck::before { opacity: 1; transition: opacity .04s; }

.tr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-price { display: flex; align-items: center; gap: 12px; }
.tr-price i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #f7931a; color: #fff; font-size: 32px; box-shadow: 0 0 18px rgba(247, 147, 26, .55); }
.tr-price span { display: flex; flex-direction: column; font: 700 18px/1.05 var(--f-display); color: #fff; }
.tr-price b { font-size: 26px; color: #e879f9; }
.tr-cycle { padding: 10px 26px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(20, 16, 60, .7); font: 600 24px var(--f-display); color: #fff; white-space: nowrap; }

/* desktop canvas: 1000 x 560 */
.tr-canvas { position: relative; min-width: 0; aspect-ratio: 1000 / 560; margin-top: 8px; }
.tr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-wire { fill: none; stroke: rgba(167, 139, 250, .28); stroke-width: 3; vector-effect: non-scaling-stroke; }
.tr-flow {
    fill: none; stroke: url(#trLine); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 10 18; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .9));
    animation: trFlow 1.6s linear infinite, trFade .8s ease both; animation-delay: 0s, calc(var(--i) * 70ms);
}
@keyframes trFlow { to { stroke-dashoffset: -56; } }
@keyframes trFade { from { opacity: 0; } }

.tr-node {
    --c: #6366f1; --c2: #312e81;
    position: absolute; left: var(--x); top: var(--y); z-index: 2;
    width: 104px; min-height: 66px; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 9px 6px 7px; border-radius: 12px; border: 2px solid var(--c);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #0b0826), #0b0826 85%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 25%, transparent);
    text-align: center; cursor: default; outline: none;
    animation: trPop .55s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * 60ms);
    transition: transform .25s var(--ease), box-shadow .25s;
}
@keyframes trPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.tr-node:hover, .tr-node:focus-visible { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 26px var(--c), inset 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); z-index: 3; }
.tr-num { position: absolute; top: -12px; left: -12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 800 13px var(--f-hero); color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c2)); border: 2px solid var(--c); box-shadow: 0 0 10px var(--c); }
.tr-label { font: 700 10px/1.15 var(--f-display); color: color-mix(in srgb, var(--c) 45%, #fff); text-transform: uppercase; letter-spacing: .04em; }
.tr-label small { font-size: inherit; opacity: .8; }

/* registration ID: small "TPR-" + big number */
.tr-id { display: flex; align-items: baseline; justify-content: center; gap: 1px; line-height: 1; color: #fff; }
.tr-id small { font: 700 10px var(--f-display); color: rgba(255, 255, 255, .7); }
.tr-id b { font: 900 22px var(--f-hero); letter-spacing: .02em; text-shadow: 0 0 12px color-mix(in srgb, var(--c) 80%, #fff); }
.tr-id.is-empty { margin-top: 2px; padding: 1px 8px; border-radius: 6px; background: rgba(6, 5, 26, .7); font: 700 10px var(--f-mono); color: var(--muted); }
.tr-node.is-filled { animation: trPop .55s var(--ease) both, trGlow 2.4s ease-in-out infinite; animation-delay: calc(.15s + var(--i, 0) * 60ms), 1s; }
@keyframes trGlow { 50% { box-shadow: 0 0 28px var(--c), inset 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); } }

.tr-you { --c: #22c55e; --c2: #14532d; width: 190px; min-height: 60px; gap: 1px; border-radius: 14px; animation: trPop .5s var(--ease) both, trYou 2.6s ease-in-out infinite; }
.tr-you small { font: 700 9px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #bbf7d0; }
.tr-you strong { font: 900 30px/1 var(--f-hero); color: #fff; letter-spacing: .04em; text-shadow: 0 0 16px rgba(134, 239, 172, .9); }
.tr-you strong em { font-size: .45em; font-style: normal; color: #bbf7d0; margin-right: 2px; }
@keyframes trYou { 50% { box-shadow: 0 0 36px #22c55e, inset 0 0 18px rgba(34, 197, 94, .45); } }

/* role colours */
.tr-k-you { --c: #22c55e; --c2: #14532d; }
.tr-k-upline { --c: #3b82f6; --c2: #1e3a8a; }
.tr-k-self { --c: #a855f7; --c2: #581c87; }
.tr-k-next { --c: #22c55e; --c2: #14532d; }
.tr-k-royal { --c: #10b981; --c2: #064e3b; }
.tr-k-booster { --c: #ec4899; --c2: #831843; }
.tr-k-down { --c: #f59e0b; --c2: #78350f; }
.tr-k-recycle { --c: #ef4444; --c2: #7f1d1d; }
.tr-k-spill { --c: #64748b; --c2: #334155; }

/* spillover tag: where the payment for this spot went */
.tr-spill { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; border: 1px solid #64748b; background: #334155; color: #e2e8f0; font: 700 10px var(--f-display); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.tr-spill i { font-size: 8px; color: #cbd5e1; }
.tr-node.is-static .tr-spill { position: static; transform: none; margin-top: 4px; font-size: 8.5px; }
.tr-cycle { display: inline-flex; align-items: center; gap: 14px; }
.tr-cycle a { color: #c4b5fd; font-size: .7em; }
.tr-cycle a:hover { color: #fff; }

/* legend */
.tr-legend { list-style: none; margin: 14px 0 0; padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .55); }
.tr-legend li { display: flex; align-items: center; gap: 9px; font: 600 13px var(--f-display); color: #cbd5e1; }
.tr-legend i { width: 26px; height: 18px; border-radius: 5px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 30%, #0b0826); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }

/* phone layout */
.tr-mobile { display: none; }
.tr-node.is-static { position: relative; left: auto; top: auto; transform: none; width: 100%; animation-name: trPopStatic; }
.tr-node.is-static.is-filled { animation: trPopStatic .55s var(--ease) both, trGlow 2.4s ease-in-out infinite; animation-delay: calc(.15s + var(--i, 0) * 60ms), 1s; }
.tr-node.is-static:hover, .tr-node.is-static:focus-visible { transform: scale(1.04); }
@keyframes trPopStatic { from { opacity: 0; transform: scale(.7); } }
.tr-you.is-static { width: 180px; margin: 0 auto; animation: trPopStatic .5s var(--ease) both, trYou 2.6s ease-in-out infinite; }
.tr-m-branch, .tr-m-kids, .tr-m-sub { position: relative; }
.tr-m-branch { margin-top: 30px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .45); }
.tr-m-branch::before { content: ""; position: absolute; left: 50%; top: -31px; height: 30px; width: 2px; transform: translateX(-50%); }
.tr-m-side { position: absolute; top: -11px; left: 12px; padding: 1px 10px; border-radius: 999px; background: #1b1450; border: 1px solid rgba(253, 224, 71, .6); font: 800 11px var(--f-hero); color: #fde047; letter-spacing: .08em; text-shadow: 0 0 8px rgba(253, 224, 71, .7); }
.tr-m-parent { width: min(150px, 60%); margin: 0 auto; }
.tr-m-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding-top: 14px; }
.tr-m-kids::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; }
.tr-m-kids::after { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; transform: translateX(-50%); }
.tr-m-kids > .tr-m-sub::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; transform: translateX(-50%); }
.tr-m-kids .tr-m-kids { gap: 5px; margin-top: 12px; padding-top: 12px; }
.tr-m-kids .tr-m-kids::after { top: -12px; height: 12px; }
.tr-m-kids .tr-m-kids > .tr-m-sub::before { top: -12px; height: 12px; }
.tr-m-branch::before, .tr-m-kids::after, .tr-m-kids > .tr-m-sub::before {
    background: repeating-linear-gradient(180deg, #22d3ee 0 6px, transparent 6px 12px);
    background-size: 2px 24px; animation: trDashY 1s linear infinite; box-shadow: 0 0 6px rgba(34, 211, 238, .7);
}
.tr-m-kids::before {
    background: repeating-linear-gradient(90deg, #a78bfa 0 8px, transparent 8px 16px);
    background-size: 32px 2px; animation: trDashX 1.2s linear infinite; box-shadow: 0 0 6px rgba(167, 139, 250, .7);
}
@keyframes trDashY { to { background-position: 0 24px; } }
@keyframes trDashX { to { background-position: 32px 0; } }

@media (max-width: 1180px) {
    .tr-node { width: 90px; }
    .tr-id b { font-size: 19px; }
}
@media (max-width: 900px) {
    .tr-node { width: 78px; min-height: 58px; padding: 8px 4px 6px; }
    .tr-label { font-size: 8.5px; }
    .tr-id b { font-size: 16px; }
    .tr-you { width: 160px; }
    .tr-you strong { font-size: 24px; }
}
@media (max-width: 640px) {
    .tr-card { padding: 16px 12px; border-radius: 18px; }
    .tr-head h1 { font-size: 24px; }
    .tr-back { width: 36px; height: 36px; }
    .tr-price i { width: 40px; height: 40px; font-size: 24px; }
    .tr-price span { font-size: 13px; }
    .tr-price b { font-size: 18px; }
    .tr-cycle { padding: 8px 14px; font-size: 15px; }
    .tr-canvas { display: none; }
    .tr-mobile { display: block; margin-top: 18px; }
    .tr-mobile .tr-node { border-width: 1.5px; border-radius: 10px; padding: 9px 3px 6px; min-height: 60px; }
    .tr-mobile .tr-num { width: 20px; height: 20px; top: -9px; left: -7px; font-size: 10px; }
    .tr-mobile .tr-label { font-size: 9px; letter-spacing: 0; }
    .tr-mobile .tr-id b { font-size: 18px; }
    .tr-mobile .tr-id small { font-size: 8.5px; }
    .tr-mobile .tr-m-kids .tr-m-kids .tr-label { font-size: 7.5px; }
    .tr-mobile .tr-m-kids .tr-m-kids .tr-id b { font-size: 15px; }
    .tr-mobile .tr-you { min-height: 56px; }
    .tr-mobile .tr-you strong { font-size: 26px; }
    .tr-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
    .tr-legend li { font-size: 12px; }
}
@media (max-width: 360px) {
    .tr-mobile .tr-m-kids .tr-m-kids .tr-label { font-size: 6.5px; }
    .tr-mobile .tr-m-kids .tr-m-kids .tr-id b { font-size: 13px; }
    .tr-cycle { font-size: 13px; padding: 7px 10px; }
}

/* ---------- NFT Pool page ---------- */
.n-page { max-width: 1320px; margin: 0 auto; }
.chip-red { color: #fda4af; border-color: rgba(251, 113, 133, .55); background: rgba(251, 113, 133, .14); }
.m-nav-sub { display: flex; align-items: center; gap: 9px; }
.m-nav-sub i { width: 16px; text-align: center; color: #a5b4fc; }
.m-nav-sub.is-active { color: #fff; background: linear-gradient(100deg, rgba(59, 130, 246, .55), rgba(124, 58, 237, .55)); border: 1px solid rgba(165, 180, 252, .45); }

.n-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, .85fr); align-items: center; gap: 34px;
    padding: 40px 42px;
    border: 1px solid transparent; border-radius: 26px;
    background:
        radial-gradient(ellipse at 50% 55%, rgba(124, 58, 237, .38), transparent 55%) padding-box,
        linear-gradient(160deg, rgba(8, 6, 30, .95), rgba(14, 10, 52, .92)) padding-box,
        linear-gradient(135deg, rgba(96, 165, 250, .85), rgba(124, 58, 237, .4) 45%, rgba(251, 191, 36, .7)) border-box;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .5), 0 0 40px rgba(124, 58, 237, .25);
    animation: rise .7s var(--ease) both;
}
.n-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .35), transparent 65%);
    opacity: 0; transition: opacity .6s;
}
.n-hero.is-struck::before { opacity: 1; transition: opacity .04s; }
.n-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; z-index: -1; pointer-events: none; opacity: .9; }

.n-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(251, 191, 36, .55); background: rgba(120, 53, 15, .35); color: #fde68a; font: 700 12px var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.n-story h2 { margin: 16px 0 12px; font: 900 clamp(26px, 2.8vw, 38px)/1.15 var(--f-hero); color: #fff; }
.n-grad { background: linear-gradient(100deg, #7dd3fc, #a78bfa 45%, #f0abfc 70%, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.n-story p { font-size: 15px; line-height: 1.7; color: var(--text); max-width: 46ch; }
.n-points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.n-points li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(10, 8, 40, .6); font: 600 13px var(--f-display); color: #e0e7ff; }
.n-points i { color: #a78bfa; }

.n-stats { display: grid; gap: 14px; }
.n-stat { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(30, 24, 90, .55), rgba(8, 6, 32, .6)); backdrop-filter: blur(6px); }
.n-stat span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.n-stat strong { display: block; margin-top: 4px; font: 800 20px var(--f-display); color: #fff; }
.n-stat strong b { font-family: var(--f-hero); }
.n-gold { color: #fcd34d !important; text-shadow: 0 0 16px rgba(251, 191, 36, .5); }

/* ---- 3D pass ---- */
.n-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.n-stage::after { content: ""; position: absolute; left: 50%; bottom: 28px; width: 220px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(139, 92, 246, .75), transparent 70%); filter: blur(10px); z-index: -1; animation: shadowPulse 5s ease-in-out infinite; }
@keyframes shadowPulse { 50% { transform: translateX(-50%) scale(.82); opacity: .6; } }
.pass-video { position: relative; width: 320px; aspect-ratio: 440 / 632; animation: nftFloat 6s ease-in-out infinite; }
@keyframes nftFloat { 50% { transform: translateY(-10px); } }
.pass-video::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 30px; background: radial-gradient(ellipse, rgba(124, 58, 237, .45), transparent 70%); filter: blur(24px); z-index: -1; }
/* transparent VP9 clip; browsers without alpha video keep the transparent poster */
.pass-video-el { width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.pass-serial { display: flex; align-items: center; gap: 10px; margin: -14px 0 0; }
.pass-serial span { padding: 3px 10px; border-radius: 7px; border: 1px solid rgba(253, 230, 138, .5); background: rgba(120, 53, 15, .4); color: #fde68a; font: 700 12px var(--f-mono); }
.pass-serial b { font: 700 13px var(--f-mono); color: #c4b5fd; }

/* ---- My NFT card ---- */
.n-mine { margin-top: 24px; padding: 26px 30px; border: 1px solid transparent; border-radius: 22px; position: relative; overflow: hidden; animation: rise .7s var(--ease) .12s both; }
.n-mine::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(254, 243, 199, .3), transparent 65%); opacity: 0; transition: opacity .6s; }
.n-mine.is-struck::before { opacity: 1; transition: opacity .04s; }
.n-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.n-mine-head h2 { display: flex; align-items: center; gap: 12px; font: 800 clamp(20px, 2.2vw, 26px) var(--f-hero); color: #fff; }
.n-mine-head h2 i { color: #fbbf24; font-size: .8em; text-shadow: 0 0 12px rgba(251, 191, 36, .8); }
.n-mine-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; margin-top: 22px; align-items: center; }
.n-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.n-prices div { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(251, 191, 36, .25); background: rgba(6, 6, 22, .55); }
.n-prices span { display: block; font-size: 12.5px; color: var(--muted); }
.n-prices strong { display: block; margin-top: 3px; font: 700 17px var(--f-display); color: #fff; overflow-wrap: anywhere; }
.n-prices .mono { font-size: 14px; }
.n-lock-title { font: 800 20px var(--f-hero); color: #fff; margin-bottom: 12px; }
.n-lock-title small { display: block; margin-top: 2px; font: 500 12.5px var(--f-body); color: var(--muted); }
.n-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, #4c1d95, #7e22ce 55%, #6d28d9); box-shadow: 0 10px 30px rgba(126, 34, 206, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.n-count > div { flex: 1; display: flex; flex-direction: column; align-items: center; }
.n-count b { font: 900 clamp(26px, 3vw, 38px)/1 var(--f-hero); color: #fff; text-shadow: 0 0 16px rgba(233, 213, 255, .8); font-variant-numeric: tabular-nums; }
.n-count span { margin-top: 5px; font: 600 10.5px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #e9d5ff; }
.n-count > i { font: 900 26px var(--f-hero); font-style: normal; color: #e9d5ff; opacity: .7; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.n-lock-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.n-lock-bar span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.n-sell { width: 100%; margin-top: 24px; padding: 14px; border: 1px solid rgba(196, 181, 253, .5); border-radius: 14px; background: linear-gradient(100deg, #6d28d9, #9333ea 55%, #7c3aed); color: #fff; font: 700 15px var(--f-display); letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 30px rgba(147, 51, 234, .45); cursor: pointer; }
.n-sell:disabled { cursor: not-allowed; opacity: .6; filter: saturate(.7); }

@media (max-width: 1180px) {
    .n-hero { grid-template-columns: minmax(0, 1fr) auto; }
    .n-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .n-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 26px; text-align: center; }
    .n-story p { margin: 0 auto; }
    .n-points { justify-content: center; }
    .n-mine-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
    .n-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .n-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 12px 14px; }
    .n-stat strong { margin-top: 0; font-size: 15px; text-align: right; }
    .pass-video { width: 260px; }
    .n-mine { padding: 20px 16px; }
    .n-prices { gap: 10px; }
    .n-prices div { padding: 11px 12px; }
    .n-prices strong { font-size: 14.5px; }
    .n-count { padding: 12px 8px; gap: 2px; }
    .n-count > i { font-size: 18px; }
    .n-count span { font-size: 9px; letter-spacing: .06em; }
    .n-sell { font-size: 13.5px; }
}

/* ---------- Royal Club / Ranks page ---------- */
.r-page { max-width: 1320px; margin: 0 auto; }
.r-tagline { font: 600 14px var(--f-display); color: var(--text); letter-spacing: .04em; }
.r-tagline b { color: #fcd34d; }
.r-gold { --rc: #fbbf24; --rc2: #b45309; --rc3: #fef3c7; }
.r-violet { --rc: #c084fc; --rc2: #6b21a8; --rc3: #f3e8ff; }
.r-blue { --rc: #60a5fa; --rc2: #1e40af; --rc3: #dbeafe; }
.r-crimson { --rc: #fb7185; --rc2: #9f1239; --rc3: #ffe4e6; }

/* pool panel */
.r-pool { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 26px 30px; border: 1px solid transparent; border-radius: 22px; animation: rise .6s var(--ease) both; }
.r-pool::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(254, 243, 199, .28), transparent 65%); opacity: 0; transition: opacity .6s; }
.r-pool.is-struck::before { opacity: 1; transition: opacity .04s; }
.r-pool-col { display: grid; gap: 14px; }
.r-stat { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(251, 191, 36, .25); background: rgba(6, 6, 22, .5); }
.r-stat span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.r-stat span i { color: #fbbf24; }
.r-stat strong { display: block; margin-top: 4px; font: 800 19px var(--f-display); color: #fff; }
.r-next { text-align: center; }
.r-next p { font: 900 clamp(20px, 2.2vw, 26px) var(--f-hero); color: #fff; margin-bottom: 12px; }
.r-actions { margin-top: 14px; display: grid; gap: 8px; justify-items: center; }
.r-actions .btn-gold:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.r-action-status:empty { display: none; }
.r-action-status { font-size: 12.5px; color: var(--muted); }
.r-action-status.is-error { color: #fda4af; }
.r-action-status.is-ok { color: #6ee7b7; }
.r-next small { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.r-count { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(120deg, #4c1d95, #7e22ce 55%, #6d28d9); box-shadow: 0 10px 30px rgba(126, 34, 206, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.r-count > div { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.r-count b { font: 900 30px/1 var(--f-hero); color: #fff; text-shadow: 0 0 14px rgba(233, 213, 255, .8); }
.r-count span { margin-top: 5px; font: 600 10px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #e9d5ff; }
.r-count > i { font: 900 22px var(--f-hero); font-style: normal; color: #e9d5ff; opacity: .6; }

/* rank progress strip */
.r-progress { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; margin-top: 22px; padding: 22px 28px; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(160deg, rgba(14, 22, 78, .9), rgba(8, 10, 44, .86)) padding-box, linear-gradient(135deg, rgba(96, 165, 250, .8), rgba(59, 130, 246, .2) 45%, rgba(139, 92, 246, .6)) border-box; box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 26px rgba(59, 130, 246, .2); animation: rise .6s var(--ease) .08s both; }
.r-progress::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .3), transparent 65%); opacity: 0; transition: opacity .6s; }
.r-progress.is-struck::before { opacity: 1; transition: opacity .04s; }
.r-progress-now, .r-progress-next { display: flex; flex-direction: column; }
.r-progress-next { text-align: right; }
.r-progress-now strong, .r-progress-next strong { font: 800 20px var(--f-display); color: #fff; }
.r-progress-now small, .r-progress-next small { font-size: 12.5px; color: var(--muted); }
.r-progress-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: 4px; }
.r-track-bar { position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 4px; border-radius: 4px; background: rgba(99, 102, 241, .25); z-index: 0; }
.r-track-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #c084fc, #60a5fa, #fb7185); box-shadow: 0 0 12px rgba(192, 132, 252, .8); }
.r-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.r-step-dot { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; color: var(--rc); background: rgba(10, 8, 40, .95); border: 2px solid color-mix(in srgb, var(--rc) 55%, transparent); }
.r-step.is-done .r-step-dot { color: #fff; background: radial-gradient(circle at 35% 30%, var(--rc), var(--rc2)); border-color: var(--rc3); box-shadow: 0 0 20px var(--rc); }
.r-step b { font: 700 13px var(--f-display); color: #fff; }
.r-step small { font-size: 11.5px; color: var(--muted); }

.r-heading { margin: 30px 0 16px; font: 900 clamp(24px, 2.6vw, 32px) var(--f-hero); color: #fff; text-shadow: 0 0 22px rgba(139, 92, 246, .6); }

/* rank cards */
.r-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rank-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px; border: 1.5px solid transparent; border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 60%) padding-box,
        linear-gradient(170deg, rgba(24, 16, 60, .94), rgba(8, 6, 28, .95)) padding-box,
        linear-gradient(160deg, var(--rc3), var(--rc) 30%, var(--rc2) 60%, var(--rc)) border-box;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 24px color-mix(in srgb, var(--rc) 30%, transparent);
    animation: rise .6s var(--ease) both; animation-delay: calc(.12s + var(--i) * 60ms);
    transition: transform .3s var(--ease), box-shadow .3s;
}
.rank-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 36px color-mix(in srgb, var(--rc) 55%, transparent); }
.rank-card::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(255, 255, 255, .3), transparent 65%); opacity: 0; transition: opacity .6s; }
.rank-card.is-struck::before { opacity: 1; transition: opacity .04s; }
.rank-card.is-achieved::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--spin), transparent 0 70%, var(--rc) 82%, #fff 86%, var(--rc) 90%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spin 6s linear infinite;
}
.rank-top { display: flex; align-items: center; gap: 10px; }
.rank-no { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font: 900 18px var(--f-hero); color: #fff; background: linear-gradient(145deg, var(--rc), var(--rc2)); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 60%, transparent); }
.rank-tier { font: 900 17px var(--f-hero); letter-spacing: .06em; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 60%, transparent); }
.rank-top .chip { margin-left: auto; }

.rank-art { position: relative; }
.rank-nft {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 12px 16px; border-radius: 16px;
    border: 2px solid color-mix(in srgb, var(--rc) 45%, #4b5563);
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 55%), linear-gradient(170deg, #1d1b2e, #0b0a18);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 0 30px color-mix(in srgb, var(--rc) 20%, transparent);
    text-align: center;
}
.rank-orb {
    width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%;
    font-size: 40px; color: var(--rc3);
    background: radial-gradient(circle at 40% 30%, var(--rc), var(--rc2) 60%, #0b0a18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 34px var(--rc), inset 0 0 22px rgba(0, 0, 0, .4);
    animation: orbPulse 3.2s ease-in-out infinite;
}
@keyframes orbPulse { 50% { box-shadow: 0 0 0 3px var(--rc3), 0 0 50px var(--rc), inset 0 0 22px rgba(0, 0, 0, .4); } }
.rank-nft strong { font: 800 16px var(--f-hero); letter-spacing: .03em; color: #fff; }
.rank-nft em { padding: 3px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); font: 700 10.5px var(--f-display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--rc); }
.rank-card.is-locked .rank-nft { filter: blur(3px) saturate(.5); opacity: .55; }
.rank-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.rank-lock p { font: 800 13px var(--f-hero); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .8); }
.rank-card .lock-ico { width: 62px; height: 62px; font-size: 24px; background: radial-gradient(circle at 35% 30%, var(--rc3), var(--rc) 45%, var(--rc2)); color: #1a1030; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 30px var(--rc); }

.rank-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rank-meta div { padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); background: rgba(6, 6, 22, .55); }
.rank-meta span { display: block; font-size: 11.5px; color: var(--muted); }
.rank-meta b { font: 800 17px var(--f-display); color: #fff; }
.rank-pct { color: var(--rc) !important; text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 60%, transparent); }
.rank-req { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-req li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .2); background: rgba(6, 6, 22, .5); font-size: 12px; color: var(--text); }
.rank-req li i { width: 14px; text-align: center; color: var(--muted); }
.rank-req li b { margin-left: auto; font: 700 13px var(--f-display); color: #fff; }
.rank-req li.is-met { border-color: rgba(52, 211, 153, .45); background: rgba(16, 185, 129, .1); }
.rank-req li.is-met i { color: #34d399; }
.rank-bar { height: 6px; border-radius: 6px; background: rgba(99, 102, 241, .2); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rc2), var(--rc)); box-shadow: 0 0 10px var(--rc); }
.rank-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rank-perks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.rank-perks i { color: var(--rc); font-size: 12px; }
.rank-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--rc) 25%, transparent); font-size: 12.5px; color: var(--muted); }
.rank-foot b { color: #fff; font-family: var(--f-display); }

@media (max-width: 1180px) {
    .r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-pool { grid-template-columns: 1fr 1fr; }
    .r-next { grid-column: 1 / -1; order: -1; }
    .r-count { justify-content: center; max-width: 420px; margin: 0 auto; }
    .r-progress { grid-template-columns: 1fr 1fr; }
    .r-progress-track { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 640px) {
    .r-pool { padding: 18px 14px; gap: 12px; }
    .r-pool-col { gap: 10px; }
    .r-stat { padding: 11px 12px; }
    .r-stat strong { font-size: 15px; }
    .r-count { padding: 10px 8px; gap: 2px; }
    .r-count > div { min-width: 0; flex: 1; }
    .r-count b { font-size: 22px; }
    .r-count > i { font-size: 16px; }
    .r-count span { font-size: 8.5px; letter-spacing: .06em; }
    .r-progress { padding: 16px 14px; gap: 16px 10px; }
    .r-progress-now strong, .r-progress-next strong { font-size: 16px; }
    .r-step-dot { width: 36px; height: 36px; font-size: 14px; }
    .r-track-bar { top: 17px; }
    .r-step b { font-size: 11px; }
    .r-step small { font-size: 10px; }
    .r-grid { gap: 12px; }
    .rank-card { padding: 11px; gap: 10px; border-radius: 16px; }
    .rank-no { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
    .rank-tier { font-size: 12px; }
    .rank-top .chip { display: none; }
    .rank-nft { padding: 12px 6px 10px; gap: 7px; }
    .rank-orb { width: 58px; height: 58px; font-size: 24px; }
    .rank-nft strong { font-size: 11.5px; }
    .rank-nft em { font-size: 8px; padding: 2px 7px; letter-spacing: .12em; }
    .rank-card .lock-ico { width: 44px; height: 44px; font-size: 17px; }
    .rank-lock p { font-size: 10px; }
    .rank-meta { gap: 6px; }
    .rank-meta div { padding: 7px 8px; }
    .rank-meta span { font-size: 10px; }
    .rank-meta b { font-size: 13.5px; }
    .rank-perks li { font-size: 10.5px; gap: 5px; }
    .rank-req li { padding: 5px 6px; gap: 5px; font-size: 9.5px; }
    .rank-req li b { font-size: 11px; }
    .rank-foot { font-size: 11px; }
}

/* ---------- Partners / Team / Transactions tables ---------- */
.t-page { max-width: 1320px; margin: 0 auto; }
.t-card {
    position: relative; overflow: hidden; padding: 12px 22px 18px;
    border: 1px solid transparent; border-radius: 22px;
    background: radial-gradient(ellipse at 100% 0, rgba(147, 51, 234, .22), transparent 55%) padding-box, linear-gradient(160deg, rgba(20, 16, 70, .9), rgba(8, 7, 34, .88)) padding-box, linear-gradient(135deg, rgba(96, 165, 250, .75), rgba(99, 102, 241, .2) 45%, rgba(168, 85, 247, .7)) border-box;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 28px rgba(99, 102, 241, .2);
    animation: rise .6s var(--ease) both;
}
.t-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .25), transparent 65%); opacity: 0; transition: opacity .6s; }
.t-card.is-struck::before { opacity: 1; transition: opacity .04s; }
.t-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.t-table th { padding: 14px 10px; text-align: left; font: 700 14px var(--f-display); color: #fff; border-bottom: 1px solid rgba(165, 180, 252, .35); white-space: nowrap; }
.t-table td { padding: 14px 10px; border-bottom: 1px solid var(--line); color: #e0e7ff; white-space: nowrap; vertical-align: middle; }
.t-table tbody tr { transition: background .2s; animation: rise .5s var(--ease) both; }
.t-table tbody tr:hover { background: rgba(99, 102, 241, .1); }
.t-table tbody tr:last-child td { border-bottom: 0; }
.t-id { font: 700 14px var(--f-display); color: #fff; }
.t-id-link { color: #e879f9; }
.t-name { display: block; font-size: 11.5px; color: var(--muted); }
.t-muted { color: var(--muted); }
.t-pill { display: inline-grid; place-items: center; min-width: 30px; padding: 3px 9px; border-radius: 8px; background: linear-gradient(145deg, rgba(124, 58, 237, .55), rgba(59, 130, 246, .35)); border: 1px solid rgba(165, 180, 252, .4); font: 700 13px var(--f-display); color: #fff; }
.t-level { padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line-2); font: 600 12px var(--f-display); color: var(--text); }
.t-level-1 { border-color: rgba(251, 191, 36, .55); color: #fde68a; background: rgba(120, 53, 15, .3); }
.t-addr { display: inline-flex; align-items: center; gap: 8px; }
.t-addr .mono { font-size: 13px; color: #fff; }
.t-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(99, 102, 241, .18); color: #c7d2fe; font-size: 12px; cursor: pointer; transition: background .2s; }
.t-ico:hover { background: rgba(99, 102, 241, .45); }
.t-type { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--f-display); color: #fda4af; }
.t-type-in { color: #6ee7b7; }
.t-amt { font: 700 14px var(--f-display); color: #fff; }
.t-amt-in { color: #6ee7b7; }
.t-empty { padding: 40px 10px !important; text-align: center; color: var(--muted); white-space: normal !important; }
.t-empty i { display: block; margin-bottom: 10px; font-size: 28px; color: #a5b4fc; }
.t-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.t-page-btn { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(165, 180, 252, .45); background: rgba(67, 56, 202, .45); color: #fff; font: 600 13px var(--f-display); transition: background .2s; }
a.t-page-btn:hover { background: rgba(79, 70, 229, .8); }
.t-page-btn.is-disabled { opacity: .4; }
.t-page-no { font: 700 13px var(--f-display); color: #fff; }

@media (max-width: 1100px) {
    .t-card { overflow-x: auto; }
}
@media (max-width: 760px) {
    .t-card { padding: 8px 12px 14px; overflow: visible; }
    
    /* Exclude partners and team tables from collapsing into mobile cards */
    .t-table:not(.partners-table):not(.team-table) thead { display: none; }
    .t-table:not(.partners-table):not(.team-table), 
    .t-table:not(.partners-table):not(.team-table) tbody, 
    .t-table:not(.partners-table):not(.team-table) tr, 
    .t-table:not(.partners-table):not(.team-table) td { display: block; width: 100%; }
    
    .t-table tbody tr { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(6, 6, 26, .5); }
    .t-table tbody tr:hover { background: rgba(6, 6, 26, .5); }
    .t-table td { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); white-space: normal; text-align: right; }
    .t-table td::before { content: attr(data-label); flex: none; margin-right: auto; font: 600 12px var(--f-display); color: var(--muted); text-align: left; }
    .t-table td[data-label="S.No"] { display: none; }
    .t-table tbody tr td:nth-child(2) { border-bottom-style: solid; padding-bottom: 9px; }
    .t-table tr.t-empty-row { border: 0; background: none; }
    .t-table td.t-empty { display: block; }
    .t-table td.t-empty::before { content: none; }
    .t-name { display: inline; margin-left: 6px; }
    .t-pager { justify-content: center; }
}

/* ---------- Statistics page ---------- */
.st-page { max-width: 1320px; margin: 0 auto; }
.st-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.st-tile {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px;
    border: 1px solid transparent; border-radius: 18px;
    background: radial-gradient(ellipse at 100% 100%, rgba(147, 51, 234, .45), transparent 65%) padding-box, linear-gradient(160deg, rgba(22, 16, 70, .9), rgba(10, 8, 38, .88)) padding-box, linear-gradient(135deg, rgba(96, 165, 250, .6), rgba(99, 102, 241, .15) 50%, rgba(192, 132, 252, .7)) border-box;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35); animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 50ms);
    transition: transform .25s var(--ease);
}
.st-tile:hover { transform: translateY(-3px); }
.st-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .3), transparent 65%); opacity: 0; transition: opacity .6s; }
.st-tile.is-struck::before { opacity: 1; transition: opacity .04s; }
.st-tile-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 17px; color: #fff; background: linear-gradient(145deg, #6d28d9, #3b82f6); box-shadow: 0 0 18px rgba(124, 58, 237, .55); }
.st-tile div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.st-tile strong { font: 800 19px var(--f-display); color: #fff; overflow-wrap: anywhere; }
.st-tile div > span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e0e7ff; }
.st-tile div > span i { font-size: 11px; color: var(--muted); }
.st-tile small { font-size: 11px; color: var(--muted); }

.st-chart {
    position: relative; overflow: hidden; padding: 22px 24px 18px;
    border: 1px solid transparent; border-radius: 22px;
    background: radial-gradient(ellipse at 0 0, rgba(147, 51, 234, .25), transparent 55%) padding-box, linear-gradient(160deg, rgba(20, 13, 64, .92), rgba(12, 9, 42, .92)) padding-box, linear-gradient(135deg, rgba(96, 165, 250, .6), rgba(99, 102, 241, .15) 50%, rgba(192, 132, 252, .6)) border-box;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4); animation: rise .6s var(--ease) .15s both;
}
.st-chart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .22), transparent 65%); opacity: 0; transition: opacity .6s; }
.st-chart.is-struck::before { opacity: 1; transition: opacity .04s; }
.st-chart-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.st-chart-head h2 { margin-right: auto; font: 900 clamp(20px, 2.2vw, 26px) var(--f-hero); color: #fff; }
.st-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .55); }
.st-tab { padding: 8px 16px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 14px var(--f-display); cursor: pointer; transition: background .2s, color .2s; }
.st-tab:hover { color: #fff; }
.st-tab[aria-selected="true"] { color: #fff; background: linear-gradient(100deg, #6d28d9, #9333ea); box-shadow: 0 0 16px rgba(147, 51, 234, .5); }
.st-tabs-sm .st-tab { padding: 8px 12px; font-size: 13px; }
.st-caption { margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.st-caption b { color: #fff; }

.st-plot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 300px auto; column-gap: 10px; }
.st-axis { position: relative; min-width: 34px; }
.st-axis span { position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); font: 500 11.5px var(--f-body); color: var(--muted); white-space: nowrap; }
.st-bars { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; border-bottom: 1px solid rgba(165, 180, 252, .35); }
.st-grid { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid rgba(165, 180, 252, .1); pointer-events: none; }
.st-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.st-col:hover, .st-col:focus-visible { background: rgba(155, 114, 247, .1); border-radius: 6px 6px 0 0; }
.st-bar { width: min(62%, 44px); height: var(--h); border-radius: 4px 4px 0 0; background: #9b72f7; box-shadow: 0 0 14px rgba(155, 114, 247, .45); transform-origin: bottom; animation: barGrow .8s var(--ease) both; }
@keyframes barGrow { from { transform: scaleY(0); } }
.st-peak { position: absolute; bottom: calc(var(--h) + 6px); left: 50%; transform: translateX(-50%); font: 700 12px var(--f-display); font-style: normal; color: #fff; white-space: nowrap; pointer-events: none; }
.st-col::after { content: attr(data-tip); position: absolute; bottom: calc(100% - 8px); left: 50%; transform: translate(-50%, -4px); z-index: 5; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(10, 8, 36, .96); color: #fff; font: 600 12px var(--f-display); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.st-col:hover::after, .st-col:focus-visible::after { opacity: 1; }
.st-col:first-child::after { left: 0; transform: translate(0, -4px); }
.st-col:last-child::after { left: auto; right: 0; transform: translate(0, -4px); }
.st-labels { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; padding-top: 8px; }
.st-labels span { text-align: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.st-table { margin-top: 16px; }
.st-table summary { width: max-content; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line-2); color: #c7d2fe; font: 600 12.5px var(--f-display); cursor: pointer; list-style: none; }
.st-table summary::-webkit-details-marker { display: none; }
.st-table[open] summary { margin-bottom: 8px; }

@media (max-width: 1280px) { .st-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .st-tile { padding: 12px; gap: 9px; }
    .st-tile-ico { width: 34px; height: 34px; font-size: 14px; }
    .st-tile strong { font-size: 15px; }
    .st-tile div > span { font-size: 12px; }
    .st-chart { padding: 16px 12px 14px; }
    .st-chart-head h2 { flex-basis: 100%; }
    .st-tab { padding: 7px 11px; font-size: 13px; }
    .st-plot { grid-template-rows: 220px auto; column-gap: 6px; }
    .st-labels span { font-size: 10px; }
    .st-peak { font-size: 10.5px; }
}

/* ---------- Wallet login / register ---------- */
.a-body { min-height: 100vh; }
.a-shell { position: relative; z-index: 1; min-height: 100vh; max-width: 1240px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px); align-items: center; gap: clamp(28px, 5vw, 72px); }
.a-hero { animation: rise .7s var(--ease) both; }
.a-logo { width: min(320px, 70%); filter: drop-shadow(0 0 26px rgba(99, 102, 241, .75)); animation: logoGlow 4s ease-in-out infinite alternate; }
body.is-strike .a-logo { animation: none; filter: drop-shadow(0 0 34px rgba(191, 219, 254, 1)) brightness(1.5); }
.a-hero h1 { margin: 22px 0 12px; font: 900 clamp(34px, 4.4vw, 56px)/1.05 var(--f-hero); color: #fff; text-shadow: 0 0 30px rgba(139, 92, 246, .5); }
.a-hero p { max-width: 44ch; font-size: 16px; line-height: 1.7; color: var(--text); }
.a-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.a-points li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(10, 8, 40, .6); backdrop-filter: blur(8px); font-size: 14px; color: var(--text); }
.a-points i { font-size: 18px; color: #fbbf24; }
.a-points b { color: #fff; }

.a-card {
    position: relative; overflow: hidden; padding: 28px;
    border: 1px solid transparent; border-radius: 26px;
    background: radial-gradient(ellipse at 100% 0, rgba(147, 51, 234, .3), transparent 55%) padding-box, linear-gradient(160deg, rgba(20, 15, 70, .92), rgba(8, 6, 32, .92)) padding-box, linear-gradient(135deg, rgba(96, 165, 250, .85), rgba(99, 102, 241, .2) 45%, rgba(236, 72, 153, .6)) border-box;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 40px rgba(124, 58, 237, .3);
    backdrop-filter: blur(14px);
    animation: rise .7s var(--ease) .1s both;
}
.a-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--spin), transparent 0 72%, rgba(34, 211, 238, .9) 82%, #fff 86%, rgba(167, 139, 250, .95) 90%, rgba(236, 72, 153, .8) 95%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spin 6s linear infinite;
}
.a-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at var(--hx, 50%) 0, rgba(191, 219, 254, .3), transparent 65%); opacity: 0; transition: opacity .6s; }
.a-card.is-struck::before { opacity: 1; transition: opacity .04s; }
.a-card > * { position: relative; z-index: 3; }

.a-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .6); }
.a-tab { padding: 10px; border-radius: 10px; text-align: center; font: 700 14px var(--f-display); color: var(--muted); transition: color .2s, background .2s; }
.a-tab:hover { color: #fff; }
.a-tab.is-on { color: #fff; background: linear-gradient(100deg, #2563eb, #7c3aed); box-shadow: 0 6px 20px rgba(79, 70, 229, .5); }
.a-head { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; }
.a-badge { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 15px; font-size: 22px; color: #fff; background: linear-gradient(145deg, #6d28d9, #3b82f6); box-shadow: 0 0 24px rgba(124, 58, 237, .6); }
.a-head h2 { font: 800 22px var(--f-display); color: #fff; }
.a-head p { font-size: 13.5px; color: var(--muted); }

.a-form { display: grid; gap: 14px; }
.a-register-fields { display: grid; gap: 14px; }
.a-register-fields[hidden] { display: none; }
.a-field > span { display: block; margin-bottom: 6px; font: 600 13px var(--f-display); color: #e0e7ff; }
.a-field small { color: var(--muted); font-weight: 400; }
.a-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .65); transition: border-color .2s, box-shadow .2s; }
.a-input:focus-within { border-color: rgba(165, 180, 252, .8); box-shadow: 0 0 0 3px rgba(99, 102, 241, .25); }
.a-input i { color: #a5b4fc; }
.a-input input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: none; color: #fff; font: 500 15px var(--f-body); }
.a-input input::placeholder { color: rgba(149, 145, 196, .7); }
.a-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #6ee7b7; }

.a-wallet { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(52, 211, 153, .45); background: rgba(16, 185, 129, .1); color: #fff; }
.a-wallet[hidden] { display: none; }
.a-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.a-link { margin-left: auto; padding: 0; border: 0; background: none; color: #a5b4fc; font: 600 13px var(--f-display); cursor: pointer; text-decoration: underline; }
.a-connect { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1px solid rgba(196, 181, 253, .6); border-radius: 14px; background: linear-gradient(100deg, #2563eb, #7c3aed 55%, #c026d3); color: #fff; font: 800 16px var(--f-display); letter-spacing: .02em; cursor: pointer; box-shadow: 0 12px 34px rgba(124, 58, 237, .55); transition: transform .2s, box-shadow .2s; }
.a-connect::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 60%, 100% { left: 130%; } }
.a-connect:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(124, 58, 237, .75); }
.a-connect:disabled { cursor: progress; opacity: .85; transform: none; }
.a-status { min-height: 20px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.a-status.is-error { color: #fda4af; }
.a-status.is-ok { color: #6ee7b7; }
.a-status.is-info { color: #fde68a; }

.a-steps { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.a-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.a-steps b { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(124, 58, 237, .35); border: 1px solid rgba(167, 139, 250, .5); color: #fff; font: 700 12px var(--f-display); }
.a-steps small { color: var(--muted); }
.a-wallets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.a-wallets span { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted); }

.a-dev { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.a-dev summary { cursor: pointer; font: 600 12.5px var(--f-display); color: var(--muted); list-style: none; }
.a-dev summary::-webkit-details-marker { display: none; }
.a-dev-form { display: grid; gap: 8px; margin-top: 10px; }
.a-dev-form input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .65); color: #fff; font: 500 14px var(--f-body); }
.a-dev-form button { padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(67, 56, 202, .5); color: #fff; font: 600 13px var(--f-display); cursor: pointer; }
.a-error { color: #fda4af; }

.a-picker { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(3, 2, 14, .7); backdrop-filter: blur(4px); }
.a-picker[hidden] { display: none; }
.a-picker-box { width: min(380px, 100%); padding: 22px; border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #17124a, #0a0826); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); text-align: center; }
.a-picker-box h3 { margin-bottom: 14px; font: 800 18px var(--f-display); color: #fff; }
.a-picker-list { display: grid; gap: 8px; margin-bottom: 14px; }
.a-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6, 5, 26, .6); color: #fff; font: 600 15px var(--f-display); cursor: pointer; transition: border-color .2s, background .2s; }
.a-pick:hover { border-color: rgba(165, 180, 252, .8); background: rgba(67, 56, 202, .35); }
.a-pick img { width: 28px; height: 28px; border-radius: 7px; }
.a-picker-box .a-link { margin: 0; }

@media (max-width: 900px) {
    .a-shell { grid-template-columns: minmax(0, 1fr); padding-top: 28px; gap: 22px; align-content: start; }
    .a-hero { text-align: center; }
    .a-logo { width: 200px; }
    .a-hero h1 { font-size: 30px; margin-top: 12px; }
    .a-hero p { margin: 0 auto; font-size: 14.5px; }
    .a-points { justify-content: center; margin-top: 16px; gap: 8px; }
    .a-points li { padding: 8px 11px; font-size: 13px; }
}
@media (max-width: 480px) {
    .a-card { padding: 20px 16px; border-radius: 22px; }
    .a-head h2 { font-size: 19px; }
}

/* NFT on-chain bits */
.pass-chain { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(52, 211, 153, .5); background: rgba(16, 185, 129, .14); color: #6ee7b7; font: 700 11px var(--f-display); font-style: normal; }
.n-stat-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #a5b4fc; }
.n-stat-link:hover, .n-prices a:hover { color: #fff; }
.n-prices a { color: #c7d2fe; }
.n-prices a i { font-size: 11px; }
.n-sell-note { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--muted); }
.n-sell-note.is-error { color: #fda4af; }
.n-sell-note.is-ok { color: #6ee7b7; }

/* ---------- Activation card ---------- */
.d-activate { max-width: 1320px; margin: 0 auto 22px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 24px; }
.d-activate-main { display: flex; align-items: center; gap: 16px; }
.d-activate-ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; font-size: 24px; color: #3b2305; background: radial-gradient(circle at 35% 30%, #fef3c7, #f59e0b 60%, #b45309); box-shadow: 0 0 26px rgba(245, 158, 11, .7); animation: iconPulse 2.6s ease-in-out infinite; }
.d-activate h2 { font: 800 21px var(--f-display); color: #fff; }
.d-activate p { margin-top: 3px; font-size: 13.5px; color: var(--text); }
.d-activate p b { color: #fde68a; }
.d-activate-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.d-activate-actions .btn-chip { margin-top: 0; padding: 9px 14px; font-size: 13px; cursor: pointer; }
.d-activate-status:empty { display: none; }
.d-activate-status { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.d-activate-status.is-error { color: #fda4af; }
.d-activate-status.is-ok { color: #6ee7b7; }
@media (max-width: 760px) {
    .d-activate { grid-template-columns: minmax(0, 1fr); }
    .d-activate-actions { justify-content: stretch; }
    .d-activate-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Toast ---------- */
.m-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 11px; background: linear-gradient(100deg, #2563eb, #7c3aed); color: #fff; font: 600 13px var(--f-display); box-shadow: 0 10px 30px rgba(79, 70, 229, .55); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.m-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1460px) {
    .d-slot { flex-wrap: wrap; }
    .slot-cycle { order: 3; flex-basis: 100%; border-left: 0; border-top: 1px solid rgba(96, 165, 250, .25); padding: 16px 0 0; }
    .slot-arrow { margin-left: auto; }
}

@media (max-width: 1080px) {
    .m-side { transform: translateX(-100%); }
    body.nav-open .m-side { transform: none; }
    body.nav-open .m-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(3, 2, 14, .6); backdrop-filter: blur(2px); }
    .m-main { margin-left: 0; }
    .m-top {
        position: sticky; top: 0; z-index: 30;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 16px;
        background: rgba(8, 6, 32, .82); backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
    }
    .m-burger { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(20, 16, 60, .6); font-size: 17px; cursor: pointer; }
    .m-top-logo img { height: 40px; width: auto; display: block; filter: drop-shadow(0 0 12px rgba(99, 102, 241, .7)); }
    .m-top .m-burger, .m-top .m-top-logo { display: grid; }
    .m-top-right { margin-left: 0; }
    .m-content { padding-top: 24px; }
}

@media (max-width: 960px) {
    .d-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "prof"
            "stats"
            "link"
            "slot"
            "earn"
            "act";
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .m-content { padding: 18px 14px 36px; }
    .card { padding: 20px 18px; --r: 18px; }
    .d-profile { padding: 0; }
    .d-hero { padding: 20px 18px 16px; gap: 16px; }
    .d-profile > .d-profile-art {
        height: 150px; max-width: 56%; object-position: 70% top; opacity: .85;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 50%), linear-gradient(180deg, #000 50%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 50%), linear-gradient(180deg, #000 50%, transparent 100%);
    }
    .m-top-id, .m-top-logout span { display: none; }
    .m-top-logout { width: 40px; padding: 0; justify-content: center; font-size: 15px; }
    .d-hero { padding: 16px 16px 12px; gap: 14px; }
    .m-avatar-xl { width: 60px; height: 60px; font-size: 26px; box-shadow: 0 0 0 2px rgba(196, 181, 253, .85), 0 0 0 6px rgba(124, 58, 237, .22), 0 0 28px rgba(139, 92, 246, .8); }
    .m-avatar-xl .m-avatar-check { width: 20px; height: 20px; font-size: 9px; right: 0; bottom: 2px; }
    .d-hello-sub { font-size: 13px; }
    .d-hello h1 { font-size: 19px; gap: 8px; margin: 1px 0 6px; }
    .d-hello h1 .chip { padding: 2px 8px; font-size: 10.5px; }
    .d-label { font-size: 11px; }
    .d-regid { font-size: 16px; }
    .d-facts { gap: 8px; margin: 0 12px 12px; }
    .fact { gap: 8px; padding: 8px 9px; }
    .fact-ico { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .fact div > span { font-size: 10.5px; }
    .fact strong { font-size: 12.5px; }
    .act-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name id" "time id"; row-gap: 2px; column-gap: 10px; padding: 11px 0; }
    .act-name { font-size: 13px; }
    .act-ico { width: 34px; height: 34px; font-size: 13px; }
    .act-id { justify-self: end !important; justify-content: flex-start; gap: 7px; padding: 6px 11px; font-size: 13px; }
    .act-id i { font-size: 14px; }
    .act-time { padding-left: 44px; font-size: 11.5px; }
    /* compact slot card: current + next side by side, cycle row below */
    .d-slot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; padding: 14px; }
    .slot-arrow { display: none; }
    .slot-side { gap: 8px; min-width: 0; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(96, 165, 250, .3); background: rgba(6, 8, 36, .45); }
    .slot-side > div { min-width: 0; }
    .slot-next { padding: 10px 8px; }
    .gem, .gem-sm { width: 30px; height: 46px; }
    .d-slot .d-label { font-size: 10.5px; }
    .slot-name, .slot-next .slot-name { font-size: 16px; line-height: 1.2; }
    .slot-price { font-size: 12px; }
    .btn-chip { margin-top: 6px; padding: 3px 8px; font-size: 10.5px; gap: 5px; }
    .slot-cycle { grid-column: 1 / -1; order: 3; gap: 12px; padding: 10px 2px 0; border-left: 0; border-top: 1px solid rgba(96, 165, 250, .25); }
    .ring { width: 58px; height: 58px; }
    .ring circle { stroke-width: 11; }
    .ring-val { font-size: 13px; }
    .cycle-meta { min-width: 0; }
    .cycle-meta p { font-size: 13px; margin-bottom: 6px; }
    .cycle-bar span { font-size: 11.5px; }
    .earn-body { flex-direction: column; align-items: stretch; }
    .earn-split { border-left: 0; border-top: 1px solid rgba(251, 191, 36, .35); padding: 14px 0 0; }
    .earn-split::before { display: none; }
    .d-link-foot { flex-direction: column; align-items: stretch; }
    .btn-gold { justify-content: center; }
    .card-title-lg { font-size: 20px; }
    .act-head { display: none; }
    .act-name { grid-area: name; gap: 10px; }
    .act-id { grid-area: id; }
    .act-time { grid-area: time; justify-self: start !important; color: var(--muted); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .m-storm { display: none; }
}

/* ---------- Booster & Lottery ---------- */
.rw-pools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 10px; }
.rw-pool h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 19px var(--f-display); color: #fff; }
.rw-pool h2 i { color: #f472b6; }
.rw-pool > p { margin: 0 0 14px; font-size: 13px; color: var(--text); }
.rw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rw-stats div { padding: 10px; border-radius: 12px; background: rgba(6, 10, 40, .6); border: 1px solid rgba(236, 72, 153, .28); min-width: 0; }
.rw-stats span { display: block; font-size: 11px; color: var(--muted); }
.rw-stats strong { font: 700 14px var(--f-display); color: #fff; overflow-wrap: anywhere; }
.rw-note { margin: 12px 0 0; font-size: 13px; color: #6ee7b7; }
.rw-fee { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.rw-round { border-top: 1px solid var(--line-2); padding: 12px 0; }
.rw-round > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; cursor: pointer; font-size: 13.5px; color: var(--text); list-style: none; }
.rw-round > summary::-webkit-details-marker { display: none; }
.rw-round[open] > summary { margin-bottom: 10px; }
.rw-tag { padding: 3px 10px; border-radius: 8px; font: 700 12px var(--f-display); color: #fff; }
.rw-booster { background: linear-gradient(135deg, #be185d, #831843); }
.rw-lottery { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.rw-hash { margin-left: auto; font: 600 12px var(--f-display); color: #c4b5fd; }
.rw-joins summary { cursor: pointer; color: #f9a8d4; }
.rw-joins a { display: block; font-size: 12px; color: #c4b5fd; padding: 2px 0; }
.rw-me td { background: rgba(236, 72, 153, .12); }
@media (max-width: 760px) {
    .rw-pools { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rw-stats { gap: 6px; }
    .rw-stats div { padding: 8px; }
    .rw-stats strong { font-size: 12.5px; }
    .rw-hash { margin-left: 0; }
}




/* TPR WebGL background */
#tprScene {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* =========================================================
   FIXED TABLE WRAPPER & ALIGNMENT
   ========================================================= */
.t-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.t-table-scroll .t-table {
    border-collapse: collapse;
    width: 100%;
}

.t-table-scroll .t-table thead { display: table-header-group !important; }
.t-table-scroll .t-table tbody { display: table-row-group !important; }
.t-table-scroll .t-table tr { display: table-row !important; }
.t-table-scroll .t-table th,
.t-table-scroll .t-table td {
    display: table-cell !important;
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap !important;
}

/* Partners Table (8 columns) */
.partners-table { width: 1200px !important; min-width: 1200px !important; table-layout: fixed !important; }
.partners-table th:nth-child(1), .partners-table td:nth-child(1) { width: 70px; }
.partners-table th:nth-child(2), .partners-table td:nth-child(2) { width: 180px; }
.partners-table th:nth-child(3), .partners-table td:nth-child(3) { width: 110px; }
.partners-table th:nth-child(4), .partners-table td:nth-child(4) { width: 120px; }
.partners-table th:nth-child(5), .partners-table td:nth-child(5) { width: 110px; }
.partners-table th:nth-child(6), .partners-table td:nth-child(6) { width: 190px; }
.partners-table th:nth-child(7), .partners-table td:nth-child(7) { width: 160px; }
.partners-table th:nth-child(8), .partners-table td:nth-child(8) { width: 260px; }

/* Team Table (7 columns) */
.team-table { width: 1050px !important; min-width: 1050px !important; table-layout: fixed !important; }
.team-table th:nth-child(1), .team-table td:nth-child(1) { width: 80px; }
.team-table th:nth-child(2), .team-table td:nth-child(2) { width: 220px; }
.team-table th:nth-child(3), .team-table td:nth-child(3) { width: 120px; }
.team-table th:nth-child(4), .team-table td:nth-child(4) { width: 110px; }
.team-table th:nth-child(5), .team-table td:nth-child(5) { width: 130px; }
.team-table th:nth-child(6), .team-table td:nth-child(6) { width: 130px; }
.team-table th:nth-child(7), .team-table td:nth-child(7) { width: 260px; }

/* Transactions Table (5 columns) */
.transactions-table { width: 100% !important; min-width: 700px !important; table-layout: fixed !important; }
.transactions-table th:nth-child(1), .transactions-table td:nth-child(1) { width: 80px; }
.transactions-table th:nth-child(2), .transactions-table td:nth-child(2) { width: 180px; }
.transactions-table th:nth-child(3), .transactions-table td:nth-child(3) { width: 200px; }
.transactions-table th:nth-child(4), .transactions-table td:nth-child(4) { width: 100px; }
.transactions-table th:nth-child(5), .transactions-table td:nth-child(5) { width: 160px; }