/* EarnBitcoin — landing styles */

/* Light theme (default) */
:root {
    color-scheme: light;
    --bg: #fffdf7;
    --bg-alt: #fbf5e6;
    --surface: #ffffff;
    --surface-2: #fffbf2;
    --border: rgba(185, 125, 10, 0.18);
    --hairline: rgba(60, 45, 10, 0.08);
    --text: #1c160a;
    --muted: #6b624d;
    --legal: #8a8170;
    --accent: #b27408;
    --gold-1: #c98a0b;
    --gold-2: #f7b928;
    --gold-3: #c98a0b;
    --gold-grad: linear-gradient(135deg, #ffe89a 0%, #f7b928 45%, #d99413 100%);
    --gold-text: linear-gradient(135deg, #e0a21c 0%, #c4850a 50%, #9a6405 100%);
    --on-gold: #1a1204;
    --up: #15803d;
    --down: #dc2626;
    --up-bg: rgba(22, 163, 74, .12);
    --nav-bg: rgba(255, 253, 247, .8);
    --menu-bg: rgba(255, 253, 247, .98);
    --ghost-bg: rgba(255, 255, 255, .7);
    --pill-bg: rgba(255, 255, 255, .85);
    --dash-bg: linear-gradient(180deg, #ffffff, #fffaf0);
    --toast-bg: rgba(255, 255, 255, .97);
    --glow: rgba(247, 185, 40, .22);
    --glow-2: rgba(247, 185, 40, .14);
    --tint: rgba(247, 185, 40, .12);
    --radius: 18px;
    --shadow: 0 20px 60px rgba(120, 85, 10, 0.12);
    --shadow-lg: 0 30px 80px rgba(120, 85, 10, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
    --shadow-sm: 0 14px 40px rgba(120, 85, 10, .14);
    --font-head: 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, sans-serif;
}

/* Dark theme */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0a0a;
    --bg-alt: #111009;
    --surface: #16140e;
    --surface-2: #1d1a12;
    --border: rgba(255, 199, 64, 0.14);
    --hairline: rgba(255, 255, 255, 0.06);
    --text: #f4efe2;
    --muted: #a8a08c;
    --legal: #7a7361;
    --accent: #f7b928;
    --gold-1: #ffe38a;
    --gold-text: linear-gradient(135deg, #ffe89a 0%, #f7b928 45%, #d99413 100%);
    --up: #4ade80;
    --down: #f87171;
    --up-bg: rgba(74, 222, 128, .14);
    --nav-bg: rgba(10, 10, 10, .72);
    --menu-bg: rgba(10, 10, 10, .97);
    --ghost-bg: rgba(255, 255, 255, .02);
    --pill-bg: rgba(22, 20, 14, .8);
    --dash-bg: linear-gradient(180deg, #221e14, #14120c);
    --toast-bg: rgba(24, 22, 15, .95);
    --glow: rgba(247, 185, 40, .22);
    --glow-2: rgba(201, 138, 11, .14);
    --tint: rgba(247, 185, 40, .1);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-sm: 0 14px 40px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    transition: background-color .25s ease, color .25s ease;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.container--narrow { max-width: 820px; }
@media (min-width: 640px) { .container { padding: 0 28px; } }

.gold-text {
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--gold-2); }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 560px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 20px; border-radius: 999px;
    font-weight: 600; font-size: .95rem; white-space: nowrap;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--gold { background: var(--gold-grad) border-box; color: var(--on-gold); box-shadow: 0 8px 28px rgba(247, 185, 40, .28); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(247, 185, 40, .42); }
.btn--ghost { border-color: var(--border); color: var(--text); background: var(--ghost-bg); }
.btn--ghost:hover { border-color: var(--gold-2); color: var(--accent); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Nav */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 46px; height: auto; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand__name span { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links > a { color: var(--muted); font-weight: 500; font-size: .95rem; transition: color .2s; }
.nav__links > a:hover { color: var(--gold-1); }
.nav__cta { display: flex; gap: 10px; }
.nav__cta-mobile { display: none; }
.nav__toggle { display: none; }

@media (max-width: 900px) {
    .nav__cta { display: none; }
    .nav__toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        margin-left: auto; width: 44px; height: 44px; padding: 0 11px;
        background: transparent; border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
    }
    .nav__toggle span { height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
    .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
    .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav__links {
        position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; gap: 0; margin: 0;
        padding: 8px 16px 20px;
        background: var(--menu-bg);
        border-bottom: 1px solid var(--border);
        display: none;
    }
    .nav.is-open .nav__links { display: flex; }
    .nav__links > a { padding: 14px 4px; border-bottom: 1px solid var(--hairline); font-size: 1rem; }
    .nav__cta-mobile { display: flex; gap: 10px; padding-top: 16px; }
    .nav__cta-mobile .btn { flex: 1; }
}

/* Hero */
.hero { position: relative; padding: 88px 0 104px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(20px); }
.hero__glow--a { width: 720px; height: 720px; right: -160px; top: -200px; background: radial-gradient(circle, var(--glow), transparent 65%); }
.hero__glow--b { width: 520px; height: 520px; left: -220px; bottom: -260px; background: radial-gradient(circle, var(--glow-2), transparent 65%); }

.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.08; margin: 22px 0 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 28px; }
.btn__arrow { width: 18px; height: 18px; margin-left: 8px; transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.hero__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: .92rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust li::before {
    content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none;
    background: rgba(247, 185, 40, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7b928' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Live price pill */
.price-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px; border-radius: 999px;
    background: var(--pill-bg); border: 1px solid var(--border);
    font-size: .9rem; backdrop-filter: blur(6px);
}
.price-pill__coin {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gold-grad); color: var(--on-gold); font-weight: 800; font-size: .85rem;
}
.price-pill__label { color: var(--muted); font-weight: 500; }
.price-pill__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-pill__change { font-weight: 600; font-size: .82rem; }
.price-pill__change.up { color: var(--up); }
.price-pill__change.down { color: var(--down); }

/* Visual: dashboard preview */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.hero__mark {
    position: absolute; top: -10px; right: -20px; width: 72%;
    filter: drop-shadow(0 30px 60px rgba(247, 185, 40, .35));
    animation: float 7s ease-in-out infinite;
}
.dash {
    position: relative; z-index: 2; width: min(400px, 100%); margin-top: 120px;
    padding: 24px; border-radius: 24px;
    background: var(--dash-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}
.dash__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dash__title { font-weight: 600; }
.dash__tag { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.dash__label { color: var(--muted); font-size: .82rem; }
.dash__balance { font-family: var(--font-head); font-weight: 700; font-size: 2rem; letter-spacing: -0.01em; line-height: 1.2; }
.dash__balance span { font-size: 1rem; color: var(--accent); font-weight: 600; }
.dash__sub { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.dash__chart { display: block; width: 100%; height: 90px; margin: 16px 0 18px; }
.dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.dash__row span { display: block; color: var(--muted); font-size: .75rem; }
.dash__row strong { font-size: .95rem; font-variant-numeric: tabular-nums; }

.toast {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px 10px 10px; border-radius: 14px;
    background: var(--toast-bg); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); font-size: .82rem;
}
.toast strong { display: block; font-weight: 600; }
.toast span { color: var(--muted); }
.toast__icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 800; }
.toast__icon--gold { background: var(--gold-grad); color: var(--on-gold); }
.toast__icon--green { background: var(--up-bg); color: var(--up); }
.toast__icon svg { width: 18px; height: 18px; }
.toast--a { left: -48px; top: 330px; animation: float 6s ease-in-out infinite .5s; }
.toast--b { right: -40px; top: 196px; animation: float 6.5s ease-in-out infinite 1.2s; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 1000px) {
    .hero { padding: 48px 0 72px; }
    .hero__inner { grid-template-columns: 1fr; gap: 24px; }
    .hero__copy { text-align: center; }
    .hero__copy .lead { margin-left: auto; margin-right: auto; }
    .hero__actions, .hero__trust { justify-content: center; }
    .hero__visual { min-height: 0; max-width: 440px; width: 100%; margin: 0 auto; }
    .hero__mark { width: 60%; right: 0; top: -20px; }
    .toast--a { left: -8px; }
    .toast--b { right: -8px; }
}
@media (max-width: 480px) {
    .hero__actions .btn { width: 100%; }
    .dash { padding: 20px; margin-top: 100px; }
    .dash__balance { font-size: 1.7rem; }
    .toast { font-size: .75rem; padding: 8px 12px 8px 8px; }
    .toast--a { top: 270px; left: -4px; }
    .toast--b { right: -4px; top: 168px; }
}

/* Strip */
.strip { border-block: 1px solid var(--border); background: var(--bg-alt); }
.strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip__item { padding: 26px 16px; text-align: center; }
.strip__item + .strip__item { border-left: 1px solid var(--border); }
.strip__item strong { display: block; font-family: var(--font-head); font-size: 1.5rem; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strip__item span { color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) {
    .strip__inner { grid-template-columns: repeat(2, 1fr); }
    .strip__item:nth-child(3) { border-left: 0; }
    .strip__item:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Sections */
.section { padding: 96px 0; }
.section--alt { background: var(--bg-alt); }
.section__head { text-align: center; margin-bottom: 52px; }
@media (max-width: 640px) { .section { padding: 64px 0; } .section__head { margin-bottom: 36px; } }

.card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card p { color: var(--muted); margin: 0; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.step { padding: 32px 28px; }
.step__num { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; margin-bottom: 14px; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { padding: 32px 28px; transition: transform .2s ease, border-color .2s ease; }
.feature:hover { transform: translateY(-4px); border-color: rgba(247, 185, 40, .4); }
.feature__icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    margin-bottom: 20px; color: var(--accent);
    background: var(--tint); border: 1px solid var(--border);
}
.feature__icon svg { width: 26px; height: 26px; }

@media (max-width: 900px) { .steps, .grid-3 { grid-template-columns: 1fr; } }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold-grad);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E");
}
.checks li::after {
    content: ''; position: absolute; left: 6px; top: 8px; width: 8px; height: 5px;
    border-left: 2px solid #1a1204; border-bottom: 2px solid #1a1204; transform: rotate(-45deg);
}
.split__art { display: grid; place-items: center; }
.shield {
    width: min(340px, 100%); aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 14px;
    color: var(--accent);
    background: radial-gradient(circle at 50% 40%, rgba(247, 185, 40, .16), transparent 65%), var(--surface);
}
.shield svg { width: 46%; filter: drop-shadow(0 0 24px rgba(247, 185, 40, .35)); }
.shield span { font-family: var(--font-head); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { padding: 0 24px; }
.faq summary {
    list-style: none; cursor: pointer; padding: 22px 32px 22px 0; position: relative;
    font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; font-weight: 400; color: var(--accent); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 22px; }

/* CTA */
.cta {
    text-align: center; padding: 64px 24px; border-radius: 28px;
    background: radial-gradient(ellipse at top, rgba(247, 185, 40, .2), transparent 60%), var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow);
}
.cta__wordmark { width: min(360px, 80%); margin: 0 auto 28px; }

/* Wordmark drawn with text: sharp at any size and pixel density */
.wordmark { display: grid; justify-items: center; gap: 6px; margin: 0 auto 26px; width: fit-content; }
.wordmark__text {
    font-family: var(--font-head); font-weight: 800; font-style: italic; letter-spacing: -.01em; line-height: 1.05;
    font-size: clamp(2.6rem, 8vw, 4.4rem); padding: 0 .08em;
    background: linear-gradient(180deg, #fff3b8 0%, #f7cf55 38%, #d99413 62%, #f6c343 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(122, 78, 6, .55)) drop-shadow(0 10px 22px rgba(247, 185, 40, .28));
}
.wordmark__text span { font-size: 1.12em; }
.wordmark__rule { position: relative; display: block; width: 88%; height: 14px; }
.wordmark__rule::before, .wordmark__rule::after {
    content: ''; position: absolute; top: 50%; width: calc(50% - 16px); height: 2px; border-radius: 2px;
}
.wordmark__rule::before { left: 0; background: linear-gradient(90deg, transparent, #e0a21c); }
.wordmark__rule::after { right: 0; background: linear-gradient(90deg, #e0a21c, transparent); }
.wordmark__rule i {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #fff1b8, #e0a21c);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 6px rgba(247, 185, 40, .6));
}
.cta .lead { margin: 0 auto 28px; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 40px 0 28px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { color: var(--muted); font-size: .92rem; }
.footer__links a:hover { color: var(--gold-1); }
.footer__legal { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline); color: var(--legal); font-size: .82rem; }
.footer__legal p { margin: 0 0 6px; }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__mark, .toast { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* Theme toggle */
.theme-toggle {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
    background: var(--ghost-bg); border: 1px solid var(--border); color: var(--text);
    transition: border-color .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: var(--gold-2); color: var(--accent); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
    .nav__actions { margin-left: auto; }
    .nav__actions .nav__toggle { margin-left: 0; }
}

/* ---------------------------------------------------------------- */
/* Auth pages                                                        */
/* ---------------------------------------------------------------- */
.btn--block { width: 100%; }
.btn svg { width: 20px; height: 20px; margin-right: 8px; flex: none; }
.btn:disabled { cursor: progress; opacity: .85; transform: none; }
.btn.is-busy svg { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.auth { display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; min-height: 100vh; min-height: 100dvh; }

.auth__brand {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 36px 48px;
    background: #0d0b06; color: #f4efe2;
    border-right: 1px solid var(--border);
}
.auth__brand .brand__name { color: #f4efe2; }
.auth__brand .brand__name span { background: linear-gradient(135deg, #ffe89a 0%, #f7b928 45%, #d99413 100%); -webkit-background-clip: text; background-clip: text; }
.auth__brand-glow {
    position: absolute; z-index: -1; width: 700px; height: 700px; right: -260px; top: 10%;
    background: radial-gradient(circle, rgba(247, 185, 40, .25), transparent 62%);
}
.auth__brand-mark { width: 62%; max-width: 300px; margin-bottom: 28px; filter: drop-shadow(0 24px 50px rgba(247, 185, 40, .35)); animation: float 7s ease-in-out infinite; }
.auth__brand h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 12px; }
.auth__brand p { color: #b3aa94; max-width: 400px; }
.auth__points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.auth__points li { position: relative; padding-left: 30px; color: #e6dfcd; font-size: .95rem; }
.auth__points li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(247, 185, 40, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7b928' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.auth__brand-foot { font-size: .8rem; color: #7a7361 !important; margin: 0; }

.auth__main {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 96px 24px 48px;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--tint), transparent 70%), var(--bg);
}
.auth__top { position: absolute; top: 20px; left: 24px; right: 24px; display: flex; align-items: center; gap: 16px; }
.auth__mobile-brand { display: none; }
.auth__back { margin-left: auto; color: var(--muted); font-size: .92rem; font-weight: 500; }
.auth__back:hover { color: var(--accent); }

.auth__card {
    width: 100%; max-width: 460px; padding: 36px 32px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
    box-shadow: var(--shadow);
}
.auth__card h1 { font-size: 1.75rem; margin-bottom: 8px; }
.auth__lead { color: var(--muted); margin-bottom: 26px; font-size: .96rem; }

.auth__steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 4px; }
.auth__steps li {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    color: var(--muted); font-size: .92rem; font-weight: 500; transition: background .2s, color .2s;
}
.auth__steps li span {
    width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-size: .8rem; font-weight: 700; border: 1px solid var(--border); background: var(--surface-2);
}
.auth__steps li[data-state="active"] { background: var(--tint); color: var(--text); }
.auth__steps li[data-state="active"] span { border-color: var(--gold-2); color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.auth__steps li[data-state="done"] { color: var(--text); }
.auth__steps li[data-state="done"] span { background: var(--gold-grad); border-color: transparent; color: transparent; position: relative; }
.auth__steps li[data-state="done"] span::after {
    content: ''; position: absolute; left: 9px; top: 9px; width: 9px; height: 5px;
    border-left: 2px solid var(--on-gold); border-bottom: 2px solid var(--on-gold); transform: rotate(-45deg);
}
.auth__steps li[data-state="error"] { color: var(--down); }
.auth__steps li[data-state="error"] span { border-color: var(--down); color: var(--down); }

.auth__status { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; border: 1px solid; }
.auth__status--info { background: var(--tint); border-color: var(--border); color: var(--text); }
.auth__status--success { background: var(--up-bg); border-color: transparent; color: var(--up); }
.auth__status--error { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); color: var(--down); }
.auth__status a { color: inherit; font-weight: 600; text-decoration: underline; }

.auth__nowallet { margin-top: 16px; font-size: .9rem; color: var(--muted); }
.auth__nowallet p { margin-bottom: 10px; }
.auth__deeplinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth__deeplinks .btn { font-size: .85rem; padding: 10px 12px; }

.auth__switch { margin-top: 22px; color: var(--muted); font-size: .95rem; }
.auth__switch a { color: var(--accent); font-weight: 600; }
.auth__switch a:hover { text-decoration: underline; }

/* Form field */
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.field__wrap { position: relative; }
.field input {
    width: 100%; padding: 14px 44px 14px 16px; border-radius: 14px;
    font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .06em;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
    transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--legal); font-weight: 400; letter-spacing: 0; }
.field input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 4px var(--tint); }
.field__state { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; }
.field__state.is-loading { border: 2px solid var(--border); border-top-color: var(--gold-2); animation: spin .7s linear infinite; }
.field__state.is-ok { background: var(--up); }
.field__state.is-ok::after {
    content: ''; position: absolute; left: 6px; top: 6px; width: 8px; height: 4px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.field__state.is-bad { background: var(--down); }
.field__state.is-bad::before, .field__state.is-bad::after {
    content: ''; position: absolute; left: 9px; top: 5px; width: 2px; height: 10px; background: #fff; transform: rotate(45deg);
}
.field__state.is-bad::before { transform: rotate(-45deg); }
.field__hint { margin: 8px 0 0; font-size: .84rem; color: var(--muted); }
.field__hint.is-ok { color: var(--up); }
.field__hint.is-bad { color: var(--down); }

@media (max-width: 960px) {
    .auth { grid-template-columns: 1fr; }
    .auth__brand { display: none; }
    .auth__mobile-brand { display: inline-flex; }
    .auth__back { font-size: .85rem; }
}
@media (max-width: 480px) {
    .auth__main { padding: 88px 16px 32px; justify-content: flex-start; }
    .auth__top { left: 16px; right: 16px; gap: 10px; }
    .auth__back { display: none; }
    .auth__top .theme-toggle { margin-left: auto; }
    .auth__card { padding: 28px 20px; border-radius: 20px; }
    .auth__deeplinks { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Member panel                                                      */
/* ---------------------------------------------------------------- */
.panel { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: 18px;
    padding: 20px 16px; overflow-y: auto;
    background: var(--surface); border-right: 1px solid var(--border);
    overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
}
/* Thin scrollbar that only shows while the pointer is over the sidebar */
.sidebar:hover, .sidebar:focus-within { scrollbar-color: var(--border) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.sidebar:hover::-webkit-scrollbar-thumb, .sidebar:focus-within::-webkit-scrollbar-thumb { background: var(--border); }

.sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; }
.sidebar__close { display: none; }

.sidebar__member {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border);
}
.sidebar__member strong { display: block; font-size: .95rem; letter-spacing: .02em; }
.sidebar__member span { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sidebar__member .sidebar__avatar { color: var(--on-gold); font-size: .95rem; }
.sidebar__avatar {
    width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: var(--gold-grad); color: var(--on-gold); font-weight: 700; font-size: .95rem;
}
.sidebar__avatar--lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.4rem; }

.sidebar__nav { display: grid; gap: 4px; }
.sidebar__link {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 12px; border-radius: 12px; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-weight: 500; font-size: .95rem; text-align: left;
    transition: background .15s, color .15s;
}
.sidebar__link > svg:first-child { width: 20px; height: 20px; flex: none; }
.sidebar__link:hover { background: var(--tint); color: var(--text); }
.sidebar__link.is-active { background: var(--tint); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold-2); }
.sidebar__link.is-active > svg, .sidebar__link.is-current > svg:first-child { color: var(--accent); }
.sidebar__link.is-current { color: var(--text); font-weight: 600; }
.sidebar__link.is-disabled { cursor: default; opacity: .55; }
.sidebar__link.is-disabled:hover { background: none; color: var(--muted); }
.sidebar__link em {
    margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--accent);
}
.sidebar__caret { width: 16px; height: 16px; margin-left: auto; transition: transform .2s; }
.sidebar__group.is-open .sidebar__caret { transform: rotate(180deg); }
.sidebar__sub { display: grid; gap: 2px; margin: 2px 0 4px 21px; padding-left: 12px; border-left: 1px solid var(--border); }
.sidebar__sublink {
    padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: .9rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar__sublink:hover { background: var(--tint); color: var(--text); }
.sidebar__sublink.is-active { color: var(--accent); background: var(--tint); font-weight: 600; }

.sidebar__foot { margin-top: auto; display: grid; gap: 8px; }
.sidebar__foot form { margin: 0; }
.sidebar__invite {
    display: grid; gap: 4px; padding: 16px; border-radius: 16px;
    background: radial-gradient(circle at 100% 0%, rgba(247, 185, 40, .28), transparent 60%), var(--surface-2);
    border: 1px solid var(--border);
}
.sidebar__invite strong { font-size: .95rem; }
.sidebar__invite span { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.sidebar__invite .btn { padding: 9px 14px; font-size: .88rem; }
.sidebar__logout:hover { color: var(--down); background: rgba(220, 38, 38, .08); }

.panel__main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 32px;
    background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.topbar__menu { display: none; }
.topbar__title { font-size: 1.25rem; margin: 0; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.panel__content { padding: 28px 32px 48px; display: grid; gap: 20px; align-content: start; width: 100%; }

.wallet-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border); font-size: .88rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.wallet-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }

/* Panel content blocks */
.welcome {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 28px 32px;
    background: radial-gradient(ellipse at 100% 50%, rgba(247, 185, 40, .25), transparent 60%), var(--surface);
}
.welcome h2 { font-size: 1.7rem; margin-bottom: 4px; }
.welcome p:not(.eyebrow) { margin: 0; color: var(--muted); }
.welcome .eyebrow { margin-bottom: 6px; }
.welcome__mark { width: 150px; filter: drop-shadow(0 12px 30px rgba(247, 185, 40, .35)); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat { padding: 22px 24px; display: grid; gap: 4px; }
.stat__label { color: var(--muted); font-size: .85rem; font-weight: 500; }
.stat__value { font-size: 1.7rem; font-weight: 700; letter-spacing: .02em; }
.stat__sub { color: var(--muted); font-size: .82rem; }
.stat__sub a { color: var(--accent); font-weight: 600; }

.refbox { padding: 22px 24px; display: flex; align-items: flex-end; gap: 16px; }
.refbox > div { flex: 1; min-width: 0; }
.refbox__input {
    width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 12px;
    font-size: .95rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}

.table-card { padding: 0; overflow: hidden; }
.table-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.table-card__head h2 { font-size: 1.1rem; margin: 0; }
.badge { font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--tint); color: var(--accent); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 24px; background: var(--surface-2); white-space: nowrap; }
.table td { padding: 14px 24px; border-top: 1px solid var(--hairline); white-space: nowrap; }
.table tbody tr:hover { background: var(--tint); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.pill { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill--active { background: var(--up-bg); color: var(--up); }
.pill--direct { background: var(--tint); color: var(--accent); }
.pill--placement { background: var(--up-bg); color: var(--up); }
.pill--test { background: rgba(120, 120, 120, .14); color: var(--muted); font-family: var(--font-body); }
.pill--royalty { background: rgba(124, 92, 240, .14); color: #8b6cf0; }
.pill--flushed { background: rgba(220, 38, 38, .1); color: var(--down); white-space: nowrap; }
.table .amount--flushed, .table .amount.amount--flushed { color: var(--down); text-decoration: line-through; text-decoration-thickness: 1px; }
.flush-reason { font-size: .85rem; line-height: 1.4; }
.flush-reason .muted { display: block; font-size: .8rem; }
.flush-note {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border: 1px solid rgba(220, 38, 38, .25); background: rgba(220, 38, 38, .05); color: var(--text);
}
.flush-note__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(220, 38, 38, .12); color: var(--down); }
.flush-note__icon svg { width: 20px; height: 20px; }
.flush-note__text { display: grid; gap: 2px; flex: 1; font-size: .88rem; color: var(--muted); }
.flush-note__text strong { color: var(--down); font-size: 1rem; }
.flush-note__link { font-weight: 600; color: var(--down); }
.table .amount { font-weight: 700; color: var(--up); font-variant-numeric: tabular-nums; }
.txlink { color: var(--accent); }
.txlink:hover { text-decoration: underline; }
.pill--blocked { background: rgba(220, 38, 38, .1); color: var(--down); }
.pill--free { background: var(--tint); color: var(--accent); }
.level { display: inline-grid; place-items: center; min-width: 34px; padding: 2px 8px; border-radius: 8px; font-size: .8rem; font-weight: 700; background: var(--tint); color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 500; color: var(--muted); border: 1px solid var(--border); background: var(--surface);
}
.chip span { font-size: .75rem; font-weight: 600; color: var(--accent); }
.chip:hover { color: var(--text); border-color: var(--gold-2); }
.chip.is-active { background: var(--gold-grad) border-box; color: var(--on-gold); border-color: transparent; }
.chip.is-active span { color: var(--on-gold); }

.empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 56px 24px; }
.empty svg { width: 48px; height: 48px; color: var(--accent); margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 380px; margin: 0; }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 16px 24px; border-top: 1px solid var(--hairline); }
.pagination a {
    display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
    font-size: .88rem; font-weight: 500; color: var(--muted); border: 1px solid var(--border);
}
.pagination a:hover { color: var(--text); border-color: var(--gold-2); }
.pagination .active a { background: var(--gold-grad) border-box; color: var(--on-gold); border-color: transparent; font-weight: 700; }
.pagination--steps { align-items: center; justify-content: space-between; gap: 12px; }
[data-ajax-list] { transition: opacity .15s ease; }
[data-ajax-list].is-loading { opacity: .55; pointer-events: none; }
.pagination__info, .pagination__page { font-size: .88rem; color: var(--muted); }
.pagination__page { padding: 0 6px; white-space: nowrap; }
.pagination__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pagination__btn {
    display: grid; place-items: center; height: 36px; padding: 0 14px; border-radius: 10px;
    font-size: .88rem; font-weight: 500; color: var(--text); border: 1px solid var(--border); white-space: nowrap;
}
a.pagination__btn:hover { border-color: var(--gold-2); background: var(--surface-2); }
.pagination__btn.is-disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
    .pagination--steps { justify-content: center; }
    .pagination__page { order: -1; width: 100%; text-align: center; }
    .pagination__buttons { justify-content: center; }
}

.profile { padding: 28px; max-width: 760px; }
.profile__head { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.profile__head h2 { font-size: 1.5rem; margin-bottom: 6px; }
.details { margin: 0; display: grid; }
.details > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.details > div:last-child { border-bottom: 0; }
.details dt { color: var(--muted); font-size: .9rem; }
.details dd { margin: 0; font-weight: 500; min-width: 0; }
.details__copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.details__copy .mono { word-break: break-all; }
.btn--sm { padding: 6px 14px; font-size: .82rem; }

/* Packages */
.packages { padding: 0; overflow: hidden; }
.packages__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding: 24px; }
.package {
    display: grid; gap: 6px; padding: 18px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
}
.package__level { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.package__amount { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.package__amount small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.package__grow { color: var(--accent); font-size: .82rem; font-weight: 600; margin-bottom: 8px; }
.package__btn { margin-top: auto; }
.package__btn:disabled { cursor: not-allowed; opacity: .55; }
.package__btn.is-done { cursor: default; color: var(--up); border-color: var(--up-bg); }
.package--next { border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--tint); }
.package--active { background: linear-gradient(180deg, var(--tint), var(--surface)); }
.package--active .package__amount { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.package--locked .package__amount { color: var(--muted); }
.package__btn.is-busy { cursor: progress; opacity: .85; }
.packages__status, .card .packages__status { margin: 20px 24px 0; padding: 12px 16px; border-radius: 12px; font-size: .9rem; background: var(--tint); color: var(--text); }
.packages__status a { color: var(--accent); font-weight: 600; }
.packages__status--error { background: rgba(220, 38, 38, .1); color: var(--down); }
.packages__status--success { background: var(--up-bg); color: var(--up); }

/* Packages: join card, earnings balance, status tags */
.packages-wrap { display: grid; gap: 20px; }
.packages-wrap > .packages__status { margin: 0; }
.package__tag {
    margin-top: auto; padding: 6px 12px; border-radius: 999px; text-align: center;
    font-size: .8rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.package--active .package__tag { background: rgba(29, 27, 23, .08); border-color: transparent; color: inherit; }
.package--next .package__tag { background: rgba(26, 18, 4, .85); border-color: transparent; color: #f7df94; }

.join { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 32px 36px; overflow: hidden; }
.join h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 8px; }
.join p { max-width: 560px; }
.join__points { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.join__points li { padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--tint); color: var(--accent); }
.join__points li.is-done { background: var(--up-bg); color: var(--up); text-decoration: line-through; }
.join__cta .btn { width: 100%; }
.join__cta { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px 28px; border-radius: 24px; background: var(--surface-2); border: 1px solid var(--border); }
.join__price { font-size: 2.8rem; font-weight: 800; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.join__price small { font-size: 1rem; }
.join__note { color: var(--muted); font-size: .78rem; }

.balance { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 26px 32px; }
.balance__main { display: grid; gap: 2px; }
.balance__value { font-size: 2.2rem; font-weight: 800; line-height: 1.15; }
.balance__value small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.balance__next { display: grid; gap: 8px; padding-left: 28px; border-left: 1px solid var(--hairline); }
.balance__nexthead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .9rem; }
.balance__manual { display: flex; flex-wrap: wrap; gap: 8px; }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--gold-grad); transition: width .4s ease; }

/* Withdrawals */
.withdraw { display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: 32px; align-items: start; padding: 32px 36px; }
.withdraw h2 { font-size: 1.5rem; margin-bottom: 8px; }
.card .withdraw__intro p { margin: 0 0 10px; max-width: 520px; }
.card .withdraw__note { font-size: .88rem; color: var(--accent); }
.withdraw__form { min-width: 0; display: grid; gap: 10px; padding: 22px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--border); }
.withdraw__label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.withdraw__field {
    display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 18px;
    background: var(--surface); border: 1px solid var(--border); transition: border-color .15s ease, box-shadow .15s ease;
}
.withdraw__field:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 4px var(--tint); }
.withdraw__field input {
    flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
    font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 8px 0;
}
.withdraw__unit { color: var(--muted); font-weight: 600; font-size: .9rem; }
.withdraw__max {
    padding: 10px 16px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 700; font-size: .85rem;
    background: var(--tint); color: var(--accent);
}
.withdraw__max:hover:not(:disabled) { background: var(--gold-2); color: var(--on-gold); }
.withdraw__max:disabled { opacity: .5; cursor: not-allowed; }
.withdraw__hint { font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.withdraw__receive { font-size: .9rem; color: var(--muted); }
.withdraw__receive strong { color: var(--text); font-variant-numeric: tabular-nums; }
.card .withdraw__form .packages__status { margin: 4px 0 0; }
.card .withdraw__closed { margin: 0; padding: 18px 20px; border-radius: 18px; background: var(--surface-2); border: 1px dashed var(--border); color: var(--muted); }
.withdraw__closed a { color: var(--accent); font-weight: 600; }
.table .amount--out { color: var(--text); }

/* Admin panel */
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stat__value small { font-size: .9rem; font-weight: 600; opacity: .7; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.muted { color: var(--muted); font-weight: 400; }
.strong-link { font-weight: 600; }
.table a:not(.txlink):hover, .kv a:hover { color: var(--accent); }
.backlink { color: var(--muted); font-size: .9rem; font-weight: 500; }
.backlink:hover { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.admin-badge svg { width: 20px; height: 20px; }
.admin-chip { cursor: default; }
.admin-chip:hover { transform: none; }

.testbar {
    margin: 0; padding: 10px 18px; border-radius: 16px; font-size: .88rem;
    background: repeating-linear-gradient(135deg, rgba(233, 196, 106, .16) 0 12px, rgba(233, 196, 106, .08) 12px 24px);
    border: 1px dashed rgba(233, 196, 106, .55); color: var(--text);
}
.testbar strong { color: var(--accent); }
.owner__card select { width: 100%; padding: 10px 14px; border-radius: 14px; font: inherit; font-size: .88rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.flash { margin: 0; padding: 12px 18px; border-radius: 16px; font-size: .9rem; font-weight: 500; }
.flash--ok { background: var(--up-bg); color: var(--up); }
.flash--error { background: rgba(220, 38, 38, .12); color: var(--down); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input, .filters select, .profile__action input {
    height: 38px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .85rem;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
.filters input[type="search"] { width: 220px; }
.filters input:focus, .filters select:focus, .profile__action input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--tint); }
.summary-line { margin: 0; padding: 14px 28px 0; color: var(--muted); font-size: .88rem; }
.summary-line strong { color: var(--text); }
.card .card-note { margin: 0; padding: 22px 28px; }

.kv { margin: 0; padding: 8px 28px 18px; display: grid; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: .92rem; }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kv__em { color: var(--accent); }
.kv--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding-top: 4px; }
.kv--cols > div:nth-last-child(2) { border-bottom: 0; }

.levelbars { list-style: none; margin: 0; padding: 18px 28px 22px; display: grid; gap: 7px; }
.levelbars li { display: grid; grid-template-columns: 34px 1fr 48px; align-items: center; gap: 12px; font-size: .82rem; }
.levelbars__label { color: var(--muted); font-weight: 600; }
.levelbars__track { height: 12px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.levelbars__bar { display: block; height: 100%; border-radius: 4px; background: var(--g-gold, var(--gold-grad)); transition: width .4s ease; }
.levelbars li:hover .levelbars__bar { filter: brightness(1.1); }
.levelbars__value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.profile-card { padding: 28px; }
.profile-card .profile__head { flex-wrap: wrap; }
.profile-card .profile__head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-card .profile__head h2 { width: 100%; margin: 0; }
.profile__action { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn--danger { background: rgba(220, 38, 38, .14); color: var(--down); border-color: rgba(220, 38, 38, .3); }
.btn--danger:hover { background: var(--down); color: #fff; }

.syschecks { list-style: none; margin: 0; padding: 10px 28px 20px; display: grid; gap: 4px; }
.syschecks li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.syschecks li:last-child { border-bottom: 0; }
.syschecks strong { display: block; font-size: .9rem; }
.syschecks small { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.syschecks__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 800; margin-top: 1px; }
.syschecks .is-ok .syschecks__icon { background: var(--up-bg); color: var(--up); }
.syschecks .is-bad .syschecks__icon { background: rgba(220, 38, 38, .14); color: var(--down); }

.owner { padding: 0 0 24px; }
.card.owner > .packages__status { margin: 18px 28px 0; }
.owner__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 28px 0; }
.owner__card { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); }
.owner__card h3 { margin: 0; font-size: 1.02rem; }
.card .owner__card p { font-size: .85rem; }
.owner__card label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.owner__card input, .owner__card textarea {
    width: 100%; padding: 10px 14px; border-radius: 14px; font: inherit; font-size: .88rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); resize: vertical;
}
.owner__card textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.owner__card input:focus, .owner__card textarea:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--tint); }
.owner__card .btn { justify-self: start; }
.owner__total { font-size: .8rem; color: var(--muted); }
.owner__due { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.owner__due li { padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.owner__amount { display: flex; gap: 8px; align-items: center; }
.owner__amount input { flex: 1; min-width: 0; }
.owner__more { margin: 20px 28px 0; border-top: 1px solid var(--hairline); }
.owner__more > summary { list-style: none; cursor: pointer; padding: 16px 0 0; font-weight: 600; font-size: .92rem; color: var(--accent); }
.owner__more > summary::-webkit-details-marker { display: none; }
.owner__more > summary::before { content: '▸'; display: inline-block; margin-right: 8px; transition: transform .15s ease; }
.owner__more[open] > summary::before { transform: rotate(90deg); }
.owner__more > .owner__grid { padding: 16px 0 0; }
@media (max-width: 640px) { .owner__more { margin: 20px 16px 0; } }
.log-details { white-space: normal !important; max-width: 420px; font-size: .85rem; overflow-wrap: anywhere; }
.log-details .txlink { display: inline-block; margin-left: 6px; }

@media (max-width: 1100px) {
    .stats--4 { grid-template-columns: 1fr 1fr; }
    .admin-grid, .owner__grid, .kv--cols { grid-template-columns: 1fr; }
    .kv--cols > div:nth-last-child(2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 640px) {
    .stats--4 { grid-template-columns: 1fr; }
    .filters, .filters input[type="search"] { width: 100%; }
    .profile__action { margin-left: 0; width: 100%; }
    .kv, .levelbars, .syschecks, .owner__grid { padding-left: 16px; padding-right: 16px; }
}

/* Member avatars: user icon instead of initials */
.avatar-icon svg { width: 56%; height: 56%; }

/* Dashboard KPI tiles: one gold design */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi {
    position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 6px; align-content: start;
    min-height: 150px; padding: 20px 22px 18px; border-radius: 24px; color: #1d1604;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .55), transparent 55%),
        linear-gradient(145deg, #fbe7a1 0%, #f2cf6b 45%, #e0ad3f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(120, 80, 10, .18) inset, 0 16px 36px rgba(120, 85, 10, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Shine that sweeps across on hover */
.kpi::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.kpi:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(120, 80, 10, .18) inset, 0 24px 44px rgba(120, 85, 10, .3); }
.kpi:hover::after { transform: translateX(120%); }
.kpi__mark { position: absolute; right: -14px; bottom: -18px; z-index: -1; width: 104px; height: 104px; color: rgba(120, 80, 10, .14); }
.kpi__mark svg { width: 100%; height: 100%; stroke-width: 1.4; }
.kpi__head { display: flex; align-items: center; gap: 10px; }
.kpi__icon {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
    background: #1d1604; color: #f7d774; box-shadow: 0 6px 14px rgba(29, 22, 4, .25);
}
.kpi__icon svg { width: 18px; height: 18px; }
.kpi__label { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: rgba(29, 22, 4, .72); line-height: 1.25; }
.kpi__value { margin-top: 8px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; overflow-wrap: anywhere; }
.kpi__value small { font-size: .8rem; font-weight: 700; color: rgba(29, 22, 4, .6); letter-spacing: .02em; }
.kpi__sub { font-size: .8rem; color: rgba(29, 22, 4, .66); }
.kpi__link { justify-self: start; font-weight: 700; color: #1d1604; border-bottom: 1.5px solid rgba(29, 22, 4, .35); }
.kpi__link:hover { border-color: #1d1604; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } .kpi { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .kpi::after { display: none; } .kpi:hover { transform: none; } }

/* Admin overview */
.ahero {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 30px;
    background: var(--hero, var(--surface));
}
.ahero h2 { font-size: 1.7rem; margin: 4px 0 6px; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.card .ahero p, .ahero p { margin: 0; color: var(--muted); font-size: .92rem; }
.ahero p strong { color: var(--text); }
.ahero__test { color: var(--accent) !important; }
.ahero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-grid--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.achart .table-card__head h2 { margin-bottom: 2px; }
.achart__total { font-size: .85rem; }
.achart .chip { cursor: pointer; font: inherit; font-size: .82rem; }
.cols { list-style: none; margin: 0; padding: 26px 24px 16px; height: 250px; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; }
.cols[hidden] { display: none; }
.cols__item { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; outline: none; }
.cols__bar {
    display: block; width: 100%; max-width: 30px; justify-self: center; border-radius: 4px 4px 0 0;
    background: var(--g-gold, var(--gold-grad)); transition: filter .15s ease;
}
.cols__item::before { content: ''; position: absolute; inset: 0 0 22px; border-bottom: 1px solid var(--hairline); pointer-events: none; }
.cols__label { height: 22px; padding-top: 6px; font-size: .68rem; color: var(--muted); text-align: center; white-space: nowrap; }
.cols__tip {
    position: absolute; bottom: calc(100% - 10px); left: 50%; transform: translate(-50%, 4px); z-index: 3;
    display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; white-space: nowrap; font-size: .72rem; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.cols__tip strong { color: var(--text); font-size: .82rem; }
.cols__item:hover .cols__tip, .cols__item:focus .cols__tip { opacity: 1; transform: translate(-50%, 0); }
.cols__item:hover .cols__bar, .cols__item:focus .cols__bar { filter: brightness(1.12); }

.split { list-style: none; margin: 0; padding: 18px 28px 6px; display: grid; gap: 14px; }
.split__row { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; margin-bottom: 6px; }
.split__row span { color: var(--muted); }
.split__track { display: block; height: 10px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.split__bar { display: block; height: 100%; border-radius: 4px; background: var(--g-gold, var(--gold-grad)); }
.kv--tight > div { padding: 8px 0; font-size: .86rem; }

.leaders { list-style: none; margin: 0; padding: 10px 28px 18px; display: grid; }
.leaders li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.leaders li:last-child { border-bottom: 0; }
.leaders__rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .8rem; font-weight: 800; background: var(--tint); color: var(--accent); }
.leaders li:first-child .leaders__rank { background: var(--g-gold, var(--gold-grad)); color: #1d1604; }
.leaders__id { font-weight: 600; }
.leaders__amount { display: grid; text-align: right; font-weight: 700; font-size: .9rem; }
.leaders__amount small { font-weight: 400; font-size: .72rem; color: var(--muted); }
@media (max-width: 1100px) { .admin-grid--wide { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cols { padding: 22px 12px 12px; gap: 3px; } .ahero { padding: 22px; } .split, .leaders { padding-left: 16px; padding-right: 16px; } }

/* Admin: log in as a member */
.inline-form { margin: 0; display: inline; }
.loginas { gap: 6px; }
.loginas svg { width: 15px; height: 15px; margin: 0; }
.profile__loginas { margin-left: auto; }
.profile__loginas + .profile__action { margin-left: 8px; }
.viewas {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
    padding: 12px 18px; border-radius: 16px; font-size: .88rem; color: #1d1604;
    background: linear-gradient(135deg, #fbe7a1, #e0ad3f); box-shadow: 0 10px 26px rgba(224, 173, 63, .3);
}
.btn--ink { background: #1d1604; color: #f7d774; }
.btn--ink:hover { filter: brightness(1.2); }

/* Support */
.support-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tickets { list-style: none; margin: 0; padding: 6px 12px 12px; }
.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; transition: background .15s ease; }
.ticket-row:hover { background: var(--surface-2); }
.ticket-row__main { display: grid; gap: 3px; min-width: 0; }
.ticket-row__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row__main small { color: var(--muted); font-size: .8rem; }
.tstatus { flex: none; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tstatus--open { background: var(--tint); color: var(--accent); }
.tstatus--answered { background: var(--up-bg); color: var(--up); }
.tstatus--closed { background: rgba(120, 120, 120, .14); color: var(--muted); }
.newticket { padding: 26px; display: grid; gap: 14px; }
.newticket h2 { font-size: 1.2rem; margin: 0; }
.newticket__form, .thread__reply { display: grid; gap: 12px; }
.newticket__form label { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.newticket__form input, .newticket__form select, .newticket__form textarea, .thread__reply textarea, .thread__actions select {
    width: 100%; padding: 11px 14px; border-radius: 14px; font: inherit; font-size: .9rem; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border); resize: vertical;
}
.newticket__form :is(input, select, textarea):focus, .thread__reply textarea:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--tint); }
.newticket .btn { justify-self: start; }
.faq--panel { padding: 8px 28px 20px; gap: 0; }
.faq--panel details { padding: 0; border-bottom: 1px solid var(--hairline); }
.faq--panel details:last-child { border-bottom: 0; }
.faq--panel summary { padding: 16px 30px 16px 0; font-size: .95rem; }
.card .faq--panel details p { margin: 0; padding: 0 0 16px; font-size: .9rem; }

.thread { padding-bottom: 22px; }
.messages { list-style: none; margin: 0; padding: 22px 28px; display: grid; gap: 14px; }
.msg { max-width: 78%; display: grid; gap: 5px; }
.msg__who { font-size: .75rem; color: var(--muted); }
.msg__body { padding: 13px 16px; border-radius: 18px; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.msg--member { justify-self: end; text-align: right; }
.msg--member .msg__body { text-align: left; border-bottom-right-radius: 6px; background: var(--g-gold, var(--gold-grad)); color: #1d1604; }
.msg--admin .msg__body { border-bottom-left-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.thread__reply { padding: 0 28px; }
.thread__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.thread__actions select { width: auto; padding: 8px 12px; }
.navbadge { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center; background: #e5484d; color: #fff; }
@media (max-width: 1100px) { .support-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .messages, .thread__reply { padding-left: 16px; padding-right: 16px; } .msg { max-width: 92%; } .faq--panel { padding: 4px 16px 14px; } }

/* Admin sign-in */
.adminlogin { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.adminlogin__card {
    width: min(420px, 100%); display: grid; gap: 14px; padding: 32px 30px; border-radius: 28px;
    background: var(--card-sheen), var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.adminlogin__brand { justify-self: center; margin-bottom: 6px; }
.adminlogin__card h1 { font-size: 1.6rem; margin: 0; text-align: center; }
.adminlogin__lead { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }
.adminlogin__field { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.adminlogin__field input {
    width: 100%; padding: 13px 16px; border-radius: 14px; font: inherit; font-size: .95rem; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
}
.adminlogin__field input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 4px var(--tint); }
.adminlogin__foot { margin: 0; text-align: center; font-size: .85rem; }
.adminlogin__foot a { color: var(--muted); }
.adminlogin__foot a:hover { color: var(--accent); }
.admin .sidebar__member span a { color: var(--accent); }

/* Profile */
.phero {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px; padding: 32px 36px;
    background: var(--hero, radial-gradient(ellipse at 100% 0%, rgba(247, 185, 40, .25), transparent 55%), var(--surface));
}
.phero__ring {
    --pct: 0; flex: none; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
    background: conic-gradient(var(--gold-2) calc(var(--pct) * 1%), var(--hairline) 0);
    box-shadow: 0 0 40px rgba(233, 196, 106, .25);
}
.phero__avatar {
    display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%;
    font-size: 2.2rem; font-weight: 800; color: var(--on-gold);
    background: var(--g-gold, var(--gold-grad)); box-shadow: 0 0 0 5px var(--surface);
}
.phero__body { min-width: 0; }
.phero__id { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 4px 0 10px; letter-spacing: .02em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.phero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.phero__tag { padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.phero__actions { margin-left: auto; display: flex; gap: 8px; align-self: flex-start; }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pdetails { margin: 0; padding: 6px 28px 16px; }
.pdetails > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.pdetails > div:last-child { border-bottom: 0; }
.pdetails dt { color: var(--muted); font-size: .88rem; }
.pdetails dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.pdetails__long { word-break: break-all; font-size: .82rem; }
.pdetails__btns { display: inline-flex; gap: 6px; }
.iconbtn {
    padding: 4px 10px; border-radius: 999px; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
    background: var(--tint); color: var(--accent); border: 0; white-space: nowrap;
}
.iconbtn:hover { background: var(--gold-2); color: var(--on-gold); }
.netdot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }

.refcard { padding: 28px; display: grid; gap: 12px; background: radial-gradient(circle at 100% 0%, rgba(233, 196, 106, .18), transparent 55%), var(--card-sheen, none), var(--surface); }
.refcard h2 { font-size: 1.35rem; margin: 0; }
.card .refcard p, .refcard > p { margin: 0; font-size: .9rem; }
.refcard__link { display: flex; gap: 8px; padding: 6px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.refcard__link input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .85rem; padding: 0 10px; }
.refcard__share { display: flex; flex-wrap: wrap; gap: 8px; }
.share { flex: 1; min-width: 90px; text-align: center; padding: 9px 12px; border-radius: 14px; font-size: .85rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); transition: transform .15s ease, border-color .15s ease; }
.share:hover { transform: translateY(-1px); border-color: var(--gold-2); }
.share--wa { color: #25d366; }
.share--tg { color: #2aabee; }
.share--x { color: var(--text); }
.card .refcard__code { color: var(--muted); font-size: .82rem; }
.refcard__banner { margin: 4px 0 0; display: grid; gap: 8px; }
.refcard__banner img { width: 100%; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.refcard__banner figcaption { font-size: .78rem; color: var(--muted); }
.refcard__dl { justify-self: start; }
.auth__note { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: .88rem; background: var(--tint); border: 1px solid var(--border); }
.auth__note a { color: var(--accent); font-weight: 600; }
.refcard__code strong { color: var(--text); letter-spacing: .04em; }

@media (max-width: 1100px) { .profile-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .phero { flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px; }
    .phero__ring { width: 104px; height: 104px; }
    .phero__avatar { width: 88px; height: 88px; font-size: 1.7rem; }
    .phero__actions { margin-left: 0; }
    .pdetails { padding: 6px 16px 12px; }
    .pdetails > div { grid-template-columns: 1fr; gap: 4px; }
}

/* My Tree (3x3 matrix) */
.tree-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tree-search { display: flex; gap: 6px; }
.tree-search input {
    width: 150px; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: .85rem;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
.tree-search input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--tint); }
.card .tree-note { margin: 16px 24px 0; padding: 10px 14px; border-radius: 12px; font-size: .88rem; background: rgba(220, 38, 38, .1); color: var(--down); }
.tree-teams { display: flex; justify-content: center; gap: 12px; padding: 18px 24px 0; flex-wrap: wrap; }
.tree-teams span { padding: 6px 14px; border-radius: 999px; font-size: .85rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.tree-teams strong { color: var(--text); margin-left: 4px; }
.tree-hint { margin: 0; padding: 0 24px 20px; text-align: center; color: var(--muted); font-size: .82rem; }
.tree-wrap { overflow-x: auto; padding: 8px 16px 20px; }

.tree, .tree ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.tree { min-width: 920px; }
.tree ul { position: relative; padding-top: 22px; }
.tree li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: 22px 4px 0; }
.tree > li { padding-top: 0; }
.tree li > ul { align-self: stretch; }
/* Connectors: horizontal bar over siblings, vertical drop into each node */
.tree li::before, .tree li::after {
    content: ''; position: absolute; top: 0; width: 50%; height: 22px; border-top: 2px solid var(--border);
}
.tree li::before { right: 50%; }
.tree li::after { left: 50%; border-left: 2px solid var(--border); }
.tree li:first-child::before, .tree li:last-child::after { border: 0; }
.tree li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 10px 0 0; }
.tree li:first-child::after { border-radius: 10px 0 0 0; }
.tree > li::before, .tree > li::after { display: none; }
.tree ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid var(--border); }

.tnode {
    display: grid; justify-items: center; gap: 2px; width: 100%; max-width: 132px; padding: 10px 6px;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
    text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.tnode:hover { border-color: var(--gold-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tnode__avatar {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 4px;
    background: var(--gold-grad); color: var(--on-gold); font-weight: 700; font-size: .85rem;
}
.tnode__avatar svg { width: 18px; height: 18px; }
.tnode__id { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.tnode__id em { font-style: normal; font-size: .68rem; font-weight: 600; padding: 1px 6px; margin-left: 2px; border-radius: 999px; background: var(--tint); color: var(--accent); }
.tnode__pkg { font-size: .72rem; color: var(--accent); font-weight: 600; }
.tnode--me { border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--tint); }
.tnode--inactive .tnode__avatar { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.tnode--inactive .tnode__pkg { color: var(--muted); }
.tnode--empty { border-style: dashed; background: transparent; color: var(--muted); }
.tnode--empty .tnode__avatar { background: transparent; border: 1px dashed var(--border); color: var(--muted); font-weight: 500; }

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

@media (max-width: 960px) {
    .panel { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: min(300px, 86vw);
        transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg);
    }
    .panel.is-open .sidebar { transform: none; }
    .panel__overlay { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); }
    .sidebar__close, .topbar__menu {
        display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
        background: var(--ghost-bg); border: 1px solid var(--border); color: var(--text);
    }
    .sidebar__close svg, .topbar__menu svg { width: 20px; height: 20px; }
    .topbar { padding: 0 16px; }
    .panel__content { padding: 20px 16px 40px; }
}

@media (max-width: 640px) {
    .wallet-chip { display: none !important; }
    .stats { grid-template-columns: 1fr; }
    .welcome { padding: 22px; }
    .welcome__mark { width: 90px; }
    .refbox { flex-direction: column; align-items: stretch; }
    .packages__grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
    .card .packages__status { margin: 16px 16px 0; }
    .join, .balance, .withdraw { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
    .balance__next { padding-left: 0; border-left: 0; }
    .tree-actions, .tree-search { width: 100%; }
    .tree-search input { flex: 1; }
    .package { padding: 14px; }
    .package__amount { font-size: 1.3rem; }
    .details > div { grid-template-columns: 1fr; gap: 4px; }

    /* Stack table rows as cards */
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; }
    .table tr { padding: 12px 20px; border-top: 1px solid var(--hairline); }
    .table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; }
    .table td::before { content: attr(data-label); color: var(--muted); font-size: .82rem; }
}

/* ---------------------------------------------------------------- */
/* Member panel theme: black and gold, gold tiles with dark ink         */
/* ---------------------------------------------------------------- */
body.member {
    /* Light: warm ivory and gold */
    --bg: #faf6ec;
    --surface: rgba(255, 255, 255, .8);
    --surface-2: rgba(255, 251, 242, .88);
    --border: rgba(120, 85, 10, .12);
    --hairline: rgba(60, 45, 10, .07);
    --text: #1c160a;
    --muted: #6b624d;
    --accent: #9a6a0a;
    --gold-2: #e0b44f;
    --gold-grad: linear-gradient(135deg, #f6dc8c, #e0b04a);
    --gold-text: linear-gradient(135deg, #b8871c, #8a640c);
    --on-gold: #1a1204;
    --up: #15803d;
    --up-bg: rgba(22, 163, 74, .12);
    --tint: rgba(224, 180, 79, .14);
    --ghost-bg: rgba(255, 255, 255, .7);
    --nav-bg: rgba(250, 246, 236, .78);
    --radius: 26px;
    --shadow-sm: 0 18px 40px rgba(120, 85, 10, .10);
    --shadow-lg: 0 30px 70px rgba(120, 85, 10, .16);
    --glow-a: rgba(224, 180, 79, .22);
    --glow-b: rgba(201, 138, 11, .10);
    --aurora-1: rgba(233, 196, 106, .42);
    --aurora-2: rgba(240, 165, 58, .22);
    --aurora-3: rgba(255, 221, 150, .34);
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
    --hero: radial-gradient(ellipse at 100% 0%, rgba(224, 180, 79, .30), transparent 55%), linear-gradient(135deg, #ffffff, #fbf3df);
    --p-yellow: #efcd72;
    --g-gold: linear-gradient(135deg, #f7df94 0%, #e9c46a 55%, #d9a441 100%);
    --g-amber: linear-gradient(135deg, #ffd88a 0%, #f0a83f 100%);
    --g-champagne: linear-gradient(135deg, #fbf1d6 0%, #efd8a0 100%);
    --g-bronze: linear-gradient(135deg, #efcf9d 0%, #d1a065 100%);
    --p-ink: #1a1204;
    --p-ink-soft: rgba(26, 18, 4, .64);
    background:
        radial-gradient(1100px 600px at 90% -10%, var(--glow-a), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, var(--glow-b), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
:root[data-theme="dark"] body.member {
    /* Dark: near-black with warm gold */
    --bg: #0a0907;
    --surface: rgba(24, 21, 15, .74);
    --surface-2: rgba(33, 29, 20, .82);
    --border: rgba(233, 196, 106, .12);
    --hairline: rgba(255, 255, 255, .06);
    --text: #f4efe2;
    --muted: #a8a08c;
    --accent: #e9c46a;
    --gold-2: #e9c46a;
    --gold-text: linear-gradient(135deg, #f7df94, #e0b04a);
    --up: #4ade80;
    --up-bg: rgba(74, 222, 128, .12);
    --tint: rgba(233, 196, 106, .10);
    --ghost-bg: rgba(33, 29, 20, .7);
    --nav-bg: rgba(14, 12, 9, .74);
    --shadow-sm: 0 18px 40px rgba(0, 0, 0, .45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
    --glow-a: rgba(233, 196, 106, .12);
    --glow-b: rgba(201, 138, 11, .10);
    --aurora-1: rgba(233, 196, 106, .24);
    --aurora-2: rgba(201, 138, 11, .20);
    --aurora-3: rgba(255, 214, 140, .10);
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
    --hero: radial-gradient(ellipse at 100% 0%, rgba(233, 196, 106, .25), transparent 55%), linear-gradient(135deg, #221d12 0%, #0f0d09 100%);
}

/* Background: drifting aurora glows */
body.member::before { content: ''; position: fixed; pointer-events: none; z-index: -1; }
body.member::before {
    inset: -25%;
    background:
        radial-gradient(30% 28% at 78% 18%, var(--aurora-1), transparent 70%),
        radial-gradient(34% 34% at 22% 30%, var(--aurora-2), transparent 70%),
        radial-gradient(38% 30% at 62% 82%, var(--aurora-3), transparent 70%),
        radial-gradient(22% 22% at 12% 88%, var(--aurora-1), transparent 70%),
        radial-gradient(20% 20% at 92% 70%, var(--aurora-2), transparent 70%);
    filter: blur(50px);
    animation: aurora 28s ease-in-out infinite alternate;
}
@keyframes aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
    100% { transform: translate3d(-4%, 3%, 0) rotate(-6deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { body.member::before { animation: none; } }

/* Glass: cards and sidebar let the glow through */
.member .card, .member .sidebar, .member .topbar { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }

/* Frame: floating sidebar card next to the content */
.member .panel { grid-template-columns: 284px 1fr; gap: 8px; padding: 16px; }
.member .sidebar {
    top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px);
    padding: 22px 18px; border: 1px solid var(--border); border-radius: 28px;
    background: var(--card-sheen), var(--surface);
    box-shadow: var(--shadow-sm);
}
.member .sidebar__member { background: transparent; border: 0; padding: 6px 8px; }
.member .sidebar__member strong { font-size: 1.02rem; }
.member .sidebar__avatar { border-radius: 50%; background: var(--g-gold); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold-2), 0 8px 22px rgba(233, 196, 106, .35); }
.member .sidebar__nav { gap: 6px; }
.member .sidebar__link { padding: 12px 16px; border-radius: 999px; color: var(--text); font-weight: 500; }
.member .sidebar__link > svg:first-child { color: var(--muted); }
.member .sidebar__link:hover { background: var(--surface-2); }
.member .sidebar__link.is-active { background: var(--g-gold); color: var(--p-ink); font-weight: 600; box-shadow: 0 10px 26px rgba(233, 196, 106, .28); }
.member .sidebar__link.is-active > svg { color: var(--p-ink); }
.member .sidebar__link.is-current > svg:first-child { color: var(--text); }
.member .sidebar__link.is-disabled { opacity: .5; }
.member .sidebar__link.is-disabled:hover { background: none; color: var(--text); }
.member .sidebar__link em { border: 0; background: var(--g-gold); color: var(--p-ink); }
.member .sidebar__sub { border-left-color: var(--border); margin-left: 26px; }
.member .sidebar__sublink { border-radius: 999px; padding: 9px 14px; }
.member .sidebar__sublink:hover { background: var(--surface-2); }
.member .sidebar__sublink.is-active { background: transparent; color: var(--accent); }
.member .sidebar__invite {
    border: 0; border-radius: 22px; color: var(--p-ink);
    background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .45), transparent 55%), var(--g-gold);
    box-shadow: 0 14px 34px rgba(233, 196, 106, .25);
}
.member .sidebar__invite span { color: var(--p-ink-soft); }
.member .sidebar__invite .btn--gold { background: var(--p-ink); color: #f7df94; box-shadow: none; }
.member .sidebar__invite .btn--gold:hover { transform: none; opacity: .9; }
.member .sidebar__logout { border-radius: 999px; }

/* Top bar: open header with round icon buttons */
.member .topbar {
    top: 16px; height: 78px; margin: 0 20px 18px; padding: 0 12px 0 26px; gap: 16px;
    border: 1px solid var(--border); border-radius: 26px;
    background: var(--card-sheen), var(--nav-bg);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-sm);
}
.topbar__heading { display: grid; min-width: 0; line-height: 1.2; }
.topbar__greet { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__greet strong { color: var(--accent); font-weight: 600; }
.member .topbar__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.member .topbar__actions { gap: 8px; }

.topbar__level {
    display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; border-radius: 999px;
    font-size: .85rem; font-weight: 600; white-space: nowrap;
    background: var(--g-gold, var(--gold-grad)); color: var(--p-ink, var(--on-gold));
    box-shadow: 0 8px 22px rgba(233, 196, 106, .22); transition: transform .15s ease, box-shadow .15s ease;
}
.topbar__level svg { width: 17px; height: 17px; }
.topbar__level span { opacity: .6; font-weight: 500; }
.topbar__level:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(233, 196, 106, .32); }
.topbar__level.is-none { background: transparent; color: var(--muted); border: 1px dashed var(--border); box-shadow: none; }

.member .wallet-chip {
    height: 46px; padding: 0 8px 0 6px; gap: 10px; cursor: pointer; color: var(--text); font: inherit; font-size: .88rem; font-weight: 600;
    background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s ease;
}
.member .wallet-chip:hover { border-color: var(--gold-2); }
.wallet-chip__net {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px;
    font-size: .76rem; font-weight: 600; color: var(--up); background: var(--up-bg);
}
.wallet-chip__addr { font-variant-numeric: tabular-nums; }
.wallet-chip__copy { width: 16px; height: 16px; color: var(--muted); margin-right: 6px; }
.wallet-chip.is-copied .wallet-chip__addr { color: var(--up); }
.member .theme-toggle, .member .topbar__menu {
    width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
}
.topbar__avatar {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none;
    font-weight: 700; font-size: .9rem; color: var(--p-ink, var(--on-gold)); background: var(--g-gold, var(--gold-grad));
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-2);
    transition: transform .15s ease;
}
.topbar__avatar:hover { transform: scale(1.05); }
.member .panel__content { padding: 4px 20px 32px; gap: 22px; }

/* Cards */
.member .card { background: var(--card-sheen), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.member .welcome { background: var(--hero); padding: 32px 36px; }
.member .welcome h2 { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.member .welcome h2 { font-weight: 500; font-size: 2rem; letter-spacing: -.02em; }
.member .welcome .eyebrow { color: var(--muted); }

/* Stat tiles in pastel colours, dark ink */
.member .stat {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 26px 28px; border: 0; border-radius: 28px; color: var(--p-ink); min-height: 150px; align-content: end;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18); transition: transform .2s ease, box-shadow .2s ease;
}
/* Soft rings in the corner of each tile */
.member .stat::before, .member .stat::after {
    content: ''; position: absolute; z-index: -1; border-radius: 50%; border: 1.5px solid rgba(26, 18, 4, .10);
}
.member .stat::before { width: 180px; height: 180px; right: -60px; top: -80px; }
.member .stat::after { width: 110px; height: 110px; right: -20px; top: -40px; background: rgba(255, 255, 255, .18); }
.member .stat:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(0, 0, 0, .22); }
/* Four-across tiles: one colour per column so each row reads the same way */
.member .stats.stats--4 .stat:nth-child(4n+1) { background: var(--g-gold); }
.member .stats.stats--4 .stat:nth-child(4n+2) { background: var(--g-amber); }
.member .stats.stats--4 .stat:nth-child(4n+3) { background: var(--g-champagne); }
.member .stats.stats--4 .stat:nth-child(4n+4) { background: var(--g-bronze); }
.member .stats--4 .stat { min-height: 132px; padding: 22px 24px; }
.member .stats--4 .stat__value { font-size: 1.65rem; }
.member .stats .stat:nth-child(3n+1) { background: var(--g-gold); }
.member .stats .stat:nth-child(3n+2) { background: var(--g-amber); }
.member .stats .stat:nth-child(3n+3) { background: var(--g-champagne); }
.member .stat .stat__label, .member .stat .stat__sub { color: var(--p-ink-soft); }
.member .stat__value { font-size: 1.9rem; letter-spacing: -.01em; }
.member .stat__sub a { color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Buttons, inputs, pills */
.member .btn--gold { background: var(--g-gold); color: var(--p-ink); box-shadow: 0 8px 22px rgba(233, 196, 106, .25); }
.member .btn:disabled:not(.is-busy) { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.member .btn--gold:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(233, 196, 106, .35); filter: brightness(1.04); }
.member .btn--ghost { background: transparent; border-color: var(--border); }
.member .btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.member .refbox__input, .member .tree-search input { border-radius: 999px; padding-left: 18px; background: var(--surface-2); }
.member .badge { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.member .level { background: var(--g-gold); color: var(--p-ink); border-radius: 999px; }
.member .pill--direct { background: var(--g-gold); color: var(--p-ink); }
.member .pill--placement { background: var(--g-amber); color: var(--p-ink); }

/* Tabs (downline level chips) as a segmented pill bar */
.member .chips { padding: 5px; gap: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); width: fit-content; max-width: 100%; }
.member .chip { border: 0; background: transparent; padding: 8px 16px; color: var(--muted); }
.member .chip:hover { color: var(--text); }
.member .chip.is-active { background: var(--text); color: var(--surface); }
.member .chip.is-active span { color: var(--surface); }

/* Tables */
.member .table-card__head { border-bottom-color: var(--hairline); padding: 22px 28px; }
.member .table th { background: transparent; padding: 14px 28px; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.member .table td { padding: 16px 28px; }
.member .table tbody tr:hover { background: var(--surface-2); }
.member .pagination a { border-radius: 50%; }
.member .pagination .active a { background: var(--g-gold); color: var(--p-ink); }

/* Packages */
.member .package { border-radius: 22px; background: var(--surface-2); padding: 20px; transition: transform .2s ease, box-shadow .2s ease; }
.member .package--active:hover, .member .package--next:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.member .package--next { box-shadow: 0 14px 34px rgba(233, 196, 106, .25); }
.member .package--active { background: var(--g-champagne); border-color: transparent; color: var(--p-ink); }
.member .package--active .package__level, .member .package--active .package__amount small { color: var(--p-ink-soft); }
.member .package--active .package__amount { background: none; color: var(--p-ink); }
.member .package--active .package__grow { color: var(--p-ink-soft); }
.member .package--active .package__btn.is-done { background: rgba(29, 27, 23, .08); color: var(--p-ink); border-color: transparent; }
.member .package--next { background: var(--g-gold); border-color: transparent; color: var(--p-ink); }
.member .package--next .package__level, .member .package--next .package__amount small, .member .package--next .package__grow { color: var(--p-ink-soft); }
.member .package--next .package__btn.btn--gold { background: var(--p-ink); color: #f7df94; }
.member .join { background: var(--hero); }
.member .balance__value { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.member .progress span { background: var(--g-gold); box-shadow: 0 0 12px rgba(233, 196, 106, .5); }
.member .packages__status { border-radius: 16px; }

/* Tree */
.member .tnode { border-radius: 20px; background: var(--surface-2); }
.member .tnode__avatar { background: var(--g-gold); color: var(--p-ink); }
.member .tnode--me { background: var(--g-gold); border-color: transparent; box-shadow: none; color: var(--p-ink); }
.member .tnode--me .tnode__avatar { background: var(--p-ink); color: var(--p-yellow); }
.member .tnode--me .tnode__pkg { color: var(--p-ink-soft); }
.member .tnode--me .tnode__id em { background: rgba(29, 27, 23, .1); color: var(--p-ink); }
.member .tnode--empty { background: transparent; }
.member .tnode--empty .tnode__avatar, .member .tnode--inactive .tnode__avatar { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.member .tnode--inactive .tnode__avatar { border-style: solid; }
.member .tree-teams span { border-radius: 999px; }
.member .tree-teams span:first-child { background: var(--g-amber); color: var(--p-ink-soft); border-color: transparent; }
.member .tree-teams span:nth-child(2) { background: var(--g-gold); color: var(--p-ink-soft); border-color: transparent; }
.member .tree-teams span:last-child { background: var(--g-champagne); color: var(--p-ink-soft); border-color: transparent; }
.member .tree-teams strong { color: var(--p-ink); }

/* Profile */
.member .profile__head .sidebar__avatar--lg { border-radius: 50%; }

@media (max-width: 960px) {
    .member .panel { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .member .sidebar { top: 0; height: 100dvh; border-radius: 0 28px 28px 0; }
    .member .topbar { top: 10px; height: 66px; margin: 10px 12px 14px; padding: 0 8px 0 10px; gap: 10px; border-radius: 22px; }
    .member .topbar__title { font-size: 1.2rem; }
    .topbar__greet, .topbar__level { display: none; }
    .member .panel__content { padding: 4px 16px 32px; }
}
@media (max-width: 640px) {
    .member .stat { min-height: 0; }
    .member .welcome h2 { font-size: 1.5rem; }
    .member .welcome { padding: 24px; }
    .member .table tr { padding: 12px 20px; }
    .member .table td { padding: 5px 0; }
}

/* Short windows: tighten the menu so it fits without scrolling */
@media (max-height: 820px) and (min-width: 961px) {
    .sidebar { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .member .sidebar { padding-top: 16px; padding-bottom: 16px; }
    .member .sidebar__nav { gap: 2px; }
    .member .sidebar__link { padding-top: 9px; padding-bottom: 9px; }
    .sidebar__invite span { display: none; }
}
@media (max-height: 680px) and (min-width: 961px) {
    .sidebar__invite { display: none; }
}

/* BTC amounts (admin contract figures): 8 decimals, so a little smaller and with even digits */
.stat__value.is-btc, .kpi__value.is-btc, .balance__value.is-btc,
.member .stat__value.is-btc, .member .stats--4 .stat__value.is-btc { font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.balance__value.is-btc { font-size: 1.8rem; }
.money { display: inline-block; font-variant-numeric: tabular-nums; }
.money small { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }
.table .amount--flushed .money { text-decoration: line-through; text-decoration-thickness: 1px; } /* not inherited by inline-blocks */
@media (max-width: 640px) {
    .table td .money { text-align: right; }
}