:root {
    color-scheme: dark;
    --bg: #08070d;
    --panel: #12101b;
    --panel-2: #19152a;
    --text: #f7f3ff;
    --muted: #b9accb;
    --line: rgba(255,255,255,.12);
    --accent: #8b5cf6;
    --accent-2: #15d0b5;
    --danger: #ef4444;
    --success: #22c55e;
}

@media (max-width: 900px) {
    .panel-page-head {
        min-height: 0;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 18px;
    }
    .panel-page-head h1 {
        font-size: 30px;
    }
    .panel-page-head .head-actions,
    .panel-page-head .button {
        width: 100%;
    }
    .lulosa-tabs {
        overflow-x: auto;
        gap: 6px;
        padding: 5px;
    }
    .lulosa-tabs a {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 11px;
        white-space: nowrap;
    }
    .panel-filter-row,
    .marketplace-filter-row,
    .marketplace-feature,
    .wallet-balance-panel,
    .wallet-grid,
    .leaderboard-layout,
    .team-layout,
    .support-layout {
        grid-template-columns: 1fr;
    }
    .marketplace-filter-row > div {
        overflow-x: auto;
    }
    .panel-campaign-row {
        grid-template-columns: 1fr;
    }
    .panel-campaign-media {
        min-height: 190px;
    }
    .panel-campaign-actions {
        grid-template-columns: 1fr 1fr;
    }
    .marketplace-card-grid {
        grid-template-columns: 1fr;
    }
    .marketplace-feature-media {
        min-height: 220px;
    }
    .review-metric-grid,
    .team-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .review-metric-grid article:nth-child(2),
    .team-metric-grid article:nth-child(2) {
        border-right: 0;
    }
    .review-submission-card,
    .review-action-form {
        grid-template-columns: 1fr;
    }
    .wallet-balance-main,
    .wallet-balance-side,
    .marketplace-feature-copy {
        padding: 22px;
    }
    .wallet-balance-main strong {
        font-size: 46px;
    }
    .funding-donut {
        float: none;
        margin: 16px auto;
    }
    .leaderboard-side,
    .team-roles,
    .support-side,
    .ranking-rules {
        position: static;
    }
    .leaderboard-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leaderboard-select {
        width: 100%;
    }
    .leaderboard-pill-rail {
        display: flex;
    }
    .leaderboard-row-card {
        grid-template-columns: 38px 42px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }
    .leaderboard-avatar {
        width: 42px;
        height: 42px;
    }
    .leaderboard-value {
        grid-column: 3;
        justify-items: start;
        text-align: left;
    }
    .team-member-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .team-member-row > span,
    .team-member-row > p,
    .team-member-row > small,
    .team-member-row > .side-icon {
        grid-column: 2;
        margin: 0;
    }
    .support-hero {
        grid-template-columns: 1fr;
    }
}

* { box-sizing: border-box; }
img { max-width: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 20% 0%, rgba(139, 92, 246, .28), transparent 34rem),
        radial-gradient(circle at 90% 10%, rgba(21, 208, 181, .16), transparent 28rem),
        var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 7, 13, .78);
    backdrop-filter: blur(18px);
}

.brand, .main-nav, .hero-actions, .section-head, .card-actions, .inline-form {
    display: flex;
    align-items: center;
}

.brand { gap: 10px; font-weight: 800; letter-spacing: .01em; }
.brand-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    overflow: visible;
    border-radius: 0;
    background: url("/assets/logo.png") center / contain no-repeat;
    box-shadow: none;
}
.brand-mark::before {
    content: none;
}
.brand-mark::after {
    content: none;
}
.logo-glyph {
    display: none;
}

.main-nav { gap: 20px; font-size: 14px; color: var(--muted); }
.main-nav a { padding: 10px 0; }
.main-nav a:hover, .main-nav .is-active { color: var(--text); }
.language-select {
    width: auto;
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
}
.nav-cta {
    padding: 10px 17px !important;
    color: white !important;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #c026d3);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    align-items: center;
    gap: 64px;
    max-width: 1240px;
    min-height: calc(100svh - 72px);
    margin: 0 auto;
    padding: 80px 32px 96px;
}
.landing-page {
    background: #08080a;
    overflow: hidden;
}
.landing-hero {
    position: relative;
    isolation: isolate;
    max-width: none;
    min-height: 66svh;
    display: flex;
    align-items: end;
    padding: 96px max(24px, calc((100vw - 1240px) / 2)) 72px;
    background:
        linear-gradient(90deg, rgba(4,4,5,.96) 0%, rgba(4,4,5,.74) 44%, rgba(4,4,5,.26) 100%),
        linear-gradient(0deg, rgba(8,8,10,1) 0%, rgba(8,8,10,.05) 38%),
        url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=2200&q=85") center / cover;
}
.landing-hero .hero-copy {
    width: min(760px, 100%);
    position: relative;
    z-index: 1;
}
.landing-hero h1 {
    max-width: 820px;
    font-size: clamp(52px, 8vw, 116px);
}
.landing-hero .hero-copy p {
    max-width: 660px;
    color: rgba(255,255,255,.78);
}
.intent-pill {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}
.hero-cost {
    position: absolute;
    right: max(24px, calc((100vw - 1240px) / 2));
    bottom: 54px;
    width: min(280px, calc(100vw - 48px));
    padding: 20px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: rgba(10,10,12,.72);
    backdrop-filter: blur(18px);
}
.hero-cost span,
.hero-cost small {
    display: block;
    color: rgba(255,255,255,.65);
}
.hero-cost strong {
    display: block;
    margin: 6px 0;
    color: #fff;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.04em;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-2);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
    max-width: 880px;
    margin-bottom: 24px;
    font-size: clamp(46px, 7vw, 96px);
    line-height: .97;
    letter-spacing: -.045em;
}
h2 {
    margin-bottom: 18px;
    font-size: clamp(32px, 4.5vw, 62px);
    line-height: 1;
    letter-spacing: -.035em;
}
h3 { margin-bottom: 10px; font-size: 22px; }
p { color: var(--muted); line-height: 1.65; }
.lead, .hero-copy p { max-width: 670px; font-size: 20px; }

.button, button {
    border: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 20px;
    color: white;
    font-weight: 800;
    cursor: pointer;
}
.button.primary, button {
    background: linear-gradient(135deg, var(--accent), #c026d3);
    box-shadow: 0 20px 50px rgba(139, 92, 246, .25);
}
.button.ghost {
    background: rgba(255,255,255,.07);
    border: 1px solid var(--line);
}
.hero-actions { gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.hero-panel {
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: 0 40px 120px rgba(0,0,0,.38);
}
.metric {
    padding: 28px;
    border-radius: 20px;
    background: #0f0d18;
}
.metric span, .metric small { display: block; color: var(--muted); }
.metric strong { display: block; margin: 8px 0; font-size: 64px; letter-spacing: -.05em; }
.clip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.clip-grid div {
    min-height: 150px;
    padding: 18px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.65)),
        linear-gradient(135deg, rgba(139,92,246,.8), rgba(21,208,181,.55));
    font-size: 30px;
    font-weight: 900;
}
.clip-grid span { font-size: 13px; color: rgba(255,255,255,.72); }

.section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 88px 32px;
}
.clip-proof-rail {
    max-width: 1240px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: -156px auto 0;
    padding: 0 32px 54px;
    position: relative;
    z-index: 2;
}
.clip-proof-card {
    min-height: 260px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: #111;
}
.clip-proof-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
}
.clip-proof-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.86));
}
.clip-proof-card span,
.clip-proof-card strong,
.clip-proof-card small {
    position: relative;
    z-index: 1;
}
.clip-proof-card span,
.clip-proof-card small { color: rgba(255,255,255,.72); }
.clip-proof-card strong {
    color: #fff;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.04em;
}
.trusted-strip,
.market-strip {
    max-width: 1240px;
    margin: 0 auto;
    padding: 50px 32px;
}
.trusted-strip > span,
.market-strip > span {
    color: var(--accent-2);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}
.trusted-strip p {
    max-width: 720px;
    margin: 10px 0 24px;
    font-size: 22px;
    color: rgba(255,255,255,.8);
}
.logo-marquee {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.logo-marquee span {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.055);
    font-size: 13px;
    font-weight: 850;
}
.result-grid,
.why-grid,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.result-grid article,
.why-grid article,
.pricing-grid article {
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.055);
}
.result-grid article { padding: 22px; }
.result-grid strong {
    display: block;
    color: #fff;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.045em;
}
.result-grid span { display: block; margin: 12px 0 6px; color: #fff; font-weight: 850; }
.result-grid small { color: var(--muted); }
.media-steps article {
    overflow: hidden;
    padding: 0;
}
.media-steps img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}
.media-steps b,
.media-steps h3,
.media-steps p {
    margin-left: 22px;
    margin-right: 22px;
}
.media-steps b { display: block; margin-top: 22px; }
.media-steps p { margin-bottom: 24px; }
.why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-grid article {
    padding: 24px;
}
.why-grid article span {
    color: var(--accent-2);
    font-size: 26px;
    font-weight: 950;
}
.market-strip {
    text-align: center;
    border-block: 1px solid rgba(255,255,255,.12);
}
.market-strip h2 {
    max-width: 820px;
    margin: 12px auto 24px;
}
.market-strip .logo-marquee { justify-content: center; }
.case-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
    gap: 28px;
    align-items: stretch;
}
.case-copy {
    padding: 32px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.055);
}
.case-section > img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    border-radius: 8px;
}
.case-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 24px 0;
}
.case-stats span {
    padding: 14px;
    border-radius: 8px;
    background: rgba(0,0,0,.26);
    color: var(--muted);
}
.case-stats strong {
    display: block;
    color: #fff;
    font-size: 28px;
}
blockquote {
    margin: 0;
    padding-left: 18px;
    border-left: 3px solid var(--accent-2);
    color: rgba(255,255,255,.86);
    font-size: 20px;
    line-height: 1.5;
}
.benchmark-bars {
    display: grid;
    gap: 14px;
}
.benchmark-bars div {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 16px;
    align-items: center;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
}
.benchmark-bars i {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(21,208,181,.26), rgba(139,92,246,.1));
}
.benchmark-bars span,
.benchmark-bars strong {
    position: relative;
    z-index: 1;
}
.benchmark-bars strong { text-align: right; color: #fff; }
.proof-table {
    border-radius: 8px;
    background: rgba(255,255,255,.045);
}
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-grid article {
    display: grid;
    gap: 16px;
    padding: 28px;
}
.pricing-grid article > span {
    color: var(--accent-2);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}
.pricing-grid article > strong {
    color: #fff;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.04em;
}
.pricing-grid ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
    color: rgba(255,255,255,.82);
}
.pricing-grid small { color: var(--muted); }
.pricing-grid .is-featured {
    background: linear-gradient(180deg, rgba(21,208,181,.12), rgba(255,255,255,.055));
    border-color: rgba(21,208,181,.32);
}
.final-cta {
    text-align: center;
    display: grid;
    justify-items: center;
}
.final-cta h2 { max-width: 840px; }
.faq-public {
    max-width: 900px;
}
.faq-public details {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 18px 0;
}
.faq-public summary {
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-weight: 850;
}
.faq-public details p {
    margin: 12px 0 0;
}
.section.narrow, .auth-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 88px 32px;
}
.section-head { justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.steps, .campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.steps article, .campaign-card, .submit-box, .auth-box, .table-wrap {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
}
.steps article { padding: 26px; }
.steps b { color: var(--accent-2); }

.campaign-card { padding: 22px; }
.card-topline, .campaign-card small, .muted { color: var(--muted); }
.card-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
}
.campaign-card h3 a:hover { color: var(--accent-2); }
.campaign-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
}
.campaign-stats strong {
    display: block;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.25);
    font-size: 18px;
}
.campaign-stats span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.budget-bar {
    height: 8px;
    margin: 18px 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
}
.budget-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.card-actions { justify-content: space-between; gap: 14px; color: var(--muted); font-size: 13px; }
.card-actions a { color: white; font-weight: 800; }

.search-form {
    display: flex;
    gap: 12px;
    margin: 22px 0;
}
input, textarea, select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,.07);
    color: var(--text);
}
textarea { resize: vertical; }
label { display: grid; gap: 8px; margin-bottom: 16px; color: var(--muted); font-weight: 700; }

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
}
.submit-box { padding: 24px; align-self: start; }
.info-list {
    border-top: 1px solid var(--line);
    margin-top: 28px;
    padding-top: 20px;
}
.back-link { display: inline-block; margin-bottom: 22px; color: var(--muted); }

.auth-box form { margin-top: 24px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.status {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(139,92,246,.22);
    color: white;
    font-size: 12px;
    font-weight: 800;
}
.inline-form { gap: 8px; }
.inline-form input, .inline-form select { width: 130px; min-height: 38px; }
.inline-form button { min-height: 38px; padding: 8px 12px; }

.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px;
}
.app-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    min-height: calc(100svh - 128px);
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
}
.side-group {
    display: grid;
    gap: 6px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.side-group span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}
.side-group a {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 750;
}
.side-group a:hover,
.side-group a.is-active {
    color: var(--text);
    background: rgba(255,255,255,.08);
}
.wallet-box {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0,0,0,.22);
}
.wallet-box span { color: var(--muted); font-size: 13px; }
.wallet-box strong { font-size: 26px; }
.wallet-box a { color: var(--accent-2); font-weight: 800; }
.app-main { min-width: 0; }
.app-main-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.app-main-head h1 {
    margin-bottom: 10px;
    font-size: clamp(36px, 4vw, 56px);
    letter-spacing: -.03em;
}
.app-main-head p { max-width: 660px; margin-bottom: 0; }
.wizard-shell { display: block; }
.wizard-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}
.wizard-steps span {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255,255,255,.045);
    font-size: 13px;
    font-weight: 850;
}
.wizard-steps .is-active {
    color: var(--text);
    border-color: rgba(21,208,181,.5);
    background: rgba(21,208,181,.12);
}
.wizard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}
.builder-stack { display: grid; gap: 16px; }
.builder-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.052);
}
.builder-card h2 {
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: 0;
}
.builder-card p,
.field-hint {
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 14px;
}
.section-head.compact h2 { margin-bottom: 8px; font-size: 26px; letter-spacing: 0; }
.section-head.compact p { margin-bottom: 0; }
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.choice-grid.platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.choice-card {
    min-height: 96px;
    margin: 0;
    padding: 14px;
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0,0,0,.18);
    color: var(--text);
    cursor: pointer;
}
.choice-card input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--accent-2);
}
.choice-card span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.quick-chips span,
.review-grid span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(0,0,0,.18);
    font-size: 12px;
    font-weight: 800;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.toggle-row input { width: 18px; min-height: 18px; accent-color: var(--accent-2); }
.review-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.summary-panel {
    position: sticky;
    top: 96px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(10, 9, 16, .92);
}
.summary-panel h2 {
    margin: 10px 0 18px;
    font-size: 24px;
    letter-spacing: 0;
}
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.summary-line span { color: var(--muted); }
.summary-line strong { text-align: right; }
.stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat-row article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.052);
}
.stat-row span { display: block; color: var(--muted); }
.stat-row strong { display: block; margin-top: 8px; font-size: 34px; letter-spacing: -.02em; }
.creator-table td span { color: var(--muted); font-size: 13px; }
.row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.row-actions a,
.row-actions button {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
}
.row-actions a {
    border: 1px solid var(--line);
}
.row-actions form { margin: 0; }
.progress-list {
    display: grid;
    gap: 16px;
}
.progress-list div {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.progress-list div:last-child { border-bottom: 0; }
.progress-list span { color: var(--muted); }
.progress-list strong { color: var(--text); }
.progress-list i {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

body:has(.app-shell) {
    color-scheme: light;
    background: #fafafa;
    color: #111827;
}
body:has(.app-shell) .site-header {
    display: none;
}
body:has(.app-shell) .brand,
body:has(.app-shell) .main-nav a:hover,
body:has(.app-shell) .main-nav .is-active {
    color: #111827;
}
body:has(.app-shell) .main-nav { color: #64748b; }
body:has(.app-shell) .language-select,
body:has(.app-shell) input,
body:has(.app-shell) textarea,
body:has(.app-shell) select {
    border-color: #d9dee8;
    background: #fff;
    color: #111827;
}
body:has(.app-shell) .site-footer { display: none; }
body:has(.app-shell) .flash {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
body:has(.app-shell) .flash.error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.app-shell {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 0;
    padding: 0;
}
.app-mobile-top { display: none; }
.app-sidebar {
    position: sticky;
    top: 0;
    min-height: 100svh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: 8px 10px 14px;
    background: linear-gradient(180deg, #0c0913 0%, #171124 52%, #181226 100%);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
    color: #fff;
}
.app-side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 0 0 12px;
    color: #fff;
}
.app-side-brand.compact { margin: 0; min-height: auto; }
.app-side-brand strong,
.app-side-brand small {
    display: block;
}
.app-side-brand strong { color: #fff; }
.app-side-brand .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}
.side-logo-text {
    color: #fff;
    font-size: 21px;
    font-weight: 950;
    letter-spacing: .18em;
    line-height: 1;
}
.side-role-pill {
    margin-left: auto;
    padding: 4px 7px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.08);
    font-size: 8.5px;
    font-weight: 900;
}
.app-side-brand small {
    max-width: 170px;
    overflow: hidden;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-side-brand .side-role-pill {
    max-width: none;
    color: rgba(255,255,255,.68);
    font-size: 8.5px;
}
.side-cta {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 -10px 10px;
    border-radius: 0 9px 9px 0;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 12px 24px rgba(124,58,237,.24);
}
.side-cta:hover,
.side-cta.is-active { color: #fff; opacity: .92; }
.side-search {
    position: relative;
    margin: 0 0 12px;
}
.side-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 42px 0 34px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
}
body:has(.app-shell) .app-sidebar .side-search input {
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
}
.side-search input::placeholder { color: rgba(255,255,255,.45); }
.side-search .side-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: rgba(255,255,255,.58);
}
.side-search span {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 5px;
    color: rgba(255,255,255,.5);
    font-size: 9px;
    font-weight: 900;
}
.app-content {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 28px;
    border-bottom: 1px solid #e7eaf0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
}
.topbar-spacer { flex: 1; }
.app-search {
    position: relative;
    width: min(520px, 100%);
}
.app-search input {
    min-height: 42px;
    padding-left: 16px;
    padding-right: 48px;
    border-radius: 8px;
}
.app-search span {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
}
.app-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.top-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    font-size: 13px;
    font-weight: 850;
}
.theme-toggle {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
}
.iconish {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    color: #111827;
    background: #fff;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    box-shadow: none;
}
.iconish .side-icon {
    width: 18px;
    height: 18px;
}
body:has(.app-shell) .app-top-actions button.iconish,
body:has(.app-shell) .app-top-actions .top-link.iconish {
    color: #111827;
    background: #fff;
    border-color: #d7dee8;
    box-shadow: none;
}
.language-pills {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    background: #fff;
}
.language-pills a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}
.language-pills a.is-active {
    color: #fff;
    background: #111827;
}
.panel-language-select {
    width: 154px;
    min-height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    color: #111827;
    background: #fff;
    font-size: 13px;
    font-weight: 850;
}
.panel-language-select.compact {
    width: 82px;
    min-height: 40px;
    padding-left: 10px;
    font-size: 11px;
}
.has-badge { position: relative; }
.has-badge span {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #ef4444;
    font-size: 10px;
    font-weight: 900;
}
.avatar-chip {
    width: 132px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 5px;
    border: 0;
    border-radius: 10px;
    color: #111827;
    background: transparent;
    font-weight: 850;
    box-shadow: none;
    cursor: pointer;
}
.avatar-chip:hover {
    background: #f8fafc;
}
.avatar-chip span,
.avatar-dot {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    font-size: 13px;
    font-weight: 900;
}
.avatar-chip span {
    overflow: hidden;
    border-radius: 6px;
    color: transparent;
    background: url("/assets/logo.png") center / cover no-repeat;
}
.avatar-chip small {
    min-width: 0;
    display: block;
    overflow: hidden;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.15;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-chip small strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 12px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-popover-wrap {
    position: relative;
}
.topbar-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: none;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15,23,42,.16);
}
.topbar-popover.is-open {
    display: block;
}
body.has-open-modal {
    overflow: hidden;
}
.cfc-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cfc-modal.is-open {
    display: flex;
}
.cfc-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(4px);
}
.cfc-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    padding: 24px;
    color: #111827;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}
.team-invite-modal {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
}
.team-invite-modal .cfc-modal-backdrop {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(2px);
}
.team-invite-drawer {
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    max-height: 100vh;
    height: 100vh;
    overflow: hidden;
    border-width: 0 0 0 1px;
    border-radius: 0;
    padding: 26px 24px 0;
    box-shadow: -18px 0 58px rgba(15, 23, 42, .12);
}
.support-modal-card {
    width: min(100%, 680px);
}
.cfc-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    color: #111827;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.cfc-modal-head {
    margin-bottom: 18px;
    padding-right: 42px;
}
.cfc-modal-head h2 {
    margin: 0 0 7px;
    color: #111827;
    font-size: 22px;
    letter-spacing: 0;
}
.cfc-modal-head p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
}
.modal-form .cfc-modal-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}
.modal-form .cfc-modal-actions .button {
    min-height: 44px;
    justify-content: center;
}
.team-invite-drawer .cfc-modal-close {
    top: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    border-color: #8b5cf6;
    border-radius: 12px;
    color: #111827;
    background: #fff;
    font-size: 28px;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .08);
}
.team-invite-drawer .cfc-modal-head {
    margin-bottom: 28px;
    padding: 0 58px 0 0;
}
.team-invite-drawer .cfc-modal-head h2 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 850;
}
.team-invite-drawer .cfc-modal-head p {
    max-width: 390px;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
}
.account-popover {
    width: 224px;
    padding: 0;
}
.notification-popover {
    width: min(384px, calc(100vw - 28px));
    min-height: 376px;
}
.popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #eef1f5;
}
.popover-head strong {
    font-size: 16px;
}
.popover-head small {
    color: #667085;
    font-size: 12px;
}
.account-menu-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #eef1f5;
}
.account-menu-head strong,
.account-menu-head small {
    display: block;
}
.account-menu-head strong {
    font-size: 14px;
    font-weight: 500;
}
.account-menu-head small {
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
}
.account-popover a {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 6px;
    padding: 7px 8px;
    border-radius: 4px;
    color: #111827;
    font-size: 14px;
    font-weight: 450;
}
.account-popover a:hover {
    background: #f2f4f7;
}
.account-popover a .side-icon {
    width: 16px;
    height: 16px;
}
.account-popover .logout-link {
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid #eef1f5;
    border-radius: 0;
    color: #ef4444;
}
.notification-state {
    min-height: 246px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 24px;
    color: #667085;
    text-align: center;
}
.notification-state span {
    width: 28px;
    height: 28px;
    border: 3px solid #dbe3ee;
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: cfc-spin 1s linear infinite;
}
.notification-state p { margin: 0; }
.notification-list {
    max-height: 314px;
    overflow: auto;
    padding: 8px;
}
.notification-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: #111827;
}
.notification-list a:hover,
.notification-list a.is-unread {
    background: #f5f3ff;
}
.notification-list b {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #7c3aed;
    background: #ede9fe;
    font-size: 12px;
}
.notification-list strong,
.notification-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-list strong {
    font-size: 13px;
}
.notification-list small {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
}
.popover-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #eef1f5;
}
.popover-actions a {
    min-height: 52px;
    display: grid;
    place-items: center;
    padding: 12px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 850;
    text-align: center;
}
.popover-actions a + a {
    border-left: 1px solid #eef1f5;
}
@keyframes cfc-spin {
    to { transform: rotate(360deg); }
}
.side-group {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 0;
}
.side-group span {
    display: block;
    padding: 5px 0 8px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}
.side-group a {
    position: relative;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 9px 8px 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    border-radius: 0 11px 11px 0;
}
.side-group a:hover,
.side-group a.is-active {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.side-group a.is-active {
    box-shadow: inset 3px 0 0 #7c3aed;
}
.side-group a em {
    flex: 1;
    font-style: normal;
}
.side-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: currentColor;
}
.side-group a b {
    min-width: 34px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #231139;
    background: #c084fc;
    font-size: 12px;
    font-weight: 950;
}
.wallet-box {
    min-height: 90px;
    margin: 18px 4px 0;
    margin-top: auto;
    padding: 12px 10px;
    border-color: rgba(255,255,255,.14);
    border-radius: 9px;
    background: rgba(255,255,255,.075);
    color: #fff;
}
.wallet-box span {
    color: rgba(255,255,255,.58);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wallet-box strong {
    color: #5eead4;
    font-size: 21px;
}
.wallet-box em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #c084fc;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}
.wallet-box .side-icon {
    width: 12px;
    height: 12px;
}
.app-main-head {
    min-height: 86px;
    align-items: center;
    padding: 0;
}
.app-main-head h1 {
    color: #111827;
    font-size: clamp(34px, 3vw, 48px);
}
.app-main-head p { color: #667085; }
.app-main .eyebrow { color: #2563eb; letter-spacing: .11em; }
.app-main .status {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.wizard-steps {
    overflow: hidden;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .04);
}
.wizard-steps span {
    border: 0;
    border-right: 1px solid #eef1f5;
    border-radius: 0;
    background: transparent;
    color: #667085;
}
.wizard-steps span:last-child { border-right: 0; }
.wizard-steps .is-active {
    color: #111827;
    background: #eef6ff;
    border-color: transparent;
}
.wizard-grid {
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 18px;
}
.builder-stack { gap: 18px; }
.builder-card,
.stat-row article,
.summary-panel,
.table-wrap.creator-table {
    border-color: #e3e8ef;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055);
}
.builder-card {
    padding: 22px;
}
.builder-card h2,
.summary-panel h2,
.section-head.compact h2 {
    color: #111827;
}
.builder-card p,
.field-hint,
.choice-card span,
.summary-panel p,
.summary-line span,
.creator-table td span,
.stat-row span {
    color: #667085;
}
.choice-card {
    border-color: #e4e7ec;
    background: #fbfcfe;
    color: #111827;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.choice-card:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .08);
}
.choice-card input { accent-color: #2563eb; }
.segmented-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #f8fafc;
}
.segmented-tabs button {
    min-height: 38px;
    border-radius: 0;
    color: #667085;
    background: transparent;
    box-shadow: none;
}
.segmented-tabs button.is-active {
    color: #111827;
    background: #fff;
}
.guardrail-note {
    display: grid;
    gap: 4px;
    margin-top: 2px;
    padding: 14px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #f8fafc;
}
.guardrail-note strong { color: #111827; }
.guardrail-note span { color: #667085; font-size: 13px; line-height: 1.45; }
.targeting-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.targeting-cards article {
    min-height: 86px;
    padding: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #fbfcfe;
}
.targeting-cards strong,
.targeting-cards span {
    display: block;
}
.targeting-cards strong { color: #111827; font-size: 13px; }
.targeting-cards span { margin-top: 5px; color: #667085; font-size: 12px; line-height: 1.35; }
.launch-checklist {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #f8fafc;
}
.launch-checklist strong { color: #111827; }
.launch-checklist span { color: #475467; font-size: 13px; }
.quick-chips span,
.review-grid span {
    border-color: #dbe3ee;
    background: #f8fafc;
    color: #475467;
}
.toggle-row span { color: #344054; }
.summary-panel {
    top: 92px;
    align-self: start;
}
.summary-line {
    border-top-color: #eef1f5;
    color: #111827;
}
.summary-line strong { color: #111827; }
.stat-row article strong { color: #111827; }
.creator-table table { color: #111827; }
.creator-table th {
    color: #667085;
    border-bottom-color: #eef1f5;
}
.creator-table td { border-bottom-color: #eef1f5; }
.creator-table .row-actions a {
    border-color: #d7dee8;
    color: #111827;
    background: #fff;
}
.creator-table .row-actions button,
.creator-table .inline-form button {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.creator-table .inline-form {
    align-items: center;
    flex-wrap: wrap;
}
.creator-table .inline-form input,
.creator-table .inline-form select {
    min-height: 34px;
    border-radius: 8px;
}
.progress-list div { border-bottom-color: #eef1f5; }
.progress-list span { color: #667085; }
.progress-list strong { color: #111827; }
.progress-list i { background: #2563eb; }
body:has(.app-shell) .button.primary,
body:has(.app-shell) button {
    background: #111827;
    box-shadow: 0 14px 28px rgba(17, 24, 39, .16);
}
body:has(.app-shell) .avatar-chip {
    color: #111827;
    background: transparent;
    box-shadow: none;
}
body:has(.app-shell) .avatar-chip:hover {
    background: #f8fafc;
}
body:has(.app-shell) .icon-button,
body:has(.app-shell) .app-mobile-top .icon-button,
body:has(.app-shell) .profile-row button,
body:has(.app-shell) .profile-row a,
body:has(.app-shell) .setting-row button,
body:has(.app-shell) .setting-row a {
    color: #111827;
    background: #fff;
    box-shadow: none;
}
body:has(.app-shell) .button.ghost {
    color: #111827;
    background: #fff;
    border-color: #d7dee8;
}
.mobile-app-nav { display: none; }
.app-main {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 24px 28px 48px;
}
.head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.panel-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.panel-tabs a,
.range-tabs a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    color: #667085;
    background: #fff;
    font-size: 13px;
    font-weight: 850;
}
.panel-tabs a.is-active,
.range-tabs a.is-active {
    color: #111827;
    border-color: #111827;
    background: #f8fafc;
}
.range-tabs {
    width: auto;
}
.empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 210px;
    padding: 24px;
    text-align: center;
}
.empty-state h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
}
.empty-state p {
    max-width: 560px;
    margin: 0;
    color: #667085;
}
.mobile-dashboard-hero {
    display: none;
}
.panel-page-head {
    min-height: 82px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}
.panel-page-head h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: #111827;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: 0;
}
.panel-page-head h1 .side-icon {
    width: 27px;
    height: 27px;
    color: #7c3aed;
}
.panel-page-head p {
    margin: 0;
    color: #667085;
    font-size: 15px;
}
.panel-page-head .button,
.panel-page-head .head-actions {
    margin-top: 2px;
}
.panel-page-head .head-actions {
    display: flex;
    gap: 12px;
}
.panel-page-head .button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
}
.lulosa-tabs {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 6px;
    border: 1px solid #e1e4ea;
    border-radius: 14px;
    background: #f7f7f9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.lulosa-tabs a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 11px;
    color: #667085;
    font-size: 14px;
    font-weight: 750;
}
.lulosa-tabs a.is-active {
    color: #111827;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.lulosa-tabs a span {
    min-width: 24px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    color: #7c3aed;
    background: rgba(124,58,237,.08);
    font-size: 12px;
}
.lulosa-tabs .side-icon {
    width: 17px;
    height: 17px;
}
.panel-filter-row,
.marketplace-filter-row {
    display: grid;
    gap: 12px;
    margin-bottom: 30px;
}
.panel-filter-row {
    grid-template-columns: minmax(0, 1fr) 240px;
}
.panel-filter-row label,
.marketplace-filter-row label {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid #e1e4ea;
    border-radius: 14px;
    background: #fff;
}
.panel-filter-row label .side-icon,
.marketplace-filter-row label .side-icon {
    width: 20px;
    height: 20px;
    color: #667085;
}
.panel-filter-row input,
.marketplace-filter-row input,
.panel-filter-row select,
.marketplace-filter-row select {
    width: 100%;
    min-height: 56px;
    border: 1px solid #e1e4ea;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    box-shadow: none;
}
.panel-filter-row label input,
.marketplace-filter-row label input {
    min-height: 0;
    padding: 0;
    border: 0;
}
.panel-list {
    display: grid;
    gap: 14px;
}
.panel-empty-state {
    min-height: 316px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 42px;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.panel-empty-state > span {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #7c3aed;
    background: linear-gradient(135deg, #f5f3ff, #f1f5f9);
}
.panel-empty-state .side-icon {
    width: 34px;
    height: 34px;
}
.panel-empty-state h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    letter-spacing: 0;
}
.panel-empty-state p {
    max-width: 560px;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.5;
}
.panel-campaign-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 128px;
    gap: 18px;
    padding: 14px;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px rgba(15,23,42,.035);
}
.panel-campaign-media,
.marketplace-card-media,
.marketplace-feature-media {
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #7c3aed;
    background: #f1f0f6;
}
.panel-campaign-media {
    min-height: 150px;
}
.panel-campaign-media img,
.marketplace-card-media img,
.marketplace-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.panel-campaign-media .side-icon,
.marketplace-card-media .side-icon,
.marketplace-feature-media .side-icon {
    width: 42px;
    height: 42px;
}
.panel-campaign-body {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 10px;
}
.card-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 800;
}
.panel-campaign-body h3,
.marketplace-campaign-card h3,
.marketplace-feature h2 {
    margin: 0;
    color: #111827;
    letter-spacing: 0;
}
.panel-campaign-body h3 {
    font-size: 20px;
}
.panel-campaign-body p {
    margin: 0;
    color: #667085;
    line-height: 1.45;
}
.campaign-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.campaign-stats strong {
    color: #111827;
    font-size: 22px;
    line-height: 1;
}
.campaign-stats span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}
.budget-bar {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeaf7;
}
.budget-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #7c3aed;
}
.card-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #667085;
    font-size: 12px;
}
.panel-campaign-actions {
    display: grid;
    align-content: center;
    gap: 10px;
}
.panel-campaign-actions form {
    margin: 0;
}
.panel-campaign-actions .button {
    width: 100%;
}
.marketplace-filter-row {
    grid-template-columns: 158px 132px minmax(260px, 1fr) 190px;
    align-items: center;
    margin-bottom: 18px;
}
.marketplace-filter-row select,
.marketplace-filter-row label {
    min-height: 44px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.marketplace-filter-row select {
    padding: 0 36px 0 14px;
    color: #111827;
    font-size: 13px;
    font-weight: 750;
}
.marketplace-filter-row label {
    padding: 0 14px;
    border: 1px solid #e1e4ea;
}
.marketplace-filter-row label input {
    color: #111827;
    font-size: 13px;
}
.marketplace-filter-row label input::placeholder {
    color: #667085;
}
.marketplace-count {
    margin: 0 0 18px;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}
.marketplace-feature {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.15fr);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid #dedee3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 42px rgba(15,23,42,.04);
}
.marketplace-feature-media {
    min-height: 304px;
    border-radius: 0;
}
.marketplace-feature-media a,
.marketplace-card-media a {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: inherit;
}
.marketplace-feature-media a:focus-visible,
.marketplace-card-media a:focus-visible,
.marketplace-feature-copy h2 a:focus-visible,
.marketplace-campaign-card h3 a:focus-visible {
    outline: 3px solid rgba(124,58,237,.32);
    outline-offset: 3px;
}
.marketplace-feature-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 28px;
}
.marketplace-badge {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #7c3aed;
    background: rgba(124,58,237,.08);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}
.marketplace-feature-copy small,
.marketplace-feature-copy p {
    color: #667085;
}
.marketplace-feature-copy h2 a,
.marketplace-campaign-card h3 a {
    color: inherit;
}
.marketplace-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.marketplace-campaign-card {
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: 0 0 14px;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 34px rgba(15,23,42,.035);
}
.marketplace-campaign-card.has-bonus {
    border-color: #c4b5fd;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 44px rgba(124,58,237,.12);
}
.marketplace-card-media {
    position: relative;
    height: 190px;
    border-radius: 0;
}
.marketplace-card-media b {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.marketplace-card-media small {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(209,250,229,.92);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.marketplace-campaign-card > :not(.marketplace-card-media) {
    margin-left: 16px;
    margin-right: 16px;
}
.marketplace-campaign-card h3 {
    min-height: 42px;
    font-size: 15px;
    line-height: 1.35;
}
.marketplace-campaign-card .campaign-stats {
    gap: 14px;
}
.marketplace-campaign-card .campaign-stats strong {
    font-size: 18px;
}
.marketplace-engagement {
    min-height: 18px;
    margin: -2px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}
.budget-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #667085;
    font-size: 12px;
}
.budget-line strong {
    color: #111827;
    font-weight: 800;
}
.budget-line span {
    color: #8b5cf6;
    font-weight: 850;
}
.marketplace-card-cta {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #e1e4ea;
    border-radius: 10px;
    color: #111827;
    font-size: 13px;
    font-weight: 850;
}
.clipper-marketplace-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 18px 0 84px;
}
.clipper-marketplace-head {
    width: min(100%, 1000px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 auto 20px;
}
.clipper-marketplace-head h1 {
    margin: 0 0 9px;
    color: #111827;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: 0;
}
.clipper-marketplace-head p {
    margin: 0;
    color: #667085;
    font-size: 15px;
}
.marketplace-filter-button {
    width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #e1e4ea;
    border-radius: 10px;
    color: #667085;
    background: #fff;
}
.clipper-academy-callout {
    width: min(100%, 1000px);
    min-height: 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    margin: 0 auto 16px;
    padding: 18px;
    border: 1px solid #d8c7ff;
    border-radius: 14px;
    background: radial-gradient(circle at 0% 0%, rgba(124,58,237,.1), transparent 36%), radial-gradient(circle at 100% 0%, rgba(20,184,166,.1), transparent 36%), #fff;
}
.clipper-academy-callout strong {
    color: #111827;
    font-size: 15px;
}
.clipper-academy-callout p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}
.clipper-academy-callout a,
.clipper-academy-callout button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 850;
}
.clipper-academy-callout a {
    color: #fff;
    background: #7c3aed;
}
body:has(.app-shell) .clipper-academy-callout button {
    color: #667085;
    background: #f4f4f7;
    box-shadow: none;
}
.clipper-marketplace-filters {
    width: min(100%, 1000px);
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 170px 142px 150px;
    gap: 10px;
    align-items: center;
    margin: 0 auto 14px;
}
.clipper-marketplace-filters select,
.clipper-filter-search {
    min-height: 44px;
    border: 1px solid #e1e4ea;
    border-radius: 10px;
    color: #111827;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.clipper-marketplace-filters select {
    width: 100%;
    padding: 0 34px 0 13px;
    font-size: 13px;
    font-weight: 750;
}
.clipper-filter-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
}
.clipper-filter-search .side-icon {
    width: 17px;
    height: 17px;
    color: #667085;
}
.clipper-filter-search input {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    color: #111827;
    background: transparent;
}
.clipper-type-pills {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-top: 2px;
}
.clipper-type-pills a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #e1e4ea;
    border-radius: 999px;
    color: #667085;
    background: #fff;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}
.clipper-type-pills a.is-active {
    border-color: #7c3aed;
    color: #fff;
    background: #7c3aed;
}
.clipper-priority-wrap,
.clipper-marketplace-grid,
.clipper-recent-wins {
    width: min(100%, 1000px);
    margin-left: auto;
    margin-right: auto;
}
.clipper-feature-card {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 42px rgba(15,23,42,.04);
}
.clipper-feature-media,
.clipper-tile-media {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #7c3aed;
    background: linear-gradient(135deg, #f1f0f6, #ecfeff);
}
.clipper-feature-media {
    min-height: 360px;
}
.clipper-feature-media a,
.clipper-tile-media {
    width: 100%;
    height: 100%;
    color: inherit;
}
.clipper-feature-media img,
.clipper-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.clipper-feature-media .side-icon,
.clipper-tile-media .side-icon {
    width: 46px;
    height: 46px;
}
.clipper-feature-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 28px;
}
.clipper-feature-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: 0;
}
.clipper-feature-copy h2 a {
    color: inherit;
}
.clipper-creator-line {
    display: flex;
    align-items: center;
    gap: 10px;
}
.clipper-creator-line b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #7c3aed;
    background: #f3e8ff;
    font-size: 13px;
    font-weight: 950;
}
.clipper-creator-line span {
    min-width: 0;
    display: grid;
    gap: 2px;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
}
.clipper-creator-line small {
    color: #059669;
    font-size: 11px;
    font-weight: 800;
}
.clipper-feature-copy p {
    max-height: 138px;
    overflow: hidden;
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}
.clipper-feature-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.clipper-feature-stats strong {
    min-height: 78px;
    display: grid;
    align-content: center;
    padding: 10px;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    color: #111827;
    background: #fafafa;
    font-size: 18px;
    line-height: 1;
}
.clipper-feature-stats .dash-money {
    font-size: 26px;
}
.clipper-feature-stats span {
    margin-top: 6px;
    color: #667085;
    font-size: 11px;
    font-weight: 750;
}
.clipper-card-note {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}
.clipper-marketplace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.clipper-campaign-tile {
    overflow: hidden;
    display: grid;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 34px rgba(15,23,42,.035);
}
.clipper-campaign-tile.has-bonus {
    border-color: #c4b5fd;
}
.clipper-tile-media {
    height: 156px;
}
.clipper-tile-media b,
.clipper-tile-media small {
    position: absolute;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.clipper-tile-media b {
    left: 12px;
    top: 12px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.clipper-tile-media small {
    right: 12px;
    bottom: 12px;
    color: #0f766e;
    background: rgba(209,250,229,.92);
}
.clipper-tile-body {
    display: grid;
    gap: 11px;
    padding: 16px;
}
.clipper-tile-body h3 {
    min-height: 42px;
    margin: 0;
    color: #111827;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0;
}
.clipper-tile-body h3 a {
    color: inherit;
}
.clipper-creator-line.compact b {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 11px;
}
.clipper-creator-line.compact span {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clipper-tile-rate {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    color: #111827;
}
.clipper-tile-rate .dash-money {
    font-size: 30px;
}
.clipper-tile-rate span {
    padding-bottom: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}
.clipper-tile-stats {
    display: grid;
    gap: 5px;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}
.clipper-tile-stats b {
    color: #111827;
}
.clipper-budget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #667085;
    font-size: 12px;
}
.clipper-budget-row strong {
    color: #111827;
    font-weight: 850;
}
.clipper-budget-row b {
    color: #7c3aed;
}
.clipper-campaign-tile .marketplace-card-cta.ghost {
    color: #667085;
    background: #f8fafc;
}
.clipper-recent-wins {
    margin-top: 34px;
}
.clipper-recent-wins > div:first-child {
    margin-bottom: 16px;
}
.clipper-recent-wins h2 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 22px;
    letter-spacing: 0;
}
.clipper-recent-wins p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}
.marketplace-detail {
    display: grid;
    gap: 22px;
}
.marketplace-detail-hero {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    display: grid;
    align-items: end;
    border: 1px solid #dedee3;
    border-radius: 20px;
    background: linear-gradient(135deg, #211539, #0f172a);
    box-shadow: 0 24px 60px rgba(15,23,42,.16);
}
.marketplace-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.12), rgba(15,23,42,.82));
    z-index: 1;
}
.marketplace-detail-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.marketplace-detail-overlay {
    position: relative;
    z-index: 2;
    max-width: 780px;
    display: grid;
    gap: 12px;
    padding: 28px;
    color: #fff;
}
.detail-back {
    width: max-content;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(10px);
}
.detail-back .side-icon {
    transform: rotate(180deg);
}
.marketplace-detail-overlay .marketplace-badge {
    color: #fff;
    background: rgba(124,58,237,.84);
}
.marketplace-detail-overlay h1 {
    margin: 0;
    color: #fff;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: 0;
}
.marketplace-detail-overlay p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-weight: 650;
}
.detail-status {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #064e3b;
    background: #d1fae5;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.marketplace-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.marketplace-detail-metrics article {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-right: 1px solid #e6e7eb;
}
.marketplace-detail-metrics article:last-child {
    border-right: 0;
}
.marketplace-detail-metrics span,
.marketplace-detail-metrics small {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}
.marketplace-detail-metrics strong {
    color: #111827;
    font-size: 26px;
    letter-spacing: 0;
}
.marketplace-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}
.marketplace-detail-main,
.marketplace-detail-side {
    display: grid;
    gap: 18px;
}
.marketplace-detail-side {
    position: sticky;
    top: 18px;
}
.detail-card h2,
.marketplace-detail-side .builder-card h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #111827;
    font-size: 18px;
    letter-spacing: 0;
}
.detail-brief {
    color: #374151;
    font-size: 15px;
    line-height: 1.7;
}
.detail-requirements {
    display: grid;
    gap: 10px;
}
.detail-requirements article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 36px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    border: 1px solid #e6e7eb;
    border-radius: 12px;
    background: #fbfbfd;
}
.detail-requirements article > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #7c3aed;
    background: #f5f3ff;
}
.detail-requirements strong,
.detail-requirements small {
    display: block;
    overflow-wrap: anywhere;
}
.detail-requirements strong {
    color: #111827;
    font-size: 14px;
}
.detail-requirements small {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
}
.detail-requirements em {
    padding: 4px 7px;
    border-radius: 999px;
    color: #6d28d9;
    background: #f5f3ff;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}
.detail-requirements button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e4ea;
    border-radius: 10px;
    color: #667085;
    background: #fff;
    box-shadow: none;
}
.detail-requirements button.is-copied {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
}
.detail-notes {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e6e7eb;
    border-radius: 12px;
    background: #f8fafc;
}
.detail-notes span {
    color: #7c3aed;
    font-size: 12px;
    font-weight: 850;
}
.detail-notes p {
    margin: 6px 0 0;
    color: #374151;
    line-height: 1.6;
}
.detail-source-preview {
    min-height: 210px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #111827, #312e81);
}
.detail-source-preview .side-icon {
    width: 56px;
    height: 56px;
}
.detail-source-links {
    display: grid;
    gap: 10px;
}
.detail-source-links a,
.detail-source-links span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #e1e4ea;
    border-radius: 11px;
    color: #111827;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
}
.detail-source-links span {
    color: #667085;
    font-weight: 700;
}
.budget-bar.green span {
    background: linear-gradient(135deg, #34d399, #10b981);
}
.marketplace-detail-side .builder-card > strong {
    color: #111827;
    font-size: 32px;
    letter-spacing: 0;
}
.marketplace-detail-side .builder-card > p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}
.marketplace-detail-side .builder-card > small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}
.payout-term {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #e6e7eb;
}
.payout-term strong {
    color: #111827;
}
.payout-term span {
    color: #7c3aed;
    font-weight: 900;
}
.payout-term small {
    color: #667085;
    font-weight: 700;
}
.detail-platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.detail-platform-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    color: #6d28d9;
    background: #f5f3ff;
    font-size: 11px;
    font-weight: 850;
}
.campaign-creator-card > span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}
.campaign-creator-card > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
}
.campaign-creator-card b {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}
.campaign-creator-card strong {
    color: #111827;
}
.campaign-creator-card small {
    color: #667085;
    font-size: 12px;
}
.marketplace-wins {
    margin-top: 58px;
}
.marketplace-wins > div:first-child {
    margin-bottom: 20px;
}
.marketplace-wins h2 {
    margin: 0 0 6px;
    color: #111827;
}
.marketplace-wins p {
    margin: 0;
    color: #667085;
}
.review-metric-grid,
.team-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid #dedee3;
    border-radius: 15px;
    background: #fff;
}
.review-metric-grid article,
.team-metric-grid article {
    min-height: 96px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 20px 26px;
    border-right: 1px solid #e6e7eb;
}
.review-metric-grid article:last-child,
.team-metric-grid article:last-child {
    border-right: 0;
}
.review-metric-grid strong,
.team-metric-grid strong {
    color: #111827;
    font-size: 30px;
    line-height: 1;
}
.review-metric-grid span,
.team-metric-grid span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 14px;
}
.review-queue-list {
    display: grid;
    gap: 14px;
}
.review-submission-card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 38px rgba(15,23,42,.035);
}
.review-submission-card.is-pending {
    border-color: #ddd6fe;
}
.review-submission-card.is-approved {
    border-color: #bbf7d0;
}
.review-submission-card.is-rejected,
.review-submission-card.is-revoked {
    border-color: #fecaca;
}
.review-submission-media {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #111827, #3b0764);
}
.review-submission-media a {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
}
.review-submission-media .side-icon {
    width: 30px;
    height: 30px;
}
.review-submission-media span {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #6d28d9;
    background: rgba(245,243,255,.96);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.review-submission-body {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 10px;
}
.review-submission-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 850;
}
.review-submission-topline b {
    color: #98a2b3;
    font-weight: 750;
}
.review-submission-card h3 {
    margin: 0;
    color: #111827;
    font-size: 19px;
    letter-spacing: 0;
    line-height: 1.22;
}
.review-submission-card p {
    margin: 0;
    color: #667085;
    line-height: 1.45;
}
.review-submission-card blockquote {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e6e7eb;
    border-left: 3px solid #8b5cf6;
    border-radius: 10px;
    color: #374151;
    background: #fbfbfd;
    font-size: 13px;
    line-height: 1.45;
}
.review-submission-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c3aed;
    font-weight: 800;
}
.review-clip-meta,
.review-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.review-clip-meta a,
.review-clip-meta span,
.review-checklist span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #e6e7eb;
    border-radius: 999px;
    color: #667085;
    background: #fff;
    font-size: 12px;
    font-weight: 750;
}
.review-clip-meta a {
    color: #7c3aed;
}
.review-checklist span {
    color: #047857;
    background: #ecfdf5;
    border-color: #bbf7d0;
}
.review-clip-meta .side-icon,
.review-checklist .side-icon {
    width: 15px;
    height: 15px;
}
.review-action-form {
    display: grid;
    gap: 12px;
    align-content: center;
    margin: 0;
    padding: 14px;
    border: 1px solid #e6e7eb;
    border-radius: 13px;
    background: #fbfbfd;
}
.review-action-form label {
    display: grid;
    gap: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}
.review-action-form input,
.review-action-form select {
    min-height: 44px;
    border-radius: 10px;
    border-color: #e1e4ea;
    background: #fff;
    color: #111827;
}
.review-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.review-action-buttons .button {
    width: 100%;
    min-height: 40px;
    justify-content: center;
}
.review-action-buttons .button.ghost {
    color: #111827;
    background: #fff;
}
.review-action-buttons .button.danger {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff7f7;
}
.review-empty-state {
    min-height: 520px;
}
.wallet-balance-panel {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
    margin-bottom: 26px;
    border: 1px solid #dedee3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 42px rgba(15,23,42,.04);
}
.wallet-balance-main {
    display: grid;
    align-content: center;
    gap: 16px;
    padding: 36px;
    background: linear-gradient(100deg, #f7f0ff, #fff);
}
.wallet-balance-main > span,
.wallet-balance-side article span,
.funding-card h2,
.wallet-activity-card h2,
.funding-explainer h2,
.escrow-card h2,
.transaction-panel h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wallet-balance-main > span {
    color: #7c3aed;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wallet-balance-main strong {
    color: #111827;
    font-size: 58px;
    line-height: .9;
}
.wallet-balance-main p {
    margin: 0;
    color: #667085;
    font-size: 16px;
}
.wallet-balance-main > div {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.wallet-balance-side {
    display: grid;
    gap: 0;
    padding: 32px;
}
.wallet-balance-side article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 70px;
}
.wallet-balance-side article > span {
    width: 42px;
    height: 42px;
    justify-content: center;
    border-radius: 12px;
    color: #7c3aed;
    background: #f5f3ff;
}
.wallet-balance-side article div,
.wallet-balance-side article small,
.wallet-mini-split p {
    color: #667085;
}
.wallet-balance-side article div {
    display: grid;
    gap: 3px;
}
.wallet-balance-side article strong {
    color: #111827;
    font-size: 22px;
}
.wallet-mini-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid #e6e7eb;
}
.wallet-mini-split p {
    display: grid;
    gap: 6px;
    margin: 0;
}
.wallet-mini-split strong {
    color: #111827;
    font-size: 18px;
}
.funding-card,
.wallet-activity-card,

.funding-card {
    position: relative;
}
.funding-donut {
    position: relative;
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
    align-content: center;
    margin: 18px 24px 18px 0;
    float: left;
    border-radius: 50%;
    background: conic-gradient(#7c3aed var(--pct), #ede9fe 0);
}
.funding-donut::before {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #fff;
}
.funding-donut strong,
.funding-donut span {
    position: relative;
    z-index: 1;
}
.funding-donut strong {
    color: #111827;
    font-size: 34px;
}
.funding-donut span {
    color: #667085;
}
.funding-legend {
    display: grid;
    gap: 14px;
    padding-top: 28px;
}
.funding-legend p {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    color: #667085;
}
.funding-legend i {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 4px;
    background: #7c3aed;
}
.funding-legend p + p i {
    background: #ddd6fe;
}
.funding-legend strong {
    display: block;
    color: #111827;
}
.wallet-empty-mini {
    min-height: 188px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: #98a2b3;
    text-align: center;
}
.wallet-empty-mini .side-icon {
    width: 42px;
    height: 42px;
    opacity: .45;
}
.wallet-empty-mini p {
    margin: 0;
    color: #667085;
}
.funding-explainer strong {
    display: block;
    margin: 12px 0 6px;
    color: #111827;
    font-size: 20px;
}
.funding-explainer p,
.escrow-card p {
    color: #667085;
}
.transaction-panel {
    margin-top: 16px;
}
.transaction-panel .section-head .button.is-disabled {
    opacity: .55;
}
.wallet-transaction-tabs a[role="tab"] {
    min-height: 38px;
}
.transaction-empty {
    min-height: 260px;
}
.leaderboard-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 18px;
}
.leaderboard-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 142px;
    height: 44px;
    border: 1px solid #ded7fb;
    border-radius: 10px;
    color: #6d28d9;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.leaderboard-select span {
    width: 38px;
    display: grid;
    place-items: center;
    color: #7c3aed;
}
.leaderboard-select svg {
    width: 16px;
    height: 16px;
}
.leaderboard-select > svg:last-child {
    position: absolute;
    right: 11px;
    pointer-events: none;
}
.leaderboard-select select {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0 34px 0 0;
    color: #111827;
    background: transparent;
    font-size: 14px;
    font-weight: 750;
    appearance: none;
    cursor: pointer;
}
.leaderboard-select:first-child select {
    color: #7c3aed;
}
.leaderboard-pill-rail {
    display: none;
    gap: 8px;
    margin: 0 0 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.leaderboard-pill-rail::-webkit-scrollbar {
    display: none;
}
.leaderboard-pill-rail a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid #e1e4ea;
    border-radius: 999px;
    padding: 0 13px;
    color: #667085;
    background: #fff;
    font-size: 12px;
    font-weight: 850;
}
.leaderboard-pill-rail a.is-active {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #f4ecff;
}
.leaderboard-caption {
    margin: 0 0 22px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 650;
}
.leaderboard-list {
    display: grid;
    gap: 12px;
}
.leaderboard-row-card {
    min-height: 72px;
    display: grid;
    grid-template-columns: 46px 44px minmax(0, 1fr) minmax(92px, auto);
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid #e1e4ea;
    border-radius: 14px;
    color: inherit;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.leaderboard-row-card:hover {
    border-color: rgba(124, 58, 237, .38);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}
.leaderboard-rank-stack {
    display: grid;
    justify-items: center;
    gap: 3px;
}
.leaderboard-rank-stack b {
    width: auto;
    height: auto;
    display: block;
    color: #111827;
    background: transparent;
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
}
.leaderboard-row-card:nth-child(1) .leaderboard-rank-stack b,
.leaderboard-row-card:nth-child(2) .leaderboard-rank-stack b,
.leaderboard-row-card:nth-child(3) .leaderboard-rank-stack b {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    background: linear-gradient(135deg, #7c3aed, #0e8ab8);
}
.leaderboard-rank-stack em {
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}
.leaderboard-rank-stack em.is-up {
    color: #0f9f6e;
}
.leaderboard-rank-stack em.is-new {
    color: #7c3aed;
}
.leaderboard-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}
.leaderboard-avatar.tone-1 { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.leaderboard-avatar.tone-2 { background: linear-gradient(135deg, #0e8ab8, #0f766e); }
.leaderboard-avatar.tone-3 { background: linear-gradient(135deg, #111827, #475569); }
.leaderboard-avatar.tone-4 { background: linear-gradient(135deg, #059669, #65a30d); }
.leaderboard-avatar.tone-5 { background: linear-gradient(135deg, #be185d, #7c3aed); }
.leaderboard-person {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.leaderboard-person strong {
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-person small {
    overflow: hidden;
    color: #667085;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-value {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
}
.leaderboard-value strong {
    color: #0e8ab8;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
}
.leaderboard-value small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}
body:has(.clipper-public-page) {
    background: #fafafa;
    color: #111827;
}
body:has(.clipper-public-page) .site-header {
    min-height: 58px;
    border-bottom-color: #e5e7eb;
    background: rgba(255, 255, 255, .92);
    box-shadow: none;
}
body:has(.clipper-public-page) .brand,
body:has(.clipper-public-page) .main-nav a,
body:has(.clipper-public-page) .main-nav .is-active {
    color: #111827;
}
body:has(.clipper-public-page) .main-nav {
    color: #667085;
}
body:has(.clipper-public-page) .language-select {
    border-color: #e5e7eb;
    color: #111827;
    background: #fff;
}
.clipper-public-page {
    min-height: 100vh;
    margin: -1px 0 0;
    padding: 42px 20px 80px;
    background: #fafafa;
}
.clipper-public-shell {
    width: min(100%, 866px);
    margin: 0 auto;
}
.clipper-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 34px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 750;
}
.clipper-back .side-icon {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
}
.clipper-public-hero {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 30px;
}
.clipper-public-avatar {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    font-size: 36px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
}
.clipper-public-avatar.tone-1 { background: linear-gradient(135deg, #7c3aed, #2563eb); }
.clipper-public-avatar.tone-2 { background: linear-gradient(135deg, #0e8ab8, #0f766e); }
.clipper-public-avatar.tone-3 { background: linear-gradient(135deg, #111827, #64748b); }
.clipper-public-avatar.tone-4 { background: linear-gradient(135deg, #059669, #84cc16); }
.clipper-public-avatar.tone-5 { background: linear-gradient(135deg, #be185d, #7c3aed); }
.clipper-public-title {
    min-width: 0;
}
.clipper-public-title h1 {
    margin: 0;
    color: #111827;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: 0;
}
.clipper-public-title p {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 14px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 650;
}
.clipper-public-title div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.clipper-public-title b {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 0 10px;
    color: #047857;
    background: #ecfdf5;
    font-size: 12px;
    font-weight: 900;
}
.clipper-public-title b + b {
    color: #0e7490;
    background: #ecfeff;
}
.clipper-public-title .side-icon {
    width: 14px;
    height: 14px;
}
.clipper-public-title small {
    display: block;
    max-width: 680px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.55;
}
.clipper-public-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}
.clipper-public-stats article {
    min-height: 96px;
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 20px 22px;
    border-right: 1px solid #e5e7eb;
}
.clipper-public-stats article:last-child {
    border-right: 0;
}
.clipper-public-stats strong {
    color: #111827;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
}
.clipper-public-stats span {
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}
.clipper-public-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 24px;
    align-items: start;
}
.clipper-public-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}
.clipper-public-card > header,
.clipper-portfolio-card > header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f5;
}
.clipper-public-card h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    letter-spacing: 0;
}
.clipper-public-card header span,
.clipper-public-card header strong {
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}
.clipper-portfolio-card header > div:last-child {
    display: flex;
    gap: 8px;
}
.clipper-portfolio-card header button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e1e4ea;
    border-radius: 10px;
    padding: 0 12px;
    color: #4b5563;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
}
.clipper-portfolio-card header button .side-icon {
    width: 14px;
    height: 14px;
}
.clipper-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 10px;
}
.clipper-portfolio-grid article {
    min-width: 0;
}
.clipper-portfolio-grid article > a {
    position: relative;
    min-height: 246px;
    display: grid;
    align-content: end;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    color: #fff;
    background: linear-gradient(150deg, #0f172a, #7c3aed 48%, #0e8ab8);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}
.clipper-portfolio-grid article:nth-child(2n) > a {
    background: linear-gradient(150deg, #111827, #0f766e 52%, #f59e0b);
}
.clipper-portfolio-grid article:nth-child(3n) > a {
    background: linear-gradient(150deg, #172554, #be185d 52%, #f97316);
}
.clipper-portfolio-grid article > a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.22), transparent 30%), linear-gradient(180deg, transparent 20%, rgba(0,0,0,.54));
}
.clip-platform {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(0,0,0,.45);
    font-size: 11px;
    font-weight: 850;
}
.clipper-portfolio-grid article > a b {
    z-index: 1;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
}
.clipper-portfolio-grid article > a b .side-icon {
    width: 22px;
    height: 22px;
}
.clipper-portfolio-grid article > a strong {
    position: relative;
    z-index: 1;
    justify-self: end;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}
.clipper-portfolio-grid h3 {
    margin: 10px 0 5px;
    color: #111827;
    font-size: 13px;
    line-height: 1.35;
}
.clipper-portfolio-grid p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}
.clipper-portfolio-grid footer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 850;
}
.clipper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px 20px;
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}
.clipper-pagination button {
    min-height: 36px;
    border: 1px solid #e1e4ea;
    border-radius: 9px;
    padding: 0 12px;
    color: #4b5563;
    background: #fff;
    font-weight: 800;
}
.clipper-public-side {
    display: grid;
    gap: 22px;
}
.verified-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 18px;
}
.verified-card span,
.verified-card em {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 0 9px;
    color: #047857;
    background: #ecfdf5;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}
.verified-card .side-icon {
    width: 13px;
    height: 13px;
}
.verified-card em {
    color: #667085;
    background: #f4f4f5;
}
.level-card {
    padding-bottom: 18px;
}
.level-card > strong {
    display: block;
    padding: 20px 18px 0;
    color: #111827;
    font-size: 25px;
    font-weight: 900;
}
.level-card > strong small {
    margin-left: 5px;
    color: #667085;
    font-size: 11px;
}
.level-card p {
    margin: 8px 18px 12px;
    color: #667085;
    font-size: 12px;
    text-align: right;
}
.level-card div {
    height: 8px;
    overflow: hidden;
    margin: 0 18px 8px;
    border-radius: 999px;
    background: #eef2f7;
}
.level-card div span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #22c1dc;
}
.level-card > small {
    display: block;
    margin: 0 18px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}
.profile-badge-card > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px;
}
.profile-badge-card button {
    min-height: 42px;
    border: 1px solid #e8e5ef;
    border-radius: 10px;
    padding: 8px;
    color: #4b5563;
    background: #fff;
    font-size: 11px;
    font-weight: 850;
}
.leaderboard-side {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 18px;
}
.leaderboard-cta-card {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid #ddd6fe;
    border-radius: 16px;
    background: #f5f3ff;
}
.leaderboard-cta-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.leaderboard-cta-card p {
    margin: 0;
    color: #667085;
    line-height: 1.45;
}
.team-org-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 26px;
    border: 1px solid #dedee3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px rgba(15,23,42,.035);
}
.team-org-card > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #7c3aed;
    background: #f5f3ff;
}
.team-org-card small {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.team-org-card strong {
    display: block;
    margin-top: 3px;
    color: #111827;
    font-size: 20px;
}
.team-org-card p {
    margin: 3px 0 0;
    color: #667085;
}
.team-org-card aside {
    display: grid;
    justify-items: end;
    gap: 8px;
}
.team-org-card aside b,
.team-members h2 span,
.team-empty-card h2 span,
.team-member-row span,
.team-roles article span {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #7c3aed;
    background: #f3e8ff;
    font-size: 12px;
}
.team-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}
.team-main {
    display: grid;
    gap: 20px;
}
.team-members h2,
.team-empty-card h2,
.team-roles h2 {
    margin: 0 0 18px;
    color: #111827;
}
.team-invite-card {
    scroll-margin-top: 88px;
}
.team-invite-card .section-head {
    margin-bottom: 18px;
}
.team-invite-form {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) auto;
    gap: 12px;
    align-items: end;
}
.team-invite-form label {
    display: grid;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.team-invite-form input,
.team-invite-form select,
.team-invite-form textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d8dce6;
    border-radius: 11px;
    padding: 10px 12px;
    color: #111827;
    background: #fff;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.team-invite-form textarea {
    resize: vertical;
}
.team-invite-form .team-note-field {
    grid-column: 1 / 3;
}
.team-invite-drawer .team-invite-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px 0;
}
.team-invite-drawer .team-field {
    display: grid;
    gap: 9px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.team-invite-drawer .team-field em {
    color: #ef4444;
    font-style: normal;
}
.team-invite-drawer .team-field span,
.team-invite-drawer .team-field small {
    color: #667085;
    font-weight: 650;
}
.team-invite-drawer .team-field input {
    min-height: 44px;
    border: 1px solid #111827;
    border-radius: 8px;
    padding: 0 13px;
    color: #111827;
    background: #f9fafb;
    font-size: 14px;
    outline: none;
}
.team-invite-drawer .team-field input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.team-access-field {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}
.team-access-field legend {
    margin-bottom: 4px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
}
.team-invite-drawer .team-access-card {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 88px;
    border: 1px solid #111827;
    border-radius: 10px;
    padding: 13px 13px 13px 12px;
    color: #111827;
    background: #fff;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.team-invite-drawer .team-access-card,
.team-invite-drawer .team-access-card * {
    letter-spacing: 0;
    text-transform: none;
}
.team-access-card:has(input:checked),
.team-access-card.is-selected {
    border-color: #8b5cf6;
    background: #faf7ff;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .28);
}
.team-access-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.team-access-radio {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    border: 1px solid #6b7280;
    border-radius: 999px;
    background: #fff;
}
.team-access-card:has(input:checked) .team-access-radio,
.team-access-card.is-selected .team-access-radio {
    border-color: #7c3aed;
}
.team-access-card:has(input:checked) .team-access-radio::after,
.team-access-card.is-selected .team-access-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #7c3aed;
}
.team-access-copy {
    display: grid;
    gap: 9px;
    min-width: 0;
}
.team-access-copy strong {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.team-access-copy b,
.team-access-copy i {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}
.team-access-copy b.admin { color: #334155; background: #e8eefc; }
.team-access-copy b.billing { color: #92400e; background: #fef3c7; }
.team-access-copy b.campaign { color: #047857; background: #d1fae5; }
.team-access-copy b.reviewer { color: #be185d; background: #fce7f3; }
.team-access-copy b.analyst { color: #0f766e; background: #ccfbf1; }
.team-access-copy i {
    color: #6d28d9;
    background: #ede9fe;
    font-size: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.team-access-copy small {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
}
.team-invite-drawer .cfc-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: auto -8px 0;
    padding: 16px 24px 22px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}
.team-invite-drawer .cfc-modal-actions .button {
    min-height: 44px;
    border-radius: 10px;
    padding: 0 18px;
}
.team-invite-drawer .cfc-modal-actions .button.ghost {
    border: 1px solid #e5e7eb;
    color: #111827;
    background: #fff;
}
.team-invite-drawer .cfc-modal-actions .button.primary {
    border-color: #7c3aed;
    color: #fff;
    background: #7c3aed;
    box-shadow: 0 12px 26px rgba(124, 58, 237, .25);
}
.team-member-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 92px 86px 110px 24px;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 14px 0;
    border-top: 1px solid #edf0f5;
}
.team-member-row > b {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #7c3aed;
    background: #f3e8ff;
}
.team-member-row strong {
    display: block;
    color: #111827;
}
.team-member-row em {
    margin-left: 6px;
    color: #667085;
    font-size: 11px;
    font-style: normal;
}
.team-member-row small {
    color: #667085;
}
.team-member-row p {
    color: #047857;
}
.team-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 86px 110px 24px;
    gap: 12px;
    margin: -2px 0 4px 56px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.team-empty-card {
    min-height: 146px;
}
.team-empty-card p {
    display: grid;
    place-items: center;
    min-height: 78px;
    margin: 0;
    color: #667085;
}
.team-pending-card,
.team-activity-card {
    min-height: 0;
}
.team-pending-list,
.team-activity-list {
    display: grid;
    gap: 12px;
}
.team-pending-list article,
.team-activity-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #edf0f5;
    border-radius: 13px;
    background: #fbfcff;
}
.team-pending-list strong,
.team-activity-list strong {
    display: block;
    color: #111827;
}
.team-pending-list small,
.team-activity-list small {
    color: #667085;
}
.team-pending-list p {
    display: block;
    min-height: 0;
    margin: 6px 0 0;
    color: #667085;
}
.team-pending-list button {
    min-height: 36px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 0 12px;
    color: #dc2626;
    background: #fff5f5;
    font-weight: 800;
}
.team-activity-list article {
    grid-template-columns: 36px minmax(0, 1fr);
}
.team-activity-list article > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #7c3aed;
    background: #f3e8ff;
}
.team-roles {
    position: sticky;
    top: 76px;
    padding-bottom: 0;
}
.team-roles article {
    display: grid;
    gap: 10px;
    padding: 18px 0;
    border-top: 1px solid #e6e7eb;
}
.team-roles article p {
    margin: 0;
    color: #667085;
    line-height: 1.45;
}
.team-roles > small {
    display: flex;
    gap: 9px;
    margin: 18px -24px 0;
    padding: 18px 24px;
    border-top: 1px solid #e6e7eb;
    color: #667085;
    background: #f8fafc;
}
.support-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
}
.support-hero {
    min-height: 170px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    background:
        radial-gradient(circle at 82% 4%, rgba(124,58,237,.65), transparent 28%),
        radial-gradient(circle at 38% 0%, rgba(14,165,233,.28), transparent 26%),
        linear-gradient(135deg, #121022, #201137 62%, #0b1020);
}
.support-hero .button {
    color: #111827;
    background: #fff;
}
.support-ticket-tabs {
    margin-bottom: 30px;
}
.support-ticket-tabs a span {
    min-width: 20px;
    display: inline-grid;
    place-items: center;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #7c3aed;
    background: #f3e8ff;
    font-size: 11px;
}
.support-section-title {
    margin: 0 0 26px;
    color: #111827;
    font-size: 18px;
}
.support-ticket-empty {
    min-height: 300px;
}
.support-ticket-form-card {
    scroll-margin-top: 88px;
}
.support-ticket-form-card .section-head {
    margin-bottom: 18px;
}
.support-ticket-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, .42fr) minmax(140px, .34fr);
    gap: 12px;
    align-items: end;
}
.support-ticket-form label {
    display: grid;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.support-ticket-form input,
.support-ticket-form select,
.support-ticket-form textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d8dce6;
    border-radius: 11px;
    padding: 10px 12px;
    color: #111827;
    background: #fff;
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
}
.support-ticket-form textarea {
    resize: vertical;
}
.support-message-field {
    grid-column: 1 / -1;
}
.support-ticket-list {
    display: grid;
    gap: 14px;
}
.support-ticket-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,23,42,.045);
}
.support-ticket-card header,
.support-ticket-card footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.support-ticket-card header span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.support-ticket-card h2 {
    margin: 5px 0 0;
    color: #111827;
    font-size: 18px;
}
.support-ticket-card p {
    margin: 0;
    color: #475467;
    line-height: 1.5;
}
.support-ticket-card small {
    color: #667085;
}
.support-ticket-card form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.support-ticket-card button {
    min-height: 36px;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    padding: 0 12px;
    color: #6d28d9;
    background: #f5f3ff;
    font-weight: 850;
}
.support-status {
    flex: none;
    padding: 6px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: #ccfbf1;
    font-size: 12px;
}
.support-status.in-progress {
    color: #1d4ed8;
    background: #dbeafe;
}
.support-status.resolved {
    color: #047857;
    background: #dcfce7;
}
.support-status.closed {
    color: #475467;
    background: #eef2f7;
}
.support-status.open {
    color: #7c2d12;
    background: #ffedd5;
}
.messages-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}
.messages-page-head h1 {
    margin: 0;
    color: #111827;
    font-size: 32px;
}
.messages-page-head p {
    margin: 5px 0 0;
    color: #667085;
}
.messages-toolbar {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}
.message-state-tabs,
.message-source-tabs {
    margin: 0;
}
.message-state-tabs a,
.message-source-tabs a {
    gap: 6px;
}
.message-state-tabs span,
.message-source-tabs span {
    min-width: 20px;
    display: inline-grid;
    place-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    color: #7c3aed;
    background: #f3e8ff;
    font-size: 11px;
}
.message-state-tabs small {
    color: #667085;
    font-size: 11px;
}
.messages-search {
    position: relative;
    display: grid;
}
.messages-search .side-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #98a2b3;
    transform: translateY(-50%);
}
.messages-search input {
    min-height: 44px;
    width: 100%;
    border: 1px solid #d8dce6;
    border-radius: 12px;
    padding: 0 14px 0 42px;
    color: #111827;
    background: #fff;
    font: inherit;
}
.messages-toolbar > small {
    color: #667085;
    font-weight: 750;
}
.messages-list {
    display: grid;
    gap: 18px;
}
.message-group {
    display: grid;
    gap: 10px;
}
.message-group > h2 {
    margin: 6px 0 2px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.message-card {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15,23,42,.035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.message-card:hover,
.message-card.is-selected {
    border-color: #c4b5fd;
    box-shadow: 0 16px 42px rgba(124,58,237,.12);
    transform: translateY(-1px);
}
.message-card.is-unread {
    background: #fbfaff;
}
.message-card > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: start;
    padding: 16px;
    color: #111827;
}
.message-card b {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #7c3aed;
    background: #ede9fe;
}
.message-card h3 {
    margin: 0;
    color: #111827;
    font-size: 16px;
}
.message-card p {
    margin: 5px 0;
    color: #475467;
    line-height: 1.45;
}
.message-card small,
.message-card time {
    color: #667085;
    font-size: 12px;
}
.message-card em {
    padding: 5px 8px;
    border-radius: 999px;
    color: #7c2d12;
    background: #ffedd5;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}
.message-card footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 14px;
}
.message-card footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c3aed;
    font-weight: 850;
}
.messages-empty {
    min-height: 320px;
}
.quick-help,
.contact-card {
    padding: 26px;
}
.quick-help h2 {
    margin: 0 0 14px;
    color: #111827;
}
.quick-help a,
.contact-card a,
.contact-card p {
    min-height: 54px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    margin: 0;
    border-bottom: 1px solid #e6e7eb;
    color: #111827;
    font-weight: 750;
}
.quick-help a:last-child,
.contact-card a:last-child,
.contact-card p:last-child {
    border-bottom: 0;
}
.contact-card {
    display: grid;
    gap: 8px;
}
.contact-card > span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.creator-empty-campaign {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px dashed #cfd8e6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .045);
}
.creator-empty-campaign span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.creator-empty-campaign h2 {
    margin: 6px 0;
    color: #111827;
    font-size: 20px;
}
.creator-empty-campaign p {
    max-width: 560px;
    margin: 0;
    color: #667085;
}
.stat-row.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.chat-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.chat-list article {
    padding: 13px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #f8fafc;
}
.chat-list span,
.contact-card span,
.support-hero span,
.ranking-rules span {
    color: #2563eb;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .1em;
}
.chat-list strong {
    display: block;
    margin: 5px 0;
    color: #111827;
    font-size: 14px;
}
.chat-list p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}
.support-layout,
.leaderboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.support-layout > *,
.leaderboard-layout > * {
    min-width: 0;
}
.support-main {
    min-width: 0;
    display: grid;
    gap: 16px;
}
.support-side {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 16px;
}
.support-hero {
    padding: 24px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #111827, #1d4ed8 56%, #0f766e);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
}
.support-hero span { color: rgba(255,255,255,.76); }
.support-hero h2 {
    max-width: 720px;
    margin: 8px 0;
    color: #fff;
    font-size: 26px;
    letter-spacing: 0;
}
.support-hero p {
    max-width: 720px;
    color: rgba(255,255,255,.76);
}
.support-hero.team-hero {
    margin-bottom: 18px;
}
.quick-help {
    display: grid;
    gap: 10px;
}
.quick-help a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e3e8ef;
    color: #111827;
    font-weight: 850;
}
.quick-help a:last-child { border-bottom: 0; }
.contact-card strong {
    display: block;
    margin: 8px 0;
    color: #111827;
    font-size: 18px;
}
.contact-card p { margin: 0; }
.leaderboard-toolbar {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.leaderboard-layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
}
.ranking-rules {
    position: sticky;
    top: 76px;
}
.ranking-rules ol {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
    padding: 0;
    color: #667085;
    list-style: none;
}
.ranking-rules li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid #eef1f5;
}
.ranking-rules li:first-child {
    border-top: 0;
}
.ranking-rules li b {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #7c3aed;
    background: #f3e8ff;
    font-size: 12px;
    font-weight: 900;
}
.ranking-rules li p {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}
.faq-card {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.faq-card details {
    padding: 14px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #f8fafc;
}
.faq-card summary {
    cursor: pointer;
    color: #111827;
    font-weight: 850;
}
.faq-card p {
    margin: 10px 0 0;
    color: #667085;
}
.setup-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: min(100%, 1264px);
    margin: 0 auto 32px;
    padding: 20px;
    border: 1px solid #dedee3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 46px rgba(15, 23, 42, .035);
    overflow: hidden;
}
.setup-banner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #7c3aed, rgba(124,58,237,.35));
}
.setup-dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #98a2b3;
    background: transparent;
    box-shadow: none;
    font-size: 22px;
}
body:has(.app-shell) .setup-dismiss {
    color: #98a2b3;
    background: transparent;
    box-shadow: none;
}
.setup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 42px;
}
.setup-icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #fff;
    background: #7c3aed;
    box-shadow: 0 10px 22px rgba(124,58,237,.18);
}
.setup-banner h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
}
.setup-banner p { margin-bottom: 0; color: #667085; }
.setup-head p {
    font-size: 14px;
    line-height: 1.2;
}
.setup-head p b {
    color: #7c3aed;
}
.setup-progress {
    grid-column: 1 / -1;
    display: flex;
    gap: 5px;
    margin-top: 2px;
}
.setup-progress span {
    height: 6px;
    flex: 1;
    border-radius: 999px;
    background: #edf1f7;
}
.setup-progress span.is-filled {
    background: #7c3aed;
}
.setup-next {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 14px;
    min-height: 120px;
    padding: 18px 16px;
    border: 1.5px solid rgba(124,58,237,.28);
    border-radius: 14px;
    background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(124,58,237,.08), transparent 60%);
}
.setup-next::before {
    content: "✓";
    grid-row: span 3;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 1.5px solid #7c3aed;
    border-radius: 999px;
    color: #7c3aed;
    background: #fff;
    font-size: 12px;
    font-weight: 950;
}
.setup-next strong { color: #7c3aed; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.setup-next span { color: #111827; font-weight: 850; }
.setup-next small { color: #667085; }
.setup-next .button {
    grid-column: 3;
    grid-row: 1 / span 3;
    min-width: 132px;
    gap: 7px;
    border-radius: 10px;
}
.setup-next .button .side-icon { width: 14px; height: 14px; }
body:has(.app-shell) .setup-next .button.primary {
    background: #7c3aed;
    box-shadow: 0 14px 28px rgba(124,58,237,.2);
}
.setup-list {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    padding-top: 0;
}
.setup-list span {
    min-height: 50px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #ececf1;
    border-radius: 0;
    color: #667085;
    background: transparent;
    font-size: 13px;
    font-weight: 850;
}
.setup-list span:hover {
    background: #fafafa;
}
.setup-list span.is-done {
    color: #111827;
    background: transparent;
}
.setup-list span b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #7c3aed;
    border: 1px solid #e4e4e7;
    background: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}
.setup-list span em {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: #111827;
    font-style: normal;
    font-weight: 750;
}
.setup-list span small {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 750;
}
.setup-list span i {
    color: #8a6a1f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}
.setup-completed-toggle {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 10px;
    border: 0;
    border-top: 1px solid #ececf1;
    border-radius: 0;
    color: #667085;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 850;
}
body:has(.app-shell) .setup-completed-toggle {
    background: transparent;
    box-shadow: none;
}
.setup-completed-toggle::after {
    content: "v";
    margin-left: 7px;
    color: #98a2b3;
    font-size: 16px;
}
.setup-trust-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 54px;
    padding: 13px 14px;
    border: 1px dashed #d8c7ff;
    border-radius: 10px;
    background: rgba(124,58,237,.035);
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}
.setup-trust-note b {
    font-size: 16px;
    line-height: 1;
}
.dashboard-welcome,
.dashboard-grid {
    width: min(100%, 1264px);
    margin-left: auto;
    margin-right: auto;
}
.dashboard-welcome {
    min-height: 146px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-top: 0;
    margin-bottom: 32px;
}
.dashboard-welcome h1 {
    margin-bottom: 8px;
    font-size: 42px;
    line-height: 1.04;
    letter-spacing: 0;
}
.dashboard-welcome p {
    color: #667085;
    font-size: 16px;
}
.dashboard-welcome .head-actions .button {
    min-height: 42px;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
}
.dashboard-welcome .head-actions svg {
    width: 16px;
    height: 16px;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
}
.dash-card {
    min-height: 241px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #dedee3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 16px 36px rgba(15, 23, 42, .035);
}
.dash-card h2 {
    margin-bottom: 10px;
    color: #111827;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0;
}
.dash-card strong {
    display: block;
    color: #111827;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.02em;
}
.dash-card p,
.dash-card small { color: #667085; }
.dash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e6e6eb;
}
.dash-card-head a,
.dash-card-head span { color: #7b7280; font-size: 13px; font-weight: 650; }
.card-icon {
    width: 18px;
    height: 18px;
    color: #0f766e;
}
.metric-card { grid-column: span 1; }
.dash-card-body {
    min-width: 0;
    flex: 1;
}
.money-split {
    margin: 4px 0 18px;
}
.dash-money {
    display: inline-flex;
    align-items: flex-start;
    color: #111827;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: .95;
}
.dash-money sup {
    margin: 3px 0 0 2px;
    color: inherit;
    font-size: .46em;
    font-weight: 650;
    letter-spacing: 0;
}
.metric-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.metric-flow span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #667085;
}
.metric-flow b {
    font-size: 13px;
}
.metric-flow .is-in { color: #078466; }
.metric-flow .is-out { color: #dc2626; }
.dash-card-foot {
    min-height: 38px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #e6e6eb;
    font-size: 13px;
}
.dash-card-foot a,
.dash-footer-link {
    color: #6d28d9;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.dash-card-foot .side-icon {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}
.dash-empty-line {
    min-height: 100px;
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 13px;
    text-align: center;
}
.review-card {
    min-height: 332px;
}
.review-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 4px 10px;
    margin: 2px 0 18px;
}
.review-card-main strong {
    font-size: 44px;
    font-weight: 450;
}
.review-card-main span {
    margin-bottom: 7px;
    color: #667085;
    font-weight: 750;
}
.review-card-main b {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    color: #111827;
    font-size: 24px;
}
.review-card-main small {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    color: #98a2b3;
    font-size: 11px;
}
.review-track {
    height: 8px;
    margin: 10px 0 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f1f1f4, #f7f7f9);
}
.mini-stats {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.mini-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: transparent;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #98a2b3;
}
.dot.approved { background: #10b981; }
.dot.pending { background: #f59e0b; }
.dot.rejected { background: #ef4444; }
.activity-bars,
.sparkline {
    height: 94px;
    display: flex;
    align-items: end;
    gap: 7px;
    margin: auto 0 8px;
}
.activity-bars span,
.sparkline i {
    flex: 1;
    min-width: 10px;
    border-radius: 999px;
    background: #d8c7ff;
}
.sparkline i {
    height: 86px;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(124,58,237,.5), rgba(124,58,237,.04));
    border-top: 2px solid #7c3aed;
}
.activity-card,
.performance-card,
.top-clips-card {
    min-height: 332px;
}
.dashboard-section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 14px 0 -8px;
}
.dashboard-section-title h2 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    letter-spacing: 0;
}
.dashboard-section-title p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 14px;
}
.sparkline i:nth-child(2) { height: 44px; }
.sparkline i:nth-child(3) { height: 32px; }
.sparkline i:nth-child(4) { height: 58px; }
.sparkline i:nth-child(5) { height: 70px; }
.activity-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.activity-stat-grid div {
    min-height: 94px;
    padding: 16px;
    border-radius: 12px;
    background: #f4f2f7;
}
.activity-stat-grid span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 13px;
}
.activity-stat-grid strong {
    margin-top: 16px;
    color: #0f766e;
    font-size: 30px;
    font-weight: 450;
}
.activity-stat-grid div:nth-child(2) strong {
    color: #dc2626;
}
.activity-card .dash-footer-link {
    display: block;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6e6eb;
    text-align: right;
}
.clipper-shell .side-cta,
.clipper-shell .mobile-app-nav .mobile-create {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 56%, #14b8a6 100%);
}
.clipper-setup-banner {
    border-color: rgba(124, 58, 237, .24);
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, .12), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .12), transparent 28%),
        #fff;
}
.clipper-setup-banner .setup-icon {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}
.setup-list a {
    min-height: 50px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #ececf1;
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}
.setup-list a:hover {
    color: #111827;
    background: #fafafa;
}
.setup-list a b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    color: #7c3aed;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
}
.setup-list a em {
    min-width: 0;
    color: #111827;
    font-style: normal;
    font-weight: 750;
}
.setup-list a i {
    color: #98a2b3;
    font-size: 17px;
    font-style: normal;
}
.clipper-dashboard-welcome .head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.clipper-dashboard-grid .campaign-summary-card {
    min-height: 241px;
}
.clipper-balance-chart {
    display: flex;
    align-items: end;
    gap: 7px;
    height: 78px;
    margin: 4px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid #eef1f5;
}
.clipper-balance-chart span {
    flex: 1;
    min-width: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(124,58,237,.42), rgba(124,58,237,.08));
}
.review-track {
    overflow: hidden;
}
.review-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #14b8a6);
}
.clipper-campaign-list,
.clipper-top-clip-list {
    display: grid;
    gap: 10px;
}
.clipper-campaign-list a,
.clipper-top-clip-list a {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid #eef1f5;
    border-radius: 11px;
    color: #111827;
    background: #fafafa;
}
.clipper-campaign-list a:hover,
.clipper-top-clip-list a:hover {
    border-color: #d8c7ff;
    background: #fbf8ff;
}
.clipper-campaign-list span,
.clipper-top-clip-list span {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.clipper-campaign-list strong,
.clipper-top-clip-list strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clipper-campaign-list small,
.clipper-top-clip-list small {
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clipper-campaign-list b,
.clipper-top-clip-list em {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #6d28d9;
    background: #f3e8ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: capitalize;
}
.clipper-streak-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e6e6eb;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}
.clipper-streak-note .side-icon {
    width: 17px;
    height: 17px;
    color: #f59e0b;
}
.analytics-shell {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 10px 40px 72px;
}
.analytics-mercury {
    width: min(100%, 1000px);
    min-height: 70px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 auto 32px;
}
.analytics-mercury h1 {
    margin: 0 0 9px;
    color: #111827;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: 0;
}
.analytics-mercury p {
    margin: 0;
    color: #667085;
    font-size: 15px;
}
.analytics-range {
    min-width: 202px;
    min-height: 54px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 4px;
    border: 1px solid #e4e4e7;
    border-radius: 9px;
    background: #f4f4f7;
}
.analytics-range a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 7px;
    color: #5f6573;
    font-size: 13px;
    font-weight: 650;
}
.analytics-range a.is-active {
    color: #111827;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.055);
}
.analytics-empty-state {
    width: min(100%, 1000px);
    min-height: 392px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    padding: 64px 16px;
    text-align: center;
}
.analytics-target {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    margin-bottom: 34px;
    border-radius: 999px;
    background: #e7f5fd;
}
.analytics-target span {
    width: 40px;
    height: 40px;
    display: block;
    border: 4px solid #1daee4;
    border-radius: 999px;
    box-shadow: inset 0 0 0 5px #e7f5fd, inset 0 0 0 9px #1daee4, inset 0 0 0 14px #e7f5fd;
    position: relative;
}
.analytics-target span::after {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 999px;
    background: #1daee4;
}
.analytics-empty-state h2 {
    margin: 0 0 16px;
    color: #09090b;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: 0;
}
.analytics-empty-state p {
    max-width: 475px;
    margin: 0 0 26px;
    color: #667085;
    font-size: 17px;
    line-height: 1.45;
}
body:has(.app-shell) .analytics-empty-state .button.primary {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 9px;
    background: #20aee7;
    box-shadow: none;
}
.analytics-info-grid {
    width: min(100%, 1000px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 auto;
}
.analytics-info-grid article {
    min-height: 140px;
    padding: 24px;
    border: 2px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 28px rgba(15,23,42,.035);
}
.analytics-info-grid h2 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
}
.analytics-info-grid p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.45;
}
.clipper-analytics-shell {
    width: min(100%, 1120px);
}
.clipper-analytics-metrics {
    width: min(100%, 1000px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 auto 18px;
}
.clipper-analytics-metrics article,
.analytics-card,
.analytics-more-card {
    border: 1px solid #dedee3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 16px 36px rgba(15, 23, 42, .035);
}
.clipper-analytics-metrics article {
    min-height: 138px;
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 18px;
}
.clipper-analytics-metrics span {
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}
.clipper-analytics-metrics strong {
    color: #111827;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0;
}
.clipper-analytics-metrics small {
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}
.analytics-card {
    width: min(100%, 1000px);
    margin: 0 auto 18px;
    padding: 24px;
}
.analytics-card h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0;
}
.analytics-card .dash-card-head {
    margin-bottom: 18px;
}
.analytics-card .dash-card-head p {
    max-width: 780px;
    margin: 7px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
}
.metric-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e4e4e7;
    border-radius: 9px;
    background: #f4f4f7;
}
.metric-toggle a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 7px;
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}
.metric-toggle a.is-active {
    color: #111827;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.055);
}
.clipper-analytics-chart {
    height: 220px;
    display: flex;
    align-items: end;
    gap: 14px;
    padding: 18px 4px 10px;
    border-bottom: 1px solid #eef1f5;
}
.clipper-analytics-chart span {
    position: relative;
    flex: 1;
    min-width: 34px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, rgba(124,58,237,.58), rgba(20,184,166,.2));
}
.clipper-analytics-chart b {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}
.analytics-empty-line {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 30px;
    font-weight: 850;
}
.analytics-empty-line small {
    display: block;
    margin-top: 8px;
    color: #98a2b3;
    font-size: 13px;
    font-weight: 650;
}
.clipper-compare-list,
.clipper-platform-list {
    display: grid;
    gap: 10px;
}
.clipper-compare-list article,
.clipper-platform-list article {
    min-height: 66px;
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eef1f5;
    border-radius: 11px;
    background: #fafafa;
}
.clipper-compare-list article {
    grid-template-columns: minmax(0, 1fr) auto auto;
}
.clipper-platform-list article {
    grid-template-columns: minmax(0, 1fr) auto auto;
}
.clipper-compare-list span {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.clipper-compare-list strong,
.clipper-platform-list span {
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clipper-compare-list small,
.clipper-platform-list small {
    color: #667085;
    font-size: 12px;
}
.clipper-compare-list b,
.clipper-platform-list strong {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}
.clipper-compare-list em {
    padding: 5px 8px;
    border-radius: 999px;
    color: #6d28d9;
    background: #f3e8ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}
.analytics-empty-copy {
    min-height: 118px;
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 14px;
    text-align: center;
}
.analytics-more-card {
    width: min(100%, 1000px);
    margin: 0 auto;
    padding: 22px 24px;
}
.analytics-more-card h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 17px;
    letter-spacing: 0;
}
.analytics-more-card p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}
.campaign-create-shell {
    width: min(100%, 1264px);
    margin: 0 auto;
    padding: 18px 0 84px;
}
.campaign-breadcrumb,
.campaign-back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    color: #667085;
    font-size: 14px;
    font-weight: 650;
}
.campaign-breadcrumb {
    margin-bottom: 42px;
}
.campaign-breadcrumb strong {
    color: #111827;
    font-weight: 650;
}
.campaign-back {
    margin-bottom: 26px;
}
.campaign-create-head {
    min-height: 70px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.campaign-create-head h1 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: 0;
}
.campaign-create-head p {
    margin: 0;
    color: #667085;
    font-size: 15px;
}
.campaign-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 900px) 356px;
    gap: 26px;
    align-items: start;
}
.campaign-create-main {
    min-width: 0;
    display: grid;
    gap: 20px;
}
.campaign-stepper {
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(38px, 1fr) auto minmax(38px, 1fr) auto minmax(38px, 1fr) auto;
    align-items: center;
    padding: 11px 22px;
    border: 1px solid #e1e4ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 36px rgba(15,23,42,.035);
}
.campaign-stepper button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    color: #667085;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 750;
}
body:has(.app-shell) .campaign-stepper button {
    background: transparent;
    box-shadow: none;
}
.campaign-stepper button b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    color: #667085;
    background: #fff;
    font-size: 12px;
}
.campaign-stepper button.is-active {
    color: #7c3aed;
    background: rgba(124,58,237,.08);
}
.campaign-stepper button.is-active b {
    color: #fff;
    border-color: #7c3aed;
    background: #7c3aed;
}
.campaign-stepper button.is-soft b {
    color: #0f766e;
    border-color: #bfe7dd;
    background: #ecfdf5;
}
.campaign-stepper i {
    height: 2px;
    border-radius: 999px;
    background: #d8d9df;
}
.campaign-builder-card,
.campaign-live-summary {
    border: 1px solid #dedee3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 36px rgba(15,23,42,.035);
}
.campaign-builder-card {
    padding: 24px;
    scroll-margin-top: 88px;
}
.campaign-builder-card[hidden],
.campaign-form-footer [hidden] {
    display: none !important;
}
.campaign-card-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.campaign-card-title > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #7c3aed;
    background: rgba(124,58,237,.08);
}
.campaign-card-title .side-icon {
    width: 18px;
    height: 18px;
}
.campaign-card-title h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
}
.campaign-card-title p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}
.campaign-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.campaign-type-card {
    position: relative;
    min-height: 146px;
    display: grid;
    align-content: start;
    gap: 11px;
    margin: 0;
    padding: 18px;
    border: 1px solid #d4d4d8;
    border-radius: 14px;
    color: #111827;
    background: #fff;
}
.campaign-type-card input {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 20px;
    min-height: 20px;
    accent-color: #7c3aed;
}
.campaign-type-card > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #7c3aed;
    background: rgba(124,58,237,.13);
}
.campaign-type-card strong {
    color: #111827;
    font-size: 15px;
}
.campaign-type-card small {
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}
.campaign-type-card.is-selected {
    border-color: #7c3aed;
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.28);
}
.campaign-field {
    position: relative;
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    color: #111827;
    font-size: 14px;
    font-weight: 750;
}
.campaign-field b {
    color: #e11d48;
}
.campaign-field small {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}
.campaign-field em {
    position: absolute;
    right: 0;
    top: 0;
    color: #667085;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}
.campaign-field input,
.campaign-field textarea,
.campaign-notes textarea {
    width: 100%;
    border-color: #d4d4d8;
    border-radius: 8px;
    background: #fff;
    color: #111827;
}
.campaign-field textarea {
    min-height: 118px;
}
.campaign-upload {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    color: #111827;
    font-size: 14px;
    font-weight: 750;
}
.campaign-upload > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.campaign-upload-box {
    min-height: 186px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 22px;
    border: 2px dashed #e1e1e7;
    border-radius: 12px;
    text-align: center;
    background: #fff;
}
.campaign-upload-box i {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #7c3aed;
    background: rgba(124,58,237,.08);
    font-style: normal;
}
.campaign-upload-box i .side-icon {
    width: 28px;
    height: 28px;
}
.campaign-upload-box strong {
    color: #111827;
    font-size: 16px;
}
.campaign-upload-box u {
    color: #7c3aed;
}
.campaign-upload-box small {
    color: #667085;
    font-size: 13px;
}
.campaign-upload-box img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
}
.campaign-info-note {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid #bde8f7;
    border-radius: 10px;
    color: #1f2937;
    background: #f0fbff;
    font-size: 14px;
}
.source-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid #e1e1e7;
    border-radius: 10px;
    background: #f4f4f7;
}
.source-mode-tabs button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    color: #667085;
    background: transparent;
    box-shadow: none;
    font-weight: 750;
}
body:has(.app-shell) .source-mode-tabs button {
    background: transparent;
    box-shadow: none;
}
body:has(.app-shell) .source-mode-tabs button.is-active,
.source-mode-tabs button.is-active {
    color: #7c3aed;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.source-mode-tabs button:disabled {
    opacity: .55;
}
.source-link-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.source-link-actions button,
.campaign-add-requirement {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px dashed #dedee3;
    border-radius: 10px;
    color: #111827;
    background: #fff;
    box-shadow: none;
    font-weight: 750;
}
.source-link-actions small {
    color: #667085;
    font-size: 12px;
}
.campaign-helper-copy {
    margin: 0 0 18px;
    color: #667085;
    font-size: 14px;
}
.quick-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.quick-add-row span {
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.quick-add-row button {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #dedee3;
    border-radius: 999px;
    color: #111827;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 750;
}
.campaign-dashed-input textarea {
    min-height: 62px;
    border-style: dashed;
    text-align: center;
    color: #667085;
}
.campaign-notes {
    margin-top: 18px;
    border: 1px dashed #dedee3;
    border-radius: 10px;
    background: #fff;
}
.campaign-notes summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: #667085;
    cursor: pointer;
}
.campaign-notes textarea {
    border: 0;
    border-top: 1px solid #eeeef2;
    border-radius: 0 0 10px 10px;
}
.campaign-platform-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 18px;
}
.campaign-platform-row label {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #dedee3;
    border-radius: 10px;
    color: #111827;
    background: #fff;
}
.campaign-platform-row input {
    width: 18px;
    min-height: 18px;
    accent-color: #7c3aed;
}
.campaign-live-summary {
    position: sticky;
    top: 78px;
    padding: 16px;
}
.campaign-live-summary > span {
    display: block;
    margin: 0 0 14px;
    color: #52525b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.campaign-summary-preview {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #fff;
}
.campaign-summary-preview img,
.campaign-summary-preview div {
    width: 100%;
    height: 162px;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: rgba(255,255,255,.72);
    background: radial-gradient(circle at 76% 18%, #2065a8 0, transparent 30%), linear-gradient(135deg, #7429df, #192363);
}
.campaign-summary-preview .side-icon {
    width: 38px;
    height: 38px;
}
.campaign-summary-preview strong,
.campaign-summary-preview small {
    display: block;
    padding: 0 14px;
}
.campaign-summary-preview strong {
    padding-top: 14px;
    color: #111827;
    font-size: 14px;
}
.campaign-summary-preview small {
    padding-bottom: 14px;
    color: #667085;
    font-size: 11px;
    font-weight: 850;
}
.campaign-live-summary .summary-line {
    min-height: 38px;
}
.summary-finish-count {
    display: block;
    margin: 22px 0 14px;
    color: #b45309;
    text-align: center;
    font-size: 13px;
}
.campaign-live-summary .button {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}
body:has(.app-shell) .campaign-live-summary .button.primary,
body:has(.app-shell) .campaign-form-footer .button.primary {
    background: #7c3aed;
    box-shadow: 0 14px 28px rgba(124,58,237,.18);
}
.campaign-live-summary p,
.campaign-live-summary small {
    display: block;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}
.campaign-form-footer {
    position: static;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: 16px 0 0;
    background: linear-gradient(180deg, rgba(250,250,250,0), #fafafa 42%);
}
.campaign-form-footer .button.ghost {
    min-width: 104px;
    justify-content: center;
}
.campaign-form-footer .button.primary {
    min-width: 210px;
    justify-content: center;
}
.campaign-form-footer span {
    flex: 1;
    color: #52525b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body:has(.app-shell) .source-link-actions button,
body:has(.app-shell) .campaign-add-requirement,
body:has(.app-shell) .quick-add-row button {
    color: #111827;
    background: #fff;
    box-shadow: none;
}
body:has(.app-shell) .campaign-live-summary .button.ghost {
    color: #111827;
    background: #fff;
    border-color: #dedee3;
    box-shadow: none;
}
body:has(.app-shell) .source-link-actions button,
body:has(.app-shell) .campaign-add-requirement,
body:has(.app-shell) .quick-add-row button {
    color: #111827;
    background: #fff;
    box-shadow: none;
}
body:has(.app-shell) .source-mode-tabs button.is-active {
    color: #7c3aed;
    background: #fff;
}
.activity-days {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #98a2b3;
    font-size: 11px;
}
.wallet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
    gap: 16px;
    margin-bottom: 16px;
}
.amount-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}
.amount-grid button {
    min-height: 42px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    color: #111827;
    background: #f8fafc;
    box-shadow: none;
}
.amount-grid button.is-active,
.amount-grid button:hover {
    border-color: #2563eb;
    background: #eef6ff;
}
.fee-breakdown {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #f8fafc;
}
.fee-breakdown.compact {
    margin-top: 16px;
}
.fee-breakdown div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fee-breakdown span {
    color: #667085;
    font-size: 13px;
}
.fee-breakdown strong {
    color: #111827;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}
.profile-hero,
.settings-head {
    width: min(100%, 1004px);
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 8px auto 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e5e7eb;
}
.settings-head {
    display: block;
    max-width: 944px;
    margin-top: 28px;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15,23,42,.08);
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}
.profile-hero h1,
.settings-head h1 {
    margin: 0;
    color: #111827;
    font-size: 38px;
    line-height: 1.05;
}
.profile-hero p,
.settings-head p,
.profile-card p {
    margin: 8px 0 0;
    color: #667085;
}
.profile-title-block p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.profile-title-block > em {
    width: max-content;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 12px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}
.profile-hero-actions {
    display: grid;
    justify-items: end;
    gap: 10px;
    margin-left: auto;
}
.profile-hero-actions .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.profile-refresh-line {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #667085;
    font-size: 13px;
}
.profile-refresh-line a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111827;
    font-weight: 750;
}
.profile-refresh-line .side-icon {
    width: 16px;
    height: 16px;
}
.profile-stat-strip {
    width: min(100%, 1004px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    margin: 0 auto 34px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}
.profile-stat-strip article {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 18px 22px;
    border-right: 1px solid #e5e7eb;
}
.profile-stat-strip article:last-child {
    border-right: 0;
}
.profile-stat-strip strong {
    min-height: 24px;
    color: #111827;
    font-size: 28px;
}
.profile-stat-strip strong.money-value {
    color: #059669;
}
.profile-stat-strip span {
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}
.profile-layout {
    width: min(100%, 1004px);
    display: grid;
    grid-template-columns: 676px 300px;
    gap: 28px;
    margin: 0 auto;
}
.profile-main-column,
.profile-side-column,
.settings-stack {
    display: grid;
    gap: 34px;
    align-content: start;
}
.profile-card,
.setting-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}
.profile-card-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid #eef1f5;
}
.profile-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
}
.profile-card-head a,
.profile-card-head strong {
    color: #6d28d9;
    font-size: 13px;
    font-weight: 800;
}
.profile-form {
    display: block;
}
.profile-row,
.setting-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef1f5;
}
.profile-row:last-child,
.setting-row:last-child {
    border-bottom: 0;
}
.profile-row span,
.setting-row span {
    color: #111827;
    font-size: 14px;
    font-weight: 850;
}
.profile-row em,
.setting-row em {
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}
.profile-row input,
.setting-row input {
    min-height: 42px;
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    text-align: right;
}
body:has(.app-shell) .profile-row input {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-weight: 750;
}
.profile-row input:focus {
    border-color: #d7dee8;
    background: #fff;
}
.profile-row button,
.profile-row a,
.setting-row button,
.setting-row a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
    font-weight: 750;
}
.profile-row.static {
    grid-template-columns: minmax(150px, 1fr) minmax(0, 1.2fr) auto;
}
.profile-row.static strong,
.setting-row strong {
    color: #111827;
    text-align: right;
}
.profile-row.static small,
.setting-row small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
}
.trust-panel {
    min-height: 78px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 10px;
}
.trust-panel > span,
.metric-row > .side-icon,
.metric-row > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #6b7280;
    background: #f4f4f5;
    font-style: normal;
}
.trust-panel > span {
    color: #047857;
    background: #dcfce7;
}
.trust-panel .side-icon {
    width: 20px;
    height: 20px;
}
.trust-panel strong,
.metric-row span {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
}
.trust-panel small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}
.trust-panel b {
    display: grid;
    justify-items: end;
    color: #111827;
    font-size: 22px;
}
.trust-progress {
    height: 5px;
    overflow: hidden;
    margin: 0 20px 18px;
    border-radius: 999px;
    background: #eef1f5;
}
.trust-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ede9fe;
}
.top-campaign-card .empty-line {
    min-height: 52px;
    display: grid;
    place-items: center;
    color: #667085;
    border-top: 1px solid #eef1f5;
}
.metric-row {
    min-height: 64px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-top: 1px solid #eef1f5;
}
.metric-row strong {
    color: #111827;
    font-size: 16px;
}
.metric-row .side-icon {
    width: 20px;
    height: 20px;
}
.completion-bar {
    height: 8px;
    overflow: hidden;
    margin: 10px 20px 0;
    border-radius: 999px;
    background: #eef1f5;
}
.completion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
    color: #111827;
    font-size: 13px;
    font-weight: 850;
}
.completion-summary b {
    color: #667085;
    font-size: 12px;
}
.completion-bar span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #7c3aed;
}
.profile-card > p {
    padding: 0 20px 18px;
    font-size: 13px;
}
.account-shortcuts a {
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef1f5;
    color: #111827;
}
.account-shortcuts a:last-child {
    border-bottom: 0;
}
.account-shortcuts > a > .side-icon:first-child {
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 10px;
    color: #667085;
    background: #f2f4f7;
}
.account-shortcuts strong {
    min-width: 0;
    font-size: 14px;
}
.account-shortcuts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}
.badge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 14px;
}
.badge-grid span {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 6px;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    color: #98a2b3;
    background: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 750;
}
.badge-grid span i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #d1d5db;
    background: #f4f4f5;
}
.badge-grid span i .side-icon {
    width: 17px;
    height: 17px;
}
.badge-grid span.is-earned {
    border-color: #bbf7d0;
    color: #047857;
    background: #ecfdf5;
}
.badge-grid span.is-earned i {
    color: #22c55e;
    background: #bbf7d0;
}
.settings-layout {
    width: min(100%, 944px);
    display: grid;
    grid-template-columns: 172px 728px;
    gap: 44px;
    margin: 0 auto;
}
.settings-tabs {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 6px;
    align-self: start;
}
.settings-tabs a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 750;
}
.settings-tabs a.is-active {
    border-left-color: #7c3aed;
    color: #111827;
    background: #f4f2f8;
}
.settings-tabs a.is-danger {
    color: #dc2626;
}
.setting-section {
    scroll-margin-top: 100px;
}
.setting-section h2 {
    margin: 0 0 12px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.notification-section > p {
    margin: -4px 0 14px;
    color: #667085;
    font-size: 13px;
}
.setting-row {
    grid-template-columns: minmax(240px, 1.35fr) minmax(0, 1fr) auto;
}
.setting-row:has(input + strong) {
    grid-template-columns: minmax(240px, 1.1fr) minmax(0, .9fr) auto auto;
}
.setting-row.security-row {
    grid-template-columns: minmax(190px, 1.2fr) minmax(0, .9fr) minmax(0, .9fr) auto;
}
.setting-row input + input {
    margin-left: 8px;
}
.danger-zone .setting-card,
.danger-zone .setting-row {
    border-color: #fecaca;
}
.danger-zone .danger-action {
    border-color: #ef4444;
    color: #ef4444;
}
.notification-card {
    margin-bottom: 28px;
}
.notification-head,
.notification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef1f5;
}
.notification-head {
    min-height: 42px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.notification-row {
    min-height: 73px;
}
.notification-row:last-child,
.chat-group:last-child,
.social-card > :last-child {
    border-bottom: 0;
}
.notification-row strong,
.chat-group strong {
    display: block;
    color: #111827;
    font-size: 14px;
}
.notification-row small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}
.setting-toggle {
    width: 44px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #f4f4f5;
    box-shadow: none;
}
.setting-toggle span {
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.14);
}
.setting-toggle.is-on {
    justify-content: flex-end;
    border-color: #7c3aed;
    background: #7c3aed;
}
.chat-group {
    padding: 14px 20px;
    border-bottom: 1px solid #eef1f5;
}
.chat-group > div,
.chat-group label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 16px;
}
.chat-group > div {
    margin-bottom: 8px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.chat-group label {
    min-height: 36px;
    color: #111827;
    font-size: 13px;
}
.settings-save-row {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
}
.settings-save-row button,
.social-form button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #111827;
    border-radius: 8px;
    color: #fff;
    background: #111827;
    box-shadow: none;
    font-weight: 800;
}
.social-card .empty-line {
    padding: 22px 20px;
    border-bottom: 1px solid #eef1f5;
    color: #667085;
    text-align: center;
}
.social-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 12px;
    padding: 16px 20px;
}
.social-form label {
    display: grid;
    gap: 6px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}
.social-form input,
.social-form select {
    width: 100%;
}
body:has(.app-shell).theme-dark {
    background: #09090b;
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .app-sidebar,
body:has(.app-shell).theme-dark .app-topbar,
body:has(.app-shell).theme-dark .builder-card,
body:has(.app-shell).theme-dark .topbar-popover,
body:has(.app-shell).theme-dark .cfc-modal-card,
body:has(.app-shell).theme-dark .leaderboard-row-card,
body:has(.app-shell).theme-dark .creator-empty-campaign,
body:has(.app-shell).theme-dark .summary-panel,
body:has(.app-shell).theme-dark .stat-row article,
body:has(.app-shell).theme-dark .dash-card,
body:has(.app-shell).theme-dark .setup-banner,
body:has(.app-shell).theme-dark .profile-stat-strip,
body:has(.app-shell).theme-dark .profile-card,
body:has(.app-shell).theme-dark .setting-card,
body:has(.app-shell).theme-dark .message-card,
body:has(.app-shell).theme-dark .setting-toggle span,
body:has(.app-shell).theme-dark .table-wrap.creator-table {
    border-color: #27272a;
    background: #18181b;
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .app-side-brand strong,
body:has(.app-shell).theme-dark .app-main-head h1,
body:has(.app-shell).theme-dark .messages-page-head h1,
body:has(.app-shell).theme-dark .message-card h3,
body:has(.app-shell).theme-dark .profile-hero h1,
body:has(.app-shell).theme-dark .settings-head h1,
body:has(.app-shell).theme-dark .profile-card-head h2,
body:has(.app-shell).theme-dark .profile-row span,
body:has(.app-shell).theme-dark .setting-row span,
body:has(.app-shell).theme-dark .profile-row.static strong,
body:has(.app-shell).theme-dark .setting-row strong,
body:has(.app-shell).theme-dark .notification-row strong,
body:has(.app-shell).theme-dark .chat-group strong,
body:has(.app-shell).theme-dark .chat-group label,
body:has(.app-shell).theme-dark .social-form label,
body:has(.app-shell).theme-dark .profile-stat-strip strong,
body:has(.app-shell).theme-dark .trust-panel strong,
body:has(.app-shell).theme-dark .trust-panel b,
body:has(.app-shell).theme-dark .metric-row span,
body:has(.app-shell).theme-dark .metric-row strong,
body:has(.app-shell).theme-dark .completion-summary,
body:has(.app-shell).theme-dark .account-shortcuts strong,
body:has(.app-shell).theme-dark .builder-card h2,
body:has(.app-shell).theme-dark .summary-panel h2,
body:has(.app-shell).theme-dark .dash-card h2,
body:has(.app-shell).theme-dark .creator-empty-campaign h2,
body:has(.app-shell).theme-dark .chat-list strong,
body:has(.app-shell).theme-dark .quick-help a,
body:has(.app-shell).theme-dark .contact-card strong,
body:has(.app-shell).theme-dark .account-popover a,
body:has(.app-shell).theme-dark .popover-head strong,
body:has(.app-shell).theme-dark .account-menu-head strong,
body:has(.app-shell).theme-dark .cfc-modal-head h2,
body:has(.app-shell).theme-dark .leaderboard-person strong,
body:has(.app-shell).theme-dark .leaderboard-rank-stack b,
body:has(.app-shell).theme-dark .dash-card strong,
body:has(.app-shell).theme-dark .setup-banner h2,
body:has(.app-shell).theme-dark .summary-line strong,
body:has(.app-shell).theme-dark .creator-table table,
body:has(.app-shell).theme-dark .stat-row article strong {
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .app-main-head p,
body:has(.app-shell).theme-dark .messages-page-head p,
body:has(.app-shell).theme-dark .message-card p,
body:has(.app-shell).theme-dark .message-card small,
body:has(.app-shell).theme-dark .message-card time,
body:has(.app-shell).theme-dark .profile-hero p,
body:has(.app-shell).theme-dark .settings-head p,
body:has(.app-shell).theme-dark .profile-card p,
body:has(.app-shell).theme-dark .profile-row.static small,
body:has(.app-shell).theme-dark .setting-row small,
body:has(.app-shell).theme-dark .notification-section > p,
body:has(.app-shell).theme-dark .notification-head,
body:has(.app-shell).theme-dark .notification-row small,
body:has(.app-shell).theme-dark .chat-group > div,
body:has(.app-shell).theme-dark .social-card .empty-line,
body:has(.app-shell).theme-dark .profile-stat-strip span,
body:has(.app-shell).theme-dark .trust-panel small,
body:has(.app-shell).theme-dark .completion-summary b,
body:has(.app-shell).theme-dark .account-shortcuts span,
body:has(.app-shell).theme-dark .dash-card p,
body:has(.app-shell).theme-dark .dash-card small,
body:has(.app-shell).theme-dark .setup-banner p,
body:has(.app-shell).theme-dark .creator-empty-campaign p,
body:has(.app-shell).theme-dark .chat-list p,
body:has(.app-shell).theme-dark .ranking-rules ol,
body:has(.app-shell).theme-dark .ranking-rules li p,
body:has(.app-shell).theme-dark .leaderboard-person small,
body:has(.app-shell).theme-dark .leaderboard-value small,
body:has(.app-shell).theme-dark .notification-state,
body:has(.app-shell).theme-dark .account-menu-head small,
body:has(.app-shell).theme-dark .cfc-modal-head p,
body:has(.app-shell).theme-dark .summary-line span,
body:has(.app-shell).theme-dark .field-hint,
body:has(.app-shell).theme-dark .creator-table td span,
body:has(.app-shell).theme-dark .empty-state p,
body:has(.app-shell).theme-dark .faq-card p {
    color: #a1a1aa;
}
body:has(.app-shell).theme-dark .empty-state h2,
body:has(.app-shell).theme-dark .faq-card summary {
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark input,
body:has(.app-shell).theme-dark textarea,
body:has(.app-shell).theme-dark select,
body:has(.app-shell).theme-dark .top-link,
body:has(.app-shell).theme-dark .theme-toggle,
body:has(.app-shell).theme-dark .cfc-modal-close,
body:has(.app-shell).theme-dark .leaderboard-select,
body:has(.app-shell).theme-dark .leaderboard-pill-rail a,
body:has(.app-shell).theme-dark .team-access-card,
body:has(.app-shell).theme-dark .panel-tabs a,
body:has(.app-shell).theme-dark .range-tabs a,
body:has(.app-shell).theme-dark .choice-card,
body:has(.app-shell).theme-dark .setup-next,
body:has(.app-shell).theme-dark .guardrail-note,
body:has(.app-shell).theme-dark .targeting-cards article,
body:has(.app-shell).theme-dark .launch-checklist,
body:has(.app-shell).theme-dark .amount-grid button,
body:has(.app-shell).theme-dark .fee-breakdown,
body:has(.app-shell).theme-dark .chat-list article,
body:has(.app-shell).theme-dark .profile-row button,
body:has(.app-shell).theme-dark .profile-row a,
body:has(.app-shell).theme-dark .setting-row button,
body:has(.app-shell).theme-dark .setting-row a,
body:has(.app-shell).theme-dark .badge-grid span,
body:has(.app-shell).theme-dark .setting-toggle,
body:has(.app-shell).theme-dark .faq-card details {
    border-color: #3f3f46;
    background: #27272a;
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .fee-breakdown strong {
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .fee-breakdown span {
    color: #a1a1aa;
}
body:has(.app-shell).theme-dark .account-popover .logout-link,
body:has(.app-shell).theme-dark .danger-zone .danger-action {
    color: #f87171;
}
body:has(.app-shell).theme-dark .settings-tabs a.is-active,
body:has(.app-shell).theme-dark .account-shortcuts > a > .side-icon:first-child,
body:has(.app-shell).theme-dark .completion-bar {
    background: #27272a;
}
body:has(.app-shell).theme-dark .setting-toggle.is-on {
    border-color: #8b5cf6;
    background: #7c3aed;
}
body:has(.app-shell).theme-dark .badge-grid span.is-earned {
    border-color: #14532d;
    color: #86efac;
    background: #052e16;
}
body:has(.app-shell).theme-dark .team-invite-modal .cfc-modal-backdrop {
    background: rgba(9, 9, 11, .72);
}
body:has(.app-shell).theme-dark .team-invite-drawer .cfc-modal-actions,
body:has(.app-shell).theme-dark .team-invite-drawer .cfc-modal-close,
body:has(.app-shell).theme-dark .team-invite-drawer .team-field input {
    border-color: #3f3f46;
    background: #18181b;
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .team-access-card:has(input:checked),
body:has(.app-shell).theme-dark .team-access-card.is-selected {
    border-color: #8b5cf6;
    background: #251b38;
}
body:has(.app-shell).theme-dark .app-sidebar {
    background: linear-gradient(180deg, #0c0913 0%, #171124 52%, #181226 100%);
}
body:has(.app-shell).theme-dark .side-search input,
body:has(.app-shell).theme-dark .wallet-box {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.075);
    color: rgba(255,255,255,.82);
}
body:has(.app-shell).theme-dark .panel-tabs a.is-active,
body:has(.app-shell).theme-dark .range-tabs a.is-active {
    border-color: #f4f4f5;
    background: #18181b;
}
body:has(.app-shell).theme-dark .account-popover a:hover {
    background: #27272a;
}
body:has(.app-shell).theme-dark .popover-head,
body:has(.app-shell).theme-dark .account-menu-head,
body:has(.app-shell).theme-dark .popover-actions,
body:has(.app-shell).theme-dark .profile-hero,
body:has(.app-shell).theme-dark .settings-head,
body:has(.app-shell).theme-dark .profile-card-head,
body:has(.app-shell).theme-dark .profile-row,
body:has(.app-shell).theme-dark .setting-row,
body:has(.app-shell).theme-dark .notification-head,
body:has(.app-shell).theme-dark .notification-row,
body:has(.app-shell).theme-dark .chat-group,
body:has(.app-shell).theme-dark .social-card .empty-line,
body:has(.app-shell).theme-dark .profile-stat-strip article,
body:has(.app-shell).theme-dark .metric-row,
body:has(.app-shell).theme-dark .account-shortcuts a,
body:has(.app-shell).theme-dark .popover-actions a + a {
    border-color: #3f3f46;
}
body:has(.app-shell).theme-dark .side-group a:hover,
body:has(.app-shell).theme-dark .side-group a.is-active,
body:has(.app-shell).theme-dark .mobile-app-nav a.is-active {
    color: #f4f4f5;
    background: #27272a;
}
body:has(.app-shell).theme-dark .clipper-setup-banner {
    border-color: #27272a;
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, .2), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .15), transparent 28%),
        #18181b;
}
body:has(.app-shell).theme-dark .setup-list a,
body:has(.app-shell).theme-dark .clipper-campaign-list a,
body:has(.app-shell).theme-dark .clipper-top-clip-list a {
    border-color: #27272a;
    background: #202024;
}
body:has(.app-shell).theme-dark .setup-list a:hover,
body:has(.app-shell).theme-dark .clipper-campaign-list a:hover,
body:has(.app-shell).theme-dark .clipper-top-clip-list a:hover {
    border-color: #3f3f46;
    background: #27272a;
}
body:has(.app-shell).theme-dark .setup-list a em,
body:has(.app-shell).theme-dark .setup-list a:hover,
body:has(.app-shell).theme-dark .clipper-campaign-list strong,
body:has(.app-shell).theme-dark .clipper-top-clip-list strong {
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .clipper-campaign-list small,
body:has(.app-shell).theme-dark .clipper-top-clip-list small,
body:has(.app-shell).theme-dark .clipper-streak-note {
    color: #a1a1aa;
}
body:has(.app-shell).theme-dark .clipper-balance-chart,
body:has(.app-shell).theme-dark .clipper-streak-note {
    border-color: #27272a;
}
body:has(.app-shell).theme-dark .clipper-analytics-metrics article,
body:has(.app-shell).theme-dark .analytics-card,
body:has(.app-shell).theme-dark .analytics-more-card {
    border-color: #27272a;
    background: #18181b;
}
body:has(.app-shell).theme-dark .clipper-analytics-metrics strong,
body:has(.app-shell).theme-dark .analytics-more-card h2,
body:has(.app-shell).theme-dark .clipper-compare-list strong,
body:has(.app-shell).theme-dark .clipper-compare-list b,
body:has(.app-shell).theme-dark .clipper-platform-list span,
body:has(.app-shell).theme-dark .clipper-platform-list strong {
    color: #f4f4f5;
}
body:has(.app-shell).theme-dark .clipper-analytics-metrics span,
body:has(.app-shell).theme-dark .clipper-analytics-metrics small,
body:has(.app-shell).theme-dark .analytics-card .dash-card-head p,
body:has(.app-shell).theme-dark .analytics-empty-copy,
body:has(.app-shell).theme-dark .analytics-empty-line,
body:has(.app-shell).theme-dark .analytics-empty-line small,
body:has(.app-shell).theme-dark .analytics-more-card p,
body:has(.app-shell).theme-dark .clipper-compare-list small,
body:has(.app-shell).theme-dark .clipper-platform-list small,
body:has(.app-shell).theme-dark .clipper-analytics-chart b {
    color: #a1a1aa;
}
body:has(.app-shell).theme-dark .metric-toggle {
    border-color: #3f3f46;
    background: #27272a;
}
body:has(.app-shell).theme-dark .metric-toggle a {
    color: #a1a1aa;
}
body:has(.app-shell).theme-dark .metric-toggle a.is-active {
    color: #f4f4f5;
    background: #18181b;
}
body:has(.app-shell).theme-dark .clipper-compare-list article,
body:has(.app-shell).theme-dark .clipper-platform-list article {
    border-color: #27272a;
    background: #202024;
}
body:has(.app-shell).theme-dark .clipper-analytics-chart {
    border-color: #27272a;
}

.flash {
    max-width: 900px;
    margin: 20px auto 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(34,197,94,.16);
    color: #b8ffd0;
}
.flash.error { background: rgba(239,68,68,.16); color: #ffd1d1; }
pre {
    overflow: auto;
    padding: 16px;
    border-radius: 14px;
    background: rgba(0,0,0,.35);
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    padding: 42px 32px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.site-footer p { max-width: 560px; margin-bottom: 0; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

[dir="rtl"] .site-header,
[dir="rtl"] .section-head,
[dir="rtl"] .site-footer {
    direction: rtl;
}

[dir="rtl"] .hero,
[dir="rtl"] .detail-layout {
    direction: rtl;
}

@media (max-width: 900px) {
    .site-header { align-items: flex-start; flex-direction: column; height: auto; padding: 16px 20px; }
    .main-nav { width: 100%; gap: 14px; flex-wrap: wrap; }
    .hero, .detail-layout { grid-template-columns: 1fr; }
    .hero { min-height: auto; padding-top: 58px; }
    .landing-hero {
        min-height: 760px;
        align-items: center;
        padding: 84px 20px 150px;
        background-position: 62% center;
    }
    .landing-hero h1 {
        font-size: clamp(44px, 14vw, 66px);
    }
    .hero-cost {
        left: 20px;
        right: 20px;
        bottom: 26px;
        width: auto;
    }
    .clip-proof-rail,
    .result-grid,
    .why-grid,
    .pricing-grid,
    .case-section,
    .case-stats {
        grid-template-columns: 1fr;
    }
    .clip-proof-rail {
        margin-top: 0;
        padding: 24px 20px 42px;
    }
    .clip-proof-card { min-height: 220px; }
    .trusted-strip,
    .market-strip,
    .section {
        padding-left: 20px;
        padding-right: 20px;
    }
    .result-grid strong,
    .pricing-grid article > strong {
        font-size: 38px;
    }
    .case-copy { padding: 22px; }
    .case-section > img { min-height: 340px; }
    .benchmark-bars div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .benchmark-bars strong { text-align: left; }
    .steps, .campaign-grid { grid-template-columns: 1fr; }
    .section-head, .site-footer { align-items: flex-start; flex-direction: column; }
    .search-form { flex-direction: column; }
    .app-shell, .wizard-grid, .form-grid, .choice-grid, .choice-grid.platforms, .stat-row { grid-template-columns: 1fr; }
    .setup-banner,
    .dashboard-grid,
    .wallet-grid,
    .support-layout,
    .leaderboard-layout,
    .stat-row.compact {
        grid-template-columns: 1fr;
    }
    .support-side,
    .ranking-rules {
        position: static;
    }
    .leaderboard-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .creator-empty-campaign {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }
    .mobile-dashboard-hero {
        display: grid;
        gap: 10px;
        margin-bottom: 16px;
        padding: 18px;
        border: 1px solid #dedee3;
        border-radius: 12px;
        color: #111827;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15,23,42,.035), 0 14px 34px rgba(15,23,42,.035);
    }
    .mobile-dashboard-hero span {
        color: #667085;
        font-size: 12px;
        font-weight: 850;
    }
    .mobile-dashboard-hero strong {
        font-size: 42px;
        line-height: 1;
    }
    .mobile-dashboard-hero small {
        color: #667085;
    }
    .mobile-dashboard-hero div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .setup-banner {
        padding: 16px;
        gap: 14px;
    }
    .setup-banner h2 {
        font-size: 18px;
        line-height: 1.15;
    }
    .setup-next {
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 0;
    }
    .setup-next .button {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        margin-top: 12px;
    }
    .setup-list {
        display: grid;
        grid-template-columns: 1fr;
    }
    .setup-list span i {
        display: none;
    }
    .setup-trust-note {
        align-items: flex-start;
        padding: 8px 4px 0;
    }
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        min-height: 0;
        margin-bottom: 18px;
    }
    .dashboard-welcome h1 {
        font-size: 31px;
    }
    .analytics-shell {
        width: 100%;
        padding: 2px 0 32px;
    }
    .analytics-mercury {
        min-height: 0;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }
    .analytics-mercury h1 {
        font-size: 31px;
    }
    .analytics-range {
        width: 100%;
        min-width: 0;
    }
    .analytics-empty-state {
        min-height: 330px;
        margin-bottom: 24px;
        padding: 42px 14px;
    }
    .analytics-target {
        margin-bottom: 24px;
    }
    .analytics-empty-state h2 {
        font-size: 24px;
    }
    .analytics-empty-state p {
        font-size: 15px;
    }
    .analytics-info-grid {
        grid-template-columns: 1fr;
    }
    .analytics-info-grid article {
        min-height: 0;
        padding: 20px;
    }
    .clipper-analytics-shell {
        padding: 2px 0 32px;
    }
    .clipper-analytics-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .clipper-analytics-metrics article {
        min-height: 0;
        padding: 16px;
    }
    .analytics-card {
        padding: 16px;
    }
    .analytics-card .dash-card-head {
        align-items: stretch;
        flex-direction: column;
    }
    .metric-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clipper-analytics-chart {
        height: 174px;
        gap: 8px;
        overflow: hidden;
    }
    .clipper-analytics-chart span {
        min-width: 0;
    }
    .clipper-analytics-chart b {
        display: none;
    }
    .clipper-compare-list article,
    .clipper-platform-list article {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .clipper-compare-list strong,
    .clipper-platform-list span {
        white-space: normal;
    }
    .campaign-create-shell {
        width: 100%;
        padding: 2px 0 32px;
    }
    .campaign-breadcrumb {
        display: none;
    }
    .campaign-back {
        margin-bottom: 14px;
    }
    .campaign-create-head {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .campaign-create-head h1 {
        font-size: 31px;
    }
    .campaign-create-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .campaign-stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }
    .campaign-stepper i {
        display: none;
    }
    .campaign-stepper button {
        min-height: 58px;
        flex-direction: column;
        gap: 5px;
        padding: 7px 4px;
        font-size: 11px;
        text-align: center;
    }
    .campaign-builder-card {
        padding: 18px;
        border-radius: 12px;
    }
    .campaign-type-grid,
    .campaign-platform-row {
        grid-template-columns: 1fr;
    }
    .campaign-upload-box {
        min-height: 160px;
    }
    .source-mode-tabs,
    .form-grid,
    .targeting-cards {
        grid-template-columns: 1fr;
    }
    .quick-add-row {
        align-items: flex-start;
    }
    .campaign-live-summary {
        position: static;
        order: 2;
    }
    .campaign-form-footer {
        position: static;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
        padding-top: 0;
        background: transparent;
    }
    .campaign-form-footer .button {
        width: 100%;
        justify-content: center;
    }
    .head-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .head-actions .button,
    .fund-form .button.primary {
        width: 100%;
        justify-content: center;
    }
    .dash-card {
        min-height: auto;
        padding: 16px;
    }
    .dash-card strong {
        font-size: 30px;
    }
    .dash-card-head {
        align-items: flex-start;
    }
    .clipper-dashboard-welcome .head-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
    .clipper-dashboard-welcome .head-actions .button {
        min-width: 0;
    }
    .clipper-campaign-list a,
    .clipper-top-clip-list a {
        align-items: flex-start;
        flex-direction: column;
    }
    .clipper-campaign-list strong,
    .clipper-campaign-list small,
    .clipper-top-clip-list strong,
    .clipper-top-clip-list small {
        white-space: normal;
    }
    .clipper-balance-chart span {
        min-width: 0;
    }
    .amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .panel-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .panel-tabs a {
        flex: 0 0 auto;
    }
    .range-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .range-tabs a {
        min-width: 0;
        padding: 7px 8px;
    }
    .app-shell {
        min-height: 100svh;
        display: block;
        padding: 58px 0 18px;
    }
    .app-sidebar { display: none; }
    .app-mobile-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        min-height: calc(56px + env(safe-area-inset-top));
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: env(safe-area-inset-top) 14px 0;
        border-bottom: 1px solid #e7eaf0;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(16px);
    }
    .app-mobile-top .app-side-brand strong { color: #111827; }
    .mobile-top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .icon-button {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 1px solid #d7dee8;
        border-radius: 10px;
        color: #111827;
        background: #fff;
        box-shadow: none;
    }
    .app-mobile-top .icon-button .side-icon {
        width: 18px;
        height: 18px;
    }
    .notification-popover {
        right: -84px;
    }
    .account-popover {
        right: 0;
    }
    .app-content { min-width: 0; }
    .app-topbar {
        display: none;
    }
    .app-search { width: 100%; }
    .app-top-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .top-link,
    .theme-toggle {
        min-width: 0;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }
    .app-main {
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 18px 14px 28px;
    }
    .summary-panel { position: static; min-height: auto; }
    .wizard-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wizard-steps span {
        min-height: 38px;
        border-right: 0;
        font-size: 12px;
    }
    .app-main-head {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .app-main-head h1 { font-size: 34px; }
    .profile-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 6px;
        padding-bottom: 18px;
    }
    .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }
    .profile-hero h1,
    .settings-head h1 {
        font-size: 34px;
    }
    .profile-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
    }
    .profile-stat-strip,
    .profile-layout,
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .profile-stat-strip article {
        border-right: 0;
        border-bottom: 1px solid #eef1f5;
    }
    .profile-stat-strip article:last-child {
        border-bottom: 0;
    }
    .profile-row,
    .profile-row.static,
    .setting-row,
    .setting-row.security-row {
        min-height: auto;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
    }
    .profile-row input,
    .setting-row input {
        text-align: left;
    }
    .profile-row button,
    .profile-row a,
    .setting-row button,
    .setting-row a {
        width: 100%;
    }
    .settings-layout {
        gap: 18px;
        width: min(100%, calc(100vw - 28px));
        max-width: calc(100vw - 28px);
        box-sizing: border-box;
    }
    .settings-tabs,
    .settings-stack,
    .setting-section,
    .setting-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .settings-tabs {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .settings-tabs a {
        min-width: 0;
        padding: 0 10px;
    }
    .builder-card,
    .summary-panel,
    .stat-row article {
        padding: 16px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
    }
    .targeting-cards { grid-template-columns: 1fr; }
    .segmented-tabs { width: 100%; }
    .table-wrap { max-width: 100%; overflow-x: auto; }
    .creator-table table { min-width: 760px; }
    .mobile-app-nav {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        min-height: 62px;
        margin: 20px 14px 0;
        padding: 6px 8px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 999px;
        background: rgba(17,24,39,.96);
        backdrop-filter: blur(18px);
        box-shadow: 0 18px 50px rgba(15,23,42,.22);
    }
    body:has(.app-shell).theme-dark .mobile-app-nav {
        border-color: rgba(255,255,255,.1);
        background: rgba(17,24,39,.96);
    }
    .mobile-app-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: rgba(255,255,255,.58);
        font-size: 10px;
        font-weight: 850;
    }
    .mobile-app-nav a.is-active {
        color: #fff;
        background: rgba(255,255,255,.1);
    }
    .mobile-app-nav .mobile-create {
        transform: translateY(-13px);
        min-height: 52px;
        color: #fff;
        background: linear-gradient(135deg, #2563eb, #14b8a6);
        box-shadow: 0 10px 24px rgba(37,99,235,.28);
    }
body:has(.app-shell) h1 { font-size: 34px; }
    h1 { font-size: 46px; }
}

body:has(.app-shell) .panel-page-head .button.primary,
body:has(.app-shell) .marketplace-feature .button.primary,
body:has(.app-shell) .wallet-balance-main .button.primary,
body:has(.app-shell) .funding-explainer .button.primary,
body:has(.app-shell) .transaction-empty .button.primary,
body:has(.app-shell) .leaderboard-cta-card .button.primary,
body:has(.app-shell) .review-action-form .button.primary {
    color: #fff;
    border-color: #7c3aed;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 14px 28px rgba(124,58,237,.22);
}
body:has(.app-shell) .marketplace-filter-row button,
body:has(.app-shell) .marketplace-filter-row select,
body:has(.app-shell) .amount-grid button {
    color: #667085;
    border: 1px solid #e1e4ea;
    background: #fff;
    box-shadow: none;
}
body:has(.app-shell) .marketplace-filter-row button:hover,
body:has(.app-shell) .marketplace-filter-row select:hover,
body:has(.app-shell) .amount-grid button:hover,
body:has(.app-shell) .amount-grid button.is-active {
    color: #7c3aed;
    border-color: #c4b5fd;
    background: #f5f3ff;
}
.marketplace-feature h2 {
    font-size: 32px;
    line-height: 1.08;
}
.marketplace-wins h2 {
    font-size: 26px;
    line-height: 1.15;
}
.support-hero > span,
.support-hero > h2,
.support-hero > p {
    grid-column: 1;
}
.support-hero > span {
    grid-row: 1;
}
.support-hero > h2 {
    grid-row: 2;
}
.support-hero > p {
    grid-row: 3;
}
.support-hero > .button {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    min-width: 300px;
}

@media (max-width: 900px) {
    .clipper-public-page {
        padding: 24px 14px 54px;
    }
    .clipper-back {
        margin-bottom: 22px;
    }
    .clipper-public-hero {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }
    .clipper-public-avatar {
        width: 72px;
        height: 72px;
        border-radius: 16px;
        font-size: 28px;
    }
    .clipper-public-title h1 {
        font-size: 30px;
    }
    .clipper-public-stats,
    .clipper-public-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .clipper-public-stats article {
        min-height: 76px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }
    .clipper-public-stats article:last-child {
        border-bottom: 0;
    }
    .clipper-portfolio-card > header {
        align-items: flex-start;
        flex-direction: column;
    }
    .clipper-portfolio-card header > div:last-child {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clipper-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px;
    }
    .clipper-portfolio-grid article > a {
        min-height: 220px;
    }
    .profile-badge-card > div {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .cfc-modal {
        align-items: flex-end;
        padding: 14px;
    }
    body:has(.app-shell) .cfc-modal-card {
        width: 100%;
        max-height: calc(100vh - 28px);
        border-radius: 16px 16px 0 0;
        padding: 20px;
    }
    body:has(.app-shell) .cfc-modal-actions {
        flex-direction: column-reverse;
    }
    body:has(.app-shell) .cfc-modal-actions .button {
        width: 100%;
    }
    body:has(.app-shell) .team-invite-modal {
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
    }
    body:has(.app-shell) .team-invite-drawer {
        width: min(100%, 480px);
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        padding: 22px 16px 0;
    }
    body:has(.app-shell) .team-invite-drawer .cfc-modal-head {
        padding-right: 58px;
    }
    body:has(.app-shell) .team-invite-drawer .cfc-modal-actions {
        flex-direction: row;
        padding: 14px 16px 18px;
    }
    body:has(.app-shell) .team-invite-drawer .cfc-modal-actions .button {
        width: auto;
    }
    .marketplace-feature h2 {
        font-size: 26px;
    }
    .support-hero > .button {
        grid-column: 1;
        grid-row: auto;
        min-width: 0;
    }
    body:has(.app-shell) .panel-filter-row,
    body:has(.app-shell) .marketplace-filter-row,
    body:has(.app-shell) .marketplace-feature,
    body:has(.app-shell) .wallet-balance-panel,
    body:has(.app-shell) .wallet-grid,
    body:has(.app-shell) .leaderboard-layout,
    body:has(.app-shell) .team-layout,
    body:has(.app-shell) .support-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .leaderboard-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .leaderboard-select {
        width: 100%;
    }
    body:has(.app-shell) .leaderboard-pill-rail {
        display: flex;
    }
    body:has(.app-shell) .leaderboard-row-card {
        grid-template-columns: 38px 42px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }
    body:has(.app-shell) .leaderboard-avatar {
        width: 42px;
        height: 42px;
    }
    body:has(.app-shell) .leaderboard-value {
        grid-column: 3;
        justify-items: start;
        text-align: left;
    }
    body:has(.app-shell) .panel-campaign-row,
    body:has(.app-shell) .review-submission-card,
    body:has(.app-shell) .review-action-form {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .review-submission-media {
        min-height: 210px;
    }
    body:has(.app-shell) .review-submission-topline {
        flex-direction: column;
        gap: 4px;
    }
    body:has(.app-shell) .review-action-form {
        padding: 12px;
    }
    body:has(.app-shell) .support-ticket-form {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .support-ticket-card header,
    body:has(.app-shell) .support-ticket-card footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .support-ticket-card form {
        justify-content: flex-start;
    }
    body:has(.app-shell) .messages-page-head {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .message-card > a {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    body:has(.app-shell) .message-card em,
    body:has(.app-shell) .message-card time {
        grid-column: 2;
    }
    body:has(.app-shell) .message-state-tabs,
    body:has(.app-shell) .message-source-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    body:has(.app-shell) .marketplace-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .marketplace-detail-hero {
        min-height: 300px;
        border-radius: 16px;
    }
    body:has(.app-shell) .marketplace-detail-overlay {
        padding: 20px;
    }
    body:has(.app-shell) .marketplace-detail-overlay h1 {
        font-size: 30px;
    }
    body:has(.app-shell) .detail-status {
        top: 14px;
        right: 14px;
    }
    body:has(.app-shell) .marketplace-detail-metrics,
    body:has(.app-shell) .marketplace-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .marketplace-detail-metrics article {
        border-right: 0;
        border-bottom: 1px solid #e6e7eb;
    }
    body:has(.app-shell) .marketplace-detail-metrics article:last-child {
        border-bottom: 0;
    }
    body:has(.app-shell) .marketplace-detail-side {
        position: static;
    }
    body:has(.app-shell) .detail-requirements article {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }
    body:has(.app-shell) .detail-requirements em {
        grid-column: 2 / 3;
        grid-row: 2;
        width: max-content;
    }
    body:has(.app-shell) .detail-requirements button {
        grid-column: 3;
        grid-row: 1;
    }
    body:has(.app-shell) .review-metric-grid,
    body:has(.app-shell) .team-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:has(.app-shell) .wallet-balance-main,
    body:has(.app-shell) .wallet-balance-side,
    body:has(.app-shell) .marketplace-feature-copy {
        padding: 22px;
    }
    body:has(.app-shell) .leaderboard-side,
    body:has(.app-shell) .team-roles,
    body:has(.app-shell) .support-side,
    body:has(.app-shell) .ranking-rules {
        position: static;
    }
    body:has(.app-shell) .team-invite-form {
        grid-template-columns: minmax(0, 1fr);
    }
    body:has(.app-shell) .team-invite-form .team-note-field {
        grid-column: auto;
    }
    body:has(.app-shell) .team-org-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    body:has(.app-shell) .team-org-card aside {
        grid-column: 1 / -1;
        justify-items: start;
    }
    body:has(.app-shell) .team-table-head {
        display: none;
    }
    body:has(.app-shell) .team-member-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    body:has(.app-shell) .team-member-row > span,
    body:has(.app-shell) .team-member-row > p,
    body:has(.app-shell) .team-member-row > small,
    body:has(.app-shell) .team-member-row > .side-icon {
        grid-column: 2;
    }
    body:has(.app-shell) .team-pending-list article {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Clipper panel — Lulosa parity
   Tokens and components mirrored from lulosa.com/clipper/dashboard.
   ========================================================================== */

.app-shell.lx-shell {
    --lx-ink: #1d1d26;
    --lx-ink-2: #5e5e6e;
    --lx-ink-3: #878797;
    --lx-line: #dadae2;
    --lx-line-soft: #e6e6ed;
    --lx-border: #e4e4e7;
    --lx-panel: #fff;
    --lx-panel-2: #f1f1f6;
    --lx-canvas: #f8f8f9;
    --lx-accent: #35b7f3;
    --lx-accent-deep: #129ad9;
    --lx-accent-soft: #55c3f6;
    --lx-accent-rgb: 53,183,243;
    --lx-role: #0da2e7;
    --lx-role-fg: #096c9a;
    --lx-role-rgb: 13,162,231;
    --lx-cta-a: #0d72a0;
    --lx-cta-b: #0b648e;
    --lx-earned: #059467;
    --lx-earned-fg: #04865d;
    --lx-pending: #db7706;
    --lx-pending-fg: #b36205;
    --lx-balance-fg: #0d776b;
    --lx-danger: #ef4444;
    --lx-danger-fg: #eb1414;
    --lx-success: #10b77f;
    --lx-success-fg: #0b835b;
    --lx-card-sh: 0 1px 2px rgba(78,78,126,.05), 0 6px 20px -4px rgba(78,78,126,.07);
    --lx-display: "Geist", Inter, ui-sans-serif, system-ui, sans-serif;
    --lx-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    grid-template-columns: 248px minmax(0, 1fr);
    background: var(--lx-canvas);
}

/* ---------- sidebar ---------- */

.app-shell.lx-shell .app-sidebar {
    padding: 0;
    background: linear-gradient(178deg, #130e20, #1c1528 62%, #141221);
    border-right: 1px solid rgba(52, 39, 73, .6);
    box-shadow: none;
    overflow: hidden;
}
.app-shell.lx-shell .app-side-brand {
    min-height: 56px;
    height: 56px;
    margin: 0;
    padding: 0 24px;
    gap: 10px;
}
.app-shell.lx-shell .app-side-brand .side-logo-text {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .04em;
}
.app-shell.lx-shell .side-role-pill {
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.6);
    font-family: var(--lx-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.app-shell.lx-shell .side-cta {
    min-height: 44px;
    margin: 8px 16px 4px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--lx-cta-a), var(--lx-cta-b));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px -6px rgba(var(--lx-role-rgb),.6), inset 0 1px 0 rgba(255,255,255,.22);
}
.app-shell.lx-shell .side-cta .side-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.app-shell.lx-shell .side-search {
    min-height: 44px;
    margin: 4px 16px 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    background: rgba(255,255,255,.05);
}
.app-shell.lx-shell .side-search .side-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: rgba(255,255,255,.5);
}
.app-shell.lx-shell .side-search input {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 13px;
}
.app-shell.lx-shell .side-search input::placeholder { color: rgba(255,255,255,.5); }
.app-shell.lx-shell .side-search span {
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.5);
    font-family: var(--lx-mono);
    font-size: 9px;
    font-weight: 600;
}
.app-shell.lx-shell .side-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px;
}
.app-shell.lx-shell .side-nav::-webkit-scrollbar { width: 0; }
.app-shell.lx-shell .side-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 4px;
}
.app-shell.lx-shell .side-group span {
    padding: 12px 12px 4px;
    color: rgba(255,255,255,.55);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.app-shell.lx-shell .side-group a {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 12px;
    background: none;
    box-shadow: none;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    font-weight: 500;
}
.app-shell.lx-shell .side-group a .side-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.app-shell.lx-shell .side-group a:hover {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.85);
}
.app-shell.lx-shell .side-group a.is-active {
    background: rgba(255,255,255,.09);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}
.app-shell.lx-shell .side-group a.is-active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: var(--lx-accent-soft);
    box-shadow: 0 0 12px 1px rgba(var(--lx-role-rgb),.9);
}
.app-shell.lx-shell .side-group a em { flex: 1; font-style: normal; }
.app-shell.lx-shell .side-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lx-accent-soft);
    color: #161023;
    font-size: 12px;
    font-weight: 500;
}
.app-shell.lx-shell .wallet-box {
    min-height: 0;
    margin: auto 16px 12px;
    padding: 12px;
    display: block;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    background: rgba(255,255,255,.055);
}
.app-shell.lx-shell .wallet-box span {
    display: block;
    color: rgba(255,255,255,.55);
    font-family: var(--lx-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}
.app-shell.lx-shell .wallet-box strong {
    display: block;
    margin-top: 2px;
    color: #5ae2d2;
    font-family: var(--lx-display);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.app-shell.lx-shell .wallet-box em {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--lx-accent-soft);
    font-size: 11px;
    font-weight: 600;
}
.app-shell.lx-shell .wallet-box .side-icon { width: 12px; height: 12px; flex: 0 0 12px; }

/* ---------- topbar ---------- */

.app-shell.lx-shell .lx-topbar {
    min-height: 56px;
    height: 56px;
    padding: 0 24px;
    gap: 16px;
    border-bottom: 1px solid var(--lx-border);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(6px);
}
.app-shell.lx-shell .lx-topbar .app-top-actions { gap: 8px; }
.app-shell.lx-shell .lx-topbar .theme-toggle,
.app-shell.lx-shell .lx-topbar .top-link.iconish {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #09090b;
}
.app-shell.lx-shell .lx-topbar .theme-toggle:hover,
.app-shell.lx-shell .lx-topbar .top-link.iconish:hover { background: var(--lx-panel-2); }
.app-shell.lx-shell .lx-topbar .theme-toggle .side-icon { width: 16px; height: 16px; }
.app-shell.lx-shell .lx-topbar .top-link.iconish .side-icon { width: 20px; height: 20px; }
.app-shell.lx-shell .lx-topbar .has-badge span {
    top: 2px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border: 0;
    background: var(--lx-danger);
    color: #fafafa;
    font-size: 11px;
    font-weight: 700;
}
.lx-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 999px;
    font-family: var(--lx-mono);
    font-size: 12px;
}
.lx-lang b {
    padding: 6px 12px;
    background: #7c3aed;
    color: #fafafa;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.lx-lang select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    opacity: 0;
    cursor: pointer;
}
.app-shell.lx-shell .lx-topbar .avatar-chip {
    min-height: 44px;
    padding: 8px 16px 8px 8px;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    background: none;
}
.app-shell.lx-shell .lx-topbar .avatar-chip:hover { background: var(--lx-panel-2); }
.app-shell.lx-shell .lx-topbar .avatar-chip span {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 13px;
}
.app-shell.lx-shell .lx-topbar .avatar-chip small {
    color: var(--lx-ink-3);
    font-size: 12px;
    font-weight: 400;
}
.app-shell.lx-shell .lx-topbar .avatar-chip small strong {
    color: #09090b;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- dashboard shell ---------- */

.app-shell.lx-shell .app-main {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 32px 28px;
}
.lx-dash {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--lx-ink);
}

/* ---------- onboarding card ---------- */

.lx-onboard {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.lx-onboard-rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lx-role), rgba(var(--lx-role-rgb),.4));
}
.lx-onboard-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #67676f;
    cursor: pointer;
}
.lx-onboard-x:hover { background: var(--lx-panel-2); color: #09090b; }
.lx-onboard-x .side-icon { width: 16px; height: 16px; }
.lx-onboard-inner { padding: 20px 20px 18px; }
.lx-onboard-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 48px;
}
.lx-onboard-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--lx-role);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.lx-onboard-icon .side-icon { width: 20px; height: 20px; }
.lx-onboard-titles { min-width: 0; }
.lx-onboard-titles h2 {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: #09090b;
}
.lx-onboard-sub {
    margin-top: 2px;
    color: #67676f;
    font-size: 12px;
}
.lx-onboard-sub b {
    font-family: var(--lx-mono);
    font-weight: 700;
    color: var(--lx-role-fg);
}
.lx-onboard-progress {
    margin-top: 16px;
    display: flex;
    gap: 5px;
}
.lx-onboard-progress span {
    height: 6px;
    flex: 1;
    border-radius: 999px;
    background: #f1f1f6;
}
.lx-onboard-progress span.is-on { background: var(--lx-role); }
.lx-onboard-progress span.is-half { background: rgba(var(--lx-role-rgb),.35); }
.lx-next {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1.5px solid rgba(var(--lx-role-rgb),.35);
    border-radius: 14px;
    background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(var(--lx-role-rgb),.07), transparent 60%);
}
.lx-next-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(var(--lx-role-rgb),.12);
    color: var(--lx-role-fg);
}
.lx-next-icon .side-icon { width: 20px; height: 20px; }
.lx-next-body { min-width: 0; flex: 1; }
.lx-next-eyebrow {
    font-family: var(--lx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lx-role-fg);
}
.lx-next-body h3 {
    margin: 2px 0 0;
    font-family: var(--lx-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: #09090b;
}
.lx-next-desc {
    margin-top: 2px;
    color: #67676f;
    font-size: 12px;
}
.lx-next-meta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #67676f;
    font-family: var(--lx-mono);
    font-size: 11px;
    font-weight: 600;
}
.lx-next-meta .side-icon { width: 12px; height: 12px; flex: 0 0 12px; }
.lx-next-cta {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--lx-role);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.lx-next-cta:hover { opacity: .92; }
.lx-next-cta .side-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.lx-steps {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lx-steps a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 11px;
    color: #09090b;
}
.lx-steps a:hover { background: var(--lx-panel-2); }
.lx-step-n {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--lx-border);
    border-radius: 8px;
    color: #67676f;
    font-family: var(--lx-mono);
    font-size: 11px;
    font-weight: 700;
}
.lx-step-t {
    min-width: 0;
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.lx-steps a .side-icon { width: 15px; height: 15px; flex: 0 0 15px; color: #67676f; }
.lx-done {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lx-border);
}
.lx-done-toggle {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #67676f;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.lx-done-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(16,183,127,.15);
    color: var(--lx-success-fg);
}
.lx-done-icon .side-icon { width: 14px; height: 14px; }
.lx-done-toggle > .side-icon { width: 15px; height: 15px; margin-left: auto; color: #67676f; }
.lx-tip {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed rgba(var(--lx-role-rgb),.3);
    border-radius: 12px;
    background: rgba(var(--lx-role-rgb),.06);
    color: #67676f;
    font-size: 12px;
    line-height: 1.375;
}
.lx-tip-emoji { flex: none; font-size: 18px; line-height: 1; }
.lx-tip b { color: #09090b; font-weight: 600; }

/* ---------- hello + quick actions ---------- */

.lx-hello h1 {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 38px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--lx-ink);
}
.lx-hello p {
    margin: 9px 0 0;
    color: var(--lx-ink-2);
    font-size: 14px;
    font-weight: 450;
}
.lx-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.lx-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--lx-border);
    border-radius: 6px;
    background: #fff;
    color: #09090b;
    font-size: 14px;
    font-weight: 500;
}
.lx-btn:hover { background: var(--lx-panel-2); }
.lx-btn .side-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.lx-btn.is-primary {
    min-height: 36px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    background: var(--lx-accent-deep);
    color: #fff;
    border-radius: 6px;
}
.lx-btn.is-primary:hover { background: var(--lx-accent-deep); opacity: .92; }

/* ---------- cards ---------- */

.lx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.lx-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.lx-card-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--lx-line-soft);
}
.lx-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--lx-ink);
}
.lx-card-note { color: var(--lx-ink-3); font-size: 12.5px; }
.lx-card-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--lx-ink-3);
}
.lx-card-tools.is-balance { color: var(--lx-balance-fg); }
.lx-card-tools .side-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.lx-card-body { min-width: 0; flex: 1; }
.lx-card-foot {
    margin-top: 16px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--lx-line-soft);
    color: var(--lx-ink-2);
    font-size: 12.5px;
}
.lx-card-foot b { color: var(--lx-ink); font-weight: 600; }
.lx-foot-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-foot-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lx-accent-deep);
    font-weight: 500;
}
.lx-foot-link .side-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.lx-empty {
    margin: 0;
    padding: 32px 0;
    text-align: center;
    color: var(--lx-ink-3);
    font-size: 13px;
}
.lx-list { display: flex; flex-direction: column; gap: 8px; }
.lx-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--lx-panel-2);
    color: var(--lx-ink);
}
.lx-list a span { min-width: 0; display: grid; gap: 2px; }
.lx-list a strong { font-size: 13px; font-weight: 600; }
.lx-list a small { color: var(--lx-ink-3); font-size: 11.5px; }
.lx-list a b { flex: none; color: var(--lx-ink-2); font-size: 12px; font-weight: 600; }

/* ---------- amounts + charts ---------- */

.lx-amt {
    display: inline-block;
    font-family: var(--lx-display);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink);
}
.lx-amt .pre { font-weight: 500; color: var(--lx-ink-2); }
.lx-amt .sep { font-weight: 500; margin: 0 1px 0 2px; }
.lx-amt .c {
    font-size: .5em;
    margin-left: 1px;
    position: relative;
    top: -.62em;
}
.lx-amt.is-hero { display: block; margin-top: 16px; font-size: 47px; }
.lx-chips {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.lx-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-size: 12.5px;
    font-weight: 600;
}
.lx-flow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lx-flow.is-in { color: var(--lx-earned-fg); }
.lx-flow.is-out { color: var(--lx-danger-fg); }
.lx-flow .side-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.lx-chart { margin-top: 18px; }
.lx-spark { display: block; width: 100%; height: 150px; }
.lx-chart-x {
    margin-top: 11px;
    display: flex;
    justify-content: space-between;
    color: var(--lx-ink-3);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.lx-big {
    font-family: var(--lx-display);
    font-size: 38px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink);
}

/* ---------- in review ---------- */

.lx-review-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.lx-review-count { display: flex; align-items: flex-end; gap: 10px; }
.lx-review-count span {
    font-family: var(--lx-display);
    font-size: 40px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink);
}
.lx-review-count em {
    margin-bottom: 4px;
    color: var(--lx-ink-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
.lx-review-payout { text-align: right; }
.lx-review-payout em {
    margin-top: 3px;
    display: block;
    color: var(--lx-ink-3);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}
.lx-track {
    margin-top: 20px;
    height: 8px;
    display: flex;
    gap: 3px;
}
.lx-track i { flex: 1; border-radius: 999px; background: var(--lx-panel-2); }
.lx-track i.is-approved { background: var(--lx-earned); }
.lx-track i.is-pending { background: var(--lx-pending); }
.lx-legend {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--lx-ink-2);
    font-size: 12px;
    font-weight: 500;
}
.lx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lx-legend i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--lx-panel-2);
}
.lx-legend i.is-approved { background: var(--lx-earned); }
.lx-legend i.is-pending { background: var(--lx-pending); }
.lx-legend b { font-variant-numeric: tabular-nums; font-weight: 500; }
.lx-review-action { display: flex; }
.lx-review-action a {
    margin: 16px 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--lx-panel-2);
    color: var(--lx-accent-deep);
    font-size: 12.5px;
    font-weight: 600;
}
.lx-review-action .side-icon { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- clip activity ---------- */

.lx-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.lx-tiles > div {
    padding: 16px;
    border-radius: 12px;
    background: var(--lx-panel-2);
}
.lx-tiles span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lx-ink-2);
    font-size: 12px;
}
.lx-tiles i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
}
.lx-tiles i.is-approved { background: var(--lx-earned); }
.lx-tiles i.is-rejected { background: var(--lx-danger); }
.lx-tiles strong {
    margin-top: 4px;
    display: block;
    font-family: var(--lx-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.lx-tiles strong.is-approved { color: var(--lx-earned-fg); }
.lx-tiles strong.is-rejected { color: var(--lx-danger-fg); }
.lx-streak {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--lx-panel-2);
}
.lx-streak-emoji {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff;
    opacity: .5;
    font-size: 18px;
}
.lx-streak-text {
    min-width: 0;
    font-family: var(--lx-display);
    font-size: 15px;
    line-height: 1.375;
    color: var(--lx-ink-2);
}
.lx-bars {
    margin-top: 20px;
    height: 46px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.lx-bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: rgba(var(--lx-accent-rgb),.4);
}
.lx-bars-x {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    color: var(--lx-ink-3);
    font-size: 10px;
    font-weight: 500;
}
.lx-bars-x span { flex: 1; text-align: center; }

/* ---------- section heading ---------- */

.lx-section-head {
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lx-section-head h2 {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--lx-ink);
}
.lx-section-head span { color: var(--lx-ink-3); font-size: 12.5px; }

@media (max-width: 1100px) {
    .lx-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .app-shell.lx-shell { grid-template-columns: minmax(0, 1fr); }
    .app-shell.lx-shell .app-main { padding: 18px 16px 96px; }
    .lx-dash { gap: 18px; }
    .lx-hello h1 { font-size: 28px; }
    .lx-onboard-inner { padding: 18px 16px 16px; }
    .lx-next { flex-direction: column; align-items: flex-start; gap: 12px; }
    .lx-next-cta { width: 100%; }
    .lx-quick .lx-btn { flex: 1 1 auto; justify-content: center; }
    .lx-amt.is-hero { font-size: 40px; }
    .lx-card { padding: 18px 16px; }
}

/* Overrides that need to outrank the generic panel button/search rules. */
.app-shell.lx-shell .app-sidebar .side-search {
    position: static;
}
.app-shell.lx-shell .app-sidebar .side-search .side-icon {
    position: static;
    transform: none;
}
.app-shell.lx-shell .app-sidebar .side-search input {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(255,255,255,.5);
    font-size: 13px;
}
.app-shell.lx-shell .app-sidebar .side-search span {
    position: static;
    transform: none;
    margin-left: auto;
}
.lx-dash .lx-onboard-x,
.lx-dash .lx-done-toggle {
    background: none;
    box-shadow: none;
    font-weight: inherit;
}
.lx-dash .lx-onboard-x { color: #67676f; }
.lx-dash .lx-done-toggle { color: #67676f; font-weight: 600; }
.lx-dash .lx-onboard-x:hover { background: var(--lx-panel-2); color: #09090b; }
.lx-bars-x span { flex: none; text-align: left; }

/* Vertical rhythm: match lulosa's content offset and text leading exactly. */
.app-shell.lx-shell .app-main { padding: 32px 28px; }
/* The reference layout has a hidden first child, so its space-y gap shows up as a top offset. */
.lx-dash { margin-top: 20px; }
.lx-onboard-titles h2 { line-height: 1.5; }
.lx-onboard-sub { line-height: 1.3333; }
.lx-next-eyebrow { line-height: 1.5; }
.lx-next-body h3 { line-height: 1.5; }
.lx-next-desc { line-height: 1.3333; }
.lx-next-meta { line-height: 1.5; }
.lx-step-t { line-height: 1.5; }
.lx-done-toggle span { line-height: 1.3333; }

/* Line boxes: mirror the reference stack's leading so rows land on the same rhythm. */
.lx-card-head h3,
.lx-section-head h2,
.lx-section-head span,
.lx-card-note,
.lx-card-foot,
.lx-empty,
.lx-chip,
.lx-flow,
.lx-chart-x,
.lx-bars-x,
.lx-review-payout em,
.lx-hello p { line-height: 1.5; }
.lx-legend,
.lx-tiles span { line-height: 1.3333; }
.lx-review-count em,
.lx-btn { line-height: 1.4286; }

/* Language switcher: pill trigger + full list, so all ten locales fit. */
.lx-lang-wrap { position: relative; display: inline-flex; }
.lx-lang {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 0;
    border: 1px solid var(--lx-border, #e4e4e7);
    border-radius: 999px;
    background: none;
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
}
.lx-lang b {
    padding: 6px 10px;
    background: #7c3aed;
    color: #fafafa;
    font-family: var(--lx-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.lx-lang .side-icon { width: 14px; height: 14px; flex: 0 0 14px; color: #67676f; }
.lx-lang-popover {
    width: 232px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
}
.lx-lang-popover a {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1d1d26;
    font-size: 13.5px;
    font-weight: 500;
}
.lx-lang-popover a:hover { background: #f1f1f6; }
.lx-lang-popover a small {
    color: #878797;
    font-family: var(--lx-mono, ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
}
.lx-lang-popover a.is-active { background: rgba(124,58,237,.1); color: #6d28d9; }
.lx-lang-popover a.is-active small { color: #7c3aed; }

/* ==========================================================================
   Clipper panel — shared page kit (titles, tabs, filters, tables, states)
   ========================================================================== */

.lx-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: var(--lx-ink);
}
.lx-page > .lx-stack { display: flex; flex-direction: column; gap: 20px; }
.lx-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lx-page-title {
    margin: 0;
    font-family: var(--lx-display);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--lx-ink);
}
.lx-page-sub {
    max-width: 600px;
    margin: 10px 0 0;
    color: var(--lx-ink-2);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.5;
}
.lx-page-sub b { color: var(--lx-ink); font-weight: 600; }
.lx-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.lx-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 12px;
    background: rgba(241,241,246,.55);
    overflow-x: auto;
}
.lx-tab {
    flex: 0 0 auto;
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: none;
    box-shadow: none;
    color: var(--lx-ink-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.lx-tab .side-icon { width: 15px; height: 15px; flex: 0 0 15px; opacity: .85; }
.lx-tab:hover { color: var(--lx-ink); }
.lx-tab.is-active {
    background: #fff;
    color: var(--lx-ink);
    box-shadow: 0 1px 2px rgba(61,61,92,.08);
}
.lx-tab .ct {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-3);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.lx-tab.is-active .ct { background: rgba(var(--lx-accent-rgb),.16); color: var(--lx-accent-deep); }

.lx-filtrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lx-filtrow .sp { flex: 1; }
.lx-selpill {
    position: relative;
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 10px;
    background: rgba(255,255,255,.45);
    box-shadow: none;
    color: var(--lx-ink-2);
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
}
.lx-selpill:hover { background: var(--lx-panel-2); color: var(--lx-ink); }
.lx-selpill .side-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--lx-ink-3); }
.lx-selpill.is-active {
    border-color: rgba(var(--lx-accent-rgb),.5);
    background: rgba(var(--lx-accent-rgb),.1);
    color: var(--lx-accent-deep);
}
.lx-selpill.is-active .side-icon { color: inherit; }
.lx-selpill select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.lx-resline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.lx-resline .n { color: var(--lx-ink-2); font-size: 13px; font-weight: 500; }
.lx-resline .n b { color: var(--lx-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.lx-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    text-align: center;
}
.lx-blank-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--lx-role-rgb),.1), rgba(239,68,68,.1));
    color: var(--lx-role);
}
.lx-blank-icon .side-icon { width: 40px; height: 40px; }
.lx-blank h2 { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #09090b; }
.lx-blank p { max-width: 420px; margin: 0 0 24px; color: #67676f; font-size: 16px; line-height: 1.5; }
.lx-blank-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.lx-mini-blank { padding: 48px 16px; text-align: center; }
.lx-mini-blank .lx-blank-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-3);
}
.lx-mini-blank .lx-blank-icon .side-icon { width: 22px; height: 22px; }
.lx-mini-blank strong { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 700; color: #09090b; }
.lx-mini-blank p { max-width: 360px; margin: 0 auto 20px; color: #67676f; font-size: 13.5px; line-height: 1.5; }

.lx-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-color: #100d1c;
    background-image:
        radial-gradient(60% 80% at 8% 0, rgba(14,169,241,.5), transparent 60%),
        radial-gradient(70% 70% at 95% 15%, rgba(124,59,237,.45), transparent 60%),
        radial-gradient(90% 80% at 60% 125%, rgba(23,207,185,.4), transparent 65%);
    color: #fff;
}
.lx-hero-eyebrow {
    font-family: var(--lx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.66);
}
.lx-hero h2 { margin: 8px 0 0; font-family: var(--lx-display); font-size: 26px; font-weight: 800; line-height: 1.15; }
.lx-hero p { margin: 8px 0 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.5; }

.lx-table { width: 100%; border-collapse: collapse; }
.lx-table th {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--lx-line-soft);
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
}
.lx-table th:last-child, .lx-table td:last-child { text-align: right; }
.lx-table td {
    padding: 14px 0;
    border-bottom: 1px solid var(--lx-line-soft);
    color: var(--lx-ink-2);
    font-size: 13px;
    vertical-align: middle;
}
.lx-table tr:last-child td { border-bottom: 0; }
.lx-table td strong { display: block; color: var(--lx-ink); font-size: 13.5px; font-weight: 600; }
.lx-table td small { color: var(--lx-ink-3); font-size: 11.5px; }

.lx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.lx-badge.is-approved { background: rgba(5,148,103,.12); color: var(--lx-earned-fg); }
.lx-badge.is-pending { background: rgba(219,119,6,.12); color: var(--lx-pending-fg); }
.lx-badge.is-rejected { background: rgba(239,68,68,.12); color: var(--lx-danger-fg); }
.lx-badge.is-paid { background: rgba(var(--lx-role-rgb),.12); color: var(--lx-role-fg); }

@media (max-width: 900px) {
    .lx-page { gap: 22px; }
    .lx-page-title { font-size: 27px; }
    .lx-blank { padding: 42px 12px; }
    .lx-blank h2 { font-size: 20px; }
    .lx-blank p { font-size: 14px; }
}

/* ==========================================================================
   Clipper panel — page components (clips, wallet, referrals, support, academy)
   ========================================================================== */

.lx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.lx-eyebrow.is-accent { color: var(--lx-role-fg); }
.lx-eyebrow .side-icon { width: 13px; height: 13px; }
.lx-section-sub {
    margin: 0 0 6px;
    font-family: var(--lx-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.025em;
    color: var(--lx-ink);
}
.lx-gradient-title {
    background: linear-gradient(92deg, #7c3aed, var(--lx-accent-deep) 60%, #17cfb9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lx-grid-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.lx-grid-support,
.lx-grid-academy { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.lx-grid-ref { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.lx-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.lx-btn.is-ghost-dark {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #fff;
}
.lx-btn.is-ghost-dark:hover { background: rgba(255,255,255,.2); }
.lx-btn-block { width: 100%; justify-content: center; }
.lx-card-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.lx-card-head h3 .side-icon { width: 16px; height: 16px; color: var(--lx-ink-3); }

/* Support */
.lx-support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
}
.lx-help-list { display: flex; flex-direction: column; }
.lx-help-list a,
.lx-help-list > span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--lx-line-soft);
    color: var(--lx-ink);
    font-size: 13.5px;
}
.lx-help-list a:last-child,
.lx-help-list > span:last-child { border-bottom: 0; }
.lx-help-list .side-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--lx-ink-3); }
.lx-help-list span { min-width: 0; flex: 1; }
.lx-help-list a .side-icon:last-child { margin-left: auto; flex: 0 0 14px; width: 14px; height: 14px; }
.lx-eyebrow-head {
    font-family: var(--lx-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lx-ink-3) !important;
}
.lx-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.lx-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--lx-panel-2);
}
.lx-ticket strong { display: block; font-size: 14px; font-weight: 600; color: var(--lx-ink); }
.lx-ticket small { color: var(--lx-ink-3); font-size: 12px; }
.lx-badge.open { background: rgba(var(--lx-role-rgb),.12); color: var(--lx-role-fg); }
.lx-badge.in-progress { background: rgba(219,119,6,.12); color: var(--lx-pending-fg); }
.lx-badge.resolved { background: rgba(5,148,103,.12); color: var(--lx-earned-fg); }
.lx-badge.closed { background: var(--lx-panel-2); color: var(--lx-ink-2); }

/* Submit a clip */
.lx-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--lx-role-rgb),.28);
    border-radius: 14px;
    background: rgba(var(--lx-role-rgb),.06);
}
.lx-notice > div { min-width: 0; flex: 1; }
.lx-notice strong { display: block; font-size: 14px; font-weight: 600; color: var(--lx-ink); }
.lx-notice small { color: var(--lx-ink-2); font-size: 12.5px; }
.lx-notice-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(var(--lx-role-rgb),.14);
    color: var(--lx-role-fg);
}
.lx-search { position: relative; display: flex; align-items: center; }
.lx-search .side-icon { position: absolute; left: 16px; width: 17px; height: 17px; color: var(--lx-ink-3); }
.lx-search input {
    width: 100%;
    min-height: 50px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 12px;
    background: #fff;
    color: var(--lx-ink);
    font-size: 14px;
}
.lx-campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.lx-campaign-card {
    display: block;
    padding: 0 0 16px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
    overflow: hidden;
}
.lx-campaign-card:hover { border-color: rgba(var(--lx-accent-rgb),.5); }
.lx-campaign-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--lx-panel-2);
}
.lx-campaign-art img { width: 100%; height: 100%; object-fit: cover; }
.lx-campaign-art i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--lx-ink-3); }
.lx-campaign-art i .side-icon { width: 28px; height: 28px; }
.lx-campaign-art b {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--lx-ink-2);
    font-size: 11px;
    font-weight: 600;
}
.lx-campaign-card strong { display: block; padding: 14px 16px 0; font-size: 14.5px; font-weight: 600; color: var(--lx-ink); }
.lx-campaign-card small { display: block; padding: 4px 16px 0; color: var(--lx-ink-3); font-size: 12.5px; }
.lx-campaign-meta { display: flex; align-items: baseline; gap: 6px; padding: 12px 16px 0; }
.lx-campaign-meta .lx-amt { font-size: 22px; }
.lx-campaign-meta em { color: var(--lx-ink-3); font-size: 12px; font-style: normal; }
.lx-campaign-meta b { margin-left: auto; color: var(--lx-ink-2); font-size: 12.5px; font-weight: 600; }

@media (max-width: 1200px) {
    .lx-grid-support,
    .lx-grid-academy,
    .lx-grid-wide,
    .lx-grid-ref { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .lx-wallet-hero { grid-template-columns: minmax(0, 1fr); }
    .lx-wallet-hero-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
    .lx-ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-clip-row { grid-template-columns: 48px minmax(0, 1fr); }
    .lx-clip-stats { grid-column: 1 / -1; justify-content: space-between; gap: 12px; }
    .lx-course { flex-direction: column; }
    .lx-course-art { min-height: 160px; }
    .lx-support-hero { flex-direction: column; align-items: flex-start; }
    .lx-tier-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

/* Wallet hero: neutral graphite panel with a faint engraved starburst. */
.lx-hero.lx-wallet-hero {
    position: relative;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background-color: transparent;
    background-image: linear-gradient(158deg, #151523, #0b0a14);
}
.lx-hero.lx-wallet-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .14;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(var(--lx-role-rgb),.9) 0deg 0.35deg, transparent 0.35deg 15deg),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(var(--lx-role-rgb),.55) 58.6%, transparent 59.4%),
        radial-gradient(circle at 50% 50%, transparent 78%, rgba(var(--lx-role-rgb),.4) 78.6%, transparent 79.4%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
}
.lx-wallet-hero-main,
.lx-wallet-hero-side { position: relative; z-index: 1; }
.lx-wallet-hero .lx-hero-eyebrow { color: var(--lx-accent); }

/* Buttons inside the clipper pages must beat the global `button` gradient. */
.lx-page .lx-btn,
.lx-dash .lx-btn {
    border: 1px solid var(--lx-border);
    background: #fff;
    box-shadow: none;
    color: #09090b;
    font-weight: 500;
}
.lx-page .lx-btn:hover,
.lx-dash .lx-btn:hover { background: var(--lx-panel-2); }
.lx-page .lx-btn.is-primary,
.lx-dash .lx-btn.is-primary {
    border: 0;
    background: var(--lx-accent-deep);
    color: #fff;
}
.lx-page .lx-btn.is-ghost-dark {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #fff;
    white-space: nowrap;
}
.lx-page .lx-btn.is-ghost-dark:hover { background: rgba(255,255,255,.2); }
.lx-page .lx-btn.is-disabled { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.75); }
.lx-page .lx-btn.lx-ref-wa { background: rgba(5,148,103,.1); border-color: rgba(5,148,103,.25); color: var(--lx-earned-fg); }
.lx-page .lx-tab,
.lx-page .lx-selpill,
.lx-page .lx-method-btn,
.lx-page .lx-lesson-cta,
.lx-page .lx-tabs a { box-shadow: none; }
.lx-page button.lx-tab { background: none; color: var(--lx-ink-2); font-weight: 600; }
.lx-page button.lx-tab.is-active { background: #fff; color: var(--lx-ink); box-shadow: 0 1px 2px rgba(61,61,92,.08); }
.lx-page button.lx-selpill { background: rgba(255,255,255,.45); color: var(--lx-ink-2); font-weight: 550; }
.lx-page button.lx-selpill.is-active { background: rgba(var(--lx-accent-rgb),.1); color: var(--lx-accent-deep); }
.lx-page button.lx-method-btn { background: rgba(var(--lx-accent-rgb),.14); color: var(--lx-accent-deep); font-weight: 600; }
.lx-page button.lx-method-btn.is-off { background: var(--lx-panel-2); color: var(--lx-ink-2); }
.lx-page button.lx-lesson-cta { background: none; color: var(--lx-accent-deep); font-weight: 600; }
.lx-page .lx-page-title .side-icon {
    width: 26px;
    height: 26px;
    margin-right: 10px;
    vertical-align: -4px;
    color: var(--lx-role);
}
.lx-page .lx-course-body h2 .side-icon { width: 20px; height: 20px; }
.lx-page details summary::marker { content: ""; }

/* Analytics */
.lx-tabs-compact { flex: 0 0 auto; }
.lx-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lx-metric { padding: 18px 20px; }
.lx-metric span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--lx-ink-2);
    font-size: 12.5px;
    font-weight: 500;
}
.lx-metric span .side-icon { width: 15px; height: 15px; color: var(--lx-ink-3); }
.lx-metric strong {
    display: block;
    margin: 10px 0 8px;
    font-family: var(--lx-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink);
}
.lx-metric strong.is-in { color: var(--lx-earned-fg); }
.lx-metric small { color: var(--lx-ink-3); font-size: 11.5px; line-height: 1.45; }
.lx-dashed {
    display: grid;
    place-items: center;
    min-height: 120px;
    margin-top: 16px;
    padding: 24px;
    border: 1px dashed var(--lx-line);
    border-radius: 12px;
    color: var(--lx-ink-3);
    font-size: 13px;
    text-align: center;
}

/* Marketplace + leaderboard: bring the legacy panel components onto the blue system. */
.clipper-shell .clipper-marketplace-head h1,
.clipper-shell .panel-page-head h1 {
    font-family: var(--lx-display);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--lx-ink);
}
.clipper-shell .clipper-marketplace-head p,
.clipper-shell .panel-page-head p { color: var(--lx-ink-2); }
.clipper-shell .clipper-academy-callout {
    border-color: rgba(var(--lx-role-rgb),.28);
    background: rgba(var(--lx-role-rgb),.06);
}
.clipper-shell .clipper-academy-callout a { background: var(--lx-accent-deep); color: #fff; }
.clipper-shell .lulosa-tabs a.is-active,
.clipper-shell .marketplace-chip.is-active,
.clipper-shell .panel-filter-row .is-active { background: rgba(var(--lx-accent-rgb),.12); color: var(--lx-accent-deep); }
.clipper-shell .button.primary,
.clipper-shell button.primary {
    background: var(--lx-accent-deep);
    box-shadow: none;
    color: #fff;
}
.clipper-shell .clipper-tile-rate,
.clipper-shell .marketplace-rate,
.clipper-shell .campaign-stats strong { color: var(--lx-ink); }
.clipper-shell a { color: inherit; }
.clipper-shell .app-main a.text-link,
.clipper-shell .dash-card-head a,
.clipper-shell .panel-page-head a.link { color: var(--lx-accent-deep); }
.clipper-shell .budget-bar span,
.clipper-shell .review-track span,
.clipper-shell .progress-bar span { background: var(--lx-accent); }
.clipper-shell .status,
.clipper-shell .badge.is-verified { color: var(--lx-role-fg); }

@media (max-width: 1100px) {
    .lx-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .lx-metric-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Clipper marketplace — campaign covers, featured card and grid
   ========================================================================== */

.lx-mkt-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 24px;
    border: 1px solid rgba(var(--lx-role-rgb),.3);
    border-radius: 12px;
    background: rgba(var(--lx-role-rgb),.05);
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.lx-mkt-callout > div { min-width: 0; flex: 1; }
.lx-mkt-callout strong { display: block; font-size: 14px; font-weight: 600; color: var(--lx-ink); }
.lx-mkt-callout p { margin: 4px 0 0; color: var(--lx-ink-2); font-size: 14px; line-height: 1.6; }
.lx-mkt-callout-icon {
    width: 36px;
    height: 36px;
    margin-top: 2px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(var(--lx-role-rgb),.1);
    color: var(--lx-role);
}
.lx-mkt-callout-icon .side-icon { width: 16px; height: 16px; }
.lx-mkt-callout-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lx-mkt-callout-actions .lx-btn { min-height: 44px; height: 36px; padding: 0 12px; font-size: 14px; }
.lx-page .lx-btn.is-quiet { border-color: transparent; background: none; color: var(--lx-ink-2); }
.lx-page .lx-btn.is-quiet:hover { background: var(--lx-panel-2); }
.lx-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lx-accent-deep);
    font-size: 12.5px;
    font-weight: 600;
}
.lx-clear-filters .side-icon { width: 13px; height: 13px; }

.lx-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--lx-panel-2);
}
.lx-cover .gl-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.lx-cover.is-blank {
    background:
        radial-gradient(circle at 28% 28%, rgba(124,58,237,.16), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(var(--lx-role-rgb),.18), transparent 58%),
        var(--lx-panel-2);
}
.lx-cover-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--lx-ink-3); }
.lx-cover-glyph .side-icon { width: 30px; height: 30px; }
.lx-cover .pill {
    position: absolute;
    top: 11px;
    left: 11px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(7px);
    color: var(--lx-ink);
    font-size: 11px;
    font-weight: 600;
}
.lx-cover .pill .d { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 99px; }
.lx-cover .pill.new .d { background: var(--lx-success); }
.lx-cover .pill.ending .d { background: var(--lx-danger); }
.lx-cover .pill.low .d { background: #f59e0b; }
.lx-cover .pill.completed { color: var(--lx-success-fg); }
.lx-cover .pill.completed .d { background: var(--lx-success); }
.lx-cover .plats { position: absolute; left: 11px; bottom: 11px; display: flex; gap: 6px; }
.lx-cover .plat {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(7px);
    color: var(--lx-ink);
}
.lx-cover .plat .side-icon { width: 14px; height: 14px; }
.lx-cover .ugc {
    position: absolute;
    right: 11px;
    bottom: 11px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(7px);
    color: #0d776b;
    font-size: 10.5px;
    font-weight: 700;
}

.lx-ccreator { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.lx-ccreator .av {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: rgba(var(--lx-accent-rgb),.18);
    color: var(--lx-accent-deep);
    font-family: var(--lx-display);
    font-size: 9px;
    font-weight: 700;
}
.lx-ccreator .nm {
    min-width: 0;
    color: var(--lx-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lx-ccreator .rt { margin-left: auto; flex: none; }
.lx-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid rgba(var(--lx-role-rgb),.2);
    border-radius: 999px;
    background: rgba(var(--lx-role-rgb),.1);
    color: var(--lx-role-fg);
    font-size: 12px;
    font-weight: 600;
}
.lx-verified .side-icon { width: 12px; height: 12px; }
.lx-minrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 11px;
    color: var(--lx-ink-3);
    font-size: 11px;
}
.lx-minrow b { color: var(--lx-ink); font-weight: 600; }
.lx-gate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-size: 10.5px;
    font-weight: 600;
}
.lx-gate .side-icon { width: 13px; height: 13px; flex: 0 0 13px; }

.lx-feat {
    margin-top: 15px;
    display: grid;
    grid-template-columns: minmax(280px, 40%) 1fr;
    overflow: hidden;
    border: 1px solid var(--lx-line-soft);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.lx-feat-media { display: block; height: 100%; }
.lx-feat-media .lx-cover { aspect-ratio: auto; min-height: 250px; height: 100%; }
.lx-feat-bd { min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; }
.lx-feat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--lx-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lx-accent-deep);
}
.lx-feat-eyebrow .side-icon { width: 14px; height: 14px; }
.lx-feat .ft-ttl {
    display: block;
    margin-top: 11px;
    font-family: var(--lx-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--lx-ink);
}
.lx-feat .ft-desc {
    margin: 13px 0 0;
    color: var(--lx-ink-2);
    font-size: 13px;
    font-weight: 450;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lx-feat .ft-rate {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--lx-line-soft);
}
.lx-feat .ft-rate .big .lx-amt { font-size: 40px; }
.lx-feat .ft-rate .big .per { margin-top: 6px; color: var(--lx-ink-3); font-size: 12.5px; font-weight: 500; }
.lx-feat .ft-rate .col { display: flex; flex-direction: column; gap: 3px; }
.lx-feat .ft-rate .col .k { color: var(--lx-ink-3); font-size: 11.5px; font-weight: 500; }
.lx-feat .ft-rate .col .v {
    font-family: var(--lx-display);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink-2);
}
.lx-feat .ft-foot { display: flex; align-items: center; gap: 11px; margin-top: 22px; }
.lx-feat .ft-foot .cbtn { margin-top: 0; }

.lx-cgrid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lx-ccard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
    transition: transform .16s, box-shadow .16s;
}
.lx-ccard:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(78,78,126,.06), 0 16px 36px -12px rgba(78,78,126,.16);
}
.lx-ccard-media { display: block; }
.lx-ccard-bd { flex: 1; display: flex; flex-direction: column; padding: 15px 17px 17px; }
.lx-ccard .ctitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
    color: var(--lx-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.32;
}
.lx-ccard .crate {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--lx-line-soft);
}
.lx-ccard .crate .lx-amt { font-size: 28px; }
.lx-ccard .crate .per { color: var(--lx-ink-3); font-size: 11.5px; font-weight: 500; }
.lx-ccard .crate .max { margin-left: auto; text-align: right; }
.lx-ccard .crate .max .k { color: var(--lx-ink-3); font-size: 10px; font-weight: 500; }
.lx-ccard .crate .max .v {
    margin-top: 2px;
    font-family: var(--lx-display);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink-2);
}
.cmeta { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.cmeta .ln {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lx-ink-3);
    font-size: 11.5px;
    font-weight: 500;
}
.cmeta .ln .rem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lx-ink-2);
}
.cmeta .ln .rem b { color: var(--lx-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmeta .ln .sub { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; }
.cmeta .ln .sub .side-icon { width: 12px; height: 12px; }
.bbar { height: 5px; border-radius: 99px; background: var(--lx-panel-2); overflow: hidden; }
.bbar i { display: block; height: 100%; border-radius: 99px; background: var(--lx-accent); }
.bbar i.warn { background: #f59e0b; }
.bbar i.low { background: var(--lx-danger); }
.cfoot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: var(--lx-ink-3);
    font-size: 11px;
    font-weight: 500;
}
.cfoot .it { display: inline-flex; align-items: center; gap: 5px; }
.cfoot .it .side-icon { width: 12px; height: 12px; }
.cfoot .sp { flex: 1; }
.lx-page .cbtn {
    margin-top: 15px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 10px;
    background: rgba(255,255,255,.5);
    box-shadow: none;
    color: var(--lx-ink);
    font-size: 13.5px;
    font-weight: 600;
}
.lx-page .cbtn:hover { background: var(--lx-panel-2); }
.lx-page .cbtn .side-icon { width: 15px; height: 15px; }
.lx-page .cbtn.wide { width: 100%; margin-top: auto; }
.lx-page .cbtn.solid {
    padding: 0 20px;
    border-color: transparent;
    background: var(--lx-accent-deep);
    color: #fff;
}
.lx-page .cbtn.solid:hover { background: var(--lx-accent-deep); opacity: .92; }

.lx-wins { margin-top: 32px; padding-top: 40px; border-top: 1px solid var(--lx-border); }
.lx-wins-head { margin-bottom: 24px; }
.lx-wins-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--lx-ink); }
.lx-wins-head p { margin: 4px 0 0; color: var(--lx-ink-2); font-size: 14px; }
.lx-cgrid.is-wins { margin-top: 0; }
.lx-cgrid.is-wins .lx-ccard { background: rgba(255,255,255,.5); }
.lx-cgrid.is-wins .lx-cover { opacity: .9; }

@media (max-width: 1200px) {
    .lx-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .lx-mkt-callout { flex-wrap: wrap; padding: 16px; }
    .lx-mkt-callout-actions { width: 100%; }
    .lx-mkt-callout-actions .lx-btn { flex: 1; justify-content: center; }
    .lx-feat { grid-template-columns: minmax(0, 1fr); }
    .lx-feat-media .lx-cover { aspect-ratio: 16 / 9; min-height: 0; }
    .lx-feat-bd { padding: 20px; }
    .lx-feat .ft-ttl { font-size: 19px; }
    .lx-feat .ft-rate .big .lx-amt { font-size: 32px; }
    .lx-cgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   My clips — lulosa clip cards
   ========================================================================== */

.lx-clipgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lx-clipgrid > * { min-width: 0; }
.lx-clip-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.lx-clip-card:hover {
    border-color: var(--lx-border);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(78,78,126,.06), 0 16px 36px -12px rgba(78,78,126,.16);
}
.lx-poster { aspect-ratio: 4 / 5; }
.lx-cover .pill.ok .d { background: var(--lx-success); }
.lx-cover .pill.warn .d { background: #f59e0b; }
.lx-cover .pill.info .d { background: var(--lx-accent-deep); }
.lx-cover .pill.bad .d { background: var(--lx-danger); }
.lx-cover .pill.mut .d { background: var(--lx-ink-3); }
.lx-clip-bd { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 15px; }
.lx-clip-camp { display: flex; align-items: center; gap: 10px; }
.lx-clip-camp .mono {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-3);
}
.lx-clip-camp .mono .side-icon { width: 15px; height: 15px; }
.lx-clip-camp .t { min-width: 0; flex: 1; }
.lx-clip-camp .t .a {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lx-clip-camp .t .b {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    color: var(--lx-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lx-clip-sub { margin-top: 11px; font-size: 11.5px; font-weight: 500; }
.lx-clip-sub.ok { color: var(--lx-success); }
.lx-clip-sub.warn { color: #b45309; }
.lx-clip-sub.info { color: var(--lx-accent-deep); }
.lx-clip-sub.mut { color: var(--lx-ink-3); }
.lx-clip-sub.bad { color: var(--lx-danger); }
.lx-clip-metrics {
    display: flex;
    margin-top: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--lx-line-soft);
}
.lx-clip-metric { flex: 1; min-width: 0; }
.lx-clip-metric + .lx-clip-metric { padding-left: 14px; border-left: 1px solid var(--lx-line-soft); }
.lx-clip-metric .v {
    font-family: var(--lx-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--lx-ink);
}
.lx-clip-metric .v .lx-amt { font-size: 16px; }
.lx-clip-metric .v .lx-amt .c { font-size: .55em; top: -.5em; }
.lx-clip-metric.is-earn .v,
.lx-clip-metric.is-earn .v .lx-amt,
.lx-clip-metric.is-earn .v .lx-amt .pre { color: var(--lx-earned); }
.lx-clip-metric .k { margin-top: 6px; font-size: 10.5px; font-weight: 500; color: var(--lx-ink-3); }
.lx-clip-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.lx-clip-foot .ai { margin-right: auto; min-width: 0; }
.lx-clip-foot .date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: var(--lx-ink-3);
}
.lx-clip-foot .date .side-icon { width: 12px; height: 12px; }
.lx-clip-foot .go {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lx-border);
    border-radius: 8px;
    color: var(--lx-ink-2);
    transition: .13s;
}
.lx-clip-foot .go:hover { border-color: transparent; background: var(--lx-accent-deep); color: #fff; }
.lx-clip-foot .go .side-icon { width: 15px; height: 15px; }

/* Empty state: lulosa keeps the brand purple here, not the clipper blue. */
.lx-blank-icon { background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(239,68,68,.1)); color: #7c3aed; }
.lx-blank p { max-width: 448px; }
.lx-page .lx-btn.is-brand {
    border: 0;
    background: linear-gradient(135deg, #7c3aed, rgba(124,58,237,.85));
    color: #fafafa;
    box-shadow: 0 4px 14px -6px rgba(124,58,237,.6);
}
.lx-page .lx-btn.is-outline { border-width: 2px; }

@media (max-width: 1200px) {
    .lx-clipgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .lx-clipgrid { grid-template-columns: minmax(0, 1fr); }
}

/* The callout's action column must not share width with the copy. */
.lx-mkt-callout > .lx-mkt-callout-actions { flex: 0 0 auto; }
/* Only the marketplace carries the extra mobile-block offset in the reference layout. */
.lx-page.lx-mkt { margin-top: 40px; }

/* The reference page collapses the result line's margin into the section gap. */
.lx-resline:first-child { margin-top: 0; }
.lx-stack > .lx-resline { margin-top: 2px; }
.lx-resline .n { line-height: 1.5; }

/* ==========================================================================
   Campaign detail (in-panel)
   ========================================================================== */

.lx-cdp { width: min(100%, 1224px); margin-top: 0; gap: 0; }
.cdp-top { display: flex; flex-direction: column; gap: 24px; }
.cdp-cover {
    position: relative;
    min-height: 236px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 20px;
    background: var(--lx-panel-2);
}
.cdp-cover .gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.cdp-cover.is-blank {
    background:
        radial-gradient(circle at 22% 25%, rgba(124,58,237,.22), transparent 58%),
        radial-gradient(circle at 78% 70%, rgba(var(--lx-role-rgb),.22), transparent 58%),
        var(--lx-panel-2);
}
.cdp-cover-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.28) 42%, rgba(255,255,255,.88));
}
.cdp-cover-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.cdp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(8px);
    color: var(--lx-ink);
    font-size: 12.5px;
    font-weight: 600;
}
.cdp-back:hover { background: #fff; }
.cdp-back .side-icon { width: 14px; height: 14px; }
.cdp-cover-bottom { position: relative; z-index: 2; padding: 0 22px 20px; }
.cdp-kind {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(7px);
    color: var(--lx-ink-2);
    font-size: 11px;
    font-weight: 600;
}
.cdp-cover-bottom h1 {
    margin: 10px 0 0;
    font-family: var(--lx-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--lx-ink);
}
.cdp-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--lx-ink-2);
    font-size: 12.5px;
}
.cdp-meta b { color: var(--lx-ink); font-weight: 600; }
.cdp-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cdp-meta .side-icon { width: 14px; height: 14px; }
.cdp-dot { color: var(--lx-ink-3); }
.cdp-plats { display: inline-flex; gap: 6px; color: var(--lx-ink-2); }

.cdp-guide {
    overflow: hidden;
    border: 1px solid rgba(var(--lx-role-rgb),.25);
    border-radius: 16px;
    background: rgba(var(--lx-role-rgb),.04);
}
.cdp-guide-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; }
.cdp-guide-head > div { min-width: 0; flex: 1; }
.cdp-guide-head h2 { margin: 0; font-family: var(--lx-display); font-size: 18px; font-weight: 600; color: var(--lx-ink); }
.cdp-guide-head p { margin: 6px 0 0; color: var(--lx-ink-2); font-size: 13px; line-height: 1.55; }
.cdp-guide-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(var(--lx-role-rgb),.12);
    color: var(--lx-role-fg);
}
.cdp-guide-icon .side-icon { width: 17px; height: 17px; }
.cdp-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(var(--lx-role-rgb),.18);
    background: rgba(255,255,255,.6);
}
.cdp-step { display: flex; gap: 12px; padding: 18px 22px; border-right: 1px solid var(--lx-line-soft); border-bottom: 1px solid var(--lx-line-soft); }
.cdp-step:nth-child(2n) { border-right: 0; }
.cdp-step:nth-last-child(-n+2) { border-bottom: 0; }
.cdp-step > div { min-width: 0; flex: 1; }
.cdp-step-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
}
.cdp-step-icon .side-icon { width: 15px; height: 15px; }
.cdp-step-n {
    display: block;
    font-family: var(--lx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lx-ink-3);
}
.cdp-step strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--lx-ink); }
.cdp-step p { margin: 6px 0 0; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.5; }
.cdp-step .lx-btn { margin-top: 12px; min-height: 36px; height: 36px; padding: 0 12px; font-size: 13px; }

.cdp-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 28px; align-items: start; }
.cdp-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.cdp-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--lx-border); overflow-x: auto; }
.cdp-tabs::-webkit-scrollbar { display: none; }
.lx-page button.cdp-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 15px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--lx-ink-2);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.lx-page button.cdp-tab.on { color: var(--lx-ink); }
.cdp-tab.on::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2.5px;
    border-radius: 3px 3px 0 0;
    background: var(--lx-role);
}
.cdp-tab .t-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-3);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cdp-tab.on .t-count { background: rgba(var(--lx-role-rgb),.14); color: var(--lx-role-fg); }
.cdp-panel { display: flex; flex-direction: column; gap: 22px; }
.cdp-panel[hidden] { display: none; }
.cdp-card {
    padding: 24px 26px;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.cdp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cdp-card h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--lx-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--lx-ink);
}
.cdp-card h2 .side-icon { width: 16px; height: 16px; color: var(--lx-ink-3); }
.cdp-card-note { color: var(--lx-ink-3); font-size: 12px; }
.cdp-brief { margin: 0; color: var(--lx-ink-2); font-size: 13.5px; line-height: 1.65; }
.cdp-kicker {
    display: block;
    font-family: var(--lx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lx-ink-3);
}
.cdp-best { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lx-line-soft); }
.cdp-best p { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--lx-ink-2); font-size: 13px; line-height: 1.5; }
.cdp-best .side-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--lx-success); }
.cdp-source-list { display: flex; flex-direction: column; gap: 8px; }
.cdp-source-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--lx-panel-2);
    color: var(--lx-ink);
    font-size: 12.5px;
}
.cdp-source-list a span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-source-list .side-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--lx-ink-3); }
.cdp-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cdp-checklist > div { padding: 13px 14px; border: 1px solid var(--lx-line-soft); border-radius: 12px; background: rgba(255,255,255,.6); }
.cdp-checklist strong { display: block; margin-top: 6px; color: var(--lx-ink); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.cdp-kv { display: flex; flex-direction: column; gap: 2px; }
.cdp-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--lx-line-soft); }
.cdp-kv > div:last-child { border-bottom: 0; }
.cdp-kv span { color: var(--lx-ink-2); font-size: 13px; }
.cdp-kv b { color: var(--lx-ink); font-size: 13px; font-weight: 600; }
.cdp-kv i { color: var(--lx-ink-3); font-size: 11px; font-style: normal; }
.cdp-kv.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--lx-line-soft); }
.cdp-kv.is-grid > div { flex-direction: column; align-items: flex-start; gap: 3px; padding: 0; border: 0; }
.cdp-kv.is-grid span { font-size: 11.5px; color: var(--lx-ink-3); }
.cdp-kv.is-grid b { font-family: var(--lx-display); font-size: 15px; }

.cdp-rail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 18px; }
.cdp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lx-ink-3);
}
.cdp-eyebrow .side-icon { width: 14px; height: 14px; color: var(--lx-role-fg); }
.lx-page .cdp-submit { margin-top: 14px; min-height: 44px; }
.cdp-checks { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.cdp-checks span { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.cdp-checks .side-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
.cdp-checks .is-ok, .cdp-checks span.is-ok { color: var(--lx-ink-2); }
.cdp-checks .is-ok .side-icon { color: var(--lx-success); }
.cdp-checks .is-warn { color: var(--lx-pending-fg); }
.cdp-hint { margin: 12px 0 0; color: var(--lx-ink-3); font-size: 11.5px; line-height: 1.5; }
.cdp-payout { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.cdp-payout .lx-amt { font-size: 34px; }
.cdp-payout em { color: var(--lx-ink-3); font-size: 12.5px; font-style: normal; }
.cdp-budget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--lx-line-soft);
    color: var(--lx-ink-2);
    font-size: 12.5px;
}
.cdp-budget span { display: inline-flex; align-items: center; gap: 7px; }
.cdp-budget .side-icon { width: 14px; height: 14px; color: var(--lx-ink-3); }
.cdp-budget b { color: var(--lx-ink); font-family: var(--lx-display); font-size: 15px; font-weight: 600; }

@media (max-width: 1200px) {
    .cdp-grid { grid-template-columns: minmax(0, 1fr); }
    .cdp-rail { position: static; }
    .cdp-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .cdp-steps { grid-template-columns: minmax(0, 1fr); }
    .cdp-step { border-right: 0; }
    .cdp-step:nth-last-child(-n+2) { border-bottom: 1px solid var(--lx-line-soft); }
    .cdp-step:last-child { border-bottom: 0; }
    .cdp-cover-bottom h1 { font-size: 23px; }
    .cdp-checklist { grid-template-columns: minmax(0, 1fr); }
    .cdp-card { padding: 18px 16px; }
}

/* Modal chrome inside the panel must beat the global dark button rule. */
body:has(.app-shell) .cfc-modal-close {
    background: #fff;
    color: #111827;
    box-shadow: none;
    font-weight: 400;
}
body:has(.app-shell) .cfc-modal-close:hover { background: #f1f1f6; }
.app-shell.lx-shell .cfc-modal .button.primary,
.app-shell.lx-shell .cfc-modal button.primary {
    background: var(--lx-accent-deep);
    box-shadow: none;
    color: #fff;
}
.app-shell.lx-shell .cfc-modal .button.ghost {
    border: 1px solid var(--lx-border);
    background: #fff;
    color: #09090b;
    box-shadow: none;
}
.app-shell.lx-shell .cfc-modal .button.ghost:hover { background: var(--lx-panel-2); }

/* ==========================================================================
   Wallet — lulosa wgrid / wbal / wcard system
   ========================================================================== */

.lx-wallet .wgrid { display: grid; gap: 20px; align-items: start; }
.wgrid.wg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wgrid.g-hold { grid-template-columns: minmax(0, 1fr) 366px; }
.wcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--lx-card-sh);
}
.wcard-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.wcard-ht {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--lx-display);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: #09090b;
}
.wcard-ht .side-icon { width: 17px; height: 17px; color: var(--lx-ink-3); }
.wcard-b { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; }
.wcard-tag {
    padding: 5px 10px;
    border: 1px solid var(--lx-border);
    border-radius: 999px;
    background: var(--lx-muted, #f1f1f6);
    color: var(--lx-ink-3);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.wcard-empty {
    flex: 1;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lx-ink-3);
    font-size: 14px;
}

.wbal {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--lx-card-sh);
}
.wbal-engrave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .1;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(var(--lx-role-rgb),.9) 0deg 0.35deg, transparent 0.35deg 15deg),
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(var(--lx-role-rgb),.55) 58.6%, transparent 59.4%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
}
.wbal-main {
    position: relative;
    padding: 26px 28px;
    border-right: 1px solid var(--lx-border);
    background: rgba(var(--lx-role-rgb),.05);
}
.wbal-main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 88% 8%, rgba(var(--lx-role-rgb),.12), transparent 55%);
}
.wbal-eye {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lx-role-fg);
}
.wbal-eye .side-icon { width: 15px; height: 15px; }
.wbal-amt { position: relative; z-index: 1; margin: 16px 0 0; }
.wbal-amt .lx-amt { font-size: 46px; letter-spacing: -.025em; }
.wbal-amt .lx-amt .pre { font-size: .44em; vertical-align: .62em; margin-right: 2px; top: 0; position: static; }
.wbal-amt .lx-amt .c { font-size: .4em; font-weight: 600; vertical-align: .78em; margin-left: 3px; top: 0; position: static; color: var(--lx-ink-2); }
.wbal-prog { position: relative; z-index: 1; margin-top: 14px; max-width: 340px; }
.wbal-prog-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--lx-ink-2);
    font-size: 12.5px;
}
.wbal-prog-top b { color: var(--lx-ink); font-weight: 600; }
.wbal-prog-bar { height: 6px; border-radius: 999px; background: var(--lx-border); overflow: hidden; }
.wbal-prog-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--lx-role-rgb),.6), var(--lx-role)); }
.wbal-note {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lx-ink-3);
    font-size: 12.5px;
}
.wbal-note .side-icon { width: 13px; height: 13px; }
.wbal-cta { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.lx-page .wbtn {
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
.lx-page .wbtn .side-icon { width: 17px; height: 17px; }
.lx-page .wbtn.primary { background: var(--lx-role); color: #fff; box-shadow: 0 1px 2px rgba(var(--lx-role-rgb),.4); }
.lx-page .wbtn.primary[disabled] { opacity: .5; cursor: not-allowed; }
.lx-page .wbtn.ghost { border: 1px solid var(--lx-border); background: #fff; color: #09090b; }
.lx-page .wbtn.ghost:hover { background: var(--lx-panel-2); }
.wbal-side { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 22px 24px; }
.wbal-brk { display: flex; flex-direction: column; gap: 14px; }
.wbal-row { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.wbal-row .ico {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lx-border);
    border-radius: 11px;
    background: var(--lx-panel-2);
}
.wbal-row .ico .side-icon { width: 18px; height: 18px; color: var(--lx-ink-3); }
.wbal-row .ico.hold .side-icon { color: var(--lx-pending-fg); }
.wbal-row .ico.dep .side-icon { color: var(--lx-success-fg); }
.wbal-row .tx { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wbal-row .tx .k { color: var(--lx-ink-2); font-size: 12.5px; }
.wbal-row .tx .v { color: var(--lx-ink); font-family: var(--lx-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wbal-life {
    margin-top: auto;
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    border-top: 1px solid var(--lx-border);
}
.wbal-life .li { display: flex; flex-direction: column; gap: 5px; }
.wbal-life .li span { color: var(--lx-ink-3); font-size: 11.5px; }
.wbal-life .li b { color: var(--lx-ink); font-family: var(--lx-display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.wtier { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.wtier-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wtier-now { display: flex; flex-direction: column; gap: 7px; }
.wtier-badge {
    align-self: flex-start;
    padding: 5px 10px;
    border: 1px solid rgba(var(--lx-role-rgb),.26);
    border-radius: 8px;
    background: rgba(var(--lx-role-rgb),.12);
    color: var(--lx-role-fg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.wtier-lbl { color: var(--lx-ink-2); font-size: 12.5px; }
.wtier-hold { text-align: right; }
.wtier-hold .v { display: block; font-family: var(--lx-display); font-size: 22px; font-weight: 600; line-height: 1; color: var(--lx-ink); }
.wtier-hold .k { color: var(--lx-ink-3); font-size: 11px; }
.wtier-bar { height: 8px; border-radius: 999px; background: var(--lx-border); overflow: hidden; }
.wtier-bar .fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--lx-role-rgb),.65), var(--lx-role)); }
.wtier-goal { display: flex; gap: 8px; color: var(--lx-ink-2); font-size: 12px; line-height: 1.5; }
.wtier-goal .side-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: var(--lx-role-fg); }
.wtier-stats {
    margin-top: auto;
    padding-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid var(--lx-border);
}
.wtier-stats .ts { display: flex; flex-direction: column; gap: 4px; }
.wtier-stats .ts .v { color: var(--lx-ink); font-family: var(--lx-display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wtier-stats .ts .k { color: var(--lx-ink-3); font-size: 10.5px; line-height: 1.3; }
.wtier-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid var(--lx-border); }
.wtier-links a { color: var(--lx-role-fg); font-size: 11.5px; font-weight: 500; }

.wearn-bars { flex: 1; min-height: 130px; display: flex; align-items: flex-end; gap: 10px; }
.wearn-bars i { flex: 1; border-radius: 6px 6px 0 0; background: rgba(var(--lx-accent-rgb),.45); }
.wearn-x { margin-top: 8px; display: flex; justify-content: space-between; color: var(--lx-ink-3); font-size: 10.5px; font-weight: 500; }

.whold-empty { padding: 22px 8px; text-align: center; color: var(--lx-ink-3); font-size: 13px; line-height: 1.5; }
.whold-list { display: flex; flex-direction: column; }
.whold { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lx-border); }
.whold:first-child { padding-top: 4px; }
.whold:last-child { border-bottom: 0; padding-bottom: 2px; }
.whold-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(219,119,6,.12); }
.whold-ic .side-icon { width: 16px; height: 16px; color: var(--lx-pending-fg); }
.whold-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.whold-tx .nm { color: var(--lx-ink); font-size: 13px; font-weight: 600; }
.whold-tx .dt { color: var(--lx-ink-3); font-size: 11px; }
.whold-v { color: var(--lx-ink); font-family: var(--lx-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.wrail-list { display: flex; flex-direction: column; gap: 10px; }
.wrail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--lx-border);
    border-radius: 13px;
    background: var(--lx-panel-2);
}
.wrail.add { border-style: dashed; }
.wrail.on { border-color: rgba(var(--lx-role-rgb),.4); background: rgba(var(--lx-role-rgb),.06); }
.wrail-mk {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: #fff;
    color: var(--lx-ink-2);
    font-family: var(--lx-mono);
    font-size: 12px;
    font-weight: 700;
}
.wrail-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wrail-nm { display: flex; align-items: center; gap: 7px; color: var(--lx-ink); font-size: 13px; font-weight: 600; line-height: 1.2; }
.wrail-badge {
    padding: 3px 7px;
    border: 1px solid rgba(var(--lx-role-rgb),.26);
    border-radius: 6px;
    background: rgba(var(--lx-role-rgb),.12);
    color: var(--lx-role-fg);
    font-size: 10px;
    font-weight: 600;
}
.wrail-sub { color: var(--lx-ink-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrail-ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--lx-success-fg); font-size: 11px; }
.wrail-ok .side-icon { width: 13px; height: 13px; }
.wrail-mut { margin-top: 2px; color: var(--lx-ink-3); font-size: 11px; }
.lx-page .wrail-set {
    flex: none;
    padding: 7px 11px;
    border: 1px solid var(--lx-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: var(--lx-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    min-height: 0;
}
.lx-page .wrail-add {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid rgba(var(--lx-role-rgb),.24);
    border-radius: 8px;
    background: rgba(var(--lx-role-rgb),.1);
    box-shadow: none;
    color: var(--lx-role-fg);
    font-size: 11.5px;
    font-weight: 600;
    min-height: 0;
}
.lx-page .wrail-add .side-icon { width: 13px; height: 13px; }
.wrail-manage {
    margin: 14px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--lx-ink-3);
    font-size: 11.5px;
    line-height: 1.5;
}
.wrail-manage .side-icon { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }

.wtx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; flex-wrap: wrap; }
.wtx-filt { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wtx-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.wtx-range { width: 152px; }
.wtx-scope { margin: 0 2px 12px; color: var(--lx-ink-3); font-size: 11px; line-height: 1.45; }
.wtx-panel { border-top: 1px solid var(--lx-border); padding-top: 12px; }
.wtx-head {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 14px;
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--lx-border);
    color: var(--lx-ink-3);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wtx-head .c-amt { text-align: right; }
.wtx-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.wtx { display: grid; grid-template-columns: auto 1fr 130px; gap: 14px; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--lx-border); }
.wtx:last-child { border-bottom: 0; }
.wtx-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; }
.wtx-ic .side-icon { width: 16px; height: 16px; }
.wtx-ic.earn { background: rgba(16,183,127,.12); }
.wtx-ic.earn .side-icon { color: var(--lx-success-fg); }
.wtx-ic.out { border: 1px solid var(--lx-border); background: var(--lx-panel-2); }
.wtx-ic.out .side-icon { color: var(--lx-ink-3); }
.wtx-ic.ink { background: var(--lx-panel-2); }
.wtx-ic.ink .side-icon { color: var(--lx-ink-3); }
.wtx-ic.bonus { background: rgba(219,119,6,.14); }
.wtx-ic.bonus .side-icon { color: var(--lx-pending-fg); }
.wtx-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wtx-d { color: var(--lx-ink); font-size: 13px; font-weight: 500; line-height: 1.3; }
.wtx-dt { color: var(--lx-ink-3); font-size: 11px; }
.wtx-amt { text-align: right; font-family: var(--lx-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wtx-amt.pos { color: var(--lx-earned-fg); }
.wtx-amt.neg { color: var(--lx-ink); }

@media (max-width: 1100px) {
    .wgrid.wg2, .wgrid.g-hold { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .wbal { grid-template-columns: minmax(0, 1fr); }
    .wbal-main { border-right: 0; border-bottom: 1px solid var(--lx-border); }
    .wbal-cta .wbtn, .wbal-cta form { flex: 1; }
    .lx-page .wbtn { width: 100%; }
    .wtx { grid-template-columns: auto 1fr; }
    .wtx-amt { grid-column: 2; text-align: left; }
}

/* ==========================================================================
   Refer & Earn
   ========================================================================== */

.mref { --mr-accent: var(--lx-accent-deep); --mr-accent-fg: var(--lx-role-fg); }
.mref .mr-wrap { width: 100%; max-width: 1060px; margin: 0 auto; }
.mref .mr-ph {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lx-line-soft);
}
.mref .mr-disp { margin: 0; font-family: var(--lx-display); font-size: 31px; font-weight: 500; line-height: 1.05; color: var(--lx-ink); }
.mref .mr-sub { max-width: 56ch; margin: 8px 0 0; color: var(--lx-ink-2); font-size: 13.5px; font-weight: 450; }
.mref .mr-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.lx-page .mr-btn {
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border: 0;
    border-radius: 9px;
    background: none;
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 600;
}
.lx-page .mr-btn .side-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.lx-page .mr-btn.primary { background: var(--mr-accent); color: #fff; }
.lx-page .mr-btn.ghost { border: 1px solid var(--lx-line); color: var(--lx-ink-2); }
.lx-page .mr-btn.ghost:hover { background: var(--lx-panel-2); }
.mref .mr-grid { display: grid; gap: 20px; margin-top: 24px; }
.mref .mr-g2a { grid-template-columns: 1.05fr .95fr; }
.mref .mr-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mref .mr-card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.mref .mr-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.mref .mr-ttl { margin: 0; font-family: var(--lx-display); font-size: 14.5px; font-weight: 600; line-height: 1; color: var(--lx-ink); }
.mref .mr-card-hd .side-icon { width: 15px; height: 15px; flex: none; color: var(--mr-accent-fg); }
.mref .mr-sp { flex: 1; }
.mref .mr-active {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(var(--lx-role-rgb),.25);
    border-radius: 99px;
    background: rgba(var(--lx-role-rgb),.08);
    color: var(--mr-accent-fg);
    font-size: 12px;
    font-weight: 600;
}
.mref .mr-active .side-icon { width: 12px; height: 12px; }
.mref .mr-amt { display: block; margin-top: 14px; font-size: 44px; letter-spacing: -.03em; }
.mref .mr-capwrap { margin-top: 18px; }
.mref .mr-capline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mref .mr-cl { color: var(--lx-ink-2); font-size: 12.5px; }
.mref .mr-cv { color: var(--lx-ink); font-family: var(--lx-mono); font-size: 12.5px; font-weight: 600; }
.mref .mr-bar { height: 6px; border-radius: 999px; background: var(--lx-panel-2); overflow: hidden; }
.mref .mr-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--lx-role-rgb),.6), var(--lx-role)); }
.mref .mr-cap-fn { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: var(--lx-ink-3); font-size: 12px; line-height: 1.45; }
.mref .mr-cap-fn .side-icon { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 1px; }
.mref .mr-share-lede { margin: 14px 0 0; color: var(--lx-ink-2); font-size: 13px; font-weight: 450; line-height: 1.55; }
.mref .mr-linkfield { margin-top: 16px; display: flex; gap: 10px; }
.mref .mr-lf {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 10px;
    background: var(--lx-panel-2);
    overflow: hidden;
}
.mref .mr-lf code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--lx-mono);
    font-size: 13px;
    color: var(--lx-ink);
}
.mref .mr-lf-pre { color: var(--lx-ink-3); }
.lx-page .mr-cpy {
    flex: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--mr-accent);
    box-shadow: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.lx-page .mr-cpy .side-icon { width: 15px; height: 15px; }
.mref .mr-sharerow { margin-top: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lx-page .mr-act {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--lx-ink);
    font-size: 12.5px;
    font-weight: 600;
}
.lx-page .mr-act:hover { background: var(--lx-panel-2); }
.lx-page .mr-act .side-icon { width: 15px; height: 15px; }
.mref .mr-codehint { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; color: var(--lx-ink-3); font-size: 12.5px; }
.mref .mr-codehint b { color: var(--lx-ink); font-family: var(--lx-mono); font-weight: 600; letter-spacing: .03em; }
.mref .mr-share-tip { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 8px; color: var(--lx-ink-3); font-size: 12px; line-height: 1.45; }
.mref .mr-share-tip .side-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--mr-accent-fg); }
.mref .mr-funnel-card { margin-top: 20px; }
.mref .mr-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 4px; }
.mref .mr-fn { display: flex; flex-direction: column; gap: 5px; }
.mref .mr-fn .k { color: var(--lx-ink-2); font-size: 12.5px; }
.mref .mr-fn .v { font-family: var(--lx-display); font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.mref .mr-fn .v.is-paid { color: var(--lx-earned-fg); }
.mref .mr-fn .s { color: var(--lx-ink-3); font-size: 11.5px; }
.mref .mr-tip-title { margin: 14px 0 0; font-family: var(--lx-display); font-size: 14.5px; font-weight: 600; color: var(--lx-ink); }
.mref .mr-tip-body { margin: 6px 0 0; color: var(--lx-ink-3); font-size: 12.5px; font-weight: 450; line-height: 1.5; }
.mref .mr-tip-cta {
    align-self: flex-start;
    min-height: 44px;
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(5,148,103,.3);
    border-radius: 11px;
    background: rgba(5,148,103,.1);
    color: var(--lx-earned-fg);
    font-size: 13px;
    font-weight: 600;
}
.mref .mr-tip-cta .side-icon { width: 15px; height: 15px; }
.mref .mr-close-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.mref .mr-close { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.mref .mr-close-tx { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mref .mr-close-tx .nm { color: var(--lx-ink); font-size: 13px; font-weight: 600; }
.mref .mr-close-tx .dt { color: var(--lx-ink-3); font-size: 11.5px; }
.mref .mr-close .mr-bar { grid-column: 1; }
.mref .mr-close-pct { grid-row: 1 / 3; color: var(--lx-ink-2); font-family: var(--lx-mono); font-size: 12px; font-weight: 600; }
.mref .mr-sec { display: flex; align-items: center; gap: 14px; margin: 38px 0 4px; }
.mref .mr-sec h2 { margin: 0; font-family: var(--lx-display); font-size: 14.5px; font-weight: 600; line-height: 1; color: var(--lx-ink); }
.mref .mr-sec-r { color: var(--lx-ink-3); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mref .mr-list-card { margin-top: 12px; padding: 8px 24px; }
.mref .mr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mref .mr-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lx-line-soft); }
.mref .mr-row:last-child { border-bottom: 0; }
.mref .mr-av {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(var(--lx-role-rgb),.14);
    color: var(--mr-accent-fg);
    font-size: 13px;
    font-weight: 700;
}
.mref .mr-row-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mref .mr-row-tx .nm { color: var(--lx-ink); font-size: 13px; font-weight: 600; }
.mref .mr-row-tx .dt { color: var(--lx-ink-3); font-size: 11.5px; }
.mref .mr-row-v { color: var(--lx-ink); font-family: var(--lx-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mref .mr-hiw {
    margin-top: 20px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.mref .mr-hiw summary { display: flex; align-items: center; gap: 11px; padding: 18px 24px; cursor: pointer; list-style: none; }
.mref .mr-hiw summary::-webkit-details-marker { display: none; }
.mref .mr-hiw summary .side-icon { width: 16px; height: 16px; flex: none; color: var(--mr-accent-fg); }
.mref .mr-hiw-st { flex: 1; color: var(--lx-ink); font-size: 14px; font-weight: 600; }
.mref .mr-hiw summary .side-icon:last-child { color: var(--lx-ink-3); }
.mref .mr-hiw[open] summary .side-icon:last-child { transform: rotate(180deg); }
.mref .mr-hiw-body { padding: 0 24px 22px; color: var(--lx-ink-2); font-size: 13.5px; line-height: 1.6; }
.mref .mr-hiw-body ul { margin: 12px 0 0; padding-left: 20px; }
.mref .mr-hiw-body li { margin-bottom: 6px; }

@media (max-width: 1000px) {
    .mref .mr-g2a, .mref .mr-g2 { grid-template-columns: minmax(0, 1fr); }
    .mref .mr-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .mref .mr-ph { flex-direction: column; align-items: flex-start; }
    .mref .mr-acts { width: 100%; }
    .lx-page .mr-btn { flex: 1; justify-content: center; }
    .mref .mr-disp { font-size: 25px; }
    .mref .mr-row { grid-template-columns: 34px 1fr; }
    .mref .mr-row .lx-badge, .mref .mr-row-v { grid-column: 2; }
}
.wrail-nm { flex-wrap: wrap; }

/* Referrals: match the reference page's top offset and funnel metrics. */
.lx-page.mref { margin-top: 16px; }
.mref .mr-fn .k { font-size: 12px; line-height: 18px; font-weight: 500; }
.mref .mr-fn .v { font-size: 32px; line-height: 32px; font-weight: 600; }
.mref .mr-fn .s { font-size: 11.5px; line-height: 17.25px; font-weight: 450; }
.mref .mr-fn { gap: 6px; }
.lx-page.lx-wallet { margin-top: 8px; }

/* Withdrawal queue + payout method modals */
.wbal-queued {
    position: relative;
    z-index: 1;
    margin: 14px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--lx-pending-fg);
    font-size: 12px;
    line-height: 1.45;
}
.wbal-queued .side-icon { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
.wrail .wrail-set + form { margin-left: 6px; }
.wd-methods { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; padding: 0; border: 0; }
.wd-methods legend { padding: 0; margin-bottom: 6px; color: var(--lx-ink-2); font-size: 13px; font-weight: 600; }
.wd-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--lx-border);
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}
.wd-method:has(input:checked) { border-color: rgba(var(--lx-role-rgb),.5); background: rgba(var(--lx-role-rgb),.06); }
.wd-method input { width: 16px; height: 16px; min-height: 0; flex: none; margin: 0; }
.wd-method span { display: flex; flex-direction: column; gap: 2px; }
.wd-method b { color: var(--lx-ink); font-size: 13.5px; font-weight: 600; }
.wd-method small { color: var(--lx-ink-3); font-size: 11.5px; }
.modal-form label small { color: var(--lx-ink-3); font-weight: 400; }

/* ==========================================================================
   Academy
   ========================================================================== */

.acad-head { align-items: flex-end; }
.acad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 22px; align-items: start; margin-top: 20px; }
.acad-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.acad .abadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.acad .abadge .side-icon { width: 12px; height: 12px; }
.acad .abadge.video { border: 1px solid rgba(var(--lx-accent-rgb),.4); color: var(--lx-role-fg); }
.acad .abadge.new { border: 1px solid rgba(16,183,127,.4); color: var(--lx-success-fg); }
.acad .abadge.done { border: 1px solid rgba(16,183,127,.4); background: rgba(16,183,127,.1); color: var(--lx-success-fg); }
.acad .abadge.level,
.acad .abadge.xp { border: 1px solid var(--lx-line-soft); background: rgba(255,255,255,.7); color: var(--lx-ink-2); padding: 6px 11px; font-size: 12px; }
.acad .acourse { margin-top: 0; }
.acad .acourse .lx-cover { aspect-ratio: auto; height: 100%; min-height: 250px; }
.acad .acourse .cat {
    position: absolute;
    top: 11px;
    right: 11px;
    padding: 3px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(7px);
    color: var(--lx-ink);
    font-family: var(--lx-display);
    font-size: 10.5px;
    font-weight: 600;
}
.acad .ft-ttl { display: block; margin-top: 11px; font-family: var(--lx-display); font-size: 23px; font-weight: 600; line-height: 1.15; color: var(--lx-ink); }
.acad .credline { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--lx-ink-2); font-size: 13px; font-weight: 500; }
.acad .credline b { color: var(--lx-ink); font-weight: 600; }
.acad .credline .mml {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.acad .credline .mml .side-icon { width: 12px; height: 12px; }
.acad .ft-rate .big .lx-amt { font-size: 40px; }
.acad .ft-rate .big .lx-amt .c { color: var(--lx-ink-2); }
.acad .acourse-next { margin: 16px 0 0; font-size: 13px; }
.acad .acourse-next span { display: block; color: var(--lx-ink-3); font-size: 11.5px; }
.acad .acourse-next b { color: var(--lx-ink); font-weight: 600; }
.acad .aprog { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 150px; }
.acad .aprog .track { flex: 1; height: 8px; border-radius: 99px; background: var(--lx-panel-2); overflow: hidden; }
.acad .aprog .fill { display: block; height: 100%; border-radius: 99px; background: var(--lx-success); }
.acad .aprog .lbl { flex: none; color: var(--lx-ink-3); font-family: var(--lx-mono); font-size: 11px; }
.lx-page .abtn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    background: none;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
}
.lx-page .abtn .side-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.lx-page .abtn.pri { background: var(--lx-accent-deep); color: #fff; }
.lx-page .abtn.ghost { border: 1px solid var(--lx-border); background: #fff; color: var(--lx-ink); }
.lx-page .abtn.ghost:hover { background: var(--lx-panel-2); }
.lx-page .abtn.block { width: 100%; margin-top: 12px; }
.acad .headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.acad .sec-h { margin: 0; font-family: var(--lx-display); font-size: 18px; font-weight: 600; color: var(--lx-ink); }
.acad .sec-sub { margin: 4px 0 0; color: var(--lx-ink-2); font-size: 13px; }
.acad .modc {
    padding: 16px 17px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.6);
    box-shadow: var(--lx-card-sh);
}
.acad .modc + .modc { margin-top: 12px; }
.acad .modh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acad .modey { margin: 0; font-family: var(--lx-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--lx-ink-3); }
.acad .modn { margin: 3px 0 0; font-family: var(--lx-display); font-size: 16px; font-weight: 600; color: var(--lx-ink); }
.acad .modmeta { margin: 2px 0 0; color: var(--lx-ink-3); font-size: 12px; }
.acad .lzlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acad .lz {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 13px;
    background: rgba(255,255,255,.5);
    transition: .14s;
}
.acad a.lz.can:hover { border-color: rgba(var(--lx-accent-rgb),.5); background: rgba(var(--lx-accent-rgb),.05); }
.acad .lz.locked { opacity: .55; }
.acad .lz .lzic { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; }
.acad .lz .lzic .side-icon { width: 18px; height: 18px; }
.acad .lz .lzic.video { background: rgba(var(--lx-accent-rgb),.12); color: var(--lx-role-fg); }
.acad .lz .lzic.done { background: rgba(16,183,127,.13); color: var(--lx-success-fg); }
.acad .lz .lzic.lock { background: var(--lx-panel-2); color: var(--lx-ink-3); }
.acad .lz .lzb { min-width: 0; flex: 1; }
.acad .lz .lzt { display: block; font-size: 14px; font-weight: 600; color: var(--lx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acad .lzm { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--lx-ink-3); font-size: 12px; }
.acad .lzm .side-icon { width: 12px; height: 12px; }
.acad .lz .lzact { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--lx-role-fg); font-size: 12.5px; font-weight: 600; }
.acad .lz .lzact .side-icon { width: 15px; height: 15px; }
.acad .lz .lzact.mut { color: var(--lx-ink-3); }
.acad .arail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 15px; }
.acad .rcard {
    padding: 17px 18px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.acad .rcard .rh { margin: 0 0 13px; font-size: 13px; font-weight: 600; color: var(--lx-ink); }
.acad .cred-in { display: flex; align-items: center; gap: 13px; }
.acad .cred-in .medal {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-3);
}
.acad .cred-in .medal.is-earned { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; }
.acad .cred-in .ci { min-width: 0; flex: 1; }
.acad .cred-in .cn { font-size: 13.5px; font-weight: 600; color: var(--lx-ink); }
.acad .cred-in .cst { margin-top: 2px; color: var(--lx-ink-3); font-size: 12px; }
.acad .pstat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acad .pstat .cell { padding: 11px 12px; border-radius: 12px; background: var(--lx-panel-2); }
.acad .pstat .v { margin: 0; font-family: var(--lx-display); font-size: 20px; font-weight: 600; color: var(--lx-ink); }
.acad .pstat .k { margin: 3px 0 0; color: var(--lx-ink-3); font-size: 11px; }
.acad .rnote { margin: 0; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.5; }
.acad .rtitle { margin: 8px 0 0; font-family: var(--lx-display); font-size: 14px; font-weight: 600; color: var(--lx-ink); }
.acad .rxp { margin: 6px 0 0; color: var(--lx-role-fg); font-family: var(--lx-mono); font-size: 13px; font-weight: 600; }
.acad .rxp span { font-size: 11px; }
.acad .acad-cta { border-color: rgba(var(--lx-accent-rgb),.3); background: rgba(var(--lx-accent-rgb),.06); }
.acad .acad-cta p { margin: 10px 0 0; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.5; }

/* Lesson page */
.lz-back { display: inline-flex; align-items: center; gap: 7px; color: var(--lx-ink-2); font-size: 13px; font-weight: 600; }
.lz-back .side-icon { width: 15px; height: 15px; }
.lz-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 18px;
    background:
        radial-gradient(circle at 28% 30%, rgba(124,58,237,.16), transparent 58%),
        radial-gradient(circle at 74% 70%, rgba(var(--lx-role-rgb),.2), transparent 58%),
        var(--lx-panel-2);
}
.lz-stage-play {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    color: var(--lx-role-fg);
    box-shadow: 0 12px 30px -10px rgba(var(--lx-role-rgb),.5);
}
.lz-stage-play .side-icon { width: 28px; height: 28px; }
.lz-stage-meta {
    position: absolute;
    left: 18px;
    bottom: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(7px);
    color: var(--lx-ink-2);
    font-size: 11.5px;
    font-weight: 600;
}
.lz-body h1 { margin: 6px 0 0; font-family: var(--lx-display); font-size: 25px; font-weight: 600; line-height: 1.15; color: var(--lx-ink); }
.lz-summary { margin: 14px 0 0; color: var(--lx-ink-2); font-size: 14px; line-height: 1.65; }
.lz-body .sec-h { margin-top: 22px; font-size: 15px; }
.lz-points { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lz-points li { display: flex; gap: 9px; color: var(--lx-ink-2); font-size: 13.5px; line-height: 1.55; }
.lz-points .side-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--lx-success); }
.lz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lx-line-soft); }
.lz-mini { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lz-mini a,
.lz-mini .is-locked {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 9px;
    color: var(--lx-ink-2);
    font-size: 12.5px;
    line-height: 1.35;
}
.lz-mini a:hover { background: var(--lx-panel-2); color: var(--lx-ink); }
.lz-mini .side-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--lx-ink-3); }
.lz-mini li.is-current a { background: rgba(var(--lx-accent-rgb),.1); color: var(--lx-accent-deep); font-weight: 600; }
.lz-mini .is-locked { opacity: .5; }

@media (max-width: 1100px) {
    .acad-grid { grid-template-columns: minmax(0, 1fr); }
    .acad .arail { position: static; }
}
@media (max-width: 900px) {
    .acad .acourse { grid-template-columns: minmax(0, 1fr); }
    .acad .acourse .lx-cover { min-height: 0; aspect-ratio: 16 / 9; }
    .acad .ft-foot { flex-wrap: wrap; }
    .acad .pstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Leaderboard
   ========================================================================== */

.lb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; align-items: start; }
.lb-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lb .lx-resline { margin-top: 0; }
.lb-me {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 6px;
    padding: 20px 22px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.lb-me-k { color: var(--lx-ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lb-me-v { margin-top: 8px; font-family: var(--lx-display); font-size: 25px; font-weight: 600; color: var(--lx-ink); }
.lb-me-r { margin-left: auto; text-align: right; }
.lb-me-r .v { font-family: var(--lx-display); font-size: 29px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lx-accent-deep); }
.lb-me-r .k { margin-top: 4px; color: var(--lx-ink-3); font-size: 12px; }
.lb-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
    transition: .14s;
}
.lb-row:hover { border-color: rgba(var(--lx-accent-rgb),.45); transform: translateY(-1px); }
.lb-row.is-me { border-color: rgba(var(--lx-accent-rgb),.5); background: rgba(var(--lx-accent-rgb),.06); }
.lb-rank { width: 30px; flex: 0 0 30px; display: flex; flex-direction: column; align-items: center; }
.lb-rank .m { font-size: 17px; line-height: 1; color: var(--lx-ink-2); font-family: var(--lx-mono); font-weight: 700; }
.lb-rank .d { margin-top: 3px; display: inline-flex; align-items: center; gap: 2px; color: var(--lx-ink-3); font-size: 10px; font-weight: 600; }
.lb-rank .d .side-icon { width: 11px; height: 11px; }
.lb-av {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--lx-role-rgb),.2), rgba(23,207,185,.2));
    color: var(--lx-role-fg);
    font-size: 14px;
    font-weight: 700;
}
.lb-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lb-tx .nm { color: var(--lx-ink); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tx .sub { color: var(--lx-ink-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-v { flex: none; text-align: right; }
.lb-v .v { display: block; font-family: var(--lx-display); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.lb-v .k { color: var(--lx-ink-3); font-size: 10px; }
.lb-rail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 16px; }
.lb .rcard {
    padding: 18px 20px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--lx-card-sh);
}
.lb .rcard .rh {
    margin: 0 0 14px;
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.lb-cta { border-color: rgba(var(--lx-accent-rgb),.3); background: rgba(var(--lx-accent-rgb),.06); }
.lb-cta p { margin: 10px 0 16px; color: var(--lx-ink-2); font-size: 13px; line-height: 1.5; }
.lx-cover .pill { white-space: nowrap; }

@media (max-width: 1100px) {
    .lb-grid { grid-template-columns: minmax(0, 1fr); }
    .lb-rail { position: static; }
}
@media (max-width: 700px) {
    .lb-me { flex-direction: column; align-items: flex-start; }
    .lb-me-r { margin-left: 0; text-align: left; }
}
.lx-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lx-steps-list li { display: flex; gap: 12px; color: var(--lx-ink-2); font-size: 13px; line-height: 1.5; }
.lx-steps-list b {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-family: var(--lx-mono);
    font-size: 11px;
}

/* Support ticket detail */
.lx-ticket { transition: .14s; }
.lx-ticket:hover { background: rgba(var(--lx-accent-rgb),.08); }
.lx-ticket > div { min-width: 0; flex: 1; }
.lx-ticket p { margin: 6px 0 0; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.45; }
.lx-ticket > .side-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--lx-ink-3); }
.tk-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 18px; color: var(--lx-ink-3); font-size: 12.5px; }
.tk-meta .side-icon { width: 14px; height: 14px; }
.tk-thread { display: flex; flex-direction: column; gap: 16px; }
.tk-msg { display: flex; gap: 12px; }
.tk-msg > div { min-width: 0; flex: 1; }
.tk-av {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-size: 12px;
    font-weight: 700;
}
.tk-msg.is-team .tk-av { background: rgba(var(--lx-role-rgb),.14); color: var(--lx-role-fg); font-size: 10px; }
.tk-who { display: flex; align-items: baseline; gap: 8px; color: var(--lx-ink); font-size: 13px; font-weight: 600; }
.tk-who small { color: var(--lx-ink-3); font-size: 11.5px; font-weight: 400; }
.tk-msg p { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--lx-panel-2); color: var(--lx-ink-2); font-size: 13.5px; line-height: 1.6; }
.tk-msg.is-team p { background: rgba(var(--lx-role-rgb),.07); }
.tk-reply { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lx-line-soft); }
.tk-reply label { display: block; color: var(--lx-ink-2); font-size: 13px; font-weight: 600; }
.tk-reply textarea {
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    background: #fff;
    color: var(--lx-ink);
    font-size: 13.5px;
    font-family: inherit;
}
.tk-reply-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tk-closed { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lx-line-soft); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tk-closed p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--lx-success-fg); font-size: 13px; font-weight: 600; }
.tk-closed .side-icon { width: 16px; height: 16px; }

/* Notifications, profile, settings */
.nt-list { display: flex; flex-direction: column; gap: 8px; }
.nt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 13px;
    background: var(--lx-panel-2);
    transition: .14s;
}
.nt:hover { background: rgba(var(--lx-accent-rgb),.08); }
.nt.is-unread { background: rgba(var(--lx-role-rgb),.07); }
.nt-av {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--lx-role-fg);
    font-size: 13px;
    font-weight: 700;
}
.nt-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.nt-h { display: flex; align-items: center; gap: 8px; color: var(--lx-ink); font-size: 13.5px; font-weight: 600; }
.nt-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--lx-accent-deep); }
.nt-p { color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.45; }
.nt-m { color: var(--lx-ink-3); font-size: 11.5px; }
.nt > .side-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 8px; color: var(--lx-ink-3); }
.lx-form { display: flex; flex-direction: column; gap: 14px; }
.lx-form label { display: flex; flex-direction: column; gap: 7px; color: var(--lx-ink-2); font-size: 13px; font-weight: 600; }
.lx-form input {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: #fff;
    color: var(--lx-ink);
    font-size: 14px;
}
.lx-form .lx-btn { align-self: flex-start; }
.lx-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lx-lang-grid a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--lx-line-soft);
    border-radius: 11px;
    color: var(--lx-ink-2);
    font-size: 13px;
}
.lx-lang-grid a:hover { background: var(--lx-panel-2); }
.lx-lang-grid a.is-active { border-color: rgba(var(--lx-role-rgb),.45); background: rgba(var(--lx-role-rgb),.07); color: var(--lx-accent-deep); }
.lx-lang-grid b { font-family: var(--lx-mono); font-size: 11px; letter-spacing: .04em; }
.lx-done-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; }
.lx-done-list span { display: flex; align-items: center; gap: 8px; color: var(--lx-ink-2); font-size: 12.5px; }
.lx-done-list .side-icon { width: 15px; height: 15px; color: var(--lx-success); }
.lx-done-toggle.is-open > .side-icon { transform: rotate(180deg); }

/* ==========================================================================
   Clipper panel — dark theme (the topbar toggle drives this)
   ========================================================================== */

body.theme-dark .app-shell.lx-shell {
    --lx-ink: #f4f4f7;
    --lx-ink-2: #a5a5b8;
    --lx-ink-3: #7d7d92;
    --lx-line: #2c2c3a;
    --lx-line-soft: #26262f;
    --lx-border: #2c2c3a;
    --lx-panel: #16161d;
    --lx-panel-2: #1e1e28;
    --lx-canvas: #101015;
    --lx-card-sh: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px -4px rgba(0,0,0,.45);
}
body.theme-dark .app-shell.lx-shell .lx-card,
body.theme-dark .app-shell.lx-shell .lx-ccard,
body.theme-dark .app-shell.lx-shell .lx-clip-card,
body.theme-dark .app-shell.lx-shell .lx-feat,
body.theme-dark .app-shell.lx-shell .cdp-card,
body.theme-dark .app-shell.lx-shell .wcard,
body.theme-dark .app-shell.lx-shell .wbal,
body.theme-dark .app-shell.lx-shell .mref .mr-card,
body.theme-dark .app-shell.lx-shell .mref .mr-hiw,
body.theme-dark .app-shell.lx-shell .acad .rcard,
body.theme-dark .app-shell.lx-shell .acad .modc,
body.theme-dark .app-shell.lx-shell .lb .rcard,
body.theme-dark .app-shell.lx-shell .lb-row,
body.theme-dark .app-shell.lx-shell .lb-me,
body.theme-dark .app-shell.lx-shell .lx-onboard,
body.theme-dark .app-shell.lx-shell .lx-mkt-callout,
body.theme-dark .app-shell.lx-shell .lx-search input,
body.theme-dark .app-shell.lx-shell .lx-form input,
body.theme-dark .app-shell.lx-shell .tk-reply textarea {
    background: var(--lx-panel);
    border-color: var(--lx-border);
    color: var(--lx-ink);
}
body.theme-dark .app-shell.lx-shell .lx-topbar { background: rgba(16,16,21,.85); border-bottom-color: var(--lx-border); color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .lx-topbar .theme-toggle,
body.theme-dark .app-shell.lx-shell .lx-topbar .top-link.iconish { color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .lx-topbar .avatar-chip small strong { color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .lx-page,
body.theme-dark .app-shell.lx-shell .lx-dash { color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell h1,
body.theme-dark .app-shell.lx-shell h2,
body.theme-dark .app-shell.lx-shell h3,
body.theme-dark .app-shell.lx-shell .lx-page-title,
body.theme-dark .app-shell.lx-shell .ctitle,
body.theme-dark .app-shell.lx-shell .wcard-ht,
body.theme-dark .app-shell.lx-shell .lx-amt { color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .lx-tabs { background: rgba(30,30,40,.6); border-color: var(--lx-border); }
body.theme-dark .app-shell.lx-shell .lx-tab.is-active,
body.theme-dark .app-shell.lx-shell .lx-page button.lx-tab.is-active { background: var(--lx-panel); color: var(--lx-ink); box-shadow: none; }
body.theme-dark .app-shell.lx-shell .lx-selpill,
body.theme-dark .app-shell.lx-shell .lx-page button.lx-selpill { background: var(--lx-panel); border-color: var(--lx-border); color: var(--lx-ink-2); }
body.theme-dark .app-shell.lx-shell .lx-page .lx-btn,
body.theme-dark .app-shell.lx-shell .lx-page .cbtn,
body.theme-dark .app-shell.lx-shell .lx-page .abtn.ghost,
body.theme-dark .app-shell.lx-shell .lx-page .wbtn.ghost { background: var(--lx-panel); border-color: var(--lx-border); color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .lx-cover,
body.theme-dark .app-shell.lx-shell .lx-cover.is-blank { background: var(--lx-panel-2); }
body.theme-dark .app-shell.lx-shell .lx-cover .pill,
body.theme-dark .app-shell.lx-shell .lx-cover .plat,
body.theme-dark .app-shell.lx-shell .lx-cover .ugc,
body.theme-dark .app-shell.lx-shell .cdp-back,
body.theme-dark .app-shell.lx-shell .cdp-kind { background: rgba(22,22,29,.8); color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .cdp-cover-scrim { background: linear-gradient(180deg, rgba(16,16,21,.1), rgba(16,16,21,.35) 42%, rgba(16,16,21,.9)); }
body.theme-dark .app-shell.lx-shell .wbal-main { background: rgba(var(--lx-role-rgb),.08); }
body.theme-dark .app-shell.lx-shell .nt,
body.theme-dark .app-shell.lx-shell .lx-ticket,
body.theme-dark .app-shell.lx-shell .lx-list a,
body.theme-dark .app-shell.lx-shell .lx-lesson,
body.theme-dark .app-shell.lx-shell .acad .lz,
body.theme-dark .app-shell.lx-shell .wrail,
body.theme-dark .app-shell.lx-shell .tk-msg p,
body.theme-dark .app-shell.lx-shell .lx-tiles > div,
body.theme-dark .app-shell.lx-shell .lx-streak,
body.theme-dark .app-shell.lx-shell .cdp-checklist > div,
body.theme-dark .app-shell.lx-shell .cdp-source-list a { background: var(--lx-panel-2); border-color: var(--lx-border); }
body.theme-dark .app-shell.lx-shell .lx-streak-emoji,
body.theme-dark .app-shell.lx-shell .wrail-mk,
body.theme-dark .app-shell.lx-shell .nt-av { background: var(--lx-panel); }
body.theme-dark .app-shell.lx-shell .lx-blank-icon { background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(239,68,68,.2)); }
body.theme-dark .app-shell.lx-shell .lx-table th,
body.theme-dark .app-shell.lx-shell .lx-table td { border-color: var(--lx-line-soft); }
body.theme-dark .app-shell.lx-shell .cfc-modal-card { background: var(--lx-panel); color: var(--lx-ink); }
body.theme-dark .app-shell.lx-shell .cfc-modal-close { background: var(--lx-panel-2); color: var(--lx-ink); border-color: var(--lx-border); }
body.theme-dark .app-shell.lx-shell .modal-form input,
body.theme-dark .app-shell.lx-shell .modal-form textarea,
body.theme-dark .app-shell.lx-shell .modal-form select { background: var(--lx-panel-2); border-color: var(--lx-border); color: var(--lx-ink); }

/* ==========================================================================
   Social account verification
   ========================================================================== */

.sa-crumbs { display: flex; align-items: center; gap: 8px; color: var(--lx-ink-3); font-size: 13px; }
.sa-crumbs a { color: var(--lx-ink-2); }
.sa-crumbs a:hover { color: var(--lx-accent-deep); }
.sa-crumbs .side-icon { width: 13px; height: 13px; }
.sa-head { align-items: flex-end; }
.sa-count { display: flex; align-items: center; gap: 8px; font-family: var(--lx-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.sa-count b { color: var(--lx-success-fg); }
.sa-count span { color: var(--lx-ink-3); }
.sa-count i { color: var(--lx-pending-fg); font-style: normal; }
.sa-card { padding: 0; }
.sa-card .lx-card-head { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--lx-line-soft); }
.sa-card .lx-card-body { padding: 8px 22px 18px; }
.sa-list { display: flex; flex-direction: column; }
.sa-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--lx-line-soft);
}
.sa-row:last-child { border-bottom: 0; }
.sa-mk {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
}
.sa-mk .side-icon { width: 20px; height: 20px; }
.sa-mk.is-tiktok { color: #010101; }
.sa-mk.is-instagram { color: #c13584; }
.sa-mk.is-youtube { color: #ff0000; }
.sa-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sa-nm { display: flex; align-items: center; gap: 7px; color: var(--lx-ink); font-size: 14px; font-weight: 600; }
.sa-nm i { color: var(--lx-ink-3); font-style: normal; }
.sa-sub { color: var(--lx-pending-fg); font-size: 12.5px; }
.sa-sub.is-ok { color: var(--lx-success-fg); }
.sa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.sa-badge i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.sa-badge.is-pending { background: rgba(219,119,6,.12); color: var(--lx-pending-fg); }
.sa-badge.is-ok { background: rgba(16,183,127,.12); color: var(--lx-success-fg); }
.lx-page .sa-act {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: var(--lx-accent-deep);
    font-size: 12.5px;
    font-weight: 600;
}
.lx-page .sa-act:hover { background: rgba(var(--lx-accent-rgb),.1); }
.lx-page .sa-act .side-icon { width: 14px; height: 14px; }
.lx-page .sa-act.is-danger { color: var(--lx-ink-3); }
.lx-page .sa-act.is-danger:hover { background: rgba(239,68,68,.1); color: var(--lx-danger-fg); }
.lx-page .sa-act.is-primary { background: rgba(var(--lx-accent-rgb),.12); }
.sa-foot { display: flex; align-items: flex-start; gap: 9px; color: var(--lx-ink-3); font-size: 12.5px; line-height: 1.55; }
.sa-foot .side-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }

.sa-modal-head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-chip {
    padding: 3px 9px;
    border: 1px solid var(--lx-border);
    border-radius: 7px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-family: var(--lx-mono);
    font-size: 11px;
    font-weight: 600;
}
.sa-modal-lede { margin: 0 0 18px; color: var(--lx-ink-2); font-size: 13.5px; line-height: 1.6; }
.lx-page .sa-gen { min-height: 46px; }
.sa-code {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--lx-panel-2);
}
.sa-code > div { min-width: 0; flex: 1; }
.sa-code .k { display: block; color: var(--lx-ink-3); font-size: 12px; }
.sa-code b {
    display: block;
    margin-top: 6px;
    color: var(--lx-ink);
    font-family: var(--lx-mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .1em;
}
.lx-page .sa-copy {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--lx-ink-2);
    min-height: 0;
}
.lx-page .sa-copy:hover { background: var(--lx-panel-2); }
.sa-copy .side-icon { width: 16px; height: 16px; }
.sa-expires { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; color: var(--lx-ink-2); font-size: 13px; }
.sa-expires .side-icon { width: 14px; height: 14px; color: var(--lx-ink-3); }
.sa-expires b { font-family: var(--lx-mono); font-weight: 600; color: var(--lx-ink); }
.sa-expires b.is-expired { color: var(--lx-danger-fg); }
.sa-steps { margin-top: 18px; }
.sa-steps .k { display: block; margin-bottom: 8px; color: var(--lx-ink); font-size: 13px; font-weight: 600; }
.sa-steps ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.sa-steps li { color: var(--lx-ink-2); font-size: 13px; line-height: 1.5; }
.lx-page .sa-open { margin-top: 18px; }
.sa-modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sa-modal-actions form { display: contents; }
.lx-page .sa-modal-actions .lx-btn { width: 100%; justify-content: center; min-height: 44px; }

@media (max-width: 760px) {
    .sa-row { flex-wrap: wrap; }
    .sa-tx { flex: 1 1 60%; }
    .sa-badge, .lx-page .sa-act { order: 3; }
}

/* ============================================================
   Auth screen (sign in / create account) — lulosa split layout
   ============================================================ */
body:has(.auth-split) > .site-header,
body:has(.auth-split) > .site-footer { display: none; }
body:has(.auth-split) > main { padding: 0; margin: 0; max-width: none; width: 100%; }
body:has(.auth-split) { background: #fff; }

.auth-split {
    --au-accent: #0ea5e9;
    --au-ink: #0f172a;
    --au-ink-2: #64748b;
    --au-ink-3: #94a3b8;
    --au-border: #e2e8f0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    background: #fff;
    color: var(--au-ink);
    font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
}

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px 56px 52px;
    overflow: hidden;
    background: radial-gradient(120% 90% at 12% 8%, #1e3a8a 0%, #0c1a3a 45%, #070d1c 100%);
    color: #eff6ff;
}
.auth-aside::before {
    content: '';
    position: absolute;
    inset: auto -20% -45% -10%;
    height: 70%;
    background: radial-gradient(50% 60% at 30% 40%, rgba(14,165,233,.42), transparent 70%);
    pointer-events: none;
}
.auth-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(90% 70% at 40% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}
.auth-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.auth-brand .brand-mark { width: 34px; height: 34px; }
.auth-aside-copy { position: relative; z-index: 1; max-width: 460px; }
.auth-aside-copy h2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #fff;
}
.auth-aside-copy h2 span {
    background: linear-gradient(90deg, #38bdf8, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-aside-copy p {
    margin: 16px 0 0;
    max-width: 400px;
    color: rgba(226,240,255,.72);
    font-size: 15px;
    line-height: 1.65;
}

.auth-main {
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: #fff;
}
.auth-form-wrap { width: 100%; max-width: 396px; }
.auth-form-wrap h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.03em;
    font-weight: 700;
    color: var(--au-ink);
}
.auth-lede { margin: 8px 0 0; color: var(--au-ink-2); font-size: 14px; line-height: 1.6; }

.auth-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 24px 0 22px;
    padding: 4px;
    border: 1px solid var(--au-border);
    border-radius: 12px;
    background: #f8fafc;
}
.auth-switch a {
    display: grid;
    place-items: center;
    min-height: 36px;
    border-radius: 8px;
    color: var(--au-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.auth-switch a:hover { color: var(--au-ink); }
.auth-switch a.is-active { background: #fff; color: var(--au-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

.auth-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.auth-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auth-roles label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 12px 13px;
    border: 1px solid var(--au-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.auth-roles label:hover { border-color: #cbd5e1; }
.auth-roles label:has(input:checked) { border-color: var(--au-accent); background: #f0f9ff; box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.auth-roles input { position: absolute; opacity: 0; pointer-events: none; }
.auth-roles b { font-size: 13px; font-weight: 600; color: var(--au-ink); }
.auth-roles small { font-size: 11.5px; line-height: 1.4; color: var(--au-ink-3); }

.auth-field { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 13px; font-weight: 500; color: var(--au-ink); }
.auth-field i { color: #ef4444; font-style: normal; }
.auth-field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-field-top a { color: var(--au-accent); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.auth-field-top a:hover { text-decoration: underline; }
.auth-split .auth-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--au-border);
    border-radius: 10px;
    background: #fff;
    color: var(--au-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-split .auth-field input::placeholder { color: var(--au-ink-3); }
.auth-split .auth-field input:focus { outline: none; border-color: var(--au-accent); box-shadow: 0 0 0 3px rgba(14,165,233,.14); }

body:has(.auth-split) button.auth-submit,
.auth-split button.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.16);
    transition: background .16s ease, transform .06s ease;
}
body:has(.auth-split) button.auth-submit:hover { background: #1e293b; }
body:has(.auth-split) button.auth-submit:active { transform: translateY(1px); }

.auth-or { position: relative; margin: 20px 0; text-align: center; }
.auth-or::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--au-border); }
.auth-or span { position: relative; padding: 0 12px; background: #fff; color: var(--au-ink-3); font-size: 12px; }

.auth-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--au-border);
    border-radius: 10px;
    background: #fff;
    color: var(--au-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}
.auth-oauth:hover { background: #f8fafc; border-color: #cbd5e1; }
.auth-oauth .side-icon, .auth-oauth svg { width: 18px; height: 18px; }

.auth-foot { margin: 22px 0 0; text-align: center; color: var(--au-ink-2); font-size: 13px; }
.auth-foot a { color: var(--au-accent); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
    .auth-aside { gap: 26px; padding: 26px 24px 34px; }
    .auth-aside-copy h2 { font-size: 30px; }
    .auth-aside-copy p { font-size: 14px; }
    .auth-main { padding: 32px 24px 56px; align-items: start; }
}
body:has(.auth-split) > main { position: relative; }
body:has(.auth-split) > main > .flash {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 24px;
    left: auto;
    width: min(360px, calc(100% - 48px));
    margin: 0;
}
@media (max-width: 900px) {
    body:has(.auth-split) > main > .flash { right: 16px; width: calc(100% - 32px); }
}
.auth-field > .auth-field-top { font-size: 13px; font-weight: 500; }
.auth-field-top > span { display: inline-flex; align-items: center; gap: 3px; }
.auth-field i { margin-left: 3px; }
.auth-field-top { justify-content: flex-start; }
.auth-field-top:has(a) { justify-content: space-between; }
.auth-roles small { min-height: 30px; }

/* ============================================================
   Creator role theme — same lx kit, purple role accent
   ============================================================ */
.app-shell.lx-shell.creator-shell {
    --lx-accent: #8b6cfd;
    --lx-accent-deep: #6d4aec;
    --lx-accent-soft: #b7a4ff;
    --lx-accent-rgb: 139,108,253;
    --lx-role: #7c5cfc;
    --lx-role-fg: #5733c9;
    --lx-role-rgb: 124,92,252;
    --lx-cta-a: #6d4aec;
    --lx-cta-b: #5b34d8;
    --lx-balance-fg: #5b3fd6;
}
body.theme-dark .app-shell.lx-shell.creator-shell {
    --lx-accent: #a78bfa;
    --lx-accent-deep: #8b5cf6;
    --lx-accent-soft: #c4b5fd;
    --lx-accent-rgb: 167,139,250;
    --lx-role: #a78bfa;
    --lx-role-fg: #c4b5fd;
    --lx-role-rgb: 167,139,250;
    --lx-balance-fg: #c4b5fd;
}
.app-shell.lx-shell.creator-shell .side-role-pill {
    border-color: rgba(167,139,250,.34);
    background: rgba(167,139,250,.16);
    color: #ddd2ff;
}
.app-shell.lx-shell.creator-shell .side-group a.is-active::before { background: #a78bfa; }
.app-shell.lx-shell.creator-shell .wallet-box strong { color: #c9b8ff; }
.lx-step-wait {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lx-pending-fg);
    font-family: var(--lx-mono);
    font-size: 11.5px;
    font-weight: 600;
}
.lx-step-wait .side-icon { width: 13px; height: 13px; }

.lx-done-list[hidden] { display: none !important; }
.lx-card-foot.is-right { justify-content: flex-end; }

/* ============================================================
   Creator panel pages — campaigns / analytics / review clips
   ============================================================ */
.lx-page.lx-mycmp, .lx-page.lx-anl, .lx-page.lx-rev, .lx-page.lx-team, .lx-page.lx-cwallet { margin-top: 24px; }

.lx-searchrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.lx-searchbox {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 13px;
    margin: 0;
    border: 1px solid var(--lx-border);
    border-radius: 11px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.lx-searchbox .side-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--lx-ink-3); }
.lx-page .lx-searchbox input {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13.5px;
}
.lx-page .lx-searchbox input:focus { outline: none; box-shadow: none; }
.lx-page .lx-searchbox input::placeholder { color: var(--lx-ink-3); }

.lx-cmp-list { display: flex; flex-direction: column; gap: 14px; }
.lx-cmp-card {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--lx-border);
    border-radius: 15px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
    transition: border-color .16s ease;
}
.lx-cmp-card:hover { border-color: rgba(var(--lx-role-rgb),.4); }
.lx-cmp-main { min-width: 0; }
.lx-cmp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.lx-cmp-card h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.lx-cmp-card h3 a { color: var(--lx-ink); text-decoration: none; }
.lx-cmp-card h3 a:hover { color: var(--lx-accent-deep); }
.lx-cmp-sub { margin: 4px 0 0; color: var(--lx-ink-2); font-size: 12.5px; }
.lx-cmp-bar { margin-top: 12px; height: 6px; border-radius: 99px; background: var(--lx-panel-2); overflow: hidden; }
.lx-cmp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--lx-role-rgb),.65), var(--lx-role)); }
.lx-cmp-barx { display: flex; justify-content: space-between; margin-top: 6px; color: var(--lx-ink-3); font-size: 11.5px; font-family: var(--lx-mono); }
.lx-cmp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lx-cmp-stats div { min-width: 0; }
.lx-cmp-stats span { display: block; color: var(--lx-ink-3); font-family: var(--lx-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lx-cmp-stats b { display: block; margin-top: 3px; color: var(--lx-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lx-cmp-stats b small { font-size: 10.5px; font-weight: 500; color: var(--lx-ink-3); }
.lx-cmp-actions { display: flex; align-items: center; gap: 8px; }
.lx-cmp-actions form { display: contents; }

.lx-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--lx-border);
    border-radius: 7px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-size: 11px;
    font-weight: 500;
}
.lx-badge.is-active { background: rgba(16,183,127,.12); color: var(--lx-success-fg); }
.lx-badge.is-draft { background: var(--lx-panel-2); color: var(--lx-ink-2); }
.lx-badge.is-paused { background: rgba(219,119,6,.12); color: var(--lx-pending-fg); }
.lx-badge.is-completed { background: rgba(var(--lx-role-rgb),.12); color: var(--lx-role-fg); }

.lx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lx-kpis article {
    padding: 16px 18px;
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.lx-kpis span { display: block; color: var(--lx-ink-2); font-size: 12.5px; font-weight: 500; }
.lx-kpis strong { display: block; margin-top: 6px; color: var(--lx-ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lx-kpis small { display: block; margin-top: 4px; color: var(--lx-ink-3); font-size: 11.5px; }

.lx-statstrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
    overflow: hidden;
}
.lx-statstrip div { padding: 16px 20px; border-left: 1px solid var(--lx-line-soft); }
.lx-statstrip div:first-child { border-left: 0; }
.lx-statstrip strong { display: block; color: var(--lx-ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lx-statstrip span { display: block; margin-top: 2px; color: var(--lx-ink-2); font-size: 12.5px; }

.lx-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lx-info-grid article {
    padding: 18px 20px;
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.lx-info-grid h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.lx-info-grid p { margin: 7px 0 0; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.6; }

.lx-rev-list { display: flex; flex-direction: column; gap: 14px; }
.lx-rev-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 260px;
    gap: 20px;
    padding: 16px;
    border: 1px solid var(--lx-border);
    border-radius: 15px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.lx-rev-media { position: relative; border-radius: 12px; background: var(--lx-panel-2); overflow: hidden; min-height: 150px; }
.lx-rev-media > a { position: absolute; inset: 0; display: grid; place-items: center; color: var(--lx-ink-2); }
.lx-rev-media > a .side-icon { width: 30px; height: 30px; }
.lx-rev-media > span { position: absolute; left: 10px; top: 10px; }
.lx-rev-body { min-width: 0; }
.lx-rev-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--lx-ink-3); font-family: var(--lx-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lx-rev-card h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.lx-rev-body > p { margin: 5px 0 0; color: var(--lx-ink-2); font-size: 13px; }
.lx-rev-body blockquote { margin: 11px 0 0; padding: 10px 12px; border-left: 2px solid var(--lx-border); border-radius: 0 8px 8px 0; background: var(--lx-panel-2); color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.55; }
.lx-rev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; color: var(--lx-ink-2); font-size: 12.5px; }
.lx-rev-meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--lx-accent-deep); font-weight: 600; text-decoration: none; }
.lx-rev-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lx-rev-meta .side-icon { width: 14px; height: 14px; }
.lx-rev-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--lx-line-soft); border-radius: 12px; background: var(--lx-panel-2); }
.lx-rev-form label { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.lx-rev-form label span { color: var(--lx-ink-2); font-size: 11.5px; font-weight: 600; }
.lx-page .lx-rev-form input, .lx-page .lx-rev-form select {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--lx-border);
    border-radius: 9px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}
.lx-rev-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.lx-page .lx-rev-buttons .lx-btn { width: 100%; justify-content: center; min-height: 38px; font-size: 12.5px; }
.lx-page .lx-rev-buttons .lx-btn:first-child { grid-column: 1 / -1; }
.lx-page button.lx-btn.is-danger { border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: var(--lx-danger-fg); box-shadow: none; }
.lx-page button.lx-btn.is-danger:hover { background: rgba(239,68,68,.14); }

@media (max-width: 1080px) {
    .lx-cmp-card { grid-template-columns: minmax(0, 1fr); }
    .lx-cmp-actions { justify-content: flex-start; }
    .lx-rev-card { grid-template-columns: minmax(0, 1fr); }
    .lx-rev-media { min-height: 120px; }
    .lx-kpis, .lx-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .lx-kpis, .lx-info-grid, .lx-statstrip { grid-template-columns: minmax(0, 1fr); }
    .lx-statstrip div { border-left: 0; border-top: 1px solid var(--lx-line-soft); }
    .lx-statstrip div:first-child { border-top: 0; }
    .lx-cmp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-searchrow { flex-wrap: wrap; }
}

/* ============================================================
   Creator panel — bridge legacy panel classes onto the lx look
   ============================================================ */
.app-shell.creator-shell .app-main { font-family: var(--lx-display); color: var(--lx-ink); }
.app-shell.creator-shell .panel-page-head { align-items: flex-start; margin-bottom: 20px; min-height: 0; }
.app-shell.creator-shell .panel-page-head h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lx-display);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--lx-ink);
}
.app-shell.creator-shell .panel-page-head h1 .side-icon { width: 24px; height: 24px; color: var(--lx-accent-deep); }
.app-shell.creator-shell .panel-page-head > div > p { margin: 6px 0 0; color: var(--lx-ink-2); font-size: 13.5px; line-height: 1.55; }

.app-shell.creator-shell .builder-card,
.app-shell.creator-shell .team-org-card,
.app-shell.creator-shell .team-metric-grid,
.app-shell.creator-shell .wallet-balance-panel,
.app-shell.creator-shell .support-hero,
.app-shell.creator-shell .panel-empty-state,
.app-shell.creator-shell .table-wrap.creator-table,
.app-shell.creator-shell .account-card,
.app-shell.creator-shell .settings-card {
    border: 1px solid var(--lx-border);
    border-radius: 15px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.app-shell.creator-shell .builder-card > h2,
.app-shell.creator-shell .section-head.compact h2,
.app-shell.creator-shell .team-roles h2,
.app-shell.creator-shell .account-card > h2,
.app-shell.creator-shell .settings-card > h2 {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lx-display);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--lx-ink);
}
.app-shell.creator-shell .builder-card > h2 .side-icon,
.app-shell.creator-shell .section-head.compact h2 .side-icon { width: 16px; height: 16px; color: var(--lx-ink-3); }
.app-shell.creator-shell .builder-card > h2 > span,
.app-shell.creator-shell .team-members h2 span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-family: var(--lx-mono);
    font-size: 11px;
    font-weight: 600;
}
.app-shell.creator-shell .builder-card p,
.app-shell.creator-shell .builder-card small { color: var(--lx-ink-2); }

.app-shell.creator-shell .team-metric-grid article span,
.app-shell.creator-shell .team-metric-grid article > span { color: var(--lx-ink-2); font-size: 12.5px; }
.app-shell.creator-shell .team-metric-grid article strong { color: var(--lx-ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.app-shell.creator-shell .team-member-row p { color: var(--lx-ink); font-size: 13px; }
.app-shell.creator-shell .team-member-row > span,
.app-shell.creator-shell .team-roles article > span {
    background: rgba(var(--lx-role-rgb),.12);
    color: var(--lx-role-fg);
}

.app-shell.creator-shell .panel-tabs.lulosa-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    background: var(--lx-panel-2);
    box-shadow: none;
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--lx-ink-2);
    font-size: 13px;
    font-weight: 500;
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs a .side-icon { width: 15px; height: 15px; }
.app-shell.creator-shell .panel-tabs.lulosa-tabs a:hover { color: var(--lx-ink); }
.app-shell.creator-shell .panel-tabs.lulosa-tabs a.is-active {
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(29,29,38,.08);
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs a span {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 10.5px;
    font-weight: 600;
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs a.is-active span { background: rgba(var(--lx-role-rgb),.14); color: var(--lx-role-fg); }

.app-shell.creator-shell .app-main button.button.primary,
.app-shell.creator-shell .app-main a.button.primary {
    background: var(--lx-role);
    color: #fff;
    border: 0;
    border-radius: 11px;
    font-family: var(--lx-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(var(--lx-role-rgb),.4);
}
.app-shell.creator-shell .app-main button.button.primary:hover,
.app-shell.creator-shell .app-main a.button.primary:hover { background: var(--lx-accent-deep); }
.app-shell.creator-shell .app-main button.button.ghost,
.app-shell.creator-shell .app-main a.button.ghost {
    border: 1px solid var(--lx-border);
    border-radius: 11px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: var(--lx-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--lx-card-sh);
}
.app-shell.creator-shell .app-main button.button.ghost:hover,
.app-shell.creator-shell .app-main a.button.ghost:hover { background: var(--lx-panel-2); }

.app-shell.creator-shell .panel-empty-state h2 { font-family: var(--lx-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--lx-ink); }
.app-shell.creator-shell .panel-empty-state p { color: var(--lx-ink-2); font-size: 13.5px; }
.app-shell.creator-shell .panel-empty-state > span { background: rgba(var(--lx-role-rgb),.1); color: var(--lx-role); }

.app-shell.creator-shell .creator-table table { font-size: 13px; }
.app-shell.creator-shell .creator-table th {
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.app-shell.creator-shell .creator-table td { color: var(--lx-ink-2); border-color: var(--lx-line-soft); }
.app-shell.creator-shell .creator-table td strong { color: var(--lx-ink); }
.app-shell.creator-shell .wallet-balance-main strong.lx-amt.is-hero {
    display: block;
    margin: 8px 0 0;
    color: var(--lx-ink);
    font-family: var(--lx-display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}
.app-shell.creator-shell .wallet-balance-main strong.lx-amt .pre { font-size: .44em; font-weight: 500; vertical-align: .62em; margin-right: 2px; color: var(--lx-ink-2); }
.app-shell.creator-shell .wallet-balance-main strong.lx-amt .c { font-size: .4em; font-weight: 600; vertical-align: .78em; margin-left: 3px; color: var(--lx-ink-2); }
.app-shell.creator-shell .section-head.compact .status,
.app-shell.creator-shell .app-main .status {
    border: 1px solid var(--lx-border);
    border-radius: 7px;
    background: var(--lx-panel-2);
    color: var(--lx-ink-2);
    font-family: var(--lx-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.app-shell.creator-shell .funding-donut strong { color: var(--lx-ink); font-family: var(--lx-display); font-weight: 800; letter-spacing: -.03em; }
.app-shell.creator-shell .funding-donut span { color: var(--lx-ink-3); }
.app-shell.creator-shell .wallet-mini-split p { color: var(--lx-ink-3); font-size: 12.5px; }
.app-shell.creator-shell .wallet-mini-split strong { color: var(--lx-ink); font-size: 17px; font-weight: 700; }
.app-shell.creator-shell .wallet-balance-side article strong { color: var(--lx-ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-shell.creator-shell .wallet-balance-side article div { color: var(--lx-ink); font-size: 13.5px; }
.app-shell.creator-shell .wallet-balance-side article div small { color: var(--lx-ink-3); font-size: 12px; }
.app-shell.creator-shell .lx-hero {
    background-color: #17102b;
    background-image:
        radial-gradient(60% 80% at 8% 0, rgba(124,92,252,.55), transparent 60%),
        radial-gradient(70% 70% at 95% 15%, rgba(167,139,250,.42), transparent 60%),
        radial-gradient(90% 80% at 60% 125%, rgba(91,52,216,.45), transparent 65%);
}

/* ---------- admin: Google sign-in settings ---------- */
.admin-note { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.admin-google-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; align-items: end; }
.admin-google-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.admin-google-form input { width: 100%; }
.admin-google-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.admin-steps { margin: 22px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.admin-steps li { color: var(--muted); font-size: 14px; line-height: 1.6; }
.admin-steps code, .table-wrap code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    word-break: break-all;
}
@media (max-width: 760px) {
    .admin-google-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- creator wallet funding ---------- */
.deposit-pending { padding: 20px; margin-bottom: 20px; }
.deposit-pending > p { margin: 0 0 14px; font-size: 13px; }
.deposit-list { display: flex; flex-direction: column; gap: 10px; }
.deposit-list article {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    background: var(--lx-panel-2);
}
.deposit-list article > div { flex: 1; min-width: 0; }
.deposit-list strong { display: block; color: var(--lx-ink); font-size: 16px; font-weight: 700; }
.deposit-list small { display: block; margin-top: 2px; color: var(--lx-ink-3); font-size: 12px; }
.app-shell.creator-shell button.deposit-ref {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px dashed rgba(var(--lx-role-rgb),.45);
    border-radius: 9px;
    background: rgba(var(--lx-role-rgb),.08);
    color: var(--lx-role-fg);
    box-shadow: none;
}
.app-shell.creator-shell button.deposit-ref:hover { background: rgba(var(--lx-role-rgb),.15); }
.deposit-ref code { font-family: var(--lx-mono); font-size: 12.5px; font-weight: 600; }
.deposit-ref .side-icon { width: 14px; height: 14px; }


@media (max-width: 640px) {
    .deposit-list article { flex-wrap: wrap; }
}

/* ============================================================
   Admin panel — lx kit with an amber staff accent
   ============================================================ */
.app-shell.lx-shell.admin-shell {
    --lx-accent: #f0a415;
    --lx-accent-deep: #c97d06;
    --lx-accent-soft: #fbbf4a;
    --lx-accent-rgb: 240,164,21;
    --lx-role: #e08e07;
    --lx-role-fg: #a5620a;
    --lx-role-rgb: 224,142,7;
    --lx-cta-a: #c97d06;
    --lx-cta-b: #a5620a;
    --lx-balance-fg: #a5620a;
}
body.theme-dark .app-shell.lx-shell.admin-shell {
    --lx-accent: #fbbf4a;
    --lx-accent-deep: #f0a415;
    --lx-accent-soft: #fcd68a;
    --lx-accent-rgb: 251,191,74;
    --lx-role: #fbbf4a;
    --lx-role-fg: #fcd68a;
    --lx-role-rgb: 251,191,74;
    --lx-balance-fg: #fcd68a;
}
.app-shell.lx-shell.admin-shell .app-sidebar {
    background: linear-gradient(178deg, #1c1408, #241a0d 62%, #17110a);
}
.app-shell.lx-shell.admin-shell .side-role-pill {
    border-color: rgba(251,191,74,.36);
    background: rgba(251,191,74,.16);
    color: #ffe6b0;
}
.app-shell.lx-shell.admin-shell .side-group a.is-active::before { background: #fbbf4a; }
.app-shell.lx-shell.admin-shell .wallet-box strong { color: #ffd88a; font-size: 15px; }

.lx-page.adm { margin-top: 24px; }
.adm-todo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid rgba(var(--lx-role-rgb),.35);
    border-radius: 14px;
    background: rgba(var(--lx-role-rgb),.08);
}
.adm-todo-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    background: var(--lx-role);
    color: #fff;
}
.adm-todo-icon .side-icon { width: 18px; height: 18px; }
.adm-todo strong { display: block; color: var(--lx-ink); font-size: 14px; font-weight: 700; }
.adm-todo p { margin: 3px 0 0; color: var(--lx-ink-2); font-size: 13px; }
.adm-todo a { color: var(--lx-accent-deep); font-weight: 600; text-decoration: none; }
.adm-todo a:hover { text-decoration: underline; }

.adm-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-money span { display: block; color: var(--lx-ink-3); font-family: var(--lx-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.adm-money b { display: block; margin-top: 4px; color: var(--lx-ink); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }

.adm-table-wrap {
    border: 1px solid var(--lx-border);
    border-radius: 15px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
    overflow-x: auto;
}
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--lx-line-soft);
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.adm-table td { padding: 13px 16px; border-bottom: 1px solid var(--lx-line-soft); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--lx-panel-2); }
.adm-table tr.is-muted { opacity: .55; }
.adm-table strong { display: block; color: var(--lx-ink); font-weight: 650; }
.adm-table strong i { font-style: normal; margin-left: 5px; padding: 1px 6px; border-radius: 5px; background: var(--lx-panel-2); color: var(--lx-ink-3); font-size: 10px; }
.adm-dim { color: var(--lx-ink-3); font-size: 12px; line-height: 1.5; }
.adm-table small.adm-dim { display: block; margin-top: 2px; }
.adm-code { font-family: var(--lx-mono); font-size: 11.5px; color: var(--lx-ink-2); word-break: break-all; }
.adm-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--lx-accent-deep); font-size: 12px; font-weight: 600; text-decoration: none; }
.adm-link .side-icon { width: 13px; height: 13px; }

.adm-user { display: flex; align-items: center; gap: 11px; }
.adm-av {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(var(--lx-role-rgb),.14);
    color: var(--lx-role-fg);
    font-size: 13px;
    font-weight: 700;
}

.adm-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 4px 3px 0;
    padding: 3px 8px;
    border-radius: 7px;
    font-family: var(--lx-mono);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.adm-badge.is-ok { background: rgba(16,183,127,.13); color: var(--lx-success-fg); }
.adm-badge.is-wait { background: rgba(219,119,6,.14); color: var(--lx-pending-fg); }
.adm-badge.is-bad { background: rgba(239,68,68,.13); color: var(--lx-danger-fg); }
.adm-badge.is-flat { background: var(--lx-panel-2); color: var(--lx-ink-2); }

.adm-rowform { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.lx-page .adm-rowform select,
.lx-page .adm-rowform input {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--lx-border);
    border-radius: 8px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 12.5px;
    box-shadow: none;
}
.lx-page .adm-rowform input { max-width: 120px; }
.lx-page .adm-rowform input.adm-num { max-width: 92px; }
.lx-page a.adm-btn,
.lx-page button.adm-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--lx-border);
    border-radius: 8px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
.lx-page a.adm-btn:hover,
.lx-page button.adm-btn:hover { background: var(--lx-panel-2); }
.lx-page button.adm-btn:disabled { opacity: .4; cursor: not-allowed; }
.lx-page button.adm-btn.is-go { border-color: rgba(16,183,127,.4); background: rgba(16,183,127,.1); color: var(--lx-success-fg); }
.lx-page button.adm-btn.is-go:hover { background: rgba(16,183,127,.18); }
.lx-page button.adm-btn.is-danger { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: var(--lx-danger-fg); }
.lx-page button.adm-btn.is-danger:hover { background: rgba(239,68,68,.15); }

.adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.adm-pager a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.adm-pager a:hover { background: var(--lx-panel-2); }
.adm-pager a.is-off { opacity: .35; pointer-events: none; }
.adm-pager span { color: var(--lx-ink-3); font-size: 12.5px; }
.adm-pager .side-icon { width: 15px; height: 15px; }

.adm-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.adm-ticket {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
    text-decoration: none;
    transition: border-color .16s ease;
}
.adm-ticket:hover { border-color: rgba(var(--lx-role-rgb),.45); }
.adm-ticket > div { flex: 1; min-width: 0; }
.adm-ticket strong { display: block; color: var(--lx-ink); font-size: 14px; font-weight: 650; }
.adm-ticket small { display: block; margin-top: 3px; color: var(--lx-ink-3); font-size: 12px; }
.adm-ticket p { margin: 6px 0 0; color: var(--lx-ink-2); font-size: 12.5px; }
.adm-ticket > .side-icon { width: 16px; height: 16px; color: var(--lx-ink-3); }

.adm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--lx-ink); font-size: 13.5px; font-weight: 600; }
.adm-form label.is-wide { grid-column: 1 / -1; }
.adm-form label > span { color: var(--lx-ink-3); font-size: 12px; font-weight: 400; }
.lx-page .adm-form input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13.5px;
    box-shadow: none;
}
.adm-input-suffix { position: relative; display: flex; align-items: center; }
.adm-input-suffix i {
    position: absolute;
    right: 12px;
    font-style: normal;
    color: var(--lx-ink-3);
    font-family: var(--lx-mono);
    font-size: 13px;
}
.adm-input-suffix i.is-pre { left: 12px; right: auto; }
.lx-page .adm-input-suffix:has(i.is-pre) input { padding-left: 26px; }
.adm-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.adm-hint { margin: 0 0 14px; color: var(--lx-ink-2); font-size: 13px; }
.adm-statusform { display: flex; gap: 8px; }
.lx-page .adm-statusform select {
    flex: 1;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13.5px;
    box-shadow: none;
}
.adm-rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-rails strong { display: flex; align-items: center; gap: 8px; color: var(--lx-ink); font-size: 13.5px; font-weight: 650; }
.adm-rails strong .side-icon { width: 16px; height: 16px; color: var(--lx-role); }
.adm-rails p { margin: 7px 0 0; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.6; }
.adm-rails code { font-family: var(--lx-mono); font-size: 11.5px; }
.lx-big small { font-size: .32em; font-weight: 500; color: var(--lx-ink-3); letter-spacing: 0; }

@media (max-width: 900px) {
    .adm-form, .adm-rails, .adm-money { grid-template-columns: minmax(0, 1fr); }
    .adm-rowform { flex-direction: column; align-items: stretch; }
    .lx-page .adm-rowform input, .lx-page .adm-rowform input.adm-num { max-width: none; }
}
.auth-lock {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 11px 13px;
    border: 1px solid var(--au-border);
    border-radius: 11px;
    background: #f8fafc;
    color: var(--au-ink-2);
    font-size: 12.5px;
    line-height: 1.55;
}
.auth-lock svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: var(--au-accent); }

/* ---------- admin: review, social, notes ---------- */
.adm-reviewform { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 250px; }
.lx-page .adm-reviewform input {
    width: 100%;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--lx-border);
    border-radius: 8px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 12.5px;
    box-shadow: none;
}
.adm-reviewform > div { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(239,68,68,.07);
    color: var(--lx-danger-fg);
    font-size: 11.5px;
    line-height: 1.45;
}
.adm-note .side-icon { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 1px; }

.adm-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.adm-platform {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}
.adm-platform:hover { border-color: rgba(var(--lx-role-rgb),.45); }
.adm-platform.is-active { border-color: rgba(var(--lx-role-rgb),.65); background: rgba(var(--lx-role-rgb),.07); }
.adm-platform strong { display: block; color: var(--lx-ink); font-size: 14px; font-weight: 650; }
.adm-platform small { display: block; margin-top: 2px; color: var(--lx-ink-3); font-size: 12px; }
.adm-platform-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--lx-panel-2);
    color: var(--lx-ink);
}
.adm-platform-icon .side-icon { width: 17px; height: 17px; }
.adm-platform-icon.is-tiktok { background: #111; color: #fff; }
.adm-platform-icon.is-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; }
.adm-platform-icon.is-youtube { background: #ff0033; color: #fff; }

@media (max-width: 900px) {
    .adm-platform-grid { grid-template-columns: minmax(0, 1fr); }
    .adm-reviewform { min-width: 0; }
}

/* ---------- admin: builder, user detail, broadcast ---------- */
.adm-owner-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px 18px;
    border: 1px solid rgba(var(--lx-role-rgb),.35);
    border-radius: 14px;
    background: rgba(var(--lx-role-rgb),.07);
}
.adm-owner-bar strong { display: flex; align-items: center; gap: 8px; color: var(--lx-ink); font-size: 14px; font-weight: 650; }
.adm-owner-bar strong .side-icon { width: 16px; height: 16px; color: var(--lx-role); }
.adm-owner-bar small { display: block; margin-top: 3px; color: var(--lx-ink-2); font-size: 12.5px; }
.lx-page .adm-owner-bar select {
    min-width: 280px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13.5px;
    box-shadow: none;
}
.adm-builder .campaign-create-shell { margin-top: 4px; }

.adm-namelink { color: var(--lx-ink); font-weight: 650; text-decoration: none; }
.adm-namelink:hover { color: var(--lx-accent-deep); text-decoration: underline; }
.adm-namelink i { font-style: normal; margin-left: 5px; padding: 1px 6px; border-radius: 5px; background: var(--lx-panel-2); color: var(--lx-ink-3); font-size: 10px; }
.adm-user.is-hero { align-items: flex-start; gap: 16px; }
.adm-av.is-lg { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 15px; font-size: 20px; }
.adm-user.is-hero .lx-page-title { margin-bottom: 0; }
.adm-hero-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.lx-list-static { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--lx-line-soft); }
.lx-list-static:last-child { border-bottom: 0; }
.lx-list-static strong { display: block; color: var(--lx-ink); font-size: 13.5px; font-weight: 600; }
.lx-list-static small { display: block; margin-top: 2px; color: var(--lx-ink-3); font-size: 12px; }
.lx-page .adm-form select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13.5px;
    box-shadow: none;
}

@media (max-width: 760px) {
    .lx-page .adm-owner-bar select { min-width: 0; width: 100%; }
}
/* The admin reuses the creator builder, which brings its own page header. */
.adm-builder .campaign-breadcrumb,
.adm-builder .campaign-back,
.adm-builder .campaign-create-head { display: none; }
.adm-builder .campaign-create-shell { margin-top: 0; }

/* ---------- impersonation, bulk actions, danger zone ---------- */
.impersonate-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: repeating-linear-gradient(135deg, #f0a415, #f0a415 12px, #d98f0c 12px, #d98f0c 24px);
    color: #1c1408;
    font-size: 13px;
    font-weight: 600;
}
.impersonate-bar span { display: inline-flex; align-items: center; gap: 8px; }
.impersonate-bar svg { width: 16px; height: 16px; }
.impersonate-bar b { font-weight: 800; }
.impersonate-bar form { margin: 0; }
body .impersonate-bar button {
    min-height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: #1c1408;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
}
body .impersonate-bar button:hover { background: #000; }

.adm-tick { width: 40px; }
.adm-tick input { width: 16px; height: 16px; accent-color: var(--lx-role); cursor: pointer; }
.adm-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 -4px;
    padding: 11px 14px;
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    background: var(--lx-panel-2);
    opacity: .55;
    pointer-events: none;
    transition: opacity .16s ease, background .16s ease, border-color .16s ease;
}
.adm-bulk.is-live {
    opacity: 1;
    pointer-events: auto;
    border-color: rgba(var(--lx-role-rgb),.45);
    background: rgba(var(--lx-role-rgb),.08);
}
.adm-bulk span { margin-right: auto; color: var(--lx-ink-2); font-size: 13px; font-weight: 600; }

.adm-danger {
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 13px;
    background: rgba(239,68,68,.05);
}
.adm-danger summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    color: var(--lx-danger-fg);
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.adm-danger summary::-webkit-details-marker { display: none; }
.adm-danger summary .side-icon { width: 16px; height: 16px; }
.adm-danger > div { padding: 0 16px 16px; }
.adm-danger p { margin: 0 0 12px; color: var(--lx-ink-2); font-size: 12.5px; line-height: 1.6; }
.adm-danger form { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-page .adm-danger input {
    min-width: 210px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--lx-border);
    border-radius: 9px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}

.adm-viewas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    padding: 15px 18px;
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.adm-viewas strong { display: flex; align-items: center; gap: 8px; color: var(--lx-ink); font-size: 14px; font-weight: 650; }
.adm-viewas strong .side-icon { width: 16px; height: 16px; color: var(--lx-role); }
.adm-viewas small { display: block; margin-top: 3px; color: var(--lx-ink-2); font-size: 12.5px; }
.adm-table td .adm-dim .side-icon { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.adm-rowform + .adm-rowform { margin-top: 6px; }
.lx-page button.adm-btn .side-icon { width: 13px; height: 13px; margin-right: 5px; }

/* ============================================================
   Landing page — lulosa-grade header, hero and language proof
   ============================================================ */
.site-header .main-nav { display: flex; align-items: center; gap: 10px; }
.nav-pillbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
}
.site-header .nav-pillbar a {
    padding: 7px 13px;
    border-radius: 9px;
    color: rgba(255,255,255,.72);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.site-header .nav-pillbar a:hover { color: #fff; }
.site-header .nav-pillbar a.is-active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }

.nav-lang { position: relative; display: flex; align-items: center; }
.nav-lang-count {
    position: absolute;
    left: 11px;
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    pointer-events: none;
}
.site-header .nav-lang .language-select {
    min-height: 38px;
    padding: 0 30px 0 36px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}
.site-header .nav-plain { color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 500; text-decoration: none; padding: 0 4px; }
.site-header .nav-plain:hover { color: #fff; }

.landing-page .landing-hero {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(90% 120% at 12% 0%, rgba(124,92,252,.55), transparent 62%),
        radial-gradient(70% 90% at 92% 10%, rgba(14,165,233,.4), transparent 60%),
        radial-gradient(80% 90% at 60% 120%, rgba(20,184,166,.28), transparent 62%),
        linear-gradient(180deg, #120e21, #0a0814);
    background-color: #0a0814;
}
.landing-page .landing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(80% 70% at 30% 25%, #000, transparent 78%);
    pointer-events: none;
}
.landing-hero > * { position: relative; z-index: 1; }

.hero-eyebrow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-rule { width: 26px; height: 1px; background: rgba(255,255,255,.4); }
.landing-hero .eyebrow { margin: 0; letter-spacing: .16em; }
.hero-geo {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 7px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hero-switch { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; color: rgba(255,255,255,.82); font-size: 17px; }
.hero-switch-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 99px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.hero-switch-pill i {
    width: 34px;
    height: 20px;
    border-radius: 99px;
    background: var(--accent);
    position: relative;
}
.hero-switch-pill i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}
.hero-switch-pill:hover i::after { transform: translateX(14px); }
.landing-hero h1 { letter-spacing: -.045em; line-height: .95; }
.hero-actions .button .side-icon { width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; }

.audience-strip {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: -18px auto 0;
    padding: 20px 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    position: relative;
    z-index: 2;
}
.audience-strip p { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.audience-strip ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.audience-strip li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}
.audience-strip svg { width: 15px; height: 15px; color: var(--accent-2); }

.lang-section { text-align: center; }
.lang-head { max-width: 640px; margin: 0 auto 34px; }
.lang-head h2 { margin: 12px 0 0; }
.lang-head p { margin: 14px 0 0; color: var(--muted); }
.lang-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lang-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 18px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.lang-grid a:hover { border-color: rgba(139,92,246,.5); background: var(--panel-2); transform: translateY(-2px); }
.lang-grid b { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.lang-grid span { color: var(--muted); font-size: 12.5px; }
.lang-grid li.is-current a { border-color: var(--accent); background: rgba(139,92,246,.12); }
.lang-grid li.is-current b { color: #fff; }

@media (max-width: 900px) {
    .site-header .main-nav { flex-wrap: wrap; gap: 8px; }
    .nav-pillbar { order: 3; width: 100%; }
    .audience-strip { margin-top: 0; padding: 18px; }
    .audience-strip p { width: 100%; }
    .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.landing-hero .hero-copy { min-width: 0; }
.landing-hero .hero-copy p { max-width: 34ch; }
.landing-hero .hero-cost { align-self: end; margin-bottom: 8px; }
@media (max-width: 900px) {
    .landing-hero .hero-copy p { max-width: none; }
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.site-header .nav-links a {
    padding: 7px 11px;
    border-radius: 9px;
    color: rgba(255,255,255,.72);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}
.site-header .nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
@media (max-width: 900px) { .nav-links { order: 4; width: 100%; justify-content: center; } }

/* ============================================================
   Audience landing pages — /for-artists and /for-clippers
   ============================================================ */
.lp-head { max-width: 660px; margin: 0 auto 40px; text-align: center; }
.lp-head h2 { margin: 12px 0 0; letter-spacing: -.035em; }
.lp-head p { margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.lp-fineprint { max-width: 660px; margin: 26px auto 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; text-align: center; opacity: .8; }

.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-cards article {
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}
.lp-cards article > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(139,92,246,.14);
    color: var(--accent);
}
.lp-cards svg { width: 20px; height: 20px; }
.lp-cards h3 { margin: 16px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.lp-cards p { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.lp-steplist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lp-steplist li {
    display: flex;
    gap: 18px;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}
.lp-steplist b {
    flex: 0 0 auto;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
}
.lp-steplist h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.lp-steplist p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.lp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-tiers article {
    padding: 32px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(139,92,246,.12), transparent 60%), var(--panel);
    text-align: center;
}
.lp-tiers span { display: block; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lp-tiers strong { display: block; margin-top: 12px; color: var(--text); font-size: 40px; font-weight: 800; letter-spacing: -.04em; }

.lp-toplist { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.lp-toprow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}
.lp-rank { width: 30px; text-align: center; font-size: 17px; color: var(--muted); }
.lp-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(139,92,246,.16); color: var(--accent); font-weight: 700; }
.lp-toprow > div { flex: 1; min-width: 0; }
.lp-toprow strong { display: block; color: var(--text); font-size: 15px; font-weight: 650; }
.lp-toprow small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.lp-toprow > b { color: var(--accent-2); font-size: 17px; font-weight: 700; }

.lp-calc-box {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 30px;
    max-width: 880px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
}
.lp-calc-inputs { display: flex; flex-direction: column; gap: 26px; justify-content: center; }
.lp-calc-inputs label { display: block; color: var(--muted); font-size: 14px; font-weight: 500; }
.lp-calc-inputs label b { float: right; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; }
.lp-calc-inputs input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--accent); }
.lp-calc-result { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 24px; border-radius: 16px; background: var(--panel-2); text-align: center; }
.lp-calc-result span { display: block; color: var(--muted); font-size: 12.5px; }
.lp-calc-result strong { display: block; margin-top: 3px; color: var(--text); font-size: 32px; font-weight: 800; letter-spacing: -.035em; }
.lp-calc-result .button { margin-top: 6px; }

.lp-vs-table { max-width: 900px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.lp-vs-head, .lp-vs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; padding: 15px 22px; align-items: center; }
.lp-vs-head { border-bottom: 1px solid var(--line); background: var(--panel-2); }
.lp-vs-head b { color: var(--accent); font-size: 14px; font-weight: 700; }
.lp-vs-head i { color: var(--muted); font-style: normal; font-size: 13px; }
.lp-vs-row { border-bottom: 1px solid var(--line); }
.lp-vs-row:last-child { border-bottom: 0; }
.lp-vs-row > span { color: var(--muted); font-size: 13.5px; }
.lp-vs-row b { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 14px; font-weight: 600; }
.lp-vs-row b svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--accent-2); }
.lp-vs-row i { color: var(--muted); font-style: normal; font-size: 13.5px; opacity: .75; }

.bench-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; }
.bench-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); overflow: hidden; }
.bench-row i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(20,184,166,.22), rgba(139,92,246,.14)); }
.bench-row span, .bench-row b { position: relative; z-index: 1; }
.bench-row span { color: var(--text); font-size: 14.5px; }
.bench-row b { color: var(--text); font-size: 15px; font-weight: 700; }
.bench-row.is-ours { border-color: rgba(20,184,166,.5); }
.bench-row.is-ours i { background: linear-gradient(90deg, rgba(20,184,166,.5), rgba(20,184,166,.16)); }
.bench-row.is-ours b { color: var(--accent-2); }

.lp-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.lp-plan { padding: 32px 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.lp-plan.is-managed { border-color: rgba(139,92,246,.45); background: linear-gradient(165deg, rgba(139,92,246,.12), transparent 55%), var(--panel); }
.lp-plan-tag { display: inline-block; padding: 4px 10px; border-radius: 7px; background: var(--panel-2); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lp-plan h3 { margin: 16px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.lp-plan-price { margin: 10px 0 0; color: var(--text); font-size: 34px; font-weight: 800; letter-spacing: -.04em; }
.lp-plan-price small { color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.lp-plan ul { margin: 22px 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lp-plan li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lp-plan li svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--accent-2); }
.lp-plan .button { width: 100%; justify-content: center; }

@media (max-width: 900px) {
    .lp-cards, .lp-steplist, .lp-tiers, .lp-plan-grid { grid-template-columns: minmax(0, 1fr); }
    .lp-calc-box { grid-template-columns: minmax(0, 1fr); padding: 22px; }
    .lp-vs-head, .lp-vs-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .lp-vs-head span:first-child { display: none; }
}
.auth-remember { display: flex; align-items: center; gap: 9px; margin: -4px 0 0; font-size: 13px; font-weight: 400; color: var(--au-ink-2); cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--au-accent); cursor: pointer; }
.lx-rev-meta b { color: var(--lx-ink); font-weight: 700; }
.lx-rev-note, .lx-rev-hint, .lx-rev-locked {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.5;
}
.lx-rev-note { background: var(--lx-panel-2); color: var(--lx-ink-2); }
.lx-rev-hint { margin: 0 0 4px; background: rgba(219,119,6,.1); color: var(--lx-pending-fg); }
.lx-rev-locked { background: rgba(16,183,127,.1); color: var(--lx-success-fg); }
.lx-rev-note .side-icon, .lx-rev-hint .side-icon, .lx-rev-locked .side-icon { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
.lx-page .lx-rev-form textarea {
    width: 100%;
    min-height: 56px;
    padding: 9px 11px;
    border: 1px solid var(--lx-border);
    border-radius: 9px;
    background: var(--lx-panel);
    color: var(--lx-ink);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    box-shadow: none;
}
.lx-page .lx-rev-form > button { width: 100%; justify-content: center; }

/* Wallet: what each campaign is actually holding. */
.escrow-list { display: grid; gap: 10px; }
.escrow-list article {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 10px 16px; padding: 12px 14px 14px; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(var(--lx-role-rgb),.18);
    background: rgba(var(--lx-role-rgb),.06);
}
.escrow-list article strong { display: block; font-size: 14px; font-weight: 650; }
.escrow-list article small { display: block; margin-top: 3px; font-size: 12px; color: var(--lx-ink-3); }
.escrow-list article b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.escrow-list article i {
    position: absolute; left: 0; bottom: 0; height: 3px; min-width: 2px;
    background: var(--lx-role); border-radius: 0 3px 3px 0;
}

/* Panel flashes float above the sticky topbar, otherwise they land behind it. */
body:has(.app-shell) .flash {
    position: fixed;
    top: 76px;
    right: 24px;
    left: auto;
    z-index: 60;
    width: min(420px, calc(100vw - 48px));
    margin: 0;
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    animation: cfc-flash-in .28s ease-out;
}
@keyframes cfc-flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
    body:has(.app-shell) .flash { top: 68px; right: 12px; width: calc(100vw - 24px); }
}


/* ---- Add funds ---------------------------------------------------------- */
.fund-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    grid-template-areas: "head head" "main summary";
    gap: 0 24px;
    align-items: start;
    max-width: 1080px;
}
.fund-head { grid-area: head; margin-bottom: 22px; }
.fund-main { grid-area: main; min-width: 0; }
.fund-summary { grid-area: summary; }

.fund-back {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: 13px; font-weight: 500; color: var(--lx-ink-3); text-decoration: none;
}
.fund-back:hover { color: var(--lx-ink); }
.fund-back svg { width: 15px; height: 15px; }
.fund-head h1 { margin: 0 0 8px; font-size: 33px; font-weight: 700; letter-spacing: -.022em; color: var(--lx-ink); }
.fund-head > p { margin: 0 0 16px; font-size: 15px; color: var(--lx-ink-2); }

.fund-owner {
    display: inline-flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 12px;
    background: rgba(var(--lx-role-rgb),.09);
}
.fund-owner > span {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    background: rgba(var(--lx-role-rgb),.16); color: var(--lx-role);
}
.fund-owner svg { width: 16px; height: 16px; }
.fund-owner strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--lx-ink); }
.fund-owner small { display: block; margin-top: 1px; font-size: 12px; color: var(--lx-ink-3); }

.fund-page .fund-amount-card {
    padding: 20px 22px 22px; border-radius: 16px;
    border: 1.5px solid rgba(var(--lx-role-rgb),.55);
    background: var(--lx-panel);
    box-shadow: var(--lx-card-sh);
}
.fund-page .fund-amount-card h2 {
    margin: 0 0 4px; font-size: 14px; font-weight: 650; letter-spacing: 0;
    text-transform: none; color: var(--lx-ink);
}
.fund-amount-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 13px; color: var(--lx-ink-3); }
.fund-amount-hint svg { width: 14px; height: 14px; flex: none; }

.fund-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.fund-tile {
    position: relative; display: grid; gap: 2px; place-items: center;
    padding: 16px 10px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid var(--lx-border); background: var(--lx-panel); transition: .14s;
}
.fund-tile input { position: absolute; opacity: 0; pointer-events: none; }
.fund-tile b { font-size: 18px; font-weight: 700; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.fund-tile small { font-size: 11.5px; color: var(--lx-ink-3); }
.fund-tile:hover { border-color: rgba(var(--lx-role-rgb),.5); }
.fund-tile:has(input:checked) {
    border-color: var(--lx-role);
    background: rgba(var(--lx-role-rgb),.09);
    box-shadow: 0 0 0 3px rgba(var(--lx-role-rgb),.12);
}
.fund-tile:has(input:checked) b { color: var(--lx-role-fg); }

.fund-bank {
    margin-top: 14px; padding: 18px 20px; border-radius: 12px;
    border: 1px solid var(--lx-border); background: var(--lx-panel-2);
}
.fund-bank h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--lx-ink); }
.fund-bank h3 svg { width: 15px; height: 15px; color: var(--lx-ink-3); }
.fund-bank dl { margin: 0 0 12px; display: grid; gap: 8px; }
.fund-bank dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.fund-bank dt { color: var(--lx-ink-3); flex: none; }
.fund-bank dd { margin: 0; font-weight: 600; text-align: right; word-break: break-all; }
.fund-bank code { font-family: var(--lx-mono); font-size: 12.5px; }
.fund-bank > p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--lx-ink-3); }

.fund-section-title { margin: 26px 0 12px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--lx-ink); }
.fund-methods { display: grid; gap: 10px; }
.fund-method {
    position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 14px; padding: 15px 18px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--lx-border); background: var(--lx-panel);
    box-shadow: var(--lx-card-sh); transition: .14s;
}
.fund-method:hover { border-color: rgba(var(--lx-role-rgb),.45); }
.fund-method input { position: absolute; opacity: 0; pointer-events: none; }
.fund-method-icon {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
    background: var(--lx-panel-2); color: var(--lx-ink-2);
}
.fund-method-icon svg { width: 17px; height: 17px; }
.fund-method-body strong { display: block; font-size: 14px; font-weight: 650; color: var(--lx-ink); }
.fund-method-body small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--lx-ink-3); }
.fund-method-tick {
    width: 17px; height: 17px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--lx-line); transition: .14s;
}
.fund-method:has(input:checked) { border-color: var(--lx-role); }
.fund-method:has(input:checked) .fund-method-icon { background: rgba(var(--lx-role-rgb),.14); color: var(--lx-role); }
.fund-method:has(input:checked) .fund-method-tick {
    border-color: var(--lx-role); box-shadow: inset 0 0 0 3.5px var(--lx-role);
}
.fund-empty { margin: 0 0 10px; font-size: 13.5px; color: var(--lx-ink-3); }

.fund-summary {
    position: sticky; top: 88px; padding: 20px; border-radius: 14px;
    border: 1px solid var(--lx-border); background: var(--lx-panel); box-shadow: var(--lx-card-sh);
}
.fund-summary h2 {
    margin: 0 0 14px; font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--lx-ink-3);
}
.fund-summary dl { margin: 0; }
.fund-summary dl > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 7px 0; font-size: 14px;
}
.fund-summary dt { color: var(--lx-ink-2); }
.fund-summary dd { margin: 0; font-weight: 650; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.fund-summary .is-total { padding-top: 10px; }
.fund-summary .is-total dt { font-size: 15.5px; font-weight: 700; color: var(--lx-ink); }
.fund-summary .is-total dd { font-size: 16px; font-weight: 700; }
.fund-summary-note { margin: 12px 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--lx-ink-3); }
.fund-summary-note b { font-weight: 650; }

.fund-page .fund-submit {
    display: block; width: 100%; height: 44px; padding: 0; border: 0; border-radius: 10px;
    cursor: pointer; background: var(--lx-accent-deep); color: #fff;
    font-family: inherit; font-size: 14.5px; font-weight: 650; transition: .14s;
}
.fund-page .fund-submit:hover { opacity: .92; }
.fund-page .fund-submit[disabled] { opacity: .45; cursor: not-allowed; }

.fund-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 11px 0 0; font-size: 12px; color: var(--lx-ink-3);
}
.fund-secure svg { width: 13px; height: 13px; flex: none; }
.fund-after {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 15px 0 0; padding-top: 14px; font-size: 13px;
    border-top: 1px solid var(--lx-line-soft);
}
.fund-after span { color: var(--lx-ink-3); }
.fund-after b { font-weight: 700; color: var(--lx-role-fg); font-variant-numeric: tabular-nums; }

@media (max-width: 940px) {
    .fund-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "summary"; }
    .fund-summary { position: static; margin-top: 20px; }
    .fund-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wallet cards size to their content instead of stretching to the tallest. */
.wallet-grid { align-items: start; }
.funding-explainer { display: flex; flex-direction: column; align-items: stretch; }
.funding-explainer strong { margin-top: 10px; }
.funding-explainer p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
.funding-cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 42px; margin-top: 4px; border-radius: 11px; text-decoration: none;
    border: 1px solid rgba(var(--lx-role-rgb),.28);
    background: rgba(var(--lx-role-rgb),.09);
    color: var(--lx-role-fg); font-size: 14px; font-weight: 650; transition: .14s;
}
.funding-cta:hover { background: rgba(var(--lx-role-rgb),.16); }
.funding-cta svg { width: 16px; height: 16px; }
.funding-explainer > small { margin-top: 10px; color: var(--lx-ink-3); font-size: 12px; }

.escrow-card .wallet-empty-mini { min-height: 0; padding: 26px 0; }
.escrow-card .wallet-empty-mini p { margin: 0; font-size: 13.5px; }
.escrow-explain {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    padding-top: 14px; border-top: 1px solid var(--lx-line-soft);
    font-size: 12.5px; line-height: 1.55; color: var(--lx-ink-3);
}
.escrow-explain svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* Transaction filters read as individual pills, not one segmented bar. */
.app-shell.creator-shell .panel-tabs.lulosa-tabs.wallet-transaction-tabs {
    min-height: 0;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    flex-wrap: wrap;
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs.wallet-transaction-tabs a {
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid var(--lx-border);
    border-radius: 9px;
    background: var(--lx-panel);
    color: var(--lx-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: none;
    transition: .14s;
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs.wallet-transaction-tabs a:hover {
    border-color: rgba(var(--lx-role-rgb),.45);
    color: var(--lx-ink);
}
.app-shell.creator-shell .panel-tabs.lulosa-tabs.wallet-transaction-tabs a.is-active {
    border-color: rgba(var(--lx-role-rgb),.35);
    background: rgba(var(--lx-role-rgb),.1);
    color: var(--lx-role-fg);
    box-shadow: none;
}

/* Sidebar wallet box: the balance opens the wallet, "Add funds" opens funding. */
.wallet-box-main { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.wallet-box-cta { display: inline-flex; text-decoration: none; }
.wallet-box-cta:hover em { text-decoration: underline; }

/* A payment method that cannot take the payment yet, shown rather than hidden. */
.fund-method.is-off { cursor: default; opacity: .62; }
.fund-method.is-off:hover { border-color: var(--lx-border); }
.fund-method.is-off .fund-method-tick { opacity: .4; }
.fund-method-body strong i {
    margin-left: 9px; padding: 2px 8px; border-radius: 999px;
    background: var(--lx-panel-2); color: var(--lx-ink-3);
    font-style: normal; font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}

/* Campaign builder: wallet shortfall warning in the live summary. */
.summary-shortfall {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.5;
}
.summary-shortfall a { color: inherit; font-weight: 700; text-decoration: underline; }
.theme-dark .summary-shortfall { color: #fca5a5; }

/* Finance: the row of actions above the payouts table. */
.adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}
.adm-toolbar .adm-btn { text-decoration: none; }
.adm-toolbar > .adm-dim { margin-right: auto; }

/* ==========================================================================
   Clipper shell palette

   The clipper panel styles itself with the --lx-* custom properties but its
   root carries "clipper-shell" without "lx-shell", where those properties are
   declared. Every reference resolved to nothing, which is why role-coloured
   chrome such as the onboarding badge rendered white on white. The properties
   are declared here rather than by adding "lx-shell" to the element, so the
   138 layout rules scoped to that class stay off the clipper panel.
   ========================================================================== */

.app-shell.clipper-shell {
    --lx-ink: #1d1d26;
    --lx-ink-2: #5e5e6e;
    --lx-ink-3: #878797;
    --lx-line: #dadae2;
    --lx-line-soft: #e6e6ed;
    --lx-border: #e4e4e7;
    --lx-panel: #fff;
    --lx-panel-2: #f1f1f6;
    --lx-canvas: #f8f8f9;
    --lx-accent: #35b7f3;
    --lx-accent-deep: #129ad9;
    --lx-accent-soft: #55c3f6;
    --lx-accent-rgb: 53,183,243;
    --lx-role: #0da2e7;
    --lx-role-fg: #096c9a;
    --lx-role-rgb: 13,162,231;
    --lx-cta-a: #0d72a0;
    --lx-cta-b: #0b648e;
    --lx-earned: #059467;
    --lx-earned-fg: #04865d;
    --lx-pending: #db7706;
    --lx-pending-fg: #b36205;
    --lx-balance-fg: #0d776b;
    --lx-danger: #ef4444;
    --lx-danger-fg: #eb1414;
    --lx-success: #10b77f;
    --lx-success-fg: #0b835b;
    --lx-card-sh: 0 1px 2px rgba(78,78,126,.05), 0 6px 20px -4px rgba(78,78,126,.07);
    --lx-display: "Geist", Inter, ui-sans-serif, system-ui, sans-serif;
    --lx-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    grid-template-columns: 248px minmax(0, 1fr);
    background: var(--lx-canvas);
}

body.theme-dark .app-shell.clipper-shell {
    --lx-ink: #f4f4f7;
    --lx-ink-2: #a5a5b8;
    --lx-ink-3: #7d7d92;
    --lx-line: #2c2c3a;
    --lx-line-soft: #26262f;
    --lx-border: #2c2c3a;
    --lx-panel: #16161d;
    --lx-panel-2: #1e1e28;
    --lx-canvas: #101015;
    --lx-card-sh: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px -4px rgba(0,0,0,.45);
}

/* ==========================================================================
   Bare chrome — public product pages (clipper profile)

   These pages are public but belong to the product, not the marketing site, so
   they get a brand, a theme switch and a way back in rather than the full nav.
   ========================================================================== */

.bare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 32px;
    /* Set outright rather than inherited: this bar sits above pages that bring
       their own palette, and a borrowed variable turned it dark on dark. */
    border-bottom: 1px solid #e4e4e7;
    background: #fff;
    color: #17171f;
}
.bare-header .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: inherit; }
.bare-header-actions { display: flex; align-items: center; gap: 10px; }
.bare-theme {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.bare-theme:hover { background: rgba(0,0,0,.06); }
.bare-theme svg { width: 18px; height: 18px; }
.bare-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: #0da2e7;
    color: #fff;
}
.bare-cta:hover { background: #0b8fcc; }
body.theme-dark .bare-header { background: #12121a; border-bottom-color: #26262f; color: #f4f4f7; }
body.theme-dark .bare-theme:hover { background: rgba(255,255,255,.08); }
@media (max-width: 640px) {
    .bare-header { padding: 12px 16px; }
}

/* Leaderboard: what a row gained or lost against the previous window. */
.lb-rank { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.lb-move {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}
.lb-move svg { width: 11px; height: 11px; }
.lb-move.is-up { color: #0b835b; }
.lb-move.is-down { color: #eb1414; }
.lb-move.is-new { color: var(--lx-ink-3, #878797); font-size: 9px; letter-spacing: .06em; }
.lb-move.is-flat { color: var(--lx-ink-3, #878797); }

/* Generated avatars: the SVG fills the slot the initial used to sit in. */
.cfc-avatar { display: block; border-radius: 50%; }
.lb-av { display: inline-grid; place-items: center; background: none; overflow: hidden; }
.lb-av .cfc-avatar { width: 34px; height: 34px; }
.clipper-public-avatar { display: grid; place-items: center; overflow: hidden; }
.clipper-public-avatar .cfc-avatar { width: 100%; height: 100%; border-radius: inherit; }