:root {
    --bg: #F6F8FA;
    --bg-elevated: #FFFFFF;
    --ink: #0F172A;
    --muted: #64748B;
    --border: #E2E8F0;
    --border-soft: #EEF2F6;
    --teal: #0F766E;
    --teal-bright: #14B8A6;
    --teal-soft: #CCFBF1;
    --teal-mist: #F0FDFA;
    --success: #16A34A;
    --success-soft: #DCFCE7;
    --warn: #D97706;
    --warn-soft: #FEF3C7;
    --danger: #DC2626;
    --danger-soft: #FEE2E2;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
    --shadow-hover: 0 4px 16px rgba(15, 23, 42, 0.08);
    --font: "Inter", "Segoe UI", system-ui, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 64px;
    --sticky-cta-h: 72px;

    /* aliases legados (admin / marketing) */
    --ink-soft: #0F172A;
    --sea: var(--teal-bright);
    --sea-deep: var(--teal);
    --sea-mist: var(--teal-mist);
    --brass: #A6844A;
    --paper: var(--bg);
    --paper-deep: #EEF2F6;
    --surface: var(--bg-elevated);
    --text: var(--ink);
    --ok: var(--success);
    --font-display: var(--font);
    --font-sans: var(--font);
    --nav-h: var(--header-h);
    --ease-out: var(--ease);
    --shadow-soft: var(--shadow);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}
h1, h2, h3, h4, .font-display {
    font-family: var(--font);
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--ink);
}
a { color: var(--teal); }
a:hover { color: var(--ink); }

/* ── Brand ── */
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
}
.brand-link:hover { color: var(--ink); }
.brand-link-light { color: #F8FAFC; }
.brand-link-light:hover { color: #fff; }
.brand-link-stack { flex-direction: column; justify-content: center; }
.brand-link-admin .brand-text {
    color: #fff;
    font-size: 0.95rem;
}
.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 22%;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(12, 79, 73, 0.28);
}
.brand-logo-nav { width: 42px; height: 42px; }
.brand-logo-lockup {
    height: 72px;
    width: auto;
    max-width: min(280px, 72vw);
    object-fit: contain;
    object-position: left center;
    display: block;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.brand-logo-lockup-lg {
    height: 108px;
    max-width: min(460px, 88vw);
    object-position: center;
}
.brand-logo-lockup-side {
    height: 52px;
    max-width: 210px;
}
.marketing-nav { min-height: 72px; }
.brand-logo-lg {
    width: 96px;
    height: 96px;
    box-shadow: 0 10px 28px rgba(12, 79, 73, 0.28);
}
.brand-logo-footer {
    width: 56px;
    height: 56px;
}
.marketing-footer .brand-text { color: #F8FAFC; }
.brand-logo-wrap { display: inline-flex; align-items: center; }
.brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #1D4ED8 0%, #F97316 100%);
    position: relative;
    flex-shrink: 0;
}
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 32% 30% 30% 30%;
    border-top: 2px solid rgba(255,255,255,0.95);
    border-right: 2px solid rgba(255,255,255,0.55);
    transform: skewX(-14deg);
}
.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, #1D4ED8, #F97316);
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
}
.brand-text {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}
.brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    min-width: 0;
}
.brand-slogan {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--teal);
}
.brand-link-stack .brand-lockup { align-items: center; }
.brand-link-stack .brand-text { text-align: center; }
.brand-link-stack .brand-slogan {
    margin-top: 0.45rem;
    font-size: 0.92rem;
    text-align: center;
}

/* ── Header ── */
.ig-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(246, 248, 250, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-soft);
}
.ig-header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.ig-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}
.ig-nav-link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.ig-nav-link:hover,
.ig-nav-link.is-active {
    color: var(--ink);
    background: rgba(15, 118, 110, 0.08);
}
.ig-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.ig-balance {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    line-height: 1.15;
}
@media (min-width: 576px) {
    .ig-balance { display: flex; }
}
.ig-balance-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}
.ig-balance-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--teal);
}
.ig-nav-admin {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    background: var(--teal-mist);
}
.ig-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--teal-bright), var(--teal));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ig-burger {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--ink);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ig-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.35rem;
}
.ig-dropdown .dropdown-item {
    border-radius: 8px;
    font-size: 0.9rem;
}
.ig-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ig-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
}
.ig-mobile-nav a:hover { background: var(--teal-mist); }
.ig-offcanvas { background: var(--bg); }

/* ── Buttons ── */
.btn {
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: -0.01em;
    min-height: 44px;
    transition: transform 0.15s var(--ease), background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 36px; }
.btn-ig-primary,
.btn-primary {
    background: linear-gradient(135deg, var(--teal) 0%, #0D9488 100%);
    border: none;
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 118, 110, 0.2);
}
.btn-ig-primary:hover,
.btn-ig-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0D9488 0%, var(--teal) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}
.btn-accent {
    background: var(--teal-bright);
    border: none;
    color: #042F2E;
}
.btn-accent:hover { background: #2DD4BF; color: #042F2E; }
.btn-ig-ghost,
.btn-outline-primary {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--ink);
}
.btn-ig-ghost:hover,
.btn-outline-primary:hover {
    background: var(--teal-mist);
    border-color: #99F6E4;
    color: var(--teal);
}
.btn-ig-whatsapp {
    background: #16A34A;
    border: none;
    color: #fff;
}
.btn-ig-whatsapp:hover { background: #15803D; color: #fff; }
.btn-ghost-light {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: #F8FAFC;
}
.btn-ghost-light:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.btn-copy.copied {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}
.text-teal { color: var(--teal) !important; }
.border-teal { border-color: var(--teal-bright) !important; }

/* ── Surfaces ── */
.card, .ig-surface {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}
.ig-surface { padding: 1.25rem 1.35rem; }
.ig-surface-head { margin-bottom: 1rem; }
.ig-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
.ig-section-sub {
    color: var(--muted);
    margin: 0;
    font-size: 0.95rem;
}
.ig-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}
.ig-back:hover { color: var(--teal); }
.ig-text-link {
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}
.ig-text-link:hover { color: var(--ink); }
.page-intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.page-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    margin: 0 0 0.35rem;
}
.page-sub { color: var(--muted); margin: 0; }

.ig-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #EEF2F6;
    color: #475569;
}
.ig-pill-active { background: var(--success-soft); color: #166534; }
.ig-pill-ok { background: var(--teal-mist); color: var(--teal); text-transform: none; letter-spacing: 0; }
.ig-pill-pending, .ig-pill-draft, .ig-pill-paused { background: var(--warn-soft); color: #92400E; }
.ig-pill-blocked, .ig-pill-rejected { background: var(--danger-soft); color: #991B1B; }

.badge-status { font-weight: 600; font-size: 0.75rem; text-transform: capitalize; border-radius: 6px; }
.badge-active, .badge-approved, .badge-paid { background: var(--success-soft); color: #166534; }
.badge-pending, .badge-review, .badge-processing { background: var(--warn-soft); color: #92400E; }
.badge-paused, .badge-draft { background: #EEF2F6; color: #475569; }
.badge-blocked, .badge-rejected, .badge-cancelled, .badge-deleted, .badge-suspicious { background: var(--danger-soft); color: #991B1B; }
.badge-ended { background: #DBEAFE; color: #1E40AF; }
.risk-info { background: #E0F2FE; color: #0369A1; }
.risk-low { background: var(--success-soft); color: #166534; }
.risk-medium { background: var(--warn-soft); color: #92400E; }
.risk-high { background: #FFEDD5; color: #9A3412; }
.risk-critical { background: var(--danger-soft); color: #991B1B; }

/* ── Stats / results ── */
.results-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 992px) {
    .results-grid { grid-template-columns: repeat(4, 1fr); }
}
.result-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.result-card-money {
    background: linear-gradient(145deg, #0F766E 0%, #0D9488 55%, #14B8A6 100%);
    border: none;
    color: #fff;
}
.result-card-money .result-label,
.result-card-money .result-hint { color: rgba(255,255,255,0.75); }
.result-card-money .result-hint a { color: #fff; }
.result-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.result-value {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}
.result-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    height: 100%;
}
.stat-card-primary {
    background: linear-gradient(145deg, var(--teal) 0%, #0D9488 100%);
    border: none;
    color: #fff;
}
.stat-card-primary .stat-label { color: rgba(255,255,255,0.72); }
.stat-card-primary .stat-icon { background: rgba(255,255,255,0.15); color: #fff; }
.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--teal-mist);
    color: var(--teal);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ── Campaign offer cards ── */
.campaign-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .campaign-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .campaign-grid { grid-template-columns: repeat(3, 1fr); }
}
.campaign-offer {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.campaign-offer-cover {
    margin: -1.5rem -1.5rem 1rem;
    height: 190px;
    background: #0f172a;
}
.campaign-offer-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.campaign-image-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
}
.city-picker-search {
    position: relative;
}
.city-picker-list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 0.5rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.city-picker-option,
.city-picker-empty {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    color: var(--ink);
}
.city-picker-option:hover,
.city-picker-option:focus {
    background: #F8FAFC;
}
.city-picker-empty {
    color: #64748B;
}
.city-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}
.city-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #0F172A;
    border-radius: 999px;
    padding: 0.25rem 0.55rem 0.25rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.2;
}
.city-chip:hover,
.city-chip:focus {
    background: #EEF2FF;
    border-color: #94A3B8;
}
.city-chip i {
    font-size: 0.95rem;
    opacity: 0.7;
}
.campaign-offer:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.campaign-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #FFF7ED;
    color: #C2410C;
    margin-bottom: 0.85rem;
}
.campaign-badge-hot { background: var(--teal-mist); color: var(--teal); }
.campaign-offer-meta li { display: flex; align-items: center; gap: 0.4rem; }
.campaign-offer-meta i { color: var(--teal); }
.campaign-offer-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.campaign-offer-desc {
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
    flex: 1;
}
.campaign-offer-reward {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--teal);
    line-height: 1;
}
.campaign-offer-per {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.25rem 0 1rem;
}
.campaign-offer-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.85rem;
}
.campaign-offer-meta li { padding: 0.15rem 0; }
.campaign-card { transition: transform 0.25s var(--ease); }

/* ── Campaign detail page ── */
.camp-hero {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (min-width: 992px) {
    .camp-hero {
        grid-template-columns: 1.2fr 0.8fr;
        align-items: stretch;
    }
}
.camp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.camp-title {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 0.75rem;
    letter-spacing: -0.04em;
}
.camp-lead {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 36rem;
    margin-bottom: 1.25rem;
}
.camp-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.camp-meta-row i { color: var(--teal); margin-right: 0.25rem; }

.camp-earn-card {
    background: linear-gradient(160deg, #0F766E 0%, #0D9488 45%, #14B8A6 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 12px 32px rgba(15, 118, 110, 0.25);
    display: flex;
    flex-direction: column;
}
.camp-earn-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}
.camp-earn-value {
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
    margin: 0.35rem 0;
}
.camp-earn-sub {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 1.25rem;
}
.camp-earn-projections {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 1rem;
}
.camp-earn-projections li {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}
.camp-earn-projections span { opacity: 0.8; }

.camp-link-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow);
}
.camp-link-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem 0 0.75rem;
}
@media (min-width: 640px) {
    .camp-link-box {
        flex-direction: row;
        align-items: stretch;
    }
}
.camp-link-box-sm { margin: 0.85rem 0; }
.camp-link-input {
    flex: 1;
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    background: var(--bg);
    color: var(--ink);
    width: 100%;
}
.camp-link-input:focus {
    outline: none;
    border-color: var(--teal-bright);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}
.camp-copy-feedback {
    color: var(--success);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}
.camp-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.5rem;
}
.camp-code-hint {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.camp-share-grid { margin-bottom: 2rem; }
.share-channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}
@media (min-width: 768px) {
    .share-channels { grid-template-columns: repeat(5, 1fr); }
}
.share-ch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 88px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg-elevated);
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}
.share-ch:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: var(--ink);
}
.share-ch i { font-size: 1.4rem; color: var(--teal); }
.share-ch-wa {
    background: linear-gradient(145deg, #16A34A, #15803D);
    border: none;
    color: #fff;
}
.share-ch-wa:hover { color: #fff; }
.share-ch-wa i { color: #fff; }
button.share-ch { cursor: pointer; width: 100%; }

.camp-results { margin-bottom: 2rem; }
.camp-results .ig-section-title { margin-bottom: 1rem; }

.camp-progress {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}
.camp-progress-count {
    font-size: 1.05rem;
    color: var(--muted);
}
.camp-progress-count strong {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.35rem;
}
.ig-progress {
    height: 10px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.85rem 0 0.65rem;
}
.ig-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--teal-bright));
    transition: width 1.1s var(--ease);
}
.ig-progress-bar.is-ready { width: var(--pct, 0%); }
.camp-progress-meta {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.camp-how { margin-bottom: 2rem; }
.how-steps {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    gap: 1rem;
}
@media (min-width: 992px) {
    .how-steps { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.how-steps li {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.how-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--teal-bright);
    letter-spacing: 0.06em;
}
.how-icon {
    font-size: 1.35rem;
    color: var(--teal);
    margin: 0.35rem 0;
}
.how-steps strong { font-size: 1rem; }
.how-steps span:last-child { color: var(--muted); font-size: 0.88rem; }

.camp-rules {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.rules-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    gap: 0.65rem;
}
@media (min-width: 768px) {
    .rules-list { grid-template-columns: 1fr 1fr; }
}
.rules-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
}
.rules-list i {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.rules-note {
    color: var(--warn);
    font-weight: 500;
    margin: 1rem 0 0.75rem;
}
.trust-note {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--teal-mist);
    color: var(--teal);
    font-weight: 600;
    font-size: 0.92rem;
}

.camp-join-cta {
    margin-bottom: 2rem;
}
.camp-join-inner {
    background: linear-gradient(135deg, #0F172A 0%, #0F766E 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem;
    text-align: center;
}
.camp-join-inner h2 { color: #fff; margin-bottom: 0.5rem; }
.camp-join-inner p { opacity: 0.85; margin-bottom: 1.25rem; }

.click-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}
.click-feed li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.click-feed li:last-child { border-bottom: none; }
.click-date { font-size: 0.8rem; color: var(--muted); display: block; }
.click-risk, .click-hint { font-size: 0.8rem; color: var(--muted); font-weight: 600; max-width: 16rem; text-align: right; line-height: 1.35; }
.share-scripts { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .share-scripts { grid-template-columns: repeat(3, 1fr); } }
.share-script {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 0.95rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}
.share-script p { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.45; flex: 1; }
.share-script-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal);
}
.share-script-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.share-script-source {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    resize: none;
    white-space: pre;
}
.camp-script-image { margin: 0 0 0.85rem; color: var(--muted); font-size: 0.88rem; }
.camp-scripts { margin-bottom: 1.75rem; }

.mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(246, 248, 250, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}
.page-campaign .app-main { padding-bottom: calc(var(--sticky-cta-h) + 1rem); }
@media (min-width: 992px) {
    .page-campaign .app-main { padding-bottom: 0; }
}

/* ── Dashboard ── */
.dash-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding: 1.75rem;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(20, 184, 166, 0.18), transparent 55%),
        var(--bg-elevated);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
}
.dash-greeting {
    font-size: 1rem;
    color: var(--muted);
    margin: 0 0 0.35rem;
    font-weight: 500;
}
.dash-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0;
}
.dash-hero-money { text-align: left; }
@media (min-width: 768px) {
    .dash-hero-money { text-align: right; }
}
.dash-money-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.dash-money-value {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--teal);
    line-height: 1.1;
}
.dash-money-total {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
.dash-stats { margin-bottom: 2rem; }
.dash-campaigns { margin-bottom: 2rem; }
.dash-bottom {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 992px) {
    .dash-bottom { grid-template-columns: 0.9fr 1.1fr; }
}
.dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* ── Wallet ── */
.wallet-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding: 2rem 1.75rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, #0F172A 0%, #134E4A 55%, #0F766E 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
.wallet-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 0 0 0.35rem;
}
.wallet-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    opacity: 0.9;
}
.wallet-balance {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
    margin-bottom: 1rem;
}
.wallet-subbalances {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.wallet-subbalances span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
}
.wallet-subbalances strong {
    font-size: 1.1rem;
    font-weight: 700;
}
.wallet-grid {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 992px) {
    .wallet-grid { grid-template-columns: 1.2fr 0.8fr; }
}
.tx-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tx-feed li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.tx-feed li:last-child { border-bottom: none; }
.tx-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--muted);
    flex-shrink: 0;
}
.tx-feed .is-credit .tx-icon { background: var(--success-soft); color: var(--success); }
.tx-feed .is-debit .tx-icon { background: var(--danger-soft); color: var(--danger); }
.tx-body { flex: 1; min-width: 0; }
.tx-body strong { display: block; font-size: 0.95rem; }
.tx-body span { font-size: 0.8rem; color: var(--muted); }
.tx-amount {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
}
.tx-feed .is-credit .tx-amount { color: var(--success); }
.tx-feed .is-debit .tx-amount { color: var(--danger); }
.tx-side { text-align: right; }

/* ── My links ── */
.links-grid {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .links-grid { grid-template-columns: repeat(2, 1fr); }
}
.link-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.35rem;
    box-shadow: var(--shadow);
}
.link-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.link-card-title {
    font-size: 1.1rem;
    margin: 0;
}
.link-card-reward {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 0.85rem;
}
.link-card-reward span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
}
.link-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.link-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border-soft);
    padding-top: 0.85rem;
}

.ig-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
}
.ig-empty i {
    font-size: 2.5rem;
    color: #CBD5E1;
    display: block;
    margin-bottom: 0.75rem;
}
.ig-empty h2 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.ig-empty p { color: var(--muted); margin-bottom: 1rem; }
.empty-icon { font-size: 2.5rem; color: #CBD5E1; }

/* ── App chrome ── */
.app-body { display: flex; flex-direction: column; min-height: 100vh; }
.app-main { flex: 1; }
.app-footer {
    background: transparent;
    border-top: 1px solid var(--border-soft);
    margin-top: auto;
}
.footer-link {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    margin-left: 1rem;
}
.footer-link:hover { color: var(--teal); }
.page-header h1 { font-weight: 800; }

.info-list .info-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.info-list .info-item:last-child { border-bottom: none; }
.info-list dt { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.info-list dd { margin: 0; }

.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom-width: 1px;
    background: rgba(246, 248, 250, 0.9);
    font-weight: 600;
}
.table-hover tbody tr:hover { background: var(--teal-mist); }
.flash-message { border-radius: var(--radius); }
.breadcrumb-item a { color: var(--teal); text-decoration: none; }
.breadcrumb-item.active { color: var(--muted); }
.profile-avatar { font-size: 4rem; color: var(--teal); }
.error-code {
    font-size: 5rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}
.legal-content { max-width: 42rem; }
.legal-content h2 { margin-top: 1.5rem; }
.legal-content p, .legal-content li { line-height: 1.75; color: #475569; }

/* ── Guest / Auth ── */
.guest-body {
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(20, 184, 166, 0.12), transparent 50%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(15, 118, 110, 0.08), transparent 45%),
        var(--bg);
}
.guest-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.guest-header { padding-top: 1.75rem; }
.guest-main { flex: 1; display: flex; align-items: center; padding: 1.5rem 0 2.5rem; }
.auth-shell { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
    .auth-shell {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: stretch;
        max-width: 920px;
        margin: 0 auto;
    }
}
.auth-trust {
    padding: 2rem 1.75rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #0F172A, #134E4A);
    color: rgba(248, 250, 252, 0.88);
    position: relative;
    overflow: hidden;
}
.auth-trust::before {
    content: "";
    position: absolute;
    inset: auto -20% -40% 40%;
    height: 70%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.35), transparent 65%);
}
.auth-trust > * { position: relative; z-index: 1; }
.auth-trust h2 { color: #fff; font-size: 1.75rem; margin-bottom: 0.75rem; }
.auth-trust ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.auth-trust li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.55rem 0;
    font-size: 0.95rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.auth-trust li:first-child { border-top: 0; }
.auth-trust li i { color: var(--teal-bright); margin-top: 0.15rem; }
.auth-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}
.auth-card .form-control,
.auth-card .form-select {
    border-color: var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    min-height: 44px;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
    border-color: var(--teal-bright);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.18);
}
.guest-footer .footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    margin: 0 0.5rem;
}
.guest-footer .footer-links a:hover { color: var(--teal); }
.verify-icon { font-size: 3.25rem; color: var(--teal); }
.qr-code { max-width: 200px; }
.qr-placeholder {
    width: 200px; height: 200px; margin: 0 auto;
    background: var(--paper-deep); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: var(--border);
}
.recovery-code {
    display: block; padding: 0.35rem 0.5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0.375rem; font-size: 0.85rem; text-align: center;
}

/* ── Admin (mantém estrutura, tipografia nova) ── */
.admin-body { background: var(--bg); }
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 250px;
    background: linear-gradient(180deg, #0F172A 0%, #134E4A 100%);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-sidebar .brand-link { color: #fff; }
.admin-sidebar .brand-icon { background: rgba(255,255,255,0.12); }
.admin-sidebar-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.admin-nav { padding: 0.75rem 0; flex: 1; }
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 0.9rem;
}
.admin-nav-link:hover,
.admin-nav-link:focus {
    color: #fff;
    background: rgba(20, 184, 166, 0.15);
}
.admin-nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.admin-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 0.5rem 0;
}
.admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.admin-user {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.admin-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
}
.admin-page-title {
    flex: 1;
    min-width: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-offcanvas-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 0.5rem 0;
}
.admin-logout-link {
    border: 0;
    background: transparent;
    width: 100%;
    cursor: pointer;
    color: #fca5a5 !important;
}
.admin-logout-link:hover,
.admin-logout-link:focus {
    color: #fecaca !important;
    background: rgba(248, 113, 113, 0.12) !important;
}
.admin-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.admin-main { padding: 1.5rem; flex: 1; }
.admin-sidebar-toggle { color: var(--ink); }
.admin-offcanvas { background: #0F172A; }
.admin-offcanvas .offcanvas-title { color: #fff; }
.admin-offcanvas .btn-close { filter: invert(1); }
@media (max-width: 991.98px) {
    .admin-sidebar { display: none; }
}

/* ── Marketing / Landing ── */
.marketing-body {
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.marketing-body > main { flex: 1 0 auto; }
.marketing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 72px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.marketing-nav .brand-text {
    display: block;
    color: var(--ink);
    font-size: 1.2rem;
}
.marketing-nav .brand-slogan { font-size: 0.74rem; }
.marketing-footer .brand-slogan { color: #99F6E4; }
.marketing-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
.marketing-nav-links {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}
.marketing-nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}
.marketing-nav-links a:hover { color: var(--teal); }
.marketing-nav-links .btn-accent { color: #042F2E; }
@media (max-width: 767.98px) {
    .marketing-nav-links a:not(.btn) { display: none; }
}

.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 4.25rem 0 3.25rem;
    background:
        radial-gradient(ellipse 42% 70% at 92% 8%, rgba(249, 115, 22, 0.14), transparent 60%),
        radial-gradient(ellipse 40% 60% at 0% 100%, rgba(20, 184, 166, 0.18), transparent 55%),
        linear-gradient(180deg, #F7FFFC 0%, var(--bg) 100%);
}
.lp-hero-grid {
    display: grid;
    gap: 2.25rem;
    align-items: center;
}
@media (min-width: 992px) {
    .lp-hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
        gap: 4rem;
    }
}
.lp-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #99F6E4;
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lp-title {
    font-size: clamp(2.35rem, 4.6vw, 3.7rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 1.1rem;
}
.lp-title span { color: var(--teal); }
.lp-lead {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 34rem;
    margin: 0 0 1.75rem;
}
.lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.lp-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    padding: 1.35rem 1.35rem 1.15rem;
}
.lp-panel-label {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.lp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}
.lp-steps li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.85rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--bg);
}
.lp-steps li > div strong { display: block; font-size: 0.98rem; margin-bottom: 0.15rem; }
.lp-steps li > div span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.lp-step-mark {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--teal);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}
.lp-step-mark.is-wait { background: #F97316; }
.lp-step-mark.is-ok { background: var(--success); }
.lp-panel-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1rem 0 0;
    color: var(--teal);
    font-size: 0.9rem;
    font-weight: 600;
}

.trust-band {
    background: var(--bg);
    padding: 0.5rem 0 2.5rem;
}
.trust-band-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .trust-band-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .trust-band-list { grid-template-columns: repeat(4, 1fr); }
}
.trust-band-list li {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.05rem 1rem;
    box-shadow: var(--shadow);
}
.trust-band-list li > div { min-width: 0; }
.trust-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    border-radius: 0.7rem;
    background: var(--teal-mist);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}
.trust-icon .bi {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
}
.trust-band-list strong { display: block; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.15rem; }
.trust-band-list li > div span { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.35; }

.process-section,
.promise-section,
.faq-section { padding: 4.5rem 0; }
.home-video { padding: 0.5rem 0 3rem; }
.home-video-intro { margin-bottom: 1.25rem; text-align: center; }
.home-video-frame {
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #0F172A;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.home-video-frame iframe,
.home-video-frame video { width: 100%; height: 100%; border: 0; display: block; background: #0F172A; object-fit: contain; }
.how-video {
    width: min(520px, 100%);
    margin: 0 auto 2rem;
    aspect-ratio: 9 / 16;
    background: #0F172A;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.how-video iframe,
.how-video video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.process-section { background: var(--bg); }
.promise-section { background: linear-gradient(180deg, #EEF2F6 0%, var(--bg) 100%); }
.faq-section { background: var(--surface); border-top: 1px solid var(--border); }
.section-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.65rem;
}
.section-title { font-size: clamp(1.65rem, 3vw, 2.25rem); margin-bottom: 0.65rem; }
.section-lead { color: var(--muted); max-width: 36rem; margin: 0; font-size: 1.05rem; }
.section-intro { margin-bottom: 2.75rem; }
.process-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
}
.process-rail li {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.25rem 1.35rem;
    box-shadow: var(--shadow);
}
@media (min-width: 992px) {
    .process-rail {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}
.process-index {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 0.75rem;
}
.process-rail h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.process-rail p { color: var(--muted); margin: 0; font-size: 0.98rem; }
.promise-grid { display: grid; gap: 2.5rem; }
@media (min-width: 992px) {
    .promise-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 3.5rem; }
}
.promise-list { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.promise-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.promise-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.1rem;
    background: var(--teal-bright);
}
.promise-panel {
    background: #0F172A;
    color: rgba(248, 250, 252, 0.85);
    padding: 2.25rem 2rem;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.promise-panel blockquote {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 1rem;
}
.faq-stack.accordion { --bs-accordion-border-color: var(--border); }
.faq-stack .accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--bg);
}
.faq-stack .accordion-button { background: var(--bg); font-weight: 600; }
.faq-stack .accordion-button:not(.collapsed) {
    background: var(--teal-mist);
    color: var(--ink);
    box-shadow: none;
}
.faq-stack .accordion-body { color: var(--muted); line-height: 1.7; }
.cta-band {
    padding: 4rem 0 5rem;
    background: linear-gradient(135deg, #0F172A 0%, #134E4A 55%, #0F766E 100%);
    color: rgba(248, 250, 252, 0.85);
}
.cta-band-inner { text-align: center; max-width: 36rem; margin: 0 auto; }
.cta-band-title {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    margin-bottom: 0.65rem;
}
.cta-band p { margin-bottom: 1.5rem; }
.marketing-footer {
    background: #0F172A;
    color: rgba(248, 250, 252, 0.7);
    padding: 3.5rem 0 1.75rem;
}
.marketing-footer-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
    .marketing-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.marketing-footer-copy { max-width: 28rem; font-size: 0.95rem; margin: 0; }
.marketing-footer-title {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.45);
    margin-bottom: 1rem;
}
.marketing-footer-list { list-style: none; padding: 0; margin: 0; }
.marketing-footer-list li { padding: 0.3rem 0; font-size: 0.92rem; }
.marketing-footer-list a { color: rgba(248, 250, 252, 0.78); text-decoration: none; }
.marketing-footer-list a:hover { color: #fff; }
.marketing-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.85rem;
}
.trust-seal { color: var(--teal-bright); font-weight: 600; }
.footer-credit { color: inherit; font-weight: 600; text-decoration: none; }
.footer-credit:hover { text-decoration: underline; }
.marketing-footer .footer-credit { color: #99F6E4; }
.marketing-footer .footer-credit:hover { color: #fff; }
.wa-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.95rem 0.55rem 0.55rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    border: 1px solid var(--border);
}
.wa-float i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #16A34A;
    color: #fff;
    font-size: 1.35rem;
}
.wa-float span { display: flex; flex-direction: column; line-height: 1.15; }
.wa-float strong { font-size: 0.92rem; }
.wa-float small { color: var(--muted); font-weight: 600; font-size: 0.75rem; }
.wa-float:hover { color: var(--ink); border-color: #86efac; }
@media (max-width: 767.98px) {
    .wa-float {
        width: 56px;
        height: 56px;
        padding: 0;
        gap: 0;
        justify-content: center;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .wa-float i {
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
        box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
    }
    .wa-float small { display: none; }
    .wa-float span {
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 0.2rem;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 0.12rem 0.45rem;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
        white-space: nowrap;
    }
    .wa-float strong { font-size: 0.68rem; }
}
.payout-list { list-style: none; margin: 1.25rem 0 0.5rem; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 768px) { .payout-list { grid-template-columns: repeat(3, 1fr); } }
.payout-list li {
    display: flex; justify-content: space-between; gap: 1rem;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.9rem;
}
.camp-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 1rem; }
.earn-chart {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    height: 168px;
    width: 100%;
    min-width: 0;
}
.earn-chart-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}
.earn-chart-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 2.35rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.earn-chart-bar {
    width: min(100%, 22px);
    min-height: 4px;
    background: var(--teal);
    border-radius: 8px 8px 2px 2px;
}
.earn-chart-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    text-align: center;
}
.earn-chart-label small {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
}
@media (min-width: 768px) {
    .earn-chart { gap: 0.75rem; height: 180px; }
    .earn-chart-bar { width: min(100%, 36px); }
}

/* ── Motion ── */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
.lp-hero [data-reveal] {
    animation: riseIn 0.85s var(--ease) both;
}
.lp-hero [data-reveal]:nth-child(1) { animation-delay: 0.05s; }
.lp-hero [data-reveal]:nth-child(2) { animation-delay: 0.16s; }
.lp-hero [data-reveal]:nth-child(3) { animation-delay: 0.28s; }
.lp-hero [data-reveal]:nth-child(4) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .ig-progress-bar { transition: none; }
}

/* ── PWA Install ── */
.ig-pwa-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.ig-nav-install { white-space: nowrap; }

.install-intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.install-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.5rem;
}
.install-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--success-soft);
    color: #166534;
    font-size: 0.85rem;
    font-weight: 700;
}

.install-hero-card {
    display: grid;
    gap: 1.5rem;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}
@media (min-width: 992px) {
    .install-hero-card {
        grid-template-columns: 1.4fr 0.7fr;
        align-items: center;
    }
}
.install-hero-main {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.install-app-icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.install-app-icon {
    width: 72px;
    height: 72px;
    border-radius: 22%;
    box-shadow: 0 8px 20px rgba(12, 79, 73, 0.28);
    object-fit: contain;
    background: transparent;
}
.install-app-check {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: 2px solid #fff;
}
.install-app-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.35rem;
}
.install-app-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}
.install-app-desc {
    color: var(--muted);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.install-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}
.install-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-weight: 600;
    font-size: 0.92rem;
}
.install-benefits i { color: var(--success); }
.install-hero-cta { text-align: center; }
.install-cta-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.install-cta-status {
    margin: 0.65rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--success);
}
.install-cta-status.is-error { color: var(--warn); }

.install-guides {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
    .install-guides { grid-template-columns: 1fr 1fr; }
}
.install-guide {
    background: #F1F5F9;
    border-radius: var(--radius-xl);
    padding: 1.35rem;
}
.install-guide-head {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1rem;
}
.install-guide-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    flex-shrink: 0;
}
.install-guide-icon-android { background: #16A34A; }
.install-guide-icon-ios { background: #0F172A; }
.install-guide-browser {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.install-guide h3 {
    font-size: 1.05rem;
    margin: 0.15rem 0 0;
}
.install-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.install-steps li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.92rem;
}
.install-steps li:last-child { border-bottom: none; }
.install-steps li > span {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--teal-mist);
    color: var(--teal);
    font-weight: 800;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.install-help summary {
    cursor: pointer;
    color: var(--teal);
    font-weight: 600;
    font-size: 0.9rem;
}
.install-help p {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}
.install-trust {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: var(--teal-mist);
    color: var(--teal);
    font-weight: 600;
    font-size: 0.92rem;
}

/* ── Painel simples ── */
body.has-shell { background: #f3f6f8; }
.shell { display: flex; min-height: 100vh; align-items: stretch; }
.shell-side {
    width: 248px;
    background: #fff;
    border-right: 1px solid var(--border);
}
.shell-side-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1rem 0.85rem 1.25rem;
    gap: 0.75rem;
}
.shell-brand { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.shell-brand .brand-link span { font-size: 0.95rem; line-height: 1.2; }
.shell-balance {
    display: block;
    text-decoration: none;
    background: var(--teal-mist);
    color: var(--teal);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}
.shell-balance span { display: block; font-size: 0.75rem; font-weight: 600; }
.shell-balance strong { display: block; font-size: 1.35rem; letter-spacing: -0.04em; color: var(--ink); }
.shell-links { display: flex; flex-direction: column; gap: 0.2rem; flex-shrink: 0; }
.shell-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
}
.shell-link i { color: var(--muted); font-size: 1.05rem; }
.shell-link:hover { background: #f8fafc; color: var(--ink); }
.shell-link.is-active { background: var(--teal-mist); color: var(--teal); }
.shell-link.is-active i { color: var(--teal); }
.shell-account {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
    padding-top: 0.35rem;
}
.shell-who { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.35rem 0.7rem; }
.shell-who strong, .shell-who small { display: block; }
.shell-who strong { font-size: 0.9rem; }
.shell-who small { color: var(--muted); font-size: 0.75rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-logout { color: var(--danger); cursor: pointer; }
.shell-logout i { color: var(--danger); }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-content { width: min(1080px, 100%); margin: 0 auto; padding: 1.75rem 1.25rem 2.5rem; }
.shell-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: 60px;
    padding: 0 0.85rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.shell-burger {
    width: 40px; height: 40px;
    border: 0; border-radius: 10px;
    background: var(--bg);
    font-size: 1.35rem;
}
.shell-top-balance {
    margin-left: auto;
    text-decoration: none;
    font-weight: 800;
    color: var(--teal);
    background: var(--teal-mist);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    flex-shrink: 1;
    min-width: 0;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-top-logout { margin: 0; flex-shrink: 0; }
.shell-top-logout-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #fef2f2;
    color: var(--danger);
    font-size: 1.15rem;
    display: grid;
    place-items: center;
}
.shell-top-logout-btn:hover { background: #fee2e2; color: #b91c1c; }
.shell-tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #fff;
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.shell-tabs a,
.shell-tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.45rem 0.2rem 0.55rem;
    background: transparent;
    border: 0;
}
.shell-tabs i { font-size: 1.15rem; }
.shell-tabs a.is-active,
.shell-tabs button:active { color: var(--teal); }
.pwa-tabs {
    display: none;
}
@media (max-width: 767.98px) {
    .pwa-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: #fff;
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .pwa-tabs a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.12rem;
        text-decoration: none;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 700;
        padding: 0.45rem 0.15rem 0.55rem;
    }
    .pwa-tabs i { font-size: 1.15rem; }
    .pwa-tabs a.is-active { color: var(--teal); }
    body.marketing-body,
    body.app-body:not(.has-shell) { padding-bottom: 4.6rem; }
}
@media (min-width: 992px) {
    .shell-side.offcanvas-lg {
        position: sticky;
        top: 0;
        display: flex !important;
        flex-direction: column;
        flex-grow: 0 !important;
        flex-shrink: 0;
        width: 248px !important;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        visibility: visible !important;
        background: #fff !important;
        background-color: #fff !important;
        transform: none !important;
        border-right: 1px solid var(--border) !important;
    }
    .shell-side.offcanvas-lg .shell-side-inner {
        flex: 1 0 auto;
        min-height: 100%;
    }
    .shell-tabs { display: none; }
}
@media (max-width: 991.98px) {
    .shell-side.offcanvas {
        overflow-y: auto;
    }
    .shell-side-inner {
        min-height: 100%;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }
    .shell-content { padding-bottom: 5.5rem; }
    body.has-shell .wa-float { bottom: 4.6rem; }
    body.has-shell .mobile-sticky-cta { bottom: 58px; }
}

.home-head p { margin: 0; color: var(--muted); font-weight: 600; }
.home-head h1 { margin: 0.15rem 0 1.25rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.home-balance {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.home-balance span { display: block; color: var(--muted); font-weight: 600; }
.home-balance strong {
    display: block;
    font-size: clamp(2.2rem, 6vw, 3rem);
    letter-spacing: -0.05em;
    color: var(--teal);
    line-height: 1.1;
    margin: 0.15rem 0;
}
.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .home-grid { grid-template-columns: repeat(4, 1fr); }
}
.home-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 148px;
    text-decoration: none;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: var(--shadow);
}
.home-card:hover { color: var(--ink); border-color: #99f6e4; }
.home-card i {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--teal-mist);
    color: var(--teal);
    font-size: 1.05rem;
}
.home-card strong { font-size: 1rem; }
.home-card span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.home-help {
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.9rem 1rem;
}
.home-help:hover { color: var(--ink); }
.home-help .bi-play-circle { color: var(--teal); font-size: 1.4rem; }
.home-help span { display: flex; flex-direction: column; flex: 1; }
.home-help small { color: var(--muted); }
.home-help .bi-chevron-right { color: var(--muted); }

.admin-campaigns-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-campaigns-head p { margin: 0; color: var(--muted); max-width: 36rem; }
.admin-campaigns-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.admin-campaigns-stats div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.85rem 1rem;
}
.admin-campaigns-stats span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.admin-campaigns-stats strong { font-size: 1.45rem; letter-spacing: -0.04em; }
.admin-campaign-list { display: grid; gap: 0.85rem; }
.admin-campaign-card {
    display: grid;
    grid-template-columns: 148px 1fr 180px;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 0.85rem;
    box-shadow: var(--shadow);
}
.admin-campaign-media {
    border-radius: 14px;
    overflow: hidden;
    background: var(--teal-mist);
    min-height: 132px;
}
.admin-campaign-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 132px; }
.admin-campaign-media span {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 132px;
    color: var(--teal);
    font-size: 1.8rem;
}
.admin-campaign-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.admin-campaign-title h2 { margin: 0; font-size: 1.05rem; }
.admin-campaign-body p { margin: 0.35rem 0 0.7rem; color: var(--muted); font-size: 0.9rem; }
.admin-campaign-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; }
.admin-campaign-body li { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font-size: 0.86rem; font-weight: 600; }
.admin-campaign-body i { color: var(--teal); }
.admin-campaign-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.55rem;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
}
.admin-campaign-side strong { display: block; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1; }
.admin-campaign-side span { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.admin-campaign-actions { display: flex; flex-direction: column; gap: 0.35rem; }
@media (max-width: 900px) {
    .admin-campaigns-stats { grid-template-columns: 1fr 1fr; }
    .admin-campaign-card { grid-template-columns: 1fr; }
    .admin-campaign-side { border-left: 0; border-top: 1px solid var(--border); padding: 0.8rem 0 0; }
    .admin-campaign-actions { flex-direction: row; flex-wrap: wrap; }
}

.guide-player {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 1.25rem 1.75rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.guide-stage { min-height: 340px; }
.guide-scene { display: none; }
.guide-scene.is-on { display: block; animation: guide-in 0.45s var(--ease); }
@keyframes guide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.guide-phone {
    background: linear-gradient(180deg, #0f766e 0%, #134e4a 100%);
    border-radius: 28px;
    padding: 1rem;
    color: #fff;
    min-height: 320px;
}
.guide-app { margin: 0 0 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.guide-card {
    background: #fff;
    color: var(--ink);
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.guide-card p, .guide-card small { margin: 0; color: var(--muted); }
.guide-card b { font-size: 1.7rem; color: var(--teal); letter-spacing: -0.04em; }
.guide-badge {
    align-self: flex-start;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.guide-btn {
    margin-top: 0.45rem;
    background: var(--teal);
    color: #fff;
    text-align: center;
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    font-weight: 700;
}
.guide-btn-ghost { background: var(--teal-mist); color: var(--teal); }
.guide-link {
    background: var(--bg);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    word-break: break-all;
}
.guide-phone-chat { display: flex; flex-direction: column; }
.guide-bubble {
    background: #dcfce7;
    color: #14532d;
    border-radius: 16px 16px 4px 16px;
    padding: 0.85rem 0.9rem;
    line-height: 1.45;
}
.guide-bubble span { display: block; margin-top: 0.45rem; font-weight: 700; }
.guide-send { align-self: flex-end; margin-top: 0.55rem; font-size: 0.75rem; opacity: 0.8; }
.guide-card ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.guide-card li { display: flex; justify-content: space-between; padding: 0.35rem 0; border-top: 1px solid var(--border); }
.guide-caption h2 { margin: 0.15rem 0 0.4rem; font-size: 1.45rem; }
.guide-caption p { margin: 0; color: var(--muted); }
.guide-kicker { margin: 0; color: var(--teal); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.guide-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; }
.guide-play, .guide-restart {
    border: 0;
    background: var(--bg);
    color: var(--ink);
    border-radius: 999px;
    height: 40px;
    font-weight: 700;
}
.guide-play { width: 40px; font-size: 1.15rem; }
.guide-restart { padding: 0 0.9rem; }
.guide-dots { display: flex; gap: 0.4rem; flex: 1; }
.guide-dots button {
    width: 100%;
    max-width: 42px;
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--border);
    padding: 0;
}
.guide-dots button.is-on { background: var(--teal); }
@media (max-width: 720px) {
    .guide-player { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .guide-scene.is-on { animation: none; }
}

.report-spent {
    margin-top: 1.35rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem;
    display: grid;
    gap: 1rem 1.5rem;
    box-shadow: var(--shadow);
    align-items: center;
}
@media (min-width: 768px) {
    .report-spent { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr); }
}
.report-spent > div > span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.report-spent > div > strong {
    display: block;
    margin: 0.2rem 0 0.35rem;
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}
.report-spent p { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 32rem; }
.report-spent .report-cap { margin-top: 0; max-width: none; }
.report-spent-cap { white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--ink); }
.report-kpis { margin-top: 1.35rem; }
.report-kpis strong { font-size: 1.65rem; letter-spacing: -0.04em; line-height: 1.1; }
.report-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -0.4rem 0 0.2rem; }
.report-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
}
a.report-chip { color: inherit; text-decoration: none; gap: 0.35rem; }
a.report-chip:hover { color: var(--ink); }
.report-chip-wa { color: #15803D; border-color: #86EFAC; background: #F0FDF4; }
.report-chip.is-active { color: var(--teal); border-color: #99F6E4; background: var(--teal-mist); }
.report-chip.is-paused { color: #B45309; border-color: #FDE68A; background: var(--warn-soft); }
.report-chip.is-ended,
.report-chip.is-draft { color: var(--muted); }
.report-read {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.75rem;
    align-items: start;
}
@media (min-width: 992px) {
    .report-read { grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); gap: 1.5rem; }
}
.report-headline {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.25;
    max-width: 36rem;
}
.report-rate { margin-top: 1rem; max-width: 28rem; }
.report-rate-label { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.45rem; }
.report-rate-label strong { font-size: 1.65rem; letter-spacing: -0.03em; line-height: 1; color: var(--teal); }
.report-rate.is-low .report-rate-label strong { color: #B45309; }
.report-rate-label span { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.report-rate-track {
    height: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.report-rate-bar {
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, var(--teal), var(--teal-bright));
    border-radius: 999px;
}
.report-rate.is-low .report-rate-bar { background: linear-gradient(90deg, #B45309, #F59E0B); }
.report-cap { margin-top: 1.15rem; max-width: 28rem; }
.report-cap-label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
}
.report-cap-label strong { color: var(--ink); }
.report-cap-track {
    height: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.report-cap-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal-bright));
    border-radius: 999px;
}
.report-next { height: 100%; }
.report-advice { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.report-advice li { display: flex; gap: 0.7rem; align-items: flex-start; }
.report-advice i { color: var(--teal); font-size: 1.05rem; margin-top: 0.12rem; }
.report-advice span { color: var(--ink); font-size: 0.92rem; line-height: 1.45; }
.report-block { padding-top: 1.25rem; padding-bottom: 2.75rem; }
.report-block .section-intro { margin-bottom: 1.25rem; }
.report-note { margin: 0.35rem 0 0; color: var(--muted); max-width: 40rem; }
.report-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.15rem 1rem;
    box-shadow: var(--shadow);
}
.report-chart { width: 100%; height: auto; display: block; }
.report-grid { stroke: var(--border); stroke-width: 1; }
.report-axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.report-area { fill: var(--teal); opacity: 0.14; }
.report-line-total { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.report-line-ok { fill: none; stroke: #A6844A; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.report-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0.35rem 0 0;
    padding: 0 0 0 2rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.report-legend i {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 99px;
    margin-right: 0.35rem;
}
.report-legend .is-total { background: var(--teal); }
.report-legend .is-ok { background: #A6844A; }
.report-states-section { padding-top: 0; }
.report-states { display: grid; gap: 0.85rem; margin-bottom: 1.25rem; }
.report-state-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 13rem) 1fr auto;
    gap: 0.75rem;
    align-items: center;
}
.report-state-name { display: flex; flex-direction: column; min-width: 0; }
.report-state-name strong { font-size: 0.92rem; line-height: 1.2; }
.report-state-name span { color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.report-state-track {
    height: 10px;
    background: var(--border-soft);
    border-radius: 999px;
    overflow: hidden;
}
.report-state-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal-bright));
    border-radius: 999px;
}
.report-state-count { text-align: right; min-width: 4.5rem; }
.report-state-count strong { display: block; font-size: 1rem; line-height: 1.1; }
.report-state-count span { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.report-table { margin-top: 0.25rem; }
@media (max-width: 640px) {
    .report-state-row { grid-template-columns: 1fr auto; }
    .report-state-track { grid-column: 1 / -1; }
}

.access-bulk { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.access-selected { margin-right: auto; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.access-check-col { width: 2rem; }
.access-queue { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.9rem; }
.access-queue strong { color: var(--ink); }
.access-legend { margin: 0; padding: 0.7rem 0.95rem 0.85rem; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.access-legend p { margin: 0 0 0.35rem; }
.access-legend p:last-child { margin-bottom: 0; }
.access-legend ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.access-legend li { margin: 0.2rem 0; }
.access-legend strong { color: var(--ink); }
.access-table { font-size: 0.82rem; }
.access-table thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.access-table td { vertical-align: middle; white-space: nowrap; }
.access-table tr.is-pay > td { background: #F0FDF4; }
.access-table tr.is-skip > td { background: #FEF2F2; }
.access-table td.access-verdict { max-width: 8.5rem; white-space: normal; }
.access-verdict strong { display: block; font-size: 0.78rem; line-height: 1.2; }
.access-verdict span { display: block; color: var(--muted); font-size: 0.72rem; line-height: 1.25; white-space: normal; }
.access-verdict.is-pay strong { color: #047857; }
.access-verdict.is-skip strong { color: var(--danger); }
.access-status { display: block; color: var(--muted); font-size: 0.72rem; line-height: 1.2; }
.access-who { font-weight: 700; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.access-campaign { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.access-note { display: inline-block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.75rem; vertical-align: middle; }
.access-risk { font-weight: 800; color: var(--teal); }
.access-risk.is-mid { color: #B45309; }
.access-risk.is-high { color: var(--danger); }
.access-hot { color: #B45309; font-weight: 800; }
.access-bad { color: var(--danger); font-weight: 800; }
.access-table td.access-signals { max-width: 14rem; color: var(--muted); font-size: 0.75rem; line-height: 1.3; white-space: normal; }
.access-table .btn { padding: 0.12rem 0.45rem; }

.radio-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 2.25rem 1.25rem 4rem;
}
.radio-join {
    margin-top: 1.25rem;
    padding: 1.6rem 1.4rem 1.5rem;
    border-radius: 1.4rem;
    background: linear-gradient(135deg, #0F172A 0%, #134E4A 58%, #0F766E 100%);
    color: rgba(248, 250, 252, 0.88);
    text-align: center;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}
.radio-join-kicker {
    margin: 0 0 0.35rem;
    color: #99F6E4;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.radio-join h2 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    line-height: 1.15;
}
.radio-join p {
    max-width: 34rem;
    margin: 0 auto 1.1rem;
}
.radio-join .btn { min-width: 14rem; }
.radio-signup {
    width: min(32rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 0;
    border-radius: 1.2rem;
    padding: 1.15rem 1.2rem 1.3rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.radio-signup::backdrop { background: rgba(15, 23, 42, 0.45); }
.radio-signup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.radio-signup-head h2 { margin: 0; font-size: 1.35rem; }
.radio-signup-x {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted);
}
.radio-signup-note { margin: 0.35rem 0 0.8rem; color: var(--muted); }
.radio-signup-error {
    margin: 0 0 0.8rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    background: #FEF2F2;
    color: var(--danger);
    font-weight: 600;
}
.radio-signup-error[hidden] { display: none !important; }
.radio-station {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 1.25rem 1.25rem 1.15rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}
.radio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.radio-head h1 {
    margin: 0.1rem 0 0;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
}
.radio-kicker {
    margin: 0;
    color: var(--teal);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.radio-spot[hidden] { display: none !important; }
.radio-live {
    margin: 0;
    color: var(--teal);
    font-weight: 800;
    font-size: 0.82rem;
}
.radio-live[hidden] { display: none !important; }
.radio-spot {
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.8rem;
    background: #134E4A;
    color: #fff;
    font-weight: 700;
    text-align: center;
}
.radio-yt-start {
    display: inline-flex;
    flex: none;
    margin: 0;
    width: 3.35rem;
    height: 3.35rem;
    font-size: 1.45rem;
}
.radio-yt {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    background: #0F172A;
    margin: 0;
}
.radio-empty {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--muted);
}
.radio-empty i {
    display: block;
    font-size: 2rem;
    color: var(--teal);
    margin-bottom: 0.5rem;
}
.radio-stage {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.radio-now {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
}
.radio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.radio-play,
.radio-skip {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--teal);
}
.radio-play {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    font-size: 2rem;
}
.radio-skip {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    font-size: 1.2rem;
    background: #134E4A;
}
.radio-play:hover,
.radio-skip:hover { filter: brightness(1.08); }
.radio-play.radio-yt-start {
    width: 3.35rem;
    height: 3.35rem;
    margin: 0;
    font-size: 1.45rem;
    flex: none;
}
.radio-progress,
.radio-volume {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.radio-progress input,
.radio-volume input {
    flex: 1;
    accent-color: var(--teal);
}
.radio-volume { margin-top: 0.75rem; }
.radio-volume i { color: var(--teal); }
.radio-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.radio-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.75rem 0.9rem;
    color: var(--ink);
    font-weight: 600;
}
.radio-item i { color: var(--teal); }
.radio-item.is-current {
    border-color: var(--teal);
    background: #F0FDFA;
}
.radio-yt iframe,
.radio-yt #yt-radio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}