/* ==================== BASE STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --sf-bg: #0f1419;
    --sf-card: #1a1f2e;
    --sf-card-light: #252d3d;
    --sf-text: #ffffff;
    --sf-text-muted: #8b98a5;
    --sf-accent: #4ade80;
    --sf-accent-hover: #22c55e;
    --sf-orange: #f7931e;
    --sf-flame: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);

    --biz-bg: #f5f7fa;
    --biz-sidebar: #1a1f2e;
    --biz-card: #ffffff;
    --biz-text: #1a1f2e;
    --biz-text-muted: #6b7280;
    --biz-border: #e5e7eb;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--sf-bg);
    color: var(--sf-text);
    min-height: 100vh;
    overflow-x: hidden;
}

.screen {
    display: none;
    min-height: 100vh;
    animation: fadeIn 0.3s ease;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== ROLE SELECT ==================== */
#role-select {
    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.role-container {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.role-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.role-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.role-subtitle {
    color: var(--sf-text-muted);
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* Demo Business Switcher */
.demo-switcher {
    margin-bottom: 30px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-switcher-label {
    display: block;
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-switcher-toggle {
    display: flex;
    gap: 8px;
}

.demo-toggle-btn {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: 2px solid var(--sf-card-light);
    border-radius: 12px;
    color: var(--sf-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.demo-toggle-btn i {
    font-size: 1rem;
}

.demo-toggle-btn:hover {
    border-color: var(--sf-accent);
    color: var(--sf-text);
}

.demo-toggle-btn.active {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #000;
}

.demo-toggle-btn.active[data-demo="snaccas"] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-color: #ff6b35;
}

.comedy-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    animation: comedyPulse 2s ease infinite;
}

@keyframes comedyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.role-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.role-btn {
    background: var(--sf-card);
    border: 2px solid var(--sf-card-light);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    color: var(--sf-text);
}

.role-btn:hover {
    border-color: var(--sf-accent);
    transform: translateY(-2px);
}

.role-btn i {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
}

.superfan-btn i { color: var(--sf-orange); }
.business-btn i { color: var(--sf-accent); }
.manager-btn i { color: #8b5cf6; }

/* Enterprise Demo Selector */
.enterprise-demo-selector {
    margin-top: 24px;
    padding: 20px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.enterprise-demo-label {
    color: var(--sf-text-muted);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.enterprise-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .enterprise-role-grid {
        grid-template-columns: 1fr;
    }
}

.enterprise-role-btn {
    background: var(--sf-card);
    border: 2px solid var(--sf-card-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: var(--sf-text);
}

.enterprise-role-btn:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
}

.enterprise-role-btn i {
    font-size: 1.5rem;
    color: #8b5cf6;
    margin-bottom: 8px;
    display: block;
}

.enterprise-role-btn span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.enterprise-role-btn small {
    color: var(--sf-text-muted);
    font-size: 0.8rem;
}

.role-btn span {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.role-btn small {
    color: var(--sf-text-muted);
    font-size: 0.9rem;
}

.demo-offer-btn {
    background: transparent;
    border: 1px solid var(--sf-text-muted);
    color: var(--sf-text-muted);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.demo-offer-btn:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

/* Customer Demo Section */
.customer-demo-section {
    margin-top: 24px;
    padding: 20px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 16px;
}

.customer-demo-label {
    color: var(--sf-text-muted);
    margin-bottom: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.customer-type-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 500px) {
    .customer-type-buttons {
        grid-template-columns: 1fr;
    }
}

.customer-type-btn {
    background: var(--sf-card);
    border: 2px solid var(--sf-card-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: var(--sf-text);
}

.customer-type-btn:hover {
    transform: translateY(-2px);
}

.customer-type-btn.elite {
    border-color: rgba(251, 191, 36, 0.5);
}

.customer-type-btn.elite:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

.customer-type-btn.elite i {
    color: #fbbf24;
}

.customer-type-btn.normal:hover {
    border-color: var(--sf-accent);
    background: rgba(74, 222, 128, 0.15);
}

.customer-type-btn.normal i {
    color: var(--sf-accent);
}

.customer-type-btn i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.customer-type-btn span {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.customer-type-btn small {
    color: var(--sf-text-muted);
    font-size: 0.75rem;
}

/* Elite Badge on Offer */
.elite-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.elite-badge i {
    font-size: 0.8rem;
}

.elite-perks-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 16px 0;
}

.elite-perks-banner h4 {
    color: #fbbf24;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.elite-perks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.elite-perk {
    background: rgba(251, 191, 36, 0.15);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--sf-text);
}

.elite-perk i {
    color: #fbbf24;
    margin-right: 4px;
}

/* ==================== SUPERFAN SCREENS ==================== */
.superfan-screen {
    background: var(--sf-bg);
    padding-bottom: 80px;
}

.sf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--sf-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.sf-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.sf-settings {
    background: transparent;
    border: none;
    color: var(--sf-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.sf-content {
    padding: 0 20px 20px;
    flex: 1;
    overflow-y: auto;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--sf-text);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
}

/* Tier Ring */
.tier-ring-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px auto;
}

.tier-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tier-ring-bg {
    fill: none;
    stroke: var(--sf-card);
    stroke-width: 12;
}

.tier-ring-progress {
    fill: none;
    stroke: url(#flameGradient);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

.tier-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.tier-name {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--sf-flame);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tier-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 8px;
}

.tier-progress, .tier-conversions {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

/* Balance Cards */
.balance-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.balance-card {
    flex: 1;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
}

.balance-label {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
    margin-bottom: 4px;
}

.balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

.balance-amount.pending {
    color: var(--sf-text-muted);
}

/* Live Activity */
.live-activity {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.live-activity i {
    color: var(--sf-accent);
}

.live-activity span {
    flex: 1;
    font-size: 0.9rem;
}

.live-activity .time {
    color: var(--sf-text-muted);
    font-size: 0.8rem;
}

/* Section Headers */
.section-header {
    margin: 20px 0 12px;
}

.section-header span {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.section-sub {
    font-size: 0.8rem !important;
    color: var(--sf-text-muted) !important;
    font-weight: 400 !important;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 12px;
}

.activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.activity-info {
    flex: 1;
}

.activity-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.activity-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.activity-amount {
    font-weight: 600;
}

.activity-amount.positive { color: var(--sf-accent); }

/* Rising Stars */
.rising-stars {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.star-item {
    text-align: center;
}

.star-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.star-item.highlight img {
    border: 3px solid var(--sf-orange);
}

.star-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.star-amount {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-accent);
}

.star-item.highlight .star-amount {
    color: var(--sf-orange);
}

/* Bottom Nav */
.sf-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sf-card);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--sf-card-light);
}

.nav-item {
    background: transparent;
    border: none;
    color: var(--sf-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 8px 16px;
    transition: color 0.2s;
}

.nav-item i {
    font-size: 1.2rem;
}

.nav-item.active {
    color: var(--sf-text);
}

.nav-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sf-accent);
    border: none;
    color: #000;
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: -30px;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.4);
    transition: transform 0.2s;
}

.nav-fab:hover {
    transform: scale(1.05);
}

/* ==================== CAMPAIGN MARKETPLACE ==================== */
.search-bar {
    display: flex;
    align-items: center;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
    margin-bottom: 16px;
}

.search-bar i {
    color: var(--sf-text-muted);
}

.search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--sf-text);
    font-size: 1rem;
    outline: none;
}

.search-bar input::placeholder {
    color: var(--sf-text-muted);
}

.filter-btn {
    background: transparent;
    border: none;
    color: var(--sf-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.filter-tab {
    background: var(--sf-card);
    border: 1px solid var(--sf-card-light);
    border-radius: 20px;
    padding: 8px 16px;
    color: var(--sf-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tab.active, .filter-tab:hover {
    background: var(--sf-card-light);
    color: var(--sf-text);
    border-color: var(--sf-text-muted);
}

.campaign-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campaign-card {
    background: var(--sf-card);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.campaign-card:hover {
    transform: translateY(-2px);
}

.campaign-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.campaign-info {
    padding: 12px 16px;
}

.campaign-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.campaign-name {
    font-weight: 600;
    font-size: 1rem;
}

.verified {
    color: var(--sf-accent);
    font-size: 0.9rem;
    margin-left: 4px;
}

.join-btn {
    background: transparent;
    border: 1px solid var(--sf-accent);
    color: var(--sf-accent);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.join-btn:hover, .join-btn-full {
    background: var(--sf-accent);
    color: #000;
}

.join-btn.joined {
    background: var(--sf-card-light);
    border-color: var(--sf-card-light);
    color: var(--sf-text-muted);
}

.campaign-commission {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}

/* ==================== SHARE SCREEN ==================== */
#superfan-share {
    background: var(--sf-bg);
}

.share-container {
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}

.share-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.share-header h2 {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
}

.share-subtitle {
    text-align: center;
    color: var(--sf-text-muted);
    margin-bottom: 24px;
}

.share-method-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.share-method {
    flex: 1;
    background: var(--sf-card);
    border: 2px solid var(--sf-card-light);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--sf-text);
}

.share-method.active {
    border-color: var(--sf-accent);
    background: var(--sf-card-light);
}

.share-method i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.share-method span {
    display: block;
    font-weight: 600;
}

.share-method small {
    color: var(--sf-text-muted);
    font-size: 0.75rem;
}

.share-content {
    animation: fadeIn 0.3s ease;
}

.qr-display {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.qr-code img {
    width: 200px;
    height: 200px;
    margin-bottom: 16px;
}

.qr-display h3 {
    color: #000;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.qr-display p {
    color: #666;
    font-size: 1rem;
}

.qr-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    color: #999;
}

.qr-actions {
    display: flex;
    gap: 12px;
}

.qr-action-btn {
    flex: 1;
    background: var(--sf-card);
    border: 1px solid var(--sf-card-light);
    color: var(--sf-text);
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.qr-action-btn.primary {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #000;
}

.share-message-box {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.share-message-box p {
    color: var(--sf-text-muted);
    margin-bottom: 8px;
}

.share-link {
    color: var(--sf-accent) !important;
    font-weight: 600;
}

.share-apps {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.share-app {
    background: transparent;
    border: none;
    color: var(--sf-text);
    text-align: center;
    cursor: pointer;
}

.share-app-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.share-app-icon.messages { background: #34c759; }
.share-app-icon.whatsapp { background: #25d366; }
.share-app-icon.copy { background: var(--sf-card); }

.share-app span {
    font-size: 0.8rem;
}

/* ==================== WALLET / EARNINGS ==================== */
.earnings-summary {
    display: flex;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.earning-stat {
    flex: 1;
    text-align: center;
    border-right: 1px solid var(--sf-card-light);
}

.earning-stat:last-child {
    border-right: none;
}

.earning-label {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
    margin-bottom: 4px;
}

.earning-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.payout-btn {
    width: 100%;
    background: var(--sf-accent);
    border: none;
    color: #000;
    padding: 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 24px;
    transition: background 0.2s;
}

.payout-btn:hover {
    background: var(--sf-accent-hover);
}

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 12px 16px;
}

.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.transaction-icon.sale {
    background: rgba(74, 222, 128, 0.2);
    color: var(--sf-accent);
}

.transaction-icon.payout {
    background: rgba(139, 152, 165, 0.2);
    color: var(--sf-text-muted);
}

.transaction-info {
    flex: 1;
}

.transaction-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.transaction-date {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.transaction-amount {
    font-weight: 600;
}

.transaction-amount.positive { color: var(--sf-accent); }
.transaction-amount.negative { color: var(--sf-text-muted); }

/* ==================== CASHOUT ==================== */
.cashout-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.cashout-balance {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.cashout-label {
    display: block;
    font-size: 0.9rem;
    color: var(--sf-text-muted);
    margin-bottom: 8px;
}

.cashout-amount {
    font-size: 2.5rem;
    font-weight: 700;
}

.cashout-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.cashout-option {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.cashout-option.selected {
    border-color: var(--sf-accent);
}

.cashout-option-icon {
    font-size: 1.5rem;
    color: var(--sf-text-muted);
}

.cashout-option-info {
    flex: 1;
}

.cashout-option-name {
    display: block;
    font-weight: 600;
}

.cashout-option-detail {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.cashout-check {
    font-size: 1.2rem;
    color: var(--sf-accent);
}

.confirm-cashout-btn {
    width: 100%;
    background: var(--sf-card);
    border: none;
    color: var(--sf-text-muted);
    padding: 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-cashout-btn:hover {
    background: var(--sf-accent);
    color: #000;
}

/* ==================== LEADERBOARD ==================== */
.your-rank-card {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.rank-icon {
    color: var(--sf-orange);
    font-size: 1.2rem;
}

.your-rank-card span {
    flex: 1;
    font-weight: 500;
}

.your-rank-card i:last-child {
    color: var(--sf-text-muted);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 12px 16px;
}

.leaderboard-rank {
    font-size: 0.9rem;
    color: var(--sf-text-muted);
    width: 30px;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.leaderboard-info {
    flex: 1;
}

.leaderboard-name {
    display: block;
    font-weight: 500;
}

.leaderboard-label {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.leaderboard-amount {
    font-weight: 600;
    color: var(--sf-accent);
}

/* Enhanced Leaderboard Styles */
.leaderboard-item.elite-item {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.leaderboard-item.current-user {
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.15), rgba(247, 147, 30, 0.05));
    border: 2px solid var(--sf-accent);
    box-shadow: 0 0 20px rgba(247, 147, 30, 0.2);
}

.leaderboard-rank.gold { color: #ffd700; font-weight: 700; font-size: 1.1rem; }
.leaderboard-rank.silver { color: #c0c0c0; font-weight: 700; }
.leaderboard-rank.bronze { color: #cd7f32; font-weight: 700; }

.leaderboard-avatar.elite-avatar {
    width: 50px;
    height: 50px;
    border: 2px solid #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.leaderboard-amount.elite-amount {
    color: #ffd700;
    font-size: 1.1rem;
}

.you-badge {
    background: var(--sf-accent);
    color: #000;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

.your-rank-card.elite-rank {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-badge {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: auto;
}

.leaderboard-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, var(--sf-card), rgba(247, 147, 30, 0.05));
    border-radius: 16px;
    border: 1px solid rgba(247, 147, 30, 0.2);
}

.total-stat {
    text-align: center;
}

.total-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sf-accent);
}

.total-label {
    display: block;
    font-size: 0.7rem;
    color: var(--sf-text-muted);
    margin-top: 4px;
}

/* ==================== OFFER LANDING PAGE ==================== */
.offer-screen {
    background: linear-gradient(180deg, #1a1f2e 0%, #0f1419 100%);
}

.offer-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

.offer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--sf-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.offer-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
    padding-top: 20px;
}

.offer-business-logo, .offer-referrer-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.offer-x {
    color: var(--sf-text-muted);
    font-size: 1.2rem;
}

.offer-referrer-text {
    text-align: center;
    color: var(--sf-text-muted);
    margin-bottom: 20px;
}

.offer-product {
    position: relative;
    margin-bottom: 20px;
}

.offer-product-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
}

.offer-badge {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    box-shadow: 0 4px 20px rgba(247, 147, 30, 0.4);
}

.offer-title {
    text-align: center;
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 12px;
}

.offer-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.offer-original {
    text-decoration: line-through;
    color: var(--sf-text-muted);
}

.offer-arrow {
    color: var(--sf-text-muted);
}

.offer-discounted {
    font-size: 1.2rem;
    font-weight: 700;
}

.offer-savings {
    color: var(--sf-accent);
    font-size: 0.9rem;
}

.offer-testimonial {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.offer-testimonial p {
    font-style: italic;
    color: var(--sf-text-muted);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.offer-testimonial-author {
    color: var(--sf-accent);
    font-size: 0.85rem;
}

.offer-email {
    width: 100%;
    background: var(--sf-card);
    border: 1px solid var(--sf-card-light);
    border-radius: 12px;
    padding: 16px;
    color: var(--sf-text);
    font-size: 1rem;
    margin-bottom: 12px;
}

.offer-email::placeholder {
    color: var(--sf-text-muted);
}

.offer-pay-btn {
    width: 100%;
    background: #000;
    border: none;
    color: #fff;
    padding: 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.offer-pay-btn:hover {
    opacity: 0.9;
}

.offer-pay-btn i {
    font-size: 1.5rem;
}

.offer-powered {
    text-align: center;
    color: var(--sf-text-muted);
    font-size: 0.75rem;
    margin-top: 16px;
}

.offer-business-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sf-primary);
    margin: 0 0 4px 0;
}

/* Superfan CTA on offer page */
.offer-superfan-cta {
    margin: 16px 0;
}

.superfan-offer-box {
    background: linear-gradient(135deg, #ff6b35 0%, #f72585 100%);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    color: #fff;
}

.superfan-offer-box h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.superfan-offer-box p {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.superfan-join-btn {
    background: #fff;
    color: #ff6b35;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.superfan-join-btn:hover {
    transform: scale(1.05);
}

.superfan-join-btn i {
    margin-right: 6px;
}

/* Share screen improvements */
.share-business-name {
    text-align: center;
    font-size: 1.2rem;
    color: var(--sf-primary);
    margin: 0 0 16px 0;
}

.share-link-text {
    word-break: break-all;
    font-family: monospace;
    background: var(--sf-surface);
    padding: 8px 12px;
    border-radius: 6px;
}

.qr-instruction {
    color: var(--sf-text-muted);
    font-size: 0.9rem;
    margin-top: 8px;
}

/* My campaigns list */
.my-campaigns-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.my-campaign-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sf-surface);
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
}

.my-campaign-card .campaign-icon {
    width: 44px;
    height: 44px;
    background: var(--sf-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.my-campaign-card .campaign-details {
    flex: 1;
}

.my-campaign-card .campaign-details h4 {
    margin: 0;
    font-size: 0.95rem;
}

.my-campaign-card .campaign-details p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.my-campaign-card .share-btn {
    background: var(--sf-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Transaction list */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transaction-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--sf-surface);
    border-radius: 10px;
}

.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.transaction-icon.sale {
    background: var(--sf-primary);
}

.transaction-icon.payout {
    background: #6366f1;
}

.transaction-info {
    flex: 1;
}

.transaction-name {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
}

.transaction-business {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.transaction-amount {
    font-weight: 600;
}

.transaction-amount.positive {
    color: var(--sf-primary);
}

.transaction-amount.negative {
    color: #ef4444;
}

.transaction-icon.other {
    background: #64748b;
}

.tx-verified {
    color: var(--sf-accent);
    font-size: 0.8rem;
    margin-left: 8px;
    opacity: 0.8;
}

.transaction-item {
    cursor: pointer;
    transition: background 0.2s;
}

.transaction-item:hover {
    background: var(--sf-card-light);
}

.campaign-discount {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-primary);
    margin-top: 4px;
}

.no-data {
    text-align: center;
    color: var(--sf-text-muted);
    padding: 24px;
}

/* ==================== ENHANCED SUPERFAN UI ==================== */

/* Section Header with Action */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 8px;
}

.section-action {
    background: transparent;
    border: 1px solid var(--sf-accent);
    color: var(--sf-accent);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--sf-text-muted);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: 16px;
}

.empty-state.small {
    padding: 24px 16px;
}

.empty-state.small i {
    font-size: 2rem;
}

.btn-primary {
    background: var(--sf-accent);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
}

/* Membership Cards */
.my-businesses-list {
    padding: 0 16px;
}

.membership-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sf-card);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.membership-card:hover {
    transform: translateX(4px);
}

.membership-icon {
    width: 48px;
    height: 48px;
    background: var(--sf-flame);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.membership-info {
    flex: 1;
}

.membership-info h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
}

.membership-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.membership-tier {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--sf-card-light);
}

.membership-tier.tier-spark { background: #374151; }
.membership-tier.tier-flame { background: #f7931e; color: #000; }
.membership-tier.tier-blaze { background: #ef4444; }
.membership-tier.tier-inferno { background: #dc2626; }
.membership-tier.tier-legendary { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; }

.membership-earnings {
    font-size: 0.8rem;
    color: var(--sf-accent);
}

.membership-action {
    color: var(--sf-text-muted);
    font-size: 1.2rem;
}

/* Tier Progress Card */
.tier-progress-card {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 16px;
    margin: 16px;
    cursor: pointer;
}

.tier-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tier-badge {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--sf-flame);
}

.tier-points {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}

.tier-progress-bar {
    height: 8px;
    background: var(--sf-card-light);
    border-radius: 4px;
    overflow: hidden;
}

.tier-progress-fill {
    height: 100%;
    background: var(--sf-flame);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.tier-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

/* Wallet Stats Row */
.wallet-stats-row {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--sf-card);
    border-radius: 12px;
    margin: 16px;
}

.wallet-stat {
    text-align: center;
}

.wallet-stat i {
    font-size: 1.5rem;
    color: var(--sf-accent);
    margin-bottom: 4px;
}

.wallet-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
}

.wallet-stat-label {
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

/* Earnings Summary Enhancement */
.earnings-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
}

.earning-stat {
    flex: 1;
    min-width: 90px;
    background: var(--sf-card);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.earning-stat.highlight {
    background: var(--sf-flame);
}

.earning-stat.highlight .earning-label,
.earning-stat.highlight .earning-value {
    color: #fff;
}

.earning-value.pending {
    color: #facc15;
}

.earning-note {
    display: block;
    font-size: 0.65rem;
    color: var(--sf-text-muted);
    margin-top: 2px;
}

.earning-label {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
    margin-bottom: 4px;
}

.earning-value {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Activity Item Enhancement */
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sf-card);
    border-radius: 10px;
    margin: 0 16px 8px;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon.sale {
    background: var(--sf-accent);
    color: #000;
}

.activity-info {
    flex: 1;
}

.activity-name {
    display: block;
    font-weight: 500;
}

.activity-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.activity-amount {
    font-weight: 600;
}

.activity-amount.positive {
    color: var(--sf-accent);
}

/* Live Activity Enhancement */
.live-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sf-accent);
    color: #000;
    padding: 12px 16px;
    margin: 16px;
    border-radius: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.live-activity i {
    font-size: 1.2rem;
}

.live-activity .time {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Payout Button */
.payout-btn {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    background: var(--sf-accent);
    color: #000;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.payout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== BUSINESS SCREENS ==================== */
.business-screen {
    background: var(--biz-bg);
    color: var(--biz-text);
}

.biz-layout {
    display: flex;
    min-height: 100vh;
}

.biz-sidebar {
    width: 220px;
    background: var(--biz-sidebar);
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.biz-logo {
    margin-bottom: 40px;
}

.biz-logo span {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.biz-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.biz-nav-item {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    padding: 12px 16px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.biz-nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.biz-nav-item.active {
    background: var(--sf-accent);
    color: #000;
}

.biz-main {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.biz-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.biz-breadcrumb {
    font-size: 0.85rem;
    color: var(--biz-text-muted);
}

.biz-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
}

.biz-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.biz-pulse {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--biz-text-muted);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--sf-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.biz-date-filter {
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--biz-text);
    cursor: pointer;
}

/* Business Hero Card */
.business-hero-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    height: 160px;
}

/* Scope Indicator Badge (for managers viewing filtered data) */
.scope-indicator-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(139, 92, 246, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    backdrop-filter: blur(8px);
    animation: slideIn 0.3s ease;
}

.scope-indicator-badge i {
    font-size: 0.7rem;
}

.business-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
}

.business-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.owner-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #ffd700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.business-hero-info h2 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.business-hero-info p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
}

.biz-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.biz-stat-card {
    background: var(--biz-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--biz-text-muted);
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-value.highlight {
    color: var(--sf-accent);
}

.stat-change {
    font-size: 0.8rem;
    color: var(--biz-text-muted);
}

.stat-change.positive {
    color: var(--sf-accent);
}

.biz-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.biz-card {
    background: var(--biz-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.see-all {
    color: var(--sf-accent);
    text-decoration: none;
    font-size: 0.85rem;
}

.chart-card {
    grid-column: 1 / -1;
}

.chart-card h3 {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
}

.chart-placeholder {
    height: 150px;
    position: relative;
}

.revenue-chart {
    width: 100%;
    height: 100%;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--biz-text-muted);
}

.leaderboard-mini {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leader-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leader-rank {
    width: 20px;
    font-weight: 500;
    color: var(--biz-text-muted);
}

.leader-row img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.leader-name {
    flex: 1;
    font-weight: 500;
}

.leader-earnings {
    color: var(--biz-text-muted);
}

/* Enhanced Leader Row Styles */
.leader-row.elite-leader {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
    border-radius: 10px;
    padding: 10px;
    margin: -4px -10px;
}

.leader-row.elite-leader img {
    width: 45px;
    height: 45px;
    border: 2px solid #ffd700;
}

.leader-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leader-info .leader-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leader-stats {
    font-size: 0.75rem;
    color: var(--biz-text-muted);
}

.elite-badge-sm {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #000;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 700;
}

.leader-rank.gold { color: #ffd700; font-weight: 700; }
.leader-rank.silver { color: #c0c0c0; font-weight: 700; }
.leader-rank.bronze { color: #cd7f32; font-weight: 700; }

.elite-earnings {
    color: #ffd700 !important;
    font-weight: 700;
    font-size: 1.1rem;
}

.leaderboard-highlight {
    margin-top: 16px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.15), rgba(247, 147, 30, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(247, 147, 30, 0.3);
    font-size: 0.85rem;
    color: var(--sf-accent);
    text-align: center;
}

.leaderboard-highlight i {
    margin-right: 6px;
}

.live-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.feed-icon.sale { background: rgba(74, 222, 128, 0.2); color: var(--sf-accent); }
.feed-icon.scan { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.feed-icon.new { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }

.feed-info {
    flex: 1;
}

.feed-info strong {
    display: block;
    font-size: 0.85rem;
}

.feed-info span {
    font-size: 0.75rem;
    color: var(--biz-text-muted);
}

.feed-time {
    font-size: 0.75rem;
    color: var(--biz-text-muted);
}

.create-campaign-btn {
    background: var(--sf-accent);
    border: none;
    color: #000;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.create-campaign-btn:hover {
    background: var(--sf-accent-hover);
}

/* Data Tables */
.data-table {
    background: var(--biz-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--biz-border);
}

.data-table th {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--biz-text-muted);
    background: #f9fafb;
}

.data-table td {
    font-size: 0.9rem;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-cell img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(74, 222, 128, 0.2);
    color: #16a34a;
}

.status-badge.completed {
    background: rgba(74, 222, 128, 0.2);
    color: #16a34a;
}

.action-btn {
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.2s;
}

.action-btn:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--biz-text-muted);
}

.pagination-btns {
    display: flex;
    gap: 4px;
}

.pagination-btns button {
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.pagination-btns button.active {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #000;
}

.pagination-btns button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Business Campaigns */
.campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.campaign-card-biz {
    background: var(--biz-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    cursor: pointer;
}

.campaign-card-biz:hover {
    transform: translateY(-2px);
}

.campaign-card-biz img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.campaign-card-content {
    padding: 16px;
    position: relative;
}

.campaign-card-content h4 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.campaign-stats {
    color: var(--biz-text-muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.campaign-metrics {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--biz-text-muted);
}

.campaign-metrics i {
    margin-right: 4px;
}

.campaign-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.campaign-status.live {
    background: rgba(74, 222, 128, 0.2);
    color: #16a34a;
}

.campaign-status.draft {
    background: rgba(139, 152, 165, 0.2);
    color: var(--biz-text-muted);
}

.new-campaign-card {
    background: var(--biz-card);
    border: 2px dashed var(--biz-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    cursor: pointer;
    color: var(--biz-text-muted);
    transition: all 0.2s;
}

.new-campaign-card:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.new-campaign-card i {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.create-btn {
    background: var(--sf-accent);
    border: none;
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input {
    display: flex;
    align-items: center;
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: 8px;
    padding: 8px 12px;
    gap: 8px;
}

.search-input i {
    color: var(--biz-text-muted);
}

.search-input input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--biz-text);
}

.filter-button {
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==================== MODAL ==================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--biz-card);
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--biz-border);
}

.modal-header h2 {
    font-size: 1.2rem;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: var(--biz-text-muted);
    cursor: pointer;
}

.wizard-progress {
    display: flex;
    padding: 16px 24px;
    border-bottom: 1px solid var(--biz-border);
    gap: 8px;
    overflow-x: auto;
}

.wizard-step {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 0.8rem;
    color: var(--biz-text-muted);
    position: relative;
    white-space: nowrap;
}

.wizard-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--biz-border);
    border-radius: 2px;
}

.wizard-step.active::before,
.wizard-step.completed::before {
    background: var(--sf-accent);
}

.wizard-step.active {
    color: var(--biz-text);
    font-weight: 500;
}

.wizard-content {
    display: none;
    padding: 24px;
}

.wizard-content.active {
    display: block;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 16px;
}

.form-group label:first-child {
    margin-top: 0;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--biz-border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--biz-text);
}

.form-group textarea {
    resize: vertical;
}

.image-upload {
    border: 2px dashed var(--biz-border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: var(--biz-text-muted);
}

.image-upload i {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
}

.browse-btn {
    background: var(--sf-accent);
    border: none;
    color: #000;
    padding: 8px 16px;
    border-radius: 6px;
    margin-top: 12px;
    cursor: pointer;
}

.price-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--biz-border);
    border-radius: 8px;
    overflow: hidden;
}

.price-input span {
    padding: 12px;
    background: #f9fafb;
    color: var(--biz-text-muted);
}

.price-input input {
    border: none;
    padding: 12px;
    flex: 1;
}

.economics-label {
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.slider-group {
    margin-bottom: 24px;
}

.slider-group label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.slider-group input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--biz-border);
    outline: none;
    -webkit-appearance: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sf-accent);
    cursor: pointer;
}

.slider-result {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    color: var(--biz-text-muted);
    margin-top: 8px;
}

.outcome-box {
    background: var(--sf-bg);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #fff;
}

.outcome-box span:first-child {
    display: block;
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    margin-bottom: 8px;
}

.outcome-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-range input {
    flex: 1;
}

.landing-preview {
    border: 1px solid var(--biz-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: center;
}

.preview-phone {
    width: 180px;
    height: 320px;
    background: linear-gradient(180deg, #1a1f2e 0%, #0f1419 100%);
    border-radius: 24px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.preview-content {
    text-align: center;
    color: #fff;
}

.preview-badge {
    background: var(--sf-flame);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0 auto 12px;
}

.preview-badge.small {
    width: 40px;
    height: 40px;
    font-size: 0.6rem;
}

.preview-content h4 {
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.preview-content p {
    font-size: 0.65rem;
    color: var(--sf-text-muted);
}

.review-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.review-info h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    margin-top: 20px;
}

.review-info h3:first-child {
    margin-top: 0;
}

.review-info p {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.review-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.preview-phone.small {
    width: 120px;
    height: 200px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--biz-border);
}

.btn-back {
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-next {
    background: var(--sf-accent);
    border: none;
    color: #000;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-launch {
    background: var(--sf-accent);
    border: none;
    color: #000;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

/* ==================== TOAST ==================== */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--sf-card);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2000;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.success {
    background: var(--sf-accent);
    color: #000;
}

/* ==================== RESPONSIVE / MOBILE FIRST ==================== */

/* Mobile Bottom Nav for Business */
.biz-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--biz-sidebar);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
}

.biz-mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.biz-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    padding: 8px 12px;
    cursor: pointer;
    transition: color 0.2s;
}

.biz-mobile-nav-item i {
    font-size: 1.2rem;
}

.biz-mobile-nav-item.active {
    color: var(--sf-accent);
}

.biz-mobile-nav-item:hover {
    color: white;
}

/* Mobile Header */
.biz-mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--biz-sidebar);
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.biz-mobile-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.biz-mobile-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
}

.biz-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    /* Hide desktop sidebar, show mobile nav */
    .biz-sidebar {
        display: none;
    }

    .biz-mobile-nav {
        display: block;
    }

    .biz-mobile-header {
        display: block;
    }

    /* Adjust main content for mobile header/nav */
    .biz-main {
        padding: 16px;
        padding-top: 80px;
        padding-bottom: 90px;
    }

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

    /* Stack header vertically */
    .biz-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .biz-header-left h1 {
        font-size: 1.5rem;
    }

    .biz-header-right {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    /* Level selector mobile */
    .dashboard-level-selector {
        margin-right: 0;
    }

    .level-current-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .level-dropdown {
        right: auto;
        left: 0;
    }

    /* Level banner mobile */
    .level-banner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .level-banner-content {
        justify-content: center;
    }

    /* Stats cards mobile */
    .biz-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .biz-stat-card {
        padding: 16px;
    }

    /* Quick actions mobile - horizontal scroll */
    .quick-actions {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .quick-action-btn {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    /* Cards mobile */
    .biz-card {
        padding: 16px;
    }

    .biz-card h3 {
        font-size: 1rem;
    }

    /* Forms mobile */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Tables mobile */
    .review-grid {
        grid-template-columns: 1fr;
    }

    .data-table {
        overflow-x: auto;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .data-table table {
        min-width: 500px;
    }

    /* Campaign modal mobile */
    .modal-content {
        margin: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    /* Hide pulse on mobile in beginner */
    .biz-pulse {
        display: none;
    }

    .biz-date-filter {
        width: 100%;
    }

    /* Onboarding mobile tweaks */
    .onboarding-container {
        padding: 1rem;
    }

    .onboarding-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .stat-item {
        flex: 1;
        min-width: 80px;
    }

    /* Create campaign button mobile */
    .create-campaign-btn {
        position: fixed;
        bottom: 80px;
        right: 16px;
        padding: 14px 20px;
        border-radius: 50px;
        box-shadow: 0 4px 20px rgba(247, 147, 30, 0.4);
        z-index: 50;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .biz-main {
        padding: 12px;
        padding-top: 72px;
        padding-bottom: 85px;
    }

    .quick-action-btn span {
        display: none;
    }

    .quick-action-btn {
        padding: 12px;
    }

    .level-current-btn span {
        display: none;
    }
}

/* ==================== LOGIN MODAL ==================== */
.login-modal-content {
    max-width: 400px;
    padding: 2rem;
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: #888;
}

.login-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.login-tab {
    flex: 1;
    padding: 0.75rem;
    border: none;
    background: #2a2a3e;
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.login-tab.active {
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    color: white;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    color: #aaa;
}

.form-group input {
    padding: 0.75rem 1rem;
    border: 1px solid #3a3a4e;
    border-radius: 8px;
    background: #1a1a2e;
    color: white;
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: #f7931e;
}

.login-submit-btn {
    padding: 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-submit-btn:hover {
    transform: translateY(-2px);
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: #666;
    font-size: 0.75rem;
}

/* ==================== API STATUS ==================== */
.api-status {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(26, 26, 46, 0.9);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #888;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 1px solid #3a3a4e;
}

.api-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
}

.api-status.connected .api-dot {
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
}

.api-status.connected .api-text {
    color: #4ade80;
}

.api-status.error .api-dot {
    background: #ef4444;
}

.api-status.error .api-text {
    color: #ef4444;
}

/* ==================== ROLE BUTTONS - LOGIN ==================== */
.role-login-btn {
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    border: 1px solid #4ade80;
    background: transparent;
    color: #4ade80;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.role-login-btn:hover {
    background: #4ade80;
    color: #1a1a2e;
}

.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.user-badge i {
    font-size: 0.75rem;
}

/* ==================== MODAL BASE ==================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #1a1a2e;
    border-radius: 16px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid #3a3a4e;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
}

.modal-close:hover {
    color: white;
}

/* ==================== IMAGE UPLOAD DRAG & DROP ==================== */
.image-upload {
    border: 2px dashed #3a3a4e;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-upload.drag-over {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.image-upload i {
    font-size: 2.5rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.image-upload span {
    color: #888;
    margin-bottom: 1rem;
}

.browse-btn {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.browse-btn:hover {
    transform: translateY(-2px);
}

#image-preview {
    position: relative;
    width: 100%;
}

#image-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
}

.remove-image-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== WHOLE DOLLARS TOGGLE ==================== */
.whole-dollars-toggle {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #4ade80;
}

.toggle-text {
    font-weight: 500;
    color: #fff;
}

.toggle-hint {
    color: #888;
    font-size: 0.875rem;
}

/* ==================== SLIDER IMPROVEMENTS ==================== */
.slider-group input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #3a3a4e;
    outline: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(247, 147, 30, 0.4);
}

.slider-result {
    display: block;
    margin-top: 0.5rem;
    color: #4ade80;
    font-size: 1.1rem;
}

/* ==================== CAMPAIGN SAVE STATUS ==================== */
.save-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.save-status.saving {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.save-status.saved {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.save-status.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ==================== LOGGED IN USER BADGE ==================== */
.logged-in-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 12px;
    margin-top: 1rem;
    color: #4ade80;
}

.logged-in-badge i {
    font-size: 1rem;
}

.logout-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: auto;
}

.logout-btn:hover {
    color: #ef4444;
}

/* ==================== BUSINESS SELECT SCREEN ==================== */
.business-select-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.business-select-container h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: white;
}

.business-select-container .subtitle {
    color: #888;
    margin-bottom: 2rem;
}

.back-btn-top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: none;
    border: none;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.back-btn-top:hover {
    color: white;
}

.businesses-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.business-select-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #2a2a3e;
    border: 1px solid #3a3a4e;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.business-select-card:hover {
    border-color: #4ade80;
    transform: translateY(-2px);
}

.business-select-card .biz-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.business-select-card .biz-info {
    flex: 1;
}

.business-select-card .biz-info h3 {
    color: white;
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.business-select-card .biz-info p {
    color: #888;
    margin: 0;
    font-size: 0.875rem;
}

.business-select-card .biz-arrow {
    color: #4ade80;
}

.create-business-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    background: transparent;
    border: 2px dashed #3a3a4e;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #888;
}

.create-business-card:hover {
    border-color: #4ade80;
    color: #4ade80;
}

.create-business-card i {
    font-size: 2rem;
}

/* ==================== CREATE BUSINESS MODAL ==================== */
.create-business-modal-content {
    max-width: 500px;
    padding: 2rem;
}

.slug-input {
    display: flex;
    align-items: center;
    background: #1a1a2e;
    border: 1px solid #3a3a4e;
    border-radius: 8px;
    overflow: hidden;
}

.slug-input span {
    padding: 0.75rem;
    background: #2a2a3e;
    color: #888;
    font-size: 0.875rem;
}

.slug-input input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.75rem;
    color: white;
}

.slug-input input:focus {
    outline: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.create-biz-submit-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.create-biz-submit-btn:hover {
    transform: translateY(-2px);
}

/* ==================== BUSINESS HEADER IN DASHBOARD ==================== */
.biz-header-business-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #4ade80;
    margin-top: 0.25rem;
}

.biz-header-business-name i {
    font-size: 0.75rem;
}

.switch-business-btn {
    background: none;
    border: 1px solid #3a3a4e;
    color: #888;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: 0.5rem;
}

.switch-business-btn:hover {
    border-color: #4ade80;
    color: #4ade80;
}

/* ==================== EMPTY STATES ==================== */
.no-businesses, .no-data {
    color: #888;
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
}

/* ==================== FORM GROUP SELECT ==================== */
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #3a3a4e;
    border-radius: 8px;
    background: #1a1a2e;
    color: white;
    font-size: 1rem;
}

.form-group select:focus {
    outline: none;
    border-color: #f7931e;
}

.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #3a3a4e;
    border-radius: 8px;
    background: #1a1a2e;
    color: white;
    font-size: 1rem;
    resize: vertical;
}

.form-group textarea:focus {
    outline: none;
    border-color: #f7931e;
}

/* ==================== PRINT MATERIALS SCREEN ==================== */
.print-content {
    padding-bottom: 100px;
}

.print-hero {
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.print-hero-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.print-hero-icon i {
    font-size: 2.5rem;
    color: white;
}

.print-hero h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

.print-hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* QR Preview */
.print-qr-preview {
    background: var(--sf-card);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 2px solid var(--sf-card-light);
}

.print-qr-code {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.print-qr-code img {
    width: 180px;
    height: 180px;
    display: block;
}

.print-qr-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.print-business-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: white;
}

.print-code {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}

/* Template Selection */
.print-templates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.print-template {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.print-template:hover {
    background: var(--sf-card-light);
}

.print-template.active {
    border-color: var(--sf-orange);
    background: rgba(247, 147, 30, 0.1);
}

.template-preview {
    width: 50px;
    height: 50px;
    background: var(--sf-card-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}

.template-preview i {
    font-size: 1.25rem;
    color: var(--sf-orange);
}

.print-template.active .template-preview {
    background: var(--sf-orange);
}

.print-template.active .template-preview i {
    color: white;
}

.template-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.template-size {
    display: block;
    font-size: 0.65rem;
    color: var(--sf-text-muted);
}

/* Print Actions */
.print-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.print-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--sf-card);
    color: white;
}

.print-action-btn:hover {
    background: var(--sf-card-light);
}

.print-action-btn.primary {
    background: var(--sf-orange);
    color: white;
}

.print-action-btn.primary:hover {
    background: #e6831a;
}

.print-action-btn i {
    font-size: 1.1rem;
}

/* POD Partners */
.pod-partners {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pod-card {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.pod-card:hover {
    background: var(--sf-card-light);
    border-color: var(--sf-card-light);
}

.pod-card.featured {
    border-color: var(--sf-orange);
    background: rgba(247, 147, 30, 0.05);
}

.pod-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    background: var(--sf-orange);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.pod-icon {
    width: 48px;
    height: 48px;
    background: var(--sf-card-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pod-card.featured .pod-icon {
    background: var(--sf-orange);
}

.pod-icon i {
    font-size: 1.25rem;
    color: var(--sf-orange);
}

.pod-card.featured .pod-icon i {
    color: white;
}

.pod-info {
    flex: 1;
    min-width: 0;
}

.pod-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.pod-info p {
    font-size: 0.8rem;
    color: var(--sf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pod-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-accent);
    white-space: nowrap;
}

/* Print Tips */
.print-tips {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    border-left: 4px solid var(--sf-orange);
}

.print-tips h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--sf-orange);
    margin-bottom: 0.75rem;
}

.print-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.print-tips li {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    padding: 0.35rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.print-tips li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--sf-orange);
}

/* POD Overlay */
.pod-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.pod-instructions {
    background: var(--sf-card);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    position: relative;
}

.pod-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--sf-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.pod-instructions h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: white;
    margin-bottom: 1rem;
}

.pod-instructions h3 i {
    color: var(--sf-orange);
}

.pod-instructions ol {
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.pod-instructions li {
    font-size: 0.9rem;
    color: var(--sf-text-muted);
    padding: 0.5rem 0;
}

.pod-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pod-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pod-btn.secondary {
    background: var(--sf-card-light);
    color: white;
}

.pod-btn.secondary:hover {
    background: #3a4458;
}

.pod-btn.primary {
    background: var(--sf-orange);
    color: white;
}

.pod-btn.primary:hover {
    background: #e6831a;
}

/* Print CTA on Share Screen */
.print-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.2) 0%, rgba(255, 107, 53, 0.2) 100%);
    border: 2px solid var(--sf-orange);
    border-radius: 16px;
    padding: 1rem;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.print-cta:hover {
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.3) 0%, rgba(255, 107, 53, 0.3) 100%);
    transform: translateY(-2px);
}

.print-cta > i:first-child {
    font-size: 2rem;
    color: var(--sf-orange);
}

.print-cta-text {
    flex: 1;
}

.print-cta-text h4 {
    font-size: 0.95rem;
    color: white;
    margin-bottom: 0.25rem;
}

.print-cta-text p {
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.print-cta > i:last-child {
    color: var(--sf-text-muted);
}

/* ==================== MY PAGE EDITOR ==================== */
.mypage-content {
    padding-bottom: 100px;
}

.preview-toggle {
    display: flex;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
}

.toggle-btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--sf-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.toggle-btn.active {
    background: var(--sf-orange);
    color: white;
}

.mypage-tab {
    animation: fadeIn 0.3s ease;
}

.mypage-toggle-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.mypage-toggle {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.mypage-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sf-card-light);
    border-radius: 28px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.mypage-toggle input:checked + .toggle-slider {
    background: var(--sf-orange);
}

.mypage-toggle input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-label {
    display: flex;
    flex-direction: column;
}

.toggle-label span {
    font-weight: 600;
    color: white;
}

.toggle-label small {
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.mypage-section {
    margin-bottom: 1.25rem;
}

.section-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mypage-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--sf-card);
    border: 2px solid transparent;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.mypage-input:focus {
    outline: none;
    border-color: var(--sf-orange);
}

.mypage-input::placeholder {
    color: var(--sf-text-muted);
}

textarea.mypage-input {
    resize: vertical;
    min-height: 80px;
}

.avatar-options, .theme-options {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.avatar-option, .theme-option {
    flex: 1;
    padding: 0.75rem;
    background: var(--sf-card);
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--sf-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.avatar-option i, .theme-option i {
    font-size: 1.25rem;
}

.avatar-option.active, .theme-option.active {
    border-color: var(--sf-orange);
    color: var(--sf-orange);
    background: rgba(247, 147, 30, 0.1);
}

.avatar-input {
    margin-top: 0.5rem;
}

.avatar-input small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.emoji-btn {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    background: var(--sf-card);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.emoji-btn:hover, .emoji-btn.active {
    border-color: var(--sf-orange);
    background: rgba(247, 147, 30, 0.1);
}

.theme-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-bottom: 0.25rem;
}

.theme-preview.default {
    background: linear-gradient(135deg, #1a1f2e 50%, #f7931e 50%);
}

.theme-preview.dark {
    background: linear-gradient(135deg, #000 50%, #333 50%);
}

.theme-preview.light {
    background: linear-gradient(135deg, #fff 50%, #f5f5f5 50%);
    border: 1px solid #ddd;
}

.theme-preview.fun {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%);
}

.mypage-save-btn {
    width: 100%;
    padding: 1rem;
    background: var(--sf-orange);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    transition: all 0.2s ease;
}

.mypage-save-btn:hover {
    background: #e6831a;
}

/* Preview Frame */
.preview-frame {
    background: var(--sf-card);
    border-radius: 16px;
    padding: 1rem;
    border: 2px dashed var(--sf-card-light);
}

/* ==================== PERSONAL LANDING PAGE (Customer View) ==================== */
.personal-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

/* Themes */
.personal-landing.default {
    background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    color: white;
}

.personal-landing.dark {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    color: white;
}

.personal-landing.light {
    background: linear-gradient(135deg, #fff 0%, #f5f7fa 100%);
    color: #1a1f2e;
}

.personal-landing.fun {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: white;
}

.pl-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 4px solid var(--sf-orange);
    background: var(--sf-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-emoji {
    font-size: 4rem;
}

.pl-headline {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.pl-message {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.pl-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.pl-cta {
    padding: 1rem 3rem;
    background: var(--sf-orange);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(247, 147, 30, 0.4);
}

.pl-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(247, 147, 30, 0.5);
}

.personal-landing.light .pl-cta {
    background: #1a1f2e;
}

.pl-badge {
    position: absolute;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.5;
}

.pl-badge img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* Personal landing view screen */
#personal-landing-view {
    position: relative;
}

#personal-landing-content {
    position: relative;
}

/* My Page Link on Share Screen */
.mypage-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.mypage-link:hover {
    border-color: var(--sf-orange);
}

.mypage-link-icon {
    width: 44px;
    height: 44px;
    background: var(--sf-orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mypage-link-icon i {
    font-size: 1.25rem;
    color: white;
}

.mypage-link-text {
    flex: 1;
}

.mypage-link-text h4 {
    font-size: 0.95rem;
    color: white;
    margin-bottom: 0.25rem;
}

.mypage-link-text p {
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.mypage-link > i:last-child {
    color: var(--sf-text-muted);
}

/* ==================== BUSINESS LANDING PAGE (Default/Fallback) ==================== */
.business-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.business-landing.default {
    background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    color: white;
}

.business-landing.dark {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    color: white;
}

.business-landing.light {
    background: linear-gradient(135deg, #fff 0%, #f5f7fa 100%);
    color: #1a1f2e;
}

.business-landing.brand {
    background: linear-gradient(135deg, var(--brand-color, #f7931e) 0%, var(--brand-dark, #e6831a) 100%);
    color: white;
}

.bl-logo {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    background: white;
    padding: 0.5rem;
}

.bl-headline {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.bl-subheadline {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

/* Video Section */
.bl-video-section {
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
}

.bl-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}

.bl-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Story Section */
.bl-story-section {
    max-width: 500px;
    margin-bottom: 2rem;
}

.bl-story-text {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
    font-style: italic;
}

/* Testimonials Section */
.bl-testimonials-section {
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
}

.bl-testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bl-testimonial {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    text-align: left;
}

.business-landing.light .bl-testimonial {
    background: rgba(0, 0, 0, 0.05);
}

.bl-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bl-testimonial-content {
    flex: 1;
}

.bl-testimonial-quote {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.bl-testimonial-name {
    font-size: 0.85rem;
    opacity: 0.7;
    font-weight: 600;
}

/* Stats */
.bl-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    opacity: 0.8;
}

.bl-stats span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bl-stats i {
    color: var(--sf-orange);
}

/* CTA */
.bl-cta {
    padding: 1rem 3rem;
    background: var(--sf-orange);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(247, 147, 30, 0.4);
}

.bl-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(247, 147, 30, 0.5);
}

.business-landing.light .bl-cta {
    background: #1a1f2e;
}

/* Badge */
.bl-badge {
    position: absolute;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.5;
}

.bl-badge img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* ==================== OFFER CLAIMED / REDEMPTION SCREEN ==================== */

.claimed-container {
    text-align: center;
    padding-bottom: 100px;
}

.claimed-success {
    padding: 2rem 0 1rem;
}

.claimed-checkmark {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    animation: popIn 0.5s ease;
}

.claimed-checkmark i {
    font-size: 40px;
    color: white;
}

@keyframes popIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.claimed-success h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: #4ade80;
}

.claimed-subtitle {
    color: var(--sf-text-muted);
    font-size: 0.95rem;
}

/* Elite Claimed Banner */
.elite-claimed-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.elite-claimed-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.elite-claimed-content i {
    font-size: 1.5rem;
    color: #fbbf24;
}

.elite-claimed-content strong {
    display: block;
    color: #fbbf24;
    font-size: 0.9rem;
}

.elite-claimed-content span {
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.elite-points-earned {
    text-align: center;
    background: rgba(251, 191, 36, 0.2);
    padding: 8px 16px;
    border-radius: 8px;
}

.elite-points-earned .points-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fbbf24;
}

.elite-points-earned .points-label {
    font-size: 0.65rem;
    color: var(--sf-text-muted);
    text-transform: uppercase;
}

/* Redemption Code Box */
.redemption-code-box {
    background: linear-gradient(135deg, #1a1f2e, #252d3d);
    border: 2px dashed #4ade80;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.redemption-label {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.redemption-code {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 4px;
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
}

.copy-code-btn {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid #4ade80;
    color: #4ade80;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.copy-code-btn:hover {
    background: #4ade80;
    color: #000;
}

/* Redemption QR */
.redemption-qr {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.redemption-qr img {
    width: 150px;
    height: 150px;
}

.qr-hint {
    color: #666;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

/* Store Info Card */
.store-info-card {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.store-icon {
    width: 50px;
    height: 50px;
    background: var(--sf-flame);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.store-details {
    flex: 1;
}

.store-details h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.store-details p {
    font-size: 0.8rem;
    color: var(--sf-text-muted);
    margin: 0;
}

.directions-btn {
    width: 44px;
    height: 44px;
    background: var(--sf-accent);
    border: none;
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    font-size: 1.1rem;
}

/* Redeem Steps */
.redeem-steps {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.redeem-steps h4 {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.redeem-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.redeem-step:last-child {
    border-bottom: none;
}

.step-num {
    width: 24px;
    height: 24px;
    background: var(--sf-accent);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Offer Summary */
.claimed-offer-summary {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.offer-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
}

.offer-summary-row.total {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 1.1rem;
}

.original-strike {
    text-decoration: line-through;
    color: var(--sf-text-muted);
}

.discount-amount {
    color: #4ade80;
}

.final-price {
    color: #4ade80;
}

/* Validity Notice */
.validity-notice {
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.8rem;
    color: #facc15;
    margin-bottom: 1.5rem;
}

.validity-notice i {
    margin-right: 8px;
}

/* Become Superfan CTA */
.become-superfan-cta {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.superfan-cta-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    text-align: left;
}

.superfan-cta-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.superfan-cta-text h4 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.superfan-cta-text p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.become-superfan-btn {
    width: 100%;
    background: white;
    color: #f7931e;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.become-superfan-btn:hover {
    transform: scale(1.02);
}

/* Referred By Card */
.referred-by-card {
    background: var(--sf-card);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    text-align: left;
}

.referrer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.referrer-info {
    flex: 1;
}

.referrer-name {
    display: block;
    font-size: 0.9rem;
}

.referrer-stats {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.referrer-stats i {
    color: #facc15;
}

/* Done Button */
.done-btn {
    width: 100%;
    background: var(--sf-card-light);
    border: none;
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

/* ==================== CONVERSION FUNNEL ==================== */

.conversion-funnel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sf-card);
    border-radius: 16px;
    padding: 16px 12px;
    margin-bottom: 20px;
}

.funnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.funnel-step.earnings .funnel-value {
    color: #4ade80;
    font-size: 1.1rem;
}

.funnel-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.funnel-icon.views {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.funnel-icon.scans {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.funnel-icon.sales {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.funnel-icon.earned {
    background: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.funnel-value {
    font-weight: 700;
    font-size: 1rem;
}

.funnel-label {
    font-size: 0.65rem;
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.funnel-arrow {
    color: var(--sf-text-muted);
    font-size: 0.7rem;
    opacity: 0.5;
}

/* Funnel Animation */
.funnel-step {
    transition: transform 0.2s;
}

.funnel-step:hover {
    transform: scale(1.05);
}

/* ==================== BUSINESS ONBOARDING WIZARD ==================== */

.onboarding-wizard {
    background: linear-gradient(135deg, #1a1f2e, #252d3d);
    border: 2px solid var(--sf-accent);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
}

.wizard-header {
    text-align: center;
    margin-bottom: 24px;
}

.wizard-header h2 {
    color: var(--sf-accent);
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.wizard-header h2 i {
    margin-right: 8px;
}

.wizard-header p {
    color: var(--sf-text-muted);
    font-size: 0.9rem;
}

.wizard-dismiss {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--sf-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
}

.wizard-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-step:hover {
    background: rgba(255,255,255,0.1);
    transform: translateX(4px);
}

.wizard-step.completed {
    opacity: 0.5;
    cursor: not-allowed;
}

.wizard-step.done {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.step-number {
    width: 36px;
    height: 36px;
    background: var(--sf-flame);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.wizard-step.done .step-number {
    background: var(--sf-accent);
}

.step-content {
    flex: 1;
}

.step-content h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 0.8rem;
    color: var(--sf-text-muted);
    margin: 0;
}

.step-status {
    color: var(--sf-text-muted);
}

.wizard-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--sf-accent);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--sf-text-muted);
    white-space: nowrap;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--biz-text);
}

.quick-action-btn:hover {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #000;
}

.quick-action-btn.primary {
    background: var(--sf-flame);
    border-color: transparent;
    color: white;
}

.quick-action-btn.primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(247, 147, 30, 0.4);
}

.quick-action-btn i {
    font-size: 1rem;
}

/* ==================== RECRUITMENT QR MODAL ==================== */

.recruit-modal-content {
    max-width: 440px;
    text-align: center;
}

.recruit-header {
    margin-bottom: 24px;
}

.recruit-header h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.recruit-header h2 i {
    color: var(--sf-accent);
    margin-right: 8px;
}

.recruit-header p {
    color: var(--sf-text-muted);
    font-size: 0.9rem;
}

.recruit-qr-container {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.recruit-qr {
    margin-bottom: 12px;
}

.recruit-qr img {
    width: 200px;
    height: 200px;
}

.recruit-qr-text {
    color: #333;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.recruit-code {
    color: #666;
    font-size: 0.85rem;
    font-family: monospace;
}

.recruit-benefits {
    text-align: left;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.recruit-benefits h4 {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: var(--sf-text-muted);
}

.recruit-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recruit-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9rem;
}

.recruit-benefits li i {
    color: var(--sf-accent);
}

.recruit-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.recruit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--sf-card-light);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.recruit-btn:hover {
    background: var(--sf-accent);
    color: #000;
}

.recruit-btn.primary {
    background: var(--sf-accent);
    color: #000;
    font-weight: 600;
}

.recruit-tip {
    background: rgba(250, 204, 21, 0.1);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.8rem;
    color: #facc15;
}

.recruit-tip i {
    margin-right: 8px;
}

/* ==================== CROSS-ROLE TRANSITION STYLES ==================== */

/* Task 1: Start Your Business CTA */
.start-business-cta {
    background: var(--sf-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.start-business-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.start-business-text {
    flex: 1;
}

.start-business-text h4 {
    margin: 0 0 2px;
    font-size: 0.9rem;
    font-weight: 600;
}

.start-business-text p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.start-business-btn {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s;
}

.start-business-btn:hover {
    transform: scale(1.02);
}

/* Task 2: Role Switcher */
.sf-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-switch-btn {
    background: var(--sf-card);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--sf-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.role-switch-btn:hover {
    background: var(--sf-accent);
    color: #000;
    border-color: var(--sf-accent);
}

.role-switcher-dropdown {
    position: absolute;
    top: 60px;
    right: 16px;
    width: calc(100% - 32px);
    max-width: 300px;
    background: var(--sf-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s;
}

.role-switcher-dropdown.open {
    opacity: 1;
    transform: translateY(0);
}

.role-switcher-header {
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.role-option:hover {
    background: var(--sf-card-light);
}

.role-option.active {
    background: rgba(247, 147, 30, 0.1);
}

.role-option i:first-child {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    color: var(--sf-accent);
}

.role-option-text {
    flex: 1;
}

.role-option-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.role-option-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.role-check {
    color: var(--sf-accent);
}

.role-switcher-add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-top: 4px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 10px;
    color: var(--sf-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.role-switcher-add:hover {
    background: var(--sf-card-light);
    color: white;
    border-color: var(--sf-accent);
}

/* Task 3: Scan to Join */
.section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scan-join-btn {
    background: var(--sf-accent);
    color: #000;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.scan-join-modal-content {
    max-width: 400px;
}

.scan-join-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.scan-join-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.scan-join-header h2 i {
    color: var(--sf-accent);
    margin-right: 8px;
}

.scan-join-header p {
    margin: 0.5rem 0 0;
    color: var(--sf-text-muted);
    font-size: 0.9rem;
}

.scan-join-camera {
    position: relative;
    aspect-ratio: 1;
    background: var(--sf-card);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.camera-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.camera-placeholder i {
    font-size: 3rem;
    color: var(--sf-text-muted);
}

.camera-placeholder p {
    color: var(--sf-text-muted);
    margin: 0;
}

.enable-camera-btn {
    background: var(--sf-accent);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.scan-join-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scan-frame {
    width: 200px;
    height: 200px;
    border: 3px solid var(--sf-accent);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}

.scan-join-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

.scan-join-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

.scan-join-divider span {
    position: relative;
    background: var(--sf-bg);
    padding: 0 12px;
    color: var(--sf-text-muted);
    font-size: 0.8rem;
}

.scan-join-manual {
    display: flex;
    gap: 8px;
}

.scan-join-input {
    flex: 1;
    background: var(--sf-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    color: white;
    font-size: 0.9rem;
}

.scan-join-input::placeholder {
    color: var(--sf-text-muted);
}

.scan-join-submit {
    width: 48px;
    background: var(--sf-accent);
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
}

.scan-join-tip {
    background: rgba(250, 204, 21, 0.1);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.8rem;
    color: #facc15;
    margin-top: 1rem;
}

.scan-join-tip i {
    margin-right: 8px;
}

/* Task 4: Add Your Business Section */
.add-business-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.add-business-divider {
    text-align: center;
    margin-bottom: 1rem;
}

.add-business-divider span {
    color: var(--sf-text-muted);
    font-size: 0.85rem;
}

.add-business-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.add-business-card:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.1));
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.add-business-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.add-business-text {
    flex: 1;
}

.add-business-text h4 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.add-business-text p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--sf-text-muted);
}

.add-business-arrow {
    color: var(--sf-text-muted);
}

/* Business Sidebar Role Switcher */
.biz-sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.switch-role-btn {
    background: rgba(247, 147, 30, 0.1) !important;
    border: 1px solid rgba(247, 147, 30, 0.3) !important;
}

.switch-role-btn:hover {
    background: rgba(247, 147, 30, 0.2) !important;
}

/* ==================== DASHBOARD PROGRESSIVE LEVELS ==================== */

/* Level Selector */
.dashboard-level-selector {
    position: relative;
    margin-right: 12px;
}

.level-current-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.level-current-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.level-current-btn i:first-child {
    font-size: 1rem;
}

.level-chevron {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.2s;
}

.level-current-btn.open .level-chevron {
    transform: rotate(180deg);
}

/* Level Dropdown */
.level-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--sf-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 200;
}

.level-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.level-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.level-option:hover {
    background: rgba(255,255,255,0.05);
}

.level-option.active {
    background: rgba(255,255,255,0.08);
}

.level-option > i:first-child {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.level-option[data-level="beginner"] > i:first-child { color: #4ade80; }
.level-option[data-level="intermediate"] > i:first-child { color: #60a5fa; }
.level-option[data-level="expert"] > i:first-child { color: #f7931e; }

.level-option-text {
    flex: 1;
    text-align: left;
}

.level-option-text strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.level-option-text span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.level-check {
    color: var(--sf-accent);
    opacity: 0;
    transition: opacity 0.2s;
}

.level-option.active .level-check {
    opacity: 1;
}

/* Mobile level selector in header */
.mobile-level .level-current-btn {
    padding: 8px 10px;
    background: rgba(255,255,255,0.1);
}

.mobile-level .level-dropdown {
    right: 0;
    left: auto;
}

/* Level Banner */
.level-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.05));
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.level-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4ade80;
}

.level-banner-content i {
    font-size: 1.2rem;
}

.level-banner-content span {
    color: rgba(255,255,255,0.8);
}

.level-banner-content strong {
    color: #4ade80;
}

.level-upgrade-btn {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.level-upgrade-btn:hover {
    background: #4ade80;
    color: #000;
}

/* Level-based hiding */
.biz-main[data-dashboard-level="beginner"] [data-level="intermediate"],
.biz-main[data-dashboard-level="beginner"] [data-level="expert"] {
    display: none !important;
}

.biz-main[data-dashboard-level="intermediate"] [data-level="expert"] {
    display: none !important;
}

.biz-main[data-dashboard-level="intermediate"] .beginner-activity,
.biz-main[data-dashboard-level="expert"] .beginner-activity {
    display: none !important;
}

/* Beginner Activity Card */
.beginner-activity {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.05), transparent);
}

.beginner-progress {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 0.9rem;
}

.progress-item.done {
    color: #4ade80;
}

.progress-item.done i {
    color: #4ade80;
}

.progress-item.pending {
    color: rgba(255,255,255,0.5);
}

.progress-item.pending i {
    color: rgba(255,255,255,0.2);
    font-size: 0.6rem;
}

.beginner-encouragement {
    background: rgba(250, 204, 21, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #facc15;
    margin: 0;
}

.beginner-encouragement i {
    margin-right: 8px;
}

/* Level transition animations */
[data-level] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==================== FULL-SCREEN BUSINESS ONBOARDING ==================== */

.biz-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
    z-index: 9999;
    overflow-y: auto;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.onboarding-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

/* Progress Dots */
.onboarding-progress {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.progress-dot.active {
    background: var(--sf-accent);
    box-shadow: 0 0 20px rgba(247, 147, 30, 0.5);
    transform: scale(1.2);
}

.progress-dot.done {
    background: #4ade80;
}

/* Skip Button */
.onboarding-skip {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-skip:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* Steps */
.onboarding-step {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    animation: slideUp 0.5s ease;
}

.onboarding-step.active {
    display: flex;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animation Icons */
.onboarding-animation {
    margin-bottom: 2rem;
}

.welcome-icon, .campaign-icon, .recruit-icon {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--sf-accent);
}

.welcome-icon {
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.2), rgba(247, 147, 30, 0.05));
    border-radius: 30px;
}

.icon-ring {
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(247, 147, 30, 0.3);
    border-radius: 35px;
    animation: pulse-ring 2s ease-out infinite;
}

.icon-ring.delay-1 { animation-delay: 0.5s; }
.icon-ring.delay-2 { animation-delay: 1s; }

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.campaign-icon {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.05));
    border-radius: 30px;
    color: #60a5fa;
}

.sparkle {
    position: absolute;
    font-size: 1.2rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

.sparkle.s1 { top: -10px; right: 0; animation-delay: 0s; }
.sparkle.s2 { top: 20px; right: -20px; animation-delay: 0.3s; }
.sparkle.s3 { bottom: 10px; right: -10px; animation-delay: 0.6s; }

@keyframes sparkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
}

.recruit-icon {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.05));
    border-radius: 30px;
    color: #4ade80;
}

.user-pop {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(74, 222, 128, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #4ade80;
    animation: pop-in 0.5s ease forwards;
    opacity: 0;
}

.user-pop.u1 { top: -15px; left: 50%; transform: translateX(-50%); animation-delay: 0.2s; }
.user-pop.u2 { bottom: 0; left: -20px; animation-delay: 0.4s; }
.user-pop.u3 { bottom: 0; right: -20px; animation-delay: 0.6s; }

@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Titles */
.onboarding-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.onboarding-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    margin: 0 0 2rem;
    line-height: 1.5;
}

/* Video Card */
.onboarding-video-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

.onboarding-video-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--sf-accent);
    transform: translateY(-2px);
}

.video-thumb {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--sf-accent), #ff6b35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.video-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.video-label {
    font-weight: 600;
    font-size: 1rem;
}

.video-duration {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.onboarding-video-card.small {
    padding: 12px 20px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.onboarding-video-card.small i {
    font-size: 1.3rem;
    color: var(--sf-accent);
}

/* Stats */
.onboarding-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sf-accent);
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* Example Card */
.onboarding-example {
    width: 100%;
    margin-bottom: 1.5rem;
}

.example-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
}

.example-header {
    background: rgba(247, 147, 30, 0.1);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--sf-accent);
}

.example-body {
    padding: 20px;
    text-align: left;
}

.example-body h4 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.example-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.example-row:last-child { border-bottom: none; }

.example-row span { color: rgba(255,255,255,0.6); }
.example-row strong { color: #4ade80; }

/* Recruit Methods */
.recruit-methods {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.recruit-method {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    transition: all 0.2s;
}

.recruit-method:hover { background: rgba(255,255,255,0.08); }

.method-icon {
    width: 48px;
    height: 48px;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #4ade80;
}

.method-text h4 { margin: 0 0 4px; font-size: 0.95rem; }
.method-text p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* Buttons */
.onboarding-next-btn {
    background: linear-gradient(135deg, var(--sf-accent), #ff6b35);
    color: white;
    border: none;
    padding: 16px 48px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.onboarding-next-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(247, 147, 30, 0.4);
}

.onboarding-back-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    padding: 12px 24px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: color 0.2s;
}

.onboarding-back-btn:hover { color: white; }

/* Mobile */
@media (max-width: 500px) {
    .onboarding-container { padding: 1.5rem; }
    .onboarding-title { font-size: 1.6rem; }
    .onboarding-subtitle { font-size: 1rem; }
    .onboarding-stats { gap: 1rem; }
    .stat-value { font-size: 1.4rem; }
    .onboarding-skip { top: 1rem; right: 1rem; }
    .onboarding-progress { top: 1rem; }
}

/* ==================== SUPERFAN ONBOARDING ==================== */

.sf-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0a1628 0%, #0f2847 50%, #1a365d 100%);
    z-index: 9999;
    overflow-y: auto;
    animation: fadeIn 0.5s ease;
}

/* Superfan Theme Colors */
.sf-theme .progress-dot.active {
    background: #60a5fa;
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

.sf-theme .welcome-icon.sf-icon {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.05));
    color: #60a5fa;
}

.sf-theme .welcome-icon .icon-ring {
    border-color: rgba(96, 165, 250, 0.3);
}

.sf-theme .video-thumb.sf-thumb {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.sf-theme .onboarding-video-card:hover {
    border-color: #60a5fa;
}

.sf-theme .onboarding-video-card.small i {
    color: #60a5fa;
}

.sf-stats .stat-value {
    color: #60a5fa;
}

.sf-btn {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
}

.sf-btn:hover {
    box-shadow: 0 10px 40px rgba(96, 165, 250, 0.4) !important;
}

/* Share Icon with Money Animation */
.share-icon {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.05));
    border-radius: 30px;
    color: #4ade80;
}

.money-pop {
    position: absolute;
    font-size: 1.5rem;
    animation: money-float 2s ease-in-out infinite;
    opacity: 0;
}

.money-pop.m1 { top: -20px; left: 10px; animation-delay: 0s; }
.money-pop.m2 { top: -15px; right: 5px; animation-delay: 0.4s; }
.money-pop.m3 { top: -25px; left: 50%; transform: translateX(-50%); animation-delay: 0.8s; }

@keyframes money-float {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 1; transform: translateY(-10px) scale(1); }
    80% { opacity: 1; transform: translateY(-30px) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.5); }
}

/* How It Works Steps */
.sf-how-it-works {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.how-step {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px 24px;
    width: 100%;
    text-align: left;
    transition: all 0.2s;
}

.how-step:hover { background: rgba(255,255,255,0.08); }

.how-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.how-text h4 { margin: 0 0 4px; font-size: 1rem; }
.how-text p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

.how-arrow {
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
}

/* Payout Icon with Coin Shower */
.payout-icon {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
    border-radius: 30px;
    color: #fbbf24;
}

.coin-shower {
    position: absolute;
    font-size: 1.5rem;
    animation: coin-rain 1.5s ease-in-out infinite;
    opacity: 0;
}

.coin-shower.c1 { top: -30px; left: 20px; animation-delay: 0s; }
.coin-shower.c2 { top: -35px; right: 15px; animation-delay: 0.3s; }
.coin-shower.c3 { top: -25px; left: 50%; animation-delay: 0.6s; }

@keyframes coin-rain {
    0% { opacity: 0; transform: translateY(-20px) rotate(-10deg); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(80px) rotate(10deg); }
}

/* Payout Methods Grid */
.payout-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 1.5rem;
}

.payout-method {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

.payout-method:hover {
    background: rgba(255,255,255,0.08);
    border-color: #fbbf24;
}

.payout-icon-small {
    width: 40px;
    height: 40px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fbbf24;
}

.payout-method span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Bonus Tip Card */
.sf-bonus-tip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    width: 100%;
    text-align: left;
    margin-bottom: 1.5rem;
}

.sf-bonus-tip i {
    font-size: 1.5rem;
    color: #fbbf24;
}

.sf-bonus-tip strong {
    color: #fbbf24;
}

.sf-bonus-tip div {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Mobile Superfan Onboarding */
@media (max-width: 500px) {
    .payout-methods {
        grid-template-columns: 1fr;
    }

    .how-step {
        padding: 12px 16px;
    }

    .how-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* ==================== COACHING SUITE - BROADCASTS ==================== */

/* Business Owner - Broadcast Composer */
.broadcast-composer {
    display: flex;
    gap: 16px;
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.composer-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--sf-accent), #ff6b35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.composer-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.composer-input-wrapper textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--biz-border);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 1rem;
    color: white;
    resize: none;
    transition: all 0.2s;
}

.composer-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--sf-accent);
    background: rgba(255,255,255,0.08);
}

.composer-input-wrapper textarea::placeholder {
    color: rgba(255,255,255,0.4);
}

.composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.composer-tools {
    display: flex;
    gap: 8px;
}

.composer-tool {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--biz-border);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.composer-tool:hover {
    background: rgba(255,255,255,0.1);
    color: var(--sf-accent);
    border-color: var(--sf-accent);
}

.composer-send-btn {
    background: linear-gradient(135deg, var(--sf-accent), #ff6b35);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-send-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(247, 147, 30, 0.4);
}

/* Broadcast Stats Row */
.broadcast-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.broadcast-stat {
    flex: 1;
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.broadcast-stat .stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sf-accent);
}

.broadcast-stat .stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

/* Broadcasts List */
.broadcasts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.broadcast-card {
    background: var(--biz-card);
    border: 1px solid var(--biz-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.2s;
}

.broadcast-card:hover {
    border-color: rgba(255,255,255,0.2);
}

.broadcast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.broadcast-time {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.broadcast-menu {
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 4px 8px;
}

.broadcast-menu:hover {
    color: white;
}

.broadcast-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}

.broadcast-media {
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
}

.broadcast-media img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.broadcast-engagement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--biz-border);
}

.reaction-bubbles {
    display: flex;
    gap: 12px;
}

.reaction-bubble {
    background: rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.read-count {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.read-count i {
    margin-right: 4px;
}

/* Coaching Section */
.coaching-section {
    margin-top: 32px;
}

.coaching-section h3 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.7);
}

.coaching-section h3 i {
    margin-right: 8px;
    color: var(--sf-accent);
}

.go-live-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.1), rgba(247, 147, 30, 0.05));
    border: 1px dashed rgba(247, 147, 30, 0.3);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.go-live-card:hover {
    border-color: var(--sf-accent);
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.15), rgba(247, 147, 30, 0.08));
}

.go-live-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--sf-accent), #ff6b35);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.go-live-content h4 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.go-live-content p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

.coming-soon-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.1);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
}

/* Superfan - Broadcasts Feed */
.sf-broadcasts-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.sf-broadcast-item {
    display: flex;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.sf-broadcast-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

.sf-broadcast-item.unread {
    background: rgba(247, 147, 30, 0.08);
    border-color: rgba(247, 147, 30, 0.2);
}

.sf-broadcast-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.sf-broadcast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-broadcast-content {
    flex: 1;
    min-width: 0;
}

.sf-broadcast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.sf-broadcast-from {
    font-weight: 600;
    font-size: 0.95rem;
}

.sf-broadcast-time {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}

.sf-broadcast-preview {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-broadcast-reactions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
}

.sf-broadcast-reactions span {
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

.sf-broadcast-unread-dot {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--sf-accent);
    border-radius: 50%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .broadcast-composer {
        flex-direction: column;
    }

    .composer-avatar {
        display: none;
    }

    .broadcast-stats-row {
        flex-wrap: wrap;
    }

    .broadcast-stat {
        flex: 1 1 calc(50% - 8px);
    }

    .broadcast-stat:last-child {
        flex: 1 1 100%;
    }
}

/* ==================== LIVE STREAMING - CLOUDFLARE REALTIME ==================== */

/* Go Live Button */
.go-live-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.go-live-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.go-live-btn .live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Live Modal Base */
#go-live-modal,
#watch-live-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    flex-direction: column;
}

#go-live-modal.active,
#watch-live-modal.active {
    display: flex;
}

/* Go Live Screens */
.go-live-screen {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.go-live-screen.active {
    display: flex;
}

/* Setup Screen */
#go-live-setup {
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.go-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.go-live-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.go-live-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background 0.2s;
}

.go-live-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Camera Preview */
.camera-preview-container {
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative;
    margin-bottom: 20px;
}

#camera-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Mirror effect */
}

.camera-preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    gap: 12px;
}

.camera-preview-placeholder i {
    font-size: 3rem;
}

/* Stream Title Input */
.stream-title-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    color: white;
    font-size: 1rem;
    width: 100%;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

.stream-title-input:focus {
    outline: none;
    border-color: #ef4444;
}

.stream-title-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Device Selector */
.device-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.device-select {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.device-select option {
    background: #1a1a1a;
    color: white;
}

/* Pre-Stream Controls */
.pre-stream-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.pre-stream-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pre-stream-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pre-stream-btn.muted,
.pre-stream-btn.off {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

/* Start Live Button */
.start-live-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 18px 48px;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.start-live-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5);
}

.start-live-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Active Stream Screen */
#go-live-active {
    position: relative;
}

.live-stream-container {
    flex: 1;
    background: #000;
    position: relative;
}

#local-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

/* Live Badge */
.live-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ef4444;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: pulse-badge 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.live-badge .dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Viewer Count */
.viewer-count {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.viewer-count i {
    color: #4ade80;
}

/* Stream Duration */
.stream-duration {
    position: absolute;
    top: 60px;
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    z-index: 10;
}

/* Live Stream Controls */
.live-stream-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 40px 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 10;
}

.stream-control-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stream-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.stream-control-btn.muted,
.stream-control-btn.off {
    background: rgba(239, 68, 68, 0.8);
}

.end-stream-btn {
    background: #ef4444;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
}

.end-stream-btn:hover {
    background: #dc2626;
}

/* Stream Ended Screen */
#go-live-ended {
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.stream-ended-content {
    max-width: 400px;
}

.stream-ended-icon {
    font-size: 4rem;
    margin-bottom: 24px;
    color: #4ade80;
}

.stream-ended-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.stream-ended-content p {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
}

.stream-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 32px;
}

.stream-stat {
    text-align: center;
}

.stream-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.stream-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.stream-ended-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.stream-ended-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.stream-ended-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.stream-ended-btn.primary {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #000;
}

/* ==================== WATCH LIVE MODAL (Superfan View) ==================== */

#watch-live-modal {
    background: #000;
}

.watch-live-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(rgba(0, 0, 0, 0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.watch-live-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.watch-live-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.watch-live-meta h3 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

.watch-live-meta span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.watch-live-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
}

/* Remote Video */
.remote-video-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#remote-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Watch Live Controls */
.watch-live-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.reaction-buttons {
    display: flex;
    gap: 12px;
}

.reaction-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.4rem;
    transition: all 0.2s;
}

.reaction-btn:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.3);
}

.leave-stream-btn {
    background: rgba(239, 68, 68, 0.8);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Floating Reactions Animation */
.floating-reaction {
    position: fixed;
    font-size: 2rem;
    animation: float-up 2s ease-out forwards;
    pointer-events: none;
    z-index: 10001;
}

@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) scale(1.5);
    }
}

/* Live Stream Card in Feed */
.live-stream-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #252d3d 100%);
    border: 2px solid #ef4444;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: glow-border 2s ease-in-out infinite;
}

@keyframes glow-border {
    0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.5); }
}

.live-stream-card:hover {
    transform: translateY(-4px);
}

.live-stream-card-thumbnail {
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-stream-card-thumbnail i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
}

.live-stream-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

.live-stream-card-viewers {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: white;
}

.live-stream-card-content {
    padding: 16px;
}

.live-stream-card-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.live-stream-card-host {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.live-stream-card-host img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* No Active Streams */
.no-live-streams {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.no-live-streams i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

.no-live-streams p {
    font-size: 1rem;
}

/* Go Live Modal Specific Styles */
.go-live-modal-content,
.watch-live-modal-content {
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    background: #0f1419;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.go-live-modal-content .modal-close,
.watch-live-modal-content .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Go Live Setup Form */
.go-live-form {
    padding: 24px;
}

.go-live-form .form-group {
    margin-bottom: 16px;
}

.go-live-form label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}

.go-live-form input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
}

.camera-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    gap: 8px;
    background: #1a1f2e;
}

.camera-preview-overlay.hidden {
    display: none;
}

.device-selectors {
    margin-bottom: 20px;
}

.device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

.device-row i {
    color: rgba(255,255,255,0.5);
    width: 20px;
}

.device-row select {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.device-row select option {
    background: #1a1f2e;
}

.device-test-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}

.live-options {
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sf-accent);
}

.live-note {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin-top: 16px;
}

/* Live Active Screen */
.live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0,0,0,0.5);
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ef4444;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.live-dot.pulse {
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.live-timer {
    color: white;
    font-weight: 600;
    font-family: 'SF Mono', monospace;
}

.live-viewers {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
}

.live-video-container {
    flex: 1;
    background: #000;
    position: relative;
    min-height: 300px;
}

.live-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: rgba(0,0,0,0.5);
}

.live-control-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
}

.live-control-btn:hover {
    background: rgba(255,255,255,0.25);
}

.live-control-btn.muted {
    background: rgba(239, 68, 68, 0.6);
}

.live-control-btn.end-btn {
    background: #ef4444;
}

.live-control-btn.end-btn:hover {
    background: #dc2626;
}

/* Live Chat Panel */
.live-chat-panel {
    max-height: 200px;
    background: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.chat-message {
    margin-bottom: 8px;
}

.chat-name {
    color: var(--sf-accent);
    font-weight: 600;
    margin-right: 8px;
    font-size: 0.85rem;
}

.chat-text {
    color: white;
    font-size: 0.9rem;
}

.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.chat-input-row input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    color: white;
    font-size: 0.9rem;
}

.chat-input-row button {
    background: var(--sf-accent);
    border: none;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* Live Ended Content */
.live-ended-content {
    text-align: center;
    padding: 40px 24px;
}

.live-ended-content i.fa-check-circle {
    font-size: 4rem;
    color: var(--sf-accent);
    margin-bottom: 16px;
}

.live-ended-content h2 {
    font-size: 1.8rem;
    margin-bottom: 24px;
    color: white;
}

.live-stats-grid {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.live-stat {
    text-align: center;
}

.live-stat .stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.live-stat .stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

/* Watch Live Modal */
.watch-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0,0,0,0.6);
}

.watch-business-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.watch-business-info img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sf-accent);
}

.watch-business-info h3 {
    font-size: 1rem;
    color: white;
    margin-bottom: 2px;
}

.watch-business-info span {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}

.watch-video-container {
    flex: 1;
    background: #000;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watch-video-container video {
    max-width: 100%;
    max-height: 100%;
}

.watch-reactions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0,0,0,0.4);
}

.reaction-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.reaction-btn:hover {
    transform: scale(1.2);
}

.watch-chat-panel {
    max-height: 180px;
    background: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

/* Mobile Responsive for Live Streaming */
@media (max-width: 768px) {
    #go-live-setup {
        padding: 16px;
    }

    .go-live-header h2 {
        font-size: 1.2rem;
    }

    .camera-preview-container {
        aspect-ratio: 4/3;
    }

    .device-selector {
        flex-direction: column;
    }

    .pre-stream-controls {
        gap: 12px;
    }

    .pre-stream-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .live-stream-controls {
        padding: 30px 16px 20px;
        gap: 16px;
    }

    .stream-control-btn {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .end-stream-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .stream-stats {
        flex-direction: column;
        gap: 16px;
    }

    .watch-live-controls {
        flex-direction: column;
        gap: 16px;
    }

    .reaction-buttons {
        order: 2;
    }
}

/* ==================== LIVE INCENTIVES - COIN DROP MAGIC ==================== */

/* Incentive Banner (shows during live stream) */
.live-incentive-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f7931e 0%, #ffb347 100%);
    border-radius: 12px;
    margin: 12px;
    animation: incentive-appear 0.5s ease-out;
    box-shadow: 0 4px 20px rgba(247, 147, 30, 0.4);
}

.live-incentive-banner.hidden {
    display: none;
}

.live-incentive-banner.viewer-incentive {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.4);
}

@keyframes incentive-appear {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.incentive-icon {
    font-size: 2rem;
    animation: coin-spin 2s ease-in-out infinite;
}

.incentive-icon.bouncing {
    animation: coin-bounce 0.6s ease-in-out infinite;
}

@keyframes coin-spin {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
}

@keyframes coin-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.incentive-info {
    flex: 1;
}

.incentive-title {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
}

.incentive-reward {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.7);
}

.incentive-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 80px;
}

.incentive-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    overflow: hidden;
}

.incentive-progress-fill {
    height: 100%;
    background: #000;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.incentive-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #000;
}

/* Incentive Button in Controls */
.live-control-btn.incentive-btn {
    background: linear-gradient(135deg, #f7931e 0%, #ffb347 100%);
    animation: pulse-gold 2s ease-in-out infinite;
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 147, 30, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(247, 147, 30, 0); }
}

/* Incentive Modal */
.incentive-modal .modal-content {
    max-width: 480px;
}

.incentive-modal-content {
    padding: 0;
    background: #0f1419;
    border-radius: 20px;
    overflow: hidden;
}

.incentive-modal-header {
    background: linear-gradient(135deg, #f7931e 0%, #ffb347 100%);
    padding: 24px;
    text-align: center;
}

.incentive-modal-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    animation: coin-spin 2s ease-in-out infinite;
}

.incentive-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 4px;
}

.incentive-modal-header p {
    color: rgba(0,0,0,0.7);
    font-size: 0.9rem;
}

.incentive-form {
    padding: 24px;
}

.incentive-form .form-group {
    margin-bottom: 20px;
}

.incentive-form label {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* Type Selection Buttons */
.incentive-type-buttons {
    display: flex;
    gap: 10px;
}

.incentive-type-btn {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
}

.incentive-type-btn i {
    font-size: 1.3rem;
}

.incentive-type-btn span {
    font-size: 0.8rem;
    font-weight: 500;
}

.incentive-type-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.incentive-type-btn.active {
    background: rgba(247, 147, 30, 0.2);
    border-color: #f7931e;
    color: #f7931e;
}

/* Target & Reward Inputs */
.incentive-target-row,
.incentive-reward-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px 16px;
}

.target-prefix,
.target-suffix,
.reward-prefix,
.reward-suffix {
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
}

.incentive-target-row input,
.incentive-reward-row input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    width: 80px;
}

.incentive-target-row input:focus,
.incentive-reward-row input:focus {
    outline: none;
}

.incentive-form input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-size: 0.95rem;
}

.incentive-form input[type="text"]::placeholder {
    color: rgba(255,255,255,0.3);
}

/* Preview */
.incentive-preview {
    margin-bottom: 20px;
}

.preview-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    margin-bottom: 8px;
}

.preview-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f7931e 0%, #ffb347 100%);
    border-radius: 10px;
}

.preview-icon {
    font-size: 1.5rem;
}

.preview-text {
    font-weight: 600;
    color: #000;
    font-size: 0.95rem;
}

/* Actions */
.incentive-actions {
    display: flex;
    gap: 12px;
}

.incentive-actions .btn-secondary {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

.incentive-actions .btn-primary {
    flex: 2;
    background: linear-gradient(135deg, #f7931e 0%, #ffb347 100%);
    border: none;
    color: #000;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.incentive-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247, 147, 30, 0.4);
}

/* ==================== COIN EXPLOSION ANIMATION ==================== */

#coin-explosion-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100000;
    overflow: hidden;
}

.flying-coin {
    position: absolute;
    font-size: 3rem;
    animation: fly-to-viewer 1.5s ease-out forwards;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

@keyframes fly-to-viewer {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    20% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(100vh);
    }
}

/* Incentive Hit Celebration */
.incentive-hit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(247, 147, 30, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    animation: celebration-flash 0.5s ease-out;
}

@keyframes celebration-flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0.95; }
}

.celebration-content {
    text-align: center;
    animation: celebration-bounce 0.5s ease-out;
}

@keyframes celebration-bounce {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.celebration-coins {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: coins-rain 1s ease-in-out infinite;
}

@keyframes coins-rain {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.celebration-text {
    font-size: 2.5rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 8px;
}

.celebration-reward {
    font-size: 1.5rem;
    color: rgba(0,0,0,0.8);
}

/* Mobile adjustments for incentive */
@media (max-width: 768px) {
    .live-incentive-banner {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .incentive-icon {
        font-size: 1.5rem;
    }

    .incentive-info {
        flex: 1 1 calc(100% - 60px);
    }

    .incentive-progress {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
    }

    .incentive-progress-bar {
        flex: 1;
    }

    .incentive-count {
        margin-left: 10px;
    }

    .incentive-type-buttons {
        flex-wrap: wrap;
    }

    .incentive-type-btn {
        flex: 1 1 calc(33% - 8px);
        padding: 10px 8px;
    }
}

/* ==================== ELITE SUPERFAN SYSTEM ==================== */

/* Elite Banner on Superfan Home */
.elite-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #ffd700 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    animation: elite-shimmer 3s ease-in-out infinite;
}

.elite-banner.hidden {
    display: none;
}

@keyframes elite-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.elite-badge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.15);
    padding: 10px 14px;
    border-radius: 12px;
    color: #000;
}

.elite-badge-large i {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.elite-badge-large span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.elite-info {
    flex: 1;
}

.elite-headline {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
}

.elite-subtitle {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.7);
}

.elite-perks-btn {
    background: rgba(0,0,0,0.2);
    border: none;
    color: #000;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

/* Elite Screen Header */
.elite-header {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
}

.elite-header .sf-title {
    color: #000;
}

.elite-header .back-btn {
    color: #000;
}

.elite-badge-header {
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.1rem;
}

/* Elite Content Area */
.elite-content {
    padding-bottom: 100px;
}

/* Elite Status Card */
.elite-status-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #252d3d 100%);
    border: 2px solid #ffd700;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.elite-icon-large {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 2rem;
    color: #000;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

.elite-status-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 8px;
}

.elite-status-card p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.elite-badge-tier {
    display: inline-block;
}

.badge-gold {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    color: #000;
    padding: 6px 20px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.badge-platinum {
    background: linear-gradient(135deg, #e5e4e2, #a8a9ad);
    color: #000;
}

.badge-diamond {
    background: linear-gradient(135deg, #b9f2ff, #89cff0);
    color: #000;
}

/* Elite Perk Cards */
.elite-perk-card {
    background: var(--sf-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.elite-perk-card.compact {
    padding: 16px;
}

.perk-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.elite-perk-card.compact .perk-header {
    margin-bottom: 0;
}

.perk-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.perk-icon.marketing {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.perk-icon.swag {
    background: linear-gradient(135deg, #f472b6, #ec4899);
    color: white;
}

.perk-icon.events {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
}

.perk-icon.vip {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
}

.perk-icon.boost {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.perk-icon.featured {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

.perk-info {
    flex: 1;
}

.perk-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: white;
}

.perk-info p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.perk-action-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.1rem;
}

.boost-active {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Budget Display */
.perk-budget {
    margin-bottom: 16px;
}

.budget-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.budget-remaining {
    font-size: 1.8rem;
    font-weight: 700;
    color: #4ade80;
}

.budget-total {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

.budget-bar {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.budget-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Perk Buttons */
.perk-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.perk-btn:hover {
    background: rgba(255,255,255,0.2);
}

.perk-btn.secondary {
    background: transparent;
}

.perk-btn.full-width {
    width: 100%;
}

.perk-actions {
    display: flex;
    gap: 12px;
}

.perk-actions .perk-btn {
    flex: 1;
}

/* Swag Items */
.swag-items {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.swag-item {
    flex: 0 0 auto;
    width: 90px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 10px;
}

.swag-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.swag-item span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

.swag-price {
    color: #4ade80 !important;
    font-weight: 600;
}

/* Progress to Elite (for non-elite users) */
.elite-progress-card {
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,179,71,0.1) 100%);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.elite-progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.elite-progress-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,215,0,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffd700;
}

.elite-progress-info h3 {
    color: #ffd700;
    font-size: 1rem;
    font-weight: 600;
}

.elite-progress-info p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}

.elite-progress-bar {
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.elite-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffb347);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.elite-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

.elite-progress-text .current {
    color: #ffd700;
    font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .elite-banner {
        flex-wrap: wrap;
    }

    .elite-perks-btn {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .swag-items {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==================== REWARD TIERS - DREAM BIG! ==================== */

.rewards-header {
    margin-top: 24px;
}

.reward-tiers-container {
    margin-bottom: 24px;
}

/* Progress Card */
.reward-progress-card {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.reward-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}

.progress-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.reward-next-target {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}

.reward-next-target strong {
    color: white;
    font-size: 1rem;
}

.reward-progress-bar {
    height: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    overflow: hidden;
}

.reward-progress-fill {
    height: 100%;
    background: white;
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* Tiers Horizontal Scroll */
.reward-tiers-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 10px 0 20px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x mandatory;
}

.reward-tiers-scroll::-webkit-scrollbar {
    display: none;
}

/* Individual Tier Card */
.reward-tier-card {
    flex: 0 0 120px;
    background: var(--sf-card);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    scroll-snap-align: start;
    position: relative;
    border: 2px solid transparent;
}

.reward-tier-card:hover {
    transform: translateY(-4px);
}

.reward-tier-card.unlocked {
    border-color: #4ade80;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(34, 197, 94, 0.1));
}

.reward-tier-card.current {
    border-color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.reward-tier-card.locked {
    opacity: 0.7;
}

.reward-tier-card.mystery {
    background: linear-gradient(135deg, #1a1f2e, #252d3d);
    border-color: rgba(255, 215, 0, 0.3);
}

.reward-tier-card.mystery.ultimate {
    border-color: #ffd700;
    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.3);
}

/* Tier Badge */
.tier-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #6366f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.tier-badge.unlocked {
    background: #4ade80;
}

.tier-badge.current {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    animation: pulse-badge 2s ease-in-out infinite;
}

.tier-badge.mystery {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    color: #000;
}

/* Tier Emoji */
.tier-emoji {
    font-size: 2.5rem;
    margin: 8px 0;
}

.tier-emoji.mystery-box {
    animation: float-box 3s ease-in-out infinite;
}

.tier-emoji.mystery-box.shimmer {
    animation: float-box 3s ease-in-out infinite, shimmer-glow 2s ease-in-out infinite;
}

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

@keyframes shimmer-glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
}

.tier-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tier-threshold {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}

.tier-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.tier-status.claimed {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

/* Mini progress bar on current tier */
.tier-progress-mini {
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.tier-progress-mini-fill {
    height: 100%;
    background: #6366f1;
    border-radius: 2px;
}

/* Mystery hint */
.mystery-hint {
    font-size: 0.65rem;
    color: #ffd700;
    margin-top: 4px;
}

/* ==================== REWARD MODAL ==================== */

.reward-modal-content {
    max-width: 400px;
    padding: 0;
    background: #0f1419;
    overflow: hidden;
}

.reward-view {
    animation: fadeIn 0.3s ease;
}

.reward-view.hidden {
    display: none;
}

/* Regular Reward View */
.reward-image-container {
    position: relative;
    background: linear-gradient(135deg, #1a1f2e, #252d3d);
    padding: 40px 20px;
    text-align: center;
}

.reward-image-container img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

.reward-value-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #4ade80;
    color: #000;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.reward-detail-info {
    padding: 24px;
}

.reward-tier-number {
    font-size: 0.8rem;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 4px;
}

.reward-detail-info h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.reward-detail-info p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.reward-threshold-display {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 20px;
}

.threshold-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    display: block;
    margin-bottom: 4px;
}

.threshold-value {
    font-size: 2rem;
    font-weight: 700;
    color: #6366f1;
}

.threshold-type {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin-left: 4px;
}

.reward-your-progress {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 16px;
}

.reward-your-progress .progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.reward-your-progress .progress-header span:first-child {
    color: rgba(255,255,255,0.6);
}

.reward-your-progress .progress-header span:last-child {
    color: #4ade80;
    font-weight: 600;
}

.reward-detail-progress-bar {
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.reward-detail-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 6px;
}

.progress-remaining {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

/* Mystery Box View */
.mystery-container {
    padding: 40px 24px;
    text-align: center;
}

.mystery-box-large {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.mystery-box-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.mystery-emoji {
    font-size: 5rem;
    position: relative;
    z-index: 1;
    animation: mystery-wobble 3s ease-in-out infinite;
}

@keyframes mystery-wobble {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.mystery-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.mystery-sparkles span {
    position: absolute;
    font-size: 1.5rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

.mystery-sparkles span:nth-child(1) { top: 0; left: 10%; animation-delay: 0s; }
.mystery-sparkles span:nth-child(2) { top: 20%; right: 5%; animation-delay: 0.5s; }
.mystery-sparkles span:nth-child(3) { bottom: 10%; left: 20%; animation-delay: 1s; }

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
}

.mystery-container h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 8px;
}

.mystery-tease {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    margin-bottom: 24px;
    font-style: italic;
}

.mystery-unlock-info {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.unlock-requirement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    color: #ffd700;
    margin-bottom: 12px;
}

.unlock-requirement i {
    font-size: 1.3rem;
}

.elite-hint {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.mystery-threshold {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

.mystery-threshold strong {
    color: #ffd700;
    font-size: 1.2rem;
}

/* Claimed/Won View */
.claimed-celebration {
    padding: 40px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.trophy-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: trophy-bounce 0.5s ease-out;
}

@keyframes trophy-bounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.claimed-celebration h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #4ade80;
    margin-bottom: 20px;
    animation: win-text 0.5s ease-out 0.2s both;
}

@keyframes win-text {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.won-reward-display {
    margin-bottom: 20px;
}

.won-reward-display img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 12px;
}

.won-reward-display h3 {
    font-size: 1.3rem;
    color: white;
}

.claimed-message {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.claimed-actions {
    display: flex;
    gap: 12px;
}

.claimed-actions button {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.claimed-actions .btn-primary {
    background: #4ade80;
    color: #000;
}

.claimed-actions .btn-secondary {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* Mystery Reveal Overlay */
.mystery-reveal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100002;
}

.mystery-reveal-overlay.hidden {
    display: none;
}

.reveal-content {
    text-align: center;
}

.reveal-box {
    font-size: 8rem;
    display: inline-block;
}

.reveal-box.shaking {
    animation: shake-box 0.5s ease-in-out infinite;
}

@keyframes shake-box {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.05); }
    50% { transform: rotate(-5deg) scale(1.1); }
    75% { transform: rotate(5deg) scale(1.05); }
}

.reveal-content h2 {
    color: #ffd700;
    font-size: 1.5rem;
    margin-top: 20px;
    animation: pulse-text 0.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .reward-tier-card {
        flex: 0 0 100px;
        padding: 14px 10px;
    }

    .tier-emoji {
        font-size: 2rem;
    }

    .tier-name {
        font-size: 0.75rem;
    }
}

/* ==================== TERRITORY MAP ==================== */

/* Territory Preview Card */
.territory-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.territory-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247, 147, 30, 0.15);
}

.territory-preview {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.territory-mini-map {
    flex: 1;
    position: relative;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(34, 197, 94, 0.05));
    border-radius: 12px;
    overflow: hidden;
    min-height: 100px;
}

.mini-map-svg {
    width: 100%;
    height: auto;
}

.mini-map-svg .map-pin {
    animation: pin-pulse 2s ease-in-out infinite;
}

.mini-map-svg .map-pin.elite-pin {
    animation: elite-pin-pulse 1.5s ease-in-out infinite;
}

@keyframes pin-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes elite-pin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.territory-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

.territory-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.territory-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.territory-stat-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.territory-stat-icon.elite {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.territory-stat-icon.active {
    background: rgba(247, 147, 30, 0.2);
    color: #f7931e;
}

.territory-stat-icon.new {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.territory-stat-value {
    font-weight: 700;
    font-size: 1.1rem;
}

.territory-stat-label {
    font-size: 0.75rem;
    color: var(--biz-text-muted);
}

.territory-coverage {
    font-size: 0.8rem;
    color: var(--biz-text-muted);
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    text-align: center;
}

.territory-coverage i {
    color: var(--sf-accent);
    margin-right: 6px;
}

/* Territory Modal */
.territory-modal-content {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

.territory-modal-header {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.2), rgba(34, 197, 94, 0.1));
    border-radius: 16px 16px 0 0;
}

.territory-modal-header i {
    font-size: 2.5rem;
    color: #60a5fa;
    margin-bottom: 12px;
}

.territory-modal-header h2 {
    margin-bottom: 4px;
}

.territory-modal-header p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

.territory-map-container {
    padding: 20px;
    position: relative;
}

.territory-full-map {
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, #0c1929 0%, #1a2744 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Animated pulse rings */
.pulse-ring {
    animation: pulse-ring 2s ease-out infinite;
    transform-origin: center;
}

@keyframes pulse-ring {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

.pin-pulse {
    animation: pin-glow 2s ease-in-out infinite;
}

@keyframes pin-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Superfan pins hover */
.superfan-pin:hover circle:last-of-type {
    transform: scale(1.2);
    transform-origin: center;
}

.superfan-pin.elite circle:last-of-type {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

/* Map Legend */
.map-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 16px;
    background: rgba(0,0,0,0.2);
    border-radius: 0 0 12px 12px;
    margin-top: -4px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.legend-pin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-pin.ginas {
    background: #f7931e;
    color: #fff;
    font-size: 0.6rem;
}

.legend-pin.elite {
    background: #ffd700;
    border: 2px solid #fff;
}

.legend-pin.active {
    background: #f7931e;
    border: 2px solid #fff;
}

.legend-pin.new {
    background: #4ade80;
    border: 2px solid #fff;
}

/* Superfan Location List */
.territory-superfan-list {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.territory-superfan-list h3 {
    margin-bottom: 16px;
    font-size: 1rem;
}

.superfan-location-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.location-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateX(4px);
}

.location-item.elite {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.location-item.new-member {
    border-left: 3px solid #4ade80;
}

.location-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.location-item.elite img {
    border: 2px solid #ffd700;
}

.location-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.location-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.elite-tag {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #000;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
}

.new-tag {
    background: #4ade80;
    color: #000;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
}

.location-address {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.location-address i {
    color: #ef4444;
    margin-right: 4px;
}

.location-stats {
    font-size: 0.75rem;
    color: var(--sf-accent);
}

.location-rank {
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

.location-item.elite .location-rank {
    color: #ffd700;
}

/* Territory Modal Footer */
.territory-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.territory-insight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.02));
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}

.territory-insight i {
    color: #60a5fa;
    font-size: 1.2rem;
    margin-top: 2px;
}

.territory-insight strong {
    color: #60a5fa;
}

/* Mobile Territory Map */
@media (max-width: 768px) {
    .territory-preview {
        flex-direction: column;
    }

    .territory-stats {
        flex-direction: row;
        justify-content: space-around;
    }

    .map-legend {
        flex-wrap: wrap;
        gap: 12px;
    }

    .territory-modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .superfan-location-list {
        max-height: 200px;
    }
}

/* ==================== STORES & TEAM HIERARCHY ==================== */

.stores-overview {
    margin-bottom: 30px;
}

/* Hierarchy Cards */
.hierarchy-card {
    background: var(--biz-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.hierarchy-card.brand-level {
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.1), rgba(247, 147, 30, 0.02));
    border: 1px solid rgba(247, 147, 30, 0.2);
}

.hierarchy-card.region-level {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    margin-left: 20px;
    margin-top: 16px;
}

.hierarchy-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hierarchy-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.hierarchy-icon.brand {
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    color: #fff;
}

.hierarchy-icon.region {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.hierarchy-info {
    flex: 1;
}

.hierarchy-info h3, .hierarchy-info h4 {
    margin-bottom: 4px;
}

.hierarchy-role {
    font-size: 0.85rem;
    color: var(--biz-text-muted);
}

.hierarchy-role em {
    color: #f59e0b;
}

.hierarchy-stats {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--biz-text-muted);
}

.hierarchy-stats i {
    margin-right: 4px;
    color: var(--sf-accent);
}

.hierarchy-action {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--biz-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.hierarchy-action:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.hierarchy-children {
    margin-top: 16px;
}

/* Store Cards */
.stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-left: 20px;
}

.store-card {
    background: var(--biz-card);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255,255,255,0.05);
}

.store-card:hover {
    transform: translateY(-2px);
    border-color: var(--sf-accent);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.store-card.add-store-card {
    border: 2px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    color: var(--biz-text-muted);
}

.store-card.add-store-card:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.store-card.add-store-card i {
    font-size: 2rem;
}

.store-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.store-logo {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    object-fit: cover;
}

.store-info {
    flex: 1;
}

.store-info h5 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.store-address {
    font-size: 0.8rem;
    color: var(--biz-text-muted);
}

.store-address i {
    color: #ef4444;
    margin-right: 4px;
}

.store-status {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.store-status.open {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.store-status.new {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.store-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.store-stat {
    text-align: center;
}

.store-stat .stat-num {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sf-accent);
}

.store-stat .stat-label {
    font-size: 0.7rem;
    color: var(--biz-text-muted);
}

.store-manager {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--biz-text-muted);
}

.store-manager img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.store-manager strong {
    color: var(--biz-text);
}

.store-manager.needs-assignment {
    background: rgba(245, 158, 11, 0.1);
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.store-manager.needs-assignment i {
    font-size: 1.2rem;
}

.assign-btn {
    margin-left: auto;
    background: #f59e0b;
    color: #000;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* Team Section */
.team-section {
    margin-bottom: 30px;
}

.section-header-biz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header-biz h3 {
    font-size: 1.1rem;
}

.section-header-biz h3 i {
    margin-right: 8px;
    color: var(--sf-accent);
}

.see-all-btn {
    background: transparent;
    border: 1px solid var(--sf-accent);
    color: var(--sf-accent);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.see-all-btn:hover {
    background: var(--sf-accent);
    color: #000;
}

.team-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-member-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--biz-card);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.team-member-card.pending {
    opacity: 0.7;
    border-style: dashed;
}

.team-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.pending-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--biz-text-muted);
}

.team-info {
    min-width: 150px;
}

.team-name {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.team-role {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 20px;
}

.team-role.brand-owner {
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    color: #fff;
}

.team-role.regional {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.team-role.store {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.team-role.staff {
    background: rgba(255,255,255,0.1);
    color: var(--biz-text-muted);
}

.team-role.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.team-scope {
    flex: 1;
    color: var(--biz-text-muted);
    font-size: 0.9rem;
}

.team-scope i {
    margin-right: 6px;
}

.team-permissions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 250px;
}

.permission-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--biz-text-muted);
}

.permission-badge.full {
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    color: #fff;
}

.team-action-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--biz-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.team-action-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--sf-accent);
}

/* Roles Info Card */
.roles-info-card {
    background: var(--biz-card);
    border-radius: 12px;
    padding: 20px;
}

.roles-info-card h4 {
    margin-bottom: 16px;
}

.roles-info-card h4 i {
    margin-right: 8px;
    color: var(--sf-accent);
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.role-info {
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}

.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.role-badge.brand-owner {
    background: linear-gradient(135deg, #f7931e, #ff6b35);
    color: #fff;
}

.role-badge.regional {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.role-badge.store {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.role-badge.staff {
    background: rgba(255,255,255,0.1);
    color: var(--biz-text-muted);
}

.role-info p {
    font-size: 0.85rem;
    color: var(--biz-text-muted);
    line-height: 1.5;
}

/* Invite Manager Modal */
.invite-modal-content {
    max-width: 500px;
}

.invite-modal-header {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    border-radius: 16px 16px 0 0;
}

.invite-modal-header i {
    font-size: 2.5rem;
    color: #8b5cf6;
    margin-bottom: 12px;
}

.invite-modal-header h2 {
    margin-bottom: 4px;
}

.invite-modal-header p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

.invite-form {
    padding: 24px;
}

.invite-form .form-group {
    margin-bottom: 20px;
}

.invite-form label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}

.invite-form input, .invite-form select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
}

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

.role-option {
    padding: 16px 10px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.role-option:hover {
    border-color: rgba(255,255,255,0.3);
}

.role-option.selected {
    border-color: var(--sf-accent);
    background: rgba(247, 147, 30, 0.1);
}

.role-option i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--biz-text-muted);
}

.role-option.selected i {
    color: var(--sf-accent);
}

.role-option .role-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.role-option .role-desc {
    display: block;
    font-size: 0.7rem;
    color: var(--biz-text-muted);
}

.permissions-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.perm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}

.perm-check input[type="checkbox"] {
    width: auto;
    accent-color: var(--sf-accent);
}

.invite-send-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;
}

.invite-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.invite-send-btn i {
    margin-right: 8px;
}

/* Mobile Stores */
@media (max-width: 768px) {
    .hierarchy-card.region-level {
        margin-left: 0;
    }

    .stores-grid {
        margin-left: 0;
        grid-template-columns: 1fr;
    }

    .hierarchy-header {
        flex-wrap: wrap;
    }

    .hierarchy-stats {
        width: 100%;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .team-member-card {
        flex-wrap: wrap;
    }

    .team-permissions {
        width: 100%;
        margin-top: 12px;
    }

    .role-select-grid {
        grid-template-columns: 1fr;
    }

    .permissions-checklist {
        grid-template-columns: 1fr;
    }
}