/* Dipindah dari shop/index.php (blok #3, id=sg-marketplace) */
    /* ═════════════════════════════════════════════════════════════════
       SHOP BAYAR GG — Marketplace Layout (Light-first)
       Inspired by GoPay Games structure, original brand identity.
       ═════════════════════════════════════════════════════════════════ */
    [data-theme="light"] body {
        background:
            radial-gradient(1100px 600px at 80% -20%, rgba(31,140,255,.10), transparent 55%),
            radial-gradient(900px 500px at -10% 40%, rgba(56,212,255,.08), transparent 60%),
            #f6f9ff !important;
    }

    /* ─── Container alignment ─── */
    .tg-main { padding: 0 16px !important; max-width: 1200px !important; margin: 0 auto !important; }
    @media (min-width: 1024px) {
        .tg-main { max-width: 1200px !important; padding: 0 24px !important; margin-top: -32px !important; }
    }

    /* ─── Navbar enhancements ─── */
    .sg-nav-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
    .sg-nav-row { gap: 18px; }
    .sg-nav-menu { display:flex; align-items:center; gap:4px; flex:1; justify-content:flex-start; margin-left:18px; }
    .sg-nav-menu-link {
        display:inline-flex; align-items:center; padding:9px 14px; border-radius:10px;
        font-weight:700; font-size:.86rem; color:#3b4760; text-decoration:none;
        transition: color .2s, background .2s;
    }
    .sg-nav-menu-link:hover { color:#0a0b0d; background:#eaf2ff; }
    .sg-nav-menu-link.is-active { color:#0a4cff; background:#e6efff; }
    [data-theme="dark"] .sg-nav-menu-link { color: rgba(226,239,255,.74); }
    [data-theme="dark"] .sg-nav-menu-link:hover { color:#fff; background: rgba(56,212,255,.12); }
    [data-theme="dark"] .sg-nav-menu-link.is-active { color:#fff; background: rgba(56,212,255,.18); }

    .sg-nav-actions { display:flex; align-items:center; gap:10px; }
    .sg-nav-cta-btn {
        display:inline-flex; align-items:center; gap:8px;
        padding:10px 16px; border-radius:12px; text-decoration:none;
        font-weight:800; font-size:.85rem; letter-spacing:.1px;
        background: linear-gradient(135deg,#0a4cff,#1f8cff);
        color:#fff;
        box-shadow: 0 12px 26px -10px rgba(10,76,255,.55);
        transition: transform .15s, box-shadow .2s, filter .2s;
    }
    .sg-nav-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.05); color:#fff; }
    .sg-nav-cta-btn i { font-size:.95rem; }

    .sg-nav-burger { display:none; width:42px; height:42px; border-radius:12px; border:1px solid #d8e2f5; background:#fff; color:#0a0b0d; font-size:1.3rem; cursor:pointer; }
    .sg-nav-burger:hover { background:#eaf2ff; border-color:#bfd4ff; }
    [data-theme="dark"] .sg-nav-burger { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color:#fff; }

    .sg-nav-mobile {
        display:flex; flex-direction:column; gap:4px;
        padding:14px 4px; border-top:1px solid #e5ecf8; margin-top:12px;
    }
    .sg-nav-mobile[hidden] { display:none; }
    .sg-nav-mobile-link {
        display:inline-flex; align-items:center; gap:10px;
        padding:11px 14px; border-radius:12px; text-decoration:none;
        font-weight:700; font-size:.92rem; color:#1f2937; background:#f5f8ff;
    }
    .sg-nav-mobile-link i { color:#0a4cff; }
    .sg-nav-mobile-link.sg-nav-mobile-cta { background: linear-gradient(135deg,#16a34a,#22c55e); color:#fff; }
    .sg-nav-mobile-link.sg-nav-mobile-cta i { color:#fff; }
    [data-theme="dark"] .sg-nav-mobile { border-top-color: rgba(255,255,255,.08); }
    [data-theme="dark"] .sg-nav-mobile-link { background: rgba(255,255,255,.05); color:#e7f2ff; }

    @media (max-width: 980px) {
        .sg-nav-menu { display:none; }
        .sg-nav-cta-btn span { display:none; }
        .sg-nav-cta-btn { padding:10px 12px; }
    }
    @media (max-width: 720px) {
        .sg-nav-burger { display:inline-flex; align-items:center; justify-content:center; }
        .sg-nav-cta-btn { display:none; }
    }

    /* ─── Hero overrides for marketplace look ─── */
    [data-theme="light"] .sg-hero { padding: 40px 16px 92px !important; }
    [data-theme="light"] .sg-hero .sg-hero-grid { opacity:.16; }
    .sg-hero-title { max-width: 720px !important; }

    /* ─── Promo Banner ─── */
    .sg-promo-banner {
        position: relative; overflow: hidden;
        margin: 24px 0 28px;
        border-radius: 24px;
        padding: 32px 28px;
        background: #000000;
        color: #fff;
        box-shadow: none;
    }
    .sg-promo-banner-art { position:absolute; inset:0; pointer-events:none; }
    .sg-promo-orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.55; }
    .sg-promo-orb-1 { width:280px; height:280px; right:-80px; top:-90px; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%); }
    .sg-promo-orb-2 { width:220px; height:220px; right:140px; bottom:-100px; background: radial-gradient(circle, rgba(56,212,255,.55), transparent 70%); }
    .sg-promo-tag-1, .sg-promo-tag-2, .sg-promo-tag-3 {
        position:absolute; width:54px; height:54px; border-radius:18px;
        display:flex; align-items:center; justify-content:center;
        background: rgba(255,255,255,.15); color:#fff; font-size:1.55rem;
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border:1px solid rgba(255,255,255,.32);
        box-shadow: 0 14px 28px -10px rgba(0,30,80,.45);
    }
    .sg-promo-tag-1 { right:32px; top:32px; transform: rotate(-6deg); }
    .sg-promo-tag-2 { right:106px; top:90px; transform: rotate(8deg); width:64px; height:64px; font-size:1.7rem; background: rgba(255,255,255,.22); }
    .sg-promo-tag-3 { right:48px; bottom:30px; transform: rotate(-12deg); }
    .sg-promo-banner-body { position:relative; z-index:1; max-width: 640px; }
    .sg-promo-banner-pill {
        display:inline-flex; align-items:center; gap:7px;
        padding:6px 12px; border-radius:999px;
        background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.26);
        font-weight:800; font-size:.74rem; letter-spacing:.4px; color:#fff;
        margin-bottom:14px;
    }
    .sg-promo-banner-title { font-size: clamp(1.45rem, 2.5vw + .2rem, 2.05rem); font-weight: 900; letter-spacing:-.4px; line-height:1.1; margin: 0 0 10px; }
    .sg-promo-banner-desc { color: rgba(255,255,255,.85); font-size:.95rem; line-height:1.55; margin: 0 0 18px; max-width: 560px; }
    .sg-promo-banner-cta { display:flex; flex-wrap:wrap; gap:10px; }
    .sg-btn {
        display:inline-flex; align-items:center; gap:8px;
        padding:11px 18px; border-radius:14px;
        font-weight:800; font-size:.86rem; text-decoration:none;
        transition: transform .15s, box-shadow .2s, background .2s;
        cursor:pointer; border:none; font-family: inherit;
    }
    .sg-btn-primary { background:#fff; color:#0a4cff; box-shadow: 0 14px 30px -12px rgba(0,30,80,.4); }
    .sg-btn-primary:hover { transform: translateY(-1px); color:#0a4cff; }
    .sg-btn-ghost { background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.32); backdrop-filter: blur(10px); }
    .sg-btn-ghost:hover { background: rgba(255,255,255,.26); color:#fff; }
    @media (max-width: 720px) {
        .sg-promo-banner { padding: 24px 22px; border-radius:20px; margin: 18px 0 22px; }
        .sg-promo-tag-1, .sg-promo-tag-3 { display:none; }
        .sg-promo-tag-2 { right:14px; top:18px; width:54px; height:54px; font-size:1.3rem; }
    }

    /* ─── Section head pattern (shared) ─── */
    .sg-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:nowrap; margin-bottom:18px; }
    .sg-section-head > div:first-child { flex:1; min-width:0; }
    @media (max-width: 600px) {
        .sg-section-head { flex-wrap:wrap; }
        .sg-section-head .sg-section-link { padding: 6px 8px !important; }
    }
    .sg-section-pill {
        display:inline-flex; align-items:center; gap:7px;
        padding:5px 11px; border-radius:999px;
        font-weight:800; font-size:.72rem; letter-spacing:.35px;
        margin-bottom:8px;
    }
    .sg-pill-blue { background:#e6efff; color:#0a4cff; }
    .sg-pill-cyan { background:#e0f7ff; color:#007ea7; }
    .sg-pill-violet { background:#efe6ff; color:#6f42c1; }
    .sg-pill-green { background:#e6fbef; color:#0d8a4a; }
    .sg-pill-amber { background:#fff5e0; color:#b45309; }
    .sg-pill-orange { background:#fff0e6; color:#c2410c; }
    .sg-pill-pink { background:#ffe6f1; color:#be185d; }
    [data-theme="dark"] .sg-pill-blue { background: rgba(31,140,255,.15); color:#9ec6ff; }
    [data-theme="dark"] .sg-pill-cyan { background: rgba(56,212,255,.15); color:#9be8ff; }
    [data-theme="dark"] .sg-pill-violet { background: rgba(124,58,237,.18); color:#d8c4ff; }
    [data-theme="dark"] .sg-pill-green { background: rgba(34,197,94,.18); color:#86efac; }
    [data-theme="dark"] .sg-pill-amber { background: rgba(245,158,11,.18); color:#fde68a; }
    [data-theme="dark"] .sg-pill-orange { background: rgba(234,88,12,.18); color:#fdba74; }
    [data-theme="dark"] .sg-pill-pink { background: rgba(244,114,182,.18); color:#fbcfe8; }

    .sg-section-title { font-size: clamp(1.1rem, 1.4vw + .4rem, 1.4rem); font-weight: 900; color:#0a0b0d; letter-spacing:-.2px; margin:0 0 4px; line-height:1.2; }
    .sg-section-desc { font-size:.9rem; color:#5b6577; margin:0; line-height:1.55; max-width:560px; }
    [data-theme="dark"] .sg-section-title { color:#f4faff; }
    [data-theme="dark"] .sg-section-desc { color: rgba(226,239,255,.62); }
    .sg-section-link {
        display:inline-flex; align-items:center; gap:4px;
        padding:8px 12px; border-radius:10px;
        font-weight:800; font-size:.84rem; color:#0a4cff; text-decoration:none;
        transition: background .2s;
        white-space: nowrap;
    }
    .sg-section-link:hover { background:#eaf2ff; color:#0a4cff; }
    [data-theme="dark"] .sg-section-link { color:#9ec6ff; }
    [data-theme="dark"] .sg-section-link:hover { background: rgba(56,212,255,.12); color:#fff; }

    /* ─── Category Tabs (horizontal scroll) ─── */
    .sg-tabs-wrap { margin: 8px 0 24px; }
    .sg-tabs {
        display:flex; gap:10px; overflow-x:auto; padding: 4px 2px 12px;
        scrollbar-width: thin;
    }
    .sg-tabs::-webkit-scrollbar { height: 6px; }
    .sg-tabs::-webkit-scrollbar-thumb { background: rgba(10,76,255,.18); border-radius: 999px; }
    [data-theme="dark"] .sg-tabs::-webkit-scrollbar-thumb { background: rgba(56,212,255,.2); }
    .sg-tab {
        display:inline-flex; flex-shrink:0; align-items:center; gap:9px;
        padding:11px 16px; border-radius:14px;
        background:#fff; border:1px solid #e0e8f5; color:#1f2937;
        font-weight:800; font-size:.84rem; cursor:pointer;
        transition: all .18s ease;
        font-family:inherit;
        box-shadow: 0 6px 16px -8px rgba(10,76,255,.16);
    }
    .sg-tab i { font-size:1.05rem; color:#0a4cff; }
    .sg-tab em { font-style:normal; padding:3px 9px; border-radius:999px; background:#eef3ff; color:#0a4cff; font-size:.7rem; font-weight:800; }
    .sg-tab:hover { transform: translateY(-1px); border-color:#bfd4ff; }
    .sg-tab.is-active { background: linear-gradient(135deg,#0a4cff,#1f8cff); color:#fff; border-color: transparent; box-shadow: 0 14px 28px -10px rgba(10,76,255,.48); }
    .sg-tab.is-active i { color:#fff; }
    .sg-tab.is-active em { background: rgba(255,255,255,.22); color:#fff; }
    [data-theme="dark"] .sg-tab { background: rgba(20,38,68,.55); border-color: rgba(148,197,255,.16); color:#dbe7ff; }
    [data-theme="dark"] .sg-tab i { color:#9be8ff; }
    [data-theme="dark"] .sg-tab em { background: rgba(56,212,255,.14); color:#9be8ff; }
    [data-theme="dark"] .sg-tab.is-active { background: linear-gradient(135deg,#1f8cff,#38d4ff); border-color: transparent; color:#fff; }
    [data-theme="dark"] .sg-tab.is-active i { color:#fff; }
    [data-theme="dark"] .sg-tab.is-active em { background: rgba(255,255,255,.18); color:#fff; }

    /* ─── Catalog Sections (no card wrapper, open layout) ─── */
    .sg-catalog-sections { display:flex; flex-direction:column; gap:32px; margin: 0 0 48px; }
    .sg-section { background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; }
    [data-theme="dark"] .sg-section { background:transparent !important; border:0 !important; box-shadow:none !important; }
    .sg-product-grid { display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:14px !important; }
    @media (min-width: 560px) {
        .sg-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
    }
    @media (min-width: 761px) {
        .sg-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; }
    }
    @media (min-width: 1100px) {
        .sg-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 24px !important; }
    }

    .sg-product-card {
        position:relative;
        display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important;
        padding: 0 !important;
        background:#fff !important;
        border: 1px solid #eaeef7 !important;
        border-radius: 16px !important;
        text-decoration: none;
        color:#0a0b0d !important;
        overflow: hidden;
        min-height: auto !important;
        height: 100%;
        transition: transform .18s ease, box-shadow .25s ease, border-color .2s;
    }
    .sg-product-card:hover { transform: translateY(-3px); border-color:#bfd4ff !important; box-shadow: 0 16px 32px -16px rgba(10,76,255,.18) !important; }
    .sg-product-thumb {
        position:relative; display:flex; align-items:center; justify-content:center;
        width:100%; aspect-ratio: 1 / 1;
        background: linear-gradient(135deg, #eef4ff 0%, #e7f2ff 100%);
        overflow:hidden; padding: 0;
    }
    .sg-product-card .sg-product-thumb img {
        width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
        object-fit:cover !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: transform .35s ease;
        background:transparent;
        display:block !important;
    }
    .sg-product-card:hover .sg-product-thumb img { transform: scale(1.06); }
    .sg-product-thumb .tg-market-icon { width:100%; height:100%; border-radius:0; background: linear-gradient(135deg, #cfe1ff, #b9e1ff); color:#0a4cff; font-size:2.2rem; display:flex; align-items:center; justify-content:center; }
    .sg-product-body { display:flex !important; flex-direction:column !important; gap:4px !important; padding: 12px 14px 14px !important; min-width:0; width:100%; flex:1; justify-content:flex-start; }
    .sg-product-cat { font-size:.62rem !important; font-weight:800 !important; letter-spacing:.55px !important; color:#0a4cff !important; text-transform:uppercase; line-height:1; }
    .sg-product-name {
        font-size:.9rem !important; font-weight:800 !important; color:#0a0b0d !important;
        line-height:1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }
    .sg-product-tagline { display:none !important; }
    .sg-product-meta { display:flex; align-items:center; gap:6px; font-size:.7rem !important; color:#6b7280 !important; margin-top:6px !important; }
    .sg-product-meta strong { color:#0a4cff; font-weight:800; font-size:.74rem; }
    .sg-product-meta::before { content:''; flex-shrink:0; width:6px; height:6px; border-radius:999px; background:#22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }

    .sg-product-badge {
        position:absolute; top:10px; right:10px;
        padding:5px 10px; border-radius:999px;
        font-size:.66rem; font-weight:800; letter-spacing:.4px;
        background:#fff; color:#0a4cff; border:1px solid rgba(10,76,255,.18);
        box-shadow: 0 8px 18px -8px rgba(15,30,60,.22);
        display:inline-flex; align-items:center; gap:5px;
        z-index: 2;
    }
    .sg-product-badge::before {
        content:''; width:6px; height:6px; border-radius:999px; background: currentColor; opacity:.85;
    }
    .sg-badge-blue { background:#e6efff; color:#0a4cff; border-color: rgba(10,76,255,.18); }
    .sg-badge-violet { background:#efe6ff; color:#6d28d9; border-color: rgba(109,40,217,.2); }
    .sg-badge-green { background:#dcfce7; color:#15803d; border-color: rgba(21,128,61,.22); }
    .sg-badge-cyan { background:#cffafe; color:#0e7490; border-color: rgba(14,116,144,.22); }
    .sg-badge-amber { background:#fef3c7; color:#a16207; border-color: rgba(161,98,7,.22); }
    .sg-badge-orange { background:#ffedd5; color:#c2410c; border-color: rgba(194,65,12,.22); }
    .sg-badge-pink { background:#fce7f3; color:#be185d; border-color: rgba(190,24,93,.22); }
    .sg-badge-red { background:#fee2e2; color:#b91c1c; border-color: rgba(185,28,28,.22); }
    [data-theme="dark"] .sg-product-card { background: rgba(20,38,68,.7) !important; border-color: rgba(148,197,255,.14) !important; color:#f4faff !important; }
    [data-theme="dark"] .sg-product-card:hover { background: rgba(20,38,68,.92) !important; }
    [data-theme="dark"] .sg-product-thumb { background: linear-gradient(135deg, rgba(31,140,255,.2), rgba(56,212,255,.16)); }
    [data-theme="dark"] .sg-product-name { color:#f4faff !important; }
    [data-theme="dark"] .sg-product-tagline { color: rgba(226,239,255,.7) !important; }
    [data-theme="dark"] .sg-product-meta { color: rgba(226,239,255,.62) !important; border-top-color: rgba(148,197,255,.12) !important; }
    [data-theme="dark"] .sg-product-meta strong { color:#9ec6ff; }
    [data-theme="dark"] .sg-product-cat { color:#9ec6ff !important; }
    [data-theme="dark"] .sg-product-badge { background: rgba(15,30,56,.86); border-color: rgba(56,212,255,.32); color:#9ec6ff; }
    [data-theme="dark"] .sg-badge-blue { background: rgba(31,140,255,.18); color:#9ec6ff; }
    [data-theme="dark"] .sg-badge-violet { background: rgba(124,58,237,.22); color:#d8c4ff; }
    [data-theme="dark"] .sg-badge-green { background: rgba(34,197,94,.22); color:#86efac; }
    [data-theme="dark"] .sg-badge-cyan { background: rgba(6,182,212,.22); color:#67e8f9; }
    [data-theme="dark"] .sg-badge-amber { background: rgba(245,158,11,.22); color:#fde68a; }
    [data-theme="dark"] .sg-badge-orange { background: rgba(234,88,12,.22); color:#fdba74; }
    [data-theme="dark"] .sg-badge-pink { background: rgba(244,114,182,.22); color:#fbcfe8; }
    [data-theme="dark"] .sg-badge-red { background: rgba(239,68,68,.22); color:#fca5a5; }

    @media (max-width: 720px) {
        .sg-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
        .sg-product-name { font-size: .85rem !important; }
        .sg-product-cat { font-size: .58rem !important; letter-spacing:.5px !important; }
        .sg-product-body { padding: 10px 12px 12px !important; gap: 3px !important; }
        .sg-product-meta { font-size: .68rem !important; margin-top: 5px !important; }
        .sg-product-meta strong { font-size: .72rem !important; }
    }

    /* ─── Benefits ─── */
    .sg-benefits { margin-top: 12px; }
    .sg-benefits-head { margin-bottom: 18px; }
    .sg-benefits-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(196px,1fr)); gap:14px; }
    .sg-benefit-card {
        background:#fff; border:1px solid #eaeef7; border-radius:20px;
        padding:20px 18px; box-shadow: 0 10px 24px -16px rgba(15,30,60,.18);
        display:flex; flex-direction:column; gap:10px;
        transition: transform .15s ease, box-shadow .25s ease;
    }
    .sg-benefit-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(10,76,255,.22); border-color:#bfd4ff; }
    .sg-benefit-icon { width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; }
    .sg-benefit-icon-blue { background: linear-gradient(135deg,#0a4cff,#1f8cff); }
    .sg-benefit-icon-cyan { background: linear-gradient(135deg,#00b8ff,#7af1ff); }
    .sg-benefit-icon-green { background: linear-gradient(135deg,#10b981,#4ade80); }
    .sg-benefit-icon-amber { background: linear-gradient(135deg,#f59e0b,#fcd34d); }
    .sg-benefit-icon-violet { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
    .sg-benefit-card strong { color:#0a0b0d; font-size:.96rem; font-weight:900; }
    .sg-benefit-card p { color:#5b6577; font-size:.84rem; line-height:1.55; margin:0; }
    [data-theme="dark"] .sg-benefit-card { background: rgba(20,38,68,.7); border-color: rgba(148,197,255,.14); }
    [data-theme="dark"] .sg-benefit-card strong { color:#f4faff; }
    [data-theme="dark"] .sg-benefit-card p { color: rgba(226,239,255,.62); }

    /* ─── Track + Recent (light card style) ─── */
    .sg-section-card { padding: 22px !important; background:#fff !important; border:1px solid #eaeef7 !important; border-radius: 22px !important; box-shadow: 0 12px 30px -16px rgba(15,30,60,.18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; margin-bottom: 16px; }
    [data-theme="dark"] .sg-section-card { background: rgba(15,24,42,.78) !important; border-color: rgba(148,197,255,.12) !important; }
    .sg-track { display:flex; gap:10px; align-items:stretch; }
    .sg-track-input-wrap { position:relative; flex:1; }
    .sg-track-input-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#0a4cff; font-size:1.05rem; }
    .sg-track-input { width:100%; background:#f6f9ff !important; border:1px solid #e0e8f5 !important; padding:13px 14px 13px 40px !important; border-radius:14px !important; font-size:.92rem !important; color:#0a0b0d !important; }
    .sg-track-input:focus { border-color:#0a4cff !important; background:#fff !important; box-shadow: 0 0 0 3px rgba(10,76,255,.16) !important; }
    [data-theme="dark"] .sg-track-input { background: rgba(8,16,30,.55) !important; border-color: rgba(148,197,255,.18) !important; color: var(--text-primary) !important; }
    [data-theme="dark"] .sg-track-input-wrap i { color: var(--sg-cyan); }
    .sg-track-btn { background: linear-gradient(135deg,#0a4cff,#1f8cff) !important; padding: 0 18px !important; border-radius:14px !important; }
    @media (min-width: 1024px) {
        .tg-card-recent.sg-card-recent, .tg-card-track.sg-card-track { display: block !important; width: auto !important; vertical-align: initial !important; min-height: auto !important; }
        .tg-card-recent.sg-card-recent { margin-right: 0 !important; }
    }

    /* ─── Recent Activity Feed (marketplace look) ─── */
    .sg-recent-list .tg-rx { background:#f6f9ff !important; border-color:#e3ecfb !important; border-radius:14px !important; padding:13px 16px !important; }
    .sg-recent-list .tg-rx-prod { color:#0a0b0d !important; }
    .sg-recent-list .tg-rx-meta { color:#6b7280 !important; }
    .sg-recent-list .tg-rx-price { color:#0a4cff !important; }
    [data-theme="dark"] .sg-recent-list .tg-rx { background: rgba(8,16,30,.55) !important; border-color: rgba(148,197,255,.12) !important; }
    [data-theme="dark"] .sg-recent-list .tg-rx-price { color: var(--sg-cyan) !important; }

    /* ─── Footer (light-friendly with dark-mode kept) ─── */
    [data-theme="light"] .sg-footer { background: #ffffff !important; color: #64748b !important; }
    .sg-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; }
    @media (max-width: 880px) {
        .sg-footer-grid { grid-template-columns: 1fr 1fr !important; gap:24px !important; }
        .sg-footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
        .sg-footer-grid { grid-template-columns: 1fr !important; }
    }

    /* ─── Hide legacy tg-trust-strip (replaced) ─── */
    .tg-trust-strip { display:none !important; }

    /* ═════════════════════════════════════════════════════════════════
       Refinements — 8pt grid system, hierarchy, skeleton, tabs
       ═════════════════════════════════════════════════════════════════ */
    /* 8pt vertical rhythm */
    :root { --sg-step: 8px; --sg-radius-sm: 12px; --sg-radius-md: 16px; --sg-radius-lg: 24px; }

    /* Section spacing (compact, 8pt) */
    .sg-promo-banner { margin: 18px 0 22px !important; padding: 32px 28px !important; }
    .sg-tabs-wrap { margin: 8px 0 20px !important; }
    .sg-catalog-sections { gap: 20px !important; margin: 0 0 40px !important; }
    .sg-benefits { margin: 8px 0 40px !important; }
    .sg-section-card { margin-bottom: 20px !important; padding: 24px !important; }
    @media (max-width: 720px) {
        .sg-promo-banner { padding: 22px 18px !important; margin: 20px 0 20px !important; }
        .sg-tabs-wrap { margin: 8px 0 16px !important; }
        .sg-catalog-sections { gap: 16px !important; margin-bottom: 32px !important; }
        .sg-benefits { margin-bottom: 32px !important; }
        .sg-section-card { padding: 20px 16px !important; margin-bottom: 14px !important; }
    }

    /* Section head hierarchy */
    .sg-section-head { gap: 12px !important; margin-bottom: 16px !important; }
    .sg-section-title { font-size: clamp(1rem, 1.1vw + .4rem, 1.25rem) !important; line-height:1.25 !important; }
    .sg-section-desc { font-size: .82rem !important; line-height:1.5 !important; max-width: 480px !important; }
    .sg-section-pill { margin-bottom: 8px !important; padding: 4px 10px !important; font-size: .68rem !important; }
    .sg-section-link { flex-shrink:0; align-self:center; padding: 6px 10px !important; font-size:.8rem !important; }
    @media (max-width: 600px) {
        .sg-section-head { gap: 8px !important; margin-bottom: 14px !important; }
        .sg-section-link { align-self: flex-start; padding: 5px 8px !important; font-size:.74rem !important; }
        .sg-section-title { font-size: 1rem !important; }
        .sg-section-desc { font-size: .76rem !important; }
    }

    /* Category Tabs — non-truncating, responsive font */
    .sg-tabs {
        gap: 12px !important; padding: 4px 4px 16px !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 16px;
    }
    .sg-tabs-wrap .sg-tabs {
        scroll-snap-type: none !important;
    }
    .sg-tab {
        scroll-snap-align: start;
        gap: 10px !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
        white-space: nowrap;
    }
    .sg-tab span { font-weight: 800; }
    .sg-tab em {
        padding: 4px 10px !important; font-size: .68rem !important;
        white-space: nowrap;
    }
    @media (max-width: 720px) {
        .sg-tabs { gap: 8px !important; padding: 4px 2px 12px !important; }
        .sg-tab { padding: 10px 12px !important; font-size: .8rem !important; gap: 8px !important; }
        .sg-tab i { font-size: 1rem !important; }
        .sg-tab em { font-size: .62rem !important; padding: 3px 8px !important; }
    }

    /* Hero polish (8pt) */
    .sg-hero { padding: 48px 16px 96px !important; }
    @media (max-width: 720px) {
        .sg-hero { padding: 32px 16px 72px !important; }
        .sg-hero-badge { font-size: .72rem !important; padding: 6px 12px !important; margin-bottom: 16px !important; }
        .sg-hero-sub { margin-bottom: 16px !important; }
        .sg-hero-badges { margin-top: 16px !important; gap: 8px !important; }
    }

    /* Hero badges differentiation (color accents) */
    .sg-hero-badges span { padding: 8px 14px !important; }
    .sg-hero-badges span:nth-child(1) i { color: #7af1ff !important; }
    .sg-hero-badges span:nth-child(2) i { color: #fcd34d !important; }
    .sg-hero-badges span:nth-child(3) i { color: #c4b5fd !important; }
    .sg-hero-badges span:nth-child(4) i { color: #86efac !important; }

    /* Benefits 8pt grid */
    .sg-benefits-grid { gap: 16px !important; }
    .sg-benefit-card { padding: 24px !important; gap: 12px !important; border-radius: 20px !important; }
    .sg-benefit-icon { width: 48px !important; height: 48px !important; }

    /* Recent activity feed polish — color-differentiated badges */
    .sg-recent-list { gap: 12px !important; padding: 0 !important; max-height: none !important; overflow: visible !important; }
    .sg-recent-list .tg-rx { padding: 16px !important; gap: 16px !important; border-radius: 16px !important; align-items: center !important; }
    .sg-recent-list .tg-rx-prod { font-size: .92rem !important; font-weight: 800 !important; }
    .sg-recent-list .tg-rx-meta { font-size: .76rem !important; gap: 10px !important; }
    .sg-recent-list .tg-rx-price { font-size: .92rem !important; }
    .sg-recent-list .tg-rx-badge {
        padding: 6px 12px !important; font-size: .68rem !important;
        border-radius: 999px !important; gap: 6px;
    }
    .sg-recent-list .tg-rx-badge.success { background:#dcfce7 !important; color:#15803d !important; border-color: rgba(21,128,61,.22) !important; }
    .sg-recent-list .tg-rx-badge.processing { background:#dbeafe !important; color:#1d4ed8 !important; border-color: rgba(29,78,216,.22) !important; }
    .sg-recent-list .tg-rx-badge.pending { background:#fef3c7 !important; color:#a16207 !important; border-color: rgba(161,98,7,.22) !important; }
    .sg-recent-list .tg-rx-badge.failed { background:#fee2e2 !important; color:#b91c1c !important; border-color: rgba(185,28,28,.22) !important; }
    [data-theme="dark"] .sg-recent-list .tg-rx-badge.success { background: rgba(34,197,94,.18) !important; color:#86efac !important; }
    [data-theme="dark"] .sg-recent-list .tg-rx-badge.processing { background: rgba(59,130,246,.18) !important; color:#93c5fd !important; }
    [data-theme="dark"] .sg-recent-list .tg-rx-badge.pending { background: rgba(250,204,21,.18) !important; color:#fde68a !important; }
    [data-theme="dark"] .sg-recent-list .tg-rx-badge.failed { background: rgba(239,68,68,.18) !important; color:#fca5a5 !important; }

    /* Skeleton loader */
    @keyframes sg-shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
    .sg-skeleton-row {
        display:flex; align-items:center; gap:16px;
        padding:16px; border-radius:16px;
        background:#f6f9ff; border:1px solid #e3ecfb;
    }
    [data-theme="dark"] .sg-skeleton-row { background: rgba(8,16,30,.55); border-color: rgba(148,197,255,.12); }
    .sg-skel {
        background: linear-gradient(90deg, rgba(15,30,60,.06) 0%, rgba(15,30,60,.12) 40%, rgba(15,30,60,.06) 80%);
        background-size: 800px 100%;
        animation: sg-shimmer 1.4s linear infinite;
        border-radius: 8px;
    }
    [data-theme="dark"] .sg-skel { background: linear-gradient(90deg, rgba(148,197,255,.08) 0%, rgba(148,197,255,.16) 40%, rgba(148,197,255,.08) 80%); background-size: 800px 100%; }
    .sg-skel-circle { width:38px; height:38px; border-radius:12px; flex-shrink:0; }
    .sg-skel-lines { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
    .sg-skel-line { height:10px; border-radius:6px; }
    .sg-skel-line.w-30 { width:30%; }
    .sg-skel-line.w-40 { width:40%; }
    .sg-skel-line.w-50 { width:50%; }
    .sg-skel-line.w-60 { width:60%; }
    .sg-skel-line.w-70 { width:70%; }
    .sg-skel-line.w-80 { width:80%; }
    .sg-skel-pill { width:64px; height:22px; border-radius:999px; flex-shrink:0; }

    /* Track input refinement */
    .sg-track { gap: 12px !important; align-items: stretch !important; }
    .sg-track-input { padding: 14px 16px 14px 44px !important; font-size: .94rem !important; }
    .sg-track-btn { min-width: 132px; gap: 8px; padding: 0 22px !important; font-weight: 800; }
    @media (max-width: 560px) {
        .sg-track { flex-direction: column; gap: 12px !important; }
        .sg-track-btn { width: 100%; min-height: 50px; }
        .sg-track-btn span { display: inline; }
    }

    /* Promo banner spacing */
    .sg-promo-banner-title { margin-bottom: 12px !important; }
    .sg-promo-banner-desc { margin-bottom: 24px !important; }
    .sg-promo-banner-cta { gap: 12px !important; }
    .sg-btn { padding: 12px 20px !important; border-radius: 14px !important; }

    /* Footer hierarchy */
    .sg-footer { padding: 64px 0 32px !important; }
    .sg-footer-grid { gap: 40px !important; margin-bottom: 32px !important; }
    .sg-footer h5 { font-size: 1rem !important; margin-bottom: 16px !important; }
    .sg-footer-list { gap: 12px !important; }
    .sg-footer hr { margin: 32px 0 20px !important; }
    @media (max-width: 720px) {
        .sg-footer { padding: 48px 0 24px !important; }
        .sg-footer-grid { gap: 24px !important; margin-bottom: 24px !important; }
    }