<?php
require_once __DIR__ . '/_init.php';
// Dashboard only needs this one gate; avoid hard dependency on ../store-public-access.php (path/deploy issues).
if (!function_exists('sg_plan_allows_public_publish')) {
    function sg_plan_allows_public_publish($plan_slug) {
        return true;
    }
}
$conn = getDBConnection();

$rs_program_enabled = false;
$rs_supplier_code = '';
$rs_program_ready = false;
$rs_share_import_url = '';
$rs_supplier_stats = ['products_for_resellers' => 0, 'total_imports' => 0];
$_rs_boot = dirname(__DIR__) . '/includes/reseller/ResellerBootstrap.php';
if (is_file($_rs_boot) && $conn) {
    require_once $_rs_boot;
    require_once dirname(__DIR__) . '/includes/reseller/ResellerUi.php';
    $rs_program_ready = rs_table_exists($conn, 'supplier_codes');
    if ($rs_program_ready) {
        $rs_program_enabled = rs_is_reseller_program_enabled($seller_id, $conn);
        if ($rs_program_enabled) {
            $sc = rs_get_or_create_supplier_code($seller_id, 'Default code', $conn);
            $rs_supplier_code = is_array($sc) ? (string)($sc['code'] ?? '') : '';
            if ($rs_supplier_code !== '') {
                $rs_base = rtrim(defined('SITE_URL') ? SITE_URL : 'https://shopglowsy.com', '/');
                $rs_share_import_url = $rs_base . '/seller/reseller-import.php?code=' . rawurlencode($rs_supplier_code);
            }
            $rs_supplier_stats = rs_ui_supplier_stats($seller_id, $conn);
        }
    }
}

$product_count = 0;
$mp_used = (int)$seller_mp_used;
$mp_limit = (int)$seller_mp_limit;
$mp_limit_label = ($mp_limit >= 999999) ? 'Unlimited' : (string)$mp_limit;
$plan = $seller_plan;
$order_count = 0;
$store_views = 0;
$earnings = 0.0;
$today_orders = 0;
$today_earnings = 0.0;
$has_brand_assets = false;
$store_videos_count = 0;
$store_video_views_total = 0;
$top_store_video_title = '';
$top_store_video_views = 0;
$recent_products = [];
$seller_marketplace_live = 1;
$seller_store_live = 1;
$imported_product_count = 0;
$ai_onboarding_complete = true;
$ai_timeline = [];
$ai_demo_prompts = [];
$store_readiness = ['percent' => 0, 'publish_ready' => false, 'checks' => [], 'missing' => []];
if ($conn) {
    $has_store_views = false;
    $col_check = $conn->query("SHOW COLUMNS FROM sellers LIKE 'store_views'");
    if ($col_check && $col_check->num_rows > 0) $has_store_views = true;

    $logo_col = null;
    foreach (['store_logo', 'logo', 'profile_image'] as $cname) {
        $cc = $conn->query("SHOW COLUMNS FROM sellers LIKE '" . $conn->real_escape_string($cname) . "'");
        if ($cc && $cc->num_rows > 0) { $logo_col = $cname; break; }
    }
    $banner_col = null;
    foreach (['store_banner', 'banner', 'cover_image'] as $cname) {
        $cc = $conn->query("SHOW COLUMNS FROM sellers LIKE '" . $conn->real_escape_string($cname) . "'");
        if ($cc && $cc->num_rows > 0) { $banner_col = $cname; break; }
    }

    $seller_select_cols = ['id'];
    $store_live_col = $conn->query("SHOW COLUMNS FROM sellers LIKE 'store_live'");
    if ($store_live_col && $store_live_col->num_rows > 0) {
        $seller_select_cols[] = 'store_live';
    }
    $mp_live_col = $conn->query("SHOW COLUMNS FROM sellers LIKE 'marketplace_live'");
    if ($mp_live_col && $mp_live_col->num_rows > 0) {
        $seller_select_cols[] = 'marketplace_live';
    }
    if ($has_store_views) $seller_select_cols[] = 'store_views';
    if ($logo_col !== null) $seller_select_cols[] = "`$logo_col` AS logo_asset";
    if ($banner_col !== null) $seller_select_cols[] = "`$banner_col` AS banner_asset";
    $seller_select = "SELECT " . implode(', ', $seller_select_cols) . " FROM sellers WHERE id = ?";
    $stmt = $conn->prepare($seller_select);
    if ($stmt) {
        $stmt->bind_param("i", $seller_id);
        $stmt->execute();
        $row = sg_mysqli_stmt_fetch_assoc($stmt);
        $stmt->close();
        if (is_array($row)) {
            $seller_store_live = isset($row['store_live']) ? (int)$row['store_live'] : 1;
            if (isset($row['marketplace_live'])) {
                $seller_marketplace_live = (int)$row['marketplace_live'];
            }
            if ($has_store_views) {
                $store_views = (int)($row['store_views'] ?? 0);
            }
            $logo_asset = trim((string)($row['logo_asset'] ?? ''));
            $banner_asset = trim((string)($row['banner_asset'] ?? ''));
            $has_brand_assets = ($logo_asset !== '' || $banner_asset !== '');
        }
    }

    $stmt = $conn->prepare("SELECT COUNT(*) as c FROM products WHERE seller_id = ?");
    if ($stmt) {
        $stmt->bind_param("i", $seller_id);
        $stmt->execute();
        $pr = sg_mysqli_stmt_fetch_assoc($stmt);
        if ($pr) {
            $product_count = (int)($pr['c'] ?? 0);
        }
        $stmt->close();
    }

    $prod_cols = ['id', 'name', 'slug', 'image', 'description', 'price', 'sale_price', 'stock', 'status'];
    $sd_col = $conn->query("SHOW COLUMNS FROM products LIKE 'short_description'");
    if ($sd_col && $sd_col->num_rows > 0) {
        array_splice($prod_cols, 4, 0, ['short_description']);
    }
    $prod_sql = 'SELECT ' . implode(', ', $prod_cols) . ' FROM products WHERE seller_id = ? ORDER BY id DESC LIMIT 4';
    $stmt = $conn->prepare($prod_sql);
    if ($stmt) {
        $stmt->bind_param("i", $seller_id);
        $stmt->execute();
        foreach (sg_mysqli_stmt_fetch_all_assoc($stmt) as $row) {
            $recent_products[] = $row;
        }
        $stmt->close();
    }

    if (is_file(dirname(__DIR__) . '/includes/commerce/SgFundsFlow.php')) {
        require_once dirname(__DIR__) . '/includes/commerce/SgFundsFlow.php';
        if (function_exists('sg_seller_revenue_summary')) {
            $rev = sg_seller_revenue_summary($conn, (int)$seller_id);
            $order_count = (int)($rev['orders'] ?? 0);
            $earnings = (float)($rev['total'] ?? 0);
            $today_orders = (int)($rev['orders_today'] ?? 0);
            $today_earnings = (float)($rev['today'] ?? 0);
        }
    }
    if ($order_count === 0 && $earnings <= 0) {
        $stmt = $conn->prepare("SELECT COUNT(*) AS c, COALESCE(SUM(total), 0) AS e FROM orders WHERE seller_id = ? AND payment_status = 'paid'");
        if ($stmt) {
            $stmt->bind_param("i", $seller_id);
            $stmt->execute();
            $order_row = sg_mysqli_stmt_fetch_assoc($stmt);
            if ($order_row) {
                $order_count = (int)($order_row['c'] ?? 0);
                $earnings = (float)($order_row['e'] ?? 0);
            }
            $stmt->close();
        }

        $orders_date_col = null;
        foreach (['created_at', 'created_on', 'order_date', 'created'] as $cname) {
            $cc = $conn->query("SHOW COLUMNS FROM orders LIKE '" . $conn->real_escape_string($cname) . "'");
            if ($cc && $cc->num_rows > 0) { $orders_date_col = $cname; break; }
        }
        if ($orders_date_col !== null) {
            $sql_today = "SELECT COUNT(*) AS c, COALESCE(SUM(total), 0) AS e FROM orders WHERE seller_id = ? AND payment_status = 'paid' AND DATE(`$orders_date_col`) = CURDATE()";
            $stmt = $conn->prepare($sql_today);
            if ($stmt) {
                $stmt->bind_param("i", $seller_id);
                $stmt->execute();
                $today_row = sg_mysqli_stmt_fetch_assoc($stmt);
                $today_orders = (int)($today_row['c'] ?? 0);
                $today_earnings = (float)($today_row['e'] ?? 0);
                $stmt->close();
            }
        } else {
            $today_orders = $order_count;
            $today_earnings = $earnings;
        }
    }

    // Storefront video proof performance.
    $has_store_videos_table = false;
    $video_table_check = $conn->query("SHOW TABLES LIKE 'seller_store_videos'");
    if ($video_table_check && $video_table_check->num_rows > 0) {
        $has_store_videos_table = true;
    }
    if ($has_store_videos_table) {
        $video_stmt = $conn->prepare("SELECT COUNT(*) AS cnt, COALESCE(SUM(views_count), 0) AS views_total FROM seller_store_videos WHERE seller_id = ? AND is_active = 1 AND status = 'approved'");
        if ($video_stmt) {
            $video_stmt->bind_param("i", $seller_id);
            $video_stmt->execute();
            $video_row = sg_mysqli_stmt_fetch_assoc($video_stmt);
            $store_videos_count = (int)($video_row['cnt'] ?? 0);
            $store_video_views_total = (int)($video_row['views_total'] ?? 0);
            $video_stmt->close();
        }

        $top_video_stmt = $conn->prepare("SELECT title, views_count FROM seller_store_videos WHERE seller_id = ? AND is_active = 1 AND status = 'approved' ORDER BY views_count DESC, id DESC LIMIT 1");
        if ($top_video_stmt) {
            $top_video_stmt->bind_param("i", $seller_id);
            $top_video_stmt->execute();
            $top_video_row = sg_mysqli_stmt_fetch_assoc($top_video_stmt);
            if ($top_video_row) {
                $top_store_video_title = trim((string)($top_video_row['title'] ?? ''));
                $top_store_video_views = (int)($top_video_row['views_count'] ?? 0);
            }
            $top_video_stmt->close();
        }
    }

    try {
        $ai_boot = dirname(__DIR__) . '/includes/ai/bootstrap_seller.php';
        if (is_file($ai_boot) && !(defined('SG_AI_DISABLED') && SG_AI_DISABLED)) {
            require_once $ai_boot;
            if (function_exists('sg_ai_bootstrap_tables_seller')) {
                sg_ai_bootstrap_tables_seller($conn);
            } elseif (function_exists('sg_ai_bootstrap_tables')) {
                sg_ai_bootstrap_tables($conn);
            }
            if (class_exists('SgAiOnboarding')) {
                $ai_status = SgAiOnboarding::status($conn, (int)$seller_id);
                $ai_onboarding_complete = !empty($ai_status['completed']);
                $ai_demo_prompts = SgAiOnboarding::demoPrompts();
            }
            if (class_exists('SgAiActivityTimeline')) {
                $ai_timeline = SgAiActivityTimeline::forSeller($conn, (int)$seller_id, 8);
            }
        }
        $launch_boot = dirname(__DIR__) . '/includes/launch/bootstrap.php';
        if (is_file($launch_boot)) {
            require_once $launch_boot;
            sg_launch_bootstrap_tables($conn);
            if (class_exists('SgStoreReadiness')) {
                $store_readiness = SgStoreReadiness::evaluate($conn, (int)$seller_id);
            }
        }
    } catch (Throwable $e) {
        error_log('ShopGlowsy seller dashboard optional modules: ' . $e->getMessage());
    }

    $imported_product_count = 0;
    $rp_tbl = @$conn->query("SHOW TABLES LIKE 'reseller_products'");
    if ($rp_tbl && $rp_tbl->num_rows > 0) {
        $imp_stmt = $conn->prepare("SELECT COUNT(*) AS c FROM reseller_products WHERE reseller_seller_id = ? AND status != 'removed'");
        if ($imp_stmt) {
            $imp_stmt->bind_param('i', $seller_id);
            $imp_stmt->execute();
            $imp_row = sg_mysqli_stmt_fetch_assoc($imp_stmt);
            $imported_product_count = (int)($imp_row['c'] ?? 0);
            $imp_stmt->close();
        }
    }

    $conn->close();
}

$base_url = (defined('SITE_URL') ? rtrim(SITE_URL, '/') : '') . '/';
$__sg_seller_id_for_urls = (int)($_SESSION['seller_id'] ?? 0);
$__sg_store_urls = function_exists('sg_seller_resolve_store_urls')
    ? sg_seller_resolve_store_urls($seller_slug, null, $__sg_seller_id_for_urls)
    : ['public' => $base_url . $seller_slug, 'editor' => (function_exists('sg_platform_home_url') ? sg_platform_home_url() : rtrim((string)(defined('SITE_URL') ? SITE_URL : 'https://shopglowsy.com'), '/')) . '/' . rawurlencode($seller_slug), 'editor_on_public' => ''];
$store_url = $__sg_store_urls['public'];
$editor_store_url = $__sg_store_urls['editor'];
$editor_entry_url = function_exists('sg_seller_dashboard_editor_url')
    ? sg_seller_dashboard_editor_url($seller_slug, null, $__sg_seller_id_for_urls)
    : (function_exists('sg_seller_editor_url')
        ? sg_seller_editor_url($__sg_store_urls)
        : ($__sg_store_urls['editor_on_public'] ?? ($editor_store_url . '?edit=1')));
$catalog = sg_plan_catalog();
$current_plan_meta = $catalog[$plan] ?? $catalog['trial'];
$next_plan_slug = sg_next_plan_slug($plan);
$next_plan_meta = $next_plan_slug ? ($catalog[$next_plan_slug] ?? null) : null;
$locked_preview = $current_plan_meta['locked_preview'] ?? [];
$plan_notice = $_SESSION['seller_plan_notice'] ?? '';
unset($_SESSION['seller_plan_notice']);
$mp_slots_remaining = max(0, $mp_limit >= 999999 ? 999999 : ($mp_limit - $mp_used));

// Journey A (store owner) vs Journey B (reseller)
$is_reseller_journey = ($imported_product_count > 0 && $product_count === 0);
if ($product_count > 0) {
    $is_reseller_journey = false;
}
$journey_heading = $is_reseller_journey ? 'Your First Commission' : 'Your First Order';
$import_href = 'reseller-import.php';

$has_visitor = ($store_views > 0) || ($order_count > 0);
$has_shared = $has_visitor;
$has_order = ($order_count > 0) && $has_visitor;
$catalog_done = $is_reseller_journey
    ? ($imported_product_count > 0)
    : ($product_count > 0);
$publish_done = true;

$journey_raw = [
    [
        'key' => $is_reseller_journey ? 'import' : 'products',
        'label' => $is_reseller_journey ? 'Import Product' : 'Add Product',
        'raw' => $catalog_done,
        'href' => $is_reseller_journey ? $import_href : 'product-add.php',
        'action' => 'link',
    ],
    [
        'key' => 'share',
        'label' => 'Share Store',
        'raw' => $has_shared,
        'href' => '#share',
        'action' => 'share',
    ],
    [
        'key' => 'visitor',
        'label' => 'First Visitor',
        'raw' => $has_visitor,
        'href' => '#share',
        'action' => 'share',
    ],
    [
        'key' => 'order',
        'label' => $is_reseller_journey ? 'First Commission' : 'First Order',
        'raw' => $has_order,
        'href' => 'orders.php',
        'action' => 'link',
    ],
];

$journey_steps = [];
$progress_steps = 0;
$prev_done = true;
foreach ($journey_raw as $jr) {
    $step_done = $prev_done && !empty($jr['raw']);
    if ($step_done) {
        $progress_steps++;
    } else {
        $prev_done = false;
    }
    $journey_steps[] = [
        'key' => $jr['key'],
        'label' => $jr['label'],
        'done' => $step_done,
        'href' => $jr['href'],
        'action' => $jr['action'],
    ];
}
$progress_checklist = $journey_steps;
$progress_total = count($journey_steps);
$progress_percent = (int)round(($progress_steps / max(1, $progress_total)) * 100);
$progress_steps_left = max(0, $progress_total - $progress_steps);
$journey_current_idx = 0;
$progress_next = null;
foreach ($journey_steps as $idx => $js) {
    if (empty($js['done'])) {
        $journey_current_idx = $idx;
        $progress_next = $js;
        break;
    }
    $journey_current_idx = $idx;
}
$journey_step_num = min($progress_total, $journey_current_idx + 1);
if ($progress_steps >= $progress_total) {
    $journey_step_num = $progress_total;
    $progress_next = null;
}

$has_first_order = $has_order;
$show_revenue_stats = $has_first_order;

$dominant_message = 'Share your store on WhatsApp to get your first order.';
$dominant_cta = 'Share Store Now';
$dominant_action = 'share';
$dominant_href = '#share';
if (!$catalog_done) {
    if ($is_reseller_journey) {
        $dominant_message = 'Import products to start selling';
        $dominant_cta = 'Import Products';
        $dominant_action = 'link';
        $dominant_href = $import_href;
    } else {
        $dominant_message = 'Add your first product';
        $dominant_cta = 'Add Product';
        $dominant_action = 'link';
        $dominant_href = 'product-add.php';
    }
} elseif (!$has_visitor) {
    $dominant_message = 'Share your store';
    $dominant_cta = 'Share Store';
    $dominant_action = 'share';
    $dominant_href = '#share';
} elseif (!$has_order) {
    $dominant_message = $is_reseller_journey ? 'Get your first commission' : 'Get your first order';
    $dominant_cta = 'Share Again';
    $dominant_action = 'share';
    $dominant_href = '#share';
} else {
    $dominant_message = 'Keep sharing your store to grow sales';
    $dominant_cta = 'Share Store';
    $dominant_action = 'share';
    $dominant_href = '#share';
}
if ($progress_next) {
    $dominant_action = $progress_next['action'] ?? $dominant_action;
    $dominant_href = $progress_next['href'] ?? $dominant_href;
}
$revenue_display = function_exists('sg_format_price_ghs') ? sg_format_price_ghs($earnings) : ('GH₵ ' . number_format($earnings, 0));
$today_revenue_display = function_exists('sg_format_price_ghs') ? sg_format_price_ghs($today_earnings) : ('GH₵ ' . number_format($today_earnings, 0));
$ai_timeline_count = count($ai_timeline);
$share_wa_text = 'Check out my store on ShopGlowsy: ' . $store_url;
$share_email_subject = rawurlencode('Shop ' . $store_name);
$share_email_body = rawurlencode('Check out my store: ' . $store_url);
$readiness_pct = (int)($store_readiness['percent'] ?? 0);
$readiness_has = !empty($store_readiness['ok']);

$views_trend = $store_views > 0 ? '▲ +' . number_format($store_views) . ' total' : '▲ +0 today';
$orders_trend = $today_orders > 0 ? '▲ +' . number_format($today_orders) . ' today' : '▲ +0 today';
$earnings_trend = $today_earnings > 0
    ? ('▲ +' . (function_exists('sg_format_price_ghs') ? sg_format_price_ghs($today_earnings) : ('GH₵ ' . number_format($today_earnings, 0))) . ' today')
    : '▲ +GH₵ 0 today';
$products_trend = '▲ ' . $product_count . ' store · ' . $mp_used . '/' . $mp_limit_label . ' marketplace';
$fill_denominator = $mp_limit >= 999999 ? max(20, $mp_used, 1) : max(1, $mp_limit);
$product_fill_percent = (int)max(0, min(100, round(($mp_used / $fill_denominator) * 100)));
$store_potential_percent = (int)max(0, min(100, round(($progress_percent * 0.5) + ($product_fill_percent * 0.5))));
$setup_upload_done = $has_brand_assets;
$setup_products_done = ($product_count > 0);
$setup_share_done = ($store_views > 0);
$setup_steps_done = ($setup_upload_done ? 1 : 0) + ($setup_products_done ? 1 : 0) + ($setup_share_done ? 1 : 0);
$setup_percent = (int)round(($setup_steps_done / 3) * 100);

$seller_page_title = 'Dashboard';
$seller_current_page = 'dashboard';
$sg_dashboard_premium = true;
$sg_hide_float_wa = true;
require_once __DIR__ . '/header.php';
?>
<style>
:root {
  --dash-plum: #4A2C3A;
  --dash-wine: #7A3E4D;
  --dash-rose: #D4A5A5;
  --dash-ivory: #F8F6F4;
  --dash-gold: #D4B87A;
  --dash-gold-deep: #B8941F;
  --dash-gold-soft: rgba(212,184,122,0.14);
  --sg-text: #2D3748;
  --sg-text-muted: #64748b;
  --sg-text-subtle: #94a3b8;
  --sg-success: #15803d;
  --sg-success-soft: #16a34a;
  --sg-radius-sm: 10px;
  --sg-radius-md: 14px;
  --sg-radius-lg: 18px;
  --sg-radius-xl: 22px;
  --sg-space-1: 0.25rem;
  --sg-space-2: 0.5rem;
  --sg-space-3: 0.75rem;
  --sg-space-4: 1rem;
  --sg-space-5: 1.25rem;
  --sg-space-6: 1.5rem;
  --sg-shadow-1: 0 1px 2px rgba(27,15,20,0.03), 0 2px 8px rgba(27,15,20,0.04);
  --sg-shadow-2: 0 2px 4px rgba(27,15,20,0.03), 0 8px 24px rgba(27,15,20,0.06);
  --sg-shadow-3: 0 4px 12px rgba(27,15,20,0.04), 0 20px 48px rgba(27,15,20,0.08);
  --sg-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.85);
  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-duration: 200ms;
  --sg-font-display: 'Playfair Display', Georgia, serif;
  --sg-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
  background: #f5f3f4;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212,165,165,0.12), transparent),
    linear-gradient(180deg, #faf9f9 0%, #f3f0f1 100%);
  color: var(--sg-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.seller-main {
  letter-spacing: -0.01em;
}
.dashboard-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 8px 22px rgba(27, 15, 20, 0.07);
  border: 1px solid rgba(74,44,58,0.08);
  margin-bottom: 1.5rem;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.dashboard-card:not(.welcome-card) h2 {
  position: relative;
  padding-left: 12px;
}
.dashboard-card:not(.welcome-card) h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, #E6C79C, #B76E79);
  box-shadow: 0 0 8px rgba(230,199,156,0.2);
}
.dashboard-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.36rem;
  margin-bottom: 0.55rem;
  color: var(--dash-plum);
}
.muted-note { color: var(--text-light); font-size: 0.94rem; line-height: 1.68; }
.welcome-guide { margin-top: 0.7rem; color: var(--text-light); font-size: 0.92rem; line-height: 1.62; }

.welcome-card {
  background: linear-gradient(180deg, #6D4353 0%, #4A2C3A 100%);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 30px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.22);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  animation: fadeUp .55s ease both;
}
.hero-stage {
  position: relative;
  margin-bottom: 1.15rem;
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: -12px -8px -10px -8px;
  border-radius: 22px;
  background: radial-gradient(circle at 12% 20%, rgba(212,165,165,0.2), rgba(212,165,165,0) 55%),
              radial-gradient(circle at 86% 26%, rgba(230,199,156,0.2), rgba(230,199,156,0) 58%);
  pointer-events: none;
  z-index: 0;
}
.hero-stage > .welcome-card { position: relative; z-index: 1; }
.control-center-hero { padding: 1.15rem 1.25rem 1.25rem; }
.control-center-hero .hero-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.control-center-hero .hero-store-name {
  font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0;
}
.control-center-hero .status-chip.draft {
  background: rgba(251,191,36,0.22); color: #fef3c7; border-color: rgba(254,243,199,0.35);
}
.hero-today-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 0.95rem;
}
.hero-stat {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px; padding: 0.55rem 0.65rem; text-align: center;
}
.hero-stat .label { font-size: 0.68rem; color: rgba(255,255,255,0.82); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-stat .value { font-size: 1.15rem; font-weight: 700; color: #fff; margin-top: 2px; line-height: 1.2; }
.hero-stat .sub { font-size: 0.62rem; color: rgba(255,255,255,0.65); margin-top: 1px; }
.hero-action-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
}
.hero-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.72rem 0.5rem; border-radius: 12px; font-size: 0.82rem; font-weight: 700;
  text-decoration: none; text-align: center; border: none; cursor: pointer;
  background: linear-gradient(135deg, #E6C79C, #C99F45); color: #3d2a1a;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 48px;
}
.hero-action-btn:hover { color: #3d2a1a; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0,0,0,0.28); }
.hero-action-btn.secondary {
  background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.32);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.hero-action-btn.secondary:hover { color: #fff; background: rgba(255,255,255,0.24); }
.stats-row-large {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem;
}
.stat-card-large {
  background: #fff; border-radius: 16px; padding: 1rem 1.1rem;
  border: 1px solid rgba(74,44,58,0.1); box-shadow: 0 8px 20px rgba(27,15,20,0.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card-large:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,15,20,0.1); }
.stat-card-large .stat-label { font-size: 0.78rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card-large .stat-value { font-size: 2rem; font-weight: 700; color: var(--dash-wine); line-height: 1.15; margin-top: 4px; }
.stat-card-large .stat-trend { font-size: 0.72rem; color: rgba(107,100,112,0.78); margin-top: 4px; }
.stat-card-large.highlight { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(250,244,247,0.94)); border-color: rgba(122,62,77,0.14); }
.primary-actions-zone { margin-bottom: 1rem; }
.primary-actions-zone h2 { font-size: 1.1rem; margin-bottom: 0.65rem; }
.primary-actions-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.65rem;
}
.primary-action-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 1.1rem 0.75rem; min-height: 100px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(135deg, #7e4657, #5f3342); color: #fff; font-weight: 700; font-size: 0.88rem;
  text-align: center; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 20px rgba(44,25,33,0.18); transition: transform .18s ease, box-shadow .18s ease;
}
.primary-action-card i { font-size: 1.35rem; }
.primary-action-card:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 26px rgba(44,25,33,0.24); }
.primary-action-card.gold { background: linear-gradient(135deg, #E6C26A, #B98225); color: #fff; }
.progress-card-top {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,248,250,0.96));
  border-radius: 16px; padding: 1.15rem 1.25rem; margin-bottom: 1rem;
  border: 1px solid rgba(74,44,58,0.1); box-shadow: 0 8px 20px rgba(27,15,20,0.06);
}
.progress-card-top .progress-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.65rem;
}
.progress-card-top h2 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin: 0; color: var(--dash-plum); }
.progress-card-top .progress-pct { font-size: 1.35rem; font-weight: 700; color: var(--dash-wine); }
.progress-card-top .progress-hint {
  font-size: 0.85rem; font-weight: 600; color: var(--dash-wine); margin-bottom: 0.55rem;
}
.progress-checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; margin-bottom: 0.65rem; }
.progress-check-item {
  display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-dark); font-weight: 500;
}
.progress-check-item.done { color: #166534; }
.progress-check-item.pending { color: #64748b; }
.progress-check-item i { width: 18px; text-align: center; font-size: 0.95rem; }
.progress-check-item.done i { color: #16a34a; }
.progress-check-item.pending i { color: #cbd5e1; }
.ai-activity-collapsed summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--dash-plum); font-weight: 600;
}
.ai-activity-collapsed summary::-webkit-details-marker { display: none; }
.ai-activity-collapsed summary .ai-count {
  font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-light);
}
.ai-activity-collapsed .ai-history-body { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(74,44,58,0.1); }
.getting-started-card { margin-top: 0.5rem; }
.getting-started-card summary {
  cursor: pointer; font-weight: 600; color: var(--dash-plum); list-style: none;
  display: flex; align-items: center; gap: 8px; font-size: 1rem;
}
.getting-started-card summary::-webkit-details-marker { display: none; }
.getting-started-body { margin-top: 0.75rem; font-size: 0.88rem; color: var(--text-light); line-height: 1.6; }
.dash-above-fold { margin-bottom: 0.5rem; }
.next-action-card {
  background: linear-gradient(135deg, rgba(255,251,235,0.98), rgba(254,243,199,0.92));
  border: 1px solid rgba(180,140,40,0.28); border-radius: 16px;
  padding: 1rem 1.15rem; margin-bottom: 0.85rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 8px 20px rgba(120,90,20,0.08);
}
.next-action-card .next-action-text { flex: 1; min-width: 180px; }
.next-action-card .next-action-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #92400e; margin-bottom: 4px; }
.next-action-card .next-action-msg { font-size: 0.95rem; font-weight: 600; color: #4A2C3A; margin: 0; line-height: 1.45; }
.next-action-card .next-action-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0.72rem 1.25rem;
  border-radius: 12px; font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer;
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; text-decoration: none;
  box-shadow: 0 8px 18px rgba(37,211,102,0.28); white-space: nowrap; min-height: 48px;
}
.next-action-card .next-action-btn:hover { color: #fff; transform: translateY(-1px); }
.next-action-card .next-action-btn.is-gold { background: linear-gradient(135deg, #E6C26A, #B98225); box-shadow: 0 8px 18px rgba(185,130,37,0.28); }
.progress-readiness-merge { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.progress-readiness-merge .progress-main { flex: 1; min-width: 220px; }
.progress-readiness-merge .readiness-side { flex-shrink: 0; text-align: center; }
.marketing-card-compact {
  background: linear-gradient(165deg, rgba(255,253,250,0.95), rgba(252,246,239,0.9));
  border-radius: 16px; padding: 1rem 1.15rem; margin-bottom: 1rem;
  border: 1px solid rgba(74,44,58,0.1); box-shadow: 0 8px 20px rgba(27,15,20,0.06);
}
.marketing-card-compact h2 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.marketing-card-compact .marketing-sub { font-size: 0.86rem; color: var(--text-light); margin-bottom: 0.75rem; }
.marketing-card-compact .marketing-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.growth-card-compact { padding: 1rem 1.15rem !important; }
.growth-card-compact .growth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.growth-card-compact .growth-meta { font-size: 0.88rem; color: var(--text-light); }
.growth-card-compact .growth-meta strong { color: var(--dash-plum); }
/* Share modal */
.sg-share-overlay {
  position: fixed; inset: 0; z-index: 100050;
  background: rgba(20,10,15,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
  padding: env(safe-area-inset-bottom) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.sg-share-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.sg-share-sheet {
  background: #fff; width: 100%; max-width: 440px; border-radius: 20px 20px 0 0;
  padding: 1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
  max-height: 90vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}
@media (min-width: 576px) {
  .sg-share-overlay { align-items: center; padding: 1rem; }
  .sg-share-sheet { border-radius: 20px; transform: translateY(16px) scale(0.97); max-height: 85vh; }
  .sg-share-overlay.open .sg-share-sheet { transform: translateY(0) scale(1); }
}
.sg-share-overlay.open .sg-share-sheet { transform: translateY(0); }
.sg-share-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sg-share-sheet-head h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin: 0; color: var(--dash-plum); }
.sg-share-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(74,44,58,0.08); color: var(--text-dark); cursor: pointer; font-size: 1.1rem; }
.sg-share-url-block { margin-bottom: 1rem; }
.sg-share-url-block label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); display: block; margin-bottom: 6px; }
.sg-share-url-row { display: flex; gap: 8px; }
.sg-share-url-text {
  flex: 1; font-family: monospace; font-size: 0.82rem; padding: 10px 12px;
  border-radius: 12px; border: 1px solid rgba(74,44,58,0.14); background: #faf8f7;
  color: var(--dash-wine); word-break: break-all; line-height: 1.4;
}
.sg-share-copy-btn {
  flex-shrink: 0; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 0.85rem;
  border: none; cursor: pointer; background: linear-gradient(135deg, var(--dash-gold), #C99F45); color: #fff;
  min-height: 44px; white-space: nowrap;
}
.sg-share-options-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); margin-bottom: 0.55rem; }
.sg-share-grid-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.sg-share-opt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.75rem 0.5rem; border-radius: 14px; font-weight: 600; font-size: 0.88rem;
  text-decoration: none; border: 1px solid rgba(74,44,58,0.12); background: #fff;
  color: var(--text-dark); cursor: pointer; min-height: 48px; transition: transform .15s ease, box-shadow .15s ease;
}
.sg-share-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(27,15,20,0.08); color: var(--text-dark); }
.sg-share-opt.primary-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; border-color: transparent; grid-column: 1 / -1; font-size: 0.95rem; }
.sg-share-opt.primary-wa:hover { color: #fff; }
.sg-share-opt.primary-copy { background: linear-gradient(135deg, rgba(122,62,77,0.08), rgba(212,165,165,0.12)); border-color: rgba(122,62,77,0.2); font-weight: 700; }
.sg-share-opt i { font-size: 1.1rem; }
.sg-share-opt .fa-whatsapp { color: inherit; }
.sg-share-opt:not(.primary-wa) .fa-whatsapp { color: #25D366; }
.sg-share-opt .fa-facebook-f { color: #1877F2; }
.sg-share-opt .fa-x-twitter { color: #000; }
.sg-share-opt .fa-telegram { color: #0088cc; }
.sg-share-opt .fa-envelope { color: #7A3E4D; }
.sg-share-opt .fa-share-nodes { color: #7A3E4D; }
.sg-share-fallback { margin-top: 0.75rem; text-align: center; font-size: 0.78rem; }
.sg-share-fallback a { color: var(--text-light); }
.hero-action-btn.js-open-share { cursor: pointer; }
/* Dominant next-action zone */
.dominant-action-card {
  background: #fff; border-radius: 18px; padding: 1.25rem 1.3rem; margin-bottom: 0.85rem;
  border: 2px solid rgba(122,62,77,0.18); box-shadow: 0 12px 32px rgba(27,15,20,0.1);
}
.dominant-action-card .dominant-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dash-wine); margin-bottom: 0.35rem;
}
.dominant-action-card .dominant-step-meta {
  font-size: 0.88rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.85rem;
}
.dominant-action-card .dominant-step-meta strong { color: var(--dash-plum); }
.journey-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.journey-list li {
  display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600;
  padding: 0.35rem 0;
}
.journey-list li.done { color: #166534; }
.journey-list li.current { color: var(--dash-plum); }
.journey-list li.pending { color: #94a3b8; font-weight: 500; }
.journey-list li .j-icon { width: 22px; text-align: center; flex-shrink: 0; }
.journey-list li.current .j-icon { color: var(--dash-wine); }
.dominant-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 0.95rem 1.25rem; border-radius: 14px; font-weight: 800; font-size: 1.02rem;
  border: none; cursor: pointer; text-decoration: none; min-height: 54px;
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff;
  box-shadow: 0 10px 24px rgba(37,211,102,0.32);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dominant-cta-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,211,102,0.38); }
.dominant-cta-btn.is-gold { background: linear-gradient(135deg, #E6C26A, #B98225); box-shadow: 0 10px 24px rgba(185,130,37,0.32); }
.dominant-action-card .dominant-action-msg {
  font-size: 1.05rem; font-weight: 700; color: var(--dash-plum); margin: 0 0 1rem; line-height: 1.45;
}
.dominant-completion-bar { height: 8px; border-radius: 99px; background: rgba(74,44,58,0.1); overflow: hidden; margin-bottom: 0.85rem; }
.dominant-completion-bar span { display: block; height: 100%; background: linear-gradient(90deg, #25D366, #128C7E); border-radius: 99px; transition: width .8s ease; }
.preorder-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; margin-bottom: 0.85rem; }
.preorder-stat {
  background: #fff; border-radius: 14px; padding: 0.85rem 1rem;
  border: 1px solid rgba(74,44,58,0.09); box-shadow: 0 6px 16px rgba(27,15,20,0.05);
}
.preorder-stat .ps-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); }
.preorder-stat .ps-value { font-size: 1.35rem; font-weight: 700; color: var(--dash-wine); margin-top: 3px; }
.preorder-stat .ps-value.is-yes { font-size: 1.1rem; color: #16a34a; }
.more-tools-section {
  background: #fff; border-radius: 16px; border: 1px solid rgba(74,44,58,0.08);
  margin-bottom: 1rem; box-shadow: 0 4px 16px rgba(27,15,20,0.04);
}
.more-tools-section summary {
  cursor: pointer; list-style: none; padding: 1rem 1.15rem; font-weight: 700;
  color: var(--text-light); font-size: 0.92rem; display: flex; align-items: center; gap: 8px;
}
.more-tools-section summary::-webkit-details-marker { display: none; }
.more-tools-section[open] summary { border-bottom: 1px solid rgba(74,44,58,0.08); color: var(--dash-plum); }
.more-tools-body { padding: 0.85rem 1rem 1rem; }
.more-tools-body .dashboard-card { margin-bottom: 0.85rem; padding: 1rem; }
.more-tools-body .dashboard-card:last-child { margin-bottom: 0; }
.sg-share-wa-hero {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 1.1rem 1rem; border-radius: 16px; font-weight: 800; font-size: 1.08rem;
  text-decoration: none; color: #fff !important; margin-bottom: 0.85rem;
  background: linear-gradient(135deg, #25D366, #0d9668); border: none;
  box-shadow: 0 12px 28px rgba(37,211,102,0.35); min-height: 56px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sg-share-wa-hero:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,211,102,0.42); }
.sg-share-wa-hero i { font-size: 1.5rem; }
.sg-share-divider { height: 1px; background: rgba(74,44,58,0.1); margin: 0.75rem 0; }
.sg-share-secondary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.sg-share-more-apps {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 0.75rem; border-radius: 14px; font-weight: 600; font-size: 0.9rem;
  border: 1px dashed rgba(74,44,58,0.2); background: rgba(248,246,244,0.8); color: var(--text-dark);
  cursor: pointer; min-height: 48px; margin-top: 0.25rem;
}
.sg-share-celebrate-overlay {
  position: fixed; inset: 0; z-index: 100060; background: rgba(20,10,15,0.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.sg-share-celebrate-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.sg-share-celebrate-card {
  background: #fff; border-radius: 20px; padding: 1.5rem 1.35rem; max-width: 400px; width: 100%;
  text-align: center; box-shadow: 0 24px 48px rgba(0,0,0,0.2);
  transform: scale(0.92); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.sg-share-celebrate-overlay.open .sg-share-celebrate-card { transform: scale(1); }
.sg-share-celebrate-card .celebrate-emoji { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; }
.sg-share-celebrate-card h3 { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--dash-plum); margin-bottom: 0.35rem; }
.sg-share-celebrate-card .celebrate-sub { font-size: 0.92rem; color: var(--text-light); margin-bottom: 1rem; }
.sg-share-celebrate-card .celebrate-next { font-size: 0.88rem; font-weight: 700; color: var(--dash-wine); margin-bottom: 0.55rem; }
.sg-share-celebrate-tips { text-align: left; font-size: 0.84rem; color: var(--text-dark); margin: 0 0 1rem; padding-left: 1.1rem; line-height: 1.65; }
.sg-share-celebrate-tips li { margin-bottom: 0.25rem; }
@media (max-width: 640px) {
  .dash-above-fold .hero-stage { margin-bottom: 0.65rem; }
  .dash-above-fold .control-center-hero { padding: 0.95rem 1rem 1rem; }
  .dash-above-fold .dominant-action-card { padding: 1rem; margin-bottom: 0.65rem; }
  .preorder-stats { grid-template-columns: 1fr 1fr; gap: 0.45rem; }
}
.welcome-card h2 { color: #fff; margin-bottom: 0.45rem; }
.welcome-card .muted-note,
.welcome-card .welcome-guide { color: rgba(255,255,255,0.9); }
.motivation-tip {
  margin-top: 0.7rem;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  letter-spacing: 0.015em;
  min-height: 1.3em;
  transition: opacity .24s ease, transform .24s ease;
}
.motivation-tip.changing {
  opacity: 0.15;
  transform: translateY(3px);
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(34,197,94,0.18);
  color: #dcfce7;
  border: 1px solid rgba(220,252,231,0.35);
}
.status-chip i {
  text-shadow: 0 0 10px rgba(134,239,172,0.55), 0 0 6px rgba(187,247,208,0.45);
  animation: activeDotGlow 2.6s ease-in-out infinite;
}
.welcome-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -45px;
  top: -80px;
  background: radial-gradient(circle, rgba(230,199,156,0.26) 0%, rgba(230,199,156,0) 72%);
  pointer-events: none;
  animation: pulseGlow 3.6s ease-in-out infinite;
}
.welcome-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 52%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  animation: welcomeSheen 6s ease-in-out infinite;
}
.welcome-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff6df;
  animation: floatY 2.8s ease-in-out infinite;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}
.quick-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 13px 10px;
  border-radius: 14px;
  border: 1px solid rgba(74,44,58,0.16);
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, #7e4657, #5f3342);
  box-shadow: 0 8px 16px rgba(44, 25, 33, 0.16);
  min-height: 92px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  font-size: 0.84rem;
}
.quick-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  pointer-events: none;
}
.quick-btn i { font-size: 1.05rem; }
.quick-btn:hover { color: #fff; border-color: rgba(255,255,255,0.35); transform: translateY(-2px); box-shadow: 0 14px 22px rgba(44, 25, 33, 0.24); }
.quick-btn:hover i { transform: scale(1.08); }
.quick-btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 15px 24px rgba(44, 25, 33, 0.3); transition: transform .14s ease-out, box-shadow .14s ease-out; }
.quick-btn:active i { transform: scale(1.06); }
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.45);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}

.store-url-box {
  background: linear-gradient(135deg, rgba(122,62,77,0.08), rgba(212,165,165,0.12));
  border-radius: 12px;
  padding: 12px 14px;
  font-family: monospace;
  font-size: 0.96rem;
  word-break: break-all;
  margin: 0.75rem 0;
  border: 1px solid rgba(74,44,58,0.14);
}
.store-url-box a { color: var(--dash-wine); font-weight: 600; }
.share-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.share-row .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(74,44,58,0.2);
  background: linear-gradient(135deg, rgba(251,248,244,0.98), rgba(246,241,236,0.94));
  color: var(--text-dark);
  transition: all 0.2s ease;
  box-shadow: 0 5px 10px rgba(37,20,28,0.06), 0 11px 18px rgba(37,20,28,0.08);
}
.share-row .share-btn:hover { border-color: var(--dash-wine); background: rgba(122,62,77,0.08); color: var(--dash-wine); transform: translateY(-2px); box-shadow: 0 7px 12px rgba(37,20,28,0.08), 0 14px 22px rgba(37,20,28,0.12); }
.share-row .share-btn:active { transform: translateY(0) scale(0.985); box-shadow: 0 5px 10px rgba(37,20,28,0.11); }
.btn-seller:active,
.btn-upgrade:active,
.share-row .share-btn:active,
.setup-action:active {
  transform: scale(0.97);
  transition: transform .14s ease-out;
}
.share-row .share-btn i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(122,62,77,0.16), rgba(122,62,77,0.06));
  transition: transform .2s ease;
}
.share-row .share-btn:hover i { transform: scale(1.06); }
.share-row .share-btn.wa { border-color: rgba(18,140,90,0.42); color: #126a44; }
.share-row .share-btn.wa {
  background: linear-gradient(135deg, rgba(230,250,239,0.99), rgba(205,241,223,0.96));
  border-color: rgba(18,140,90,0.42);
  color: #126a44;
  box-shadow: 0 7px 13px rgba(10,120,54,0.11), 0 14px 24px rgba(10,120,54,0.1), 0 0 0 1px rgba(37,211,102,0.14) inset;
}
.share-row .share-btn.wa i {
  background: radial-gradient(circle, rgba(37,211,102,0.24), rgba(37,211,102,0.08));
}
.share-row .share-btn.wa:hover {
  border-color: rgba(18,140,90,0.5);
  background: linear-gradient(135deg, rgba(223,247,234,0.99), rgba(198,236,216,0.96));
  color: #126a44;
  box-shadow: 0 10px 18px rgba(10,120,54,0.13), 0 16px 28px rgba(10,120,54,0.12), 0 0 0 1px rgba(37,211,102,0.22) inset, 0 0 12px rgba(37,211,102,0.14);
  filter: drop-shadow(0 0 6px rgba(37,211,102,0.12));
}
.share-row .share-btn.wa.share-success {
  border-color: rgba(22,163,74,0.4);
  background: linear-gradient(135deg, rgba(236,252,243,0.98), rgba(224,247,234,0.95));
  color: #166534;
}
.wa-note {
  margin: 0.68rem 0 0;
  font-size: 0.8rem;
  color: #176b39;
  font-weight: 600;
}
.social-proof-line {
  margin: 0.34rem 0 0.24rem;
  font-size: 0.82rem;
  color: var(--dash-wine);
}
.store-helper {
  margin: 0.5rem 0 0.28rem;
  font-size: 0.82rem;
  color: var(--text-light);
}
.tip-note { margin-top: 0.52rem; font-size: 0.88rem; color: var(--text-light); line-height: 1.55; }
.video-proof-card {
  background: linear-gradient(180deg, rgba(247,244,255,0.98), rgba(241,237,252,0.95));
}
.video-proof-card .video-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.45rem;
}
.video-proof-card .video-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #5B3E8B;
  background: rgba(91,62,139,0.1);
  border: 1px solid rgba(91,62,139,0.2);
  border-radius: 999px;
  padding: 4px 9px;
}
.video-proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 0.55rem;
  margin: 0.55rem 0 0.65rem;
}
.video-proof-stat {
  border-radius: 12px;
  border: 1px solid rgba(74,44,58,0.14);
  background: rgba(255,255,255,0.9);
  padding: 10px 11px;
}
.video-proof-stat .label {
  font-size: 0.72rem;
  color: #6b6470;
  font-weight: 600;
}
.video-proof-stat .value {
  margin-top: 3px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #4A2E35;
}
.video-proof-topline {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.81rem;
  color: #6e6375;
}
.video-proof-topline strong { color: #4A2E35; }
.video-proof-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.video-proof-actions .btn-seller { flex: 1 1 180px; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 0.55rem;
}
.metric-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(250,244,247,0.94));
  border: 1px solid rgba(74,44,58,0.09);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  box-shadow: 0 8px 18px rgba(28,16,22,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(28,16,22,0.1); }
.metric-card:hover .metric-icon { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 0 1px rgba(122,62,77,0.11) inset, 0 8px 18px rgba(122,62,77,0.16); }
.metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-light);
  font-size: 0.76rem;
  font-weight: 600;
}
.metric-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-wine);
  background: radial-gradient(circle, rgba(122,62,77,0.22) 0%, rgba(122,62,77,0.08) 70%, rgba(122,62,77,0.03) 100%);
  box-shadow: 0 0 0 1px rgba(122,62,77,0.08) inset, 0 6px 16px rgba(122,62,77,0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.metric-value {
  font-size: 1.78rem;
  font-weight: 700;
  color: var(--dash-wine);
  line-height: 1.2;
  margin-top: 6px;
}
.metric-trend {
  font-size: 0.7rem;
  color: rgba(107,100,112,0.72);
  margin-top: 5px;
}
.mini-progress {
  margin-top: 6px;
  height: 4px;
  border-radius: 99px;
  background: rgba(74,44,58,0.12);
  overflow: hidden;
}
.mini-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #B76E79, #7A3E4D);
  transition: width .8s ease;
}
.mini-progress-pct {
  margin-top: 4px;
  font-size: 0.66rem;
  color: var(--text-light);
}

.plan-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; background: rgba(192,132,151,0.2); color: var(--mauve); }
.plan-badge.pro { background: rgba(212,175,55,0.25); color: var(--gold); }
.plan-benefits { margin: 0.7rem 0 0.95rem; padding-left: 1.1rem; color: var(--text-light); }
.plan-benefits li { margin-bottom: 0.38rem; }
.btn-upgrade {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--dash-gold), #C99F45);
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.btn-upgrade:hover { color: white; opacity: 0.95; }

.checklist { margin: 0.7rem 0 0; display: grid; gap: 0.5rem; }
.check-item { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--text-dark); }
.check-item i { width: 20px; text-align: center; }
.check-item.done i { color: #16a34a; }
.check-item.pending i { color: #94a3b8; }
.check-item.done i { animation: checkPulse 2.6s ease-in-out infinite; }
.progress-wrap { margin-top: 0.75rem; }
.progress-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-light); margin-bottom: 6px; }
.progress-bar-bg { height: 10px; border-radius: 999px; background: rgba(74,44,58,0.1); overflow: hidden; }
.progress-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #B76E79, #7A3E4D);
  transition: width .8s ease;
}

.cta-row { margin-top: 0.9rem; display: flex; gap: 0.65rem; flex-wrap: wrap; }
.dash-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  padding: 11px 14px;
  background: #1f8a52;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: all .25s ease;
}
.dash-toast.show { opacity: 1; transform: translateY(0); }

.dashboard-card.seller-card { animation: fadeUp .45s ease both; }
.dashboard-card.seller-card:nth-of-type(2) { animation-delay: .03s; }
.dashboard-card.seller-card:nth-of-type(3) { animation-delay: .06s; }
.dashboard-card.seller-card:nth-of-type(4) { animation-delay: .09s; }
.dashboard-card.seller-card:nth-of-type(5) { animation-delay: .12s; }
.dashboard-card.seller-card:nth-of-type(6) { animation-delay: .15s; }
.section-group {
  display: grid;
  gap: 1.55rem;
  margin-bottom: 2rem;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes welcomeSheen {
  0%, 100% { filter: brightness(1); opacity: 0.9; }
  50% { filter: brightness(1.05); opacity: 0.98; }
}
@keyframes activeDotGlow {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(37,211,102,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(37,211,102,0.08); }
}
@keyframes rippleAnim {
  to { transform: scale(3.5); opacity: 0; }
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 16px 26px rgba(32,16,23,0.3), 0 0 0 rgba(183,110,121,0); }
  50% { box-shadow: 0 17px 27px rgba(32,16,23,0.32), 0 0 0 6px rgba(183,110,121,0.08); }
}
@keyframes checkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (max-width: 992px) {
  .quick-actions { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .metrics-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .stats-row-large { grid-template-columns: repeat(2, 1fr); }
  .primary-actions-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-action-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dashboard-card { padding: 1.1rem 1rem; border-radius: 16px; margin-bottom: 0.9rem; }
  .app-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .quick-actions, .metrics-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 0.55rem; }
  .stats-row-large { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .stat-card-large .stat-value { font-size: 1.55rem; }
  .primary-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .primary-action-card { min-height: 88px; padding: 0.9rem 0.5rem; font-size: 0.82rem; }
  .hero-today-stats { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .hero-stat .value { font-size: 1rem; }
  .hero-action-row { grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
  .hero-action-btn { font-size: 0.78rem; min-height: 44px; padding: 0.65rem 0.4rem; }
  .progress-checklist-grid { grid-template-columns: 1fr; }
  .setup-steps { grid-template-columns: 1fr; }
  .quick-btn { min-height: 88px; }
  .btn-seller, .btn-upgrade, .share-row .share-btn { width: 100%; justify-content: center; min-height: 48px; }
  .share-row { gap: 0.5rem; }
  .cta-row { gap: 0.5rem; }
  body { padding-top: 70px; }
  .seller-main { padding: 1rem 0.85rem 2.5rem; }
}
@media (min-width: 992px) {
  .dashboard-card {
    box-shadow: 0 12px 24px rgba(27,15,20,0.08), 0 24px 38px rgba(27,15,20,0.06);
    border-color: rgba(74,44,58,0.1);
  }
  .section-group .dashboard-card {
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  }
  .section-group .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(27,15,20,0.09), 0 26px 40px rgba(27,15,20,0.08);
    border-color: rgba(74,44,58,0.14);
  }
  .btn-seller,
  .btn-upgrade,
  .share-row .share-btn {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  }
  .btn-seller:hover,
  .btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 16px rgba(37,20,28,0.1), 0 18px 28px rgba(37,20,28,0.12);
  }
  .share-row .share-btn {
    border-radius: 999px;
    padding-inline: 16px;
    box-shadow: 0 7px 12px rgba(37,20,28,0.08), 0 14px 20px rgba(37,20,28,0.1);
  }
  .store-open-btn {
    box-shadow: 0 12px 20px rgba(66,31,42,0.24), 0 22px 34px rgba(66,31,42,0.28), 0 0 18px rgba(122,62,77,0.18);
    filter: saturate(1.03);
  }
  .store-open-btn:hover {
    box-shadow: 0 14px 24px rgba(66,31,42,0.26), 0 26px 38px rgba(66,31,42,0.32), 0 0 20px rgba(122,62,77,0.22);
  }
}
.section-group {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 0.2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248,246,244,0.55), rgba(248,246,244,0.25));
}
.onboarding-card { margin-bottom: 2rem; }
.group-store { position: relative; }
.group-store::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
  border-radius: 22px;
  background: radial-gradient(circle at 72% 18%, rgba(230,199,156,0.24), rgba(230,199,156,0) 48%),
              radial-gradient(circle at 18% 84%, rgba(122,62,77,0.14), rgba(122,62,77,0) 50%);
  pointer-events: none;
  z-index: 0;
}
.group-store > .store-card,
.group-store > .catalog-card {
  position: relative;
  z-index: 1;
}
.group-store .dashboard-card,
.group-growth .dashboard-card {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,248,250,0.95));
  border: 1px solid rgba(74,44,58,0.09);
  box-shadow: 0 10px 24px rgba(27, 15, 20, 0.07);
}
.store-card .store-url-box {
  background: linear-gradient(135deg, rgba(252,250,246,0.98), rgba(255,253,249,0.94));
  border: 1px solid rgba(74,44,58,0.15);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(74,44,58,0.05), inset 0 0 0 1px rgba(255,255,255,0.28), inset 0 -3px 10px rgba(74,44,58,0.04), 0 0 0 1px rgba(230,199,156,0.14), 0 10px 20px rgba(44,24,32,0.07);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.store-card .store-url-box:hover {
  border-color: rgba(122,62,77,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(74,44,58,0.05), 0 0 0 2px rgba(230,199,156,0.16), 0 12px 22px rgba(44,24,32,0.1), 0 0 14px rgba(212,165,165,0.2);
}
.store-card .store-url-box:active {
  transform: translateY(-1px);
  border-color: rgba(122,62,77,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(74,44,58,0.07), 0 0 0 2px rgba(212,165,165,0.24), 0 10px 18px rgba(44,24,32,0.12);
}
.store-card .store-url-box.copied {
  border-color: rgba(22,163,74,0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(22,163,74,0.08), 0 0 0 2px rgba(34,197,94,0.18), 0 10px 18px rgba(22,120,74,0.1);
}
.store-link-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.store-link-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-wine);
  background: radial-gradient(circle, rgba(212,165,165,0.34), rgba(212,165,165,0.08));
  border: 1px solid rgba(74,44,58,0.14);
  flex-shrink: 0;
}
.store-link-feedback {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(107,100,112,0.76);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.store-link-feedback.show { color: #166534; }
.store-open-btn {
  background: linear-gradient(135deg, #b06679, #7a3f50, #5f2f3d);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 10px 18px rgba(66,31,42,0.22), 0 18px 30px rgba(66,31,42,0.24), 0 0 16px rgba(122,62,77,0.16);
  transition: all .22s ease;
  position: relative;
  overflow: hidden;
}
.store-open-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
  pointer-events: none;
}
.store-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(66,31,42,0.26), 0 20px 34px rgba(66,31,42,0.3), 0 0 18px rgba(122,62,77,0.2);
}
.store-open-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 5px 10px rgba(66,31,42,0.22);
}
.store-card {
  background: linear-gradient(165deg, rgba(255,253,250,0.78), rgba(252,246,239,0.72), rgba(248,240,234,0.7));
  border: 1px solid rgba(255,255,255,0.34) !important;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.66), inset 0 -1px 0 rgba(179,125,71,0.06), 0 8px 14px rgba(44,24,32,0.05), 0 18px 28px rgba(44,24,32,0.08), 0 26px 40px rgba(44,24,32,0.06) !important;
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeUp .5s ease both;
}
.store-card::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0));
  pointer-events: none;
}
.store-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -48px;
  top: -70px;
  background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0));
  pointer-events: none;
}
.store-card h2 {
  margin-bottom: 0.46rem;
  padding-left: 12px;
  position: relative;
}
.store-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, #e6c79c, #b76e79);
  box-shadow: 0 0 8px rgba(230,199,156,0.2);
}
.store-card .store-subtitle {
  margin-bottom: 0.86rem;
  color: rgba(107,100,112,0.84);
  line-height: 1.58;
}
.seller-nav a:hover,
.seller-menu a:hover,
.seller-sidebar a:hover {
  background: rgba(122,62,77,0.08);
  color: var(--dash-wine);
}
.seller-nav a.active,
.seller-menu a.active,
.seller-sidebar a.active {
  background: linear-gradient(135deg, rgba(122,62,77,0.14), rgba(212,165,165,0.12));
  color: var(--dash-wine);
  box-shadow: inset 0 0 0 1px rgba(122,62,77,0.16);
}
.catalog-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,244,247,0.94));
}
.catalog-card .muted-note {
  font-size: 0.86rem;
  color: var(--text-light);
  margin-bottom: 0.6rem;
}
.catalog-card .btn-seller-primary {
  background: linear-gradient(135deg, #E6C26A, #B98225);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  box-shadow: 0 12px 24px rgba(185,130,37,0.32), 0 0 0 1px rgba(255,234,186,0.22) inset;
}
.catalog-card .btn-seller-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(185,130,37,0.38);
}
.catalog-card .btn-seller-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 9px 18px rgba(185,130,37,0.3);
}
.catalog-card .btn-seller-outline {
  border-color: rgba(201,159,69,0.35);
  background: linear-gradient(135deg, rgba(255,252,246,0.98), rgba(249,243,232,0.92));
  box-shadow: 0 6px 14px rgba(37,20,28,0.06);
}
.catalog-card .btn-seller-outline i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(230,199,156,0.34), rgba(230,199,156,0.12));
}
.seller-products-preview {
  margin-top: 1rem;
}
.seller-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
}
.seller-products-preview .product-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 1px solid rgba(195,108,138,0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.seller-products-preview .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(195,108,138,0.14);
}
.seller-products-preview .img-wrap {
  aspect-ratio: 1;
  background: #FFF5F7;
  overflow: hidden;
  position: relative;
}
.seller-products-preview .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seller-products-preview .discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #C08497;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
}
.seller-products-preview .body {
  padding: 0.9rem;
}
.seller-products-preview .name {
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.35;
}
.seller-products-preview .card-tagline {
  font-size: 0.8rem;
  color: #718096;
  line-height: 1.35;
  margin-bottom: 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}
.seller-products-preview .price {
  font-weight: 700;
  color: #7A3E4D;
  font-size: 1rem;
}
.seller-products-preview .price .old {
  color: #718096;
  font-weight: 400;
  font-size: 0.82rem;
  text-decoration: line-through;
  margin-left: 0.4rem;
}
.seller-products-preview .preview-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.seller-products-preview .preview-actions a {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9px;
  padding: 7px 8px;
  text-decoration: none;
}
.seller-products-preview .preview-actions .btn-view {
  background: rgba(122,62,77,0.1);
  color: #7A3E4D;
}
.seller-products-preview .preview-actions .btn-edit {
  background: rgba(0,0,0,0.06);
  color: #2d3748;
}
.seller-products-preview .preview-actions .btn-delete {
  background: #fef2f2;
  color: #dc2626;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.seller-products-preview .preview-actions .btn-delete:hover {
  background: #fee2e2;
}
.copy-success {
  animation: copiedPulse .45s ease;
}
.onboarding-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,247,242,0.95));
  border-radius: 16px;
  border: 1px solid rgba(74,44,58,0.1);
  box-shadow: 0 12px 24px rgba(34,18,26,0.08);
  padding: 1rem;
  margin-bottom: 1.1rem;
}
.onboarding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.55rem;
}
.onboarding-head h3 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  color: var(--dash-plum);
  font-size: 1.18rem;
}
.setup-meta {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: 600;
}
.setup-progress {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74,44,58,0.12), rgba(74,44,58,0.08));
  box-shadow: inset 0 1px 2px rgba(31,18,24,0.14), inset 0 -1px 0 rgba(255,255,255,0.36);
  overflow: hidden;
}
.setup-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
  pointer-events: none;
}
.setup-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #D2A162, #B76E79 52%, #7A3E4D);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 8px rgba(93,50,64,0.26);
  transition: width 1.08s cubic-bezier(.22,.61,.36,1);
}
.setup-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -42%;
  width: 42%;
  height: 100%;
  background: linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,0.42), rgba(255,255,255,0));
  opacity: 0;
  pointer-events: none;
}
.setup-progress-fill.is-shimmering::after {
  opacity: 1;
  animation: setupShimmer 1.2s ease;
}
.setup-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.setup-step {
  background: linear-gradient(180deg, rgba(251,248,244,0.95), rgba(246,241,236,0.92));
  border: 1px solid rgba(74,44,58,0.12);
  border-radius: 14px;
  padding: 0.8rem;
  box-shadow: 0 4px 10px rgba(37,20,28,0.05), 0 12px 24px rgba(37,20,28,0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.setup-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(37,20,28,0.07), 0 14px 24px rgba(37,20,28,0.08);
}
.setup-step.done {
  border-color: rgba(90,170,128,0.24);
  background: linear-gradient(155deg, rgba(244,252,247,0.96), rgba(236,248,241,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.66), inset 0 0 0 1px rgba(197,233,214,0.38), 0 5px 12px rgba(22,120,74,0.06), 0 14px 24px rgba(22,120,74,0.06);
  animation: stepDoneFade .45s ease both;
}
.setup-step.done::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
  pointer-events: none;
}
.setup-step:not(.done) {
  box-shadow: 0 4px 10px rgba(37,20,28,0.05), 0 12px 22px rgba(37,20,28,0.06);
}
.setup-step:not(.done):hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(37,20,28,0.08), 0 16px 26px rgba(37,20,28,0.1);
}
.setup-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}
.setup-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-wine);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), rgba(212,165,165,0.2) 45%, rgba(212,165,165,0.08) 100%);
  border: 1px solid rgba(122,62,77,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 2px rgba(74,44,58,0.08);
}
.setup-check {
  color: #16a34a;
  font-size: 0.95rem;
}
.setup-check i { animation: checkPop .42s cubic-bezier(.19,1,.22,1) both; }
.setup-step h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--dash-plum);
}
.setup-step p {
  margin: 0.3rem 0 0.65rem;
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.45;
}
.setup-action {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 11px;
  padding: 9px 10px;
  font-size: 0.84rem;
  font-weight: 700;
  border: 1px solid rgba(74,44,58,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,242,236,0.92));
  color: var(--dash-plum);
  box-shadow: 0 8px 16px rgba(37,20,28,0.09);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.setup-action i {
  transition: transform .2s ease;
}
.setup-step:not(.done) .setup-action {
  border-color: rgba(122,62,77,0.2);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,242,234,0.94));
}
.setup-action:hover {
  transform: translateY(-2px);
  border-color: var(--dash-wine);
  color: var(--dash-wine);
  box-shadow: 0 12px 20px rgba(37,20,28,0.13);
}
.setup-action:hover i { transform: scale(1.06); }
.setup-action:active {
  transform: translateY(-1px) scale(0.985);
  box-shadow: 0 8px 14px rgba(37,20,28,0.11);
}
.setup-action:active i { transform: scale(1.03); }
.setup-step-share {
  background: linear-gradient(165deg, rgba(255,250,242,0.97), rgba(252,241,226,0.95), rgba(246,229,210,0.93));
  border-color: rgba(179,125,71,0.18);
  box-shadow: 0 5px 11px rgba(86,52,27,0.05), 0 14px 25px rgba(86,52,27,0.07);
}
.setup-step-share:hover {
  box-shadow: 0 7px 14px rgba(86,52,27,0.08), 0 16px 28px rgba(86,52,27,0.1);
}
.setup-step-share .setup-action {
  border-color: rgba(179,125,71,0.24);
  background: linear-gradient(135deg, rgba(255,252,245,0.98), rgba(253,243,227,0.95));
  box-shadow: 0 8px 15px rgba(86,52,27,0.09);
}
.setup-step-share .setup-action:hover {
  box-shadow: 0 12px 20px rgba(86,52,27,0.12);
}
.setup-step-share .setup-action.share-success {
  border-color: rgba(22,163,74,0.34);
  background: linear-gradient(135deg, rgba(240,253,244,0.98), rgba(227,247,236,0.95));
  color: #166534;
}
.setup-note {
  margin: 0.65rem 0 0;
  color: #8e4f3f;
  font-size: 0.86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255,247,224,0.74), rgba(255,237,213,0.64));
  border: 1px solid rgba(201,136,77,0.25);
  border-radius: 10px;
  padding: 6px 10px;
}
.setup-celebrate {
  margin-top: 0.7rem;
  background: linear-gradient(135deg, rgba(240,253,244,0.95), rgba(255,251,235,0.93));
  border: 1px solid rgba(22,163,74,0.28);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  color: #166534;
  font-size: 0.86rem;
  font-weight: 600;
  animation: celebrateIn .45s ease both;
}
@keyframes stepDoneFade {
  from { opacity: 0.65; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes checkPop {
  0% { transform: scale(0.55); opacity: 0; }
  65% { transform: scale(1.15); opacity: 1; }
  82% { transform: scale(0.96); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes setupShimmer {
  0% { left: -42%; }
  100% { left: 122%; }
}
@keyframes celebrateIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes copiedPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.growth-card {
  background: linear-gradient(180deg, rgba(255,251,244,0.98), rgba(252,247,238,0.95));
}
.growth-card h2 {
  margin-bottom: 0.35rem;
}
.plan-benefits {
  list-style: none;
  padding-left: 0;
  opacity: 0.8;
  color: #8d8591;
  animation: fadeUp .4s ease both;
}
.plan-benefits li {
  position: relative;
  padding-left: 1.2rem;
}
.plan-benefits li i { color: rgba(121,113,126,0.85); }
.plan-benefits li::before {
  content: "•";
  position: absolute;
  left: 0.3rem;
  color: var(--dash-wine);
  font-weight: 700;
}
.growth-urgency {
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
  font-size: 0.86rem;
  color: var(--dash-wine);
  font-weight: 600;
}
.growth-card .btn-upgrade {
  box-shadow: 0 12px 24px rgba(201,159,69,0.3);
}
.growth-card .btn-upgrade:hover {
  box-shadow: 0 14px 26px rgba(201,159,69,0.36);
}
/* Extra space so bottom cards are not hidden behind FAB / WhatsApp float */
.seller-main {
  padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 992px) {
  .seller-main {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}
.fab-add {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #B76E79, #7A3E4D);
  box-shadow: 0 16px 26px rgba(32,16,23,0.32);
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 1.28rem;
  transition: transform .16s ease-out, box-shadow .16s ease-out, filter .16s ease-out;
  overflow: visible;
}
.fab-add:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.03); }
.fab-add:active { transform: scale(0.97); }
.fab-add.fab-intro {
  animation: fabIntroPulse 1.05s ease-out 1;
}
.fab-add .fab-label {
  position: absolute;
  left: calc(100% + 10px);
  right: auto;
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  background: rgba(34,18,25,0.92);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .fab-add:hover .fab-label {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
@keyframes fabIntroPulse {
  0% { box-shadow: 0 16px 26px rgba(32,16,23,0.32), 0 0 0 0 rgba(183,110,121,0.25); }
  100% { box-shadow: 0 16px 26px rgba(32,16,23,0.32), 0 0 0 14px rgba(183,110,121,0); }
}
.scroll-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .42s ease-out, transform .42s ease-out;
}
.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Premium UI Pass: design system ─── */
.sg-surface,
.dashboard-card,
.dominant-action-card,
.stat-card-large,
.preorder-stat,
.more-tools-section,
.growth-card-compact,
.getting-started-card {
  border-radius: var(--sg-radius-lg);
  border: 1px solid rgba(74,44,58,0.07);
  box-shadow: var(--sg-shadow-2);
  transition: box-shadow var(--sg-duration) var(--sg-ease), transform var(--sg-duration) var(--sg-ease), border-color var(--sg-duration) var(--sg-ease);
}
.dashboard-card {
  padding: var(--sg-space-5) var(--sg-space-6);
  margin-bottom: var(--sg-space-4);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
}
.dashboard-card h2,
.dashboard-card .h6 {
  font-family: var(--sg-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dash-plum);
}
.dashboard-card .h6 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--sg-space-3);
}
.dash-above-fold {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-4);
  margin-bottom: var(--sg-space-2);
}
.dash-above-fold > * { margin-bottom: 0 !important; }

/* Hero — Store Command Center */
.hero-stage { margin-bottom: 0; }
.hero-stage::before { opacity: 0.65; }
.welcome-card.control-center-hero {
  background: linear-gradient(145deg, #5c3848 0%, #4A2C3A 48%, #3d2430 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--sg-shadow-3), inset 0 1px 0 rgba(255,255,255,0.14);
  border-radius: var(--sg-radius-xl);
  padding: var(--sg-space-5) var(--sg-space-6) var(--sg-space-6);
}
.hero-brand-block { min-width: 0; }
.hero-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212,184,122,0.92);
  margin-bottom: 4px;
}
.control-center-hero .hero-store-name {
  font-family: var(--sg-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}
.status-chip {
  padding: 7px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(22,163,74,0.16);
  border: 1px solid rgba(134,239,172,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.status-chip.draft {
  background: rgba(251,191,36,0.14);
  border-color: rgba(254,243,199,0.3);
}
.hero-today-stats { gap: var(--sg-space-2); margin-bottom: var(--sg-space-4); }
.hero-stat {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-3);
  backdrop-filter: blur(6px);
}
.hero-stat .label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  opacity: 0.88;
}
.hero-stat .value {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero-action-row { gap: var(--sg-space-2); }
.hero-action-btn {
  border-radius: var(--sg-radius-md);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-height: 46px;
  transition: transform var(--sg-duration) var(--sg-ease), box-shadow var(--sg-duration) var(--sg-ease), background var(--sg-duration) var(--sg-ease);
  background: linear-gradient(180deg, #e8cfa0 0%, #c9a24e 100%);
  color: #3d2a1a;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 4px 14px rgba(0,0,0,0.18);
}
.hero-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 20px rgba(0,0,0,0.22);
  color: #3d2a1a;
}
.hero-action-btn:active { transform: translateY(0) scale(0.98); }
.hero-action-btn.secondary {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95);
  box-shadow: none;
}
.hero-action-btn.secondary:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

/* Next Action card */
.dominant-action-card {
  padding: var(--sg-space-5) var(--sg-space-6);
  background: #fff;
  border: 1px solid rgba(74,44,58,0.08);
  box-shadow: var(--sg-shadow-2);
  border-radius: var(--sg-radius-lg);
}
.dominant-action-card .dominant-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--dash-wine);
  opacity: 0.85;
}
.dominant-action-card .dominant-step-meta {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--sg-text-muted);
  margin-bottom: var(--sg-space-3);
}
.dominant-action-card .dominant-step-meta strong {
  font-weight: 700;
  color: var(--dash-plum);
}
.dominant-completion-bar {
  height: 6px;
  background: rgba(74,44,58,0.08);
  margin-bottom: var(--sg-space-4);
}
.dominant-completion-bar span {
  background: linear-gradient(90deg, var(--dash-gold-deep), var(--dash-gold));
}
.journey-list { gap: 0.3rem; margin-bottom: var(--sg-space-4); }
.journey-list li {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.28rem 0;
}
.journey-list li.current { font-weight: 600; }
.dominant-action-card .dominant-action-msg {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
  margin-bottom: var(--sg-space-4);
}

/* Button system */
.dominant-cta-btn,
.hero-action-btn,
.btn-seller,
.btn-upgrade,
.sg-share-wa-hero,
.sg-share-opt,
.sg-share-copy-btn {
  transition: transform var(--sg-duration) var(--sg-ease), box-shadow var(--sg-duration) var(--sg-ease), opacity var(--sg-duration) var(--sg-ease);
}
.dominant-cta-btn:active,
.btn-seller:active:not(:disabled),
.btn-upgrade:active,
.sg-share-wa-hero:active,
.sg-share-opt:active { transform: scale(0.98); }
.dominant-cta-btn {
  border-radius: var(--sg-radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  min-height: 52px;
  box-shadow: 0 4px 16px rgba(37,211,102,0.22);
}
.dominant-cta-btn:hover { transform: translateY(-1px); }
.dominant-cta-btn.is-gold {
  background: linear-gradient(180deg, #e8cfa0 0%, #b8941f 100%);
  color: #3d2a1a;
  box-shadow: 0 4px 16px rgba(184,148,31,0.25);
}
.dominant-cta-btn.is-gold:hover { color: #3d2a1a; }
.dominant-cta-btn.is-plum {
  background: linear-gradient(180deg, #8a5062 0%, #5f3342 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(74,44,58,0.22);
}
.dominant-cta-btn.is-plum:hover { color: #fff; }
.dominant-cta-btn:not(.is-gold):not(.is-plum) {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(21,128,61,0.22);
}
.dominant-cta-btn:not(.is-gold):not(.is-plum):hover { color: #fff; }
.dominant-cta-btn:disabled,
.btn-seller:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.seller-main .btn-seller-primary,
.seller-main .btn-seller.btn-seller-primary {
  background: linear-gradient(180deg, #e8cfa0 0%, #b8941f 100%);
  color: #3d2a1a;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(184,148,31,0.2);
}
.seller-main .btn-seller-outline {
  background: rgba(248,246,244,0.9);
  border: 1px solid rgba(74,44,58,0.12);
  color: var(--dash-wine);
  font-weight: 600;
}
.seller-main .btn-seller-outline:hover {
  background: #fff;
  border-color: rgba(122,62,77,0.22);
  color: var(--dash-plum);
}
.seller-main .btn-seller-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  border-radius: var(--sg-radius-sm);
  min-height: 38px;
}
.seller-main .btn-upgrade {
  background: linear-gradient(180deg, #e8cfa0 0%, #b8941f 100%);
  color: #3d2a1a;
  font-weight: 600;
  border-radius: var(--sg-radius-md);
  box-shadow: 0 2px 10px rgba(184,148,31,0.22);
}
.seller-main .btn-upgrade:hover {
  color: #3d2a1a;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(184,148,31,0.28);
  opacity: 1;
}

/* Stats */
.stats-row-large { gap: var(--sg-space-3); margin-bottom: 0; }
.stat-card-large {
  padding: var(--sg-space-4) var(--sg-space-5);
  border-radius: var(--sg-radius-lg);
  background: #fff;
}
.stat-card-large:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-3);
  border-color: rgba(122,62,77,0.1);
}
.stat-card-large .stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sg-text-subtle);
  text-transform: uppercase;
}
.stat-card-large .stat-value {
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--dash-plum);
  margin-top: 6px;
  line-height: 1.1;
}
.stat-card-large.highlight {
  background: linear-gradient(165deg, #fff 0%, rgba(252,248,250,0.95) 100%);
  border-color: rgba(212,184,122,0.22);
}
.stat-card-large.highlight .stat-value { color: var(--dash-wine); }
.stat-card-large .stat-trend {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--sg-success-soft);
  margin-top: 6px;
}
.preorder-stats { gap: var(--sg-space-3); margin-bottom: 0; }
.preorder-stat {
  padding: var(--sg-space-4);
  border-radius: var(--sg-radius-md);
  background: #fff;
}
.preorder-stat .ps-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--sg-text-subtle);
}
.preorder-stat .ps-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--dash-plum);
}
.preorder-stat .ps-value.is-yes {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sg-success-soft);
}

/* More Tools */
.more-tools-section {
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.85);
}
.more-tools-section summary {
  padding: var(--sg-space-4) var(--sg-space-5);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sg-text-muted);
  transition: color var(--sg-duration) var(--sg-ease), background var(--sg-duration) var(--sg-ease);
}
.more-tools-section summary i {
  width: 18px;
  color: var(--dash-wine);
  opacity: 0.75;
}
.more-tools-section[open] summary {
  color: var(--dash-plum);
  background: rgba(248,246,244,0.6);
}
.more-tools-section .more-tools-body {
  padding: var(--sg-space-3) var(--sg-space-4) var(--sg-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
}
.more-tools-body .dashboard-card {
  margin-bottom: 0;
  padding: var(--sg-space-4);
  box-shadow: var(--sg-shadow-1);
  border-radius: var(--sg-radius-md);
}
.more-tools-body .dashboard-card h2.h6,
.more-tools-body .dashboard-card .h6 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sg-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dash-plum);
  margin-bottom: var(--sg-space-3);
}
.more-tools-body .dashboard-card h2.h6 i,
.more-tools-body .dashboard-card .h6 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sg-radius-sm);
  background: var(--dash-gold-soft);
  color: var(--dash-wine);
  font-size: 0.82rem;
  flex-shrink: 0;
}
.more-tools-body .btn-seller.btn-sm,
.more-tools-body .btn.btn-seller.btn-sm {
  min-height: 40px;
  font-weight: 600;
}
.more-tools-body .store-url-box {
  border-radius: var(--sg-radius-sm);
  border-color: rgba(74,44,58,0.08);
  background: rgba(248,246,244,0.6);
}
.ai-activity-collapsed summary,
.getting-started-card summary {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sg-text-muted);
  transition: color var(--sg-duration) var(--sg-ease);
}
.ai-activity-collapsed[open] summary,
.getting-started-card[open] summary { color: var(--dash-plum); }
details.more-tools-section,
details.ai-activity-collapsed,
details.getting-started-card {
  transition: box-shadow var(--sg-duration) var(--sg-ease);
}
details.ai-activity-collapsed summary,
details.getting-started-card summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sg-space-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-3);
}
details.ai-activity-collapsed summary::-webkit-details-marker,
details.getting-started-card summary::-webkit-details-marker { display: none; }
.journey-list li.done .j-icon { color: var(--sg-success-soft); }
.journey-list li.current .j-icon { color: var(--dash-gold-deep); }

/* Share modal & celebration */
.sg-share-overlay {
  backdrop-filter: blur(4px);
  transition: opacity 220ms var(--sg-ease), visibility 220ms var(--sg-ease);
}
.sg-share-sheet {
  border-radius: var(--sg-radius-xl) var(--sg-radius-xl) 0 0;
  box-shadow: var(--sg-shadow-3);
  border: 1px solid rgba(74,44,58,0.06);
}
.sg-share-sheet-head h3 {
  font-family: var(--sg-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sg-share-close {
  transition: background var(--sg-duration) var(--sg-ease), transform var(--sg-duration) var(--sg-ease);
}
.sg-share-close:hover { background: rgba(74,44,58,0.12); }
.sg-share-close:active { transform: scale(0.94); }
.sg-share-celebrate-card {
  border-radius: var(--sg-radius-xl);
  box-shadow: var(--sg-shadow-3);
}
.growth-card-compact {
  padding: var(--sg-space-4) var(--sg-space-5) !important;
  background: rgba(255,255,255,0.9);
}
.growth-card-compact .growth-meta {
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Micro-interactions */
@media (hover: hover) {
  .dominant-action-card:hover,
  .preorder-stat:hover {
    box-shadow: var(--sg-shadow-3);
    border-color: rgba(74,44,58,0.1);
  }
}
.scroll-reveal {
  transition: opacity 280ms var(--sg-ease), transform 280ms var(--sg-ease);
}

@media (max-width: 640px) {
  .seller-main { padding: var(--sg-space-4) var(--sg-space-3) calc(5rem + env(safe-area-inset-bottom)) !important; }
  .dash-above-fold { gap: var(--sg-space-3); }
  .welcome-card.control-center-hero { padding: var(--sg-space-4); border-radius: var(--sg-radius-lg); }
  .control-center-hero .hero-store-name { font-size: 1.05rem; }
  .hero-action-row { grid-template-columns: repeat(2, 1fr); gap: var(--sg-space-2); }
  .hero-action-btn { min-height: 44px; font-size: 0.76rem; padding: 0.65rem 0.4rem; }
  .dominant-action-card { padding: var(--sg-space-4); }
  .dominant-action-card .dominant-action-msg { font-size: 1rem; }
  .dominant-cta-btn { min-height: 50px; }
  .stat-card-large .stat-value { font-size: 1.75rem; }
  .stats-row-large { gap: var(--sg-space-2); }
  .preorder-stats { gap: var(--sg-space-2); }
  .preorder-stat { padding: var(--sg-space-3); }
  .more-tools-section summary { padding: var(--sg-space-3) var(--sg-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
</style>
<link rel="stylesheet" href="/assets/css/sg-seller-dashboard.css?v=17">
<link rel="stylesheet" href="/assets/css/sg-app-shell.css?v=3">

    <?php require __DIR__ . '/includes/dashboard-premium.php'; ?>

    <div class="sg-share-overlay" id="sgShareOverlay" aria-hidden="true" role="dialog" aria-labelledby="sgShareTitle">
        <div class="sg-share-sheet" id="sgShareSheet">
            <div class="sg-share-sheet-head">
                <h3 id="sgShareTitle">Share your store</h3>
                <button type="button" class="sg-share-close" id="sgShareClose" aria-label="Close"><i class="fas fa-times"></i></button>
            </div>
            <div class="sg-share-url-block">
                <label for="sgShareUrlDisplay">Store Link</label>
                <div class="sg-share-url-text" id="sgShareUrlDisplay"><?php echo htmlspecialchars($store_url); ?></div>
            </div>
            <a href="https://wa.me/?text=<?php echo urlencode($share_wa_text); ?>" class="sg-share-wa-hero" id="sgShareWa" target="_blank" rel="noopener"><i class="fab fa-whatsapp"></i> WhatsApp Share</a>
            <div class="sg-share-divider"></div>
            <div class="sg-share-secondary-grid">
                <button type="button" class="sg-share-opt primary-copy" id="sgShareCopyBtn"><i class="fas fa-link"></i> Copy Link</button>
                <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($store_url); ?>" class="sg-share-opt" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i> Facebook</a>
                <a href="https://t.me/share/url?url=<?php echo urlencode($store_url); ?>&text=<?php echo urlencode($share_wa_text); ?>" class="sg-share-opt" target="_blank" rel="noopener"><i class="fab fa-telegram"></i> Telegram</a>
                <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode($store_url); ?>&text=<?php echo urlencode('Shop ' . $store_name); ?>" class="sg-share-opt" target="_blank" rel="noopener"><i class="fab fa-x-twitter"></i> X</a>
                <a href="mailto:?subject=<?php echo $share_email_subject; ?>&body=<?php echo $share_email_body; ?>" class="sg-share-opt" style="grid-column:1/-1;"><i class="fas fa-envelope"></i> Email</a>
            </div>
            <div class="sg-share-divider"></div>
            <button type="button" class="sg-share-more-apps sg-share-native-btn" id="sgShareNativeBtn" style="display:none;"><i class="fas fa-share-nodes"></i> More Apps</button>
            <p class="sg-share-fallback mb-0 mt-2"><a href="/seller/share-store.php" data-sg-full-nav="1">Full share page</a> · QR code</p>
        </div>
    </div>

    <div class="sg-share-celebrate-overlay" id="sgShareCelebrate" aria-hidden="true">
        <div class="sg-share-celebrate-card">
            <div class="celebrate-emoji">🎉</div>
            <h3>Great job!</h3>
            <p class="celebrate-sub">Your store has been shared.</p>
            <p class="celebrate-next">Next goal: Get your first order.</p>
            <ul class="sg-share-celebrate-tips">
                <li>Post to WhatsApp Status</li>
                <li>Share in Facebook groups</li>
                <li>Share with friends</li>
                <li>Share in Telegram channels</li>
            </ul>
            <a href="<?php echo htmlspecialchars($store_url); ?>" target="_blank" class="dominant-cta-btn is-plum" id="sgCelebrateViewStore"><i class="fas fa-store"></i> View My Store</a>
            <button type="button" class="btn btn-link btn-sm mt-2 text-muted" id="sgCelebrateClose">Continue on dashboard</button>
        </div>
    </div>

    <div id="dashToast" class="dash-toast">Link copied successfully</div>
    <script src="/assets/js/sg-seller-dashboard.js?v=7" defer></script>
    <script>
    (function() {
        var toast = document.getElementById('dashToast');
        var storeUrl = <?php echo json_encode($store_url, JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
        var storeName = <?php echo json_encode($store_name, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
        var shareText = <?php echo json_encode($share_wa_text, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
        var isMobile = window.matchMedia('(max-width: 767px)').matches || /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

        function showToast(text) {
            if (!toast) return;
            toast.textContent = text || 'Done';
            toast.classList.add('show');
            setTimeout(function() { toast.classList.remove('show'); }, 1800);
        }

        function copyStoreUrl(onDone) {
            if (!storeUrl) return;
            function done() { showToast('Link copied'); if (onDone) onDone(); }
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(storeUrl).then(done).catch(function() {
                    fallbackCopy();
                });
            } else {
                fallbackCopy();
            }
            function fallbackCopy() {
                var ta = document.createElement('textarea');
                ta.value = storeUrl;
                ta.setAttribute('readonly', '');
                ta.style.position = 'fixed';
                ta.style.left = '-9999px';
                document.body.appendChild(ta);
                ta.select();
                try { document.execCommand('copy'); done(); } catch (e) {}
                document.body.removeChild(ta);
            }
        }

        var overlay = document.getElementById('sgShareOverlay');
        var celebrateOverlay = document.getElementById('sgShareCelebrate');
        var shareClose = document.getElementById('sgShareClose');
        var celebrateClose = document.getElementById('sgCelebrateClose');
        var nativeBtn = document.getElementById('sgShareNativeBtn');
        var copyBtn2 = document.getElementById('sgShareCopyBtn');
        var shareStorageKey = 'sg_store_shared_' + <?php echo json_encode((string)(int)$seller_id); ?>;

        // Escape seller-main overflow clipping — fixed overlays must live on <body>
        function mountShareToBody(el) {
            if (el && el.parentNode !== document.body) {
                document.body.appendChild(el);
            }
        }
        mountShareToBody(overlay);
        mountShareToBody(celebrateOverlay);

        function markShareStepDone() {
            try { localStorage.setItem(shareStorageKey, '1'); } catch (e) {}
            var shareLi = document.querySelector('.journey-list li[data-journey-key="share"]');
            if (shareLi) {
                shareLi.classList.remove('current', 'pending');
                shareLi.classList.add('done');
                shareLi.querySelector('.j-icon i').className = 'fas fa-check-circle';
            }
            var visitorLi = document.querySelector('.journey-list li[data-journey-key="visitor"]');
            if (visitorLi && !visitorLi.classList.contains('done')) {
                document.querySelectorAll('.journey-list li').forEach(function(li) {
                    li.classList.remove('current');
                });
                visitorLi.classList.remove('pending');
                visitorLi.classList.add('current');
                visitorLi.querySelector('.j-icon i').className = 'fas fa-arrow-right';
            }
            var msgEl = document.querySelector('.dominant-action-msg');
            if (msgEl) msgEl.textContent = 'Get your first visitor';
        }

        function applyStoredShareProgress() {
            try {
                if (localStorage.getItem(shareStorageKey) !== '1') return;
            } catch (e) { return; }
            var shareLi = document.querySelector('.journey-list li[data-journey-key="share"]');
            var visitorLi = document.querySelector('.journey-list li[data-journey-key="visitor"]');
            if (!shareLi || shareLi.classList.contains('done')) return;
            shareLi.classList.remove('current', 'pending');
            shareLi.classList.add('done');
            shareLi.querySelector('.j-icon i').className = 'fas fa-check-circle';
            if (visitorLi && !visitorLi.classList.contains('done')) {
                document.querySelectorAll('.journey-list li').forEach(function(li) { li.classList.remove('current'); });
                visitorLi.classList.remove('pending');
                visitorLi.classList.add('current');
                visitorLi.querySelector('.j-icon i').className = 'fas fa-arrow-right';
            }
            var msgEl = document.querySelector('.dominant-action-msg');
            if (msgEl) msgEl.textContent = 'Get your first visitor';
            var ctaBtn = document.querySelector('.dominant-cta-btn.js-open-share');
            if (ctaBtn) ctaBtn.innerHTML = '<i class="fab fa-whatsapp"></i> Share Store Now';
        }

        function showShareCelebration() {
            markShareStepDone();
            closeShareModal();
            if (!celebrateOverlay) return;
            celebrateOverlay.classList.add('open');
            celebrateOverlay.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        }

        function closeShareCelebration() {
            if (!celebrateOverlay) return;
            celebrateOverlay.classList.remove('open');
            celebrateOverlay.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
        }

        function openShareModal() {
            if (!overlay) {
                overlay = document.getElementById('sgShareOverlay');
            }
            if (!overlay) return;
            mountShareToBody(overlay);
            // Dismiss loading cover if it somehow still blocks taps
            var cover = document.getElementById('sgAppCover');
            if (cover) {
                cover.classList.add('is-ready');
                cover.classList.remove('is-offline');
                cover.setAttribute('aria-busy', 'false');
            }
            overlay.classList.add('open');
            overlay.setAttribute('aria-hidden', 'false');
            overlay.style.opacity = '1';
            overlay.style.visibility = 'visible';
            overlay.style.pointerEvents = 'auto';
            document.body.style.overflow = 'hidden';
            var sheet = document.getElementById('sgShareSheet');
            if (sheet) {
                sheet.style.transform = 'translateY(0)';
            }
        }

        function closeShareModal() {
            if (!overlay) return;
            overlay.classList.remove('open');
            overlay.setAttribute('aria-hidden', 'true');
            overlay.style.opacity = '';
            overlay.style.visibility = '';
            overlay.style.pointerEvents = '';
            document.body.style.overflow = '';
            var sheet = document.getElementById('sgShareSheet');
            if (sheet) sheet.style.transform = '';
        }

        function tryNativeShare(preferDirect) {
            if (!navigator.share) return Promise.reject();
            return navigator.share({
                title: storeName,
                text: shareText,
                url: storeUrl
            });
        }

        var shareOpening = false;
        function handleShareClick(e) {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            if (shareOpening) return;
            shareOpening = true;
            try {
                openShareModal();
            } finally {
                window.setTimeout(function () { shareOpening = false; }, 300);
            }
        }

        window.openShareModal = openShareModal;

        if (/[?&]share=1/.test(window.location.search)) {
            setTimeout(openShareModal, 400);
            try {
                var cleanUrl = window.location.pathname + window.location.search.replace(/([?&])share=1&?/, '$1').replace(/[?&]$/, '');
                window.history.replaceState({}, '', cleanUrl || window.location.pathname);
            } catch (e) {}
        }

        // Event delegation — works even if buttons re-render
        document.addEventListener('click', function (e) {
            var btn = e.target && e.target.closest ? e.target.closest('.js-open-share') : null;
            if (!btn) return;
            handleShareClick(e);
        }, true);

        document.querySelectorAll('.js-open-share').forEach(function(el) {
            el.addEventListener('click', handleShareClick);
        });

        if (shareClose) shareClose.addEventListener('click', closeShareModal);
        if (overlay) {
            overlay.addEventListener('click', function(e) {
                if (e.target === overlay) closeShareModal();
            });
        }
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                if (celebrateOverlay && celebrateOverlay.classList.contains('open')) closeShareCelebration();
                else if (overlay && overlay.classList.contains('open')) closeShareModal();
            }
        });

        if (navigator.share && nativeBtn) {
            nativeBtn.style.display = 'flex';
            nativeBtn.addEventListener('click', function() {
                tryNativeShare(false).then(function() {
                    showShareCelebration();
                }).catch(function() {});
            });
        }

        if (celebrateClose) celebrateClose.addEventListener('click', closeShareCelebration);
        if (celebrateOverlay) {
            celebrateOverlay.addEventListener('click', function(e) {
                if (e.target === celebrateOverlay) closeShareCelebration();
            });
        }

        function flashCopyBtn(btn) {
            if (!btn) return;
            var orig = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i> Copied';
            setTimeout(function() { btn.innerHTML = orig; }, 1600);
        }

        if (copyBtn2) {
            copyBtn2.addEventListener('click', function() {
                copyStoreUrl(function() {
                    flashCopyBtn(copyBtn2);
                    showShareCelebration();
                });
            });
        }

        var storeLinkBox = document.getElementById('storeLinkBox');
        var storeLinkFeedback = document.getElementById('storeLinkFeedback');

        function flashStoreLinkCopied() {
            if (storeLinkBox) storeLinkBox.classList.add('copied');
            if (storeLinkFeedback) {
                storeLinkFeedback.textContent = 'Copied ✓';
                storeLinkFeedback.classList.add('show');
            }
            setTimeout(function() {
                if (storeLinkBox) storeLinkBox.classList.remove('copied');
                if (storeLinkFeedback) {
                    storeLinkFeedback.textContent = 'Tap to copy link';
                    storeLinkFeedback.classList.remove('show');
                }
            }, 1600);
        }

        if (storeLinkBox) {
            storeLinkBox.addEventListener('click', function(e) {
                if (e.target && e.target.closest('a')) return;
                copyStoreUrl(function() { flashStoreLinkCopied(); });
            });
        }

        var waShareBtn = document.getElementById('sgShareWa');
        if (waShareBtn) {
            waShareBtn.addEventListener('click', function() {
                setTimeout(function() {
                    showShareCelebration();
                }, 500);
            });
        }

        document.querySelectorAll('.sg-share-secondary-grid a.sg-share-opt').forEach(function(link) {
            link.addEventListener('click', function() {
                setTimeout(closeShareModal, 300);
            });
        });

        try {
            applyStoredShareProgress();
        } catch (e) {}

        document.querySelectorAll('.btn-upgrade, .share-btn, .btn-seller, .fab-add, .hero-action-btn, .dominant-cta-btn, .sg-share-opt, .sg-share-wa-hero').forEach(function(el) {
            el.addEventListener('click', function(e) {
                if (el.classList.contains('js-open-share')) return;
                var r = document.createElement('span');
                var rect = this.getBoundingClientRect();
                r.className = 'ripple';
                r.style.width = r.style.height = Math.max(rect.width, rect.height) + 'px';
                r.style.left = (e.clientX - rect.left - (Math.max(rect.width, rect.height) / 2)) + 'px';
                r.style.top = (e.clientY - rect.top - (Math.max(rect.width, rect.height) / 2)) + 'px';
                this.appendChild(r);
                setTimeout(function() { r.remove(); }, 560);
            });
        });

        function animateCount(el) {
            var target = parseInt(el.getAttribute('data-count') || '0', 10);
            var duration = 900;
            var start = performance.now();
            function tick(now) {
                var p = Math.min(1, (now - start) / duration);
                var eased = 1 - Math.pow(1 - p, 3);
                var val = Math.round(target * eased);
                el.textContent = val.toLocaleString('en-US');
                if (p < 1) requestAnimationFrame(tick);
            }
            requestAnimationFrame(tick);
        }
        document.querySelectorAll('.count-up').forEach(animateCount);

        requestAnimationFrame(function() {
            document.querySelectorAll('.mini-progress > span[data-target-width]').forEach(function(bar) {
                var w = parseInt(bar.getAttribute('data-target-width') || '0', 10);
                bar.style.width = Math.max(0, Math.min(100, w)) + '%';
            });
            var progressFill = document.getElementById('progressFill');
            if (progressFill) {
                var progressW = parseInt(progressFill.getAttribute('data-target-width') || '0', 10);
                progressFill.style.width = Math.max(0, Math.min(100, progressW)) + '%';
            }
        });

        var fab = document.getElementById('fabAddBtn');
        if (fab) {
            fab.classList.add('fab-intro');
            setTimeout(function() { fab.classList.remove('fab-intro'); }, 1200);
        }

        var revealTargets = Array.prototype.slice.call(document.querySelectorAll('.more-tools-section, .section-group'));
        revealTargets.forEach(function(el) { el.classList.add('scroll-reveal'); });
        if ('IntersectionObserver' in window) {
            var io = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        io.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.12 });
            revealTargets.forEach(function(el) { io.observe(el); });
        } else {
            revealTargets.forEach(function(el) { el.classList.add('visible'); });
        }

        function sgRsCopy(text, label) {
            if (!text) return;
            var done = function() {
                if (label && window.alert) alert(label + ' copied.');
            };
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(done).catch(function() {
                    window.prompt('Copy:', text);
                });
            } else {
                window.prompt('Copy:', text);
            }
        }
        document.getElementById('sgRsCopyCode')?.addEventListener('click', function() {
            sgRsCopy(document.getElementById('sgRsSupplierCode')?.textContent?.trim(), 'Supplier code');
        });
        document.getElementById('sgReachCopyGcode')?.addEventListener('click', function() {
            sgRsCopy(document.getElementById('sgReachGcode')?.textContent?.trim(), 'G-Code');
        });
    })();
    </script>

<link rel="stylesheet" href="/assets/css/sg-ai-editor.css?v=4">
<script src="/assets/js/sg-ai-dashboard.js?v=1"></script>
<?php require_once __DIR__ . '/footer.php'; ?>