/* ── extracted style block 0 (originally around char offset 72512) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
         input, textarea { user-select: text; -webkit-user-select: text; }
         *:focus { outline: none; }
         /* ── HIDE SCROLLBARS GLOBALLY (scrolling still works) ── */
         html { scrollbar-width: none; -ms-overflow-style: none; }
         html::-webkit-scrollbar { display: none; width: 0; height: 0; }
         *, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; }
         *::-webkit-scrollbar { display: none; width: 0; height: 0; }
         body {
         min-height: 100vh;
         font-family: 'Segoe UI', system-ui, sans-serif;
         background: #000;
         overflow-x: hidden;
         color: #fff;
         }
         body.theme-active { background: transparent; }
         body.modal-open {
         overflow: hidden;
         }
         /* body.mnt-mode alone doesn't reliably stop scroll/rubber-banding
            on mobile Safari/Chrome — the html root can still move even
            with the body locked. Lock both together. */
         html.mnt-mode, html.mnt-mode body { overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; }
         /* ── APP THEME BACKGROUND (hero/full-page) ── */
         #appThemeBg {
         position: fixed;
         inset: 0;
         z-index: -1;
         background-image: var(--app-theme-bg, none);
         background-color: var(--app-theme-color, transparent);
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-attachment: fixed;
         opacity: 0;
         transition: opacity 0.6s ease;
         pointer-events: none;
         }
         #appThemeBg.active { opacity: 1; }
         #appThemeBg::after {
         content: '';
         position: absolute; inset: 0;
         background: var(--app-theme-overlay, rgba(0,0,0,0.55));
         }
         /* Light theme text adaptation */
         /* ── HEADER ── */
         header {
         position: fixed; top: 0; left: 0; right: 0;
         z-index: 20; height: 52px;
         display: flex; align-items: center; justify-content: space-between;
         padding: 0 20px;
         background: rgba(0,0,0,0.55);
         backdrop-filter: blur(18px) saturate(180%);
         -webkit-backdrop-filter: blur(18px) saturate(180%);
         border-bottom: 1px solid rgba(255,255,255,0.07);
         }
         .left { display: flex; align-items: center; gap: 10px; }
         .hamburger {
         display: flex; flex-direction: column;
         justify-content: flex-start; align-items: flex-start;
         gap: 5px; cursor: pointer; padding: 4px;
         background: none; border: none; flex-shrink: 0;
         }
         .hamburger span {
         display: block; height: 2.5px; border-radius: 2px;
         background: rgba(255,255,255,0.75);
         transition: width 0.4s cubic-bezier(0.4,0,0.2,1), background 0.2s;
         }
         .hamburger:hover span { background: #fff; }
         .hamburger.open span:nth-child(1) { transform: translateY(0); }
         /* ── NAV DRAWER ── */
         #navOverlay {
         position: fixed; inset: 0; z-index: 300;
         background: rgba(0,0,0,0.55);
         backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
         opacity: 0; visibility: hidden;
         transition: opacity 0.25s ease;
         }
         #navOverlay.open { opacity: 1; visibility: visible; }
         #navDrawer {
         position: fixed; top: 0; left: 0; bottom: 0;
         width: 280px; max-width: 84vw;
         background: #0a0a0b;
         border-right: 1px solid rgba(255,255,255,0.08);
         z-index: 301;
         transform: translateX(-100%);
         transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
         display: flex; flex-direction: column;
         overflow: hidden;
         }
         #navDrawer.open { transform: translateX(0); }
         #navScrollBody {
         flex: 1 1 0;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         }
         .nav-head {
         display: flex; align-items: center; justify-content: space-between;
         height: 52px; flex-shrink: 0;
         padding: 0 16px 0 20px;
         border-bottom: 1px solid rgba(255,255,255,0.07);
         background: #0a0a0b;
         }
         .nav-close {
         background: none; border: none; color: rgba(255,255,255,0.5);
         font-size: 20px; line-height: 1; cursor: pointer; padding: 6px;
         transition: color 0.2s;
         }
         .nav-close:hover { color: #fff; }
         .nav-section { padding: 16px 12px; }
         .nav-section + .nav-section { border-top: 1px solid rgba(255,255,255,0.06); }
         .nav-section-title {
         font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
         text-transform: uppercase; color: rgba(255,255,255,0.32);
         padding: 0 10px 8px;
         }
         .nav-link {
         display: flex; align-items: center; gap: 12px;
         width: 100%; text-align: left;
         padding: 10px 10px; border-radius: 8px;
         background: none; border: none;
         color: rgba(255,255,255,0.78); font-size: 13.5px; font-weight: 500;
         cursor: pointer; text-decoration: none;
         transition: background 0.15s, color 0.15s;
         }
         .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
         .nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.7; }
         .nav-link-locked { position: relative; }
         .nav-link-locked .nav-lock-icon { margin-left: auto; opacity: 0.4; width: 14px; height: 14px; }
         .nav-theme-thumbs {
         margin-left: auto;
         display: flex; align-items: center;
         }
         .nav-theme-thumbs img {
         width: 22px; height: 22px;
         border-radius: 6px;
         object-fit: cover;
         border: 1.5px solid rgba(255,255,255,0.15);
         margin-left: -7px;
         box-shadow: 0 2px 6px rgba(0,0,0,0.5);
         }
         .nav-theme-thumbs img:first-child { margin-left: 0; }
         .nav-locked-blur {
         filter: blur(3px);
         opacity: 0.45;
         pointer-events: none;
         user-select: none;
         }
         .nav-locked-cta {
         margin: 6px 10px 0;
         padding: 14px 12px;
         border-radius: 10px;
         background: rgba(255,255,255,0.04);
         border: 1px solid rgba(255,255,255,0.09);
         text-align: center;
         }
         .nav-locked-cta p {
         font-size: 12px; color: rgba(255,255,255,0.5);
         margin-bottom: 10px; line-height: 1.4;
         }
         .nav-locked-cta button {
         width: 100%; padding: 9px; border-radius: 7px;
         background: rgba(163,230,53,0.12); border: 1px solid rgba(163,230,53,0.3);
         color: rgba(163,230,53,0.95); font-size: 12.5px; font-weight: 600;
         cursor: pointer; transition: background 0.2s;
         }
         .nav-locked-cta button:hover { background: rgba(163,230,53,0.2); }
         .nav-user-card {
         position: relative;
         display: flex; align-items: center; gap: 10px;
         padding: 10px; border-radius: 10px;
         background: rgba(255,255,255,0.03);
         cursor: pointer; transition: background 0.15s;
         }
         .nav-user-card:hover { background: rgba(255,255,255,0.06); }
         .nav-user-avatar {
         width: 34px; height: 34px; border-radius: 50%;
         background: linear-gradient(135deg, rgba(163,230,53,0.5), rgba(96,165,250,0.5));
         display: flex; align-items: center; justify-content: center;
         font-size: 13px; font-weight: 700; color: #000; flex-shrink: 0;
         }
         .nav-user-name { font-size: 13px; font-weight: 600; color: #fff; }
         .nav-user-email { font-size: 11px; color: rgba(255,255,255,0.4); }
         .nav-my-profile-btn {
         display: inline-flex; align-items: center;
         padding: 2px 8px; border-radius: 5px;
         background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
         color: rgba(255,255,255,0.45); font-size: 10px; font-weight: 600;
         letter-spacing: 0.03em; cursor: pointer; white-space: nowrap;
         font-family: inherit;
         transition: background 0.15s, color 0.15s;
         }
         .nav-my-profile-btn:hover { background: rgba(255,255,255,0.11); color: rgba(255,255,255,0.8); }
         .nav-stat-row {
         display: flex; justify-content: space-between; align-items: center;
         padding: 7px 10px; font-size: 12.5px; gap: 8px;
         }
         .nav-stat-label { color: rgba(255,255,255,0.5); white-space: nowrap; }
         .nav-stat-val { color: rgba(255,255,255,0.9); font-weight: 700; margin-left: 5px; }
         .nav-stat-cta {
         position: relative; overflow: hidden;
         display: inline-flex; align-items: center; gap: 4px;
         flex-shrink: 0; padding: 4px 10px; border-radius: 20px;
         border: 1px solid; cursor: pointer;
         font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
         white-space: nowrap; transition: opacity 0.2s, transform 0.15s;
         font-family: inherit;
         }
         .nav-stat-cta:hover { opacity: 0.8; transform: scale(1.03); }
         .nav-stat-cta svg { width: 10px; height: 10px; flex-shrink: 0; }
         /* Gold shimmer — Top Up */
         .cta-topup {
         background: linear-gradient(135deg, rgba(180,140,60,0.18), rgba(212,175,90,0.12));
         border-color: rgba(200,165,80,0.3);
         color: rgba(220,185,100,0.9);
         }
         .cta-topup::after {
         content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
         background: linear-gradient(120deg, transparent, rgba(220,185,100,0.18), transparent);
         transform: skewX(-18deg);
         animation: gold-shimmer 2.2s ease-in-out infinite;
         }
         @keyframes gold-shimmer { 0% { left: -60%; } 100% { left: 120%; } }
         @keyframes dcpSpin { to { transform: rotate(360deg); } }
         /* Diamond — List Now */
         .cta-list {
         background: linear-gradient(135deg, rgba(180,210,240,0.1), rgba(200,225,255,0.06));
         border-color: rgba(180,210,255,0.2);
         color: rgba(190,215,255,0.8);
         }
         .cta-list::before {
         content: ''; position: absolute; inset: 0;
         background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
         border-radius: inherit; pointer-events: none;
         }
         /* Purple gradient — Plan */
         .cta-plan-upgrade {
         background: linear-gradient(135deg, rgba(130,70,200,0.2), rgba(160,100,230,0.12));
         border-color: rgba(150,90,220,0.28);
         color: rgba(190,150,255,0.85);
         }
         .cta-plan-manage {
         background: linear-gradient(135deg, rgba(130,70,200,0.2), rgba(160,100,230,0.12));
         border-color: rgba(150,90,220,0.28);
         color: rgba(190,150,255,0.85);
         }
         .nav-notif-row { cursor: default; }
         .nav-notif-toggle {
         flex-shrink: 0; width: 34px; height: 19px; border-radius: 10px;
         background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
         position: relative; cursor: pointer;
         transition: background 0.25s, border-color 0.25s;
         }
         .nav-notif-toggle.on {
         background: rgba(163,230,53,0.25);
         border-color: rgba(163,230,53,0.4);
         }
         .nav-notif-thumb {
         position: absolute; top: 2px; left: 2px;
         width: 13px; height: 13px; border-radius: 50%;
         background: rgba(255,255,255,0.4);
         transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s;
         }
         .nav-notif-toggle.on .nav-notif-thumb {
         transform: translateX(15px);
         background: #a3e635;
         }
         .nav-notif-status {
         font-size: 10.5px; color: rgba(255,255,255,0.35);
         padding: 0 10px 4px; line-height: 1.4;
         min-height: 0; transition: opacity 0.2s;
         }
         .nav-footer { margin-top: auto; padding: 12px 20px 14px; font-size: 10px; color: rgba(255,255,255,0.2); border-top: 1px solid rgba(255,255,255,0.06); letter-spacing: 0.02em; }
         .brand { font-size: 15px; font-weight: 800; letter-spacing: -0.04em; color: #fff; user-select: none; line-height: 1; white-space: nowrap; }
         .brand span { color: rgba(163,230,53,0.55); }
         .btn-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
         .btn-login {
         position: relative; z-index: 1; overflow: hidden;
         display: inline-flex; align-items: center; gap: 8px;
         background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
         color: rgba(255,255,255,0.85); border-radius: 999px;
         padding: 4px 14px 4px 4px; font-size: 12.5px; font-weight: 600;
         letter-spacing: 0.01em; cursor: pointer;
         transition: background 0.2s, color 0.2s; white-space: nowrap;
         }
         .btn-login::after {
         content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
         background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
         transform: skewX(-18deg); animation: shimmer 1.2s ease-in-out infinite alternate;
         }
         @keyframes shimmer { 0% { left: -60%; } 100% { left: 115%; } }
         .btn-login:hover { background: rgba(255,255,255,0.1); color: #fff; }
         /* ── ANNOUNCEMENT BAR ── */
         #announcement-bar {
         position: fixed; top: 52px; left: 0; right: 0;
         z-index: 15; height: 40px;
         display: flex; align-items: center; justify-content: space-between;
         padding: 0 16px;
         background: rgba(255,255,255,0.03);
         border-bottom: 1px solid rgba(255,255,255,0.06);
         backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
         }
         .ab-left { display: flex; align-items: center; gap: 8px; }
         .ab-username { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); letter-spacing: 0.01em; }
         .ab-username::before { content: '@'; color: rgba(255,255,255,0.3); }
         .plan-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; line-height: 1.6; }
         .plan-free    { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.45); }
         .plan-starter { background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.3); color: #60a5fa; }
         .plan-growth  { background: rgba(163,230,53,0.1); border: 1px solid rgba(163,230,53,0.28); color: rgba(163,230,53,0.85); }
         .plan-pro     { background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(236,72,153,0.18)); border: 1px solid rgba(168,85,247,0.35); color: #d8b4fe; }
         .btn-upgrade {
         position: relative; overflow: hidden;
         display: inline-flex; align-items: center; gap: 6px;
         background: rgba(139,92,246,0.14);
         backdrop-filter: blur(16px) saturate(160%);
         -webkit-backdrop-filter: blur(16px) saturate(160%);
         border: 1px solid rgba(196,181,253,0.28);
         border-radius: 20px;
         padding: 5px 14px; font-size: 11px; font-weight: 600;
         letter-spacing: 0.02em; color: rgba(233,213,255,0.95); cursor: pointer;
         box-shadow: 0 0 16px rgba(139,92,246,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
         transition: box-shadow 0.3s, opacity 0.2s, transform 0.15s;
         }
         .btn-upgrade::before {
         content: ''; position: absolute; inset: 0;
         background: radial-gradient(ellipse at 30% 50%, rgba(196,181,253,0.14) 0%, transparent 70%);
         pointer-events: none;
         }
         .btn-upgrade::after {
         content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%;
         background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
         transform: skewX(-18deg); animation: shimmer-up 2.6s ease-in-out infinite;
         }
         @keyframes shimmer-up { 0% { left: -70%; } 100% { left: 130%; } }
         .btn-upgrade:hover {
         box-shadow: 0 0 22px rgba(139,92,246,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
         opacity: 0.95;
         transform: scale(1.02);
         }
         .btn-upgrade-wrap {
         position: relative;
         display: inline-flex;
         align-items: center;
         }
         /* animated svg icon inside upgrade */
         .upgrade-icon { flex-shrink: 0; display: block; }
         .upgrade-icon .star {
         transform-origin: center;
         animation: star-glow 2.8s ease-in-out infinite;
         }
         @keyframes star-glow {
         0%,100% { opacity: 0.95; filter: drop-shadow(0 0 2px rgba(196,181,253,0.4)); }
         50%      { opacity: 0.55; filter: drop-shadow(0 0 5px rgba(167,139,250,0.15)); }
         }
         .btn-manage { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 20px; padding: 5px 14px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.6); cursor: pointer; transition: background 0.2s, color 0.2s; }
         .btn-manage:hover { background: rgba(255,255,255,0.1); color: #fff; }
         /* ── HERO ── */
         .hero {
         margin-top: 92px;
         position: relative; width: 100%; overflow: hidden;
         aspect-ratio: 1 / 1;
         }
         @media (min-width: 768px) { .hero { aspect-ratio: 16 / 9; } }
         .hero-bg {
         position: absolute; inset: 0;
         background-image: url("https://m.media-amazon.com/images/I/61oe9TpcqUS._AC_UF1000,1000_QL80_.jpg");
         background-size: cover; background-position: center top;
         transition: opacity 0.6s ease;
         }
         /* Hero image stays fixed and does not swap with the user's dynamic theme. */
         .hero-overlay {
         position: absolute; inset: 0;
         background: linear-gradient(
         to bottom,
         rgba(0,0,0,0.55) 0%,
         rgba(0,0,0,0.65) 50%,
         rgba(0,0,0,0.80) 100%
         );
         }
         /* ── CREDITS VERTICAL SCROLL ── */
         .credits-window {
         position: absolute;
         left: 0; right: 0;
         overflow: hidden;
         pointer-events: none;
         z-index: 2;
         }
         .credits-track {
         position: absolute;
         top: 0;
         left: 0; right: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 0;
         text-align: center;
         }
         .cr-block {
         padding: 18px 20px 0;
         line-height: 1;
         }
         .cr-block .cr-label {
         display: block;
         font-size: 10px;
         letter-spacing: 0.14em;
         text-transform: uppercase;
         margin-bottom: 4px;
         opacity: 0.5;
         color: #fff;
         }
         .cr-block .cr-value {
         display: block;
         font-size: clamp(13px, 2vw, 17px);
         font-weight: 700;
         letter-spacing: -0.01em;
         }
         .cr-block .cr-sub {
         display: block;
         font-size: 11px;
         margin-top: 3px;
         opacity: 0.6;
         color: rgba(255,255,255,0.6);
         }
         .cr-divider {
         width: 30px; height: 1px;
         background: rgba(255,255,255,0.15);
         margin: 20px auto 0;
         }
         .cr-name    { color: #fff; }
         .cr-role    { color: rgba(163,230,53,0.92); }
         .cr-year    { color: rgba(96,165,250,0.92); }
         .cr-mission { color: rgba(251,191,36,0.88); }
         .cr-tag     { color: rgba(216,180,254,0.9); }
         .cr-solo    { color: rgba(251,113,133,0.88); }
         /* hero content */
         .hero-content {
         position: absolute; inset: 0;
         display: flex; flex-direction: column;
         align-items: center; justify-content: flex-start;
         text-align: center;
         padding: 28px 20px 24px;
         gap: 16px;
         z-index: 3;
         }
         .hero-eyebrow {
         font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
         text-transform: uppercase; color: rgba(163,230,53,0.75);
         }
         .hero-title {
         font-size: clamp(26px, 5.5vw, 58px);
         font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
         color: #fff;
         }
         .hero-title em { font-style: normal; color: rgba(163,230,53,0.85); }
         .hero-desc {
         font-size: clamp(13px, 1.6vw, 16px);
         color: rgba(255,255,255,0.55);
         max-width: 480px; line-height: 1.6;
         }
         .hero-ctas {
         display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
         margin-top: 4px;
         }
         .cta-primary {
         position: relative; overflow: hidden;
         background: #fff; color: #000;
         border: none; border-radius: 10px;
         padding: 10px 22px; font-size: 13px; font-weight: 700;
         letter-spacing: -0.01em; cursor: pointer;
         transition: transform 0.15s, box-shadow 0.15s;
         }
         .cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,255,255,0.15); }
         .cta-secondary {
         background: rgba(255,255,255,0.07);
         border: 1px solid rgba(255,255,255,0.18);
         color: rgba(255,255,255,0.8); border-radius: 10px;
         padding: 10px 22px; font-size: 13px; font-weight: 600;
         letter-spacing: -0.01em; cursor: pointer;
         transition: background 0.2s, color 0.2s;
         }
         .cta-secondary:hover { background: rgba(255,255,255,0.13); color: #fff; }
         main { position: relative; z-index: 1; min-height: 100vh; }

         /* ── VALUATION SECTION ── */
         .val-section {
           position: relative; width: 100%; overflow: hidden;
           padding: 28px 20px;
           background: rgba(0,0,0,0.7);
         }
         body.theme-active .val-section { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .val-section::before {
           content: '';
           position: absolute; inset: 0;
           background-image:
             linear-gradient(rgba(251,191,36,0.025) 1px, transparent 1px),
             linear-gradient(90deg, rgba(251,191,36,0.025) 1px, transparent 1px);
           background-size: 52px 52px;
           pointer-events: none;
         }
         .val-section::after {
           content: '';
           position: absolute; top: 0; left: 50%; transform: translateX(-50%);
           width: 700px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(251,191,36,0.22), transparent);
           pointer-events: none;
         }
         .val-inner {
           position: relative; z-index: 2;
           max-width: 1060px; margin: 0 auto;
           display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
           align-items: center;
         }
         @media (max-width: 720px) { .val-inner { grid-template-columns: 1fr; gap: 36px; } }
         .val-text-col {}
         .val-eyebrow {
           display: inline-flex; align-items: center; gap: 8px;
           font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
           text-transform: uppercase; color: rgba(251,191,36,0.75);
           margin-bottom: 18px;
         }
         .val-eyebrow::before, .val-eyebrow::after {
           content: ''; display: block; width: 24px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(251,191,36,0.4));
         }
         .val-eyebrow::after { transform: scaleX(-1); }
         .val-title {
           font-size: clamp(26px, 4vw, 44px);
           font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
           color: #fff; margin-bottom: 16px;
         }
         .val-title em { font-style: normal; color: rgba(251,191,36,0.88); }
         .val-desc {
           font-size: clamp(13px, 1.5vw, 15px);
           color: rgba(255,255,255,0.42); line-height: 1.7; margin-bottom: 28px;
         }
         .val-chips {
           display: flex; flex-wrap: wrap; gap: 10px;
         }
         .val-chip {
           display: inline-flex; align-items: center; gap: 7px;
           padding: 7px 14px; border-radius: 50px;
           background: rgba(251,191,36,0.07);
           border: 1px solid rgba(251,191,36,0.18);
           font-size: 12px; font-weight: 600; color: rgba(251,191,36,0.85);
         }
         .val-chip svg { width: 13px; height: 13px; }
         .val-card-col {
           display: flex; flex-direction: column; gap: 14px;
         }
         .val-card {
           border-radius: 16px;
           background: rgba(255,255,255,0.03);
           border: 1px solid rgba(255,255,255,0.07);
           padding: 20px 22px;
           display: flex; align-items: flex-start; gap: 16px;
           position: relative; overflow: hidden;
           transition: border-color 0.25s, transform 0.25s;
         }
         .val-card:hover { border-color: rgba(251,191,36,0.22); transform: translateX(4px); }
         .val-card::before {
           content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
           background: var(--vc-color, rgba(251,191,36,0.6));
           border-radius: 3px 0 0 3px;
         }
         .val-card-icon {
           width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
           display: flex; align-items: center; justify-content: center;
           background: var(--vc-bg, rgba(251,191,36,0.08));
           border: 1px solid var(--vc-border, rgba(251,191,36,0.16));
         }
         .val-card-icon svg { width: 18px; height: 18px; color: var(--vc-color, rgba(251,191,36,0.85)); }
         .val-card-body {}
         .val-card-title { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
         .val-card-desc { font-size: 11.5px; color: rgba(255,255,255,0.38); line-height: 1.6; }

         /* ── AUDIT SECTION ── */
         .audit-section {
           position: relative; width: 100%; overflow: hidden;
           padding: 28px 20px;
           background: rgba(6,6,8,0.75);
         }
         body.theme-active .audit-section { background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .audit-glow {
           position: absolute; top: 50%; left: 50%;
           transform: translate(-50%, -50%);
           width: 600px; height: 400px;
           background: radial-gradient(ellipse at center, rgba(96,165,250,0.07) 0%, transparent 70%);
           pointer-events: none;
         }
         .audit-inner {
           position: relative; z-index: 2;
           max-width: 1060px; margin: 0 auto;
         }
         .audit-header {
           text-align: center; margin-bottom: 24px;
         }
         .audit-eyebrow {
           display: inline-flex; align-items: center; gap: 8px;
           font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
           text-transform: uppercase; color: rgba(96,165,250,0.75);
           margin-bottom: 16px;
         }
         .audit-eyebrow::before, .audit-eyebrow::after {
           content: ''; display: block; width: 24px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(96,165,250,0.4));
         }
         .audit-eyebrow::after { transform: scaleX(-1); }
         .audit-title {
           font-size: clamp(26px, 4vw, 44px);
           font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
           color: #fff; margin-bottom: 14px;
         }
         .audit-title em { font-style: normal; color: rgba(96,165,250,0.9); }
         .audit-subtitle {
           font-size: clamp(13px, 1.5vw, 15px);
           color: rgba(255,255,255,0.4); max-width: 420px; margin: 0 auto; line-height: 1.65;
         }
         .audit-grid {
           display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
         }
         @media (max-width: 700px) { .audit-grid { grid-template-columns: 1fr; } }
         @media (min-width: 701px) and (max-width: 960px) { .audit-grid { grid-template-columns: 1fr 1fr; } }
         .audit-card {
           border-radius: 18px;
           background: rgba(255,255,255,0.028);
           border: 1px solid rgba(255,255,255,0.07);
           padding: 28px 24px;
           display: flex; flex-direction: column; gap: 14px;
           position: relative; overflow: hidden;
           transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s;
         }
         .audit-card:hover { transform: translateY(-6px); border-color: rgba(96,165,250,0.18); }
         .audit-card::after {
           content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
           background: linear-gradient(90deg, transparent, var(--ac-line, rgba(96,165,250,0.3)), transparent);
         }
         .audit-card-icon {
           width: 44px; height: 44px; border-radius: 12px;
           display: flex; align-items: center; justify-content: center;
           background: var(--ac-bg, rgba(96,165,250,0.08));
           border: 1px solid var(--ac-border, rgba(96,165,250,0.15));
         }
         .audit-card-icon svg { width: 20px; height: 20px; color: var(--ac-color, rgba(96,165,250,0.85)); }
         .audit-card-title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
         .audit-card-desc { font-size: 12px; color: rgba(255,255,255,0.38); line-height: 1.65; }
         .audit-card-badge {
           display: inline-flex; align-items: center; gap: 5px;
           padding: 4px 10px; border-radius: 50px;
           background: var(--ac-bg, rgba(96,165,250,0.08));
           border: 1px solid var(--ac-border, rgba(96,165,250,0.15));
           font-size: 10.5px; font-weight: 700;
           color: var(--ac-color, rgba(96,165,250,0.85));
           letter-spacing: 0.04em; width: fit-content;
         }
         .audit-card-badge-dot {
           width: 5px; height: 5px; border-radius: 50%;
           background: var(--ac-color, rgba(96,165,250,0.85));
           animation: pulse-dot 2s ease-in-out infinite;
         }
         @keyframes pulse-dot {
           0%, 100% { opacity: 1; transform: scale(1); }
           50% { opacity: 0.5; transform: scale(0.75); }
         }

         /* ── CATEGORIES SECTION ── */
         .cats-section {
           position: relative; width: 100%; overflow: hidden;
           padding: 28px 20px;
           background: rgba(0,0,0,0.72);
         }
         body.theme-active .cats-section { background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .cats-section::before {
           content: '';
           position: absolute; inset: 0;
           background-image:
             linear-gradient(rgba(167,139,250,0.02) 1px, transparent 1px),
             linear-gradient(90deg, rgba(167,139,250,0.02) 1px, transparent 1px);
           background-size: 64px 64px;
           pointer-events: none;
         }
         .cats-inner { max-width: 1060px; margin: 0 auto; position: relative; z-index: 2; }
         .cats-header { text-align: center; margin-bottom: 44px; }
         .cats-eyebrow {
           display: inline-flex; align-items: center; gap: 8px;
           font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
           text-transform: uppercase; color: rgba(167,139,250,0.75);
           margin-bottom: 16px;
         }
         .cats-eyebrow::before, .cats-eyebrow::after {
           content: ''; display: block; width: 24px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(167,139,250,0.4));
         }
         .cats-eyebrow::after { transform: scaleX(-1); }
         .cats-title {
           font-size: clamp(26px, 4vw, 44px);
           font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
           color: #fff; margin-bottom: 12px;
         }
         .cats-title em { font-style: normal; color: rgba(167,139,250,0.9); }
         .cats-subtitle {
           font-size: clamp(13px, 1.5vw, 15px);
           color: rgba(255,255,255,0.4); max-width: 380px; margin: 0 auto; line-height: 1.6;
         }
         .cats-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 14px;
         }
         @media (max-width: 860px) { .cats-grid { grid-template-columns: repeat(2, 1fr); } }
         @media (max-width: 460px) { .cats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
         .cat-card {
           border-radius: 18px;
           background: rgba(255,255,255,0.03);
           border: 1px solid rgba(255,255,255,0.07);
           padding: 26px 18px 22px;
           display: flex; flex-direction: column; align-items: center;
           gap: 12px; text-align: center;
           cursor: pointer; position: relative; overflow: hidden;
           transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
             border-color 0.25s, box-shadow 0.25s;
         }
         .cat-card:hover {
           transform: translateY(-7px) scale(1.02);
           border-color: var(--cc-border, rgba(167,139,250,0.22));
           box-shadow: 0 16px 40px rgba(0,0,0,0.3);
         }
         .cat-card::before {
           content: '';
           position: absolute; inset: 0;
           background: radial-gradient(ellipse at 50% 100%, var(--cc-glow, rgba(167,139,250,0.08)) 0%, transparent 65%);
           pointer-events: none;
         }
         .cat-icon {
           width: 52px; height: 52px; border-radius: 15px;
           display: flex; align-items: center; justify-content: center;
           background: var(--cc-bg, rgba(167,139,250,0.09));
           border: 1px solid var(--cc-border, rgba(167,139,250,0.18));
           margin-bottom: 2px;
         }
         .cat-icon svg { width: 24px; height: 24px; color: var(--cc-color, rgba(167,139,250,0.9)); }
         .cat-name { font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
         .cat-count {
           font-size: 10.5px; font-weight: 600;
           color: rgba(255,255,255,0.28); letter-spacing: 0.04em;
         }
         .cat-count span { color: var(--cc-color, rgba(167,139,250,0.7)); }

         /* ── TESTIMONIALS SECTION ── */
         .testi-section {
           position: relative; width: 100%; overflow: hidden;
           padding: 28px 20px;
           background: rgba(4,4,6,0.78);
         }
         body.theme-active .testi-section { background: rgba(0,0,0,0.68); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .testi-glow {
           position: absolute; top: 30%; left: 50%;
           transform: translate(-50%, -50%);
           width: 700px; height: 500px;
           background: radial-gradient(ellipse at center, rgba(251,113,133,0.06) 0%, transparent 70%);
           pointer-events: none;
         }
         .testi-inner { max-width: 1060px; margin: 0 auto; position: relative; z-index: 2; }
         .testi-header { text-align: center; margin-bottom: 44px; }
         .testi-eyebrow {
           display: inline-flex; align-items: center; gap: 8px;
           font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
           text-transform: uppercase; color: rgba(251,113,133,0.75);
           margin-bottom: 16px;
         }
         .testi-eyebrow::before, .testi-eyebrow::after {
           content: ''; display: block; width: 24px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(251,113,133,0.4));
         }
         .testi-eyebrow::after { transform: scaleX(-1); }
         .testi-title {
           font-size: clamp(26px, 4vw, 44px);
           font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
           color: #fff; margin-bottom: 12px;
         }
         .testi-title em { font-style: normal; color: rgba(251,113,133,0.9); }
         .testi-subtitle {
           font-size: clamp(13px, 1.5vw, 15px);
           color: rgba(255,255,255,0.4); max-width: 380px; margin: 0 auto; line-height: 1.65;
         }
         .testi-track-wrap { overflow: hidden; width: 100%; }
         .testi-track {
           display: flex; gap: 16px; padding: 8px 4px 16px;
           width: max-content;
           animation: testi-scroll 32s linear infinite;
         }
         .testi-track-wrap:hover .testi-track { animation-play-state: paused; }
         @keyframes testi-scroll {
           0%   { transform: translateX(0); }
           100% { transform: translateX(-50%); }
         }
         .testi-card {
           width: clamp(280px, 30vw, 360px);
           flex-shrink: 0;
           border-radius: 18px;
           background: rgba(255,255,255,0.028);
           border: 1px solid rgba(255,255,255,0.07);
           padding: 24px 22px;
           display: flex; flex-direction: column; gap: 16px;
           position: relative; overflow: hidden;
           transition: transform 0.3s ease, border-color 0.25s;
         }
         .testi-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.12); }
         .testi-card::after {
           content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(251,113,133,0.25), transparent);
         }
         .testi-stars {
           display: flex; gap: 3px;
         }
         .testi-star { width: 13px; height: 13px; color: rgba(251,191,36,0.85); }
         .testi-quote {
           font-size: 13px; line-height: 1.7;
           color: rgba(255,255,255,0.62); font-style: italic;
           position: relative;
         }
         .testi-quote::before {
           content: '"';
           position: absolute; top: -8px; left: -4px;
           font-size: 36px; font-style: normal;
           color: rgba(251,113,133,0.18);
           line-height: 1; font-weight: 900;
           pointer-events: none;
         }
         .testi-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
         .testi-avatar {
           width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
           display: flex; align-items: center; justify-content: center;
           font-size: 13px; font-weight: 800; color: #fff;
           background: var(--ta-bg, rgba(251,113,133,0.18));
           border: 1.5px solid var(--ta-border, rgba(251,113,133,0.25));
         }
         .testi-author-info {}
         .testi-author-name { font-size: 12.5px; font-weight: 700; color: #fff; }
         .testi-author-role { font-size: 11px; color: rgba(255,255,255,0.32); margin-top: 1px; }
         .testi-earned {
           font-size: 11px; font-weight: 700;
           color: rgba(163,230,53,0.8);
           margin-left: auto; white-space: nowrap;
         }

         /* ── FAQ SECTION ── */
         .faq-section {
           position: relative; width: 100%; overflow: hidden;
           padding: 28px 20px 36px;
           background: rgba(0,0,0,0.75);
         }
         body.theme-active .faq-section { background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .faq-section::after {
           content: '';
           position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
           width: 700px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
           pointer-events: none;
         }
         .faq-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
         .faq-header { text-align: center; margin-bottom: 44px; }
         .faq-eyebrow {
           display: inline-flex; align-items: center; gap: 8px;
           font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
           text-transform: uppercase; color: rgba(163,230,53,0.7);
           margin-bottom: 16px;
         }
         .faq-eyebrow::before, .faq-eyebrow::after {
           content: ''; display: block; width: 24px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(163,230,53,0.4));
         }
         .faq-eyebrow::after { transform: scaleX(-1); }
         .faq-title {
           font-size: clamp(26px, 4vw, 44px);
           font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
           color: #fff; margin-bottom: 12px;
         }
         .faq-title em { font-style: normal; color: rgba(163,230,53,0.85); }
         .faq-list { display: flex; flex-direction: column; gap: 10px; }
         .faq-item {
           border-radius: 14px;
           background: rgba(255,255,255,0.03);
           border: 1px solid rgba(255,255,255,0.07);
           overflow: hidden;
           transition: border-color 0.2s;
         }
         .faq-item.open { border-color: rgba(163,230,53,0.18); }
         .faq-q {
           width: 100%; text-align: left;
           padding: 18px 20px;
           background: none; border: none;
           display: flex; align-items: center; justify-content: space-between; gap: 14px;
           cursor: pointer; font-family: inherit;
           font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.85);
           transition: color 0.2s;
         }
         .faq-item.open .faq-q { color: #fff; }
         .faq-q-icon {
           width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
           background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
           display: flex; align-items: center; justify-content: center;
           transition: background 0.2s, transform 0.3s;
         }
         .faq-item.open .faq-q-icon {
           background: rgba(163,230,53,0.12);
           border-color: rgba(163,230,53,0.22);
           transform: rotate(45deg);
         }
         .faq-q-icon svg { width: 11px; height: 11px; color: rgba(255,255,255,0.5); }
         .faq-item.open .faq-q-icon svg { color: rgba(163,230,53,0.9); }
         .faq-a {
           display: none;
           padding: 0 20px 18px;
           font-size: 13px; color: rgba(255,255,255,0.42); line-height: 1.7;
         }
         .faq-item.open .faq-a { display: block; }
         .faq-cta {
           text-align: center; margin-top: 36px;
           font-size: 13px; color: rgba(255,255,255,0.32);
         }
         .faq-cta a {
           color: rgba(163,230,53,0.8); text-decoration: none; font-weight: 600;
           border-bottom: 1px solid rgba(163,230,53,0.2);
           transition: color 0.2s, border-color 0.2s;
         }
         .faq-cta a:hover { color: rgba(163,230,53,1); border-color: rgba(163,230,53,0.5); }
         /* ── STATS BAR ── */
         .stat-item {
         flex: 0 1 200px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 18px 24px;
         position: relative;
         gap: 4px;
         }
         .stat-item + .stat-item::before {
         content: '';
         position: absolute; left: 0; top: 20%; bottom: 20%;
         width: 1px;
         background: rgba(255,255,255,0.07);
         }
         .stat-num {
         display: block;
         width: 100%;
         text-align: center;
         font-size: clamp(18px, 4vw, 26px);
         font-weight: 800;
         letter-spacing: -0.03em;
         line-height: 1;
         background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.55));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         }
         .stat-num.sn-green  { background: linear-gradient(135deg, rgba(163,230,53,0.95), rgba(163,230,53,0.5)); -webkit-background-clip: text; background-clip: text; }
         .stat-num.sn-blue   { background: linear-gradient(135deg, #93c5fd, rgba(96,165,250,0.5)); -webkit-background-clip: text; background-clip: text; }
         .stat-num.sn-purple { background: linear-gradient(135deg, #d8b4fe, rgba(167,139,250,0.5)); -webkit-background-clip: text; background-clip: text; }
         .stat-label {
         display: block;
         width: 100%;
         text-align: center;
         font-size: 10px;
         font-weight: 500;
         letter-spacing: 0.06em;
         text-transform: uppercase;
         color: rgba(255,255,255,0.35);
         line-height: 1;
         }
         @media (max-width: 560px) {
         .stats-bar { flex-wrap: wrap; }
         .stat-item { flex: 0 1 50%; padding: 16px 12px; }
         .stat-item:nth-child(3)::before { display: none; }
         }
         /* ── AVATAR PICKER ROW ── */
         #avatar-picker::-webkit-scrollbar { display: none; }
         #avatar-picker { -ms-overflow-style: none; scrollbar-width: none; }
         /* Ensure auth modal never overflows horizontally */
         #authModal > div { overflow-x: hidden; }
         /* ── STATS AUTH GATE ── */
         .stats-wrap {
         position: relative;
         width: 100%;
         overflow: hidden;
         }
         .stats-bar {
         position: relative; z-index: 1;
         width: 100%;
         background: rgba(10,14,30,0.72);
         border-top: 1px solid rgba(255,255,255,0.06);
         border-bottom: 1px solid rgba(255,255,255,0.06);
         backdrop-filter: blur(18px) saturate(160%);
         -webkit-backdrop-filter: blur(18px) saturate(160%);
         display: flex;
         align-items: stretch;
         justify-content: center;
         padding: 0;
         overflow: hidden;
         transition: background 0.4s ease;
         }
         /* When logged in (gate hidden) — go fully dark glass, no blue tint */
         .stats-gate.hidden ~ .stats-bar {
         background: rgba(0,0,0,0.65);
         }
         .stats-gate { z-index: 6; }
         .stats-gate {
         position: absolute; inset: 0; z-index: 5;
         display: flex; align-items: center; justify-content: center;
         backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
         background: rgba(0,0,0,0.18);
         }
         .stats-gate.hidden { display: none; }
         .stats-gate-pill {
         display: flex; align-items: center; gap: 10px;
         padding: 9px 16px; border-radius: 50px;
         background: rgba(10,10,11,0.82);
         border: 1px solid rgba(255,255,255,0.1);
         box-shadow: 0 4px 24px rgba(0,0,0,0.4);
         }
         .stats-gate-pill span {
         font-size: 12px; font-weight: 500;
         color: rgba(255,255,255,0.5); white-space: nowrap;
         }
         .stats-gate-btn {
         padding: 6px 14px; border-radius: 20px;
         background: rgba(163,230,53,0.12);
         border: 1px solid rgba(163,230,53,0.28);
         color: rgba(163,230,53,0.9);
         font-size: 11.5px; font-weight: 600;
         cursor: pointer; white-space: nowrap; font-family: inherit;
         transition: background 0.18s;
         }
         .stats-gate-btn:hover { background: rgba(163,230,53,0.22); }
         /* ── HOW IT WORKS ── */
         .hiw-section {
         position: relative;
         width: 100%;
         overflow: hidden;
         background: rgba(0,0,0,0.65);
         backdrop-filter: blur(0px);
         padding: 28px 0 32px;
         }
         body.theme-active .hiw-section { background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .hiw-section::before {
         content: '';
         position: absolute; inset: 0;
         background-image:
         linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
         background-size: 60px 60px;
         pointer-events: none;
         }
         .hiw-section::after {
         content: '';
         position: absolute;
         top: 50%; left: 50%;
         transform: translate(-50%, -50%);
         width: min(900px, 120vw);
         height: min(500px, 80vw);
         background: radial-gradient(ellipse at center,
         rgba(163,230,53,0.06) 0%,
         rgba(96,165,250,0.04) 40%,
         transparent 70%);
         pointer-events: none;
         }
         .hiw-header {
         position: relative; z-index: 2;
         text-align: center;
         margin-bottom: 16px;
         padding: 0 20px;
         }
         .hiw-eyebrow {
         display: inline-flex; align-items: center; gap: 8px;
         font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
         text-transform: uppercase; color: rgba(163,230,53,0.7);
         margin-bottom: 14px;
         }
         .hiw-eyebrow::before, .hiw-eyebrow::after {
         content: ''; display: block; width: 28px; height: 1px;
         background: linear-gradient(90deg, transparent, rgba(163,230,53,0.4));
         }
         .hiw-eyebrow::after { transform: scaleX(-1); }
         .hiw-title {
         font-size: clamp(26px, 4.5vw, 48px);
         font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
         color: #fff; margin-bottom: 14px;
         }
         .hiw-title em { font-style: normal; color: rgba(163,230,53,0.85); }
         .hiw-subtitle {
         font-size: clamp(13px, 1.5vw, 15px);
         color: rgba(255,255,255,0.4); max-width: 440px;
         margin: 0 auto; line-height: 1.65;
         }
         .hiw-track-wrap {
         position: relative; z-index: 2;
         overflow: hidden; width: 100%;
         }
         .hiw-track {
         display: flex; gap: 18px;
         padding: 20px 4px;
         width: max-content;
         animation: hiw-scroll 28s linear infinite;
         }
         .hiw-track-wrap:hover .hiw-track { animation-play-state: paused; }
         @keyframes hiw-scroll {
         0%   { transform: translateX(0); }
         100% { transform: translateX(-50%); }
         }
         .hiw-card {
         width: clamp(280px, 32vw, 400px);
         aspect-ratio: 16 / 9;
         flex-shrink: 0;
         position: relative;
         border-radius: 20px;
         overflow: hidden;
         background: rgba(255,255,255,0.032);
         border: 1px solid rgba(255,255,255,0.08);
         backdrop-filter: blur(16px);
         -webkit-backdrop-filter: blur(16px);
         box-shadow:
         0 0 0 0.5px rgba(255,255,255,0.05) inset,
         0 12px 32px rgba(0,0,0,0.25);
         transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
         box-shadow 0.35s ease, border-color 0.35s ease;
         }
         .hiw-card:hover {
         transform: translateY(-8px) scale(1.025);
         border-color: rgba(255,255,255,0.15);
         box-shadow: 0 0 0 0.5px rgba(255,255,255,0.09) inset,
         0 20px 48px rgba(0,0,0,0.35);
         }
         .hiw-card::before {
         content: '';
         position: absolute; inset: 0;
         background: radial-gradient(ellipse at 50% 50%,
         var(--cg, rgba(163,230,53,0.06)) 0%, transparent 70%);
         pointer-events: none;
         }
         .hiw-card::after {
         content: '';
         position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
         background: linear-gradient(90deg, transparent, var(--cl, rgba(163,230,53,0.55)), transparent);
         }
         .hiw-card-inner {
         position: absolute; inset: 0;
         display: flex; flex-direction: column;
         align-items: center; justify-content: center;
         padding: 28px 32px; text-align: center; gap: 12px;
         }
         .hiw-step-num {
         position: absolute; top: 13px; left: 16px;
         font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
         text-transform: uppercase;
         color: var(--ca, rgba(163,230,53,0.65));
         }
         .hiw-icon-wrap {
         width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
         display: flex; align-items: center; justify-content: center;
         background: var(--ib, rgba(163,230,53,0.07));
         border: 1px solid var(--il, rgba(163,230,53,0.16));
         margin-bottom: 4px;
         }
         .hiw-icon-wrap svg { width: 24px; height: 24px; color: var(--ca, rgba(163,230,53,0.9)); }
         .hiw-card-title {
         font-size: clamp(13.5px, 1.4vw, 16px);
         font-weight: 800; letter-spacing: -0.025em; color: #fff; line-height: 1.2;
         }
         .hiw-card-desc {
         font-size: clamp(10.5px, 1vw, 12.5px);
         color: rgba(255,255,255,0.4); line-height: 1.62; max-width: 300px;
         }
         .hiw-connector {
         flex-shrink: 0; align-self: center;
         display: flex; align-items: center; gap: 5px;
         margin: 0 -4px;
         }
         .hiw-connector span {
         display: block; width: 4px; height: 4px; border-radius: 50%;
         background: rgba(255,255,255,0.1);
         }
         .hiw-connector span:nth-child(2) { opacity: 0.55; }
         .hiw-connector span:nth-child(3) { opacity: 0.25; }
         @keyframes fadeIn {
         from { opacity: 0; }
         to { opacity: 1; }
         }
         @keyframes slideUp {
         from {
         opacity: 0;
         transform: translateY(20px);
         }
         to {
         opacity: 1;
         transform: translateY(0);
         }
         }
         /* ══════════════════════════════════════════════════════════════
            ONBOARDING TOUR — full-screen, single-accent, no gamification.
            Matches #welcomeBackScreen's visual language: #06060a base,
            a soft lime radial glow, generous whitespace, restrained motion.
            ══════════════════════════════════════════════════════════════ */
         #tourModal {
         position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
         z-index: 999999;
         background:
           radial-gradient(circle at 85% 0%, rgba(163,230,53,0.08), transparent 55%),
           #06060a;
         display: none;
         overflow: hidden;
         opacity: 0; transition: opacity 0.35s ease;
         }
         #tourModal.active { display: block; opacity: 1; }
         .tour-orb {
         position: fixed; top: -140px; left: -110px; width: 420px; height: 420px; border-radius: 50%;
         background: radial-gradient(circle, rgba(163,230,53,0.12), rgba(163,230,53,0) 70%);
         filter: blur(6px); pointer-events: none;
         }
         .tour-shell {
         position: relative; max-width: 560px; margin: 0 auto;
         height: 100%; min-height: 100%;
         display: flex; flex-direction: column;
         padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
         box-sizing: border-box;
         }
         /* ── Top bar: step counter left, CTA top-right ── */
         .tour-topbar {
         flex-shrink: 0;
         display: flex; align-items: center; justify-content: space-between;
         gap: 16px;
         margin-bottom: clamp(24px, 5vh, 48px);
         }
         .tour-step-count {
         font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
         text-transform: uppercase; color: rgba(255,255,255,0.32);
         font-variant-numeric: tabular-nums;
         }
         .tour-step-count b { color: rgba(163,230,53,0.85); font-weight: 800; }
         .tour-cta {
         display: inline-flex; align-items: center; gap: 8px;
         height: 42px; padding: 0 20px;
         background: #a3e635; color: #06090c;
         border: none; border-radius: 100px;
         font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em;
         cursor: pointer; white-space: nowrap;
         box-shadow: 0 8px 24px rgba(163,230,53,0.18);
         transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
         }
         .tour-cta:hover { background: #bef264; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(163,230,53,0.26); }
         .tour-cta:active { transform: translateY(0); }
         .tour-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
         .tour-topbar-actions { display: flex; align-items: center; gap: 14px; }

         /* ── Progress rail — thin, sits under the topbar ── */
         .tour-rail {
         flex-shrink: 0;
         display: flex; gap: 6px;
         margin-bottom: clamp(28px, 6vh, 56px);
         }
         .tour-rail-seg {
         flex: 1; height: 2.5px; border-radius: 2px;
         background: rgba(255,255,255,0.09);
         overflow: hidden; position: relative;
         }
         .tour-rail-seg::after {
         content: ''; position: absolute; inset: 0;
         background: #a3e635; transform-origin: left center;
         transform: scaleX(0); transition: transform 0.5s cubic-bezier(.4,0,.2,1);
         }
         .tour-rail-seg.done::after { transform: scaleX(1); }
         .tour-rail-seg.active::after { transform: scaleX(1); }

         /* ── Body: banner + copy, vertically centered in remaining space ── */
         .tour-body {
         flex: 1 1 auto; min-height: 0;
         display: flex; flex-direction: column;
         justify-content: center;
         overflow-y: auto;
         }
         .tour-banner {
         width: 100%;
         aspect-ratio: 16 / 9;
         border-radius: 20px;
         background:
           radial-gradient(circle at 50% 35%, rgba(163,230,53,0.10), transparent 65%),
           #0a0a0f;
         border: 1px solid rgba(255,255,255,0.08);
         margin-bottom: clamp(28px, 5vh, 40px);
         display: flex; align-items: center; justify-content: center;
         overflow: hidden;
         position: relative;
         }
         /* object-fit: contain — the mascot graphic is a wide, non-square
            promotional composition, not a 1:1 asset, so `cover` would crop
            it depending on the card's exact proportions. `contain` keeps
            the whole image visible at any viewport width. */
         .tour-banner img {
         width: 100%; height: 100%; object-fit: contain; display: block;
         position: relative; z-index: 1;
         }
         /* Bottom fade — blends the image's lower edge into the banner's
            own background instead of a hard cut, so it reads as part of
            the same card surface rather than a pasted-in graphic. */
         .tour-banner::after {
         content: '';
         position: absolute; inset: 0;
         background: linear-gradient(180deg, rgba(10,10,15,0) 55%, rgba(10,10,15,0.55) 82%, #0a0a0f 100%);
         pointer-events: none;
         z-index: 2;
         }
         .tour-icon-wrap {
         width: 52px; height: 52px; border-radius: 14px;
         background: rgba(163,230,53,0.09);
         border: 1px solid rgba(163,230,53,0.22);
         display: flex; align-items: center; justify-content: center;
         margin-bottom: 22px;
         }
         .tour-icon-wrap svg { width: 24px; height: 24px; color: #a3e635; }
         .tour-title {
         font-size: clamp(26px, 4.5vw, 38px);
         font-weight: 800; letter-spacing: -0.03em; color: #fff;
         line-height: 1.12; margin: 0 0 14px;
         max-width: 480px;
         }
         .tour-desc {
         font-size: clamp(14.5px, 1.6vw, 16.5px);
         color: rgba(255,255,255,0.48); line-height: 1.65;
         margin: 0; max-width: 440px;
         }
         .tour-step {
         animation: tour-fade-up 0.45s cubic-bezier(.2,.8,.2,1) both;
         }
         @keyframes tour-fade-up {
         from { opacity: 0; transform: translateY(10px); }
         to   { opacity: 1; transform: translateY(0); }
         }
         @media (max-width: 560px) {
         .tour-shell { padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
         .tour-topbar { margin-bottom: 20px; }
         .tour-rail { margin-bottom: 24px; }
         .tour-cta span { display: none; }
         .tour-cta { width: 42px; padding: 0; justify-content: center; border-radius: 50%; }
         }
         /* ── THEME PICKER MODAL ── */
         #themeModal {
         display: none;
         position: fixed; inset: 0; z-index: 10100;
         background: rgba(0,0,0,0.92);
         backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
         align-items: center; justify-content: center;
         padding: 24px 16px;
         overflow-y: auto;
         }
         .theme-card {
         background: #000;
         border: 1px solid rgba(255,255,255,0.18);
         border-radius: 22px;
         max-width: 460px;
         width: 100%;
         max-height: 92vh;
         overflow-y: auto;
         box-shadow: 0 32px 80px rgba(0,0,0,0.9);
         padding: 28px 24px 24px;
         margin: auto;
         box-sizing: border-box;
         }
         .theme-card::-webkit-scrollbar { width: 6px; }
         .theme-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
         .theme-heading {
         font-size: clamp(20px, 4vw, 26px);
         font-weight: 800; letter-spacing: -0.03em; color: #fff;
         margin-bottom: 8px; text-align: left;
         }
         .theme-sub {
         font-size: 13px; color: rgba(255,255,255,0.45);
         line-height: 1.55; text-align: left; margin-bottom: 18px;
         max-width: 380px;
         }
         .theme-divider {
         height: 1px; background: rgba(255,255,255,0.08);
         margin: 0 -24px 18px;
         }
         .theme-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
         margin-bottom: 22px;
         }
         .theme-opt {
         position: relative;
         aspect-ratio: 3 / 4;
         border-radius: 14px;
         overflow: hidden;
         cursor: pointer;
         border: 2px solid transparent;
         background: #1a1a1e;
         transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
         }
         .theme-opt img {
         position: absolute; inset: 0;
         width: 100%; height: 100%;
         object-fit: cover;
         display: block;
         }
         .theme-opt::after {
         content: '';
         position: absolute; inset: 0;
         background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.78) 100%);
         pointer-events: none;
         }
         .theme-opt-label {
         position: absolute; left: 0; right: 0; bottom: 6px;
         z-index: 2;
         text-align: center;
         font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em;
         text-transform: uppercase; color: #fff;
         text-shadow: 0 1px 3px rgba(0,0,0,0.6);
         }
         .theme-opt-check {
         position: absolute; top: 6px; right: 6px;
         width: 20px; height: 20px; border-radius: 50%;
         background: #a78bfa;
         display: flex; align-items: center; justify-content: center;
         opacity: 0; transform: scale(0.6);
         transition: all 0.2s ease;
         z-index: 3;
         box-shadow: 0 2px 8px rgba(0,0,0,0.4);
         }
         .theme-opt-check svg { width: 11px; height: 11px; color: #fff; }
         .theme-opt:hover { transform: translateY(-2px); }
         .theme-section-label {
         font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
         text-transform: uppercase; color: rgba(255,255,255,0.35);
         margin: 18px 0 10px;
         }
         .theme-opt.color-swatch img { display: none; }
         .theme-opt.color-swatch { background: var(--swatch-bg, #000); }
         .theme-opt.color-swatch::after { display: none; }
         .theme-opt.color-swatch .theme-opt-label { color: var(--swatch-label-color, #fff); text-shadow: none; }
         .theme-opt.selected {
         border-color: #a78bfa;
         box-shadow: 0 0 0 3px rgba(167,139,250,0.28);
         }
         .theme-opt.selected .theme-opt-check {
         opacity: 1; transform: scale(1);
         }
         /* ── PREMIUM LOCK ── */
         .theme-opt.premium-locked { cursor: default; }
         .theme-opt.premium-locked:hover { transform: none; }
         .theme-opt.premium-locked img { filter: brightness(0.55) saturate(0.7); }
         .theme-opt-premium-badge {
         position: absolute; top: 6px; left: 6px; z-index: 4;
         background: linear-gradient(135deg, #f59e0b, #d97706);
         color: #fff; font-size: 7.5px; font-weight: 900;
         letter-spacing: 0.1em; text-transform: uppercase;
         padding: 3px 6px; border-radius: 5px;
         box-shadow: 0 2px 6px rgba(0,0,0,0.5);
         display: flex; align-items: center; gap: 3px;
         }
         .theme-opt-premium-badge svg { width: 8px; height: 8px; flex-shrink: 0; }
         .theme-opt.premium-locked .theme-opt-check { display: none; }
         .theme-opt-lock-icon {
         position: absolute; inset: 0; z-index: 3;
         display: flex; align-items: center; justify-content: center;
         opacity: 0; transition: opacity 0.18s;
         }
         .theme-opt.premium-locked:hover .theme-opt-lock-icon { opacity: 1; }
         .theme-opt-lock-icon svg {
         width: 28px; height: 28px; color: #fff;
         filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
         }
         .theme-use-btn {
         width: 100%; height: 50px;
         border: none; border-radius: 12px;
         background: linear-gradient(90deg, #a78bfa, #818cf8);
         color: #fff; font-size: 14.5px; font-weight: 800;
         letter-spacing: 0.01em; cursor: pointer;
         display: flex; align-items: center; justify-content: center; gap: 8px;
         font-family: inherit;
         transition: filter 0.2s ease, opacity 0.2s ease;
         }
         .theme-use-btn:disabled {
         opacity: 0.4; cursor: not-allowed;
         }
         .theme-use-btn:not(:disabled):hover { filter: brightness(1.08); }
         @media (max-width: 380px) {
         .theme-grid { gap: 7px; }
         .theme-opt-label { font-size: 8px; }
         .theme-card { padding: 22px 16px 18px; }
         .theme-divider { margin: 0 -16px 16px; }
         }

         /* ── SETTINGS SKELETON SHIMMER ── */
         @keyframes skel-shimmer {
           0%   { background-position: -400px 0; }
           100% { background-position: 400px 0; }
         }
         .skel-block {
           background: linear-gradient(90deg, #1a1a1e 25%, #252528 50%, #1a1a1e 75%);
           background-size: 800px 100%;
           animation: skel-shimmer 1.5s ease-in-out infinite;
           border-radius: 8px;
         }
         .skel-line   { height: 14px; margin-bottom: 10px; }
         .skel-line.short { width: 38%; }
         .skel-line.med   { width: 62%; }
         .skel-line.full  { width: 100%; }
         .skel-input  { height: 40px; width: 100%; margin-bottom: 18px; border-radius: 10px; }
         .skel-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
         .skel-btn    { height: 44px; width: 160px; border-radius: 10px; margin-top: 6px; }
         .skel-label  { height: 11px; width: 30%; margin-bottom: 7px; border-radius: 5px; }
         .skel-toggle { height: 26px; width: 48px; border-radius: 14px; flex-shrink: 0; }
         .skel-toggle-row {
           display: flex; align-items: center; justify-content: space-between;
           padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
         }
         .skel-toggle-text { display: flex; flex-direction: column; gap: 6px; flex: 1; margin-right: 16px; }
         .skel-section-header {
           display: flex; align-items: center; gap: 12px;
           margin-bottom: 6px;
         }
         .skel-icon { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
         .skel-title { height: 20px; width: 55%; border-radius: 7px; }
         .skel-desc { height: 12px; width: 75%; margin: 8px 0 16px; border-radius: 5px; }
         .skel-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 0 20px; }

         /* ── ORBIT SCANNER SECTION ── */
         .orbit-section {
         position: relative;
         width: 100%;
         overflow: hidden;
         padding: 32px 0 40px;
         background: #000;
         }
         body.theme-active .orbit-section { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         /* Fine dot grid background */
         .orbit-bg-grid {
         position: absolute; inset: 0; pointer-events: none;
         background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
         background-size: 32px 32px;
         }
         /* Radial glow ambient */
         .orbit-ambient {
         position: absolute; top: 50%; left: 50%;
         transform: translate(-50%, -50%);
         width: 700px; height: 700px;
         border-radius: 50%;
         background: radial-gradient(ellipse at center,
         rgba(163,230,53,0.05) 0%,
         rgba(96,165,250,0.04) 35%,
         transparent 70%);
         pointer-events: none;
         }
         /* Header */
         .orbit-header {
         position: relative; z-index: 3;
         text-align: center;
         padding: 0 24px;
         margin-bottom: 20px;
         }
         .orbit-eyebrow {
         display: inline-flex; align-items: center; gap: 10px;
         font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
         text-transform: uppercase; color: rgba(163,230,53,0.6);
         margin-bottom: 18px;
         }
         .orbit-eyebrow-dot {
         display: block; width: 4px; height: 4px; border-radius: 50%;
         background: rgba(163,230,53,0.5);
         box-shadow: 0 0 6px rgba(163,230,53,0.6);
         animation: orbit-dot-pulse 2s ease-in-out infinite;
         }
         .orbit-eyebrow-dot:last-child { animation-delay: 1s; }
         @keyframes orbit-dot-pulse {
         0%,100% { opacity: 0.5; transform: scale(1); }
         50%      { opacity: 1;   transform: scale(1.4); box-shadow: 0 0 10px rgba(163,230,53,0.7); }
         }
         .orbit-title {
         font-size: clamp(28px, 4.5vw, 52px);
         font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
         color: #fff; margin-bottom: 16px;
         }
         .orbit-title em { font-style: normal; color: rgba(163,230,53,0.85); }
         .orbit-subtitle {
         font-size: clamp(13px, 1.4vw, 15px);
         color: rgba(255,255,255,0.38); max-width: 480px;
         margin: 0 auto; line-height: 1.7;
         }
         /* ── THE ORB STAGE ── */
         .orbit-stage {
         position: relative; z-index: 2;
         width: 420px; height: 420px;
         max-width: 90vw; max-height: 90vw;
         margin: 0 auto;
         }
         /* Orbit rings */
         .orbit-ring {
         position: absolute; top: 50%; left: 50%;
         border-radius: 50%;
         border: 1px solid rgba(255,255,255,0.06);
         transform: translate(-50%, -50%);
         }
         .orbit-ring-1 { width: 44%; height: 44%; animation: orbit-spin 8s linear infinite; }
         .orbit-ring-2 { width: 68%; height: 68%; animation: orbit-spin 14s linear infinite reverse; }
         .orbit-ring-3 { width: 92%; height: 92%; animation: orbit-spin 20s linear infinite; }
         @keyframes orbit-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
         /* Nodes on rings */
         .orbit-node {
         position: absolute;
         display: flex; flex-direction: column; align-items: center; gap: 4px;
         }
         .orbit-node-pip {
         width: 7px; height: 7px; border-radius: 50%;
         background: rgba(163,230,53,0.7);
         box-shadow: 0 0 8px rgba(163,230,53,0.5), 0 0 20px rgba(163,230,53,0.2);
         animation: pip-breathe 2.4s ease-in-out infinite;
         }
         @keyframes pip-breathe {
         0%,100% { box-shadow: 0 0 6px rgba(163,230,53,0.5), 0 0 14px rgba(163,230,53,0.15); }
         50%      { box-shadow: 0 0 12px rgba(163,230,53,0.9), 0 0 28px rgba(163,230,53,0.35); }
         }
         .orbit-node-label {
         font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: rgba(255,255,255,0.35);
         white-space: nowrap; pointer-events: none;
         /* counter-rotate so text stays readable */
         }
         /* Position nodes around rings */
         .on1-a { top: -6px;   left: 50%; transform: translateX(-50%); }
         .on1-b { bottom: -6px;left: 50%; transform: translateX(-50%); }
         .on2-a { top: -6px;   left: 50%; transform: translateX(-50%); }
         .on2-b { bottom: -6px;left: 15%; }
         .on2-c { bottom: -6px;right: 15%; }
         .on3-a { top: -6px;   left: 20%; }
         .on3-b { bottom: -6px;right: 20%; }
         /* Make blue/purple some of the pip colors for variety */
         .on2-b .orbit-node-pip { background: rgba(96,165,250,0.8); box-shadow: 0 0 8px rgba(96,165,250,0.5), 0 0 20px rgba(96,165,250,0.2); animation-delay: 0.8s; }
         .on2-c .orbit-node-pip { background: rgba(167,139,250,0.8); box-shadow: 0 0 8px rgba(167,139,250,0.5), 0 0 20px rgba(167,139,250,0.2); animation-delay: 1.4s; }
         .on3-b .orbit-node-pip { background: rgba(251,191,36,0.8); box-shadow: 0 0 8px rgba(251,191,36,0.5), 0 0 20px rgba(251,191,36,0.2); animation-delay: 0.4s; }
         .on1-b .orbit-node-pip { animation-delay: 1.2s; }
         /* Scanner beam — sweeping conic */
         .orbit-scanner-beam {
         position: absolute; top: 50%; left: 50%;
         width: 92%; height: 92%;
         transform: translate(-50%, -50%);
         border-radius: 50%;
         background: conic-gradient(
         from 0deg,
         transparent 0deg,
         rgba(163,230,53,0.0) 50deg,
         rgba(163,230,53,0.08) 80deg,
         rgba(163,230,53,0.18) 90deg,
         transparent 91deg,
         transparent 360deg
         );
         animation: scanner-sweep 4s linear infinite;
         pointer-events: none;
         }
         @keyframes scanner-sweep { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
         /* Core */
         .orbit-core {
         position: absolute; top: 50%; left: 50%;
         transform: translate(-50%, -50%);
         width: 80px; height: 80px;
         display: flex; align-items: center; justify-content: center;
         }
         .orbit-core-ring {
         position: absolute; border-radius: 50%;
         border: 1px solid rgba(163,230,53,0.2);
         animation: core-pulse 3s ease-in-out infinite;
         }
         .orbit-core-ring-1 { width: 80px; height: 80px; animation-delay: 0s; }
         .orbit-core-ring-2 { width: 100px; height: 100px; animation-delay: 1.5s; border-color: rgba(163,230,53,0.1); }
         @keyframes core-pulse {
         0%,100% { transform: scale(1);    opacity: 0.6; }
         50%      { transform: scale(1.08); opacity: 1; }
         }
         .orbit-core-inner {
         position: relative; z-index: 2;
         width: 64px; height: 64px; border-radius: 50%;
         background: rgba(0,0,0,0.85);
         border: 1px solid rgba(163,230,53,0.25);
         display: flex; align-items: center; justify-content: center;
         box-shadow: 0 0 32px rgba(163,230,53,0.12), inset 0 0 20px rgba(163,230,53,0.05);
         }
         /* Readout connectors */
         .orbit-readout {
         position: absolute; display: flex; align-items: flex-start; gap: 8px;
         pointer-events: none;
         }
         .orbit-readout-tl { top: 14%; left: -12%; flex-direction: row-reverse; }
         .orbit-readout-tr { top: 14%; right: -12%; }
         .orbit-readout-bl { bottom: 14%; left: -12%; flex-direction: row-reverse; }
         .orbit-readout-br { bottom: 14%; right: -12%; }
         .orbit-readout-line {
         width: 28px; height: 1px; background: rgba(163,230,53,0.3);
         margin-top: 7px; flex-shrink: 0;
         }
         .orbit-readout-text { display: flex; flex-direction: column; gap: 2px; }
         .orbit-readout-label {
         font-size: 8px; font-weight: 600; letter-spacing: 0.12em;
         text-transform: uppercase; color: rgba(255,255,255,0.3);
         }
         .orbit-readout-val {
         font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
         }
         .ov-green  { color: rgba(163,230,53,0.85); text-shadow: 0 0 12px rgba(163,230,53,0.4); }
         .ov-white  { color: rgba(255,255,255,0.75); }
         .ov-blue   { color: rgba(96,165,250,0.85); text-shadow: 0 0 12px rgba(96,165,250,0.4); }
         .ov-red    { color: rgba(251,113,133,0.75); }
         /* Readout lines for tr/br point inward (left-side line) */
         .orbit-readout-tr .orbit-readout-line,
         .orbit-readout-br .orbit-readout-line { background: rgba(96,165,250,0.3); }
         .orbit-readout-br .orbit-readout-line { background: rgba(251,113,133,0.25); }
         .orbit-readout-bl .orbit-readout-line { background: rgba(163,230,53,0.25); }
         /* Counter-rotate labels so they stay level */
         .orbit-ring-1 .orbit-node-label { animation: counter-spin1 8s linear infinite; }
         .orbit-ring-2 .orbit-node-label { animation: counter-spin2 14s linear infinite; }
         .orbit-ring-3 .orbit-node-label { animation: counter-spin3 20s linear infinite; }
         @keyframes counter-spin1 { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
         @keyframes counter-spin2 { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
         @keyframes counter-spin3 { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
         /* Chips */
         .orbit-chips {
         position: relative; z-index: 3;
         display: flex; flex-wrap: wrap;
         justify-content: center; gap: 10px;
         margin: 20px auto 0;
         max-width: 520px;
         padding: 0 20px;
         }
         .orbit-chip {
         display: inline-flex; align-items: center; gap: 7px;
         padding: 8px 16px; border-radius: 50px;
         background: rgba(255,255,255,0.03);
         border: 1px solid rgba(255,255,255,0.08);
         backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
         }
         .orbit-chip-dot {
         width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
         }
         .chip-green  { background: rgba(163,230,53,0.7);  box-shadow: 0 0 6px rgba(163,230,53,0.4); }
         .chip-blue   { background: rgba(96,165,250,0.7);  box-shadow: 0 0 6px rgba(96,165,250,0.4); }
         .chip-purple { background: rgba(167,139,250,0.7); box-shadow: 0 0 6px rgba(167,139,250,0.4); }
         .chip-gold   { background: rgba(251,191,36,0.7);  box-shadow: 0 0 6px rgba(251,191,36,0.4); }
         .orbit-chip-label {
         font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
         color: rgba(255,255,255,0.55);
         }
         /* Mobile adjustments */
         @media (max-width: 500px) {
         .orbit-readout-tl, .orbit-readout-tr,
         .orbit-readout-bl, .orbit-readout-br { display: none; }
         .orbit-stage { width: 300px; height: 300px; }
         }
         /* ── PULSE SECTION ── */
         .pulse-section {
         position: relative; width: 100%; overflow: hidden;
         padding: 32px 0 40px; background: #000;
         }
         body.theme-active .pulse-section { background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .pulse-section::before {
         content: ''; position: absolute; inset: 0;
         background-image:
         radial-gradient(rgba(163,230,53,0.025) 1px, transparent 1px),
         radial-gradient(rgba(96,165,250,0.018) 1px, transparent 1px);
         background-size: 48px 48px, 24px 24px;
         background-position: 0 0, 12px 12px;
         pointer-events: none;
         }
         .pulse-inner {
         position: relative; z-index: 2;
         max-width: 900px; margin: 0 auto;
         padding: 0 24px;
         display: flex; flex-direction: column; align-items: center;
         }
         .pulse-eyebrow {
         display: inline-flex; align-items: center; gap: 10px;
         font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
         text-transform: uppercase; color: rgba(96,165,250,0.65);
         margin-bottom: 16px;
         }
         .pulse-eyebrow-line {
         display: block; width: 32px; height: 1px;
         background: linear-gradient(90deg, transparent, rgba(96,165,250,0.4));
         }
         .pulse-eyebrow-line:last-child { transform: scaleX(-1); }
         .pulse-title {
         font-size: clamp(26px, 4.5vw, 50px);
         font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
         color: #fff; text-align: center; margin-bottom: 12px;
         }
         .pulse-title em { font-style: normal; color: rgba(96,165,250,0.85); }
         .pulse-subtitle {
         font-size: clamp(13px, 1.4vw, 15px); color: rgba(255,255,255,0.38);
         max-width: 440px; text-align: center; line-height: 1.7; margin-bottom: 24px;
         }
         .pulse-bands { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
         .pulse-band {
         position: relative; overflow: hidden; height: 42px;
         border-radius: 12px; border: 1px solid rgba(255,255,255,0.055);
         background: rgba(255,255,255,0.018);
         }
         .pulse-band::before {
         content: ''; position: absolute; inset: 0;
         background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.022) 50%, transparent 100%);
         animation: band-sweep 4s ease-in-out infinite;
         }
         @keyframes band-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
         .pulse-band-track {
         display: flex; align-items: center;
         height: 100%; width: max-content; white-space: nowrap;
         }
         .pulse-band-track.fwd  { animation: tkr-fwd 24s linear infinite; }
         .pulse-band-track.rev  { animation: tkr-rev 20s linear infinite; }
         .pulse-band-track.fwd2 { animation: tkr-fwd 32s linear infinite; animation-delay: -12s; }
         @keyframes tkr-fwd { from { transform: translateX(0); } to { transform: translateX(-50%); } }
         @keyframes tkr-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
         .pulse-band:hover .pulse-band-track { animation-play-state: paused; }
         .pulse-item {
         display: inline-flex; align-items: center; gap: 8px;
         padding: 0 20px; height: 42px; flex-shrink: 0;
         font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
         color: rgba(255,255,255,0.38);
         border-right: 1px solid rgba(255,255,255,0.05);
         }
         .pulse-item-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
         .pulse-item-val { font-weight: 800; letter-spacing: -0.01em; }
         .pi-green  .pulse-item-dot { background: rgba(163,230,53,0.75); box-shadow: 0 0 6px rgba(163,230,53,0.45); }
         .pi-green  .pulse-item-val { color: rgba(163,230,53,0.88); }
         .pi-blue   .pulse-item-dot { background: rgba(96,165,250,0.75);  box-shadow: 0 0 6px rgba(96,165,250,0.45); }
         .pi-blue   .pulse-item-val { color: rgba(96,165,250,0.88); }
         .pi-purple .pulse-item-dot { background: rgba(167,139,250,0.75); box-shadow: 0 0 6px rgba(167,139,250,0.45); }
         .pi-purple .pulse-item-val { color: rgba(167,139,250,0.88); }
         .pi-gold   .pulse-item-dot { background: rgba(251,191,36,0.75);  box-shadow: 0 0 6px rgba(251,191,36,0.45); }
         .pi-gold   .pulse-item-val { color: rgba(251,191,36,0.88); }
         .pi-rose   .pulse-item-dot { background: rgba(251,113,133,0.75); box-shadow: 0 0 6px rgba(251,113,133,0.45); }
         .pi-rose   .pulse-item-val { color: rgba(251,113,133,0.88); }
         .pi-dim    .pulse-item-dot { background: rgba(255,255,255,0.18); }
         .pi-dim    .pulse-item-val { color: rgba(255,255,255,0.52); }
         .pulse-grid {
         width: 100%; display: grid;
         grid-template-columns: repeat(3,1fr); gap: 12px;
         }
         @media (max-width:600px) { .pulse-grid { grid-template-columns: 1fr 1fr; } }
         @media (max-width:380px) { .pulse-grid { grid-template-columns: 1fr; } }
         .pulse-feat {
         position: relative; overflow: hidden;
         padding: 18px 16px 16px; border-radius: 14px;
         border: 1px solid rgba(255,255,255,0.06);
         background: rgba(255,255,255,0.018);
         display: flex; flex-direction: column; gap: 7px;
         transition: border-color 0.25s, background 0.25s;
         }
         .pulse-feat::before {
         content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
         background: linear-gradient(90deg, transparent, var(--pf-line, rgba(163,230,53,0.35)), transparent);
         opacity: 0; transition: opacity 0.3s;
         }
         .pulse-feat:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.034); }
         .pulse-feat:hover::before { opacity: 1; }
         .pulse-feat-icon {
         width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
         display: flex; align-items: center; justify-content: center;
         background: var(--pf-bg, rgba(163,230,53,0.07));
         border: 1px solid var(--pf-border, rgba(163,230,53,0.14));
         margin-bottom: 2px;
         }
         .pulse-feat-icon svg { width: 15px; height: 15px; color: var(--pf-color, rgba(163,230,53,0.85)); }
         .pulse-feat-name { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.82); line-height: 1.2; }
         .pulse-feat-desc { font-size: 10.5px; color: rgba(255,255,255,0.32); line-height: 1.55; }
         .pulse-live { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 5px; }
         .pulse-live-dot {
         width: 6px; height: 6px; border-radius: 50%;
         background: rgba(163,230,53,0.8); box-shadow: 0 0 8px rgba(163,230,53,0.5);
         animation: live-blink 1.8s ease-in-out infinite;
         }
         @keyframes live-blink {
         0%,100% { transform: scale(1); opacity: 0.7; }
         50% { transform: scale(1.6); opacity: 1; box-shadow: 0 0 14px rgba(163,230,53,0.7); }
         }
         .pulse-live-txt {
         font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: rgba(163,230,53,0.55);
         }
         /* ── PLANS SECTION ── */
         /* ── PLANS SECTION ── */
         .plans-section {
           position: relative; width: 100%; overflow: hidden;
           padding: 72px 24px 80px;
           background: #000;
         }
         body.theme-active .plans-section { background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
         .plans-section::before {
           content: ''; position: absolute; inset: 0; pointer-events: none;
           background-image:
             linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
           background-size: 72px 72px;
         }
         .plans-section::after {
           content: ''; position: absolute; pointer-events: none;
           top: 40%; left: 50%; transform: translate(-50%, -50%);
           width: min(900px, 130vw); height: min(600px, 90vw);
           background: radial-gradient(ellipse at center,
             rgba(163,230,53,0.06) 0%, rgba(96,165,250,0.03) 45%, transparent 70%);
         }
         .plans-inner {
           position: relative; z-index: 2;
           max-width: 1080px; margin: 0 auto;
         }
         .plans-header {
           text-align: center;
           margin-bottom: 52px;
         }
         .plans-eyebrow {
           display: inline-flex; align-items: center; gap: 10px;
           font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
           text-transform: uppercase; color: rgba(163,230,53,0.7);
           margin-bottom: 16px;
         }
         .plans-eyebrow::before, .plans-eyebrow::after {
           content: ''; display: block; width: 32px; height: 1px;
           background: linear-gradient(90deg, transparent, rgba(163,230,53,0.4));
         }
         .plans-eyebrow::after { transform: scaleX(-1); }
         .plans-title {
           font-size: clamp(28px, 4.5vw, 48px);
           font-weight: 800; letter-spacing: -0.035em;
           color: #fff; line-height: 1.1; margin-bottom: 14px;
         }
         .plans-title em { font-style: normal; color: rgba(163,230,53,0.85); }
         .plans-subtitle {
           font-size: clamp(13px, 1.4vw, 15px); color: rgba(255,255,255,0.35);
           line-height: 1.75; max-width: 480px; margin: 0 auto;
         }
         /* Grid */
         .plans-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 16px;
           align-items: stretch;
         }
         @media (max-width: 900px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
         @media (max-width: 520px) { .plans-grid { grid-template-columns: 1fr; gap: 12px; } }
         .pcard {
           position: relative;
           background: rgba(255,255,255,0.025);
           border: 1px solid rgba(255,255,255,0.07);
           border-radius: 20px;
           padding: 28px 24px 24px;
           display: flex; flex-direction: column;
           gap: 0;
           transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
         }
         .pcard:hover {
           border-color: rgba(255,255,255,0.14);
           transform: translateY(-2px);
           box-shadow: 0 12px 40px rgba(0,0,0,0.4);
         }
         .pcard-starter {
           border-color: rgba(96,165,250,0.18);
           background: rgba(96,165,250,0.03);
         }
         .pcard-starter:hover { border-color: rgba(96,165,250,0.32); }
         .pcard-growth {
           border-color: rgba(163,230,53,0.22);
           background: rgba(163,230,53,0.03);
           box-shadow: 0 0 0 1px rgba(163,230,53,0.1), 0 8px 32px rgba(163,230,53,0.06);
         }
         .pcard-growth:hover { border-color: rgba(163,230,53,0.38); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(163,230,53,0.1); }
         .pcard-pro {
           border-color: rgba(168,85,247,0.2);
           background: rgba(168,85,247,0.03);
         }
         .pcard-pro:hover { border-color: rgba(168,85,247,0.36); }
         .pcard-badge {
           position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
           background: rgba(163,230,53,0.15);
           border: 1px solid rgba(163,230,53,0.32);
           border-top: none;
           border-radius: 0 0 10px 10px;
           padding: 3px 14px;
           font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
           text-transform: uppercase; color: rgba(163,230,53,0.9);
           white-space: nowrap;
         }
         .pcard-top {
           margin-bottom: 20px;
         }
         .pcard-name {
           font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
           text-transform: uppercase; color: rgba(255,255,255,0.4);
           margin-bottom: 10px;
         }
         .pcard-price {
           display: flex; align-items: baseline; gap: 3px;
           margin-bottom: 6px;
         }
         .pcard-amount {
           font-size: 40px; font-weight: 800;
           letter-spacing: -0.04em; color: rgba(255,255,255,0.92);
           line-height: 1;
         }
         .pcard-per {
           font-size: 12px; color: rgba(255,255,255,0.3);
           font-weight: 500; align-self: flex-end; padding-bottom: 4px;
         }
         .pcard-tagline {
           font-size: 12px; color: rgba(255,255,255,0.28);
           line-height: 1.5;
         }
         .pcard-divider {
           width: 100%; height: 1px;
           background: rgba(255,255,255,0.06);
           margin: 18px 0;
         }
         .pcard-pill-row {
           display: flex; gap: 7px; flex-wrap: wrap;
           margin-bottom: 16px;
         }
         .pcard-pill {
           display: inline-flex; align-items: center; gap: 4px;
           background: rgba(255,255,255,0.05);
           border: 1px solid rgba(255,255,255,0.09);
           border-radius: 100px;
           padding: 4px 10px;
           font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55);
           white-space: nowrap;
         }
         .pcard-pill-accent { color: inherit; border-color: currentColor; opacity: 0.9; }
         .pcard-features {
           list-style: none;
           display: flex; flex-direction: column; gap: 10px;
           margin-bottom: 22px;
           flex: 1;
         }
         .pcard-features li {
           display: flex; align-items: flex-start; gap: 9px;
           font-size: 12.5px; color: rgba(255,255,255,0.55);
           line-height: 1.4;
         }
         .pcard-features li.pf-dim { color: rgba(255,255,255,0.2); }
         .pf-check {
           width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
           display: flex; align-items: center; justify-content: center;
           border-radius: 50%;
           background: rgba(163,230,53,0.12);
           color: rgba(163,230,53,0.8);
           font-size: 9px; font-weight: 800;
         }
         .pf-x {
           width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
           display: flex; align-items: center; justify-content: center;
           border-radius: 50%;
           background: rgba(255,255,255,0.04);
           color: rgba(255,255,255,0.2);
           font-size: 9px; font-weight: 800;
         }
         .plan-btn {
           width: 100%; padding: 12px 16px;
           border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
           background: rgba(255,255,255,0.05);
           color: rgba(255,255,255,0.5);
           font-size: 13px; font-weight: 600;
           cursor: pointer; transition: all 0.2s;
           font-family: inherit; letter-spacing: 0.01em;
           margin-top: auto;
         }
         .plan-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.85); }
         .plan-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.08); }
         .plan-btn-blue {
           background: rgba(96,165,250,0.1);
           border-color: rgba(96,165,250,0.28);
           color: #60a5fa;
         }
         .plan-btn-blue:hover { background: rgba(96,165,250,0.18); border-color: rgba(96,165,250,0.45); color: #93c5fd; }
         .plan-btn-green {
           background: rgba(163,230,53,0.12);
           border-color: rgba(163,230,53,0.3);
           color: rgba(163,230,53,0.9);
         }
         .plan-btn-green:hover { background: rgba(163,230,53,0.2); border-color: rgba(163,230,53,0.5); color: #a3e635; }
         .plan-btn-pro {
           background: rgba(168,85,247,0.1);
           border-color: rgba(168,85,247,0.26);
           color: #d8b4fe;
         }
         .plan-btn-pro:hover { background: rgba(168,85,247,0.2); border-color: rgba(168,85,247,0.44); }
         .plans-note {
           text-align: center; margin-top: 28px;
           font-size: 11.5px; color: rgba(255,255,255,0.18);
           letter-spacing: 0.01em; line-height: 1.6;
         }
         /* ══════════════════════════════════════════════════════════
         GLOBAL BOOT OVERLAY — covers the entire viewport until the
         first auth check + user data fetch resolves, so nothing
         (login button, stats, name, theme) is ever seen mid-flicker.
         ══════════════════════════════════════════════════════════ */
         #appBootOverlay {
         position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
         z-index: 999999;
         background: #06060a;
         display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 0; overflow: hidden;
         transition: opacity 0.5s ease, visibility 0.5s ease;
         }
         #appBootOverlay.boot-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

         /* ══════════════════════════════════════════════════════════
         MAINTENANCE OVERLAY — full-screen, undismissable takeover
         shown when the app is offline for maintenance. Deliberately
         reuses the boot overlay's exact tokens (bg, lime accent,
         glitter field, mark glyph) so it reads as the same product
         paused, not a separate "error page" bolted on. No close
         button, no nav, no scroll — the only control is the notify
         form. Sits above everything, including the boot overlay.
         ══════════════════════════════════════════════════════════ */
         #maintenanceOverlay {
         position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
         z-index: 9999999;
         background: #050508;
         display: none;
         flex-direction: column; align-items: center; justify-content: center;
         overflow: hidden; padding: 24px;
         }
         #maintenanceOverlay.mnt-active { display: flex; }
         body.mnt-mode { overflow: hidden; }

         /* Banned/suspended + appeal overlays share the exact same visual
            system as #maintenanceOverlay (same z-index tier, same
            full-screen takeover), just toggled independently since a user
            could theoretically be suspended without the site being in
            maintenance mode, or vice versa. */
         #acctStatusOverlay, #acctAppealOverlay {
           position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
           z-index: 9999998;
           background: #050508;
           display: none;
           flex-direction: column; align-items: center; justify-content: center;
           padding: 24px;
         }
         /* Suspended/banned status screen: static, no scroll or movement,
            matching #maintenanceOverlay behavior exactly. */
         #acctStatusOverlay { overflow: hidden; }
         /* Appeal form has a textarea + file chips + submit controls that
            can exceed viewport height on small screens, so it keeps vertical
            scroll. Horizontal must stay locked though — overflow-y:auto
            alone leaves overflow-x defaulted to visible, and the 900px-wide
            .mnt-glow decoration inside was overflowing sideways and letting
            the whole screen scroll/move horizontally. */
         #acctAppealOverlay { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
         #acctStatusOverlay.mnt-active, #acctAppealOverlay.mnt-active { display: flex; }
         .mnt-active-hidden { display: none; }
         .mnt-status-pill.acct-suspended { background: rgba(255,177,78,0.08); border-color: rgba(255,177,78,0.28); color: #ffb14e; }
         .mnt-status-pill.acct-banned { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #f87171; }
         .mnt-status-pill.acct-banned .mnt-status-dot { background: #f87171; box-shadow: 0 0 0 0 rgba(248,113,113,0.55); }
         .acct-appeal-file-chip {
           display: flex; align-items: center; gap: 6px;
           background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
           border-radius: 8px; padding: 5px 9px; font-size: 12px; color: rgba(255,255,255,0.75);
         }
         .acct-appeal-file-chip img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
         .acct-appeal-file-chip button {
           background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer;
           font-size: 14px; line-height: 1; padding: 0 0 0 4px;
         }
         .acct-appeal-file-chip button:hover { color: #f87171; }

         .mnt-glow {
         position: absolute; top: 50%; left: 50%; width: 900px; height: 900px;
         transform: translate(-50%, -50%);
         background: radial-gradient(circle, rgba(163,230,53,0.07) 0%, rgba(163,230,53,0) 62%);
         pointer-events: none;
         }
         .mnt-content {
         position: relative; z-index: 1;
         display: flex; flex-direction: column; align-items: center;
         gap: 1.7rem; max-width: 440px; width: 100%; text-align: center;
         animation: boot-fade-up .7s ease both;
         }
         .mnt-status-pill {
         display: inline-flex; align-items: center; gap: 7px;
         padding: 6px 13px 6px 10px; border-radius: 100px;
         background: rgba(255,177,78,0.08); border: 1px solid rgba(255,177,78,0.28);
         font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
         color: #ffb14e;
         }
         .mnt-status-dot {
         width: 7px; height: 7px; border-radius: 50%; background: #ffb14e; flex-shrink: 0;
         box-shadow: 0 0 0 0 rgba(255,177,78,0.55);
         animation: mnt-pulse 1.8s ease-out infinite;
         }
         @keyframes mnt-pulse {
         0%   { box-shadow: 0 0 0 0 rgba(255,177,78,0.55); }
         70%  { box-shadow: 0 0 0 9px rgba(255,177,78,0); }
         100% { box-shadow: 0 0 0 0 rgba(255,177,78,0); }
         }
         .mnt-mark { display: flex; align-items: center; gap: 0.55rem; }
         .mnt-mark-glyph {
         width: 46px; height: 46px; border-radius: 13px;
         background: #14140f; border: 1px solid rgba(255,255,255,0.12);
         display: flex; align-items: center; justify-content: center;
         overflow: hidden;
         }
         .mnt-mark-glyph img {
         width: 100%; height: 100%; object-fit: cover;
         }
         .mnt-mark-text {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -0.02em;
         }
         .mnt-mark-text span { color: #a3e635; }
         .mnt-heading {
         font-size: 1.6rem; font-weight: 800; color: #f1f1f3; letter-spacing: -0.01em;
         line-height: 1.25; margin: 0;
         }
         .mnt-body {
         font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.5);
         margin: 0; max-width: 380px;
         }
         .mnt-eta {
         font-size: 13px; font-weight: 700; color: #a3e635;
         }
         .mnt-notify-row {
         display: flex; align-items: center; gap: 8px; width: 100%;
         margin-top: 0.3rem;
         }
         .mnt-notify-input {
         flex: 1; min-width: 0; height: 46px; padding: 0 16px;
         background: #0b0b0f; border: 1px solid rgba(255,255,255,0.12); border-radius: 11px;
         color: #f1f1f3; font-size: 14px; font-family: inherit; outline: none;
         transition: border-color .15s;
         }
         .mnt-notify-input::placeholder { color: rgba(255,255,255,0.3); }
         .mnt-notify-input:focus { border-color: rgba(163,230,53,0.5); }
         .mnt-notify-btn {
         height: 46px; padding: 0 20px; border-radius: 11px; border: none;
         background: #a3e635; color: #0a0d02; font-weight: 800; font-size: 14px;
         font-family: inherit; white-space: nowrap; cursor: pointer;
         transition: background .15s, transform .1s;
         }
         .mnt-notify-btn:hover { background: #b6f24e; }
         .mnt-notify-btn:active { transform: scale(0.97); }
         .mnt-notify-btn:disabled { opacity: 0.6; cursor: default; }

         /* ═══ Slow-network banner — small non-blocking toast, bottom-
            center on mobile, bottom-right on wider screens. Sits above
            everything except the full-screen maintenance/banned overlays
            (z-index 9999997 < 9999998/9999999) so it never fights those
            for visibility, but still floats over modals, nav, etc. ═══ */
         #slowNetOverlay {
           position: fixed; left: 50%; bottom: 20px;
           transform: translateX(-50%);
           z-index: 9999997;
           width: calc(100% - 32px); max-width: 380px;
           pointer-events: none;
         }
         #slowNetOverlay.slownet-hidden { display: none; }
         .slownet-card {
           pointer-events: auto;
           display: flex; align-items: flex-start; gap: 10px;
           background: #0e0e12; border: 1px solid rgba(255,177,78,0.28);
           border-radius: 14px; padding: 13px 14px;
           box-shadow: 0 10px 30px rgba(0,0,0,0.45);
           animation: slownet-in .35s cubic-bezier(.2,.8,.2,1) both;
         }
         @keyframes slownet-in {
           from { opacity: 0; transform: translateY(10px); }
           to   { opacity: 1; transform: translateY(0); }
         }
         .slownet-dot {
           width: 8px; height: 8px; border-radius: 50%; background: #ffb14e;
           flex-shrink: 0; margin-top: 5px;
           box-shadow: 0 0 0 0 rgba(255,177,78,0.55);
           animation: mnt-pulse 1.8s ease-out infinite;
         }
         .slownet-text { flex: 1; min-width: 0; }
         .slownet-title {
           font-size: 13.5px; font-weight: 700; color: #f1f1f3;
           letter-spacing: -0.01em; margin: 0 0 3px;
         }
         .slownet-body {
           font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.55);
           margin: 0;
         }
         .slownet-retry {
           display: flex; align-items: center; gap: 5px; flex-shrink: 0;
           margin-top: 1px; padding: 5px 10px; border-radius: 8px;
           background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
           color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 600;
           font-family: inherit; cursor: pointer;
           transition: background .15s, border-color .15s;
         }
         .slownet-retry:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }
         .slownet-retry.slownet-checking svg { animation: slownet-spin .7s linear infinite; }
         @keyframes slownet-spin { to { transform: rotate(360deg); } }

         @media (min-width: 640px) {
           #slowNetOverlay { left: auto; right: 24px; bottom: 24px; transform: none; }
         }
         .mnt-notify-msg {
         font-size: 12.5px; font-weight: 600; min-height: 16px;
         }
         .mnt-notify-msg.mnt-ok   { color: #a3e635; }
         .mnt-notify-msg.mnt-err  { color: #ff8080; }
         @media (max-width: 420px) {
         .mnt-notify-row { flex-direction: column; }
         .mnt-notify-btn { width: 100%; }
         }
         .boot-content {
         position: relative; display: flex; flex-direction: column; align-items: center;
         gap: 1.6rem; animation: boot-fade-up .6s ease both;
         }
         @keyframes boot-fade-up {
         from { opacity: 0; transform: translateY(10px); }
         to   { opacity: 1; transform: translateY(0); }
         }
         .boot-mark-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
         .boot-mark {
         display: flex; align-items: center; gap: 0.5rem;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -0.02em;
         }
         .boot-mark span { color: #a3e635; }
         .boot-mark-glyph {
         width: 46px; height: 46px; border-radius: 13px;
         background: #14140f;
         border: 1px solid rgba(255,255,255,0.12);
         display: flex; align-items: center; justify-content: center;
         margin-bottom: 2px;
         overflow: hidden;
         }
         .boot-mark-glyph img {
         width: 100%; height: 100%; object-fit: cover;
         }
         .boot-tagline {
         font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.34);
         letter-spacing: 0.02em; text-align: center;
         }
         /* Progress ring replaces the old plain spinner — same footprint,
            richer look, still purely CSS (no JS progress wiring needed).
            Classic reliable technique: rotate the whole SVG continuously,
            keep the dash pattern fixed on the circle itself — animating
            stroke-dashoffset AND transform on the same <circle> at once
            made the arc look broken/glitchy, so the circle only ever
            gets a static partial dash now and the SVG wrapper spins. */
         .boot-ring-wrap { position: relative; width: 54px; height: 54px; }
         .boot-ring-wrap svg {
         width: 100%; height: 100%;
         animation: boot-ring-spin 1s linear infinite;
         }
         .boot-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 3; }
         .boot-ring-fill {
         fill: none; stroke: #a3e635; stroke-width: 3; stroke-linecap: round;
         stroke-dasharray: 38 113; /* ~25% of the 151px circumference visible as one clean arc */
         }
         @keyframes boot-ring-spin {
         from { transform: rotate(0deg); }
         to   { transform: rotate(360deg); }
         }
         /* ── Falling glitter — tiny CSS-only squares, no libraries. Each
            one drifts down from above the mark, spinning, then fades out
            near the bottom of its fall. Pure transform/opacity animation —
            cheap on mobile. ── */
         .boot-glitter-field {
         position: absolute; inset: 0; overflow: hidden; pointer-events: none;
         }
         .boot-glitter {
         position: absolute; top: -20px;
         width: 4px; height: 4px;
         background: #a3e635;
         opacity: 0;
         animation-name: boot-glitter-fall;
         animation-timing-function: ease-in;
         animation-iteration-count: infinite;
         }
         /* Each particle gets its own horizontal start position (--gx),
            drift target (--gtx), fall distance (--gy), size, delay and
            duration via inline custom properties set in HTML below —
            keeps this to one shared keyframe instead of 12 near-duplicate
            animations. */
         @keyframes boot-glitter-fall {
         0%   { transform: translate(var(--gx, 0), 0) rotate(0deg) scale(1); opacity: 0; }
         12%  { opacity: 1; }
         80%  { opacity: 1; }
         100% { transform: translate(var(--gtx, 0), var(--gy, 260px)) rotate(420deg) scale(0.4); opacity: 0; }
         }
         .boot-status-row {
         display: flex; flex-direction: column; align-items: center; gap: 6px;
         width: min(260px, 78vw);
         }
         .boot-status-text {
         font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.4);
         letter-spacing: 0.03em; text-transform: uppercase;
         }
         .boot-skel-col {
         display: flex; flex-direction: column; gap: 9px; align-items: center;
         width: min(240px, 76vw); margin-top: 4px;
         }
         @keyframes boot-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
         .boot-skel-line {
         height: 8px; width: 100%; border-radius: 6px;
         background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%);
         background-size: 200% 100%; animation: boot-shimmer 1.3s infinite;
         }
         .boot-skel-line.w60 { width: 60%; }
         .boot-skel-line.w40 { width: 40%; }
         @keyframes boot-spin { to { transform: rotate(360deg); } }
         @media (max-width: 420px) {
           .boot-mark { font-size: 1.6rem; }
         }

         /* ══════════════════════════════════════════════════════════════
            WELCOME BACK — full-screen takeover for returning users
            ══════════════════════════════════════════════════════════════ */
         #welcomeBackScreen {
         position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
         z-index: 999998;
         background:
           radial-gradient(circle at 15% 0%, rgba(163,230,53,0.09), transparent 55%),
           #06060a;
         display: none;
         overflow: hidden;
         opacity: 0; transition: opacity 0.35s ease;
         }
         #welcomeBackScreen.active { display: block; opacity: 1; }
         .wb-orb {
         position: fixed; top: -120px; right: -100px; width: 380px; height: 380px; border-radius: 50%;
         background: radial-gradient(circle, rgba(163,230,53,0.14), rgba(163,230,53,0) 70%);
         filter: blur(6px); pointer-events: none;
         }
         /* ── Shell: full-height column. Only the middle (objectives)
              section scrolls; the greeting/earned-today header and the
              CTA button stay pinned so the layout never jumps or gets
              buried under a long objectives list. ── */
         .wb-shell {
         position: relative; max-width: 480px; margin: 0 auto;
         height: 100%; min-height: 100%;
         display: flex; flex-direction: column;
         }
         .wb-sticky-top {
         flex-shrink: 0;
         padding: 30px 20px 4px;
         }
         .wb-sticky-bottom {
         flex-shrink: 0;
         padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
         background: linear-gradient(to top, #06060a 55%, rgba(6,6,10,0));
         }
         .wb-obj-scroll {
         flex: 1 1 auto; min-height: 0;
         overflow-y: auto; -webkit-overflow-scrolling: touch;
         padding: 0 20px;
         }
         .wb-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 16px; animation: wb-fade-up .5s ease both; }
         .wb-avatar {
         width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
         background: linear-gradient(155deg, rgba(163,230,53,0.24), rgba(163,230,53,0.06));
         border: 1.5px solid rgba(163,230,53,0.3);
         display: flex; align-items: center; justify-content: center;
         font-size: 22px; font-weight: 800; color: #a3e635;
         background-size: cover; background-position: center;
         }
         .wb-hello { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.45); }
         .wb-name { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-top: 1px; }
         .wb-date {
         font-size: 11px; font-weight: 700; color: rgba(163,230,53,0.85); letter-spacing: 0.04em;
         text-transform: uppercase; margin-top: 6px;
         }
         @keyframes wb-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

         .wb-earn-card {
         background: linear-gradient(135deg, rgba(163,230,53,0.14), rgba(163,230,53,0.03));
         border: 1px solid rgba(163,230,53,0.25); border-radius: 18px;
         padding: 16px 18px 14px; text-align: center; margin-bottom: 20px;
         animation: wb-fade-up .5s ease .05s both;
         }
         .wb-earn-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
         .wb-earn-amt { font-size: 30px; font-weight: 800; color: #a3e635; margin-top: 4px; font-variant-numeric: tabular-nums; }

         .wb-obj-header { margin-bottom: 14px; animation: wb-fade-up .5s ease .1s both; }
         .wb-obj-title { font-size: 16px; font-weight: 800; color: #fff; }
         .wb-obj-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

         .wb-obj-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
         .wb-skel-obj {
         height: 84px; border-radius: 16px;
         background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%);
         background-size: 200% 100%; animation: boot-shimmer 1.4s ease-in-out infinite;
         border: 1px solid rgba(255,255,255,.05);
         }

         .wb-obj-card {
         background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
         border-radius: 16px; padding: 15px 16px;
         animation: wb-fade-up .45s ease both;
         transition: border-color .2s, background .2s;
         }
         .wb-obj-card.is-complete { border-color: rgba(163,230,53,0.35); background: rgba(163,230,53,0.06); }
         .wb-obj-card.is-claimed { opacity: 0.72; }
         .wb-obj-row1 { display: flex; align-items: flex-start; gap: 12px; }
         .wb-obj-icon {
         width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
         background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
         display: flex; align-items: center; justify-content: center;
         transition: background .2s, color .2s;
         }
         .wb-obj-card.is-complete .wb-obj-icon { background: rgba(163,230,53,0.16); color: #a3e635; }
         .wb-obj-mid { flex: 1; min-width: 0; }
         .wb-obj-label { font-size: 13.5px; font-weight: 700; color: #f5f5fa; }
         .wb-obj-desc { font-size: 11.5px; color: rgba(255,255,255,0.4); margin-top: 2px; line-height: 1.4; }
         .wb-obj-reward {
         font-size: 12.5px; font-weight: 800; color: #a3e635; flex-shrink: 0;
         background: rgba(163,230,53,0.1); border-radius: 10px; padding: 5px 9px;
         white-space: nowrap;
         }
         .wb-obj-progress-wrap { margin-top: 12px; }
         .wb-obj-progress-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
         .wb-obj-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #84cc16, #a3e635); transition: width .4s ease; }
         .wb-obj-progress-text { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.38); margin-top: 6px; text-align: right; }
         .wb-obj-claim-btn {
         width: 100%; margin-top: 12px; background: rgba(163,230,53,0.16); border: 1px solid rgba(163,230,53,0.4);
         color: #a3e635; font-size: 12.5px; font-weight: 800; border-radius: 10px; padding: 9px;
         cursor: pointer; font-family: inherit; transition: background .15s;
         }
         .wb-obj-claim-btn:hover { background: rgba(163,230,53,0.26); }
         .wb-obj-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .wb-obj-claimed-tag {
         width: 100%; margin-top: 12px; text-align: center; font-size: 12px; font-weight: 700;
         color: rgba(163,230,53,0.7); display: flex; align-items: center; justify-content: center; gap: 6px;
         }

         .wb-continue-btn {
         width: 100%; background: #a3e635; border: none; border-radius: 14px;
         padding: 15px; font-size: 14.5px; font-weight: 800; color: #0a0a0e;
         display: flex; align-items: center; justify-content: center; gap: 8px;
         cursor: pointer; font-family: inherit;
         box-shadow: 0 10px 30px -8px rgba(163,230,53,0.4);
         }
         .wb-continue-btn:hover { filter: brightness(1.05); }

         @media (max-width: 420px) {
           .wb-name { font-size: 18px; }
           .wb-earn-amt { font-size: 26px; }
         }

         /* Auto Generate button — purple glitter, no function yet */
         .ai-autogen-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 700;
            font-family: inherit;
            letter-spacing: 0.02em;
            color: #f3e8ff;
            background: linear-gradient(135deg, #7c3aed, #a855f7 45%, #d946ef 100%);
            border: 1px solid rgba(216,180,254,0.5);
            border-radius: 10px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 4px 16px -4px rgba(168,85,247,0.6);
         }
         .ai-autogen-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
               radial-gradient(circle at 15% 30%, rgba(255,255,255,0.9) 0.5px, transparent 1px),
               radial-gradient(circle at 40% 70%, rgba(255,255,255,0.8) 0.6px, transparent 1px),
               radial-gradient(circle at 65% 20%, rgba(255,255,255,0.9) 0.5px, transparent 1px),
               radial-gradient(circle at 80% 60%, rgba(255,255,255,0.7) 0.6px, transparent 1px),
               radial-gradient(circle at 25% 85%, rgba(255,255,255,0.8) 0.5px, transparent 1px),
               radial-gradient(circle at 90% 85%, rgba(255,255,255,0.9) 0.6px, transparent 1px),
               radial-gradient(circle at 55% 45%, rgba(255,255,255,0.7) 0.5px, transparent 1px);
            background-size: 100% 100%;
            animation: ai-glitter-shift 2.4s linear infinite;
            pointer-events: none;
         }
         .ai-autogen-btn span { position: relative; z-index: 1; display:inline-flex; align-items:center; gap:6px; }
         @keyframes ai-glitter-shift {
            0%   { opacity: 0.5; transform: translateY(0px); }
            50%  { opacity: 1;   transform: translateY(-1px); }
            100% { opacity: 0.5; transform: translateY(0px); }
         }

/* ── extracted style block 1 (originally around char offset 223826) ── */
:root {
               --mp-bg: #050508;
               --mp-surface: #0b0b0f;
               --mp-surface-raised: #111116;
               --mp-border: rgba(255,255,255,0.07);
               --mp-border-hover: rgba(255,255,255,0.14);
               --mp-text: #f1f1f3;
               --mp-text-sec: rgba(255,255,255,0.55);
               --mp-text-muted: rgba(255,255,255,0.3);
               --mp-accent: #a3e635;
               --mp-accent-muted: rgba(163,230,53,0.15);
               --mp-accent-border: rgba(163,230,53,0.3);
               --mp-radius-sm: 10px;
               --mp-radius: 14px;
               --mp-radius-lg: 18px;
               --mp-radius-xl: 24px;
               --mp-shadow: 0 8px 30px rgba(0,0,0,0.5);
               --mp-transition: 0.18s ease;
               }
               #marketplaceOverlay {
               /* Solid fallback color when no theme image is active. */
               background: var(--mp-bg);
               backdrop-filter: blur(10px) saturate(140%);
               -webkit-backdrop-filter: blur(10px) saturate(140%);
               color: var(--mp-text);
               }
               /* When a theme image/color is active, let it show through at the
                  same strength as the rest of the landing page sections
                  (~30% image visible / 70% dark overlay) instead of the
                  near-opaque black that was hiding it here. */
               body.theme-active #marketplaceOverlay {
               background: rgba(0,0,0,0.7);
               backdrop-filter: blur(4px) saturate(140%);
               -webkit-backdrop-filter: blur(4px) saturate(140%);
               }
               /* ── Filter/search bar ── */
               #mpFilterBar {
               flex-shrink: 0;
               background: rgba(5,5,8,0.92);
               backdrop-filter: blur(18px) saturate(140%);
               -webkit-backdrop-filter: blur(18px) saturate(140%);
               border-bottom: 1px solid var(--mp-border);
               padding: 10px 16px 0;
               position: relative;
               z-index: 50;
               }
               #mpSearchRow {
               display: flex;
               align-items: center;
               gap: 10px;
               padding-bottom: 10px;
               }
               .mp-search-wrap {
               flex: 1;
               position: relative;
               }
               .mp-search-wrap input {
               width: 100%;
               background: var(--mp-surface-raised);
               border: 1px solid var(--mp-border);
               border-radius: 30px;
               padding: 10px 36px 10px 40px;
               color: #fff;
               font-size: 14px;
               font-family: inherit;
               outline: none;
               transition: border-color var(--mp-transition), box-shadow var(--mp-transition);
               }
               .mp-search-wrap input::placeholder { color: var(--mp-text-muted); font-size: 13px; }
               .mp-search-wrap input:focus {
               border-color: var(--mp-accent-border);
               box-shadow: 0 0 0 4px rgba(163,230,53,0.06);
               }
               .mp-search-icon {
               position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
               pointer-events: none; color: var(--mp-text-muted); width: 15px; height: 15px;
               }
               .mp-search-clear {
               position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
               background: rgba(255,255,255,0.08); border: none; border-radius: 50%;
               width: 24px; height: 24px; cursor: pointer; display: none;
               align-items: center; justify-content: center; color: var(--mp-text-sec);
               }
               .mp-search-clear:hover { background: rgba(255,255,255,0.18); color: #fff; }
               .mp-search-clear svg { width: 12px; height: 12px; }
               .mp-search-suggest {
               display: none; position: fixed; z-index: 10050;
               background: #18181c; border: 1px solid rgba(255,255,255,0.14);
               border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.7);
               overflow: hidden; max-height: 340px; overflow-y: auto;
               }
               .mp-search-suggest.active { display: block; }
               .suggest-empty { padding: 18px 16px; font-size: 13px; color: var(--mp-text-muted); text-align: center; }
               .suggest-item {
               display: flex; align-items: center; gap: 10px;
               width: 100%; padding: 11px 14px;
               background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
               cursor: pointer; text-align: left; font-family: inherit; color: var(--mp-text);
               transition: background 0.13s;
               }
               .suggest-item:last-of-type { border-bottom: none; }
               .suggest-item:hover { background: rgba(255,255,255,0.06); }
               .suggest-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
               .suggest-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
               .suggest-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
               .suggest-title mark { background: rgba(163,230,53,0.18); color: #a3e635; border-radius: 3px; padding: 0 2px; }
               .suggest-sub { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: capitalize; }
               .suggest-price { font-size: 12px; font-weight: 700; color: #a3e635; flex-shrink: 0; }
               .suggest-footer { padding: 8px 14px; font-size: 11px; color: rgba(255,255,255,0.25); text-align: center; border-top: 1px solid rgba(255,255,255,0.06); }
               .mp-si { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: none; border-bottom: 1px solid var(--mp-border); cursor: pointer; text-align: left; font-family: inherit; color: var(--mp-text); transition: background var(--mp-transition); }
               .mp-si:hover { background: rgba(255,255,255,0.05); }
               .mp-si-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
               .mp-si-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
               .mp-si-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .mp-si-title mark { background: var(--mp-accent-muted); color: var(--mp-accent); border-radius: 3px; padding: 0 1px; }
               .mp-si-sub { font-size: 11px; color: var(--mp-text-muted); text-transform: capitalize; }
               .mp-si-price { font-size: 12px; font-weight: 700; color: var(--mp-accent); flex-shrink: 0; }
               .mp-si-empty { padding: 14px; font-size: 13px; color: var(--mp-text-muted); text-align: center; }
               /* AI Search button inside search row — glassy purple with glitter sparkles */
               #mpAiSearchBtn {
               position: relative; overflow: hidden;
               background: rgba(139,92,246,0.16);
               backdrop-filter: blur(14px) saturate(160%);
               -webkit-backdrop-filter: blur(14px) saturate(160%);
               border: 1px solid rgba(196,181,253,0.32);
               border-radius: 24px; padding: 8px 16px 8px 12px;
               color: rgba(233,213,255,0.95);
               font-size: 13px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
               display: flex; align-items: center; gap: 6px; flex-shrink: 0;
               box-shadow: 0 0 14px rgba(139,92,246,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
               transition: box-shadow var(--mp-transition), transform var(--mp-transition), opacity var(--mp-transition);
               font-family: inherit;
               }
               #mpAiSearchBtn::before {
               content: ''; position: absolute; inset: 0;
               background: radial-gradient(ellipse at 25% 40%, rgba(196,181,253,0.16) 0%, transparent 70%);
               pointer-events: none;
               }
               #mpAiSearchBtn::after {
               content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%;
               background: linear-gradient(120deg, transparent, rgba(255,255,255,0.32), transparent);
               transform: skewX(-18deg); animation: mp-ai-shimmer 2.6s ease-in-out infinite;
               pointer-events: none;
               }
               @keyframes mp-ai-shimmer { 0% { left: -70%; } 100% { left: 130%; } }
               #mpAiSearchBtn:hover {
               box-shadow: 0 0 22px rgba(139,92,246,0.42), inset 0 1px 0 rgba(255,255,255,0.12);
               transform: scale(1.03);
               }
               #mpAiSearchBtn:active { opacity: 0.9; transform: scale(0.98); }
               .mp-ai-icon { width: 16px; height: 16px; flex-shrink: 0; display: block; }
               .mp-ai-spark-main { transform-origin: center; animation: mp-ai-twinkle-main 2.2s ease-in-out infinite; }
               .mp-ai-spark-sm1 { transform-origin: center; animation: mp-ai-twinkle-sm 1.8s ease-in-out infinite 0.3s; }
               .mp-ai-spark-sm2 { transform-origin: center; animation: mp-ai-twinkle-sm 1.6s ease-in-out infinite 0.9s; }
               @keyframes mp-ai-twinkle-main {
               0%, 100% { opacity: 1;    transform: scale(1)    rotate(0deg); }
               50%       { opacity: 0.65; transform: scale(0.88) rotate(8deg); }
               }
               @keyframes mp-ai-twinkle-sm {
               0%, 100% { opacity: 0.4; transform: scale(0.7); }
               50%       { opacity: 1;   transform: scale(1.15); }
               }
               /* AI Search results panel */
               #mpAiSearchPanel {
               margin: 10px 0 16px;
               background: rgba(139,92,246,0.06);
               border: 1px solid rgba(196,181,253,0.22);
               border-radius: 16px;
               padding: 12px 14px 14px;
               }
               #mpAiSearchPanelInner {
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
               }
               #mpAiSearchTitle {
               font-size: 13px; font-weight: 700; color: #f0e6ff; letter-spacing: 0.2px;
               }
               #mpAiSearchClose {
               background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 10px; width: 32px; height: 32px; flex-shrink: 0;
               display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.6);
               }
               #mpAiSearchClose:hover { background: rgba(255,255,255,0.12); color: #fff; }
               #mpAiSearchClose svg { width: 14px; height: 14px; }
               #mpAiSearchReply {
               margin-top: 10px; font-size: 13px; color: rgba(240,230,255,0.85); line-height: 1.5;
               display: none;
               }
               #mpAiSearchReply.active { display: block; }
               #mpAiSearchReply.is-loading { color: rgba(240,230,255,0.5); font-style: italic; }
               #mpAiSearchReply.no-match { color: rgba(255,205,140,0.85); }
               #mpAiSearchResults {
               margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px;
               }
               /* Filter chips row — horizontal scroll, no wrap */
               #mpChipsRow {
               display: flex; align-items: center; gap: 8px;
               padding-bottom: 10px;
               overflow-x: auto; overflow-y: hidden;
               -webkit-overflow-scrolling: touch;
               scrollbar-width: none;
               }
               #mpChipsRow::-webkit-scrollbar { display: none; }
               .mp-chip {
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: 24px; padding: 6px 14px; font-size: 12px; font-weight: 600;
               color: var(--mp-text-sec); cursor: pointer; transition: all var(--mp-transition);
               font-family: inherit; white-space: nowrap; display: flex; align-items: center;
               gap: 6px; user-select: none; flex-shrink: 0;
               }
               .mp-chip:hover { border-color: var(--mp-border-hover); background: rgba(255,255,255,0.04); color: #fff; }
               .mp-chip.active { background: var(--mp-accent-muted); border-color: var(--mp-accent-border); color: var(--mp-accent); font-weight: 700; }
               .mp-chip.active-alt { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.35); color: #60a5fa; font-weight: 700; }
               .mp-chip svg { flex-shrink: 0; }
               .mp-chip-caret { flex-shrink: 0; opacity: 0.6; margin-left: -2px; }
               /* Price popover */
               .mp-price-wrap { position: relative; }
               .mp-price-popover {
               display: none; position: fixed;
               width: min(300px, calc(100vw - 32px)); background: #18181c;
               border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
               box-shadow: 0 16px 48px rgba(0,0,0,0.7); padding: 16px; z-index: 10050;
               }
               .mp-price-popover.active { display: block; }
               .mp-pp-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--mp-text-sec); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
               .mp-pp-close { background: rgba(255,255,255,0.08); border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--mp-text-sec); cursor: pointer; }
               .mp-pp-close svg { width: 11px; height: 11px; }
               .mp-pp-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
               .mp-slider-track { position: relative; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; margin: 24px 4px 10px; }
               .mp-slider-range { position: absolute; top: 0; bottom: 0; background: var(--mp-accent); border-radius: 4px; }
               .mp-range-input { position: absolute; top: -8px; left: 0; width: 100%; height: 20px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; }
               .mp-range-input::-webkit-slider-thumb { pointer-events: auto; appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--mp-accent); border: 3px solid #0b0b0f; cursor: pointer; }
               .mp-range-input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--mp-accent); border: 3px solid #0b0b0f; cursor: pointer; }
               .mp-slider-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--mp-text-muted); margin-bottom: 16px; }
               .mp-exact-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
               .mp-exact-field { display: flex; flex-direction: column; gap: 4px; width: 100%; }
               .mp-exact-field span:first-child { font-size: 10px; color: var(--mp-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
               .mp-input-prefix { display: flex; align-items: center; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 8px; padding: 0 8px; width: 100%; }
               .mp-input-prefix:focus-within { border-color: var(--mp-accent-border); }
               .mp-input-prefix span { font-size: 12px; color: var(--mp-text-muted); }
               .mp-input-prefix input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-family: inherit; font-size: 13px; padding: 8px 6px; width: 100%; }
               .mp-input-prefix input::-webkit-outer-spin-button, .mp-input-prefix input::-webkit-inner-spin-button { -webkit-appearance: none; }
               .mp-exact-dash { display: none; }
               .mp-pp-actions { display: flex; gap: 8px; }
               .mp-pp-btn { flex: 1; border-radius: 8px; padding: 9px 0; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: all var(--mp-transition); }
               .mp-pp-btn.ghost { background: transparent; border-color: var(--mp-border); color: var(--mp-text-sec); }
               .mp-pp-btn.ghost:hover { border-color: var(--mp-border-hover); color: #fff; }
               .mp-pp-btn.primary { background: var(--mp-accent); color: #0b0b0f; }
               .mp-pp-btn.primary:hover { filter: brightness(1.08); }
               /* Active filter tags row — horizontal scroll */
               #mpActiveTags {
               display: none; align-items: center; gap: 6px;
               padding: 0 16px 10px;
               background: rgba(5,5,8,0.92);
               overflow-x: auto; overflow-y: hidden;
               -webkit-overflow-scrolling: touch;
               scrollbar-width: none;
               flex-wrap: nowrap;
               }
               #mpActiveTags::-webkit-scrollbar { display: none; }
               /* JS renders .active-filter-tag and .tag-remove-btn */
               .active-filter-tag {
               display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
               background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.25);
               border-radius: 20px; padding: 4px 6px 4px 11px;
               font-size: 11px; font-weight: 600; color: rgba(163,230,53,0.85);
               white-space: nowrap;
               }
               .tag-remove-btn {
               background: rgba(163,230,53,0.12); border: none; border-radius: 50%;
               width: 18px; height: 18px; cursor: pointer; color: rgba(163,230,53,0.7);
               font-size: 14px; line-height: 1; display: flex; align-items: center;
               justify-content: center; padding: 0; transition: all 0.15s; flex-shrink: 0;
               font-family: inherit;
               }
               .tag-remove-btn:hover {
               background: rgba(239,68,68,0.25); color: #f87171;
               border: 1px solid rgba(239,68,68,0.3);
               }
               /* Legacy aliases kept for safety */
               .mp-active-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 4px 10px 4px 12px; font-size: 11px; font-weight: 600; color: var(--mp-text-sec); }
               .mp-tag-rm { background: rgba(255,255,255,0.1); border: none; border-radius: 50%; width: 16px; height: 16px; cursor: pointer; color: var(--mp-text-sec); font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0; transition: all var(--mp-transition); }
               .mp-tag-rm:hover { background: rgba(239,68,68,0.3); color: #f87171; }
               /* Scrollable body */
               #mpBody { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; }
               .mp-results { max-width: 1200px; margin: 0 auto 12px; font-size: 12px; color: var(--mp-text-muted); font-weight: 500; padding: 16px 20px 0; }
               .mp-results strong { color: var(--mp-text-sec); font-weight: 700; }
               .mp-grid-wrap { padding: 0 14px 80px; }
               .mp-grid {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
               gap: 14px;
               row-gap: 20px;
               max-width: 1200px;
               margin: 0 auto;
               }
               /* ── Boosted row ──
                  Grouped by type, one mini-grid per type, never mixed.
                  Two columns on phone (50/50, no scroll), widening via the
                  same auto-fill pattern as the main grid on larger screens
                  so it scales naturally instead of needing its own set of
                  breakpoints. Hidden entirely via JS (display:none) when
                  there are no boosted listings at all. */
               #mpBoostedRow {
               max-width: 1200px;
               margin: 0 auto 26px;
               padding: 0 14px;
               display: flex;
               flex-direction: column;
               gap: 22px;
               }
               .mp-boosted-group-title {
               display: flex; align-items: center; gap: 6px;
               font-size: 12px; font-weight: 800; letter-spacing: .04em;
               text-transform: uppercase; color: #e5b84b;
               margin-bottom: 10px;
               }
               .mp-boosted-group-title svg { width: 14px; height: 14px; flex-shrink: 0; }
               .mp-boosted-grid {
               display: grid;
               grid-template-columns: repeat(2, 1fr);
               gap: 12px;
               }
               @media (min-width: 640px) {
                 .mp-boosted-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
               }
               /* ── Native ad slots — inserted every N listings by
                  mpRenderCards. Full-width, own rounded/curved frame so the
                  ad network's default iframe styling never touches the
                  page's own design; the iframe itself supplies isolated
                  atOptions scope per slot (see mpBuildAdCard). ── */
               .sr-ad-slot {
               grid-column: 1 / -1;
               display: flex; align-items: center; justify-content: center;
               background: var(--sr-surface, #0d0d12);
               border: 1px solid var(--sr-line, rgba(255,255,255,0.08));
               border-radius: 14px;
               padding: 14px;
               position: relative;
               overflow: hidden;
               }
               .sr-ad-slot::before {
               content: 'Advertisement';
               position: absolute; top: 6px; left: 12px;
               font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
               color: rgba(255,255,255,0.25);
               }
               .sr-ad-slot iframe {
               border: none; border-radius: 10px; display: block;
               overflow: hidden;
               }
               .sr-ad-slot.sr-ad-banner { padding: 10px; }
               /* ── Seller-promo card — inserted into the marketplace feed
                  at listing #5, then every 15 listings after that (see
                  mpRenderCards' SELLER_PROMO_FIRST/SELLER_PROMO_REPEAT).
                  Full-width row like .sr-ad-slot, but themed with the real
                  site accent (--mp-accent, #a3e635) rather than a plain
                  CSS `lime` keyword — promotes listing on the platform
                  itself, so it should look native to the design, not like
                  an ad unit. ── */
               .sr-seller-promo {
               grid-column: 1 / -1;
               display: flex;
               background: #0d0d0d;
               border-radius: 20px;
               overflow: hidden;
               box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
               }
               .sr-seller-promo-inner {
               display: flex;
               flex-direction: column;
               width: 100%;
               }
               .sr-seller-promo-media {
               position: relative;
               width: 100%;
               padding-top: 32%;
               background-size: cover;
               background-position: center;
               background-repeat: no-repeat;
               }
               .sr-seller-promo-media::after {
               content: '';
               position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.7) 100%);
               }
               .sr-seller-promo-badge {
               position: absolute; top: 14px; right: 14px;
               background: rgba(255,255,255,0.08);
               backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
               border: 1px solid rgba(255,255,255,0.15);
               border-radius: 20px;
               padding: 5px 12px;
               color: #fff;
               font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
               z-index: 1;
               }
               .sr-seller-promo-body {
               padding: 22px 22px 20px;
               }
               .sr-seller-promo-title {
               margin: 0 0 10px; font-size: 21px; font-weight: 800;
               letter-spacing: 0.02em; color: #fff; line-height: 1.2;
               }
               .sr-seller-promo-accent {
               width: 44px; height: 4px; border-radius: 2px;
               background: var(--mp-accent, #a3e635);
               margin-bottom: 14px;
               animation: sr-promo-accent-slide 1.8s ease-in-out infinite alternate;
               }
               @keyframes sr-promo-accent-slide {
                 0%   { transform: translateX(0); }
                 100% { transform: translateX(26px); }
               }
               .sr-seller-promo-desc {
               margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #a8a8b8;
               }
               .sr-seller-promo-cta {
               display: flex; align-items: center; justify-content: center; gap: 8px;
               width: 100%;
               padding: 14px 20px;
               background: linear-gradient(110deg,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 14%, #14150f) 0%,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 14%, #14150f) 30%,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 30%, #14150f) 45%,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 42%, #14150f) 50%,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 30%, #14150f) 55%,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 14%, #14150f) 70%,
                 color-mix(in srgb, var(--mp-accent, #a3e635) 14%, #14150f) 100%);
               background-size: 220% 100%;
               color: #fff;
               border: 1.5px solid color-mix(in srgb, var(--mp-accent, #a3e635) 45%, transparent);
               border-radius: 14px;
               font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
               cursor: pointer;
               animation: sr-promo-shimmer 2.6s ease-in-out infinite;
               transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
               }
               .sr-seller-promo-cta:hover {
               transform: translateY(-2px);
               box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px color-mix(in srgb, var(--mp-accent, #a3e635) 25%, transparent);
               border-color: color-mix(in srgb, var(--mp-accent, #a3e635) 80%, transparent);
               }
               @keyframes sr-promo-shimmer {
                 0%   { background-position: 220% 0; }
                 100% { background-position: -20% 0; }
               }
               @media (min-width: 640px) {
                 .sr-seller-promo-inner { flex-direction: row; align-items: stretch; }
                 .sr-seller-promo-media { width: 42%; padding-top: 0; }
                 .sr-seller-promo-body { width: 58%; display: flex; flex-direction: column; justify-content: center; }
               }
               /* ── AI-tools promo card — inserted into the feed at listing
                  #10, then every 20 listings after that (see
                  mpRenderCards' AI_PROMO_FIRST/AI_PROMO_REPEAT). Plain link
                  navigation to /pages/aitools — no modal wiring — per the
                  card's own spec. Kept as its own purple/indigo accent
                  (not --mp-accent lime) since this card was supplied
                  pre-themed and distinct from the seller-promo card. ── */
               .sr-ai-promo {
               grid-column: 1 / -1;
               max-width: 380px;
               margin: 0 auto;
               background: #0a0a0f;
               border-radius: 18px;
               overflow: hidden;
               box-shadow: 0 12px 36px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
               }
               .sr-ai-promo-media {
               position: relative;
               width: 100%;
               padding-top: 100%;
               background-size: cover;
               background-position: center;
               }
               .sr-ai-promo-media::after {
               content: '';
               position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(10,10,15,0.1) 0%, rgba(10,10,15,0.6) 100%);
               }
               .sr-ai-promo-badge {
               position: absolute; top: 14px; right: 14px;
               background: rgba(255,255,255,0.07);
               backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
               border: 1px solid rgba(255,255,255,0.1);
               border-radius: 20px;
               padding: 5px 13px;
               color: #d4d4ff;
               font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
               z-index: 1;
               }
               .sr-ai-promo-body {
               padding: 18px 18px 16px;
               }
               .sr-ai-promo-title {
               margin: 0 0 6px; font-size: 19px; font-weight: 750; color: #fff; letter-spacing: 0.02em;
               }
               .sr-ai-promo-accent {
               width: 36px; height: 3px; border-radius: 2px;
               background: linear-gradient(90deg, #a855f7, #6366f1);
               margin-bottom: 12px;
               }
               .sr-ai-promo-list {
               margin: 0 0 14px; padding: 0 0 0 16px; list-style: none;
               font-size: 12.5px; line-height: 1.7; color: #a0a0b8;
               }
               .sr-ai-promo-list li {
               margin-bottom: 5px; position: relative; padding-left: 14px;
               }
               .sr-ai-promo-list li:last-child { margin-bottom: 0; }
               .sr-ai-promo-list li::before {
               content: '•'; position: absolute; left: -14px; color: #a855f7; font-weight: 700;
               }
               .sr-ai-promo-free {
               margin: 0 0 14px; font-size: 11px; color: #a855f7; font-weight: 600; letter-spacing: 0.02em;
               }
               .sr-ai-promo-cta {
               display: flex; align-items: center; justify-content: center;
               width: 100%;
               padding: 12px 16px;
               background: #15152a;
               color: #fff;
               text-decoration: none;
               border-radius: 12px;
               font-size: 13px; font-weight: 650; letter-spacing: 0.02em;
               border: 1px solid rgba(168,85,247,0.35);
               transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
               }
               .sr-ai-promo-cta:hover {
               background: #1e1e3a;
               border-color: rgba(168,85,247,0.7);
               box-shadow: 0 0 18px rgba(168,85,247,0.15);
               }
               /* ── Skeleton shimmer ── */
               @keyframes mp-skel-shimmer {
                 0%   { background-position: -400px 0; }
                 100% { background-position: 400px 0; }
               }
               .skel-block {
                 display: block;
                 border-radius: 8px;
                 background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
                 background-size: 800px 100%;
                 animation: mp-skel-shimmer 1.4s ease-in-out infinite;
               }
               .skel-card-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
               .skel-text { height: 12px; border-radius: 6px; }
               .skel-text.lg { height: 16px; border-radius: 7px; }
               .skel-fins-row { display: flex; gap: 6px; }
               .skel-fins-row .skel-block { flex: 1; height: 44px; border-radius: 9px; }
               .skel-footer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
/* ══════════════════════════════════════════════════════════════
   LISTING CARDS — rebuilt from scratch, three distinct layouts
   Shared rules: flat dark surfaces, no glow, no blur, no motion
   beyond a small hover lift. Each listing type gets its own
   silhouette (not just a recolor) so it reads as its own thing:
     • sr-site  — horizontal split card (media left, copy right)
     • sr-app   — stacked card, icon+name header, pill CTA
     • sr-game  — full-bleed banner card, solid block CTA
   ══════════════════════════════════════════════════════════════ */

:root {
  --sr-surface: #131319;
  --sr-surface-2: #191921;
  --sr-line: rgba(255,255,255,.14);
  --sr-line-soft: rgba(255,255,255,.07);
  --sr-text: #f2f2f7;
  --sr-text-dim: rgba(255,255,255,.5);
  --sr-text-faint: rgba(255,255,255,.3);
  --sr-pos: #3ddc97;
  --sr-neg: #ff6b6b;
  --sr-site: #38bdf8;
  --sr-app: #b48bfa;
  --sr-game: #ffb14e;
}
/* When a theme image/color is active, cards become semi-transparent tinted
   glass panels (same 70%-dark treatment as the rest of the site) instead of
   flat opaque black, and each listing type keeps its own faint color cast
   so the three card types stay visually distinct even with the image behind
   them. */
body.theme-active .sr-site { background: rgba(15,23,30,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.theme-active .sr-app  { background: rgba(24,15,32,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.theme-active .sr-game { background: rgba(32,21,10,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.theme-active .sr-site-media,
body.theme-active .sr-site-media-main,
body.theme-active .sr-site-media-thumb,
body.theme-active .sr-game-media { background: rgba(8,8,13,0.55); }
body.theme-active .sr-app-stats,
body.theme-active .sr-app-icon,
body.theme-active .sr-av,
body.theme-active .sr-icon-btn { background: rgba(255,255,255,0.06); }

/* ── Shared bits used by all three types ── */
.sr-stat { display: flex; flex-direction: column; gap: 2px; }
.sr-stat-k { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--sr-text-faint); }
.sr-stat-v { font-size: 12.5px; font-weight: 700; color: var(--sr-text); }
.sr-stat-v.sr-pos { color: var(--sr-pos); }
.sr-stat-v.sr-neg { color: var(--sr-neg); }

.sr-av {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--sr-surface-2); border: 1px solid var(--sr-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--sr-text-dim);
}
.sr-av img { width: 100%; height: 100%; object-fit: cover; }
.sr-seller { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.sr-seller-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.sr-seller-name { font-size: 11px; font-weight: 600; color: var(--sr-text-dim); display: flex; align-items: center; gap: 4px; min-width: 0; }
.sr-seller-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sr-seller-name > .sr-badges { overflow: visible; flex-shrink: 0; }
.sr-seller-stars { display: flex; align-items: center; gap: 3px; }
.mp-star { width: 9px; height: 9px; fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.5; flex-shrink: 0; }
.mp-star.on { fill: #f5b942; stroke: #f5b942; }
.mp-star-count { font-size: 9px; color: var(--sr-text-faint); margin-left: 2px; }

.sr-icon-btn {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--sr-surface-2); border: 1px solid var(--sr-line);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sr-icon-btn:hover { background: rgba(255,255,255,.09); }
.sr-icon-btn svg { width: 15px; height: 15px; transition: transform .15s; }
.sr-icon-btn:hover svg { transform: scale(1.12); }
.sr-icon-btn.sr-saved svg path { fill: #ff6b6b; stroke: #ff6b6b; }

.sr-ghost-btn {
  background: transparent; border: 1px solid var(--sr-line); color: var(--sr-text-dim);
  border-radius: 9px; padding: 0 12px; height: 32px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s, color .15s;
  white-space: nowrap;
}
.sr-ghost-btn:hover { background: rgba(255,255,255,.06); color: var(--sr-text); }

.sr-text-link {
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
  font-size: 10.5px; font-weight: 600; color: var(--sr-app); white-space: nowrap; flex-shrink: 0;
}
.sr-text-link:hover { text-decoration: underline; }

/* ── Boosted badge ──
   Attached directly onto the card (top-right corner, overlaid) rather
   than floating in a separate wrapper above it. Cards (.sr-site/.sr-app/
   .sr-game) provide the `position: relative` positioning context
   themselves, so this just needs position: absolute + a high z-index to
   sit above the card's own image/content. */
.sr-boost {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: flex; align-items: center; gap: 4px;
  background: rgba(20,20,28,.88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px; padding: 4px 9px 4px 7px; pointer-events: none;
}
.sr-boost svg { width: 12px; height: 12px; flex-shrink: 0; }
.sr-boost span { font-size: 0.6rem; font-weight: 800; letter-spacing: .05em; color: #f5f5fa; text-transform: uppercase; }

/* ── Premium-seller shimmer ──
   Replaces the old "Featured" badge pill entirely — no badge shape, no
   extra reserved space, no card-footer clutter. Instead the card's own
   border gets a slow-moving light sweep, similar to a skeleton-loading
   shimmer but subtle and permanent, signaling "premium" ambiently rather
   than with a label. Layered as a ::after so it never interferes with
   the card's own click target or its overflow:hidden content clipping. */
.sr-premium-shimmer { position: relative; }
.sr-premium-shimmer::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.16) 48%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.16) 52%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 250%;
  background-position: 200% 0;
  animation: sr-shimmer-sweep 4.5s ease-in-out infinite;
}
@keyframes sr-shimmer-sweep {
  0%   { background-position: 200% 0; }
  55%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-premium-shimmer::after { animation: none; display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SITE — vertical card: portrait hero + 2 landscape thumbs below,
   copy underneath. Clean rounded shell, flat, no glow.
   ══════════════════════════════════════════════════════════════ */
.sr-site {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(56,189,248,.05), var(--sr-surface) 45%);
  border: 1px solid var(--sr-line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform .16s ease, border-color .16s ease;
}
.sr-site:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.4); }
.sr-site.sr-boosted { border-color: #e5b84b; box-shadow: 0 0 0 1px rgba(229,184,75,.35), 0 0 18px rgba(229,184,75,.12); }
.sr-site-media { display: flex; flex-direction: column; gap: 2px; background: #08080d; }
.sr-site-media-main { position: relative; aspect-ratio: 16/9; max-height: 220px; overflow: hidden; background: #08080d; }
.sr-site-media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-site-media-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sr-site-media-thumb { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #0c0c14; }
.sr-site-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-site-tag {
  position: absolute; left: 8px; top: 8px;
  background: rgba(8,8,13,.82);
  color: var(--sr-site); font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 9px; text-align: center; border-radius: 100px;
  border: 1px solid rgba(56,189,248,.3);
}
.sr-site-main { padding: 12px 14px 13px; display: flex; flex-direction: column; min-width: 0;
  border-top: 1px solid var(--sr-line); }
.sr-site-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sr-site-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--sr-text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sr-site-price { font-size: 14px; font-weight: 800; color: var(--sr-site); flex-shrink: 0; }
.sr-site-desc { margin: 3px 0 8px; font-size: 11px; color: var(--sr-text-dim); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-site-stats { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--sr-line-soft); border-bottom: 1px solid var(--sr-line-soft); margin-bottom: 6px; }
.sr-site-tech { font-size: 9.5px; color: var(--sr-text-faint); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-site-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sr-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.sr-site-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sr-btn {
  border-radius: 9px; padding: 0 14px; height: 32px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.sr-btn-site { background: transparent; border-color: var(--sr-site); color: var(--sr-site); }
.sr-btn-site:hover { background: rgba(56,189,248,.12); }

@media (max-width: 30em) {
  .sr-site-media-main { max-height: 180px; }
  .sr-site-title { font-size: 12.5px; }
  .sr-site-actions { gap: 4px; }

  /* Seller strip was sharing a row with the heart/Seller/CTA buttons,
     cramming everything on small screens. Stack seller on its own line
     and let the actions take the full row underneath. */
  .sr-site-foot { flex-wrap: wrap; }
  .sr-seller { width: 100%; }
  .sr-site-actions { width: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════
   APP — stacked card, icon header, pill CTA
   ══════════════════════════════════════════════════════════════ */
.sr-app {
  background: linear-gradient(160deg, rgba(180,139,250,.06), var(--sr-surface) 45%);
  border: 1px solid var(--sr-line);
  border-radius: 14px;
  padding: 13px 13px 12px;
  position: relative;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}
.sr-app:hover { transform: translateY(-2px); border-color: rgba(180,139,250,.4); }
.sr-app.sr-boosted { border-color: #e5b84b; box-shadow: 0 0 0 1px rgba(229,184,75,.35), 0 0 18px rgba(229,184,75,.12); }
.sr-app-head { display: flex; align-items: flex-start; gap: 12px; }
.sr-app-icon {
  width: 138px; height: 138px; border-radius: 22px; flex-shrink: 0; overflow: hidden;
  background: var(--sr-surface-2); border: 1px solid rgba(180,139,250,.3);
  position: relative;
}
.sr-app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-app-platform-row {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 3px 5px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 30%, rgba(0,0,0,0));
}
.sr-app-platform-badge {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff;
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.sr-app-platform-badge svg { display: block; }
.sr-badge-ios { background: #000; }
.sr-badge-android { background: #fff; }
.sr-badge-apk { background: rgba(15,15,20,.9); border: 1px solid rgba(164,198,57,.4); }
.sr-app-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.sr-app-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sr-app-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--sr-text); }
.sr-app-cat {
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 100px; background: rgba(180,139,250,.14); color: var(--sr-app);
  border: 1px solid rgba(180,139,250,.3); white-space: nowrap;
}
.sr-app-desc { margin: 4px 0 0; font-size: 11.5px; color: var(--sr-text-dim); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sr-app-price { font-size: 16px; font-weight: 800; color: var(--sr-app); flex-shrink: 0; white-space: nowrap; margin-top: auto; padding-top: 8px; }
.sr-app-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 6px;
  margin-top: 11px; padding: 9px 10px; background: var(--sr-surface-2); border-radius: 10px;
}
.sr-app-shots { display: flex; gap: 6px; margin-top: 10px; }
.sr-app-shots img { flex: 1; width: 0; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; border: 1px solid var(--sr-line); background: var(--sr-surface-2); display: block; }
.sr-app-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--sr-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.sr-app-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sr-pill-btn {
  border-radius: 100px; padding: 0 18px; height: 32px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; border: none;
  transition: background .15s;
}
.sr-pill-app { background: var(--sr-app); color: #1a0b2e; }
.sr-pill-app:hover { background: #c3a5ff; }

@media (max-width: 30em) {
  .sr-app-icon { width: 96px; height: 96px; border-radius: 18px; }
  .sr-app { padding: 11px 11px 10px; }

  /* Same fix as the site card: seller strip gets its own row instead of
     squeezing next to the heart/Seller/CTA buttons. */
  .sr-app-foot { flex-wrap: wrap; }
  .sr-seller { width: 100%; }
  .sr-app-actions { width: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════
   GAME — full-bleed banner card, solid block CTA
   ══════════════════════════════════════════════════════════════ */
.sr-game {
  background: linear-gradient(160deg, rgba(255,177,78,.06), var(--sr-surface) 45%);
  border: 1px solid var(--sr-line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .16s ease, border-color .16s ease;
}
.sr-game:hover { transform: translateY(-2px); border-color: rgba(255,177,78,.4); }
.sr-game.sr-boosted { border-color: #e5b84b; box-shadow: 0 0 0 1px rgba(229,184,75,.35), 0 0 18px rgba(229,184,75,.12); }
.sr-game-media { position: relative; aspect-ratio: 21/9; background: #08080d; overflow: hidden; }
.sr-game-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-game-badge {
  position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(8,8,13,.78); border: 1px solid rgba(255,177,78,.4);
  display: flex; align-items: center; justify-content: center;
}
.sr-game-badge svg { width: 15px; height: 15px; color: var(--sr-game); }
.sr-game-play {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8,8,13,.7); border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sr-game-play svg { fill: #fff; margin-left: 1px; }
.sr-game-genre {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(8,8,13,.75); border: 1px solid rgba(255,177,78,.35); color: var(--sr-game);
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 100px;
}
.sr-game-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0; }
.sr-game-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--sr-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-game-price { font-size: 14px; font-weight: 800; color: var(--sr-game); flex-shrink: 0; }
.sr-game-stats { display: flex; gap: 14px; padding: 8px 12px; margin: 8px 0 0; border-top: 1px solid var(--sr-line-soft); border-bottom: 1px solid var(--sr-line-soft); }
.sr-game-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; padding: 10px 12px 12px; }
.sr-game-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sr-btn-game { background: var(--sr-game); border-color: var(--sr-game); color: #2a1500; }
.sr-btn-game:hover { background: #ffc06e; }

@media (max-width: 30em) {
  /* Same fix as the site/app cards: seller strip gets its own row instead
     of squeezing next to the heart/Seller/CTA buttons. */
  .sr-game-foot { flex-wrap: wrap; }
  .sr-seller { width: 100%; }
  .sr-game-actions { width: 100%; justify-content: flex-end; }
}

/* ── Feed section layout: all three types stack full-width, one per row ── */
.mp-app-section, .mp-game-section {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mp-app-section .sr-app, .mp-game-section .sr-game { width: 100%; }

.mp-section-header {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0 2px;
}
.mp-section-header-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mp-section-header-text { display: flex; flex-direction: column; gap: 1px; }
.mp-section-header-title { font-size: 13px; font-weight: 800; color: var(--sr-text); }
.mp-section-header-sub { font-size: 10px; color: var(--sr-text-faint); font-weight: 500; }
.mp-section-header-line { flex: 1; height: 1px; background: var(--sr-line-soft); }

/* ── Skeleton loading state retarget (site card shape) ── */
.sr-site.sr-skel { pointer-events: none; }
.sr-site.sr-skel .sr-site-media { background: rgba(255,255,255,0.04); }
.sr-site.sr-skel .sr-site-media .skel-block { width: 100%; height: 100%; border-radius: 0; }


               /* States */
               .mp-state { grid-column: 1/-1; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; gap: 12px; color: var(--mp-text-muted); }
               .mp-state svg { width: 44px; height: 44px; stroke: rgba(255,255,255,0.12); stroke-width: 1.5; fill: none; }
               .mp-state-title { font-size: 17px; font-weight: 700; color: rgba(255,255,255,0.45); }
               .mp-state-desc { font-size: 13px; max-width: 360px; line-height: 1.5; }
               .mp-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.05); border-top-color: var(--mp-accent); animation: mp-spin 0.85s linear infinite; }
               @keyframes mp-spin { to { transform: rotate(360deg); } }
               #mpLoadMoreSpinner {
               grid-column: 1/-1; display: none; align-items: center; justify-content: center;
               gap: 8px; padding: 24px 20px; text-align: center;
               font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.4); letter-spacing: 0.01em;
               }
               #mpLoadMoreSpinner.active { display: flex; }
               #mpLoadMoreSpinner svg { flex-shrink: 0; }
               /* ─── Detail modal — full redesign ─── */
               #mpModal {
               position: fixed; inset: 0; z-index: 9998;
               background: var(--mp-surface);
               display: flex; flex-direction: column;
               opacity: 0; pointer-events: none;
               transition: opacity 0.2s;
               width: 100vw; height: 100vh; overflow: hidden;
               }
               #mpModal.active { opacity: 1; pointer-events: auto; }
               .mp-modal-box {
               background: var(--mp-surface); border: none;
               border-radius: 0; width: 100%; height: 100%;
               display: flex; flex-direction: column;
               position: relative; overflow: hidden; flex: 1;
               }
               #mpModal.active .mp-modal-box { transform: none; }
               /* Sticky header */
               .mp-modal-header {
               flex-shrink: 0; height: 58px;
               display: flex; align-items: center; justify-content: space-between;
               padding: 0 20px; border-bottom: 1px solid var(--mp-border);
               background: var(--mp-surface); gap: 10px;
               position: sticky; top: 0; z-index: 10;
               }
               .mp-modal-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
               .mp-modal-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
               .mp-modal-close {
               width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               color: var(--mp-text-sec); display: flex; align-items: center; justify-content: center;
               cursor: pointer; transition: background var(--mp-transition), color var(--mp-transition);
               }
               .mp-modal-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
               .mp-modal-header-title {
               font-size: 14px; font-weight: 600; color: var(--mp-text);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               }
               .mp-modal-view-site-btn {
               display: flex; align-items: center; gap: 6px;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600;
               color: var(--mp-text-sec); cursor: pointer; font-family: inherit;
               transition: all var(--mp-transition); white-space: nowrap;
               }
               .mp-modal-view-site-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: var(--mp-border-hover); }
               .mp-modal-share-btn {
               width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               color: var(--mp-text-sec); display: flex; align-items: center; justify-content: center;
               cursor: pointer; transition: all var(--mp-transition); font-family: inherit;
               }
               .mp-modal-share-btn:hover { background: rgba(163,230,53,0.14); color: #a3e635; border-color: rgba(163,230,53,0.4); }
               /* Scrollable body */
               #mpModalBody { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; min-height: 0; padding-bottom: 110px; }
               /* Floating Deal CTA — no sticky footer, floats above scroll */
               @keyframes mp-cta-slide-up {
                 from { opacity: 0; transform: translateY(18px) translateX(-50%); }
                 to   { opacity: 1; transform: translateY(0)     translateX(-50%); }
               }
               .mp-modal-cta-bar {
               position: fixed;
               bottom: calc(28px + env(safe-area-inset-bottom, 0px));
               left: 50%;
               transform: translateX(-50%);
               width: 80%;
               max-width: 420px;
               z-index: 10001;
               display: flex;
               padding: 0;
               border: none;
               background: transparent;
               pointer-events: none;
               opacity: 0;
               }
               .mp-modal-cta-bar.cta-visible {
               pointer-events: auto;
               animation: mp-cta-slide-up 0.38s cubic-bezier(0.16,1,0.3,1) forwards;
               }
               .mp-modal-cta-msg {
               flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               border-radius: 12px; padding: 13px 16px; font-size: 13px; font-weight: 600;
               color: var(--mp-text-sec); cursor: pointer; font-family: inherit;
               transition: all var(--mp-transition);
               }
               .mp-modal-cta-msg:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: var(--mp-border-hover); }
               .mp-modal-cta-deal {
               flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
               background: #a3e635;
               border: none;
               border-radius: 100px;
               padding: 15px 20px;
               font-size: 15px; font-weight: 800;
               color: #000; cursor: pointer; font-family: inherit;
               transition: filter 0.15s, transform 0.12s;
               letter-spacing: -0.01em;
               }
               .mp-modal-cta-deal:hover { filter: brightness(1.08); }
               .mp-modal-cta-deal:active { transform: scale(0.96); }
               /* Modal hero & content */
               /* ═══════════════════════════════════════════════════════
                  UNIFIED DETAIL-MODAL VISUAL SYSTEM
                  One shared hero + one shared gallery strip used
                  identically by website / app / game listings, so the
                  three types read as one consistent product instead of
                  three different UIs bolted together.
                  ═══════════════════════════════════════════════════════ */

               /* ── Hero — big 16:9 cover shared by all 3 types ── */
               .modal-hero { position: relative; width: 100%; aspect-ratio: 16/9; background: #121215; overflow: hidden; flex-shrink: 0; }
               .modal-cover { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.8); transition: transform 0.4s ease, filter 0.2s ease; }
               .modal-hero.srf-lightbox-trigger:hover .modal-cover { transform: scale(1.02); filter: brightness(0.85); }
               .modal-hero-overlay {
               position: absolute; inset: 0; padding: 16px;
               display: flex; flex-direction: column; justify-content: space-between;
               background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
               }
               .modal-hero-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
               .modal-hero-bottom-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
               .modal-type-badge {
               padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
               letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(6px);
               white-space: nowrap;
               }
               .modal-price-badge {
               padding: 6px 16px; border-radius: 30px;
               background: #fff; border: none;
               font-weight: 800; font-size: 18px; color: #0a0a0a;
               white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
               }
               /* App icon badge — overlaps the bottom-left of the hero, app-store style */
               .modal-hero-icon-badge {
               width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
               object-fit: cover; background: #1a1a1d;
               border: 2px solid rgba(255,255,255,0.85);
               box-shadow: 0 6px 20px rgba(0,0,0,0.5);
               }
               .modal-hero-icon-badge-placeholder {
               width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
               background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.85);
               display: flex; align-items: center; justify-content: center;
               box-shadow: 0 6px 20px rgba(0,0,0,0.5);
               }
               .modal-hero-title-block { flex: 1; min-width: 0; }
               .modal-hero-title {
               font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
               margin: 0 0 4px; text-shadow: 0 1px 8px rgba(0,0,0,0.5);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               }
               .modal-hero-pills { display: flex; flex-wrap: wrap; gap: 5px; }
               .modal-hero-pill {
               padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
               backdrop-filter: blur(6px); letter-spacing: 0.02em;
               background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
               color: rgba(255,255,255,0.9); white-space: nowrap;
               }

               /* ── Gallery strip — one shared component for website
                  portraits, app screenshots, and game shots. Uniform
                  square thumbnails in a horizontally-scrollable row. ── */
               .modal-gallery {
               display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px;
               -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
               background: var(--mp-surface); border-bottom: 1px solid var(--mp-border);
               }
               .modal-gallery::-webkit-scrollbar { height: 3px; }
               .modal-gallery::-webkit-scrollbar-track { background: transparent; }
               .modal-gallery::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
               .modal-gallery-shot {
               flex: 0 0 auto; width: 140px; aspect-ratio: 3/4;
               border-radius: 12px; overflow: hidden; scroll-snap-align: start;
               background: #121215; border: 1px solid rgba(255,255,255,0.06);
               transition: opacity 0.15s, transform 0.15s;
               }
               .modal-gallery-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
               .modal-gallery-shot.srf-lightbox-trigger:hover { opacity: 0.88; transform: translateY(-1px); }
               .modal-gallery-shot.portrait { width: 140px; aspect-ratio: 3/4; }
               .modal-gallery-shot.tall { width: 120px; aspect-ratio: 9/16; }
               .modal-gallery-shot.wide { width: 213px; aspect-ratio: 16/9; }

               /* ═══════════════════════════════════════════════════════
                  RESTORED SHARED CARD/SECTION SYSTEM
                  (content padding, section dividers, tech/financials/
                  settings grids, seller card) — used identically by all
                  3 listing types.
                  ═══════════════════════════════════════════════════════ */
               .modal-content { padding: 20px 16px; display: flex; flex-direction: column; gap: 0; }
               .modal-section { padding: 16px 0; border-bottom: 1px solid var(--mp-border); }
               .modal-section:first-child { padding-top: 0; }
               .modal-section:last-child { border-bottom: none; padding-bottom: 4px; }
               .modal-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mp-text-muted); margin-bottom: 12px; }
               .modal-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--mp-text); }
               .modal-desc { color: var(--mp-text-sec); line-height: 1.6; font-size: 14px; margin: 0 0 10px; }
               .modal-url-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
               .modal-url { color: var(--mp-accent); font-size: 13px; text-decoration: none; word-break: break-all; }
               .modal-url:hover { text-decoration: underline; }
               .modal-view-btn {
               display: inline-flex; align-items: center; gap: 5px;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600;
               color: var(--mp-text-sec); cursor: pointer; font-family: inherit;
               transition: all var(--mp-transition); white-space: nowrap; flex-shrink: 0;
               }
               .modal-view-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: var(--mp-border-hover); }
               .modal-muted { color: var(--mp-text-muted); font-size: 13px; margin: 0; }
               .modal-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .tech-item { background: var(--mp-surface-raised); border-radius: var(--mp-radius-sm); padding: 9px 13px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 8px; }
               .tech-label { color: var(--mp-text-muted); font-size: 12px; flex-shrink: 0; }
               .tech-value { font-weight: 600; color: var(--mp-text); text-align: right; }
               .modal-financials { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
               .fin-card { background: var(--mp-surface-raised); border-radius: var(--mp-radius-sm); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
               .fin-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mp-text-muted); font-weight: 700; }
               .fin-value { font-size: 16px; font-weight: 700; color: var(--mp-text); }
               .fin-value.profit { color: #34d399; }
               .modal-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .setting-item { background: var(--mp-surface-raised); border-radius: var(--mp-radius-sm); padding: 9px 13px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 8px; }
               .setting-item span:first-child { color: var(--mp-text-muted); flex-shrink: 0; font-size: 12px; }
               .setting-item span:last-child { font-weight: 600; text-align: right; }
               /* Seller section */
               .modal-seller-section {
               display: flex; align-items: center; gap: 12px;
               padding: 12px; border-radius: var(--mp-radius); cursor: pointer;
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               transition: background 0.15s, border-color 0.15s;
               }
               .modal-seller-section:hover { background: rgba(255,255,255,0.06); border-color: var(--mp-border-hover); }
               .seller-avatar {
               width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
               background: var(--mp-surface); border: 1px solid var(--mp-border);
               display: flex; align-items: center; justify-content: center;
               font-weight: 700; font-size: 16px; color: var(--mp-text);
               }
               .seller-avatar img { width: 100%; height: 100%; object-fit: cover; }
               .seller-name-row { flex: 1; min-width: 0; }
               .seller-name { font-weight: 600; font-size: 14px; color: var(--mp-text); display: flex; align-items: center; gap: 5px; min-width: 0; }
               .seller-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
               .seller-handle { font-size: 12px; color: var(--mp-text-muted); margin-top: 2px; }
               .seller-stars-row { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
               .seller-stars-row .mp-star { width: 12px; height: 12px; fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1.5; flex-shrink: 0; }
               .seller-stars-row .mp-star.on { fill: #f5b942; stroke: #f5b942; }
               .seller-stars-row .mp-star-count { font-size: 11.5px; font-weight: 600; color: var(--mp-text-muted); margin-left: 3px; }
               .seller-chevron { flex-shrink: 0; color: var(--mp-text-muted); }
               /* Reveals section — fixed-height scrollable card so a long
                  history of seller reveals doesn't push the rest of the
                  modal down; it scrolls internally instead. */
               .modal-reveals-section { margin-top: 14px; }
               .modal-reveals-title-row {
               display: flex; align-items: center; justify-content: space-between;
               margin-bottom: 8px;
               }
               .modal-reveals-title {
               font-size: 11px; font-weight: 800; text-transform: uppercase;
               letter-spacing: 0.07em; color: var(--mp-text-muted);
               }
               .modal-reveals-count {
               font-size: 10.5px; font-weight: 700; color: var(--mp-text-muted);
               background: rgba(255,255,255,0.06); border-radius: 20px; padding: 2px 8px;
               }
               .modal-reveals-list {
               max-height: 260px; overflow-y: auto;
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-sm);
               padding: 4px 12px;
               }
               .reveals-empty {
               padding: 14px 0; font-size: 13px; color: var(--mp-text-muted);
               display: flex; align-items: center; gap: 8px;
               }
               .reveals-empty svg { opacity: 0.4; flex-shrink: 0; }
               .reveal-row {
               display: flex; align-items: flex-start; gap: 10px;
               padding: 11px 0;
               border-top: 1px solid var(--mp-border);
               }
               .reveal-row:first-of-type { border-top: none; }
               .reveal-av {
               width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
               background: var(--mp-surface); border: 1px solid var(--mp-border);
               display: flex; align-items: center; justify-content: center;
               font-size: 13px; font-weight: 700; color: var(--mp-text);
               overflow: hidden;
               }
               .reveal-av img { width: 100%; height: 100%; object-fit: cover; }
               .reveal-body { flex: 1; min-width: 0; }
               .reveal-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
               .reveal-name { font-size: 13px; font-weight: 700; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .reveal-time { font-size: 11px; color: var(--mp-text-muted); flex-shrink: 0; }
               .reveal-msg { font-size: 12px; color: var(--mp-text-sec); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
               .reveal-stars { display: flex; gap: 2px; margin-bottom: 4px; }
               .reveal-star { color: rgba(255,255,255,.18); display: inline-flex; }
               .reveal-star.filled { color: #f5b93f; }

               /* ═══════════════════════════════════════════════════════
                  AD / "PREPARING…" COUNTDOWN OVERLAY (#mpAdOverlay)
                  Shown before opening an external link/preview/game on
                  the free plan. Was rendering as bare unstyled text
                  inline in the page — now a proper centered modal card,
                  consistent with the other overlays (#mpModal etc).
                  ═══════════════════════════════════════════════════════ */
               #mpAdOverlay {
               position: fixed; inset: 0; z-index: 10050;
               background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
               display: flex; align-items: center; justify-content: center;
               padding: 20px;
               opacity: 0; pointer-events: none;
               transition: opacity 0.2s;
               }
               #mpAdOverlay.active { opacity: 1; pointer-events: auto; }
               #mpAdOverlayInner {
               width: 100%; max-width: 340px;
               background: var(--mp-surface, #121215); border: 1px solid var(--mp-border, rgba(255,255,255,0.08));
               border-radius: 18px; padding: 18px;
               box-shadow: 0 20px 60px rgba(0,0,0,0.5);
               display: flex; flex-direction: column; gap: 14px;
               }
               #mpAdOverlayHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
               #mpAdOverlayTitle {
               display: flex; align-items: center; gap: 7px;
               font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.75);
               }
               #mpAdOverlayRemoveAds:hover { background: rgba(163,230,53,0.2) !important; }
               #mpAdOverlayBody { display: flex; flex-direction: column; gap: 12px; align-items: center; }
               #mpAdBox {
               width: 300px; max-width: 100%; min-height: 250px;
               background: rgba(255,255,255,0.03); border: 1px solid var(--mp-border, rgba(255,255,255,0.08));
               border-radius: 10px; display: flex; align-items: center; justify-content: center;
               overflow: hidden;
               }
               #mpAdCountdownWrap { width: 100%; display: flex; flex-direction: column; gap: 6px; }
               #mpAdCountdownBar {
               width: 100%; height: 4px; border-radius: 3px; overflow: hidden;
               background: rgba(255,255,255,0.08);
               }
               #mpAdCountdownFill {
               width: 100%; height: 100%; background: var(--mp-accent, #a3e635);
               transform-origin: left center; transform: scaleX(1);
               transition: transform 1s linear;
               }
               #mpAdCountdownText { font-size: 12px; font-weight: 600; color: var(--mp-text-muted, rgba(255,255,255,0.45)); text-align: center; }
               #mpAdSkipBtn {
               display: none; width: 100%;
               padding: 13px; border-radius: 12px; border: none;
               background: var(--mp-accent, #a3e635); color: #000;
               font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer;
               transition: filter 0.15s, transform 0.12s;
               }
               #mpAdSkipBtn:hover { filter: brightness(1.08); }
               #mpAdSkipBtn:active { transform: scale(0.97); }

               /* ── Store / platform link buttons (app) ── */
               .modal-app-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
               .modal-store-btn {
               display: inline-flex; align-items: center; gap: 6px;
               padding: 9px 15px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
               border: 1px solid transparent; cursor: pointer; font-family: inherit;
               transition: filter 0.15s, transform 0.12s;
               }
               .modal-store-btn.ios     { background: #000; color: #fff; border-color: rgba(255,255,255,0.15); }
               .modal-store-btn.ios svg { fill: #fff; }
               .modal-store-btn.android { background: #01875f; color: #fff; }
               .modal-store-btn.android svg { background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
               .modal-store-btn.web     { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.35); color: #60a5fa; }
               .modal-store-btn:hover   { filter: brightness(1.15); transform: translateY(-1px); }
               .modal-video-link {
               display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
               font-size: 12.5px; font-weight: 600; color: var(--mp-text-sec); text-decoration: none;
               transition: color 0.15s;
               }
               .modal-video-link:hover { color: #fff; }

               /* ── Game: play button + section wrapper ── */
               .modal-game-play-section {
               background: rgba(245,158,11,0.04); border: 1px solid rgba(245,158,11,0.12);
               border-radius: 14px; padding: 14px 16px;
               }
               .modal-game-play-btn {
               display: flex; align-items: center; justify-content: center; gap: 8px;
               padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 700;
               background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.28);
               color: #f59e0b; cursor: pointer; font-family: inherit;
               transition: background 0.15s;
               }
               .modal-game-play-btn:hover { background: rgba(245,158,11,0.18); }
               .modal-game-play-btn.active { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: #f87171; }
               .modal-game-section-title { display: flex; align-items: center; gap: 6px; }
               .modal-game-ext-link {
               display: inline-flex; align-items: center; gap: 6px;
               padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
               color: #f59e0b; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2);
               text-decoration: none; margin-top: 10px; transition: background 0.15s;
               }
               .modal-game-ext-link:hover { background: rgba(245,158,11,0.15); }
               /* ── App: APK block ── */
               .modal-app-apk-block {
               display: flex; align-items: center; gap: 12px;
               padding: 12px 16px; margin: 0 0 4px;
               background: rgba(96,165,250,0.05); border: 1px solid rgba(96,165,250,0.15);
               border-radius: 12px;
               }
               .modal-app-apk-icon {
               width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
               background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.2);
               display: flex; align-items: center; justify-content: center; color: #60a5fa;
               }
               .modal-app-apk-info { flex: 1; min-width: 0; }
               .modal-app-apk-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #60a5fa; margin-bottom: 2px; }
               .modal-app-apk-name  { display: block; font-size: 12.5px; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
               .modal-app-apk-btn {
               flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
               padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
               background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.25);
               color: #60a5fa; text-decoration: none; transition: background 0.15s;
               }
               .modal-app-apk-btn:hover { background: rgba(96,165,250,0.2); }
               /* ── App: themed section label ── */
               .modal-app-section-label { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.7); }
               /* Shared icon+label style for section titles across all 3 listing types (website/app/game) */
               .modal-section-title.with-icon { display: flex; align-items: center; gap: 6px; }
               /* ── Transfer methods — "How You'll Receive This" ── */
               .mp-transfer-section {}
               .mp-transfer-title { display: flex; align-items: center; gap: 6px; }
               .mp-transfer-note { font-size: 12.5px; color: var(--mp-text-muted); margin: 0 0 12px; line-height: 1.5; }
               .mp-transfer-pills { display: flex; flex-wrap: wrap; gap: 8px; }
               .mp-transfer-pill {
                 display: inline-flex; align-items: center; gap: 6px;
                 font-size: 12.5px; font-weight: 600;
                 padding: 8px 14px; border-radius: 20px;
                 background: color-mix(in srgb, var(--tp-accent, #60a5fa) 10%, transparent);
                 border: 1px solid color-mix(in srgb, var(--tp-accent, #60a5fa) 28%, transparent);
                 color: var(--tp-accent, #60a5fa);
                 white-space: nowrap;
                 transition: background 0.15s, transform 0.12s;
               }
               .mp-transfer-pill:hover { background: color-mix(in srgb, var(--tp-accent, #60a5fa) 16%, transparent); transform: translateY(-1px); }
               .mp-transfer-pill svg { flex-shrink: 0; }
               /* ── Attached GitHub repo — listing detail ── */
               .mp-repo-attached-card {
                 display: flex; align-items: center; justify-content: space-between; gap: 10px;
                 padding: 12px 14px; border-radius: 12px;
                 background: color-mix(in srgb, var(--repo-accent, #a3e635) 8%, transparent);
                 border: 1px solid color-mix(in srgb, var(--repo-accent, #a3e635) 26%, transparent);
                 color: var(--mp-text, #fff);
                 text-decoration: none;
                 transition: background 0.15s, transform 0.12s;
               }
               .mp-repo-attached-card:hover { background: color-mix(in srgb, var(--repo-accent, #a3e635) 14%, transparent); transform: translateY(-1px); }
               .mp-repo-attached-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
               .mp-repo-attached-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
               .mp-repo-attached-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mp-text-muted); }
               .mp-repo-attached-badge {
                 font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
                 border: 1px solid var(--mp-border); border-radius: 4px; padding: 1px 6px;
               }
               .mp-repo-attached-note { font-size: 12px; color: var(--mp-text-muted); margin: 8px 0 0; line-height: 1.5; }
               .modal-app-desc-section { border-left: 3px solid #60a5fa; padding-left: 14px; }
               .modal-game-title-section { border-left: 3px solid #f59e0b; padding-left: 14px; }
               /* ── App: preview iframe panel ── */
               .modal-app-preview-section {
               background: rgba(96,165,250,0.03); border: 1px solid rgba(96,165,250,0.12);
               border-radius: 14px; padding: 14px 16px 0; overflow: hidden;
               }
               .modal-app-preview-header {
               display: flex; align-items: center; gap: 8px;
               font-size: 13px; font-weight: 700; color: #60a5fa; margin-bottom: 12px;
               }
               .modal-app-preview-wrap { position: relative; }
               .modal-app-preview-spinner {
               position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
               background: rgba(0,0,0,0.6); border-radius: 0 0 12px 12px; z-index: 2;
               }
               .modal-app-preview-btn {
               display: flex; align-items: center; justify-content: center; gap: 8px;
               width: 100%; padding: 13px; margin: 12px 0 0;
               background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.2);
               border-radius: 10px; color: #60a5fa; font-size: 14px; font-weight: 700;
               cursor: pointer; font-family: inherit; transition: background 0.15s;
               }
               .modal-app-preview-btn:hover { background: rgba(96,165,250,0.15); }
               .modal-app-preview-btn.active { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: #f87171; }
               @keyframes mp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
               /* Fin-card extra variants */
               .fin-value.loss { color: #f87171; }
               .fin-card.full  { grid-column: span 2; }
               /* Read more */
               .mp-read-more-btn {
               background: none; border: none; color: var(--mp-accent); font-size: 13px;
               font-weight: 600; cursor: pointer; padding: 4px 0; font-family: inherit;
               transition: opacity 0.15s;
               }
               .mp-read-more-btn:hover { opacity: 0.75; }
               /* ─── Site preview overlay ─── */
               #mpSitePreview {
               position: fixed; inset: 0; z-index: 10002;
               display: flex; flex-direction: column;
               background: #000;
               }
               /* Sticky top bar: ad + close row */
               .mp-preview-header {
               flex-shrink: 0;
               display: flex; flex-direction: column; align-items: center;
               background: #0b0b0f;
               border-bottom: 1px solid rgba(255,255,255,0.08);
               }
               /* Top ad strip (320×50) */
               .mp-preview-top-ad {
               width: 100%; display: flex; align-items: center; justify-content: center;
               min-height: 50px; background: #0b0b0f;
               border-bottom: 1px solid rgba(255,255,255,0.05);
               overflow: hidden;
               }
               /* Close row below the ad */
               .mp-preview-ctrl-row {
               width: 100%; height: 44px;
               display: flex; align-items: center; justify-content: flex-end;
               padding: 0 14px; gap: 10px;
               }
               .mp-preview-url {
               flex: 1; font-size: 12px; color: rgba(255,255,255,0.45);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               }
               .mp-preview-close {
               display: flex; align-items: center; gap: 6px;
               background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600;
               color: rgba(255,255,255,0.7); cursor: pointer; font-family: inherit;
               transition: all 0.16s; white-space: nowrap; flex-shrink: 0;
               }
               .mp-preview-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
               /* iframe wrapper — fills remaining space between header and footer */
               #mpSiteFrameWrap {
               flex: 1; position: relative; overflow: hidden;
               display: flex; align-items: center; justify-content: center;
               min-height: 0;
               }
               #mpSiteFrame { position: absolute; inset: 0; border: none; width: 100%; height: 100%; }
               /* Centered loading spinner */
               #mpPreviewSpinner {
               position: absolute; inset: 0;
               display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 14px; background: #000; z-index: 1; pointer-events: none;
               }
               #mpPreviewSpinner.hidden { display: none; }
               .mp-spinner-ring {
               width: 44px; height: 44px;
               border: 3px solid rgba(255,255,255,0.1);
               border-top-color: #a3e635;
               border-radius: 50%;
               animation: mp-spin 0.8s linear infinite;
               }
               @keyframes mp-spin { to { transform: rotate(360deg); } }
               .mp-spinner-label {
               font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45);
               letter-spacing: 0.03em;
               }
               /* ─── Send Deal popup ─── */
               #mpDealPopup {
               position: fixed; inset: 0; z-index: 10001;
               background: rgba(0,0,0,0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
               display: flex; align-items: center; justify-content: center;
               padding: 16px;
               }
               .mp-deal-box {
               background: var(--mp-surface); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-xl); width: min(440px,100%);
               max-height: 90vh; overflow-y: auto; overflow-x: hidden;
               box-shadow: 0 24px 60px rgba(0,0,0,0.75);
               display: flex; flex-direction: column; gap: 16px;
               padding: 20px; position: relative;
               animation: mp-deal-in 0.28s cubic-bezier(0.16,1,0.3,1);
               }
               @keyframes mp-deal-in { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
               .mp-deal-header { display: flex; align-items: center; justify-content: space-between; }
               .mp-deal-header-title { font-size: 15px; font-weight: 700; color: var(--mp-text); }
               .mp-deal-close {
               width: 28px; height: 28px; border-radius: 50%;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               color: var(--mp-text-sec); display: flex; align-items: center; justify-content: center;
               cursor: pointer; transition: background var(--mp-transition);
               }
               .mp-deal-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
               .mp-deal-buyer-row { display: flex; align-items: center; gap: 10px; }
               .mp-deal-buyer-av {
               width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               display: flex; align-items: center; justify-content: center;
               font-size: 13px; font-weight: 700; color: var(--mp-text);
               }
               .mp-deal-buyer-av img { width: 100%; height: 100%; object-fit: cover; }
               .mp-deal-buyer-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mp-text-muted); font-weight: 700; }
               .mp-deal-buyer-name { font-size: 14px; font-weight: 600; color: var(--mp-text); margin-top: 2px; }
               .mp-deal-intro {
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-sm); padding: 12px 14px;
               font-size: 13px; color: var(--mp-text-sec); line-height: 1.55;
               font-style: italic;
               }
               .mp-deal-field { display: flex; flex-direction: column; gap: 6px; }
               .mp-deal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mp-text-muted); }
               .mp-deal-req { color: #f87171; }
               .mp-deal-textarea {
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-sm); padding: 11px 13px;
               color: var(--mp-text); font-size: 13px; font-family: inherit;
               resize: vertical; min-height: 90px; outline: none; line-height: 1.55;
               transition: border-color var(--mp-transition), box-shadow var(--mp-transition);
               }
               .mp-deal-textarea::placeholder { color: var(--mp-text-muted); }
               .mp-deal-textarea:focus { border-color: var(--mp-accent-border); box-shadow: 0 0 0 4px rgba(163,230,53,0.06); }
               .mp-deal-char { font-size: 11px; color: var(--mp-text-muted); text-align: right; }
               .mp-deal-char.ok { color: #34d399; }
               /* Offer amount row */
               .mp-deal-offer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
               .mp-deal-offer-field { display: flex; flex-direction: column; gap: 6px; }
               .mp-deal-offer-wrap {
               display: flex; align-items: center;
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-sm); overflow: hidden;
               transition: border-color var(--mp-transition), box-shadow var(--mp-transition);
               }
               .mp-deal-offer-wrap:focus-within { border-color: var(--mp-accent-border); box-shadow: 0 0 0 4px rgba(163,230,53,0.06); }
               .mp-deal-currency {
               padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--mp-text-muted);
               border-right: 1px solid var(--mp-border); background: rgba(255,255,255,0.03);
               height: 40px; display: flex; align-items: center; flex-shrink: 0;
               }
               .mp-deal-offer-input {
               flex: 1; background: none; border: none; outline: none;
               padding: 0 11px; height: 40px; font-size: 13px; font-weight: 600;
               color: var(--mp-text); font-family: inherit;
               }
               .mp-deal-offer-input::placeholder { color: var(--mp-text-muted); font-weight: 400; }
               .mp-deal-listed-price-box {
               display: flex; align-items: center; justify-content: center;
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-sm); height: 40px; padding: 0 11px;
               font-size: 14px; font-weight: 800; color: var(--mp-accent);
               }
               .mp-deal-offer-hint { font-size: 10px; color: var(--mp-text-muted); line-height: 1.4; }
               /* Preview card */
               .mp-deal-preview {
               display: flex; gap: 11px; align-items: flex-start;
               background: var(--mp-surface-raised); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-sm); padding: 10px;
               }
               .mp-deal-preview-img { width: 60px; height: 44px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: #1a1a1a; }
               .mp-deal-preview-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
               .mp-deal-preview-uid { font-size: 9px; color: var(--mp-text-muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
               .mp-deal-preview-title { font-size: 13px; font-weight: 700; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .mp-deal-preview-desc { font-size: 11px; color: var(--mp-text-sec); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
               .mp-deal-preview-price { font-size: 13px; font-weight: 800; color: var(--mp-accent); margin-top: 2px; }
               .mp-deal-err { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--mp-radius-sm); padding: 10px 13px; font-size: 13px; color: #f87171; }
               /* Submit button */
               .mp-deal-submit {
               width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
               background: var(--mp-accent); color: #0b0b0f; border: none;
               border-radius: 24px; padding: 12px 20px; font-size: 14px; font-weight: 800;
               cursor: pointer; font-family: inherit; transition: filter 0.16s, opacity 0.16s;
               }
               .mp-deal-submit:hover { filter: brightness(1.08); }
               .mp-deal-submit:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
               /* Success state */
               .mp-deal-success {
               display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 10px; padding: 24px 0 8px; position: relative;
               }
               .mp-deal-success-leaves { position: absolute; inset: -20px; pointer-events: none; overflow: hidden; }
               .mp-leaf {
               position: absolute; width: 10px; height: 14px;
               background: var(--mp-accent); border-radius: 50% 0 50% 0;
               opacity: 0; animation: mp-leaf-fall 1.4s ease-out forwards;
               }
               @keyframes mp-leaf-fall {
               0%   { transform: translateY(0) rotate(0deg) scale(0.5); opacity: 1; }
               80%  { opacity: 0.8; }
               100% { transform: translateY(120px) rotate(260deg) scale(1); opacity: 0; }
               }
               .mp-deal-tick {
               width: 60px; height: 60px;
               animation: mp-tick-pop 0.4s cubic-bezier(0.16,1,0.3,1) 0.1s both;
               }
               @keyframes mp-tick-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
               .mp-tick-circle {
               stroke: var(--mp-accent); stroke-width: 2.5;
               stroke-dasharray: 157; stroke-dashoffset: 157;
               animation: mp-dash 0.5s ease-out 0.3s forwards;
               }
               @keyframes mp-dash { to { stroke-dashoffset: 0; } }
               .mp-tick-check {
               stroke: var(--mp-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
               stroke-dasharray: 48; stroke-dashoffset: 48;
               animation: mp-dash 0.35s ease-out 0.7s forwards;
               }
               .mp-deal-success-text { font-size: 18px; font-weight: 800; color: var(--mp-text); animation: mp-tick-pop 0.3s ease-out 0.8s both; }
               .mp-deal-success-sub { font-size: 13px; color: var(--mp-text-muted); animation: mp-tick-pop 0.3s ease-out 0.9s both; }
               /* ─── Deal Outcome popup ─── */
               #mpDealOutcomePopup {
               position: fixed; inset: 0; z-index: 10002;
               background: rgba(0,0,0,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
               display: flex; align-items: center; justify-content: center;
               padding: 16px;
               }
               .mp-outcome-box {
               position: relative;
               background: var(--mp-surface); border: 1px solid var(--mp-border);
               border-radius: var(--mp-radius-xl); width: min(360px,100%);
               box-shadow: 0 24px 60px rgba(0,0,0,0.75);
               display: flex; flex-direction: column; align-items: center; text-align: center;
               gap: 10px; padding: 32px 24px 24px;
               animation: mp-deal-in 0.28s cubic-bezier(0.16,1,0.3,1);
               }
               .mp-outcome-close {
               position: absolute; top: 12px; right: 12px;
               width: 26px; height: 26px; border-radius: 50%;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border);
               color: var(--mp-text-sec); display: flex; align-items: center; justify-content: center;
               cursor: pointer; transition: background var(--mp-transition);
               }
               .mp-outcome-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
               .mp-outcome-icon-wrap { width: 64px; height: 64px; margin-bottom: 4px; }
               .mp-outcome-icon-wrap svg { width: 64px; height: 64px; animation: mp-tick-pop 0.35s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
               .mp-outcome-circle { stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: mp-dash 0.5s ease-out 0.25s forwards; }
               .mp-outcome-path { stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 46; animation: mp-dash 0.35s ease-out 0.65s forwards; }
               .mp-outcome-path-pending { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
               /* Theme colors */
               #mpOutcomeBox.theme-accept .mp-outcome-circle,
               #mpOutcomeBox.theme-accept .mp-outcome-path { stroke: #4ade80; }
               #mpOutcomeBox.theme-reject .mp-outcome-circle,
               #mpOutcomeBox.theme-reject .mp-outcome-path { stroke: #f87171; }
               #mpOutcomeBox.theme-pending .mp-outcome-circle,
               #mpOutcomeBox.theme-pending .mp-outcome-path-pending { stroke: #f5b942; }
               .mp-outcome-title { font-size: 18px; font-weight: 800; color: var(--mp-text); }
               .mp-outcome-sub { font-size: 13px; color: var(--mp-text-sec); line-height: 1.55; max-width: 300px; }
               .mp-outcome-timer-wrap {
               margin-top: 6px; padding: 12px 18px; width: 100%;
               background: rgba(245,185,66,0.08); border: 1px solid rgba(245,185,66,0.28);
               border-radius: var(--mp-radius-sm);
               display: flex; flex-direction: column; align-items: center; gap: 3px;
               }
               .mp-outcome-timer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #f5b942; opacity: 0.85; }
               .mp-outcome-timer { font-size: 20px; font-weight: 800; color: #f5b942; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
               .mp-outcome-ok {
               margin-top: 8px; width: 100%;
               background: rgba(255,255,255,0.06); border: 1px solid var(--mp-border); color: var(--mp-text);
               border-radius: 24px; padding: 11px 20px; font-size: 14px; font-weight: 700;
               cursor: pointer; font-family: inherit; transition: background 0.16s;
               }
               .mp-outcome-ok:hover { background: rgba(255,255,255,0.12); }
               @media(max-width:600px){
               .modal-tech-grid, .modal-financials, .modal-settings-grid { grid-template-columns: 1fr; }
               .setting-item.full-width { grid-column: span 1; }
               .mp-modal-cta-deal { font-size: 14px; padding: 14px 18px; }
               }
               .mp-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .mp-tech-row { display: flex; justify-content: space-between; background: var(--mp-surface-raised); border-radius: var(--mp-radius-sm); padding: 9px 13px; font-size: 13px; }
               .mp-tech-lbl { color: var(--mp-text-muted); }
               .mp-tech-val { font-weight: 600; }
               .mp-fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .mp-fin-card { background: var(--mp-surface-raised); border-radius: var(--mp-radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
               .mp-fin-label { font-size: 11px; color: var(--mp-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
               .mp-fin-val { font-size: 16px; font-weight: 700; }
               .mp-fin-val.profit { color: #34d399; }
               .mp-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .mp-setting-row { background: var(--mp-surface-raised); border-radius: var(--mp-radius-sm); padding: 9px 13px; display: flex; justify-content: space-between; font-size: 13px; }
               .mp-setting-row span:first-child { color: var(--mp-text-muted); }
               .mp-setting-row span:last-child { font-weight: 600; }
               .mp-setting-row.span2 { grid-column: span 2; }
               .mp-seller-row { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
               .mp-seller-av { width: 36px; height: 36px; border-radius: 50%; background: var(--mp-surface-raised); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; border: 1px solid var(--mp-border); }
               .mp-seller-name { font-weight: 600; font-size: 14px; }
               .mp-seller-email { font-size: 12px; color: var(--mp-text-muted); }
               .mp-muted { color: var(--mp-text-muted); font-size: 13px; }
               @media(max-width:600px){
               .mp-tech-grid,.mp-fin-grid,.mp-settings-grid { grid-template-columns: 1fr; }
               .mp-setting-row.span2 { grid-column: span 1; }
               }
               /* ══════════════════════════════════
               APP CARD — flat, solid, violet accent
               Same dark base as website/game cards; only the left edge
               and CTA colour differ. No background image, no glow,
               no animated border, no shimmer.
               ══════════════════════════════════ */

               /* ══════════════════════════════════
               GLOBAL LOADER — single shimmer overlay
               shown while the marketplace's first load
               (top sellers + listings) is in flight.
               ══════════════════════════════════ */
               #mpGlobalLoader {
               position: absolute; inset: 0; z-index: 50;
               background: #08080c;
               padding: 18px 20px 20px;
               display: none;
               overflow: hidden;
               }
               #mpGlobalLoader.active { display: block; }
               .mp-gl-row {
               display: flex; gap: 10px; margin-bottom: 20px;
               }
               .mp-gl-grid {
               display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
               }
               @media(min-width:640px){ .mp-gl-grid { grid-template-columns: repeat(3, 1fr); } }
               .mp-gl-shimmer {
               position: relative; overflow: hidden;
               background: #101018;
               border: 1px solid rgba(255,255,255,.06);
               border-radius: 16px;
               }
               .mp-gl-shimmer::after {
               content: '';
               position: absolute; inset: 0;
               background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%);
               animation: mpGlShimmer 1.5s ease-in-out infinite;
               }
               @keyframes mpGlShimmer {
               0%   { transform: translateX(-100%); }
               100% { transform: translateX(100%); }
               }
               .mp-gl-card-sm { flex-shrink: 0; width: 132px; height: 158px; }
               .mp-gl-card-lg { height: 260px; }
               @media(max-width:480px){
               .mp-gl-card-sm { width: 112px; height: 148px; }
               }

               /* ══════════════════════════════════
               PREMIUM SELLERS — horizontal scroll strip
               ══════════════════════════════════ */
               #mpTopSellersSection {
               padding: 14px 20px 4px;
               border-bottom: 1px solid rgba(255,255,255,.05);
               margin-bottom: 6px;
               }
               #mpTopSellersSection .mp-section-header { grid-column: unset; padding: 0 0 2px; }
               .mp-ts-heading {
               display: flex; align-items: center; gap: 6px;
               font-size: 12px; font-weight: 800; letter-spacing: .04em;
               text-transform: uppercase; color: #d8b4fe;
               padding: 0 2px 8px;
               }
               .mp-ts-heading svg { flex-shrink: 0; fill: #d8b4fe; }
               #mpTopSellersSection.mp-ts-empty .mp-ts-heading { display: none; }
               #mpTopSellersTrack {
               display: flex; gap: 10px;
               overflow-x: auto; overflow-y: hidden;
               padding: 4px 2px 14px;
               scroll-snap-type: x proximity;
               -webkit-overflow-scrolling: touch;
               scrollbar-width: none;
               }
               #mpTopSellersTrack::-webkit-scrollbar { display: none; }
               .mp-ts-card {
               scroll-snap-align: start;
               flex-shrink: 0;
               width: 132px;
               background: #0d0d14;
               border: 1px solid rgba(255,255,255,.08);
               border-radius: 16px;
               padding: 14px 12px 12px;
               display: flex; flex-direction: column; align-items: center; gap: 8px;
               text-align: center;
               cursor: pointer;
               transition: border-color .2s, box-shadow .2s;
               position: relative;
               }
               .mp-ts-card:hover { border-color: rgba(163,230,53,.35); }
               .mp-ts-rank {
               position: absolute; top: 8px; left: 8px;
               font-size: 10px; font-weight: 800; color: rgba(255,255,255,.3);
               background: rgba(255,255,255,.06); border-radius: 6px;
               width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
               }
               .mp-ts-rank.medal { background: none; font-size: 14px; }
               .mp-ts-av {
               width: 52px; height: 52px; border-radius: 50%;
               background: rgba(163,230,53,.1); border: 2px solid rgba(163,230,53,.25);
               display: flex; align-items: center; justify-content: center;
               font-size: 18px; font-weight: 800; color: #a3e635;
               overflow: hidden; flex-shrink: 0;
               }
               .mp-ts-av img { width: 100%; height: 100%; object-fit: cover; }
               .mp-ts-name {
               font-size: 12px; font-weight: 700; color: #f0f0f8;
               max-width: 100%; display: flex; align-items: center; gap: 3px; min-width: 0;
               }
               .mp-ts-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
               .mp-ts-name .sr-badges { flex-shrink: 0; }
               .mp-ts-name .sr-badge-tier-count { display: none; } /* compact strip: icon only, no count chip */
               .mp-ts-meta {
               font-size: 10px; color: rgba(255,255,255,.4); font-weight: 600;
               }
               .mp-ts-follow-btn {
               width: 100%; margin-top: 2px;
               padding: 6px 0; border-radius: 100px;
               font-size: 10.5px; font-weight: 700;
               background: rgba(163,230,53,.12); border: 1px solid rgba(163,230,53,.3);
               color: #a3e635; cursor: pointer; font-family: inherit;
               transition: all .18s;
               }
               .mp-ts-follow-btn:hover { background: rgba(163,230,53,.22); }
               .mp-ts-follow-btn.mp-ts-following {
               background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55);
               }
               .mp-ts-skel {
               background: #0d0d14; border: 1px solid rgba(255,255,255,.05);
               position: relative; overflow: hidden;
               }
               .mp-ts-skel::after {
               content: ''; position: absolute; inset: 0;
               background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
               animation: mpTsShimmer 1.4s infinite;
               }
               @keyframes mpTsShimmer {
               0%   { transform: translateX(-100%); }
               100% { transform: translateX(100%); }
               }
               #mpTopSellersSection.mp-ts-empty { display: none; }
               @media(max-width:480px){
               #mpTopSellersSection { padding: 12px 14px 4px; }
               .mp-ts-card { width: 112px; padding: 12px 10px 10px; }
               .mp-ts-av { width: 44px; height: 44px; font-size: 15px; }
               }
               /* Legacy compat — hide old icon classes */
               .mp-card-icon, .mp-card-icon-inner, .mp-icon-section, .mp-icon-section-label { display: none !important; }
               /* ─── Read more button ─── */
               .mp-read-more-btn {
               background: none; border: none;
               color: var(--mp-accent); font-size: 13px; font-weight: 600;
               cursor: pointer; font-family: inherit; padding: 0;
               margin-top: -4px; margin-bottom: 6px;
               transition: opacity 0.15s;
               }
               .mp-read-more-btn:hover { opacity: 0.75; }
               @media(max-width:480px){
               .mp-grid { grid-template-columns: 1fr; }
               }
               /* ══════════════════════════════════
               WALLET MODAL (full screen)
               ══════════════════════════════════ */
               #walletModal {
               position: fixed; inset: 0; z-index: 10002;
               background: #0a0a0e;
               display: none; flex-direction: column;
               }
               #walletModal.active { display: flex; }
               #walletModalInner {
               width: 100%; height: 100%;
               display: flex; flex-direction: column;
               background:
                 radial-gradient(circle at 50% 0%, rgba(163,230,53,0.10) 0%, rgba(163,230,53,0) 55%),
                 #0a0a0e;
               }
               #walletModalHeader {
               position: sticky; top: 0; z-index: 10;
               background: rgba(10,10,14,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
               border-bottom: 1px solid rgba(255,255,255,.07);
               display: flex; align-items: center; justify-content: space-between;
               padding: 16px 20px;
               padding-top: max(16px, env(safe-area-inset-top));
               gap: 12px;
               }
               #walletModalHeaderLeft { display: flex; align-items: center; gap: 12px; min-width: 0; }
               #walletModalTitle { font-size: 16px; font-weight: 800; color: #f5f5fa; letter-spacing: -0.01em; }
               #walletModalSub { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; }
               #walletModalClose {
               width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
               background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
               display: flex; align-items: center; justify-content: center;
               cursor: pointer; color: rgba(255,255,255,.55); transition: all .18s;
               }
               #walletModalClose:hover { background: rgba(255,255,255,.12); color: #fff; }
               #walletModalBody {
               flex: 1; overflow-y: auto;
               padding: 20px 18px calc(48px + env(safe-area-inset-bottom));
               max-width: 560px; width: 100%; margin: 0 auto;
               }
               /* Balance hero */
               #walletBalanceCard {
               background:
                 radial-gradient(ellipse 90% 100% at 50% 0%, rgba(163,230,53,0.14) 0%, transparent 70%),
                 linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
               border: 1px solid rgba(163,230,53,0.18);
               border-radius: 22px;
               padding: 26px 22px;
               text-align: center;
               margin-bottom: 20px;
               }
               #walletBalanceLabel { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 0.06em; }
               #walletBalanceAmt { font-size: 40px; font-weight: 800; color: #f5f5fa; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
               #walletPendingRow {
               display: flex; align-items: center; justify-content: center; gap: 6px;
               margin-top: 10px; font-size: 12px; color: #f5a623;
               background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.25);
               border-radius: 20px; padding: 5px 12px; width: fit-content; margin-left: auto; margin-right: auto;
               }
               /* Sub-balance breakdown */
               #walletSubBalances {
               display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
               margin-top: 18px;
               }
               .wallet-subbal {
               display: flex; align-items: center; gap: 8px;
               background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
               border-radius: 12px; padding: 10px 11px; text-align: left;
               }
               .wallet-subbal-icon {
               width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
               display: flex; align-items: center; justify-content: center;
               }
               .wallet-subbal-icon.wd { background: rgba(163,230,53,0.14); color: #a3e635; }
               .wallet-subbal-icon.lk { background: rgba(96,165,250,0.14); color: #60a5fa; }
               .wallet-subbal-icon.inc { background: rgba(245,166,35,0.14); color: #f5a623; }
               .wallet-subbal-mid { min-width: 0; }
               .wallet-subbal-label { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.4); white-space: nowrap; }
               .wallet-subbal-amt { font-size: 14px; font-weight: 800; color: #f5f5fa; margin-top: 1px; font-variant-numeric: tabular-nums; }
               #walletEscrowHint {
               display: flex; align-items: flex-start; gap: 6px;
               margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);
               font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.35); text-align: left;
               }
               #walletEscrowHint svg { flex-shrink: 0; margin-top: 1px; }
               /* Tabs */
               #walletTabs {
               display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
               background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
               border-radius: 14px; padding: 4px; margin-bottom: 22px;
               }
               .wallet-tab {
               background: none; border: none; border-radius: 10px;
               padding: 9px 4px; font-size: 12.5px; font-weight: 700;
               color: rgba(255,255,255,.5); cursor: pointer; font-family: inherit;
               transition: background .18s, color .18s; white-space: nowrap;
               }
               .wallet-tab:hover { color: rgba(255,255,255,.8); }
               .wallet-tab.active { background: #a3e635; color: #0a0a0e; }
               /* Panels */
               .wallet-panel { display: none; flex-direction: column; animation: walletPanelIn .2s ease both; }
               .wallet-panel.active { display: flex; }
               @keyframes walletPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
               /* Addon disclosures (Auto Top-Up inside Add Funds, Auto Send inside Send) */
               .wallet-addon-toggle {
               display: flex; align-items: center; justify-content: space-between;
               width: 100%; margin-top: 18px; padding: 12px 14px;
               background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
               border-radius: 12px; color: rgba(255,255,255,.75);
               font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
               transition: background .18s, border-color .18s;
               }
               .wallet-addon-toggle:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,.14); }
               .wallet-addon-toggle.open { border-color: rgba(163,230,53,.35); background: rgba(163,230,53,.06); color: #f5f5fa; }
               .wallet-addon-toggle-left { display: flex; align-items: center; gap: 8px; }
               .wallet-addon-toggle-left svg { flex-shrink: 0; color: #a3e635; }
               .wallet-addon-chevron { transition: transform .2s ease; flex-shrink: 0; }
               .wallet-addon-toggle.open .wallet-addon-chevron { transform: rotate(180deg); }
               .wallet-addon-panel {
               display: none; flex-direction: column;
               margin-top: 12px; padding: 16px; padding-top: 14px;
               background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
               border-radius: 12px; animation: walletPanelIn .2s ease both;
               }
               .wallet-addon-panel.open { display: flex; }
               .wallet-field-label { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 8px; }
               .wallet-amount-input-wrap {
               display: flex; align-items: center; gap: 4px;
               background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 14px; padding: 14px 16px;
               transition: border-color .18s, box-shadow .18s;
               }
               .wallet-amount-input-wrap:focus-within { border-color: rgba(163,230,53,0.5); box-shadow: 0 0 0 3px rgba(163,230,53,0.12); }
               .wallet-amount-currency { font-size: 22px; font-weight: 700; color: rgba(255,255,255,.4); }
               .wallet-amount-input-wrap input {
               flex: 1; background: none; border: none; outline: none;
               font-size: 22px; font-weight: 700; color: #f5f5fa; font-family: inherit;
               min-width: 0;
               }
               .wallet-amount-input-wrap input::-webkit-outer-spin-button,
               .wallet-amount-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
               #walletWithdrawMaxBtn {
               flex-shrink: 0; background: rgba(163,230,53,0.12); border: 1px solid rgba(163,230,53,0.3);
               color: #a3e635; font-size: 11.5px; font-weight: 800; font-family: inherit;
               border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: background .16s;
               }
               #walletWithdrawMaxBtn:hover { background: rgba(163,230,53,0.22); }
               .wallet-text-input {
               width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 14px; padding: 13px 16px; font-size: 14.5px; font-weight: 500;
               color: #f5f5fa; font-family: inherit; outline: none;
               transition: border-color .18s, box-shadow .18s;
               }
               .wallet-text-input:focus { border-color: rgba(163,230,53,0.5); box-shadow: 0 0 0 3px rgba(163,230,53,0.12); }
               .wallet-text-input::placeholder { color: rgba(255,255,255,.28); }
               .wallet-quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
               .wallet-quick-btn {
               background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 10px; padding: 9px 4px; font-size: 12.5px; font-weight: 700;
               color: rgba(255,255,255,.65); cursor: pointer; font-family: inherit;
               transition: all .16s;
               }
               .wallet-quick-btn:hover { border-color: rgba(163,230,53,0.4); color: #a3e635; }
               .wallet-quick-btn.active { background: rgba(163,230,53,0.14); border-color: rgba(163,230,53,0.45); color: #a3e635; }
               /* Withdraw: available-to-withdraw banner */
               #walletWithdrawAvailBanner {
               display: flex; align-items: center; justify-content: space-between;
               background: rgba(163,230,53,0.07); border: 1px solid rgba(163,230,53,0.2);
               border-radius: 12px; padding: 11px 14px; margin-bottom: 16px;
               font-size: 12.5px; color: rgba(255,255,255,.6);
               }
               #walletWithdrawAvailBanner strong { color: #a3e635; font-size: 15px; font-variant-numeric: tabular-nums; }
               /* Withdraw: payment method cards */
               #walletMethodGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
               #awdMethodGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
               .wallet-method-card {
               display: flex; flex-direction: column; align-items: center; gap: 6px;
               background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
               border-radius: 14px; padding: 14px 8px; cursor: pointer; font-family: inherit;
               color: rgba(255,255,255,.55); transition: all .16s;
               }
               .wallet-method-card span { font-size: 12.5px; font-weight: 700; }
               .wallet-method-card:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,.8); }
               .wallet-method-card.active { background: rgba(163,230,53,0.1); border-color: rgba(163,230,53,0.45); color: #a3e635; }
               /* Withdraw: schedule chips + date/time fields */
               #walletScheduleRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .wallet-schedule-chip {
               display: flex; align-items: center; justify-content: center; gap: 6px;
               background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
               border-radius: 12px; padding: 11px 6px; cursor: pointer; font-family: inherit;
               font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); transition: all .16s;
               }
               .wallet-schedule-chip:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,.8); }
               .wallet-schedule-chip.active { background: rgba(163,230,53,0.1); border-color: rgba(163,230,53,0.45); color: #a3e635; }
               #walletScheduleFields { margin-top: 10px; }
               .wallet-schedule-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
               .wallet-schedule-field label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); display: block; margin-bottom: 6px; }
               .wallet-schedule-field input {
               width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 12px; padding: 11px 12px; font-size: 13.5px; font-weight: 600;
               color: #f5f5fa; font-family: inherit; outline: none; color-scheme: dark;
               transition: border-color .18s, box-shadow .18s;
               }
               .wallet-schedule-field input:focus { border-color: rgba(163,230,53,0.5); box-shadow: 0 0 0 3px rgba(163,230,53,0.12); }
               /* Send: recipient lookup status icon inside the input */
               .wallet-input-status-wrap { position: relative; }
               .wallet-input-status-wrap input { padding-right: 40px; }
               .wallet-input-status-icon {
               position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
               width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
               }
               .wallet-input-status-icon.loading::after {
               content: ''; width: 14px; height: 14px; border-radius: 50%;
               border: 2px solid rgba(255,255,255,0.15); border-top-color: #a3e635;
               animation: mp-spin 0.7s linear infinite;
               }
               .wallet-input-status-icon.ok { color: #a3e635; }
               .wallet-input-status-icon.err { color: #f76464; }
               .wallet-hint { font-size: 11.5px; color: rgba(255,255,255,.32); margin-top: 10px; }
               .wallet-msg { font-size: 12.5px; font-weight: 600; margin-top: 12px; min-height: 0; transition: all .15s; }
               .wallet-msg:empty { margin-top: 0; }
               .wallet-msg.ok  { color: #a3e635; }
               .wallet-msg.err { color: #f76464; }
               .wallet-fee-breakdown {
               background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
               border-radius: 12px; padding: 12px 14px; margin-top: 14px;
               display: flex; flex-direction: column; gap: 6px;
               }
               .wallet-fee-line { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.5); }
               .wallet-fee-line.total { font-size: 13.5px; font-weight: 700; color: #f5f5fa; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
               .wallet-submit-btn {
               margin-top: 18px; width: 100%; background: #a3e635; border: none;
               border-radius: 14px; padding: 15px; font-size: 14.5px; font-weight: 800;
               color: #0a0a0e; cursor: pointer; font-family: inherit;
               display: flex; align-items: center; justify-content: center; gap: 8px;
               transition: transform .12s, opacity .12s;
               }
               .wallet-submit-btn:hover { transform: translateY(-1px); }
               .wallet-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
               .wallet-recipient-preview {
               display: flex; align-items: center; gap: 10px;
               background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.25);
               border-radius: 14px; padding: 11px 13px; margin-top: 8px; font-size: 13px;
               animation: walletPanelIn .18s ease both;
               }
               .wallet-recipient-preview .wrp-avatar {
               width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
               background: rgba(163,230,53,0.2); color: #a3e635; font-weight: 700; font-size: 13px;
               display: flex; align-items: center; justify-content: center;
               }
               .wallet-recipient-preview .wrp-avatar img { width: 100%; height: 100%; object-fit: cover; }
               .wallet-recipient-preview .wrp-mid { flex: 1; min-width: 0; }
               .wallet-recipient-preview .wrp-name { font-weight: 700; color: #f5f5fa; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .wallet-recipient-preview .wrp-email { font-size: 11.5px; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
               .wallet-recipient-preview .wrp-badge {
               flex-shrink: 0; display: flex; align-items: center; gap: 4px;
               background: rgba(163,230,53,0.16); color: #a3e635; font-size: 10.5px; font-weight: 800;
               border-radius: 20px; padding: 4px 9px;
               }
               .wallet-recipient-preview.err { background: rgba(247,100,100,0.08); border-color: rgba(247,100,100,0.25); color: #f76464; }
               .wallet-recipient-preview.err .wrp-name { color: #f76464; }
               /* History list */
               #walletPanelHistory { display: none; }
               #walletPanelHistory.active { display: block; }
               #walletHistoryList { display: flex; flex-direction: column; gap: 8px; }
               .wallet-tx-row {
               display: flex; align-items: center; gap: 12px;
               background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
               border-radius: 14px; padding: 12px 14px;
               }
               .wallet-tx-icon {
               width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
               display: flex; align-items: center; justify-content: center;
               }
               .wallet-tx-icon.pos { background: rgba(163,230,53,0.14); color: #a3e635; }
               .wallet-tx-icon.neg { background: rgba(247,100,100,0.12); color: #f76464; }
               .wallet-tx-icon.pending { background: rgba(245,166,35,0.12); color: #f5a623; }
               .wallet-tx-mid { flex: 1; min-width: 0; }
               .wallet-tx-label { font-size: 13.5px; font-weight: 600; color: #f5f5fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .wallet-tx-sub { font-size: 11.5px; color: rgba(255,255,255,.38); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .wallet-tx-fee { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; white-space: normal; overflow-wrap: break-word; line-height: 1.4; }
               .wallet-tx-amt { font-size: 14px; font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; }
               .wallet-tx-amt.pos { color: #a3e635; }
               .wallet-tx-amt.neg { color: #f76464; }
               #walletHistoryEmpty {
               display: none; flex-direction: column; align-items: center; justify-content: center;
               gap: 12px; padding: 60px 20px; color: rgba(255,255,255,.3); font-size: 13px; text-align: center;
               }
               .wallet-skel-row {
               height: 60px; border-radius: 14px;
               background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%);
               background-size: 200% 100%;
               animation: lb-shimmer 1.4s ease-in-out infinite;
               border: 1px solid rgba(255,255,255,.05);
               }
               /* ══════════════════════════════════
               LEADERBOARD MODAL (full screen)
               ══════════════════════════════════ */
               #lbModal {
               position: fixed; inset: 0; z-index: 10000;
               background: #0a0a0e;
               display: none; flex-direction: column;
               }
               #lbModal.active { display: flex; }
               #lbModalInner {
               width: 100%; height: 100%;
               display: flex; flex-direction: column;
               background:
                 radial-gradient(circle at 50% 0%, rgba(163,230,53,0.08) 0%, rgba(163,230,53,0) 55%),
                 #0a0a0e;
               }
               #lbModalHeader {
               position: sticky; top: 0; z-index: 10;
               background: rgba(10,10,14,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
               border-bottom: 1px solid rgba(255,255,255,.07);
               display: flex; align-items: center; justify-content: space-between;
               padding: 16px 20px;
               padding-top: max(16px, env(safe-area-inset-top));
               gap: 12px;
               }
               #lbModalHeaderLeft { display: flex; align-items: center; gap: 12px; min-width: 0; }
               #lbModalTitle { font-size: 16px; font-weight: 800; color: #f5f5fa; letter-spacing: -0.01em; }
               #lbModalSub { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; }
               #lbModalClose {
               width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
               background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
               display: flex; align-items: center; justify-content: center;
               cursor: pointer; color: rgba(255,255,255,.55); transition: all .18s;
               }
               #lbModalClose:hover { background: rgba(255,255,255,.12); color: #fff; }
               #lbModalBody {
               flex: 1; overflow-y: auto;
               padding: 18px 14px calc(40px + env(safe-area-inset-bottom));
               }
               #lbModalList { display: flex; flex-direction: column; gap: 9px; max-width: 640px; margin: 0 auto; }
               #lbModalEmpty { display:none; text-align: center; padding: 60px 20px; color: rgba(255,255,255,.3); font-size: 13px; max-width: 640px; margin: 0 auto; }

               /* Skeleton loading rows */
               .lb-skel-row {
               height: 72px; border-radius: 16px;
               background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%);
               background-size: 200% 100%;
               animation: lb-shimmer 1.4s ease-in-out infinite;
               border: 1px solid rgba(255,255,255,.05);
               }
               @keyframes lb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

               /* ── AI Agent Modal ─────────────────────────────────────── */
               #agentModal {
                 position: fixed; inset: 0; z-index: 10001;
                 background: #080810;
                 display: none; flex-direction: column;
                 font-family: inherit;
               }
               #agentModal.active { display: flex; }
               #agentModalInner {
                 width: 100%; height: 100%;
                 display: flex; flex-direction: column;
                 background:
                   radial-gradient(ellipse 70% 40% at 50% 0%, rgba(139,92,246,0.12) 0%, transparent 65%),
                   radial-gradient(ellipse 40% 30% at 80% 100%, rgba(99,102,241,0.07) 0%, transparent 60%),
                   #080810;
               }
               #agentModalHeader {
                 position: sticky; top: 0; z-index: 10;
                 background: rgba(8,8,16,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
                 border-bottom: 1px solid rgba(255,255,255,.06);
                 display: flex; align-items: center; justify-content: space-between;
                 padding: 16px 20px;
                 padding-top: max(16px, env(safe-area-inset-top));
                 gap: 12px;
               }
               #agentModalHeaderLeft { display: flex; align-items: center; gap: 12px; min-width: 0; }
               #agentModalTitle { font-size: 16px; font-weight: 800; color: #f0f0fa; letter-spacing: -0.01em; }
               #agentModalSub { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 1px; }
               #agentModalClose {
                 width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
                 background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
                 display: flex; align-items: center; justify-content: center;
                 cursor: pointer; color: rgba(255,255,255,.5); transition: all .18s;
               }
               #agentModalClose:hover { background: rgba(255,255,255,.11); color: #fff; }
               #agentModalBody {
                 flex: 1; overflow-y: auto;
                 padding: 22px 16px calc(50px + env(safe-area-inset-bottom));
               }
               #agentModalContent { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

               /* Agent status bar */
               #agentStatusBar {
                 background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
                 border-radius: 18px; padding: 16px 18px;
                 display: flex; align-items: center; gap: 14px;
               }
               #agentStatusIconWrap {
                 width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
                 display: flex; align-items: center; justify-content: center;
                 background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22);
                 transition: all .3s;
               }
               #agentStatusIconWrap.online { background: rgba(163,230,53,.1); border-color: rgba(163,230,53,.28); }
               #agentStatusMeta { flex: 1; min-width: 0; }
               #agentStatusName { font-size: 14px; font-weight: 700; color: #e8e8f8; }
               #agentStatusLine { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
               #agentStatusPill {
                 padding: 4px 11px; border-radius: 20px; font-size: 10px; font-weight: 800;
                 letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0;
                 background: rgba(100,100,120,.15); color: rgba(255,255,255,.3);
                 border: 1px solid rgba(255,255,255,.07); transition: all .3s;
               }
               #agentStatusPill.online { background: rgba(163,230,53,.1); color: #a3e635; border-color: rgba(163,230,53,.25); }

               /* Heartbeat animation when agent is active */
               @keyframes agentPulse {
                 0%,100% { box-shadow: 0 0 0 0 rgba(163,230,53,.3); }
                 50% { box-shadow: 0 0 0 6px rgba(163,230,53,.0); }
               }
               #agentStatusIconWrap.online { animation: agentPulse 2.4s ease-in-out infinite; }

               /* API Key selector card */
               #agentKeyCard {
                 background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
                 border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
               }
               .agent-card-label {
                 font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
                 color: rgba(255,255,255,.3);
               }
               #agentKeySelect {
                 width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
                 border-radius: 10px; padding: 10px 14px; color: #e0e0f0; font-size: 13px;
                 font-family: inherit; cursor: pointer; appearance: none; outline: none;
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
                 background-repeat: no-repeat; background-position: right 12px center;
                 transition: border-color .18s;
               }
               #agentKeySelect:focus { border-color: rgba(139,92,246,.5); }
               #agentKeySelect option { background: #141420; color: #e0e0f0; }
               #agentNoKeyBanner {
                 display: none; align-items: center; gap: 10px;
                 background: rgba(139,92,246,.07); border: 1px dashed rgba(139,92,246,.25);
                 border-radius: 12px; padding: 12px 14px;
               }
               #agentNoKeyBanner.visible { display: flex; }
               #agentNoKeyBanner svg { flex-shrink: 0; }
               .agent-nokey-text { flex: 1; font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5; }
               #agentCreateKeyBtn {
                 margin-top: 4px; padding: 9px 16px; border-radius: 10px; font-size: 12px;
                 font-weight: 700; cursor: pointer; font-family: inherit; border: none;
                 background: rgba(139,92,246,.18); color: #c4b5fd;
                 border: 1px solid rgba(139,92,246,.3); transition: all .18s; white-space: nowrap;
               }
               #agentCreateKeyBtn:hover { background: rgba(139,92,246,.28); border-color: rgba(139,92,246,.5); }

               /* Section headers */
               .agent-section-head {
                 display: flex; align-items: center; gap: 8px;
                 font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
                 color: rgba(255,255,255,.28); padding: 0 2px; margin-top: 4px;
               }
               .agent-section-head::after {
                 content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06);
               }

               /* Toggle cards */
               .agent-toggle-card {
                 background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
                 border-radius: 16px; padding: 14px 16px;
                 display: flex; align-items: flex-start; gap: 12px;
                 transition: border-color .2s, background .2s;
                 cursor: default;
               }
               .agent-toggle-card.disabled { opacity: 0.4; pointer-events: none; }
               .agent-toggle-card:hover:not(.disabled) { border-color: rgba(255,255,255,.1); }
               .agent-toggle-icon {
                 width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
                 display: flex; align-items: center; justify-content: center;
               }
               .agent-toggle-meta { flex: 1; min-width: 0; padding-top: 1px; }
               .agent-toggle-title { font-size: 13px; font-weight: 700; color: #d8d8ec; line-height: 1.3; }
               .agent-toggle-desc { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 3px; line-height: 1.5; }
               .agent-toggle-extra { margin-top: 10px; display: none; }
               .agent-toggle-extra.visible { display: block; }

               /* Threshold input */
               .agent-threshold-row {
                 display: flex; align-items: center; gap: 8px; margin-top: 2px;
               }
               .agent-threshold-label { font-size: 11px; color: rgba(255,255,255,.4); white-space: nowrap; }
               .agent-threshold-input {
                 background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
                 border-radius: 8px; padding: 6px 10px; color: #e0e0f0; font-size: 12px;
                 font-family: inherit; outline: none; width: 80px; transition: border-color .18s;
               }
               .agent-threshold-input:focus { border-color: rgba(139,92,246,.45); }

               /* The toggle switch itself */
               .agent-sw { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
               .agent-sw input { opacity: 0; width: 0; height: 0; }
               .agent-sw-track {
                 position: absolute; inset: 0; border-radius: 11px;
                 background: rgba(255,255,255,.1); transition: background .2s;
                 border: 1px solid rgba(255,255,255,.08);
               }
               .agent-sw input:checked ~ .agent-sw-track { background: #7c3aed; border-color: #7c3aed; }
               .agent-sw-thumb {
                 position: absolute; left: 3px; top: 3px;
                 width: 14px; height: 14px; border-radius: 50%;
                 background: rgba(255,255,255,.45); transition: all .2s;
                 box-shadow: 0 1px 3px rgba(0,0,0,.4);
               }
               .agent-sw input:checked ~ .agent-sw-track .agent-sw-thumb {
                 left: 21px; background: #fff;
               }

               /* Activity log */
               #agentActivityCard {
                 background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
                 border-radius: 16px; padding: 14px 16px;
               }
               #agentActivityList { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
               .agent-act-row {
                 display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px;
                 background: rgba(255,255,255,.02); border-radius: 10px;
               }
               .agent-act-dot {
                 width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
               }
               .agent-act-dot.green { background: #a3e635; }
               .agent-act-dot.violet { background: #8b5cf6; }
               .agent-act-dot.amber { background: #f59e0b; }
               .agent-act-dot.red { background: #ef4444; }
               .agent-act-body { flex: 1; min-width: 0; }
               .agent-act-msg { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.4; }
               .agent-act-time { font-size: 10px; color: rgba(255,255,255,.25); margin-top: 2px; }
               #agentNoActivity {
                 font-size: 12px; color: rgba(255,255,255,.25); text-align: center;
                 padding: 20px 0; margin-top: 4px;
               }

               /* Save / activate button */
               #agentSaveBtn {
                 width: 100%; padding: 13px; border-radius: 14px; font-size: 14px;
                 font-weight: 800; cursor: pointer; font-family: inherit; border: none;
                 background: rgba(139,92,246,.15); color: rgba(139,92,246,.5);
                 border: 1px solid rgba(139,92,246,.2); transition: all .25s;
                 letter-spacing: -0.01em;
               }
               #agentSaveBtn.enabled {
                 background: linear-gradient(135deg, #7c3aed, #6d28d9);
                 color: #fff; border-color: transparent;
                 box-shadow: 0 4px 20px rgba(124,58,237,.35);
               }
               #agentSaveBtn.enabled:hover {
                 transform: translateY(-1px);
                 box-shadow: 0 6px 26px rgba(124,58,237,.45);
               }
               #agentSaveBtn.active-state {
                 background: linear-gradient(135deg, #16a34a, #15803d);
                 color: #fff; border-color: transparent;
                 box-shadow: 0 4px 20px rgba(22,163,74,.3);
               }
               #agentSaveBtn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

               /* Danger zone */
               #agentDangerCard {
                 background: rgba(239,68,68,.04); border: 1px solid rgba(239,68,68,.12);
                 border-radius: 14px; padding: 12px 14px;
                 display: flex; align-items: center; justify-content: space-between; gap: 10px;
               }

               /* ── Agent plan cards ─────────────────────────────────── */
               #agentPlanWrap {
                 display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
               }
               @media (max-width: 480px) {
                 #agentPlanWrap { grid-template-columns: repeat(2, 1fr); }
               }
               .agent-plan-card {
                 background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
                 border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column;
                 gap: 5px; cursor: default; transition: border-color .2s;
               }
               .agent-plan-card.apc-active {
                 border-color: var(--apc-color, rgba(139,92,246,.5));
                 background: rgba(var(--apc-rgb, 139,92,246), .07);
               }
               .apc-name {
                 font-size: 11px; font-weight: 800; text-transform: uppercase;
                 letter-spacing: 0.06em; color: var(--apc-color, rgba(255,255,255,.4));
               }
               .apc-rpd {
                 font-size: 18px; font-weight: 800; color: #e8e8f8; line-height: 1.1;
               }
               .apc-rpd span { font-size: 10px; font-weight: 500; color: rgba(255,255,255,.3); }
               .apc-keys {
                 font-size: 10px; color: rgba(255,255,255,.3); margin-top: 1px;
               }
               .apc-badge {
                 margin-top: 4px; display: inline-block; font-size: 9px; font-weight: 700;
                 padding: 2px 7px; border-radius: 20px; text-transform: uppercase;
                 letter-spacing: 0.05em; background: rgba(var(--apc-rgb, 139,92,246), .18);
                 color: var(--apc-color, #c4b5fd); border: 1px solid rgba(var(--apc-rgb, 139,92,246), .25);
                 align-self: flex-start;
               }
               .apc-badge.apc-upgrade {
                 background: rgba(255,255,255,.05); color: rgba(255,255,255,.3);
                 border-color: rgba(255,255,255,.08);
               }

               /* ── Daily usage bar ──────────────────────────────────── */
               #agentUsageCard {
                 background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
                 border-radius: 14px; padding: 13px 16px; display: flex;
                 flex-direction: column; gap: 8px;
               }
               #agentUsageTop {
                 display: flex; align-items: center; justify-content: space-between;
               }
               #agentUsageLabel {
                 font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45);
               }
               #agentUsageCount {
                 font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5);
                 font-variant-numeric: tabular-nums;
               }
               #agentUsageTrack {
                 height: 5px; border-radius: 3px; background: rgba(255,255,255,.08);
                 overflow: hidden;
               }
               #agentUsageFill {
                 height: 100%; border-radius: 3px;
                 background: linear-gradient(90deg, #7c3aed, #8b5cf6);
                 transition: width .5s ease; width: 0%;
               }
               #agentUsageFill.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
               #agentUsageFill.full { background: linear-gradient(90deg, #ef4444, #f87171); }
               #agentUsageReset {
                 font-size: 10px; color: rgba(255,255,255,.2); text-align: right;
               }

               /* ── Key limit badge in key card ─────────────────────── */
               #agentKeyLimitRow {
                 display: flex; align-items: center; justify-content: space-between;
                 gap: 6px;
               }
               #agentKeyLimitBadge {
                 font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
                 background: rgba(139,92,246,.12); color: #c4b5fd;
                 border: 1px solid rgba(139,92,246,.25); white-space: nowrap; flex-shrink: 0;
               }
               .agent-danger-meta { flex: 1; }
               .agent-danger-title { font-size: 12px; font-weight: 700; color: rgba(239,68,68,.7); }
               .agent-danger-desc { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 2px; }
               #agentDeactivateBtn {
                 padding: 7px 14px; border-radius: 9px; font-size: 11px; font-weight: 700;
                 cursor: pointer; font-family: inherit; border: 1px solid rgba(239,68,68,.25);
                 background: rgba(239,68,68,.08); color: rgba(239,68,68,.7); transition: all .18s;
                 white-space: nowrap;
               }
               #agentDeactivateBtn:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); }

               /* Agent toggle icon colors */
               .ati-violet { background: rgba(139,92,246,.12); color: #a78bfa; }
               .ati-green  { background: rgba(163,230,53,.1);  color: #a3e635; }
               .ati-amber  { background: rgba(245,158,11,.1);  color: #fbbf24; }
               .ati-blue   { background: rgba(96,165,250,.1);  color: #93c5fd; }
               .ati-red    { background: rgba(239,68,68,.1);   color: #fca5a5; }
               .ati-cyan   { background: rgba(34,211,238,.1);  color: #67e8f9; }
               .ati-rose   { background: rgba(244,63,94,.1);   color: #fda4af; }

               /* Leaderboard row */
               .lb-row {
               display: flex; align-items: center; gap: 12px;
               background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
               border-radius: 16px; padding: 11px 14px;
               cursor: pointer; transition: all .18s;
               position: relative; overflow: hidden;
               }
               .lb-row:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); transform: translateY(-1px); }
               .lb-row:active { transform: translateY(0) scale(0.99); }
               /* Top 3 get a subtle lime tint */
               .lb-row.lb-top3 { background: rgba(163,230,53,.05); border-color: rgba(163,230,53,.18); }
               .lb-row.lb-top3:hover { background: rgba(163,230,53,.09); border-color: rgba(163,230,53,.3); }
               .lb-row.lb-rank1 { background: linear-gradient(100deg, rgba(163,230,53,.1), rgba(163,230,53,.04)); border-color: rgba(163,230,53,.35); }

               .lb-rank {
               width: 28px; flex-shrink: 0; text-align: center;
               font-size: 14px; font-weight: 800; color: rgba(255,255,255,.3);
               font-variant-numeric: tabular-nums;
               }
               .lb-rank.lb-rank-medal { font-size: 18px; }

               .lb-av-wrap { position: relative; flex-shrink: 0; }
               .lb-av {
               width: 46px; height: 46px; border-radius: 50%;
               background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1);
               display: flex; align-items: center; justify-content: center;
               font-size: 17px; font-weight: 800; color: #fff; overflow: hidden;
               }
               .lb-av img { width: 100%; height: 100%; object-fit: cover; }
               .lb-row.lb-rank1 .lb-av { border-color: #a3e635; box-shadow: 0 0 0 3px rgba(163,230,53,.18); }
               .lb-crown {
               position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(0deg);
               width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
               }

               .lb-info { flex: 1; min-width: 0; }
               .lb-name { font-size: 14px; font-weight: 700; color: #f0f0f8; display: flex; align-items: center; gap: 6px; min-width: 0; }
               .lb-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
               .lb-handle { font-size: 11.5px; color: rgba(255,255,255,.35); margin-top: 1px; }
               .lb-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
               .lb-meta-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(255,255,255,.45); }
               .lb-meta-item svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .7; }
               .lb-listing-count { color: #a3e635; font-weight: 700; }

               .lb-follow-btn {
               flex-shrink: 0;
               display: flex; align-items: center; justify-content: center; gap: 5px;
               padding: 8px 13px; border-radius: 20px;
               border: 1px solid rgba(255,255,255,.14);
               background: rgba(255,255,255,.05);
               color: rgba(255,255,255,.75); font-size: 11.5px; font-weight: 700;
               cursor: pointer; font-family: inherit;
               transition: all .18s; white-space: nowrap;
               }
               .lb-follow-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
               .lb-follow-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
               .lb-follow-btn.lb-following {
               background: rgba(163,230,53,.12); border-color: rgba(163,230,53,.32); color: #a3e635;
               }
               .lb-follow-btn.lb-following:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.32); color: #f87171; }

               @media (max-width: 480px) {
               .lb-follow-btn span.lb-follow-text { display: none; }
               .lb-follow-btn { padding: 9px; border-radius: 50%; width: 34px; height: 34px; }
               .lb-follow-btn svg { width: 14px; height: 14px; }
               }

               /* ══════════════════════════════════
               SELLER PROFILE MODAL
               ══════════════════════════════════ */
               #spModal {
               position: fixed; inset: 0; z-index: 9999;
               background: #000000;
               display: none; align-items: flex-start; justify-content: center;
               overflow-y: auto;
               padding: 0;
               }
               #spModal.active { display: flex; }
               #spModalInner {
               width: 100%; max-width: 800px;
               background: #000000;
               min-height: 100vh;
               display: flex; flex-direction: column;
               position: relative;
               }
               #spModalClose {
               position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10;
               width: 38px; height: 38px; border-radius: 50%;
               background: #0d0d0d; border: 1px solid #222;
               display: flex; align-items: center; justify-content: center;
               cursor: pointer; transition: all .2s ease; color: #999;
               }
               #spModalClose:hover { background: #1a1a1a; border-color: #444; color: #fff; }
               #spModalClose svg { width: 17px; height: 17px; }
               /* Cover */
               #spModalCover {
               width: 100%; height: 180px;
               background: #0d0d0d; background-size: cover; background-position: center;
               }
               #spModalCover img { width: 100%; height: 100%; object-fit: cover; display: block; }
               /* Main content */
               #spModalMain {
               width: 100%; padding: 0 1.5rem 2rem; position: relative;
               z-index: 2;
               }
               /* Avatar row — only the avatar overlaps the cover photo */
               #spModalAvatarRow { margin-top: -52px; margin-bottom: .85rem; }
               #spModalAv {
               width: 100px; height: 100px; border-radius: 50%;
               border: 3px solid #000; display: flex; align-items: center; justify-content: center;
               object-fit: cover; background: #1a1a1a; flex-shrink: 0;
               font-size: 30px; font-weight: 800; color: #fff; overflow: hidden;
               }
               #spModalAv img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
               /* Name/handle/bio — always on the solid background below the cover, never overlapping it */
               #spModalNameInfo { padding-bottom: .3rem; }
               #spModalNameLine { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
               #spModalName { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: #f0f0f0; }
               #spModalHandle { font-size: .85rem; font-weight: 500; color: var(--mp-accent, #a3e635); background: rgba(163,230,53,.12); padding: .2rem .6rem; border-radius: 40px; white-space: nowrap; }
               #spModalBio {
               margin-top: .35rem; font-size: .85rem; color: #999; line-height: 1.5;
               max-width: 480px; white-space: pre-wrap; word-break: break-word; display: none;
               }
               #spModalBioText {
               display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
               overflow: hidden;
               }
               #spModalBioMore {
               display: inline-flex; margin-top: .3rem; font-size: .8rem; font-weight: 600;
               color: var(--mp-accent, #a3e635); background: none; border: none; padding: 0; cursor: pointer;
               font-family: inherit;
               }
               #spModalBioMore:hover { color: #bef264; text-decoration: underline; }
               /* Actions row */
               #spModalActions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
               .sp-action-btn {
               display: inline-flex; align-items: center; gap: .4rem;
               padding: .5rem 1.1rem; font-size: .84rem; font-weight: 600;
               border-radius: 40px; cursor: pointer; transition: all .2s ease;
               border: none; font-family: inherit; letter-spacing: -0.01em;
               white-space: nowrap; line-height: 1;
               background: var(--mp-accent, #a3e635); color: #0b0b0f;
               }
               .sp-action-btn:hover { background: #bef264; }
               .sp-action-btn svg { flex-shrink: 0; width: 14px; height: 14px; }
               .sp-action-btn.sp-follow-active { background: transparent; color: var(--mp-accent, #a3e635); border: 1px solid rgba(163,230,53,.35); }
               .sp-action-btn.sp-follow-active:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); color: #f87171; }
               #spRateBtn { background: transparent; color: #f0f0f0; border: 1px solid #333; }
               /* Donate — warm rose accent, distinct from Follow (lime) and Rate (neutral) */
               .sp-donate-btn { background: transparent; color: #fb7185; border: 1px solid rgba(251,113,133,.35); }
               .sp-donate-btn:hover { background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.55); }
               .sp-donate-btn svg { fill: none; }
               .sp-donate-btn:hover svg { fill: rgba(251,113,133,.25); }
               /* Report seller — kept visually distinct (muted red) so it doesn't
                  compete with Follow/Rate but is still easy to find */
               .sp-report-btn { background: transparent; color: #f87171; border: 1px solid rgba(248,113,113,.3); margin-left: auto; }
               .sp-report-btn:hover { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.5); }
               #spRateBtn:hover { background: #0f0f0f; border-color: #555; }
               #spFollowerCount {
               font-size: 10px; font-weight: 700;
               background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
               border-radius: 20px; padding: 2px 7px; color: rgba(255,255,255,.6);
               display: inline-flex; align-items: center; justify-content: center; margin-left: 2px;
               }
               #spModalStars { display: inline-flex; align-items: center; gap: .35rem; background: #0d0d0d; padding: .4rem .85rem .4rem .65rem; border-radius: 40px; font-size: .84rem; font-weight: 500; color: #f0f0f0; border: 1px solid #1a1a1a; white-space: nowrap; margin-left: auto; }
               #spModalStars .sp-stars-icons { display: inline-flex; gap: 1px; color: #f5c842; }
               #spModalStars .sp-stars-icons svg { width: 12px; height: 12px; }
               #spModalStarCount { color: #777; font-weight: 400; font-size: .76rem; }
               /* Stats grid */
               #spModalStats {
               display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
               margin-top: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #1a1a1a;
               }
               .sp-stat {
               background: #0a0a0a; border-radius: 16px; padding: .75rem .5rem; text-align: center;
               transition: background .2s ease; border: 1px solid transparent;
               }
               .sp-stat:hover { background: #111; border-color: rgba(163,230,53,.25); }
               .sp-stat-val { font-size: 1.35rem; font-weight: 700; color: #f0f0f0; letter-spacing: -.02em; line-height: 1.2; }
               .sp-stat-lbl { font-size: .66rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: #777; margin-top: .1rem; display: flex; align-items: center; justify-content: center; gap: 4px; }
               .sp-stat-lbl svg { flex-shrink: 0; color: #555; width: 10px; height: 10px; }
               .sp-stat.sp-stat-joined .sp-stat-val { font-size: .95rem; font-weight: 600; }
               /* Social links */
               #spModalSocials { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; padding-top: 1rem; }
               .sp-social-btn {
               display: flex; align-items: center; gap: 5px;
               background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
               border-radius: 20px; padding: 6px 13px; font-size: 11px; font-weight: 600;
               color: rgba(255,255,255,.6); text-decoration: none; transition: all .18s; cursor: pointer;
               }
               .sp-social-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
               .sp-social-btn svg { flex-shrink: 0; }
               /* Listings section */
               #spModalListingsSection { padding-top: 1.25rem; }
               #spModalListingsHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: .65rem; }
               #spModalListingsHeader h2 { font-size: .95rem; font-weight: 600; color: #f0f0f0; display: flex; align-items: center; gap: .45rem; letter-spacing: -.01em; }
               #spModalListingsHeader h2 svg { color: var(--mp-accent, #a3e635); flex-shrink: 0; width: 17px; height: 17px; }
               .sp-toggle-tabs { display: flex; gap: .3rem; background: #0a0a0a; border-radius: 40px; padding: .22rem; border: 1px solid #1a1a1a; }
               .sp-toggle-tab {
               padding: .32rem .8rem; border-radius: 40px; font-size: .72rem; font-weight: 600; cursor: pointer;
               transition: all .2s ease; border: none; background: transparent; color: #888;
               display: flex; align-items: center; gap: .35rem; white-space: nowrap; font-family: inherit; letter-spacing: -.01em;
               }
               .sp-toggle-tab.active { background: rgba(163,230,53,.14); color: var(--mp-accent, #a3e635); }
               .sp-toggle-tab:hover:not(.active) { color: #bbb; background: #111; }
               .sp-toggle-tab svg { flex-shrink: 0; width: 12px; height: 12px; }
               .sp-badge-count { background: #0a0a0a; color: #999; font-size: .7rem; font-weight: 600; padding: .18rem .6rem; border-radius: 40px; border: 1px solid #1a1a1a; margin-left: auto; }

               /* ═══════════════════════════════════════════════════════
                  SELLER TRUST BADGES — verified checkmark + deal-tier
                  badge, generated by sellerBadgesHtml() and dropped inline
                  next to the seller's name everywhere it renders (listing
                  cards, marketplace modal, seller profile, leaderboard,
                  top sellers strip). Kept as a single shared component so
                  the tiers/thresholds only ever need to change in one place.
               ═══════════════════════════════════════════════════════ */
               .sr-badges { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; vertical-align: middle; }
               .sr-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
               .sr-badge svg { display: block; }
               .sr-badge[title] { cursor: default; }

               /* Verified checkmark — blue at 1k+ followers, gold if also Legendary tier */
               .sr-badge-verified-blue svg circle { fill: #3b9dff; }
               .sr-badge-verified-gold svg circle { fill: #f2b632; }
               .sr-badge-verified-blue svg path, .sr-badge-verified-gold svg path { stroke: #0a0a0d; }

               /* Premium plan verified checkmark — lime, shown for Starter/Growth/Pro
                  subscribers regardless of follower count or deal history. Rendered
                  alongside (not instead of) the earned follower/legendary badge if
                  the seller has both. */
               .sr-badge-verified-premium svg circle { fill: #a3e635; }
               .sr-badge-verified-premium svg path { stroke: #0a0a0d; }

               /* Deal-count tier badge — icon + tight numeric chip, color keyed per tier */
               .sr-badge-tier { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 20px; border: 1px solid; }
               .sr-badge-tier-count { font-size: 10px; font-weight: 800; letter-spacing: .01em; line-height: 1.5; }
               .sr-badge-tier-bronze { background: rgba(205,127,50,.13); border-color: rgba(205,127,50,.45); }
               .sr-badge-tier-bronze .sr-badge-tier-count { color: #d38a4e; }
               .sr-badge-tier-bronze svg circle, .sr-badge-tier-bronze svg path { fill: #cd7f32; }
               .sr-badge-tier-silver { background: rgba(192,197,206,.13); border-color: rgba(192,197,206,.45); }
               .sr-badge-tier-silver .sr-badge-tier-count { color: #c7ccd4; }
               .sr-badge-tier-silver svg circle, .sr-badge-tier-silver svg path { fill: #c0c5ce; }
               .sr-badge-tier-gold { background: rgba(242,182,50,.14); border-color: rgba(242,182,50,.5); }
               .sr-badge-tier-gold .sr-badge-tier-count { color: #f2b632; }
               .sr-badge-tier-gold svg circle, .sr-badge-tier-gold svg path { fill: #f2b632; }
               .sr-badge-tier-legendary { background: linear-gradient(135deg, rgba(242,182,50,.18), rgba(255,94,232,.14)); border-color: rgba(242,182,50,.6); }
               .sr-badge-tier-legendary .sr-badge-tier-count { background: linear-gradient(135deg, #f2b632, #ff9d5e); -webkit-background-clip: text; background-clip: text; color: transparent; }
               .sr-badge-tier-legendary svg path { fill: #f2b632; }

               #spModalListingsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
               .sp-listing-card {
               background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
               border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
               cursor: pointer; transition: all .18s;
               }
               .sp-listing-card:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
               .sp-listing-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #111; }
               .sp-listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
               .sp-listing-info { padding: 9px 11px 10px; }
               .sp-listing-type { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
               .sp-listing-title { font-size: 12px; font-weight: 700; color: #e8e8f0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
               .sp-listing-price { font-size: 12px; font-weight: 800; color: #fff; margin-top: 4px; }
               /* Empty state */
               #spModalEmpty {
               grid-column: 1 / -1;
               background: #080808; border-radius: 24px; padding: 2.5rem 1.5rem; text-align: center;
               border: 1px solid #141414; transition: border-color .2s ease, background .2s ease;
               }
               #spModalEmpty:hover { border-color: #222; background: #0b0b0b; }
               #spModalEmpty .sp-empty-icon {
               display: inline-flex; align-items: center; justify-content: center;
               width: 52px; height: 52px; background: #0f0f0f; border-radius: 50%;
               margin-bottom: .85rem; color: #666; border: 1px solid #1a1a1a;
               }
               #spModalEmpty .sp-empty-icon svg { width: 24px; height: 24px; }
               #spModalEmpty h3 { font-size: .95rem; font-weight: 600; color: #ddd; margin-bottom: .15rem; letter-spacing: -.01em; }
               #spModalEmpty p { color: #777; font-size: .82rem; max-width: 300px; margin: 0 auto; line-height: 1.4; }
               /* Private-profile state — same visual language as the empty
                  state, plus a caution tip reusing the .sp-safety-row style
                  from the seller-details safety panel. */
               #spModalPrivate {
               background: #080808; border-radius: 24px; padding: 2.5rem 1.5rem; text-align: center;
               border: 1px solid #141414;
               }
               #spModalPrivate .sp-empty-icon {
               display: inline-flex; align-items: center; justify-content: center;
               width: 52px; height: 52px; background: #0f0f0f; border-radius: 50%;
               margin-bottom: .85rem; color: #666; border: 1px solid #1a1a1a;
               }
               #spModalPrivate .sp-empty-icon svg { width: 24px; height: 24px; }
               #spModalPrivate h3 { font-size: .95rem; font-weight: 600; color: #ddd; margin-bottom: .15rem; letter-spacing: -.01em; }
               #spModalPrivate p { color: #777; font-size: .82rem; max-width: 320px; margin: 0 auto; line-height: 1.4; }
               #spModalPrivateTip { text-align: left; max-width: 420px; margin: 1.1rem auto 0; }
               @media (max-width: 640px) {
               #spModalCover { height: 130px; }
               #spModalMain { padding: 0 1rem 1.5rem; }
               #spModalAvatarRow { margin-top: -40px; }
               #spModalAv { width: 76px; height: 76px; font-size: 22px; }
               #spModalName { font-size: 1.15rem; }
               #spModalHandle { font-size: .7rem; padding: .15rem .5rem; }
               .sp-action-btn { font-size: .76rem; padding: .4rem .85rem; }
               #spModalStars { font-size: .74rem; margin-left: 0; width: 100%; justify-content: center; }
               #spModalStats { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
               .sp-stat { padding: .55rem .3rem; border-radius: 10px; }
               .sp-stat-val { font-size: 1.05rem; }
               .sp-stat.sp-stat-joined .sp-stat-val { font-size: .8rem; }
               #spModalListingsHeader { gap: .5rem; }
               #spModalListingsHeader h2 { font-size: .85rem; }
               .sp-toggle-tab { font-size: .66rem; padding: .28rem .6rem; }
               #spModalEmpty { padding: 1.8rem 1rem; }
               #spModalEmpty .sp-empty-icon { width: 44px; height: 44px; }
               #spModalClose { top: .85rem; right: .85rem; width: 32px; height: 32px; }
               }
               @media (max-width: 400px) {
               #spModalStats { grid-template-columns: 1fr 1fr; gap: .3rem; }
               .sp-action-btn { flex: 1; justify-content: center; }
               #spModalActions { width: 100%; }
               }

               /* ── Skeleton loading state ──
                  Shown from the moment the modal opens until seller data
                  (profile + listings) actually resolves, instead of a bare
                  "Loading…" text label with everything else blank. */
               @keyframes spSkelPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
               .sp-skel {
               background: #111114; border-radius: 8px;
               animation: spSkelPulse 1.3s ease-in-out infinite;
               }
               #spModal.sp-loading #spModalAv { background: #111114; animation: spSkelPulse 1.3s ease-in-out infinite; }
               #spModal.sp-loading #spModalAv::after { content: ''; }
               .sp-skel-name { width: 140px; height: 22px; margin-bottom: 6px; }
               .sp-skel-handle { width: 90px; height: 14px; }
               .sp-skel-bio { width: 100%; max-width: 420px; height: 14px; margin-top: .5rem; }
               .sp-skel-bio.short { width: 65%; }
               .sp-stat { position: relative; }
               .sp-skel-stat {
               display: none; position: absolute; inset: 6px; border-radius: 10px;
               }
               .sp-skel-card { height: 148px; border-radius: 14px; }
               #spModal.sp-loading #spModalName,
               #spModal.sp-loading #spModalHandle,
               #spModal.sp-loading #spModalBioText,
               #spModal.sp-loading #spModalBioMore,
               #spModal.sp-loading .sp-stat-val,
               #spModal.sp-loading .sp-stat-lbl,
               #spModal.sp-loading #spModalListingsGrid,
               #spModal.sp-loading #spModalEmpty { visibility: hidden; }
               #spModal.sp-loading #spModalNameSkelRow,
               #spModal.sp-loading #spModalBioSkelRow,
               #spModal.sp-loading .sp-skel-stat,
               #spModal.sp-loading #spModalListingsSkelGrid { display: flex; }
               #spModalNameSkelRow, #spModalBioSkelRow, #spModalListingsSkelGrid { display: none; }
               #spModalNameSkelRow { flex-direction: column; gap: 2px; }
               #spModalBioSkelRow { flex-direction: column; gap: 6px; margin-top: .35rem; }
               #spModalListingsSkelGrid { grid-template-columns: 1fr 1fr; gap: 10px; grid-column: 1 / -1; width: 100%; }
               #spModal.sp-loading #spModalListingsSkelGrid { display: grid; }

               /* ── Seller details popup (full bio / socials / contact) ── */
               #spDetailsOverlay {
               position: fixed; inset: 0; z-index: 10003;
               background: rgba(0,0,0,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
               display: none; align-items: center; justify-content: center; padding: 1rem;
               }
               #spDetailsOverlay.active { display: flex; }
               #spDetailsBox {
               width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto;
               background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 22px;
               padding: 1.5rem; position: relative;
               }
               #spDetailsClose {
               position: absolute; top: .9rem; right: .9rem;
               width: 32px; height: 32px; border-radius: 50%;
               background: #111; border: 1px solid #222; color: #999;
               display: flex; align-items: center; justify-content: center; cursor: pointer;
               }
               #spDetailsClose:hover { background: #1a1a1a; color: #fff; }
               #spDetailsClose svg { width: 15px; height: 15px; }
               #spDetailsHeader { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; padding-right: 2rem; }
               #spDetailsAv {
               width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
               background: #1a1a1a; display: flex; align-items: center; justify-content: center;
               font-size: 17px; font-weight: 800; color: #fff; overflow: hidden;
               }
               #spDetailsAv img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
               #spDetailsName { font-size: 1.05rem; font-weight: 700; color: #f0f0f0; display: flex; align-items: center; gap: 5px; }
               #spDetailsHandle { font-size: .78rem; color: #a78bfa; }
               #spDetailsBioLabel { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #666; margin-bottom: .4rem; }
               #spDetailsBio { font-size: .88rem; line-height: 1.6; color: #ccc; white-space: pre-wrap; word-break: break-word; margin-bottom: 1.1rem; }
               #spDetailsSocials { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.1rem; }
               #spDetailsContactRow {
               display: flex; align-items: center; justify-content: space-between; gap: .75rem;
               flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid #1a1a1a;
               }
               #spDetailsEmail { font-size: .82rem; color: #999; word-break: break-all; }
               #spDetailsContactBtn {
               display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
               background: #fff; color: #000; border: none; border-radius: 40px;
               padding: .55rem 1.1rem; font-size: .82rem; font-weight: 700; cursor: pointer;
               font-family: inherit; transition: background .2s ease;
               }
               #spDetailsContactBtn:hover { background: #e0e0e0; }
               #spDetailsContactBtn svg { width: 14px; height: 14px; }
               #spDetailsContactBtn:disabled { opacity: .4; cursor: not-allowed; }

               /* ── Safety guidance block ── */
               #spDetailsSafety {
               background: #0d0f0a; border: 1px solid rgba(163,230,53,.14);
               border-radius: 16px; padding: 1rem 1.05rem 1.1rem; margin-bottom: 1.1rem;
               }
               #spDetailsSafetyHdr {
               display: flex; align-items: center; gap: .45rem;
               font-size: .82rem; font-weight: 800; color: #d9f99d; margin-bottom: .75rem; letter-spacing: -.01em;
               }
               #spDetailsSafetyHdr svg { width: 15px; height: 15px; stroke: #a3e635; flex-shrink: 0; }
               .sp-safety-row {
               display: flex; align-items: flex-start; gap: .55rem;
               font-size: .78rem; line-height: 1.5; color: #ababab; margin-bottom: .65rem;
               }
               .sp-safety-row:last-child { margin-bottom: 0; }
               .sp-safety-row b { color: #ddd; font-weight: 700; }
               .sp-safety-row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
               .sp-safety-row.sp-safety-good svg { stroke: #a3e635; }
               .sp-safety-row.sp-safety-bad svg { stroke: #f87171; }

               /* ── Deal stats block ── */
               #spDetailsStats {
               background: #0a0a0a; border: 1px solid #1a1a1a;
               border-radius: 16px; padding: 1rem 1.05rem 1.1rem; margin-bottom: 1.1rem;
               }
               #spDetailsStatsHdr {
               display: flex; align-items: center; gap: .45rem;
               font-size: .82rem; font-weight: 800; color: #f0f0f0; margin-bottom: .85rem; letter-spacing: -.01em;
               }
               #spDetailsStatsHdr svg { width: 15px; height: 15px; stroke: #a78bfa; flex-shrink: 0; }
               #spDetailsStatsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
               .sp-dstat { background: #111; border-radius: 12px; padding: .6rem .4rem; text-align: center; border: 1px solid #1c1c1c; }
               .sp-dstat-val { font-size: 1.05rem; font-weight: 800; color: #f0f0f0; letter-spacing: -.02em; }
               .sp-dstat-lbl { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #777; margin-top: .2rem; }
               #spDetailsCatBreakdown { display: flex; flex-direction: column; gap: .55rem; }
               .sp-cat-row { display: flex; align-items: center; gap: .6rem; }
               .sp-cat-lbl { display: flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; color: #999; width: 68px; flex-shrink: 0; }
               .sp-cat-lbl svg { width: 12px; height: 12px; flex-shrink: 0; }
               .sp-cat-bar-track { flex: 1; height: 6px; border-radius: 4px; background: #161616; overflow: hidden; }
               .sp-cat-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
               .sp-cat-count { font-size: .74rem; font-weight: 700; color: #ccc; width: 24px; text-align: right; flex-shrink: 0; }
               #spDetailsStatsEmpty { display: none; font-size: .78rem; color: #666; text-align: center; padding: .5rem 0 0; }
               /* Skeleton state for the stats block while get-seller-stats loads */
               .sp-dstat.sp-skel-stat2 .sp-dstat-val,
               .sp-dstat.sp-skel-stat2 .sp-dstat-lbl { visibility: hidden; }
               .sp-dstat.sp-skel-stat2 { position: relative; overflow: hidden; }
               .sp-dstat.sp-skel-stat2::after {
               content: ''; position: absolute; inset: 8px;
               background: #1a1a1a; border-radius: 8px;
               animation: spSkelPulse 1.3s ease-in-out infinite;
               }

               /* ── Rate modal overlay ── */
               #spRateOverlay {
               display: none; position: fixed; inset: 0; z-index: 10200;
               background: rgba(0,0,0,.82); backdrop-filter: blur(12px);
               -webkit-backdrop-filter: blur(12px);
               align-items: center; justify-content: center;
               font-family: inherit;
               }
               #spRateOverlay.active { display: flex; }
               #spRateBox {
               background: #0c0c14; border: 1px solid rgba(255,255,255,.12);
               border-radius: 20px; width: min(380px, 92vw);
               padding: 26px 24px 22px;
               display: flex; flex-direction: column; gap: 18px;
               box-shadow: 0 32px 80px rgba(0,0,0,.8);
               }
               #spRateTitle {
               font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.02em;
               }
               #spRateSubtitle {
               font-size: 12.5px; color: rgba(255,255,255,.4); margin-top: -12px;
               }
               /* Star picker */
               #spRateStarRow {
               display: flex; gap: 8px; justify-content: center; padding: 4px 0;
               }
               .sp-rate-star {
               width: 38px; height: 38px; cursor: pointer;
               transition: transform .15s;
               }
               .sp-rate-star:hover { transform: scale(1.15); }
               .sp-rate-star polygon { fill: rgba(255,255,255,.1); transition: fill .18s; }
               .sp-rate-star.lit polygon { fill: #f59e0b; }
               /* Review textarea */
               #spRateTextarea {
               width: 100%; box-sizing: border-box;
               background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
               border-radius: 12px; padding: 12px 14px;
               font-size: 13px; color: #fff; font-family: inherit;
               resize: none; min-height: 80px; outline: none;
               transition: border-color .18s;
               }
               #spRateTextarea::placeholder { color: rgba(255,255,255,.25); }
               #spRateTextarea:focus { border-color: rgba(245,158,11,.45); }
               /* Action row */
               #spRateActions { display: flex; gap: 8px; }
               #spRateCancelBtn {
               flex: 1; padding: 11px; border-radius: 11px;
               background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
               color: rgba(255,255,255,.5); font-size: 13px; font-weight: 700;
               cursor: pointer; font-family: inherit; transition: all .18s;
               }
               #spRateCancelBtn:hover { background: rgba(255,255,255,.1); color: #fff; }
               #spRateSubmitBtn {
               flex: 2; padding: 11px; border-radius: 11px;
               background: linear-gradient(135deg, #f59e0b, #d97706);
               border: none; color: #fff; font-size: 13px; font-weight: 800;
               cursor: pointer; font-family: inherit; transition: filter .18s;
               display: flex; align-items: center; justify-content: center; gap: 6px;
               }
               #spRateSubmitBtn:disabled { opacity: .45; cursor: not-allowed; }
               #spRateSubmitBtn:not(:disabled):hover { filter: brightness(1.1); }
               #spRateErr {
               font-size: 12px; color: #f87171; font-weight: 600;
               display: none; margin-top: -10px;
               }
               #spRateSuccess {
               font-size: 13px; color: #4ade80; font-weight: 700;
               display: none; text-align: center; padding: 6px 0;
               }

               /* ═══════════════════════════════════════
                  DONATE OVERLAY
                  ═══════════════════════════════════════ */
               #spDonateOverlay {
               display: none; position: fixed; inset: 0; z-index: 10200;
               background: rgba(0,0,0,.82); backdrop-filter: blur(12px);
               -webkit-backdrop-filter: blur(12px);
               align-items: center; justify-content: center; padding: 1rem;
               font-family: inherit;
               }
               #spDonateOverlay.active { display: flex; }
               #spDonateBox {
               background: #0c0c14; border: 1px solid rgba(255,255,255,.09);
               border-radius: 22px; width: min(400px, 92vw); max-height: 88vh; overflow-y: auto;
               padding: 24px 22px 22px; position: relative;
               display: flex; flex-direction: column;
               box-shadow: 0 32px 80px rgba(0,0,0,.8);
               }
               #spDonateClose {
               position: absolute; top: .85rem; right: .85rem; z-index: 1;
               width: 30px; height: 30px; border-radius: 50%;
               background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.5);
               display: flex; align-items: center; justify-content: center; cursor: pointer;
               transition: background .16s, color .16s;
               }
               #spDonateClose:hover { background: rgba(255,255,255,.1); color: #fff; }
               #spDonateClose svg { width: 14px; height: 14px; }

               #spDonateHeader { display: flex; align-items: center; gap: .75rem; margin-bottom: 18px; padding-right: 1.6rem; }
               #spDonateIcon {
               width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
               background: rgba(163,230,53,0.1);
               border: 1px solid rgba(163,230,53,0.28);
               display: flex; align-items: center; justify-content: center;
               }
               #spDonateIcon svg { width: 18px; height: 18px; color: #a3e635; }
               #spDonateTitle { font-size: 1.05rem; font-weight: 800; color: #f5f5fa; letter-spacing: -.01em; line-height: 1.25; }
               #spDonateSubtitle { font-size: .76rem; color: rgba(255,255,255,.4); margin-top: 2px; }

               /* Total donated + count summary */
               #spDonateSummary {
               display: flex; align-items: stretch; gap: 0;
               background: rgba(163,230,53,0.05); border: 1px solid rgba(163,230,53,0.15);
               border-radius: 14px; padding: 14px 0; margin-bottom: 18px;
               }
               .sp-donate-summary-stat { flex: 1; text-align: center; }
               .sp-donate-summary-val { font-size: 1.3rem; font-weight: 800; color: #a3e635; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
               .sp-donate-summary-lbl { font-size: .66rem; color: rgba(255,255,255,.4); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
               .sp-donate-summary-divider { width: 1px; align-self: center; height: 30px; background: rgba(255,255,255,.08); }

               /* Quick-amount chips (reuses .wallet-quick-btn pattern) */
               #spDonateQuickAmounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 16px; }
               .sp-donate-quick-btn {
               background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
               border-radius: 10px; padding: 9px 4px; font-size: 12.5px; font-weight: 700;
               color: rgba(255,255,255,.65); cursor: pointer; font-family: inherit;
               transition: all .16s;
               }
               .sp-donate-quick-btn:hover { border-color: rgba(163,230,53,0.4); color: #a3e635; }
               .sp-donate-quick-btn.active { background: rgba(163,230,53,0.14); border-color: rgba(163,230,53,0.45); color: #a3e635; }

               #spDonateSubmitBtn {
               width: 100%; padding: 14px; border-radius: 14px; margin-top: 16px;
               background: #a3e635;
               border: none; color: #0a0a0e; font-size: 14px; font-weight: 800;
               cursor: pointer; font-family: inherit; transition: transform .12s, opacity .12s;
               display: flex; align-items: center; justify-content: center; gap: 7px;
               }
               #spDonateSubmitBtn svg { color: #0a0a0e; }
               #spDonateSubmitBtn:disabled { opacity: .5; cursor: not-allowed; }
               #spDonateSubmitBtn:not(:disabled):hover { transform: translateY(-1px); }
               #spDonateSubmitBtn:not(:disabled):active { transform: translateY(0); }

               #spDonateRecentHdr {
               font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
               color: rgba(255,255,255,.4); margin: 22px 0 10px; padding-top: 18px;
               border-top: 1px solid rgba(255,255,255,.07);
               }
               #spDonateRecentList { display: flex; flex-direction: column; gap: 6px; }
               .sp-donate-row {
               display: flex; align-items: center; gap: 10px;
               padding: 10px; border-radius: 12px;
               background: rgba(255,255,255,.025);
               transition: background .16s;
               }
               .sp-donate-row:hover { background: rgba(255,255,255,.045); }
               .sp-donate-av {
               width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
               background: rgba(163,230,53,0.12); border: 1px solid rgba(163,230,53,0.25);
               display: flex; align-items: center; justify-content: center;
               font-size: 12.5px; font-weight: 800; color: #a3e635; overflow: hidden;
               }
               .sp-donate-av img { width: 100%; height: 100%; object-fit: cover; }
               .sp-donate-mid { flex: 1; min-width: 0; }
               .sp-donate-name { font-size: 12.5px; font-weight: 700; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
               .sp-donate-note { font-size: 11px; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
               .sp-donate-when { font-size: 10.5px; color: rgba(255,255,255,.3); margin-top: 1px; }
               .sp-donate-amt { font-size: 13px; font-weight: 800; color: #a3e635; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
               .sp-donate-skel {
               height: 50px; border-radius: 12px;
               background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 37%, rgba(255,255,255,.03) 63%);
               background-size: 400% 100%; animation: spSkelPulse 1.3s ease-in-out infinite;
               }
               #spDonateRecentEmpty {
               display: none; text-align: center; padding: 20px 0;
               font-size: 12.5px; color: rgba(255,255,255,.35);
               }

/* ── Sellers modal — redesigned to follow site theme (--mp-accent lime) ── */
#sellersModal, #sellersModal * , #sellersModal *::before, #sellersModal *::after { box-sizing: border-box; }
         #sellersModal { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
         .svm-feed-container { width:100%; max-width:720px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; gap:1.5rem; padding:0 0.6rem 2rem; color:#e3e7ea; }
         .svm-sticky-header { position:sticky; top:0; z-index:2; background:#000000; padding:1.2rem 0.3rem 0.5rem; display:flex; flex-direction:column; gap:1rem; border-bottom:1px solid rgba(163,230,53,0.12); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
         .svm-header { display:flex; align-items:center; justify-content:space-between; padding:0 0.2rem; }
         .svm-header h2 { font-size:1.6rem; font-weight:600; letter-spacing:-0.5px; color:#f0f4f8; }
         .svm-header-actions { display:flex; align-items:center; gap:0.5rem; }
         .svm-header button { background:none; border:none; color:#8a9a8a; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s, color 0.15s; }
         .svm-header button:hover { background:rgba(163,230,53,0.08); color:var(--mp-accent, #a3e635); }
         .svm-header button svg { width:18px; height:18px; }
         /* Leaderboard entry point — lime, matches the site's accent so it
            reads as a distinct destination rather than another neutral icon button. */
         .svm-lb-btn {
            width:auto !important; height:auto !important; border-radius:100px !important;
            display:flex; align-items:center; gap:0.4rem;
            padding:0.45rem 0.9rem 0.45rem 0.7rem;
            border:1px solid var(--mp-accent-border, rgba(163,230,53,0.3)) !important;
            box-shadow:0 0 0 1px rgba(163,230,53,0.1), 0 0 10px rgba(163,230,53,0.15);
            color:var(--mp-accent, #a3e635) !important;
            font-family:inherit; font-size:0.78rem; font-weight:700; white-space:nowrap;
         }
         .svm-lb-btn:hover {
            border-color:rgba(163,230,53,0.65) !important;
            box-shadow:0 0 0 1px rgba(163,230,53,0.2), 0 0 14px rgba(163,230,53,0.3);
            background:var(--mp-accent-muted, rgba(163,230,53,0.15)) !important;
         }
         .svm-lb-btn svg { width:15px !important; height:15px !important; filter:drop-shadow(0 0 2px rgba(163,230,53,0.4)); }
         @media (max-width: 30em) {
            .svm-lb-btn { padding:0.45rem 0.8rem 0.45rem 0.6rem; }
            .svm-lb-btn span { display:inline; font-size:0.72rem; }
         }
         .svm-search-wrapper { display:flex; align-items:center; background:#0a0a0a; border-radius:2.5rem; padding:0.6rem 1rem; border:1px solid #1a1a1a; transition:all 0.2s ease; margin:0 0.1rem; }
         .svm-search-wrapper:focus-within { border-color:var(--mp-accent-border, rgba(163,230,53,0.3)); box-shadow:0 0 0 3px var(--mp-accent-muted, rgba(163,230,53,0.15)); }
         .svm-search-wrapper svg { width:15px; height:15px; color:#6b7d6b; margin-right:0.4rem; flex-shrink:0; }
         .svm-search-wrapper input { background:transparent; border:none; outline:none; width:100%; font-size:0.9rem; color:#e1e9ef; caret-color:var(--mp-accent, #a3e635); font-family:inherit; }
         .svm-search-wrapper input::placeholder { color:#4d5a4d; }
         .svm-stats-row { display:flex; justify-content:space-between; align-items:center; color:#8a9a8a; font-size:0.8rem; font-weight:500; padding:0 0.2rem; }
         .svm-stats-row span:first-child { background:#0a0a0a; padding:0.25rem 0.9rem; border-radius:2rem; color:var(--mp-accent, #a3e635); border:1px solid var(--mp-accent-border, rgba(163,230,53,0.3)); font-weight:700; }
         .svm-profiles-grid { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:min-content; align-content:start; gap:0.7rem; flex:1; padding:0 0.1rem; }
         .svm-profile-card { aspect-ratio:1/1; background:#0a0a0a; border-radius:1rem; padding:0.9rem 0.7rem; border:1px solid #1a1a1a; transition:background 0.2s, border-color 0.2s; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0.5rem; cursor:pointer; }
         .svm-profile-card:hover { background:#111611; border-color:var(--mp-accent-border, rgba(163,230,53,0.3)); }
         .svm-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; background:#161c16; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:var(--mp-accent, #a3e635); border:2px solid #232823; flex-shrink:0; overflow:hidden; }
         .svm-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
         .svm-user-info { display:flex; flex-direction:column; align-items:center; overflow:hidden; width:100%; }
         .svm-user-name { font-weight:600; font-size:0.85rem; color:#f0f4f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
         .svm-user-handle { color:#7a8a7a; font-size:0.7rem; margin-top:0.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
         .svm-follow-btn { border:1.5px solid #232823; color:#d3e9d3; padding:0.35rem 0.7rem; border-radius:2rem; font-weight:600; font-size:0.7rem; cursor:pointer; transition:0.2s; background:rgba(255,255,255,0.03); display:flex; align-items:center; gap:0.3rem; white-space:nowrap; margin-top:0.1rem; font-family:inherit; }
         .svm-follow-btn svg { width:11px; height:11px; }
         .svm-follow-btn:hover { background:var(--mp-accent-muted, rgba(163,230,53,0.15)); border-color:var(--mp-accent-border, rgba(163,230,53,0.3)); color:var(--mp-accent, #a3e635); }
         .svm-follow-btn.following { background:var(--mp-accent-muted, rgba(163,230,53,0.15)); border-color:var(--mp-accent-border, rgba(163,230,53,0.3)); color:var(--mp-accent, #a3e635); }
         .svm-empty-message { grid-column:span 2; text-align:center; color:#6b7d6b; padding:2rem; font-style:italic; background:#0a0a0a; border-radius:1.5rem; border:1px solid #1a1a1a; }
         .svm-skel { pointer-events:none; }
         .svm-skel-block { background:linear-gradient(90deg,#111 25%,#181818 37%,#111 63%); background-size:400% 100%; animation:svmShimmer 1.4s ease infinite; border-radius:6px; }
         .svm-skel-avatar { width:56px; height:56px; border-radius:50%; }
         .svm-skel-line { height:10px; width:70%; }
         .svm-skel-line.sm { width:45%; height:8px; }
         .svm-skel-pill { width:64px; height:24px; border-radius:2rem; margin-top:0.1rem; }
         @keyframes svmShimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
         .svm-footer-note { font-size:0.7rem; color:#4d5a4d; display:flex; justify-content:center; gap:0.3rem; align-items:center; padding-top:0.3rem; }
         @media (min-width:500px) {
            .svm-feed-container { padding:0 1.2rem 2rem; gap:1.8rem; }
            .svm-sticky-header { padding:1.6rem 0.2rem 0.6rem; gap:1.2rem; }
            .svm-profiles-grid { gap:1rem; }
            .svm-profile-card { padding:1rem 0.9rem; border-radius:1.2rem; }
            .svm-avatar { width:68px; height:68px; font-size:1.7rem; }
            .svm-user-name { font-size:0.95rem; }
            .svm-user-handle { font-size:0.78rem; }
            .svm-follow-btn { padding:0.4rem 0.9rem; font-size:0.78rem; }
         }

/* ── extracted style block 3 (originally around char offset 867654) ── */
#listModal, #listModal * , #listModal *::before, #listModal *::after { box-sizing: border-box; }
         #listModal {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         }
         #lmCard {
            width: 100%;
            min-height: 100%;
            margin: 0;
            background: #000000;
            border: none;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
         }
         .lm-app { display:flex; flex-direction:column; max-width:1200px; margin:0 auto; padding: 0 32px 40px; color:#f0f2f5; }
         /* ─── HEADER ─── */
         .lm-header { position: sticky; top:0; z-index:6; background:#000000; padding:16px 44px 16px 0; border-bottom:1px solid #1a1a1a; }
         .lm-header-inner { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:12px; }
         .lm-header-title { font-size:14px; font-weight:700; color:#f0f2f5; letter-spacing:-0.01em; }
         .lm-header-title .lm-model-name { color:#a3e635; }
         .lm-header-title .lm-divider { color:#3a3a3a; margin:0 8px; font-weight:400; }
         .lm-btn-close {
            position:absolute; top:14px; right:0;
            background:#141416; border:1px solid #27272a; color:#a1a1aa;
            width:32px; height:32px; cursor:pointer; padding:0;
            border-radius:50%; transition:0.2s; display:flex; align-items:center; justify-content:center;
            font-family:inherit; z-index:7;
         }
         .lm-btn-close:hover { background:#1f1f23; border-color:#3f3f46; color:#fff; }
         .lm-btn-close svg { width:15px; height:15px; stroke:currentColor; stroke-width:2.5; fill:none; }
         /* ─── PROFILE BAR ─── */
         .lm-profile-bar { padding:14px 0; border-bottom:1px solid #1a1a1a; margin-bottom:20px; }
         .lm-profile-bar-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
         .lm-profile-left { display:flex; align-items:center; gap:12px; min-width:0; }
         .lm-user-avatar {
            width:40px; height:40px; border-radius:50%;
            background:linear-gradient(135deg, #6b9b1f, #a3e635);
            display:flex; align-items:center; justify-content:center;
            font-weight:700; font-size:14px; color:#0a1005; text-transform:uppercase;
            flex-shrink:0; border:2px solid #2a2a2a; overflow:hidden;
         }
         .lm-user-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
         .lm-profile-identity { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
         .lm-user-username { font-size:14px; font-weight:700; color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
         .lm-user-email { font-size:12px; color:#71717a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
         .lm-plan-badge {
            font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
            padding:4px 10px; border-radius:5px; background:#141416; color:#71717a; border:1px solid #27272a;
         }
         .lm-profile-right { display:flex; align-items:center; flex-shrink:0; }
         .lm-listings-counter {
            display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#d0d5dd;
            background:#0a0a0a; padding:6px 16px; border-radius:100px; border:1px solid #2a2a2a; white-space:nowrap;
         }
         .lm-listings-counter strong { color:#ffffff; }
         .lm-listings-counter svg { width:14px; height:14px; stroke:#a3e635; stroke-width:2.5; fill:none; flex-shrink:0; }
         .lm-manage-listings-btn {
            display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#d0d5dd;
            background:#0a0a0a; padding:6px 14px; border-radius:100px; border:1px solid #2a2a2a; white-space:nowrap;
            cursor:pointer; font-family:inherit; transition:border-color 0.15s, color 0.15s, background 0.15s;
         }
         .lm-manage-listings-btn:hover { border-color:#a3e635; color:#fff; background:#111; }
         .lm-manage-listings-btn strong { color:#ffffff; font-weight:700; }
         .lm-manage-listings-btn svg { width:13px; height:13px; stroke:#a3e635; stroke-width:2.5; fill:none; flex-shrink:0; }
         /* ─── WEEKLY LIMIT ─── */
         .lm-limit-row {
            display:flex; align-items:center; gap:16px; margin-bottom:0; flex-wrap:wrap;
            background:#0a0a0a; padding:14px 20px; border-radius:14px 14px 0 0; border:1px solid #2a2a2a;
            justify-content:space-between; cursor:pointer;
         }
         .lm-limit-row-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:1; min-width:0; }
         .lm-limit-label { font-size:12px; font-weight:600; color:#6b7280; letter-spacing:0.03em; text-transform:uppercase; }
         .lm-limit-track { flex:1; min-width:100px; max-width:200px; height:6px; background:#1a1a1a; border-radius:100px; overflow:hidden; }
         .lm-limit-track-fill { height:100%; background:linear-gradient(90deg, #6b9b1f, #a3e635); border-radius:100px; transition:width 0.3s ease; }
         .lm-limit-numbers { font-size:13px; font-weight:500; color:#9ca3af; white-space:nowrap; }
         .lm-limit-arrow { font-size:11px; color:#71717a; transition:transform 0.2s ease; }
         .lm-limit-row.open .lm-limit-arrow { transform: rotate(180deg); }
         .lm-btn-plan-upgrade {
            display:inline-flex; align-items:center; gap:7px; background:#7c3aed; border:1px solid #8b5cf6;
            color:#fff; font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:100px; cursor:pointer;
            font-family:inherit; letter-spacing:0.01em; white-space:nowrap; flex-shrink:0;
            box-shadow:0 4px 16px -4px rgba(124,58,237,0.45); transition:transform 0.2s, box-shadow 0.2s, background 0.2s;
         }
         .lm-btn-plan-upgrade:hover { background:#8b5cf6; transform:translateY(-1px); box-shadow:0 6px 20px -4px rgba(124,58,237,0.6); }
         .lm-btn-plan-upgrade svg { width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; flex-shrink:0; }
         .lm-limit-dropdown {
            font-size:11.5px; color:#71717a; background:#0a0a0a; border:1px solid #2a2a2a; border-top:none;
            border-radius:0 0 14px 14px; padding:0 20px; max-height:0; overflow:hidden;
            transition:max-height 0.3s ease, padding 0.3s ease; margin-bottom:20px; line-height:1.6;
         }
         .lm-limit-dropdown.open { max-height:120px; padding:12px 20px; }
         .lm-limit-dropdown #lmLimitSummary { color:#fff; font-weight:700; }
         /* ─── PRICING CARDS ─── */
         .lm-pricing-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:24px; }
         .lm-pricing-card {
            position:relative; background:#0a0a0a; border-radius:14px; padding:14px 14px 16px;
            border:1px solid #2a2a2a; transition:border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; cursor:pointer; overflow:hidden;
         }
         .lm-pricing-card:hover { border-color:#4a4a4a; transform:translateY(-1px); }
         /* Top edge accent line — shared base, color/finish set per plan below */
         .lm-pricing-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:2.5px;
            opacity:0.55; transition:opacity 0.25s ease;
         }
         .lm-pricing-card:hover::before { opacity:0.85; }
         .lm-pricing-card.active::before { opacity:1; }
         /* Shimmer sweep layer — only enabled on paid plans */
         .lm-pricing-card::after {
            content:''; position:absolute; top:0; left:-150%; width:60%; height:100%;
            pointer-events:none; opacity:0;
         }
         .lm-plan-check-badge {
            position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%;
            background:#22c55e; border:2px solid rgba(0,0,0,0.35); display:none; align-items:center; justify-content:center;
            box-shadow:0 2px 6px rgba(0,0,0,0.35);
         }
         .lm-pricing-card.active .lm-plan-check-badge { display:flex; }
         .lm-plan-check-badge svg { width:10px; height:10px; stroke:#ffffff; stroke-width:4; fill:none; }
         .lm-pricing-card .lm-plan-name { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#6b7280; margin-bottom:2px; }
         .lm-pricing-card .lm-plan-price { font-size:22px; font-weight:700; color:#ffffff; letter-spacing:-0.02em; }
         .lm-pricing-card .lm-plan-price small { font-size:12px; font-weight:500; color:#6b7280; margin-left:2px; }
         .lm-pricing-card .lm-plan-sub { font-size:11px; color:#6b7280; margin-top:2px; }
         /* FREE — plain dim edge, current-plan lime highlight, no shimmer */
         .lm-pricing-card[data-plan="free"] { background:#0a0a0a; border-color:#2a2a2a; }
         .lm-pricing-card[data-plan="free"] .lm-plan-name { color:#6b7280; }
         .lm-pricing-card[data-plan="free"]::before { background:#3f3f46; }
         .lm-pricing-card[data-plan="free"].active { border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.4), 0 0 20px rgba(163,230,53,0.08); }
         .lm-pricing-card[data-plan="free"].active::before { background:#a3e635; box-shadow:0 0 8px rgba(163,230,53,0.6); }
         /* STARTER — dim silver edge, subtle shimmer */
         .lm-pricing-card[data-plan="starter"] { background:#0a0a0a; border-color:#2a2a2a; }
         .lm-pricing-card[data-plan="starter"] .lm-plan-name { color:#6b7280; }
         .lm-pricing-card[data-plan="starter"]::before { background:linear-gradient(90deg, transparent, #71717a 50%, transparent); }
         .lm-pricing-card[data-plan="starter"]::after { background:linear-gradient(115deg, transparent, rgba(161,161,170,0.16) 45%, rgba(212,212,216,0.28) 50%, rgba(161,161,170,0.16) 55%, transparent); animation:srfShimmerSlow 5.5s ease-in-out infinite; opacity:1; }
         .lm-pricing-card[data-plan="starter"].active { border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.4), 0 0 20px rgba(163,230,53,0.08); }
         .lm-pricing-card[data-plan="starter"].active::before { background:#a3e635; box-shadow:0 0 8px rgba(163,230,53,0.6); }
         /* GROWTH — silver edge, brighter shimmer */
         .lm-pricing-card[data-plan="growth"] { background:#0a0a0a; border-color:#2a2a2a; }
         .lm-pricing-card[data-plan="growth"] .lm-plan-name { color:#6b7280; }
         .lm-pricing-card[data-plan="growth"] .lm-plan-price { color:#ffffff; }
         .lm-pricing-card[data-plan="growth"] .lm-plan-price small { color:#6b7280; }
         .lm-pricing-card[data-plan="growth"] .lm-plan-sub { color:#6b7280; }
         .lm-pricing-card[data-plan="growth"]::before { background:linear-gradient(90deg, transparent, #d4d4d8 50%, transparent); box-shadow:0 0 6px rgba(212,212,216,0.5); }
         .lm-pricing-card[data-plan="growth"]::after { background:linear-gradient(115deg, transparent, rgba(228,228,231,0.22) 45%, rgba(255,255,255,0.4) 50%, rgba(228,228,231,0.22) 55%, transparent); animation:srfShimmerSlow 4.2s ease-in-out infinite; opacity:1; }
         .lm-pricing-card[data-plan="growth"].active { border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.4), 0 0 20px rgba(163,230,53,0.08); }
         .lm-pricing-card[data-plan="growth"].active::before { background:#a3e635; box-shadow:0 0 8px rgba(163,230,53,0.6); }
         /* PRO — gold "diamond" edge, richest shimmer */
         .lm-pricing-card[data-plan="pro"] { background:#0a0a0a; border-color:#2a2a2a; }
         .lm-pricing-card[data-plan="pro"] .lm-plan-name { color:#6b7280; }
         .lm-pricing-card[data-plan="pro"] .lm-plan-price { color:#ffffff; }
         .lm-pricing-card[data-plan="pro"] .lm-plan-price small { color:#6b7280; }
         .lm-pricing-card[data-plan="pro"] .lm-plan-sub { color:#6b7280; }
         .lm-pricing-card[data-plan="pro"]::before { height:3px; background:linear-gradient(90deg, transparent, #eab308 15%, #fde68a 50%, #eab308 85%, transparent); box-shadow:0 0 10px rgba(250,204,21,0.6); opacity:0.9; }
         .lm-pricing-card[data-plan="pro"]::after { background:linear-gradient(115deg, transparent, rgba(253,224,71,0.22) 45%, rgba(255,247,208,0.45) 50%, rgba(253,224,71,0.22) 55%, transparent); animation:srfShimmerSlow 3.2s ease-in-out infinite; opacity:1; }
         .lm-pricing-card[data-plan="pro"].active { border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.4), 0 0 20px rgba(163,230,53,0.08); }
         .lm-pricing-card[data-plan="pro"].active::before { background:linear-gradient(90deg, transparent, #a3e635 15%, #d9f99d 50%, #a3e635 85%, transparent); box-shadow:0 0 8px rgba(163,230,53,0.6); opacity:1; }
         @keyframes srfShimmerSlow {
            0%   { left:-150%; }
            55%  { left:150%; }
            100% { left:150%; }
         }
         @media (prefers-reduced-motion: reduce) {
            .lm-pricing-card::after { animation:none !important; opacity:0 !important; }
         }
         /* ─── CATEGORY TABS ─── */
         .lm-category-tabs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:20px; width:100%; }
         .lm-tab-btn {
            position:relative; background:#0a0a0a; border:1px solid #2a2a2a; color:#ffffff;
            font-size:13px; font-weight:600; padding:11px 8px; border-radius:12px; cursor:pointer;
            transition:0.2s; font-family:inherit; text-align:center; letter-spacing:0.02em;
            display:flex; align-items:center; justify-content:center; gap:6px;
            text-transform:uppercase; overflow:hidden;
         }
         .lm-tab-btn:hover { border-color:#4a4a4a; }
         .lm-tab-btn.active { background:#141d0e; border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.35); }
         /* ─── WEBSITE THEME ─── */
         .lm-tab-btn[data-tab="website"] { background:#0a0a0a; border-color:#2a2a2a; }
         .lm-tab-btn[data-tab="website"].active { background:#141d0e; border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.35); }
         /* ─── GAME THEME: text gets stabbed by an arrow on activation ─── */
         .lm-tab-btn[data-tab="game"] { background:#0a0a0a; border-color:#2a2a2a; }
         .lm-tab-btn[data-tab="game"].active { background:#141d0e; border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.35); }
         .lm-tab-btn.active[data-tab="game"] .lm-tab-label { position:relative; display:inline-block; }
         .lm-tab-btn.active[data-tab="game"] .lm-tab-label::before {
            content:""; position:absolute; top:50%; left:-60px; width:22px; height:3px; background:#1a1a1a;
            transform:translateY(-50%);
            clip-path: polygon(0% 30%, 65% 30%, 65% 0%, 100% 50%, 65% 100%, 65% 70%, 0% 70%);
            opacity:0;
         }
         .lm-tab-btn.active[data-tab="game"].stab-play .lm-tab-label::before { animation: lmArrowStab 0.55s cubic-bezier(0.65,0,0.35,1) 1; }
         .lm-tab-btn.active[data-tab="game"].stab-play .lm-tab-label .lm-tab-text { animation: lmTextImpact 0.42s ease-out 1; animation-delay:0.32s; }
         @keyframes lmArrowStab {
            0% { left:-60px; opacity:0; transform:translateY(-50%) scaleX(1); }
            12% { opacity:1; }
            55% { left:42%; opacity:1; transform:translateY(-50%) scaleX(1); }
            62% { left:44%; transform:translateY(-50%) scaleX(0.75); }
            75% { left:42%; transform:translateY(-50%) scaleX(1); opacity:1; }
            100% { left:42%; opacity:0; transform:translateY(-50%) scaleX(1); }
         }
         @keyframes lmTextImpact {
            0% { transform:translateX(0); text-shadow:none; }
            15% { transform:translateX(3px); text-shadow:-2px 0 0 rgba(26,26,26,0.5); }
            35% { transform:translateX(-2px); text-shadow:1px 0 0 rgba(26,26,26,0.35); }
            55% { transform:translateX(1px); }
            100% { transform:translateX(0); text-shadow:none; }
         }
         /* ─── APP THEME ─── */
         .lm-tab-btn[data-tab="app"] { background:#0a0a0a; border-color:#2a2a2a; color:#ffffff; }
         .lm-tab-btn[data-tab="app"].active { background:#141d0e; border-color:#a3e635; box-shadow:0 0 0 1px rgba(163,230,53,0.35); }
         @keyframes lmGlitterShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
         @keyframes lmGlitterSparkle { 0%{background-position:0% 0%; opacity:0.5;} 50%{background-position:100% 100%; opacity:1;} 100%{background-position:0% 0%; opacity:0.5;} }
         .lm-tab-btn svg { width:17px; height:17px; stroke:currentColor; stroke-width:2.5; fill:none; flex-shrink:0; position:relative; z-index:1; }
         .lm-tab-label { position:relative; z-index:1; }
         .lm-tab-check-badge {
            position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
            background:#22c55e; border:2px solid rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;
            z-index:3; box-shadow:0 2px 6px rgba(0,0,0,0.35);
         }
         .lm-tab-check-badge svg { width:10px; height:10px; stroke:#fff; stroke-width:4; fill:none; }
         /* ─── LIST ACTION ─── */
         .lm-list-action { display:flex; align-items:center; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
         .lm-cta-btn {
            display:inline-flex; align-items:center; gap:10px; background:#a3e635; border:1px solid #a3e635;
            color:#0a1005; font-size:14px; font-weight:700; padding:12px 28px; border-radius:100px; cursor:pointer;
            transition:0.2s; font-family:inherit; box-shadow:0 4px 24px -4px rgba(163,230,53,0.4);
            position:relative; overflow:hidden;
         }
         .lm-cta-btn:hover { background:#b6f04a; transform:translateY(-2px); box-shadow:0 8px 32px -6px rgba(163,230,53,0.55); }
         /* GAME theme for list button — floating glyphs + arrow stab (color unified to brand accent) */
         .lm-cta-btn[data-theme="game"] .lm-btn-label { position:relative; display:inline-block; }
         .lm-cta-btn[data-theme="game"] .lm-btn-label::before {
            content:""; position:absolute; top:50%; left:-70px; width:26px; height:3px; background:#0a1005;
            transform:translateY(-50%);
            clip-path: polygon(0% 30%, 65% 30%, 65% 0%, 100% 50%, 65% 100%, 65% 70%, 0% 70%);
            opacity:0;
         }
         .lm-cta-btn[data-theme="game"].stab-play .lm-btn-label::before { animation: lmArrowStab 0.55s cubic-bezier(0.65,0,0.35,1) 1; }
         .lm-cta-btn[data-theme="game"].stab-play .lm-btn-label .lm-btn-text { animation: lmTextImpact 0.42s ease-out 1; animation-delay:0.32s; }
         .lm-cta-btn[data-theme="game"] .lm-game-glyph { position:absolute; pointer-events:none; opacity:0; color:rgba(10,16,5,0.45); }
         .lm-cta-btn[data-theme="game"] .lm-game-glyph svg { width:100%; height:100%; stroke:currentColor; stroke-width:2; fill:none; }
         .lm-cta-btn[data-theme="game"] .lm-glyph-dpad { top:8%; left:12%; width:16px; height:16px; animation: lmGlyphDrift1 5.5s ease-in-out infinite; }
         .lm-cta-btn[data-theme="game"] .lm-glyph-controller { bottom:10%; right:14%; width:18px; height:18px; animation: lmGlyphDrift2 6.5s ease-in-out infinite; animation-delay:1.2s; }
         .lm-cta-btn[data-theme="game"] .lm-glyph-joystick { top:15%; right:22%; width:13px; height:13px; animation: lmGlyphDrift3 4.8s ease-in-out infinite; animation-delay:2.1s; }
         @keyframes lmGlyphDrift1 { 0%,100%{transform:translate(0,0) rotate(0deg); opacity:0;} 10%{opacity:0.5;} 50%{transform:translate(4px,-3px) rotate(8deg); opacity:0.55;} 90%{opacity:0.4;} }
         @keyframes lmGlyphDrift2 { 0%,100%{transform:translate(0,0) rotate(0deg); opacity:0;} 15%{opacity:0.45;} 50%{transform:translate(-5px,3px) rotate(-10deg); opacity:0.5;} 85%{opacity:0.4;} }
         @keyframes lmGlyphDrift3 { 0%,100%{transform:translate(0,0) scale(1); opacity:0;} 20%{opacity:0.4;} 50%{transform:translate(3px,4px) scale(1.15); opacity:0.5;} 80%{opacity:0.35;} }
         /* APP theme for list button: subtle shimmer, unified to brand accent */
         .lm-cta-btn[data-theme="app"]::before {
            content:""; position:absolute; inset:0;
            background-image:
               radial-gradient(circle at 20% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 2%),
               radial-gradient(circle at 75% 25%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 1.6%),
               radial-gradient(circle at 50% 75%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 1.8%),
               radial-gradient(circle at 85% 70%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 1.4%);
            background-size:200% 200%;
            mix-blend-mode:overlay;
            animation: lmGlitterSparkle 2.2s linear infinite;
            pointer-events:none;
         }
         .lm-cta-btn.at-cap { opacity:0.45; pointer-events:none; }
         .lm-cta-btn svg { width:18px; height:18px; stroke:currentColor; stroke-width:2.5; fill:none; position:relative; z-index:1; }
         .lm-btn-label { position:relative; z-index:1; }
         .lm-btn-list-sub { font-size:13px; color:#6b7280; }
         /* ─── LISTINGS ─── */
         .lm-listings-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
         .lm-listings-header h2 { font-size:14px; font-weight:600; color:#ffffff; letter-spacing:0.03em; }
         .lm-listings-grid {
            display:flex; flex-direction:column; gap:8px;
            max-height:420px; overflow-y:auto; overflow-x:hidden;
            padding-right:4px; margin-right:-4px;
            scrollbar-width:thin; scrollbar-color:#3a3a3a #0a0a0a;
         }
         .lm-listings-grid::-webkit-scrollbar { width:6px; }
         .lm-listings-grid::-webkit-scrollbar-track { background:transparent; }
         .lm-listings-grid::-webkit-scrollbar-thumb { background:#3a3a3a; border-radius:100px; }
         .lm-listings-grid::-webkit-scrollbar-thumb:hover { background:#52525b; }
         .lm-listing-item {
            display:flex; align-items:center; gap:14px; background:#0a0a0a; border-radius:12px;
            padding:12px 16px; border:1px solid #2a2a2a; transition:0.2s; flex-wrap:wrap;
         }
         .lm-listing-item:hover { border-color:#4a4a4a; background:#121212; }
         .lm-listing-icon { width:36px; height:36px; border-radius:10px; background:#141414; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid #2a2a2a; font-size:12px; font-weight:700; color:#71717a; overflow:hidden; }
         .lm-listing-icon img { width:100%; height:100%; object-fit:cover; }
         .lm-listing-icon svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; }
         .lm-listing-icon.type-website { background:#0d1a2b; color:#6c9bff; border-color:#1a2a3f; }
         .lm-listing-icon.type-game { background:#2b1502; color:#e0793a; border-color:#3f230a; }
         .lm-listing-icon.type-app { background:#1e0d2b; color:#c084fc; border-color:#2f1a3f; }
         .lm-listing-info { flex:1; min-width:150px; }
         .lm-listing-info .lm-title { font-size:14px; font-weight:600; color:#ffffff; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
         .lm-listing-info .lm-meta-row { display:flex; align-items:center; gap:7px; margin-top:2px; }
         .lm-listing-info .lm-url { font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
         .lm-listing-info .lm-type-chip { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:2px 6px; border-radius:3px; flex-shrink:0; }
         .lm-listing-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
         .lm-item-edit, .lm-item-delete {
            background:transparent; border:1px solid #2a2a2a; color:#d0d5dd; font-size:11.5px; font-weight:500;
            padding:5px 16px; border-radius:100px; cursor:pointer; transition:0.2s; font-family:inherit;
         }
         .lm-item-edit:hover { background:#1a1a1a; border-color:#4a4a4a; color:#fff; }
         .lm-item-delete { border-color:#3a1a22; color:#f87171; }
         .lm-item-delete:hover { background:#1a0a10; border-color:#5a2a38; color:#fca5a5; }
         /* ─── RESPONSIVE ─── */
         @media (max-width: 700px) {
            .lm-app { padding: 0 16px 22px; }
            .lm-pricing-grid { grid-template-columns:repeat(2, 1fr); }
            .lm-limit-row { flex-direction:column; align-items:stretch; gap:10px; }
            .lm-btn-plan-upgrade { justify-content:center; }
            .lm-limit-track { max-width:100%; }
            .lm-listing-item { flex-wrap:wrap; }
            .lm-listing-actions { margin-left:0; width:100%; justify-content:flex-end; }
         }
         @media (max-width: 480px) {
            .lm-category-tabs { gap:6px; }
            .lm-tab-btn { padding:9px 4px; font-size:11px; gap:4px; }
            .lm-tab-btn svg { width:14px; height:14px; }
            .lm-cta-btn { width:100%; justify-content:center; }
         }

/* ── extracted style block 4 (originally around char offset 892980) ── */
#profileModal {
    font-family: inherit;
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: var(--mp-bg);
    display: flex;
    flex-direction: column;
    /* Brighter, more visible section borders — the shared --mp-border
       (rgba(255,255,255,0.07)) is nearly invisible against the photo
       background, so every card in this modal gets its own crisper edge. */
    --mp-border: rgba(255,255,255,0.22);
    --mp-border-hover: rgba(255,255,255,0.4);
  }
  #profileModal *,
  #profileModal *::before,
  #profileModal *::after {
    box-sizing: border-box;
  }
  .pm-modal {
    width: 100%;
    height: 100%;
    background:
      linear-gradient(180deg, rgba(8, 8, 14, 0.55) 0%, rgba(8, 8, 14, 0.75) 100%),
      url('https://wallup.net/wp-content/uploads/2019/09/952645-forest-trees-nature-landscape-tree.jpg') center/cover no-repeat fixed;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── Header — matches settingsModal's .modal-header / .brand / .cancel-btn pattern ── */
  .pm-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(5,5,8,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mp-border);
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
  }
  .pm-left-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .pm-left-title svg {
    width: 24px;
    height: 24px;
    stroke: var(--mp-accent);
    fill: none;
    stroke-width: 2;
  }
  .pm-left-title span {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mp-text);
    letter-spacing: -0.3px;
    white-space: nowrap;
  }
  .pm-close-btn {
    background: transparent;
    border: 1px solid var(--mp-border);
    color: var(--mp-text-sec);
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background var(--mp-transition), border-color var(--mp-transition), color var(--mp-transition);
    white-space: nowrap;
    font-family: inherit;
  }
  .pm-close-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--mp-border-hover);
    color: var(--mp-text);
  }
  .pm-close-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  .pm-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pm-modal-content::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* ── Skeleton loading state ── */
  @keyframes pm-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
  .pm-skel {
    background: linear-gradient(90deg, var(--mp-surface-raised) 25%, #1c1c22 50%, var(--mp-surface-raised) 75%);
    background-size: 800px 100%;
    animation: pm-shimmer 1.4s infinite linear;
    border-radius: 0.5rem;
    display: inline-block;
  }
  .pm-skel-avatar { width: 88px; height: 88px; border-radius: 50%; }
  .pm-skel-name { height: 1.3rem; width: 150px; margin-top: 0.1rem; }
  .pm-skel-handle { height: 0.85rem; width: 100px; }

  /* ── Identity block ──
     Single quiet lime ring instead of a rainbow gradient — the ring reads
     as "this account is active," reusing the app's one accent color rather
     than introducing a second, unrelated palette. */
  .pm-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
  }
  .pm-avatar-wrapper {
    position: relative;
    width: 88px;
    height: 88px;
    margin-bottom: 0.35rem;
  }
  .pm-avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--mp-accent);
    padding: 2px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  }
  .pm-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--mp-surface-raised);
    border: 3px solid var(--mp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mp-text-sec);
    letter-spacing: 0.02em;
  }
  .pm-avatar-circle svg {
    width: 40px;
    height: 40px;
    stroke: var(--mp-text-muted);
    fill: none;
    stroke-width: 1.5;
  }
  #pmAvatar:hover .pm-avatar-hover { opacity: 1; }
  .pm-username-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--mp-text);
    letter-spacing: -0.2px;
  }
  .pm-handle-text {
    color: var(--mp-text-sec);
    font-size: 0.85rem;
  }
  .pm-email-text {
    /* kept for #pmLoginEmail — unused visually by default, JS sets textContent */
    color: var(--mp-text-muted);
    font-size: 0.78rem;
  }

  /* ── Primary action: Messages & Deals ── */
  .pm-inbox-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 440px;
    background: var(--mp-surface-raised);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: border-color var(--mp-transition), background var(--mp-transition);
    font-family: inherit;
    color: var(--mp-text);
    text-align: left;
  }
  .pm-inbox-btn:hover {
    border-color: var(--mp-border-hover);
    background: #141419;
  }
  .pm-inbox-btn-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .pm-inbox-btn-left svg {
    width: 19px;
    height: 19px;
    stroke: var(--mp-accent);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .pm-inbox-label {
    font-size: 0.95rem;
    font-weight: 700;
  }
  .pm-inbox-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .pm-inbox-unread-badge {
    background: var(--mp-accent);
    color: #06210b;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 2rem;
    min-width: 22px;
    text-align: center;
  }
  .pm-inbox-arrow {
    width: 15px;
    height: 15px;
    stroke: var(--mp-text-muted);
  }

  /* ── Secondary actions row ── */
  .pm-quick-row {
    display: flex;
    gap: 0.65rem;
    width: 100%;
    max-width: 440px;
  }
  .pm-quick-btn {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 0.8rem 0.75rem;
    cursor: pointer;
    transition: border-color var(--mp-transition), background var(--mp-transition), color var(--mp-transition);
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--mp-text-sec);
  }
  .pm-quick-btn:hover {
    border-color: var(--mp-border-hover);
    color: var(--mp-text);
    background: var(--mp-surface-raised);
  }
  .pm-quick-btn svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; }

  /* ── AI Agent button: shimmer + glitter, so it reads as "AI-powered" ── */
  .pm-quick-btn.pm-ai-btn {
    position: relative;
    overflow: hidden;
    border-color: rgba(167,139,250,0.35);
    background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(167,139,250,0.06) 55%, rgba(124,58,237,0.14));
    color: #d8ccff;
  }
  .pm-quick-btn.pm-ai-btn:hover {
    border-color: rgba(167,139,250,0.55);
    color: #efe9ff;
    background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(167,139,250,0.1) 55%, rgba(124,58,237,0.2));
  }
  .pm-quick-btn.pm-ai-btn svg { position: relative; z-index: 2; filter: drop-shadow(0 0 3px rgba(167,139,250,0.6)); }
  .pm-quick-btn.pm-ai-btn span { position: relative; z-index: 2; }
  /* Moving diagonal sheen */
  .pm-quick-btn.pm-ai-btn::before {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), rgba(216,204,255,0.35), transparent);
    transform: rotate(8deg);
    animation: pmAiSheen 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }
  /* Twinkling sparkle dots */
  .pm-quick-btn.pm-ai-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
      radial-gradient(circle, #fff 1px, transparent 1.4px),
      radial-gradient(circle, #d8ccff 1px, transparent 1.4px),
      radial-gradient(circle, #fff 1px, transparent 1.4px);
    background-size: 100% 100%;
    background-position: 18% 30%, 68% 65%, 85% 25%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: pmAiTwinkle 2.6s ease-in-out infinite;
  }
  @keyframes pmAiSheen {
    0%   { left: -60%; opacity: 0; }
    15%  { opacity: 1; }
    50%  { left: 120%; opacity: 0.9; }
    51%  { opacity: 0; }
    100% { left: 120%; opacity: 0; }
  }
  @keyframes pmAiTwinkle {
    0%, 100% { opacity: 0; }
    20% { opacity: 0.9; }
    35% { opacity: 0.2; }
    55% { opacity: 0.8; }
    75% { opacity: 0.1; }
    88% { opacity: 0.7; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pm-quick-btn.pm-ai-btn::before, .pm-quick-btn.pm-ai-btn::after { animation: none; }
  }

  /* ── Dashboard CTA: lime data glow + a tiny animated bar-chart so it
       reads as "analytics" at a glance, not just another nav button. ── */
  .pm-quick-btn.pm-dash-btn {
    position: relative;
    overflow: hidden;
    border-color: rgba(163,230,53,0.35);
    box-shadow: 0 0 0 1px rgba(163,230,53,0.1), 0 0 10px rgba(163,230,53,0.14);
    background: linear-gradient(135deg, rgba(163,230,53,0.1), rgba(163,230,53,0.03) 60%);
    color: #d9f5b0;
  }
  .pm-quick-btn.pm-dash-btn:hover {
    border-color: rgba(163,230,53,0.6);
    box-shadow: 0 0 0 1px rgba(163,230,53,0.18), 0 0 14px rgba(163,230,53,0.26);
    color: #eafdd0;
    background: linear-gradient(135deg, rgba(163,230,53,0.16), rgba(163,230,53,0.05) 60%);
  }
  .pm-dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 15px;
    flex-shrink: 0;
  }
  .pm-dash-bar {
    width: 3px;
    border-radius: 1.5px 1.5px 0 0;
    background: currentColor;
    opacity: 0.85;
    filter: drop-shadow(0 0 2px rgba(163,230,53,0.5));
    animation: pmDashPulse 2.4s ease-in-out infinite;
    transform-origin: bottom;
  }
  .pm-dash-bar:nth-child(1) { height: 40%; animation-delay: -1.8s; }
  .pm-dash-bar:nth-child(2) { height: 90%; animation-delay: -0.6s; }
  .pm-dash-bar:nth-child(3) { height: 60%; animation-delay: -1.2s; }
  .pm-dash-bar:nth-child(4) { height: 100%; animation-delay: 0s; }
  @keyframes pmDashPulse {
    0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
    50%      { transform: scaleY(1); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pm-dash-bar { animation: none; transform: scaleY(0.85); }
  }

  /* ── Parent tabs — reduced to Profile / Listings; Settings + Sign out
       live in the always-visible bottom row since Settings never actually
       rendered as an in-modal pane (its click handler opens settingsModal
       directly and stops propagation before the tab-switch runs). ── */
  .pm-parent-tab-row {
    display: flex;
    gap: 0.3rem;
    background: var(--mp-surface);
    padding: 0.28rem;
    border-radius: 60px;
    border: 1px solid var(--mp-border);
    width: 100%;
    max-width: 440px;
  }
  .pm-parent-tab {
    flex: 1;
    padding: 0.65rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.83rem;
    color: var(--mp-text-sec);
    cursor: pointer;
    transition: background var(--mp-transition), color var(--mp-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-family: inherit;
  }
  .pm-parent-tab.active {
    background: var(--mp-text);
    color: #050505;
  }
  .pm-parent-content {
    width: 100%;
    max-width: 440px;
    display: none;
    flex-direction: column;
    gap: 1.1rem;
  }
  .pm-parent-content.active { display: flex; }

  /* ── Sub tabs (Account / Public Profile) ── */
  .pm-sub-tab-row {
    display: flex;
    gap: 0.25rem;
    background: var(--mp-surface);
    padding: 0.2rem;
    border-radius: 60px;
    border: 1px solid var(--mp-border);
    width: 100%;
  }
  .pm-sub-tab {
    flex: 1;
    padding: 0.5rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.76rem;
    color: var(--mp-text-sec);
    cursor: pointer;
    transition: background var(--mp-transition), color var(--mp-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-family: inherit;
  }
  .pm-sub-tab.active {
    background: var(--mp-surface-raised);
    color: var(--mp-text);
  }
  .pm-sub-tab-content {
    display: none;
    flex-direction: column;
    gap: 1.1rem;
  }
  .pm-sub-tab-content.active { display: flex; }

  /* ── Inputs ── */
  .pm-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
  }
  .pm-input-group label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mp-text-muted);
    margin-left: 0.1rem;
  }
  .pm-input-field {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    color: var(--mp-text);
    outline: none;
    transition: border-color var(--mp-transition), background var(--mp-transition);
    font-family: inherit;
  }
  .pm-input-field::placeholder { color: var(--mp-text-muted); }
  .pm-input-field:focus {
    border-color: var(--mp-accent-border);
    background: var(--mp-surface-raised);
  }
  .pm-input-field:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  textarea.pm-input-field { resize: vertical; min-height: 78px; }
  .pm-hint {
    font-size: 0.7rem;
    color: var(--mp-text-muted);
    margin-left: 0.1rem;
  }
  .pm-save-btn {
    background: var(--mp-text);
    border: none;
    color: #050505;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    font-size: 0.87rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: opacity var(--mp-transition);
    width: 100%;
    font-family: inherit;
  }
  .pm-save-btn:hover { opacity: 0.88; }
  .pm-save-btn svg { width: 17px; height: 17px; stroke: #050505; fill: none; stroke-width: 2.2; }

  /* ── Toggles ── */
  .pm-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    padding: 0.75rem 1.05rem;
    width: 100%;
  }
  .pm-toggle-label { font-size: 0.87rem; color: var(--mp-text); }
  .pm-toggle-switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
  .pm-toggle-switch input { opacity: 0; width: 0; height: 0; }
  .pm-slider {
    position: absolute; cursor: pointer; inset: 0;
    background-color: #26262c;
    transition: 0.2s;
    border-radius: 24px;
  }
  .pm-slider:before {
    position: absolute; content: "";
    height: 17px; width: 17px; left: 3px; bottom: 3px;
    background-color: #fff;
    transition: 0.2s;
    border-radius: 50%;
  }
  input:checked + .pm-slider { background-color: var(--mp-accent); }
  input:checked + .pm-slider:before { transform: translateX(17px); background-color: #06210b; }

  /* ── Plan / subscription card ── */
  .pm-plan-card {
    width: 100%;
    max-width: 440px;
    background: var(--mp-surface-raised);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .pm-plan-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 2rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .pm-plan-free    { background: #1c1c22; color: var(--mp-text-sec); }
  .pm-plan-starter { background: rgba(163,230,53,0.12); color: var(--mp-accent); }
  .pm-plan-growth  { background: rgba(129,140,248,0.14); color: #818cf8; }
  .pm-plan-pro     { background: rgba(251,146,60,0.14); color: #fb923c; }
  /* pm-sub-badge kept as an alias: JS occasionally assigns this class name
     instead of pm-plan-badge, and this class had no CSS at all before —
     the sub badge silently rendered unstyled. Aliasing it here fixes that
     without needing to touch the JS that sets className. */
  .pm-sub-badge { }
  .pm-sub-badge.pm-plan-free,
  .pm-sub-badge.pm-plan-starter,
  .pm-sub-badge.pm-plan-growth,
  .pm-sub-badge.pm-plan-pro {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 2rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .pm-manage-plan-btn {
    background: var(--mp-accent);
    color: #06210b;
    border: none;
    border-radius: 50px;
    padding: 0.5rem 1.05rem;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: opacity var(--mp-transition);
  }
  .pm-manage-plan-btn:hover { opacity: 0.88; }
  .pm-cancel-plan-btn {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(248,113,113,0.25);
    border-radius: 50px;
    padding: 0.42rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background var(--mp-transition), border-color var(--mp-transition);
  }
  .pm-cancel-plan-btn:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.4); }

  /* ── GitHub connect row ── */
  .pm-github-row {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .pm-github-icon {
    width: 34px; height: 34px;
    background: var(--mp-surface-raised);
    border: 1px solid var(--mp-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pm-github-name { font-size: 0.85rem; font-weight: 700; color: var(--mp-text); line-height: 1.2; }
  .pm-github-status { font-size: 0.7rem; color: var(--mp-text-muted); margin-top: 0.15rem; }
  .pm-github-connect-btn,
  .pm-github-disconnect-btn {
    border: none;
    border-radius: 0.65rem;
    padding: 0.42rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: opacity var(--mp-transition), background var(--mp-transition);
  }
  .pm-github-connect-btn { background: var(--mp-text); color: #050505; }
  .pm-github-connect-btn:hover { opacity: 0.88; }
  .pm-github-disconnect-btn { background: transparent; color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
  .pm-github-disconnect-btn:hover { background: rgba(248,113,113,0.08); }

  /* ── GitHub repo list ── */
  .pm-repo-list {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .pm-repo-item {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .pm-repo-info { min-width: 0; }
  .pm-repo-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mp-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .pm-repo-name:hover { text-decoration: underline; }
  .pm-repo-meta {
    font-size: 0.7rem;
    color: var(--mp-text-muted);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .pm-repo-private-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mp-text-muted);
    border: 1px solid var(--mp-border);
    border-radius: 4px;
    padding: 0.08rem 0.35rem;
  }
  .pm-repo-empty, .pm-repo-loading, .pm-repo-error {
    font-size: 0.75rem;
    color: var(--mp-text-muted);
    padding: 0.6rem 0.2rem;
  }
  .pm-repo-error { color: #f87171; }

  /* ── Repo picker field (listing forms) ── */
  .srf-repo-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
  }
  .srf-repo-field-optional {
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
    color: rgba(255,255,255,0.3);
  }
  .srf-repo-picker { position: relative; }
  .srf-repo-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .srf-repo-picker-btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
  .srf-repo-picker-btn-selected { color: #fff; border-color: rgba(163,230,53,0.4); }

  .srf-repo-connect-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.2s;
  }
  .srf-repo-connect-btn:hover { filter: brightness(1.15); }
  .srf-repo-connect-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .srf-repo-picker-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .srf-repo-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    background: #111113;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 6px;
  }
  .srf-repo-option {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .srf-repo-option:hover { background: rgba(255,255,255,0.06); }
  .srf-repo-option .pm-repo-name { color: #fff; font-size: 13px; }
  .srf-repo-option .pm-repo-meta { color: rgba(255,255,255,0.4); }

  /* ── Listings grid ── */
  .pm-listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
  }
  .pm-listing-card {
    background: var(--mp-surface-raised);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    overflow: hidden;
    transition: border-color var(--mp-transition);
  }
  .pm-listing-card:hover { border-color: var(--mp-border-hover); }
  .pm-favorite-remove-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    height: 26px; padding: 0 10px; border-radius: 13px;
    background: rgba(239,68,68,0.14); backdrop-filter: blur(4px);
    border: 1px solid rgba(239,68,68,0.35);
    color: #f87171;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap;
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .pm-favorite-remove-btn svg { width: 12px; height: 12px; flex: none; }
  .pm-favorite-remove-btn:hover { background: rgba(239,68,68,0.24); border-color: rgba(239,68,68,0.55); color: #fca5a5; }
  .pm-favorite-remove-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .pm-listing-image {
    width: 100%;
    height: 96px;
    object-fit: cover;
    background: var(--mp-surface);
  }
  .pm-listing-info { padding: 0.75rem 0.85rem 0.85rem; }
  .pm-listing-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--mp-text);
    margin-bottom: 0.3rem;
  }
  .pm-listing-desc {
    font-size: 0.72rem;
    color: var(--mp-text-sec);
    line-height: 1.35;
    margin-bottom: 0.7rem;
  }
  /* Boost CTA — kept as the one deliberate second accent (a premium
     upsell), but tuned down and given the app's own radius/shadow scale
     so it reads as "special," not as a different app fighting for
     attention against the lime accent used everywhere else. */
  .pm-listing-boost {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%;
    background: linear-gradient(120deg, #7c3aed, #9333ea, #7c3aed);
    background-size: 200% 200%;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.6rem;
    border-radius: 100px;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0.5rem;
    transition: opacity var(--mp-transition);
  }
  .pm-listing-boost:hover { opacity: 0.9; }
  .pm-listing-boost svg { width: 12px; height: 12px; flex-shrink: 0; }
  .pm-listing-actions-row { display: flex; width: 100%; gap: 0.5rem; }
  .pm-listing-actions-row button {
    flex: 1 1 0;
    min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.4rem;
    border-radius: 100px;
    cursor: pointer;
    transition: background var(--mp-transition), border-color var(--mp-transition);
  }
  .pm-listing-actions-row button svg { width: 12px; height: 12px; flex-shrink: 0; }
  .pm-listing-edit-btn { background: var(--mp-surface); border: 1px solid var(--mp-border); color: var(--mp-text-sec); }
  .pm-listing-edit-btn:hover { background: #17171c; border-color: var(--mp-border-hover); color: var(--mp-text); }
  .pm-listing-delete-btn { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #f87171; }
  .pm-listing-delete-btn:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); }
  .pm-add-listing-btn {
    background: transparent;
    border: 1px dashed var(--mp-border-hover);
    color: var(--mp-text-sec);
    padding: 0.7rem 1.3rem;
    border-radius: 50px;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-family: inherit;
    width: 100%;
    transition: border-color var(--mp-transition), color var(--mp-transition);
  }
  .pm-add-listing-btn:hover { border-color: var(--mp-accent-border); color: var(--mp-accent); }

  /* ── Bottom action row: always visible, holds Settings + Sign out
       (Settings is a direct action, not a tab — see note above) ── */
  .pm-bottom-actions {
    display: flex; flex-direction: column; gap: 0.6rem;
    width: 100%; max-width: 440px;
    margin-top: 0.25rem;
  }
  .pm-bottom-row { display: flex; gap: 0.6rem; }
  .pm-bottom-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.8rem 1rem;
    border-radius: var(--mp-radius-sm); cursor: pointer; font-family: inherit;
    font-size: 0.82rem; font-weight: 700;
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    color: var(--mp-text-sec);
    transition: background var(--mp-transition), border-color var(--mp-transition), color var(--mp-transition);
  }
  .pm-bottom-btn:hover { border-color: var(--mp-border-hover); color: var(--mp-text); background: var(--mp-surface-raised); }
  .pm-bottom-btn svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; }
  .pm-bottom-dispute { color: #fbbf24; }
  .pm-bottom-dispute:hover { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.3); }
  .pm-bottom-logout { color: #f87171; }
  .pm-bottom-logout:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); }

  @media (max-width: 480px) {
    .pm-modal-content { padding: 1.5rem 1.1rem 2rem; }
    .pm-parent-tab { font-size: 0.78rem; }
    .pm-listing-image { height: 84px; }
  }

/* ── extracted style block 5 (originally around char offset 938229) ── */
/* ══════════════════════════════════════════════════════════════
   SUPPORT MODALS — About / Contact / Help / Terms
   Shared shell, per-theme accent colour via CSS variable.
   ══════════════════════════════════════════════════════════════ */
.supp-modal { background: #000; }
.supp-shell { overflow-y: auto; }
.supp-theme-about   { --supp-accent: #38bdf8; --supp-accent-soft: rgba(56,189,248,.12); }
.supp-theme-contact { --supp-accent: #b48bfa; --supp-accent-soft: rgba(180,139,250,.12); }
.supp-theme-help    { --supp-accent: #3ddc97; --supp-accent-soft: rgba(61,220,151,.12); }
.supp-theme-terms   { --supp-accent: #ffb14e; --supp-accent-soft: rgba(255,177,78,.12); }
.supp-theme-howto      { --supp-accent: #a3e635; --supp-accent-soft: rgba(163,230,53,.12); }
.supp-theme-escrow     { --supp-accent: #2dd4bf; --supp-accent-soft: rgba(45,212,191,.12); }
.supp-theme-protection { --supp-accent: #fb7185; --supp-accent-soft: rgba(251,113,133,.12); }

.supp-header .brand svg { stroke: var(--supp-accent); }
.supp-body {
  flex: 1; overflow-y: auto; padding: 28px 20px 60px;
  max-width: 720px; margin: 0 auto; width: 100%;
}

.supp-hero { padding: 8px 0 26px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 26px; }
.supp-hero-sm { padding-bottom: 20px; margin-bottom: 20px; }
.supp-hero-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--supp-accent); background: var(--supp-accent-soft); border: 1px solid var(--supp-accent);
  border-color: color-mix(in srgb, var(--supp-accent) 40%, transparent);
  padding: 4px 10px; border-radius: 100px; margin-bottom: 12px;
}
.supp-hero-title { font-size: 26px; font-weight: 800; color: #f5f5fa; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.3px; }
.supp-hero-title span { color: var(--supp-accent); }
.supp-hero-sub { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0; max-width: 560px; }

.supp-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 30px; }
.supp-stat {
  background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; text-align: center;
}
.supp-stat-num { font-size: 17px; font-weight: 800; color: var(--supp-accent); }
.supp-stat-lbl { font-size: 10.5px; color: rgba(255,255,255,.45); line-height: 1.35; }

.supp-section { margin-bottom: 30px; }
.supp-section-title { font-size: 15px; font-weight: 800; color: #f0f0f5; margin: 0 0 12px; scroll-margin-top: 20px; }
.supp-p { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.7; margin: 0 0 12px; }
.supp-list { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.supp-list li { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.6; }
.supp-inline-link {
  background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--supp-accent); font-weight: 700; text-decoration: none;
}
.supp-inline-link:hover { text-decoration: underline; }

.supp-values-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.supp-value { background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; }
.supp-value-icon {
  width: 30px; height: 30px; border-radius: 9px; background: var(--supp-accent-soft); color: var(--supp-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.supp-value-icon svg { width: 16px; height: 16px; }
.supp-value-title { font-size: 12.5px; font-weight: 700; color: #f0f0f5; margin-bottom: 3px; }
.supp-value-desc { font-size: 11.5px; color: rgba(255,255,255,.45); line-height: 1.5; }

.supp-linkout-row { display: flex; flex-direction: column; gap: 8px; }
.supp-linkout {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: 13px 14px; font-size: 13px; font-weight: 700; color: #f0f0f5; cursor: pointer;
  font-family: inherit; text-align: left; transition: border-color .15s, background .15s;
}
.supp-linkout:hover { border-color: var(--supp-accent); background: var(--supp-accent-soft); }
.supp-linkout svg { width: 15px; height: 15px; color: var(--supp-accent); flex-shrink: 0; }
.supp-linkout-solid {
  background: var(--supp-accent); border-color: var(--supp-accent); color: #08080d; justify-content: center;
}
.supp-linkout-solid:hover { opacity: .88; background: var(--supp-accent); }
.supp-linkout-solid svg { color: #08080d; }

/* Contact form */
.supp-quicklinks { margin-bottom: 26px; }
.supp-quicklink {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--supp-accent-soft); border: 1px solid color-mix(in srgb, var(--supp-accent) 40%, transparent);
  color: var(--supp-accent); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.supp-quicklink:hover { background: color-mix(in srgb, var(--supp-accent) 22%, transparent); }
.supp-quicklink svg { width: 16px; height: 16px; flex-shrink: 0; }

.supp-form { display: flex; flex-direction: column; gap: 14px; }
.supp-form-row { display: flex; flex-direction: column; gap: 6px; }
.supp-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .04em; }
.supp-input {
  background: #101018; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 11px 13px; font-size: 13.5px; color: #f0f0f5; font-family: inherit;
  transition: border-color .15s;
}
.supp-input:focus { outline: none; border-color: var(--supp-accent); }
.supp-select { appearance: none; cursor: pointer; }
.supp-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.supp-submit-btn {
  background: var(--supp-accent); color: #08080d; border: none; border-radius: 10px;
  padding: 13px; font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: opacity .15s; margin-top: 4px;
}
.supp-submit-btn:hover { opacity: .88; }
.supp-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.supp-form-status { font-size: 12px; font-weight: 600; min-height: 16px; }
.supp-form-status.ok  { color: #3ddc97; }
.supp-form-status.err { color: #ff6b6b; }

.supp-steps { display: flex; flex-direction: column; gap: 10px; }
.supp-step { display: flex; gap: 12px; align-items: flex-start; }
.supp-step-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--supp-accent-soft); color: var(--supp-accent);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.supp-step-txt { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.55; padding-top: 2px; }

/* Help Center */
.supp-search-wrap {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  background: #101018; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 11px 14px;
}
.supp-search-wrap svg { width: 16px; height: 16px; color: rgba(255,255,255,.35); flex-shrink: 0; }
.supp-search-input { flex: 1; background: none; border: none; color: #f0f0f5; font-size: 13.5px; font-family: inherit; }
.supp-search-input:focus { outline: none; }
.supp-search-input::placeholder { color: rgba(255,255,255,.3); }

.supp-cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 30px; }
.supp-cat {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 8px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s;
}
.supp-cat svg { width: 20px; height: 20px; color: rgba(255,255,255,.5); }
.supp-cat span { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.65); text-align: center; line-height: 1.3; }
.supp-cat:hover, .supp-cat.sr-active { border-color: var(--supp-accent); background: var(--supp-accent-soft); }
.supp-cat:hover svg, .supp-cat.sr-active svg { color: var(--supp-accent); }
.supp-cat:hover span, .supp-cat.sr-active span { color: #f0f0f5; }

.supp-faq-list { display: flex; flex-direction: column; gap: 8px; }
.supp-faq-item { background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; }
.supp-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #f0f0f5;
}
.supp-faq-q svg { width: 15px; height: 15px; color: var(--supp-accent); flex-shrink: 0; transition: transform .18s; }
.supp-faq-item.sr-open .supp-faq-q svg { transform: rotate(45deg); }
.supp-faq-a { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.supp-faq-item.sr-open .supp-faq-a { max-height: 400px; }
.supp-faq-a-inner { padding: 0 14px 14px; font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.6; }
.supp-faq-empty { font-size: 12.5px; color: rgba(255,255,255,.4); text-align: center; padding: 24px 0; }

.supp-cta-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--supp-accent-soft); border: 1px solid color-mix(in srgb, var(--supp-accent) 35%, transparent);
  border-radius: 14px; padding: 16px 18px;
}
.supp-cta-banner-title { font-size: 13.5px; font-weight: 800; color: #f0f0f5; }
.supp-cta-banner-sub { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; }
.supp-cta-banner .supp-linkout-solid { flex-shrink: 0; padding: 11px 20px; }

/* Terms */
.supp-toc { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.supp-toc-item {
  background: #101018; border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.6);
  border-radius: 100px; padding: 7px 13px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: border-color .15s, color .15s;
}
.supp-toc-item:hover { border-color: var(--supp-accent); color: var(--supp-accent); }

@media (max-width: 480px) {
  .supp-values-grid { grid-template-columns: 1fr; }
  .supp-cat-grid { grid-template-columns: repeat(2,1fr); }
  .supp-stat-row { grid-template-columns: 1fr; }
  .supp-hero-title { font-size: 21px; }
}

         .full-modal {
         width: 100%;
         height: 100%;
         background: #000;
         display: flex;
         flex-direction: column;
         position: relative;
         overflow: hidden;
         }
         /* ── Profile modal bottom buttons ── */
         .pm-bottom-actions {
           display: flex; flex-direction: column; gap: 0.6rem;
           width: 100%; max-width: 440px;
           margin-top: 0.25rem;
         }
         .pm-bottom-row { display: flex; gap: 0.6rem; }
         .pm-bottom-btn {
           flex: 1; display: flex; align-items: center; justify-content: center;
           gap: 0.5rem; padding: 0.8rem 1rem;
           border-radius: var(--mp-radius-sm); cursor: pointer; font-family: inherit;
           font-size: 0.82rem; font-weight: 700;
           border: 1px solid var(--mp-border);
           background: var(--mp-surface);
           color: var(--mp-text-sec);
           transition: background var(--mp-transition), border-color var(--mp-transition), color var(--mp-transition);
         }
         .pm-bottom-btn:hover { border-color: var(--mp-border-hover); color: var(--mp-text); background: var(--mp-surface-raised); }
         .pm-bottom-btn svg {
           width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none;
         }
         .pm-bottom-dispute { color: #fbbf24; }
         .pm-bottom-dispute:hover { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.3); }
         .pm-bottom-logout { color: #f87171; }
         .pm-bottom-logout:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); }

         /* plan badge styles used in profile modal.
            .pm-sub-badge is aliased to the same rule set: pmRender() sets
            className to 'pm-sub-badge ' + planClass on #pmSubBadge, but
            .pm-sub-badge previously had no CSS of its own anywhere in this
            file, so the subscription-row badge silently rendered unstyled.
            This alias fixes that without changing the JS. */
         .pm-plan-badge,
         .pm-sub-badge {
         font-size: 0.68rem;
         font-weight: 800;
         padding: 3px 10px;
         border-radius: 2rem;
         letter-spacing: 0.4px;
         text-transform: uppercase;
         }
         .pm-plan-free    { background: #1c1c22; color: var(--mp-text-sec); }
         .pm-plan-starter { background: rgba(163,230,53,0.12); color: var(--mp-accent); }
         .pm-plan-growth  { background: rgba(129,140,248,0.14); color: #818cf8; }
         .pm-plan-pro     { background: rgba(251,146,60,0.14); color: #fb923c; }
         /* ── Header ─────────────────────── */
         .modal-header {
         position: sticky;
         top: 0;
         z-index: 20;
         background: #000;
         border-bottom: 1px solid #1a1a1a;
         padding: 1.2rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: nowrap;
         gap: 1rem;
         flex-shrink: 0;
         }
         /* Scoped to .modal-header (icon + <h2> pattern used by the
            Settings/About/Help/Contact/Terms modals) — this must NOT be a
            bare .brand rule. The site header and nav drawer also use a
            "brand" div (plain "Siterifty" + <span>.com</span> text, no
            icon/h2), and a bare .brand{display:flex; gap:.6rem} here was
            leaking into that unrelated element, visually inserting a gap
            between "Siterifty" and ".com". */
         .modal-header .brand {
         display: flex;
         align-items: center;
         gap: 0.6rem;
         }
         .modal-header .brand svg {
         width: 26px;
         height: 26px;
         stroke: #a5b4fc;
         fill: none;
         stroke-width: 2;
         }
         .modal-header .brand h2 {
         font-size: 1.2rem;
         font-weight: 800;
         color: #fff;
         letter-spacing: -0.3px;
         white-space: nowrap;
         }
         .cancel-btn {
         background: #e74c3c;
         border: none;
         color: #fff;
         padding: 0.5rem 1.2rem;
         border-radius: 50px;
         font-weight: 600;
         font-size: 0.85rem;
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 0.4rem;
         transition: background 0.2s;
         white-space: nowrap;
         }
         .cancel-btn:hover {
         background: #ff4757;
         }
         .cancel-btn svg {
         width: 16px;
         height: 16px;
         stroke: currentColor;
         fill: none;
         stroke-width: 2;
         }
         /* ── Main Layout ───────────────── */
         .main-content {
         flex: 1;
         display: flex;
         overflow: hidden;
         position: relative;
         min-height: 0;
         }
         /* ── Settings Sidebar (Left) ──── */
         .settings-sidebar {
         width: 300px;
         min-width: 260px;
         background: #050505;
         border-right: 1px solid #1a1a1a;
         display: flex;
         flex-direction: column;
         padding: 1.2rem 0.8rem;
         gap: 0.3rem;
         overflow-y: auto;
         flex-shrink: 0;
         z-index: 5;
         }
         .sidebar-section-label {
         font-size: 0.68rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1px;
         color: #666;
         padding: 0.6rem 0.8rem 0.3rem;
         margin-top: 0.4rem;
         }
         .sidebar-section-label:first-child {
         margin-top: 0;
         }
         .sidebar-footer {
           margin-top: auto;
           padding-top: 0.6rem;
           border-top: 1px solid #1a1a1a;
           display: flex;
           flex-direction: column;
           gap: 0.25rem;
         }
         .sidebar-footer-btn {
           display: flex; align-items: center; gap: 0.7rem;
           padding: 0.7rem 0.9rem; border-radius: 0.7rem;
           cursor: pointer; width: 100%; text-align: left;
           font-family: inherit; font-size: 0.85rem; font-weight: 500;
           border: none; background: transparent; transition: background 0.15s;
         }
         .sidebar-footer-btn svg {
           width: 17px; height: 17px; stroke: currentColor;
           fill: none; stroke-width: 1.8; flex-shrink: 0;
         }
         .sidebar-footer-btn.dispute {
           color: #fbbf24;
         }
         .sidebar-footer-btn.dispute:hover { background: rgba(251,191,36,0.07); }
         .sidebar-footer-btn.logout {
           color: #f87171;
         }
         .sidebar-footer-btn.logout:hover { background: rgba(248,113,113,0.07); }
         .settings-nav-item {
         display: flex;
         align-items: center;
         gap: 0.7rem;
         padding: 0.75rem 0.9rem;
         border-radius: 0.7rem;
         cursor: pointer;
         transition: all 0.2s ease;
         color: #aaa;
         font-size: 0.88rem;
         font-weight: 500;
         border: none;
         background: transparent;
         width: 100%;
         max-width: 100%;
         text-align: left;
         font-family: inherit;
         position: relative;
         overflow: hidden;
         box-sizing: border-box;
         }
         .settings-nav-item:hover {
         background: #0f0f0f;
         color: #fff;
         }
         .settings-nav-item.active {
         background: #fff;
         color: #000;
         font-weight: 700;
         box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
         }
         .settings-nav-item svg {
         width: 18px;
         height: 18px;
         stroke: currentColor;
         fill: none;
         stroke-width: 1.8;
         flex-shrink: 0;
         }
         .settings-nav-item .nav-badge {
         margin-left: auto;
         flex-shrink: 0;
         background: #a3e635;
         color: #000;
         font-size: 0.65rem;
         font-weight: 800;
         padding: 2px 8px;
         border-radius: 1rem;
         white-space: nowrap;
         }
         .settings-nav-item.active .nav-badge {
         background: #000;
         color: #a3e635;
         }
         /* ── Detail Panel (Right) ─────── */
         .detail-panel {
         flex: 1;
         background: #000;
         overflow-y: auto;
         padding: 1.8rem 2rem 2rem;
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
         min-width: 0;
         transition: all 0.25s ease;
         }
         .detail-panel-header {
         display: flex;
         align-items: center;
         gap: 0.6rem;
         margin-bottom: 0.3rem;
         }
         .detail-panel-header svg {
         width: 22px;
         height: 22px;
         stroke: #a5b4fc;
         fill: none;
         stroke-width: 2;
         }
         .detail-panel-header h3 {
         font-size: 1.3rem;
         font-weight: 700;
         color: #fff;
         letter-spacing: -0.2px;
         }
         .detail-panel-desc {
         font-size: 0.82rem;
         color: #777;
         margin-top: -0.8rem;
         margin-bottom: 0.2rem;
         line-height: 1.4;
         }
         .detail-divider {
         border: none;
         border-top: 1px solid #1a1a1a;
         margin: 0.3rem 0 0.8rem;
         }
         /* ── Form Elements ─────────────── */
         .input-group {
         display: flex;
         flex-direction: column;
         gap: 0.35rem;
         width: 100%;
         max-width: 520px;
         }
         .input-group label {
         font-size: 0.75rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.4px;
         color: #999;
         margin-left: 0.2rem;
         }
         .input-field {
         background: #0a0a0a;
         border: 1px solid #333;
         border-radius: 0.8rem;
         padding: 0.75rem 1rem;
         font-size: 0.9rem;
         color: #f0f0f0;
         outline: none;
         transition: border-color 0.2s, background 0.2s;
         font-family: inherit;
         }
         .input-field:focus {
         border-color: #a5b4fc;
         background: #0f0f0f;
         }
         .input-field::placeholder {
         color: #555;
         }
         textarea.input-field {
         resize: vertical;
         min-height: 80px;
         }
         .hint {
         font-size: 0.7rem;
         color: #666;
         margin-left: 0.2rem;
         line-height: 1.3;
         }
         #pfpAvatarBtn:hover .pfp-avatar-hover { opacity: 1; }
         .hint.warning {
         color: #f0a060;
         }
         .hint.danger {
         color: #e74c3c;
         }
         .save-btn {
         background: #fff;
         border: none;
         color: #000;
         font-weight: 700;
         padding: 0.8rem 1.6rem;
         border-radius: 50px;
         font-size: 0.88rem;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 0.4rem;
         transition: background 0.2s, transform 0.15s;
         font-family: inherit;
         align-self: flex-start;
         white-space: nowrap;
         }
         .save-btn:hover {
         background: #e0e0e0;
         transform: translateY(-1px);
         }
         .save-btn:active {
         transform: scale(0.97);
         }
         .save-btn svg {
         width: 16px;
         height: 16px;
         stroke: #000;
         fill: none;
         stroke-width: 2.2;
         }
         .danger-btn {
         background: transparent;
         border: 1px solid #e74c3c;
         color: #e74c3c;
         font-weight: 600;
         padding: 0.7rem 1.4rem;
         border-radius: 50px;
         font-size: 0.85rem;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         gap: 0.4rem;
         transition: all 0.2s;
         font-family: inherit;
         align-self: flex-start;
         white-space: nowrap;
         }
         .danger-btn:hover {
         background: #e74c3c;
         color: #fff;
         }
         /* ── Toggle ────────────────────── */
         .toggle-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
         background: #0a0a0a;
         border: 1px solid #222;
         border-radius: 0.8rem;
         padding: 0.85rem 1.2rem;
         width: 100%;
         max-width: 520px;
         gap: 1rem;
         }
         .toggle-label-wrap {
         display: flex;
         flex-direction: column;
         gap: 0.15rem;
         }
         .toggle-label {
         font-size: 0.88rem;
         color: #ddd;
         font-weight: 500;
         }
         .toggle-sublabel {
         font-size: 0.7rem;
         color: #666;
         }
         .toggle-switch {
         position: relative;
         display: inline-block;
         width: 44px;
         height: 24px;
         flex-shrink: 0;
         }
         .toggle-switch input {
         opacity: 0;
         width: 0;
         height: 0;
         }
         .slider {
         position: absolute;
         cursor: pointer;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: #2a2a2a;
         transition: .3s;
         border-radius: 24px;
         }
         .slider:before {
         position: absolute;
         content: "";
         height: 20px;
         width: 20px;
         left: 2px;
         bottom: 2px;
         background-color: #fff;
         transition: .3s;
         border-radius: 50%;
         }
         input:checked+.slider {
         background-color: #a3e635;
         }
         input:checked+.slider:before {
         transform: translateX(20px);
         }
         /* ── Select ────────────────────── */
         .select-field {
         background: #0a0a0a;
         border: 1px solid #333;
         border-radius: 0.8rem;
         padding: 0.75rem 1rem;
         font-size: 0.9rem;
         color: #f0f0f0;
         outline: none;
         font-family: inherit;
         cursor: pointer;
         appearance: none;
         -webkit-appearance: none;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right 1rem center;
         padding-right: 2.5rem;
         transition: border-color 0.2s;
         max-width: 320px;
         }
         .select-field:focus {
         border-color: #a5b4fc;
         }
         /* ── Info Card ─────────────────── */
         .info-card {
         background: #0a0a0a;
         border: 1px solid #222;
         border-radius: 1rem;
         padding: 1.2rem 1.4rem;
         display: flex;
         align-items: flex-start;
         gap: 0.8rem;
         max-width: 520px;
         }
         .info-card svg {
         width: 20px;
         height: 20px;
         stroke: #a3e635;
         fill: none;
         stroke-width: 2;
         flex-shrink: 0;
         margin-top: 1px;
         }
         .info-card .info-text {
         font-size: 0.82rem;
         color: #bbb;
         line-height: 1.5;
         }
         .info-card .info-text strong {
         color: #fff;
         }
         /* ── Tag / Chip ────────────────── */
         .chip-row {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
         }
         .chip {
         background: #111;
         border: 1px solid #2a2a2a;
         border-radius: 2rem;
         padding: 0.45rem 0.9rem;
         font-size: 0.78rem;
         color: #ccc;
         display: flex;
         align-items: center;
         gap: 0.4rem;
         cursor: default;
         }
         .chip.active-chip {
         background: #1a2e0a;
         border-color: #a3e635;
         color: #a3e635;
         font-weight: 600;
         }
         .chip button {
         background: none;
         border: none;
         color: #666;
         cursor: pointer;
         font-size: 1rem;
         line-height: 1;
         padding: 0;
         display: flex;
         }
         .chip button:hover {
         color: #e74c3c;
         }
         /* ── Key/Value Row ─────────────── */
         .kv-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0.6rem 0;
         border-bottom: 1px solid #111;
         max-width: 520px;
         gap: 1rem;
         }
         .kv-row:last-child {
         border-bottom: none;
         }
         .kv-key {
         font-size: 0.82rem;
         color: #999;
         }
         .kv-value {
         font-size: 0.85rem;
         color: #fff;
         font-weight: 500;
         text-align: right;
         word-break: break-all;
         }
         /* ── Responsive ────────────────── */
         @media (max-width: 700px) {
         .settings-sidebar {
         width: 220px;
         min-width: 200px;
         padding: 0.8rem 0.4rem;
         }
         .settings-nav-item {
         font-size: 0.78rem;
         padding: 0.6rem 0.7rem;
         gap: 0.5rem;
         }
         .settings-nav-item svg {
         width: 16px;
         height: 16px;
         }
         .detail-panel {
         padding: 1.2rem 1rem 1.5rem;
         }
         .detail-panel-header h3 {
         font-size: 1.1rem;
         }
         }
         @media (max-width: 500px) {
         .settings-sidebar {
         width: 160px;
         min-width: 140px;
         padding: 0.5rem 0.2rem;
         }
         .settings-nav-item {
         font-size: 0.7rem;
         padding: 0.5rem 0.5rem;
         gap: 0.3rem;
         border-radius: 0.5rem;
         }
         .settings-nav-item svg {
         width: 14px;
         height: 14px;
         }
         .detail-panel {
         padding: 1rem 0.7rem 1.2rem;
         }
         .detail-panel-header h3 {
         font-size: 1rem;
         }
         .toggle-item {
         flex-direction: column;
         align-items: flex-start;
         gap: 0.6rem;
         }
         .save-btn,
         .danger-btn {
         width: 100%;
         justify-content: center;
         }
         }
      /* ── Compact Mode ──────────────────────────────────── */
      body.compact-mode .detail-panel { gap:0.8rem; padding:1.2rem 1.4rem 1.4rem; }
      body.compact-mode .input-group { gap:0.2rem; }
      body.compact-mode .toggle-item { padding:0.55rem 1rem; }
      body.compact-mode .info-card { padding:0.6rem 0.9rem; gap:0.5rem; }
      body.compact-mode .detail-divider { margin:0.6rem 0; }
      body.compact-mode .save-btn, body.compact-mode .danger-btn { padding:0.6rem 1.1rem; }
      body.compact-mode .detail-panel-header { margin-bottom:0; }
      body.compact-mode .detail-panel-desc { margin-top:-0.2rem; }
      /* Main app compact — cards, sections, etc */
      body.compact-mode .listing-card { padding:0.7rem; gap:0.5rem; }
      body.compact-mode .modal-body-section { padding:1rem; }

/* ── extracted style block 6 (originally around char offset 1213584) ── */
@keyframes lfmFadeIn { from { opacity:0.3; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
            #listingFormModal * { box-sizing: border-box; }
            #listingFormModal { overflow-x: hidden; }
            #lfmBody { overflow-x: hidden; }
            .lfm-img-slot:hover { border-color: rgba(163,230,53,0.35) !important; background: rgba(255,255,255,0.06) !important; }
            .lfm-img-slot.has-img { border-style: solid !important; border-color: rgba(163,230,53,0.3) !important; }
            .lfm-tab-active { background: rgba(163,230,53,0.1) !important; color: #a3e635 !important; }
            .lfm-type-active { background: rgba(163,230,53,0.12) !important; color: #a3e635 !important; box-shadow: 0 0 0 1px rgba(163,230,53,0.15) !important; }
            .lfm-tpl-type-active { background: rgba(163,230,53,0.12) !important; color: #a3e635 !important; box-shadow: 0 0 0 1px rgba(163,230,53,0.15) !important; }
            #lfmTplFileDrop:hover { border-color: rgba(163,230,53,0.35) !important; }
            .lfm-file-tag { background:rgba(163,230,53,0.1); border:1px solid rgba(163,230,53,0.25); color:#a3e635; padding:4px 10px; border-radius:8px; font-size:11px; font-weight:600; }
            #lfmTplPreview iframe { width:100%; height:220px; border:none; }
            .lfm-next-btn:hover, #lfmSubmitBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(163,230,53,0.25); }
            .lfm-next-btn:active, #lfmSubmitBtn:active { transform: scale(0.97); }
            #lfmSubmitBtn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
            .lfm-remove-btn { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.72); border:none; color:#fff; border-radius:30px; width:26px; height:26px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:2; }
            .lfm-transfer-cb { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all 0.15s; font-size:13px; color:rgba(255,255,255,0.6); font-weight:500; }
            .lfm-transfer-cb:hover { border-color:rgba(163,230,53,0.25); background:rgba(163,230,53,0.05); }
            .lfm-transfer-cb input[type="checkbox"] { accent-color:#a3e635; width:16px; height:16px; flex-shrink:0; cursor:pointer; }
            .lfm-transfer-cb:has(input:checked) { border-color:rgba(163,230,53,0.4); background:rgba(163,230,53,0.08); color:#a3e635; }
            .lfm-transfer-cb span { line-height:1.3; }
            /* Featured "HTML/CSS/JS Files" option — fastest, simplest transfer
               method with no third-party accounts/registrars involved.
               Deliberately distinct from the uniform grid: full width, a
               unique curved-bottom shape, gradient border, and a badge. */
            .lfm-transfer-cb-featured {
              position:relative; border-radius:14px 14px 22px 22px !important;
              background:linear-gradient(135deg, rgba(163,230,53,0.1), rgba(163,230,53,0.03)) !important;
              border:1px solid rgba(163,230,53,0.3) !important; padding:14px 16px 14px 14px !important;
              color:rgba(255,255,255,0.85) !important;
            }
            .lfm-transfer-cb-featured:hover { border-color:rgba(163,230,53,0.55) !important; background:linear-gradient(135deg, rgba(163,230,53,0.16), rgba(163,230,53,0.05)) !important; }
            .lfm-transfer-cb-featured:has(input:checked) { border-color:#a3e635 !important; background:linear-gradient(135deg, rgba(163,230,53,0.22), rgba(163,230,53,0.07)) !important; box-shadow:0 0 0 1px rgba(163,230,53,0.25), 0 8px 20px -8px rgba(163,230,53,0.35); }
            .lfm-transfer-cb-featured svg { color:#a3e635; }
            .lfm-transfer-cb-featured span:not(.lfm-transfer-featured-badge) { display:flex; flex-direction:column; gap:2px; font-size:13.5px; font-weight:700; color:#f5f5fa; }
            .lfm-transfer-cb-featured span em { font-style:normal; font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.45); }
            .lfm-transfer-featured-badge { position:absolute; top:-9px; right:14px; background:#a3e635; color:#0a0a0e; font-size:10px; font-weight:800; letter-spacing:0.02em; padding:3px 9px; border-radius:20px; box-shadow:0 2px 8px rgba(163,230,53,0.4); }
            .lfm-remove-btn:hover { background:#ef4444; }
            #lfmUrl:focus, #lfmTitle:focus, #lfmDesc:focus, #lfmFrontend:focus, #lfmBackend:focus, #lfmDatabase:focus, #lfmMonetization:focus, #lfmLocation:focus, #lfmReason:focus, #lfmPrice:focus, #lfmRevenue:focus, #lfmExpenses:focus { border-color: rgba(163,230,53,0.5) !important; background: rgba(255,255,255,0.06) !important; }
            .lfm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
            .lfm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 20px; }
            @media (max-width: 540px) {
            .lfm-grid-2, .lfm-grid-3 { grid-template-columns: 1fr; }
            #lfmStepTabs { gap: 4px; }
            #lfmStepTabs .lfm-tab { padding: 8px 10px; font-size: 11px; }
            #lfmTypeToggle button { font-size: 13px; padding: 10px 8px; }
            }

/* ── extracted style block 7 (originally around char offset 1312421) ── */
@keyframes gfmFadeIn { from { opacity:0.3; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
            #listingFormModalGame * { box-sizing: border-box; }
            #listingFormModalGame { overflow-x: hidden; }
            #gfmBody { overflow-x: hidden; }
            .gfm-img-slot:hover { border-color: rgba(245,158,11,0.35) !important; background: rgba(255,255,255,0.06) !important; }
            .gfm-img-slot.has-img { border-style: solid !important; border-color: rgba(245,158,11,0.3) !important; }
            .gfm-tab-active { background: rgba(245,158,11,0.1) !important; color: #f59e0b !important; }
            .gfm-type-active { background: rgba(245,158,11,0.12) !important; color: #f59e0b !important; box-shadow: 0 0 0 1px rgba(245,158,11,0.15) !important; }
            .gfm-next-btn:hover, #gfmSubmitBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,158,11,0.25); }
            .gfm-next-btn:active, #gfmSubmitBtn:active { transform: scale(0.97); }
            #gfmSubmitBtn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
            .gfm-remove-btn { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.72); border:none; color:#fff; border-radius:30px; width:26px; height:26px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:2; }
            .gfm-transfer-cb { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all 0.15s; font-size:13px; color:rgba(255,255,255,0.6); font-weight:500; }
            .gfm-transfer-cb:hover { border-color:rgba(245,158,11,0.25); background:rgba(245,158,11,0.05); }
            .gfm-transfer-cb input[type="checkbox"] { accent-color:#f59e0b; width:16px; height:16px; flex-shrink:0; cursor:pointer; }
            .gfm-transfer-cb:has(input:checked) { border-color:rgba(245,158,11,0.4); background:rgba(245,158,11,0.08); color:#f59e0b; }
            .gfm-transfer-cb span { line-height:1.3; }
            /* Featured "HTML/CSS/JS Files" option — see .lfm-transfer-cb-featured for rationale */
            .gfm-transfer-cb-featured {
              position:relative; border-radius:14px 14px 22px 22px !important;
              background:linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.03)) !important;
              border:1px solid rgba(245,158,11,0.3) !important; padding:14px 16px 14px 14px !important;
              color:rgba(255,255,255,0.85) !important;
            }
            .gfm-transfer-cb-featured:hover { border-color:rgba(245,158,11,0.55) !important; background:linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.05)) !important; }
            .gfm-transfer-cb-featured:has(input:checked) { border-color:#f59e0b !important; background:linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.07)) !important; box-shadow:0 0 0 1px rgba(245,158,11,0.25), 0 8px 20px -8px rgba(245,158,11,0.35); }
            .gfm-transfer-cb-featured svg { color:#f59e0b; }
            .gfm-transfer-cb-featured span:not(.gfm-transfer-featured-badge) { display:flex; flex-direction:column; gap:2px; font-size:13.5px; font-weight:700; color:#f5f5fa; }
            .gfm-transfer-cb-featured span em { font-style:normal; font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.45); }
            .gfm-transfer-featured-badge { position:absolute; top:-9px; right:14px; background:#f59e0b; color:#0a0a0e; font-size:10px; font-weight:800; letter-spacing:0.02em; padding:3px 9px; border-radius:20px; box-shadow:0 2px 8px rgba(245,158,11,0.4); }
            .gfm-remove-btn:hover { background:#ef4444; }
            #gfmUrl:focus, #gfmTitle:focus, #gfmDesc:focus, #gfmReason:focus, #gfmPrice:focus, #gfmRevenue:focus, #gfmExpenses:focus { border-color: rgba(245,158,11,0.5) !important; background: rgba(255,255,255,0.06) !important; }
            .gfm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
            .gfm-file-tag { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25); color:#fbbf24; font-size:11px; font-weight:600; padding:4px 9px; border-radius:6px; }
            #gfmPreview iframe { width:100%; height:280px; border:none; background:#fff; border-radius:14px; }
            @media (max-width: 540px) {
            .gfm-grid-2 { grid-template-columns: 1fr; }
            #gfmStepTabs { gap: 4px; }
            #gfmStepTabs .gfm-tab { padding: 8px 10px; font-size: 11px; }
            #gfmTypeToggle button { font-size: 12px; padding: 10px 6px; }
            }

/* ── extracted style block 8 (originally around char offset 1358650) ── */
#listingFormModalApp {
            --bg: #000;
            --surface: rgba(255,255,255,0.03);
            --surface-hover: rgba(255,255,255,0.06);
            --border: rgba(255,255,255,0.08);
            --border-focus: rgba(251,191,36,0.5);
            --gold: #fbbf24;
            --gold-bg: rgba(251,191,36,0.12);
            --red: #f87171;
            --green: rgba(163,230,53,0.7);
            --text: #fff;
            --text-dim: rgba(255,255,255,0.4);
            --text-muted: rgba(255,255,255,0.25);
            --radius: 12px;
            --radius-lg: 16px;
            --transition: 0.2s ease;
            }
            #listingFormModalApp * { box-sizing:border-box; margin:0; padding:0; }
            /* Header */
            #listingFormModalApp header {
            position: sticky; top:0; z-index:100; height:52px;
            display:flex; align-items:center; justify-content:space-between;
            padding:0 20px; background:rgba(0,0,0,0.78);
            backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
            border-bottom:1px solid rgba(255,255,255,0.07);
            }
            #listingFormModalApp .afm-brand { font-size:15px; font-weight:800; letter-spacing:-0.04em; color:#fff; display:flex; align-items:center; gap:6px; }
            #listingFormModalApp .afm-brand span { color:var(--green); margin-left:-6px; }
            #listingFormModalApp .afm-btn-back { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); padding:6px 14px; border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; transition:background var(--transition); font-family:inherit; }
            #listingFormModalApp .afm-btn-back:hover { background:rgba(255,255,255,0.12); color:#fff; }
            /* Main */
            #listingFormModalApp .afm-listing-page { max-width:820px; margin:0 auto; padding:28px 20px 40px; }
            #listingFormModalApp .afm-page-title { font-size:28px; font-weight:800; letter-spacing:-0.02em; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
            #listingFormModalApp .afm-page-title em { font-style:normal; color:var(--gold); }
            #listingFormModalApp .afm-page-sub { font-size:14px; color:var(--text-dim); margin-bottom:24px; }
            /* Step Tabs */
            #listingFormModalApp .afm-step-tabs { display:flex; gap:0; margin-bottom:28px; position:relative; align-items:center; justify-content:space-between; max-width:600px; margin-left:auto; margin-right:auto; }
            #listingFormModalApp .afm-step-tab { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; flex:1; position:relative; z-index:1; background:none; border:none; font-family:inherit; padding:0; transition:color var(--transition); color:var(--text-muted); }
            #listingFormModalApp .afm-step-tab .afm-step-circle { width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; transition:all var(--transition); background:rgba(255,255,255,0.03); flex-shrink:0; }
            #listingFormModalApp .afm-step-tab.active { color:var(--gold); }
            #listingFormModalApp .afm-step-tab.active .afm-step-circle { border-color:var(--gold); background:var(--gold-bg); box-shadow:0 0 16px rgba(251,191,36,0.2); }
            #listingFormModalApp .afm-step-tab .afm-step-label { font-size:10px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; text-align:center; line-height:1.2; }
            #listingFormModalApp .afm-step-connector { flex:0 0 30px; height:2px; background:rgba(255,255,255,0.12); margin:0 -4px; margin-bottom:20px; border-radius:1px; z-index:0; }
            @media (max-width:500px) {
            #listingFormModalApp .afm-step-tab .afm-step-label { font-size:8px; }
            #listingFormModalApp .afm-step-tab .afm-step-circle { width:30px; height:30px; font-size:12px; }
            #listingFormModalApp .afm-step-connector { flex:0 0 16px; margin-bottom:16px; }
            }
            /* Step Panels */
            #listingFormModalApp .afm-step-panel { display:none; animation:afm-fadeSlide 0.3s ease; }
            #listingFormModalApp .afm-step-panel.active { display:block; }
            @keyframes afm-fadeSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
            /* Form Elements */
            #listingFormModalApp .afm-form-group { margin-bottom:18px; }
            #listingFormModalApp .afm-form-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.5); margin-bottom:6px; }
            #listingFormModalApp .afm-form-label .required { color:var(--red); margin-left:3px; }
            #listingFormModalApp .afm-form-input, #listingFormModalApp .afm-form-textarea, #listingFormModalApp .afm-form-select {
            width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius); padding:13px 16px; font-size:15px; color:#fff; font-family:inherit; transition:border-color var(--transition),background var(--transition); appearance:none; -webkit-appearance:none;
            }
            #listingFormModalApp .afm-form-input:focus, #listingFormModalApp .afm-form-textarea:focus, #listingFormModalApp .afm-form-select:focus { border-color:var(--border-focus); outline:none; background:rgba(255,255,255,0.06); }
            #listingFormModalApp .afm-form-textarea { min-height:100px; resize:vertical; }
            #listingFormModalApp .afm-form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer; }
            #listingFormModalApp .afm-form-hint { font-size:11px; color:var(--text-dim); margin-top:4px; }
            #listingFormModalApp .afm-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
            #listingFormModalApp .afm-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
            @media (max-width:600px) { #listingFormModalApp .afm-form-row, #listingFormModalApp .afm-form-row-3 { grid-template-columns:1fr; } }
            #listingFormModalApp .afm-char-counter { font-size:11px; color:var(--text-dim); text-align:right; margin-top:3px; }
            #listingFormModalApp .afm-char-counter.warn { color:var(--red); }
            #listingFormModalApp .afm-char-counter.good { color:var(--green); }
            /* Platform Toggles */
            #listingFormModalApp .afm-platform-toggles { display:flex; gap:10px; flex-wrap:wrap; }
            #listingFormModalApp .afm-platform-toggle { flex:1; min-width:90px; padding:14px 16px; border:2px solid rgba(255,255,255,0.12); border-radius:var(--radius-lg); background:rgba(255,255,255,0.02); cursor:pointer; text-align:center; transition:all var(--transition); font-family:inherit; color:rgba(255,255,255,0.5); font-weight:600; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:6px; user-select:none; }
            #listingFormModalApp .afm-platform-toggle svg { width:28px; height:28px; opacity:0.5; transition:opacity var(--transition); }
            #listingFormModalApp .afm-platform-toggle.selected { border-color:var(--gold); background:var(--gold-bg); color:var(--gold); box-shadow:0 0 20px rgba(251,191,36,0.1); }
            #listingFormModalApp .afm-platform-toggle.selected svg { opacity:1; }
            #listingFormModalApp .afm-platform-toggle:hover:not(.selected) { border-color:rgba(255,255,255,0.25); color:rgba(255,255,255,0.7); }
            #listingFormModalApp .afm-platform-toggle:hover:not(.selected) svg { opacity:0.7; }
            /* Not Live toggle buttons */
            #listingFormModalApp .afm-not-live-btn.active { background:rgba(251,191,36,0.12) !important; border-color:rgba(251,191,36,0.3) !important; color:var(--gold) !important; }
            #listingFormModalApp .afm-platform-toggle-notlive.selected { border-color:#f59e0b; background:rgba(245,158,11,0.1); color:#f59e0b; box-shadow:0 0 20px rgba(245,158,11,0.12); }
            #listingFormModalApp .afm-platform-toggle.afm-platform-disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; }
            /* Icon Upload */
            #listingFormModalApp .afm-icon-upload-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
            #listingFormModalApp .afm-icon-slot { width:120px; height:120px; aspect-ratio:1; border:2px dashed rgba(255,255,255,0.18); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); overflow:hidden; position:relative; flex-shrink:0; background:rgba(255,255,255,0.02); }
            #listingFormModalApp .afm-icon-slot:hover { border-color:rgba(251,191,36,0.4); background:rgba(255,255,255,0.05); }
            #listingFormModalApp .afm-icon-slot.has-image { border-style:solid; border-color:rgba(251,191,36,0.3); }
            #listingFormModalApp .afm-icon-slot img { width:100%; height:100%; object-fit:cover; display:block; }
            #listingFormModalApp .afm-icon-slot .placeholder { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-muted); font-size:11px; font-weight:500; text-align:center; padding:8px; }
            #listingFormModalApp .afm-icon-slot .placeholder svg { width:28px; height:28px; opacity:0.45; }
            #listingFormModalApp .afm-icon-slot .remove-img { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.75); border:none; color:#fff; border-radius:50%; width:26px; height:26px; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:2; transition:background var(--transition); }
            #listingFormModalApp .afm-icon-slot .remove-img:hover { background:#ef4444; }
            #listingFormModalApp .afm-banner-slot { width:100%; aspect-ratio:16/9; max-width:400px; border:2px dashed rgba(255,255,255,0.18); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); overflow:hidden; position:relative; background:rgba(255,255,255,0.02); }
            #listingFormModalApp .afm-banner-slot:hover { border-color:rgba(251,191,36,0.4); background:rgba(255,255,255,0.05); }
            #listingFormModalApp .afm-banner-slot.has-image { border-style:solid; border-color:rgba(251,191,36,0.3); }
            #listingFormModalApp .afm-banner-slot img { width:100%; height:100%; object-fit:cover; display:block; }
            #listingFormModalApp .afm-banner-slot .placeholder { display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--text-muted); font-size:11.5px; font-weight:500; text-align:center; padding:8px; }
            #listingFormModalApp .afm-banner-slot .placeholder svg { width:30px; height:30px; opacity:0.45; }
            #listingFormModalApp .afm-banner-slot .remove-img { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.75); border:none; color:#fff; border-radius:50%; width:26px; height:26px; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:2; transition:background var(--transition); }
            #listingFormModalApp .afm-banner-slot .remove-img:hover { background:#ef4444; }
            /* Screenshots Grid */
            #listingFormModalApp .afm-screenshots-grid { display:flex; flex-wrap:wrap; gap:10px; }
            #listingFormModalApp .afm-screenshot-slot { width:110px; height:195px; border:2px dashed rgba(255,255,255,0.14); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); overflow:hidden; position:relative; background:rgba(255,255,255,0.02); flex-shrink:0; }
            #listingFormModalApp .afm-screenshot-slot:hover { border-color:rgba(251,191,36,0.35); background:rgba(255,255,255,0.05); }
            #listingFormModalApp .afm-screenshot-slot.filled { border-style:solid; border-color:rgba(251,191,36,0.22); }
            #listingFormModalApp .afm-screenshot-slot img { width:100%; height:100%; object-fit:cover; display:block; }
            #listingFormModalApp .afm-screenshot-slot .placeholder { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-muted); font-size:10px; font-weight:500; text-align:center; padding:6px; }
            #listingFormModalApp .afm-screenshot-slot .placeholder svg { width:22px; height:22px; opacity:0.4; }
            #listingFormModalApp .afm-screenshot-slot .remove-img { position:absolute; top:4px; right:4px; background:rgba(0,0,0,0.75); border:none; color:#fff; border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:2; transition:background var(--transition); }
            #listingFormModalApp .afm-screenshot-slot .remove-img:hover { background:#ef4444; }
            @media (max-width:480px) {
            #listingFormModalApp .afm-screenshot-slot { width:80px; height:142px; }
            #listingFormModalApp .afm-icon-slot { width:90px; height:90px; border-radius:16px; }
            }
            /* File Drop Zone */
            #listingFormModalApp .afm-file-drop-zone { border:2px dashed rgba(255,255,255,0.12); border-radius:var(--radius-lg); padding:22px; text-align:center; cursor:pointer; transition:all var(--transition); background:rgba(255,255,255,0.02); }
            #listingFormModalApp .afm-file-drop-zone:hover { border-color:rgba(251,191,36,0.4); background:rgba(255,255,255,0.04); }
            #listingFormModalApp .afm-file-drop-zone.has-file { border-style:solid; border-color:rgba(251,191,36,0.3); background:rgba(251,191,36,0.04); }
            #listingFormModalApp .afm-file-drop-zone .upload-icon svg { width:36px; height:36px; opacity:0.4; margin-bottom:6px; }
            #listingFormModalApp .afm-file-drop-zone .upload-text { color:var(--text-dim); font-size:13px; }
            #listingFormModalApp .afm-file-drop-zone .file-name { margin-top:8px; background:rgba(255,255,255,0.06); padding:6px 14px; border-radius:20px; font-size:12px; color:rgba(255,255,255,0.7); display:inline-block; border:1px solid rgba(255,255,255,0.08); }
            #listingFormModalApp .afm-file-drop-zone .remove-file { margin-top:8px; background:none; border:none; color:var(--red); font-size:11px; cursor:pointer; text-decoration:underline; font-family:inherit; }
            /* Nav Buttons */
            #listingFormModalApp .afm-nav-buttons { display:flex; gap:12px; margin-top:28px; justify-content:space-between; }
            #listingFormModalApp .afm-btn-nav { padding:13px 28px; border-radius:var(--radius); font-size:15px; font-weight:700; cursor:pointer; transition:all var(--transition); font-family:inherit; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; }
            #listingFormModalApp .afm-btn-back-step { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.7); }
            #listingFormModalApp .afm-btn-back-step:hover { background:rgba(255,255,255,0.1); color:#fff; }
            #listingFormModalApp .afm-btn-next-step { background:var(--gold); border:none; color:#000; margin-left:auto; }
            #listingFormModalApp .afm-btn-next-step:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(251,191,36,0.3); }
            .afm-transfer-cb { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all 0.15s; font-size:13px; color:rgba(255,255,255,0.6); font-weight:500; }
            .afm-transfer-cb:hover { border-color:rgba(251,191,36,0.25); background:rgba(251,191,36,0.05); }
            .afm-transfer-cb input[type="checkbox"] { accent-color:#fbbf24; width:16px; height:16px; flex-shrink:0; cursor:pointer; }
            .afm-transfer-cb:has(input:checked) { border-color:rgba(251,191,36,0.4); background:rgba(251,191,36,0.08); color:#fbbf24; }
            .afm-transfer-cb span { line-height:1.3; }
            /* Featured "HTML/CSS/JS Files" option — see .lfm-transfer-cb-featured for rationale */
            .afm-transfer-cb-featured {
              position:relative; border-radius:14px 14px 22px 22px !important;
              background:linear-gradient(135deg, rgba(251,191,36,0.1), rgba(251,191,36,0.03)) !important;
              border:1px solid rgba(251,191,36,0.3) !important; padding:14px 16px 14px 14px !important;
              color:rgba(255,255,255,0.85) !important;
            }
            .afm-transfer-cb-featured:hover { border-color:rgba(251,191,36,0.55) !important; background:linear-gradient(135deg, rgba(251,191,36,0.16), rgba(251,191,36,0.05)) !important; }
            .afm-transfer-cb-featured:has(input:checked) { border-color:#fbbf24 !important; background:linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.07)) !important; box-shadow:0 0 0 1px rgba(251,191,36,0.25), 0 8px 20px -8px rgba(251,191,36,0.35); }
            .afm-transfer-cb-featured svg { color:#fbbf24; }
            .afm-transfer-cb-featured span:not(.afm-transfer-featured-badge) { display:flex; flex-direction:column; gap:2px; font-size:13.5px; font-weight:700; color:#f5f5fa; }
            .afm-transfer-cb-featured span em { font-style:normal; font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.45); }
            .afm-transfer-featured-badge { position:absolute; top:-9px; right:14px; background:#fbbf24; color:#0a0a0e; font-size:10px; font-weight:800; letter-spacing:0.02em; padding:3px 9px; border-radius:20px; box-shadow:0 2px 8px rgba(251,191,36,0.4); }
            #listingFormModalApp .afm-btn-next-step:active { transform:scale(0.97); }
            #listingFormModalApp .afm-btn-submit { width:100%; padding:16px; background:var(--gold); border:none; border-radius:var(--radius-lg); font-size:17px; font-weight:800; color:#000; cursor:pointer; transition:all var(--transition); font-family:inherit; letter-spacing:-0.01em; display:flex; align-items:center; justify-content:center; gap:10px; }
            #listingFormModalApp .afm-btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(251,191,36,0.35); }
            #listingFormModalApp .afm-btn-submit:active { transform:scale(0.97); }
            /* Profit Box */
            #listingFormModalApp .afm-profit-box { background:rgba(255,255,255,0.04); border-radius:var(--radius); padding:14px 16px; font-size:18px; font-weight:700; text-align:center; border:1px solid var(--border); transition:color var(--transition); min-width:100px; }
            #listingFormModalApp .afm-profit-box.positive { color:#4ade80; border-color:rgba(74,222,128,0.2); }
            #listingFormModalApp .afm-profit-box.negative { color:var(--red); border-color:rgba(248,113,113,0.2); }
            /* Field Error */
            #listingFormModalApp .afm-field-error { border-color:var(--red) !important; box-shadow:0 0 0 1px rgba(248,113,113,0.2); }
            #listingFormModalApp .afm-error-msg { color:var(--red); font-size:11px; margin-top:3px; display:none; }
            #listingFormModalApp .afm-error-msg.visible { display:block; }
            /* Conditional fields */
            #listingFormModalApp .afm-conditional-field { display:none; }
            /* Hidden inputs */
            #listingFormModalApp .afm-hidden-input { position:fixed; left:-9999px; top:-9999px; opacity:0; width:1px; height:1px; }
            /* Preview Modal (inner) */
            #afmPreviewModal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10001; background:rgba(0,0,0,0.93); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px; }
            #afmPreviewModal.active { display:flex; }
            #afmPreviewModal .modal-content { width:100%; max-width:1100px; height:88vh; background:#0a0a0c; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,0.1); position:relative; }
            #afmPreviewModal .modal-content iframe { width:100%; height:100%; border:none; background:#fff; }
            #afmPreviewModal .modal-close { position:absolute; top:10px; right:14px; background:rgba(0,0,0,0.7); border:none; color:#fff; font-size:24px; cursor:pointer; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:background var(--transition); z-index:10; }
            #afmPreviewModal .modal-close:hover { background:#ef4444; }

/* ── extracted style block 9 (originally around char offset 1625958) ── */
/* ═══════════════════════════════════════════
            INBOX MODAL — Messages & Deals (full screen)
            ═══════════════════════════════════════════ */
         #inboxModal {
           display: none;
           position: fixed;
           inset: 0;
           z-index: 9997;
           background: #080808;
           align-items: stretch;
           justify-content: center;
           font-family: 'Segoe UI', system-ui, sans-serif;
         }
         /* When opened via JS: display:flex */
         .ibx-box {
           width: 100%;
           max-width: 640px;
           height: 100%;
           background: #080808;
           border: none;
           border-left: 1px solid #111;
           border-right: 1px solid #111;
           border-radius: 0;
           display: flex;
           flex-direction: column;
           overflow: hidden;
           box-shadow: none;
           animation: ibxFadeIn 0.22s ease both;
         }
         @keyframes ibxFadeIn {
           from { opacity:0; }
           to   { opacity:1; }
         }
         @media (max-width: 640px) {
           .ibx-box { max-width: 100%; border-left: none; border-right: none; }
         }
         /* Header */
         .ibx-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 1rem 1.3rem 0.85rem;
           border-bottom: 1px solid #1a1a1a;
           flex-shrink: 0;
         }
         .ibx-header-left {
           display: flex;
           align-items: center;
           gap: 0.65rem;
         }
         .ibx-back-btn {
           background: #111;
           border: 1px solid #222;
           border-radius: 50%;
           width: 34px;
           height: 34px;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           color: #ccc;
           flex-shrink: 0;
           transition: background 0.15s;
         }
         .ibx-back-btn:hover { background: #1e1e1e; }
         .ibx-back-btn svg {
           width: 16px; height: 16px;
           stroke: currentColor; fill: none; stroke-width: 2;
           stroke-linecap: round; stroke-linejoin: round;
         }
         .ibx-title {
           font-size: 1rem;
           font-weight: 700;
           color: #fff;
           letter-spacing: -0.2px;
         }
         .ibx-unread-pill {
           background: #a3e635;
           color: #000;
           font-size: 0.65rem;
           font-weight: 800;
           padding: 2px 8px;
           border-radius: 2rem;
           display: none;
         }
         .ibx-unread-pill:not(:empty) { display: inline-block; }
         /* Tabs */
         .ibx-tabs {
           display: flex;
           gap: 0;
           padding: 0.5rem 1rem 0;
           border-bottom: 1px solid #1a1a1a;
           flex-shrink: 0;
         }
         .ibx-tab {
           position: relative;
           background: none;
           border: none;
           color: #777;
           font-size: 0.85rem;
           font-weight: 600;
           padding: 0.5rem 1.1rem 0.65rem;
           cursor: pointer;
           border-bottom: 2px solid transparent;
           transition: color 0.18s, border-color 0.18s;
           font-family: inherit;
           display: flex;
           align-items: center;
           gap: 0.35rem;
         }
         .ibx-tab.active {
           color: #fff;
           border-bottom-color: #a3e635;
         }
         .ibx-tab:hover:not(.active) { color: #ccc; }
         .ibx-tab-badge {
           background: #a3e635;
           color: #000;
           font-size: 0.6rem;
           font-weight: 800;
           padding: 1px 6px;
           border-radius: 2rem;
           min-width: 18px;
           text-align: center;
         }
         /* Body / scroll area */
         .ibx-body {
           flex: 1;
           overflow-y: auto;
           overscroll-behavior: contain;
           scrollbar-width: thin;
           scrollbar-color: #222 transparent;
         }
         .ibx-body::-webkit-scrollbar { width: 4px; }
         .ibx-body::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
         /* Chat row */
         .ibx-row {
           display: flex;
           align-items: center;
           gap: 0.75rem;
           padding: 0.85rem 1.5rem;
           border-bottom: 1px solid #111;
           cursor: pointer;
           transition: background 0.15s;
           position: relative;
         }
         .ibx-row:hover { background: #0d0d0d; }
         .ibx-row:last-child { border-bottom: none; }
         .ibx-row-dot {
           position: absolute;
           left: 0.75rem;
           top: 50%;
           transform: translateY(-50%);
           width: 7px;
           height: 7px;
           border-radius: 50%;
           background: #a3e635;
           box-shadow: 0 0 6px rgba(163,230,53,0.5);
           flex-shrink: 0;
         }
         .ibx-row-av {
           width: 44px;
           height: 44px;
           border-radius: 50%;
           background: #1a1a1a;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1rem;
           font-weight: 700;
           color: #aaa;
           flex-shrink: 0;
           overflow: hidden;
         }
         .ibx-row-av img {
           width: 100%; height: 100%;
           object-fit: cover;
           border-radius: 50%;
         }
         .ibx-listing-av {
           border-radius: 0.55rem !important;
         }
         .ibx-ai-av {
           background: #1a1a2e;
           color: #818cf8;
         }
         .ibx-ai-av svg { width: 22px; height: 22px; }
         .ibx-row-content {
           flex: 1;
           min-width: 0;
         }
         .ibx-row-name {
           font-size: 0.88rem;
           color: #ddd;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           display: flex;
           align-items: center;
           gap: 0.35rem;
         }
         .ibx-row-name.bold { color: #fff; font-weight: 700; }
         .ibx-row-sub {
           font-size: 0.75rem;
           color: #555;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           margin-top: 0.2rem;
         }
         .ibx-row-meta {
           display: flex;
           flex-direction: column;
           align-items: flex-end;
           gap: 0.25rem;
           flex-shrink: 0;
         }
         .ibx-row-time {
           font-size: 0.7rem;
           color: #444;
           white-space: nowrap;
         }
         /* AI pill */
         .ibx-ai-pill {
           font-size: 0.6rem;
           font-weight: 800;
           padding: 1px 6px;
           border-radius: 2rem;
           background: #818cf826;
           color: #818cf8;
           letter-spacing: 0.03em;
         }
         /* AI row special */
         .ibx-ai-row { border-bottom: 1px solid #1a1a1a; }
         /* Deal row */
         .ibx-deal-row {
           display: flex;
           align-items: flex-start;
           gap: 0.75rem;
           padding: 0.9rem 1.4rem;
           border-bottom: 1px solid #111;
           cursor: pointer;
           transition: background 0.15s;
           position: relative;
         }
         .ibx-deal-row:hover { background: #0d0d0d; }
         .ibx-deal-dot {
           position: absolute;
           left: 0.5rem;
           top: 50%;
           transform: translateY(-50%);
           width: 7px;
           height: 7px;
           border-radius: 50%;
           background: #a3e635;
           box-shadow: 0 0 6px rgba(163,230,53,0.5);
           flex-shrink: 0;
         }
         .ibx-deal-unread .ibx-deal-row { padding-left: 1.7rem; }
         .ibx-deal-thumb {
           width: 48px;
           height: 48px;
           border-radius: 0.6rem;
           object-fit: cover;
           background: #1a1a1a;
           flex-shrink: 0;
         }
         .ibx-deal-info { flex: 1; min-width: 0; }
         .ibx-deal-title {
           font-size: 0.88rem;
           font-weight: 600;
           color: #fff;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
         .ibx-deal-title.bold { color: #fff; font-weight: 800; }
         .ibx-deal-msg {
           font-size: 0.75rem;
           color: #666;
           margin-top: 0.2rem;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
         .ibx-deal-footer {
           display: flex;
           align-items: center;
           gap: 0.5rem;
           margin-top: 0.4rem;
           flex-wrap: wrap;
         }
         .ibx-deal-badge {
           font-size: 0.65rem;
           font-weight: 800;
           padding: 2px 8px;
           border-radius: 2rem;
           text-transform: capitalize;
         }
         .ibx-deal-badge.pending  { background: #1c1a00; color: #facc15; }
         .ibx-deal-badge.accepted { background: #0a2010; color: #a3e635; }
         .ibx-deal-badge.rejected { background: #200a0a; color: #f87171; }
         .ibx-deal-badge.successful { background: #0a2010; color: #a3e635; }
         .ibx-deal-badge.closed     { background: #1a1a1a; color: #888; }
         .ibx-deal-countdown {
           font-size: 0.65rem;
           color: #f59e0b;
           font-weight: 600;
         }
         .ibx-deal-ts {
           font-size: 0.68rem;
           color: #444;
           margin-left: auto;
         }
         /* Expand panel */
         .ibx-deal-expand {
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.3s ease, padding 0.3s ease;
           background: #0a0a0a;
           border-bottom: 1px solid #111;
         }
         .ibx-deal-expand.open { max-height: 380px; }
         .ibx-deal-expand-inner {
           padding: 0.9rem 1.4rem 1rem;
           display: flex;
           flex-direction: column;
           gap: 0.5rem;
         }
         .ibx-deal-detail-label {
           font-size: 0.65rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 0.4px;
           color: #555;
         }
         .ibx-deal-detail-val {
           font-size: 0.82rem;
           color: #ccc;
           margin-bottom: 0.2rem;
         }
         .ibx-deal-actions {
           display: flex;
           gap: 0.5rem;
           margin-top: 0.3rem;
         }
         .ibx-deal-accept-btn, .ibx-deal-reject-btn {
           flex: 1;
           padding: 0.55rem 0.8rem;
           border-radius: 0.6rem;
           font-size: 0.8rem;
           font-weight: 700;
           cursor: pointer;
           border: none;
           font-family: inherit;
           transition: opacity 0.18s;
         }
         .ibx-deal-accept-btn { background: #a3e635; color: #000; }
         .ibx-deal-reject-btn { background: #1a1a1a; color: #f87171; border: 1px solid #2a1a1a; }
         .ibx-deal-accept-btn:hover { opacity: 0.88; }
         .ibx-deal-reject-btn:hover { background: #200a0a; }
         .ibx-deal-accept-btn:disabled, .ibx-deal-reject-btn:disabled { opacity: 0.45; cursor: not-allowed; }
         /* ── Deal sub-tabs (Received / Sent) ── */
         .ibx-deal-subtabs {
           display: flex; gap: 6px;
           padding: 10px 14px 0;
           border-bottom: 1px solid #111;
         }
         .ibx-deal-subtab {
           flex: 1; padding: 7px 0; border-radius: 8px; border: none;
           font-size: 0.78rem; font-weight: 700; cursor: pointer;
           font-family: inherit; transition: all 0.18s;
           background: transparent; color: rgba(255,255,255,0.3);
         }
         .ibx-deal-subtab.active {
           background: rgba(163,230,53,0.1); color: #a3e635;
           border: 1px solid rgba(163,230,53,0.25);
         }
         .ibx-deal-role {
           font-size: 0.6rem; font-weight: 800; padding: 1px 6px;
           border-radius: 2rem; text-transform: uppercase; letter-spacing: 0.04em;
         }
         .ibx-deal-role.seller { background: rgba(96,165,250,0.12); color: #60a5fa; }
         .ibx-deal-role.buyer  { background: rgba(167,139,250,0.12); color: #a78bfa; }
         .ibx-deal-offer-highlight {
           display: inline-flex; align-items: center; gap: 5px;
           background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.2);
           border-radius: 8px; padding: 6px 10px; margin: 4px 0 2px;
           font-size: 0.82rem; font-weight: 700; color: #a3e635;
         }
         .ibx-deal-cancel-btn {
           width: 100%; margin-top: 6px;
           padding: 0.5rem 0.8rem; border-radius: 0.6rem;
           font-size: 0.78rem; font-weight: 700; cursor: pointer;
           border: 1px solid rgba(248,113,113,0.2);
           background: rgba(248,113,113,0.06); color: #f87171;
           font-family: inherit; transition: all 0.18s;
         }
         .ibx-deal-cancel-btn:hover { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.4); }
         .ibx-deal-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
         .ibx-open-chat-btn {
           background: #111;
           border: 1px solid #2a2a2a;
           color: #fff;
           padding: 0.55rem 1rem;
           border-radius: 0.6rem;
           font-size: 0.8rem;
           font-weight: 600;
           cursor: pointer;
           font-family: inherit;
           margin-top: 0.4rem;
           width: 100%;
           transition: background 0.15s;
         }
         .ibx-open-chat-btn:hover { background: #1a1a1a; }
         /* Groups tab */
         .ibx-group-list { display: flex; flex-direction: column; }
         .ibx-group-row {
           display: flex;
           align-items: center;
           gap: 0.75rem;
           padding: 0.9rem 1.4rem;
           border-bottom: 1px solid #111;
           cursor: pointer;
           transition: background 0.15s;
         }
         .ibx-group-row:hover { background: #0d0d0d; }
         .ibx-group-row:last-child { border-bottom: none; }
         .ibx-group-av {
           width: 44px;
           height: 44px;
           border-radius: 0.7rem;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
         }
         .ibx-group-av svg { width: 22px; height: 22px; }
         .ibx-group-info { flex: 1; min-width: 0; }
         .ibx-group-name {
           font-size: 0.88rem;
           font-weight: 600;
           color: #fff;
         }
         .ibx-group-desc {
           font-size: 0.73rem;
           color: #555;
           margin-top: 0.15rem;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
         .ibx-group-meta { flex-shrink: 0; }
         /* Skeleton loader */
         .ibx-skeleton-row {
           display: flex;
           align-items: center;
           gap: 0.75rem;
           padding: 0.85rem 1.5rem;
           border-bottom: 1px solid #111;
         }
         .ibx-skel-circle {
           width: 44px;
           height: 44px;
           border-radius: 50%;
           background: linear-gradient(90deg, #111 25%, #1e1e1e 50%, #111 75%);
           background-size: 200% 100%;
           animation: ibxSkelShimmer 1.4s infinite;
           flex-shrink: 0;
         }
         .ibx-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
         .ibx-skel-line {
           height: 12px;
           border-radius: 6px;
           background: linear-gradient(90deg, #111 25%, #1e1e1e 50%, #111 75%);
           background-size: 200% 100%;
           animation: ibxSkelShimmer 1.4s infinite;
           width: 70%;
         }
         .ibx-skel-line.short { width: 45%; }
         @keyframes ibxSkelShimmer {
           0%   { background-position: 200% 0; }
           100% { background-position: -200% 0; }
         }
         /* Empty state */
         .ibx-empty {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           padding: 3rem 1rem;
           gap: 0.75rem;
           color: #444;
         }
         .ibx-empty svg {
           width: 36px; height: 36px;
           stroke: #2a2a2a; fill: none; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round;
         }
         .ibx-empty-text {
           font-size: 0.88rem;
           color: #555;
         }
         /* Load-more spinner */
         .ibx-load-more {
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 1.2rem;
         }
         .ibx-load-more-spinner {
           width: 22px; height: 22px;
           border: 2px solid #222;
           border-top-color: #a3e635;
           border-radius: 50%;
           animation: ibxSpin 0.8s linear infinite;
         }
         @keyframes ibxSpin { to { transform: rotate(360deg); } }

/* ── extracted style block 10 (originally around char offset 1813473) ── */
#dealChatPanel {
            position: fixed; inset: 0; z-index: 9997;
            background: #06060e;
            display: none; flex-direction: column;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            }
            #dealChatPanel *, #dealChatPanel *::before, #dealChatPanel *::after { box-sizing: border-box; }
            .dcp-box {
            background: #06060e; border: none;
            border-radius: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column; overflow: hidden;
            margin: 0;
            }
            .dcp-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem 1.4rem; flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            background: #06060e;
            }
            .dcp-header-left { display: flex; align-items: center; gap: 0.7rem; }
            .dcp-back-btn {
            width: 34px; height: 34px; border-radius: 10px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.6); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.18s; font-family: inherit; flex-shrink: 0;
            }
            .dcp-back-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
            .dcp-back-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
            .dcp-header-titles { display: flex; flex-direction: column; gap: 2px; }
            .dcp-title { font-size: 0.92rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
            .dcp-countdown { font-size: 0.7rem; font-weight: 700; color: #a3e635; letter-spacing: 0.01em; }
            /* hamburger menu button */
            #dcpMenuBtn {
            width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.5); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.18s; font-family: inherit; position: relative;
            }
            #dcpMenuBtn:hover { background: rgba(255,255,255,0.08); color: #fff; }
            #dcpMenuBtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
            /* dropdown */
            #dcpMenuDropdown {
            position: absolute; top: calc(100% + 6px); right: 0; z-index: 999;
            background: #111118; border: 1px solid rgba(255,255,255,0.09);
            border-radius: 0.85rem; padding: 0.3rem; min-width: 170px;
            box-shadow: 0 10px 32px rgba(0,0,0,0.7);
            display: none;
            }
            #dcpMenuDropdown.open { display: block; }
            .dcp-menu-item {
            display: flex; align-items: center; gap: 0.6rem;
            padding: 0.55rem 0.8rem; border-radius: 0.6rem; cursor: pointer;
            font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75);
            border: none; background: none; font-family: inherit; width: 100%;
            text-align: left; transition: background 0.12s;
            }
            .dcp-menu-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
            .dcp-menu-item.danger { color: #f87171; }
            .dcp-menu-item.danger:hover { background: rgba(239,68,68,0.1); }
            .dcp-menu-item.dcp-menu-item-exit { color: #a3e635; }
            .dcp-menu-item.dcp-menu-item-exit:hover { background: rgba(163,230,53,0.12); }
            .dcp-menu-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
            .dcp-menu-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.25rem 0.5rem; }
            #dcpMessages {
            flex: 1; overflow-y: auto; padding: 1rem 1.2rem;
            display: flex; flex-direction: column; gap: 0.5rem;
            scrollbar-width: thin; scrollbar-color: #1a1a1a transparent;
            min-height: 0;
            }
            #dcpMessages::-webkit-scrollbar { width: 4px; }
            #dcpMessages::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 4px; }
            /* ── Themed system messages ──
               Base card shared by every theme; theme classes below only
               override accent color / background / border. */
            .dcp-msg-system {
              display: flex; align-items: flex-start; gap: 0.55rem;
              text-align: left; font-size: 0.76rem; line-height: 1.5;
              color: rgba(255,255,255,0.75); padding: 0.65rem 0.9rem;
              background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
              border-radius: 0.9rem; margin: 0.35rem auto; max-width: 92%;
              animation: dcpSysIn 0.35s ease both;
            }
            @keyframes dcpSysIn {
              from { opacity: 0; transform: translateY(6px) scale(0.98); }
              to   { opacity: 1; transform: translateY(0) scale(1); }
            }
            .dcp-msg-system .dcp-sys-icon {
              flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
              display: flex; align-items: center; justify-content: center;
              margin-top: 0.05rem;
            }
            .dcp-msg-system .dcp-sys-icon svg { width: 0.85rem; height: 0.85rem; }
            .dcp-msg-system .dcp-sys-text { flex: 1; padding-top: 0.15rem; }

            /* accepted — soft lime/success, deal kickoff */
            .dcp-msg-system.theme-accepted {
              background: linear-gradient(135deg, rgba(163,230,53,0.09), rgba(163,230,53,0.03));
              border-color: rgba(163,230,53,0.3);
            }
            .dcp-msg-system.theme-accepted .dcp-sys-icon { background: rgba(163,230,53,0.18); color: #a3e635; }

            /* paid / funded — blue, informational */
            .dcp-msg-system.theme-paid {
              background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(96,165,250,0.03));
              border-color: rgba(96,165,250,0.3);
            }
            .dcp-msg-system.theme-paid .dcp-sys-icon { background: rgba(96,165,250,0.18); color: #60a5fa; }

            /* delivered — amber, needs action */
            .dcp-msg-system.theme-delivered {
              background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.03));
              border-color: rgba(245,158,11,0.3);
            }
            .dcp-msg-system.theme-delivered .dcp-sys-icon { background: rgba(245,158,11,0.18); color: #f59e0b; }

            /* released / complete — green success, premium */
            .dcp-msg-system.theme-released {
              background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.03));
              border-color: rgba(34,197,94,0.35);
            }
            .dcp-msg-system.theme-released .dcp-sys-icon { background: rgba(34,197,94,0.2); color: #22c55e; }

            /* refunded / closed — neutral slate */
            .dcp-msg-system.theme-refunded {
              background: linear-gradient(135deg, rgba(148,163,184,0.1), rgba(148,163,184,0.03));
              border-color: rgba(148,163,184,0.28);
            }
            .dcp-msg-system.theme-refunded .dcp-sys-icon { background: rgba(148,163,184,0.18); color: #94a3b8; }

            /* disputed — red, alert */
            .dcp-msg-system.theme-disputed {
              background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.03));
              border-color: rgba(239,68,68,0.32);
            }
            .dcp-msg-system.theme-disputed .dcp-sys-icon { background: rgba(239,68,68,0.18); color: #ef4444; }

            /* expired — muted, no accent */
            .dcp-msg-system.theme-expired {
              background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.08);
              color: rgba(255,255,255,0.4);
            }
            .dcp-msg-system.theme-expired .dcp-sys-icon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }

            /* ── Celebration overlay: confetti + falling flowers ──
               Fired for "accepted" and "released" system events. Absolutely
               positioned within #dealChatPanel, pointer-events none so it
               never blocks taps, and removes itself after the animation. */
            .dcp-celebrate-layer {
              position: absolute; inset: 0; pointer-events: none; overflow: hidden;
              z-index: 40;
            }
            .dcp-celebrate-piece {
              position: absolute; top: -5%; will-change: transform, opacity;
              animation-name: dcpFall; animation-timing-function: ease-in;
              animation-fill-mode: forwards;
            }
            @keyframes dcpFall {
              0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
              8%   { opacity: 1; }
              100% { transform: translateY(115vh) translateX(var(--dcp-drift, 0px)) rotate(var(--dcp-spin, 220deg)); opacity: 0.9; }
            }

            /* ── First-time "welcome to this deal chat" overlay ── */
            .dcp-welcome-layer {
              position: absolute; inset: 0; z-index: 50;
              display: flex; align-items: center; justify-content: center;
              background: rgba(6,8,4,0.72); backdrop-filter: blur(6px);
              animation: dcpWelcomeBgIn 0.4s ease both;
            }
            @keyframes dcpWelcomeBgIn { from { opacity: 0; } to { opacity: 1; } }
            .dcp-welcome-card {
              display: flex; flex-direction: column; align-items: center; text-align: center;
              gap: 0.9rem; padding: 2rem 1.8rem; max-width: 300px;
              animation: dcpWelcomeCardIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
            }
            @keyframes dcpWelcomeCardIn {
              0%   { opacity: 0; transform: translateY(18px) scale(0.92); }
              100% { opacity: 1; transform: translateY(0) scale(1); }
            }
            .dcp-welcome-icon {
              width: 4rem; height: 4rem; border-radius: 50%;
              background: radial-gradient(circle at 35% 30%, rgba(163,230,53,0.35), rgba(163,230,53,0.08));
              border: 1px solid rgba(163,230,53,0.4);
              display: flex; align-items: center; justify-content: center;
              color: #a3e635; animation: dcpWelcomePulse 1.8s ease-in-out infinite;
            }
            .dcp-welcome-icon svg { width: 1.9rem; height: 1.9rem; }
            @keyframes dcpWelcomePulse {
              0%, 100% { box-shadow: 0 0 0 0 rgba(163,230,53,0.25); }
              50%      { box-shadow: 0 0 0 10px rgba(163,230,53,0); }
            }
            .dcp-welcome-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
            .dcp-welcome-sub { font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.55); }
            .dcp-welcome-dismiss {
              margin-top: 0.3rem; padding: 0.55rem 1.3rem; border-radius: 1rem;
              background: #a3e635; color: #06110a; font-weight: 700; font-size: 0.8rem;
              border: none; cursor: pointer; transition: transform 0.15s, background 0.15s;
            }
            .dcp-welcome-dismiss:hover { background: #bef264; transform: scale(1.04); }
            .dcp-welcome-layer.dcp-welcome-out { animation: dcpWelcomeBgOut 0.3s ease both; }
            @keyframes dcpWelcomeBgOut { to { opacity: 0; } }
            .dcp-msg-row { display: flex; flex-direction: column; max-width: 76%; gap: 3px; }
            .dcp-msg-row.mine  { align-self: flex-end;  align-items: flex-end; }
            .dcp-msg-row.theirs { align-self: flex-start; align-items: flex-start; }
            .dcp-bubble {
            padding: 0.6rem 0.95rem; border-radius: 1.2rem;
            font-size: 0.85rem; line-height: 1.5; word-break: break-word;
            }
            .dcp-msg-row.mine   .dcp-bubble { background: #a3e635; color: #000; font-weight: 500; border-bottom-right-radius: 4px; }
            .dcp-msg-row.theirs .dcp-bubble { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.07); border-bottom-left-radius: 4px; }
            /* Deal-chat image messages (.dcp-bubble.img-bubble) had no size
               cap at all, unlike the group-chat equivalent (.gcp-bubble.img-bubble)
               below — this is why sent/received photos rendered at full
               native resolution instead of a chat-sized thumbnail. */
            .dcp-bubble.img-bubble { padding: 4px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
            .dcp-bubble.img-bubble img { display: block; max-width: 220px; max-height: 220px; width: 100%; height: auto; border-radius: 0.9rem; cursor: pointer; object-fit: cover; }

            /* Transfer Deal ZIP delivery card — overrides default bubble coloring */
            .dcp-bubble.tdm-zip-bubble {
              padding: 0 !important; background: transparent !important; border: none !important;
            }
            .tdm-zip-card {
              display: flex; align-items: center; gap: 0.7rem;
              background: #12160d; border: 1px solid rgba(163,230,53,0.35);
              border-radius: 1rem; padding: 0.7rem 0.8rem; min-width: 220px; max-width: 260px;
            }
            .tdm-zip-card-icon {
              width: 2.2rem; height: 2.2rem; flex-shrink: 0; border-radius: 0.6rem;
              background: rgba(163,230,53,0.15); color: #a3e635;
              display: flex; align-items: center; justify-content: center;
            }
            .tdm-zip-card-icon svg { width: 1.15rem; height: 1.15rem; }
            .tdm-zip-card-body { flex: 1; min-width: 0; }
            .tdm-zip-card-title { font-size: 0.82rem; font-weight: 600; color: #e8ffd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .tdm-zip-card-sub { font-size: 0.68rem; color: #8fae72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .tdm-zip-download-btn {
              width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 50%;
              background: #a3e635; border: none; color: #0a1005; cursor: pointer;
              display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s;
              padding: 0;
            }
            .tdm-zip-download-btn svg { width: 1.05rem; height: 1.05rem; }
            .tdm-zip-download-btn:hover { background: #bef264; transform: scale(1.06); }
            .tdm-zip-download-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
            .tdm-zip-readonly-badge {
              width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 50%;
              background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4);
              display: flex; align-items: center; justify-content: center;
            }
            .tdm-zip-onetime-notice {
              margin-top: 0.4rem; max-width: 260px; font-size: 0.64rem; line-height: 1.4;
              color: rgba(255,255,255,0.4); font-style: italic;
            }

            /* Transfer Methods bar (injected into sticky item bar) */
            .dcp-transfer-methods-bar {
              display: flex; align-items: center; gap: 0.6rem;
              padding: 0.55rem 1rem; background: rgba(255,255,255,0.025);
              border-bottom: 1px solid rgba(255,255,255,0.06);
              flex-wrap: wrap; row-gap: 0.4rem;
            }
            .dcp-transfer-methods-label {
              font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
              flex-shrink: 0;
            }
            .dcp-transfer-methods-pills {
              display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; row-gap: 0.4rem;
            }
            .dcp-transfer-pill {
              display: inline-flex; align-items: center; gap: 0.35rem;
              padding: 0.28rem 0.65rem; border-radius: 1rem;
              background: rgba(163,230,53,0.09); border: 1px solid rgba(163,230,53,0.25);
              color: #d3f5a8; font-size: 0.68rem; font-weight: 600; white-space: nowrap;
              line-height: 1;
            }
            .dcp-transfer-pill svg { flex-shrink: 0; }

            .dcp-msg-time { font-size: 0.6rem; color: rgba(255,255,255,0.25); }
            .dcp-msg-meta { display: flex; align-items: center; gap: 0.4rem; padding: 0 4px; position: relative; }
            .dcp-msg-row.mine .dcp-msg-meta { flex-direction: row-reverse; }
            .dcp-msg-dots {
            width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent;
            color: rgba(255,255,255,0.3); cursor: pointer; display: flex; align-items: center;
            justify-content: center; transition: all 0.15s; padding: 0; font-family: inherit; opacity: 0;
            }
            .dcp-msg-row:hover .dcp-msg-dots { opacity: 1; }
            .dcp-msg-dots:hover { background: rgba(255,255,255,0.08); color: #fff; }
            .dcp-msg-dots svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
            .dcp-ctx-menu {
            position: absolute; top: 100%; right: 0; z-index: 99;
            background: #111118; border: 1px solid rgba(255,255,255,0.09);
            border-radius: 0.75rem; padding: 0.3rem; min-width: 130px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.6);
            }
            .dcp-msg-row.theirs .dcp-ctx-menu { right: auto; left: 0; }
            .dcp-ctx-item {
            display: flex; align-items: center; gap: 0.55rem;
            padding: 0.5rem 0.7rem; border-radius: 0.5rem; cursor: pointer;
            font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.75);
            border: none; background: none; font-family: inherit; width: 100%; text-align: left; transition: background 0.12s;
            }
            .dcp-ctx-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
            .dcp-ctx-item.danger { color: #f87171; }
            .dcp-ctx-item.danger:hover { background: rgba(239,68,68,0.1); }
            .dcp-ctx-item svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
            .dcp-msg-name { font-size: 0.62rem; font-weight: 700; color: #a3e635; }
            .dcp-msg-row.mine .dcp-msg-name { display: none; }
            #dcpExpiredBanner {
            display: none; align-items: center; justify-content: center;
            gap: 0.5rem; padding: 0.75rem 1.4rem;
            background: rgba(239,68,68,0.07); border-top: 1px solid rgba(239,68,68,0.14);
            font-size: 0.78rem; color: #f87171; font-weight: 600; flex-shrink: 0;
            }
            #dcpExpiredBanner.dcp-outcome-successful {
            background: rgba(163,230,53,0.08); border-top: 1px solid rgba(163,230,53,0.2);
            color: #a3e635;
            }
            #dcpExpiredBanner.dcp-outcome-closed {
            background: rgba(239,68,68,0.07); border-top: 1px solid rgba(239,68,68,0.14);
            color: #f87171;
            }
            #dcpInputRow {
            display: flex; flex-direction: column; align-items: center;
            padding: 0.55rem 0 calc(0.55rem + env(safe-area-inset-bottom, 0px)) 0;
            border-top: 1px solid rgba(255,255,255,0.07);
            flex-shrink: 0; background: #06060e; gap: 0.45rem;
            }
            #dcpAttachRow {
            width: 90%; display: flex; align-items: center; gap: 0.4rem;
            }
            .dcp-attach-pill {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.3rem 0.7rem; border-radius: 2rem; flex-shrink: 0;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.5); cursor: pointer; font-size: 0.75rem; font-weight: 600;
            font-family: inherit; transition: all 0.15s; white-space: nowrap;
            }
            .dcp-attach-pill:hover { background: rgba(255,255,255,0.09); color: #fff; }
            .dcp-attach-pill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
            #dcpInputInner {
            width: 90%; display: flex; align-items: flex-end; position: relative;
            }
            .dcp-textarea-wrap {
            flex: 1; position: relative; display: flex; align-items: flex-end;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
            border-radius: 1.3rem; transition: border-color 0.18s;
            }
            .dcp-textarea-wrap:focus-within { border-color: rgba(163,230,53,0.35); }
            .dcp-attach-menu {
            position: absolute; bottom: calc(100% + 8px); left: 0;
            background: #0e0e1a; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 1rem; padding: 0.4rem;
            display: none; flex-direction: column; gap: 2px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6); z-index: 10;
            min-width: 160px;
            }
            .dcp-attach-menu.open { display: flex; }
            #dcpInput {
            flex: 1; background: transparent; border: none; border-radius: 1.3rem;
            padding: 0.6rem 2.8rem 0.6rem 0.95rem; font-size: 0.88rem; color: #fff;
            font-family: inherit; outline: none; resize: none;
            max-height: 110px; min-height: 40px; line-height: 1.45;
            }
            #dcpInput::placeholder { color: rgba(255,255,255,0.25); }
            #dcpInput:disabled { opacity: 0.4; }
            #dcpSendBtn {
            position: absolute; right: 5px; bottom: 5px;
            width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
            background: #a3e635; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: filter 0.15s, transform 0.12s;
            }
            #dcpSendBtn:hover { filter: brightness(1.1); }
            #dcpSendBtn:active { transform: scale(0.93); }
            #dcpSendBtn svg { width: 14px; height: 14px; stroke: #000; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
            .ibx-deal-countdown { font-size: 0.63rem; font-weight: 700; color: #a3e635; white-space: nowrap; }
            .ibx-open-chat-btn {
            margin-top: 0.85rem; width: 100%; padding: 0.55rem 1rem; border-radius: 0.9rem;
            background: rgba(163,230,53,0.09); border: 1px solid rgba(163,230,53,0.26);
            color: #a3e635; font-size: 0.82rem; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: all 0.18s; text-align: center; display: block;
            }
            .ibx-open-chat-btn:hover { background: rgba(163,230,53,0.17); }
            /* ── Deal chat sticky item bar ── */
            #dcpItemBar {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.65rem 1rem; background: rgba(255,255,255,0.03);
            border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
            }
            #dcpItemThumb {
            width: 42px; height: 42px; border-radius: 0.6rem; object-fit: cover;
            background: rgba(255,255,255,0.06); flex-shrink: 0;
            border: 1px solid rgba(255,255,255,0.08);
            }
            #dcpItemThumbFallback {
            width: 42px; height: 42px; border-radius: 0.6rem; flex-shrink: 0;
            background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.15);
            display: flex; align-items: center; justify-content: center;
            }
            #dcpItemThumbFallback svg { width: 18px; height: 18px; stroke: #a3e635; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
            #dcpItemInfo { flex: 1; min-width: 0; }
            #dcpItemTitle {
            font-size: 0.82rem; font-weight: 700; color: #fff;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            max-width: 100%;
            }
            #dcpItemPrice { font-size: 0.72rem; color: #a3e635; font-weight: 700; margin-top: 1px; }
            #dcpViewListingBtn {
            flex-shrink: 0; padding: 0.3rem 0.75rem; border-radius: 2rem;
            background: rgba(163,230,53,0.1); border: 1px solid rgba(163,230,53,0.25);
            color: #a3e635; font-size: 0.72rem; font-weight: 700; cursor: pointer;
            font-family: inherit; transition: all 0.15s; white-space: nowrap;
            }
            #dcpViewListingBtn:hover { background: rgba(163,230,53,0.18); }
            /* ── Deal chat announcement bar ── */
            #dcpAnnouncementBar {
            display: flex; align-items: center; gap: 0.6rem;
            padding: 0.55rem 1rem; flex-shrink: 0;
            border-top: 1px solid rgba(255,255,255,0.06);
            }
            #dcpAnnouncementBar.seller-mode {
            background: rgba(251,191,36,0.06);
            border-top-color: rgba(251,191,36,0.15);
            }
            #dcpAnnouncementBar.buyer-mode {
            background: rgba(163,230,53,0.05);
            border-top-color: rgba(163,230,53,0.12);
            }
            #dcpAnnouncementBar.disputed-mode {
            background: rgba(239,68,68,0.07);
            border-top-color: rgba(239,68,68,0.2);
            }
            .disputed-mode .dcp-ann-icon { background: rgba(239,68,68,0.14); }
            .disputed-mode .dcp-ann-icon svg { stroke: #f87171; }
            .disputed-mode .dcp-ann-label { color: #f87171; }
            .dcp-ann-sub-link {
            background: none; border: none; padding: 0; margin-top: 2px;
            font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.4);
            text-decoration: underline; cursor: pointer; font-family: inherit;
            }
            .dcp-ann-sub-link:hover { color: rgba(255,255,255,0.65); }
            .dcp-ann-icon {
            width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            }
            .seller-mode .dcp-ann-icon { background: rgba(251,191,36,0.12); }
            .buyer-mode  .dcp-ann-icon { background: rgba(163,230,53,0.1); }
            .dcp-ann-icon svg { width: 15px; height: 15px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
            .seller-mode .dcp-ann-icon svg { stroke: #fbbf24; }
            .buyer-mode  .dcp-ann-icon svg { stroke: #a3e635; }
            .dcp-ann-text { flex: 1; min-width: 0; }
            .dcp-ann-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
            .seller-mode .dcp-ann-label { color: #fbbf24; }
            .buyer-mode  .dcp-ann-label { color: #a3e635; }
            .dcp-ann-msg { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-top: 1px; font-weight: 500; }
            .dcp-ann-cta {
            flex-shrink: 0; padding: 0.35rem 0.9rem; border-radius: 2rem;
            font-size: 0.75rem; font-weight: 700; cursor: pointer;
            font-family: inherit; transition: all 0.15s; border: none; white-space: nowrap;
            }
            .seller-mode .dcp-ann-cta { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
            .seller-mode .dcp-ann-cta:hover { background: rgba(251,191,36,0.25); }
            .buyer-mode  .dcp-ann-cta { background: #a3e635; color: #000; }
            .buyer-mode  .dcp-ann-cta:hover { filter: brightness(1.1); }

/* ── extracted style block 11 (originally around char offset 1847747) ── */
#groupChatPanel *, #groupChatPanel *::before, #groupChatPanel *::after { box-sizing: border-box; }
            /* ── Header ── */
            .gcp-header {
              display: flex; align-items: center; gap: 0.75rem;
              padding: 1rem 1.4rem; flex-shrink: 0;
              border-bottom: 1px solid rgba(255,255,255,0.07);
              background: #06060e;
            }
            .gcp-back-btn {
              width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
              background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
              color: rgba(255,255,255,0.6); cursor: pointer;
              display: flex; align-items: center; justify-content: center;
              transition: all 0.18s; font-family: inherit;
            }
            .gcp-back-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
            .gcp-back-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
            .gcp-av {
              width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
              background: linear-gradient(135deg, #a3e635 0%, #65a30d 100%);
              display: flex; align-items: center; justify-content: center;
              font-size: 0.8rem; font-weight: 700; color: #000;
              overflow: hidden;
            }
            .gcp-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
            .gcp-title { font-size: 0.92rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
            .gcp-desc  { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 1px; }
            /* ── Messages area ── */
            #gcpMessages {
              flex: 1; overflow-y: auto; padding: 1rem 1.2rem;
              display: flex; flex-direction: column; gap: 0.65rem;
              scrollbar-width: thin; scrollbar-color: #1a1a1a transparent;
              min-height: 0;
            }
            #gcpMessages::-webkit-scrollbar { width: 4px; }
            #gcpMessages::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 4px; }
            /* System message */
            .gcp-msg-system {
              text-align: center; font-size: 0.75rem;
              color: rgba(255,255,255,0.38); padding: 0.4rem 1rem;
              background: rgba(255,255,255,0.03); border-radius: 2rem;
              margin: 0.3rem auto; max-width: 90%; line-height: 1.5;
            }
            /* Outer row: avatar + message column */
            .gcp-msg-outer {
              display: flex; align-items: flex-end; gap: 0.5rem;
            }
            .gcp-msg-outer.mine   { flex-direction: row-reverse; }
            .gcp-msg-outer.theirs { flex-direction: row; }
            /* Avatar (theirs) */
            .gcp-msg-av {
              width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
              background: linear-gradient(135deg, #a3e635 0%, #65a30d 100%);
              display: flex; align-items: center; justify-content: center;
              font-size: 0.65rem; font-weight: 700; color: #000; overflow: hidden;
              align-self: flex-end; margin-bottom: 2px;
            }
            .gcp-msg-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
            .gcp-msg-av-spacer { width: 28px; flex-shrink: 0; }
            /* Message column */
            .gcp-msg-row { display: flex; flex-direction: column; max-width: 74%; gap: 3px; }
            .gcp-msg-row.mine   { align-items: flex-end; }
            .gcp-msg-row.theirs { align-items: flex-start; }
            /* Meta: name + time + dots */
            .gcp-msg-meta {
              display: flex; align-items: center; gap: 0.4rem;
              padding: 0 4px; position: relative;
            }
            .gcp-msg-row.mine .gcp-msg-meta { flex-direction: row-reverse; }
            .gcp-msg-name { font-size: 0.62rem; font-weight: 700; color: #a3e635; }
            .gcp-msg-row.mine .gcp-msg-name { display: none; }
            .gcp-msg-time { font-size: 0.6rem; color: rgba(255,255,255,0.25); }
            /* 3-dot button */
            .gcp-msg-dots {
              width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent;
              color: rgba(255,255,255,0.3); cursor: pointer; display: flex; align-items: center;
              justify-content: center; transition: all 0.15s; padding: 0; font-family: inherit; opacity: 0;
            }
            .gcp-msg-outer:hover .gcp-msg-dots { opacity: 1; }
            .gcp-msg-dots:hover { background: rgba(255,255,255,0.08); color: #fff; }
            .gcp-msg-dots svg { width: 13px; height: 13px; stroke: none; fill: currentColor; }
            /* Bubble */
            .gcp-bubble {
              padding: 0.6rem 0.95rem; border-radius: 1.2rem;
              font-size: 0.85rem; line-height: 1.5; word-break: break-word;
            }
            .gcp-msg-row.mine   .gcp-bubble { background: #a3e635; color: #000; font-weight: 500; border-bottom-right-radius: 4px; }
            .gcp-msg-row.theirs .gcp-bubble { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.07); border-bottom-left-radius: 4px; }
            /* Image bubble */
            .gcp-bubble.img-bubble { padding: 4px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
            .gcp-bubble.img-bubble img { display: block; max-width: 220px; max-height: 220px; border-radius: 0.9rem; cursor: pointer; object-fit: cover; }
            /* Link bubble */
            .gcp-bubble.link-bubble { padding: 0; background: transparent; border: none; }
            /* Context menu */
            .gcp-ctx-menu {
              position: absolute; top: 100%; right: 0; z-index: 99;
              background: #111118; border: 1px solid rgba(255,255,255,0.09);
              border-radius: 0.75rem; padding: 0.3rem; min-width: 140px;
              box-shadow: 0 8px 28px rgba(0,0,0,0.6);
            }
            .gcp-msg-row.theirs .gcp-ctx-menu { right: auto; left: 0; }
            .gcp-ctx-item {
              display: flex; align-items: center; gap: 0.55rem;
              padding: 0.5rem 0.7rem; border-radius: 0.5rem; cursor: pointer;
              font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.75);
              border: none; background: none; font-family: inherit; width: 100%; text-align: left; transition: background 0.12s;
            }
            .gcp-ctx-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
            .gcp-ctx-item.danger { color: #f87171; }
            .gcp-ctx-item.danger:hover { background: rgba(239,68,68,0.1); }
            .gcp-ctx-item svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
            /* ── Input area ── */
            .gcp-input-row {
              display: flex; flex-direction: column; align-items: center;
              padding: 0.55rem 0 calc(0.55rem + env(safe-area-inset-bottom, 0px)) 0;
              border-top: 1px solid rgba(255,255,255,0.07);
              flex-shrink: 0; background: #06060e; gap: 0.45rem;
            }
            .gcp-attach-row {
              width: 90%; display: flex; align-items: center; gap: 0.4rem;
            }
            .gcp-attach-btn {
              display: flex; align-items: center; gap: 0.4rem;
              padding: 0.3rem 0.7rem; border-radius: 2rem; flex-shrink: 0;
              background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
              color: rgba(255,255,255,0.5); font-size: 0.72rem; font-weight: 600;
              cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
            }
            .gcp-attach-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.15); }
            .gcp-attach-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
            .gcp-input-inner { width: 90%; }
            .gcp-textarea-wrap {
              display: flex; align-items: flex-end; gap: 0.5rem;
              background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
              border-radius: 1.2rem; padding: 0.55rem 0.55rem 0.55rem 0.85rem;
              transition: border-color 0.15s;
            }
            .gcp-textarea-wrap:focus-within { border-color: rgba(163,230,53,0.35); }
            .gcp-textarea-wrap textarea {
              flex: 1; background: none; border: none; outline: none; resize: none;
              color: #fff; font-size: 0.875rem; font-family: inherit; line-height: 1.45;
              min-height: 22px; max-height: 120px; padding: 0;
              scrollbar-width: thin; scrollbar-color: #333 transparent;
            }
            .gcp-textarea-wrap textarea::placeholder { color: rgba(255,255,255,0.28); }
            .gcp-textarea-wrap button {
              width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
              background: #a3e635; border: none; cursor: pointer;
              display: flex; align-items: center; justify-content: center;
              transition: filter 0.15s; align-self: flex-end;
            }
            .gcp-textarea-wrap button:hover { filter: brightness(1.12); }
            .gcp-textarea-wrap button svg { width: 14px; height: 14px; stroke: #000; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── extracted style block 12 (originally around char offset 1879833) ── */
#aiSupportPanel {
            position: fixed; inset: 0; z-index: 9997;
            background: #06060e;
            display: none; flex-direction: column;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            }
            #aiSupportPanel *, #aiSupportPanel *::before, #aiSupportPanel *::after { box-sizing: border-box; }
            .asp-box { background: #06060e; border: none; border-radius: 0; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; margin: 0; }
            .asp-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem 1.4rem; flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            background: #06060e;
            }
            .asp-header-left { display: flex; align-items: center; gap: 0.7rem; }
            .asp-back-btn {
            width: 34px; height: 34px; border-radius: 10px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.6); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.18s; font-family: inherit; flex-shrink: 0;
            }
            .asp-back-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
            .asp-back-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
            .asp-av {
            width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
            background: linear-gradient(135deg, #a3e635, #65a30d);
            display: flex; align-items: center; justify-content: center; color: #06060e;
            }
            .asp-av svg { width: 18px; height: 18px; }
            .asp-header-titles { display: flex; flex-direction: column; gap: 2px; }
            .asp-title { font-size: 0.92rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
            .asp-sub { font-size: 0.7rem; font-weight: 600; color: #a3e635; letter-spacing: 0.01em; }
            #aspMessages {
            flex: 1; overflow-y: auto; padding: 1rem 1.2rem;
            display: flex; flex-direction: column; gap: 0.5rem;
            scrollbar-width: thin; scrollbar-color: #1a1a1a transparent;
            }
            #aspMessages::-webkit-scrollbar { width: 4px; }
            #aspMessages::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 4px; }
            .asp-msg-system {
            text-align: center; font-size: 0.75rem;
            color: rgba(255,255,255,0.38); padding: 0.4rem 1rem;
            background: rgba(255,255,255,0.03); border-radius: 2rem;
            margin: 0.3rem auto; max-width: 90%; line-height: 1.5;
            }
            .asp-msg-row { display: flex; flex-direction: column; max-width: 80%; gap: 3px; }
            .asp-msg-row.mine  { align-self: flex-end;  align-items: flex-end; }
            .asp-msg-row.theirs { align-self: flex-start; align-items: flex-start; }
            .asp-bubble {
            padding: 0.6rem 0.95rem; border-radius: 1.2rem;
            font-size: 0.85rem; line-height: 1.5; word-break: break-word; white-space: pre-wrap;
            }
            .asp-msg-row.mine   .asp-bubble { background: #a3e635; color: #000; font-weight: 500; border-bottom-right-radius: 4px; }
            .asp-msg-row.theirs .asp-bubble { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.07); border-bottom-left-radius: 4px; }
            .asp-typing { display: flex; gap: 4px; padding: 0.7rem 1rem; align-self: flex-start; }
            .asp-typing span {
            width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4);
            animation: asp-bounce 1.1s infinite ease-in-out;
            }
            .asp-typing span:nth-child(2) { animation-delay: 0.15s; }
            .asp-typing span:nth-child(3) { animation-delay: 0.3s; }
            @keyframes asp-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }
            #aspInputRow {
            display: flex; align-items: flex-end; gap: 0.6rem;
            padding: 0.85rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.07);
            flex-shrink: 0; background: #06060e;
            }
            #aspInput {
            flex: 1; background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.09); border-radius: 1.1rem;
            padding: 0.65rem 1rem; font-size: 0.88rem; color: #fff;
            font-family: inherit; outline: none; resize: none;
            max-height: 120px; min-height: 42px; line-height: 1.45;
            transition: border-color 0.18s;
            }
            #aspInput:focus { border-color: rgba(163,230,53,0.35); }
            #aspInput::placeholder { color: rgba(255,255,255,0.25); }
            #aspInput:disabled { opacity: 0.4; }
            #aspSendBtn {
            width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
            background: #a3e635; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: filter 0.15s, transform 0.12s;
            }
            #aspSendBtn:hover { filter: brightness(1.1); }
            #aspSendBtn:active { transform: scale(0.93); }
            #aspSendBtn:disabled { opacity: 0.5; cursor: not-allowed; }
            #aspSendBtn svg { width: 17px; height: 17px; stroke: #000; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── extracted style block 13 (originally around char offset 1903360) ── */
#ntfStack {
            position: fixed; top: 16px; right: 16px; z-index: 10050;
            display: flex; flex-direction: column; gap: 10px;
            width: min(340px, calc(100vw - 32px));
            pointer-events: none;
            }
            .ntf-toast {
            pointer-events: auto;
            display: flex; align-items: flex-start; gap: 0.7rem;
            background: rgba(10,10,18,0.96);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 1rem; padding: 0.8rem 0.9rem;
            box-shadow: 0 12px 32px rgba(0,0,0,0.5);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            cursor: pointer; transform: translateX(120%); opacity: 0;
            transition: transform 0.32s cubic-bezier(.16,.84,.44,1), opacity 0.32s;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            position: relative;
            }
            .ntf-toast.show { transform: translateX(0); opacity: 1; }
            .ntf-toast.leaving { transform: translateX(120%); opacity: 0; }
            .ntf-toast::before {
            content: ''; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px;
            border-radius: 3px; background: var(--ntf-accent, #a3e635);
            }
            .ntf-toast.t-deal_accepted    { --ntf-accent: #a3e635; }
            .ntf-toast.t-deal_rejected    { --ntf-accent: #f87171; }
            .ntf-toast.t-deal_request     { --ntf-accent: #60a5fa; }
            .ntf-toast.t-message          { --ntf-accent: #c084fc; }
            .ntf-toast.t-deal_sent        { --ntf-accent: #60a5fa; }
            .ntf-toast.t-payment_reminder { --ntf-accent: #fbbf24; }
            .ntf-toast.t-escrow_funded    { --ntf-accent: #a3e635; }
            .ntf-toast.t-deal_delivered   { --ntf-accent: #60a5fa; }
            .ntf-toast.t-escrow_released  { --ntf-accent: #a3e635; }
            .ntf-toast.t-escrow_refunded  { --ntf-accent: #60a5fa; }
            .ntf-toast.t-deal_disputed    { --ntf-accent: #f87171; }
            .ntf-icon {
            width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: color-mix(in srgb, var(--ntf-accent, #a3e635) 16%, transparent);
            color: var(--ntf-accent, #a3e635);
            }
            .ntf-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
            .ntf-icon.filled svg { fill: currentColor; stroke: none; }
            .ntf-body { flex: 1; min-width: 0; }
            .ntf-title { font-size: 0.82rem; font-weight: 700; color: #fff; line-height: 1.3; }
            .ntf-text { font-size: 0.76rem; color: rgba(255,255,255,0.55); margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
            .ntf-close {
            flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
            background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.4);
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            transition: all 0.15s;
            }
            .ntf-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
            .ntf-close svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; }
            .ntf-progress {
            position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 0 0 1rem 1rem;
            background: var(--ntf-accent, #a3e635); width: 100%;
            transform-origin: left; animation: ntf-shrink linear forwards;
            }
            @keyframes ntf-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
            /* Missed-notifications panel — single card at a time, Next/Prev nav.
               Shown automatically on login if there are unread notifications
               from while the user was away (not gated behind opening inbox). */
            #ntfMissedPanel {
            position: fixed; inset: 0; z-index: 10060;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: none; align-items: center; justify-content: center;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 1rem;
            }
            .ntf-missed-box {
            background: #0a0a12; border: 1px solid rgba(255,255,255,0.08);
            border-radius: 1.5rem; width: min(360px, 100%);
            display: flex; flex-direction: column; overflow: hidden;
            box-shadow: 0 24px 70px rgba(0,0,0,0.7);
            transform: translateY(10px) scale(0.97); opacity: 0;
            transition: transform 0.22s cubic-bezier(.16,.84,.44,1), opacity 0.22s;
            }
            #ntfMissedPanel.visible .ntf-missed-box { transform: translateY(0) scale(1); opacity: 1; }
            .ntf-missed-header {
            padding: 1rem 1.1rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.07);
            display: flex; align-items: center; justify-content: space-between;
            }
            .ntf-missed-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
            .ntf-missed-count {
            font-size: 0.68rem; font-weight: 800; color: rgba(255,255,255,0.5);
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 1rem; padding: 0.15rem 0.55rem;
            }
            .ntf-missed-close {
            width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            }
            .ntf-missed-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
            /* ── Card ── */
            .ntf-missed-card {
            padding: 1.4rem 1.3rem 1.1rem; display: flex; flex-direction: column;
            align-items: center; text-align: center; gap: 0.8rem;
            }
            .ntf-missed-card .ntf-icon {
            width: 48px; height: 48px; border-radius: 14px;
            }
            .ntf-missed-card .ntf-icon svg { width: 22px; height: 22px; }
            .ntf-missed-card-title { font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.3; }
            .ntf-missed-card-text { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.5; }
            /* ── Footer: prev / dots / next, then primary action ── */
            .ntf-missed-footer {
            padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem;
            }
            .ntf-missed-nav {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            }
            .ntf-missed-nav-btn {
            width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.7); cursor: pointer;
            display: flex; align-items: center; justify-content: center; transition: all 0.15s;
            }
            .ntf-missed-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #fff; }
            .ntf-missed-nav-btn:disabled { opacity: 0.3; cursor: default; }
            .ntf-missed-nav-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
            .ntf-missed-dots { display: flex; gap: 0.3rem; align-items: center; }
            .ntf-missed-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: all 0.15s; }
            .ntf-missed-dot.active { background: #a3e635; width: 14px; border-radius: 3px; }
            .ntf-missed-cta {
            width: 100%; padding: 0.7rem 1rem; border-radius: 0.9rem;
            font-size: 0.85rem; font-weight: 700; cursor: pointer; border: none;
            font-family: inherit; transition: all 0.15s;
            background: var(--ntf-accent, #a3e635); color: #000;
            }
            .ntf-missed-cta:hover { filter: brightness(1.08); }

/* ── extracted style block 14 (originally around char offset 1931033) ── */
/* ── Overlay ── */
            #srf-modal-overlay {
            position: fixed; inset: 0; z-index: 99999;
            background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center;
            padding: 1.2rem; opacity: 0; pointer-events: none;
            transition: opacity 0.18s ease;
            }
            #srf-modal-overlay.visible { opacity: 1; pointer-events: all; }
            /* ── Box ── */
            #srf-modal-box {
            background: #0e0e18; border-radius: 1.4rem;
            width: 100%; max-width: 340px;
            border: 1px solid rgba(255,255,255,0.09);
            box-shadow: 0 24px 60px rgba(0,0,0,0.8);
            overflow: hidden; transform: translateY(12px) scale(0.97);
            transition: transform 0.2s cubic-bezier(0.34,1.36,0.64,1);
            }
            #srf-modal-overlay.visible #srf-modal-box { transform: translateY(0) scale(1); }
            /* ── Icon area ── */
            #srf-modal-icon-wrap {
            display: flex; align-items: center; justify-content: center;
            padding: 1.6rem 1.6rem 0;
            }
            #srf-modal-icon {
            width: 52px; height: 52px; border-radius: 1rem;
            display: flex; align-items: center; justify-content: center;
            }
            #srf-modal-icon svg {
            width: 26px; height: 26px; fill: none;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
            }
            /* ── Themes ── */
            #srf-modal-icon.theme-danger  { background: rgba(239,68,68,0.12);  }
            #srf-modal-icon.theme-danger  svg { stroke: #f87171; }
            #srf-modal-icon.theme-warning { background: rgba(251,191,36,0.12); }
            #srf-modal-icon.theme-warning svg { stroke: #fbbf24; }
            #srf-modal-icon.theme-success { background: rgba(163,230,53,0.12); }
            #srf-modal-icon.theme-success svg { stroke: #a3e635; }
            #srf-modal-icon.theme-info    { background: rgba(96,165,250,0.12); }
            #srf-modal-icon.theme-info    svg { stroke: #60a5fa; }
            #srf-modal-icon.theme-report  { background: rgba(251,146,60,0.12); }
            #srf-modal-icon.theme-report  svg { stroke: #fb923c; }
            #srf-modal-icon.theme-input   { background: rgba(139,92,246,0.12); }
            #srf-modal-icon.theme-input   svg { stroke: #a78bfa; }
            /* ── Text ── */
            #srf-modal-body { padding: 1rem 1.6rem 0; text-align: center; }
            #srf-modal-title {
            font-size: 1rem; font-weight: 800; color: #fff;
            letter-spacing: -0.02em; line-height: 1.25;
            }
            #srf-modal-msg {
            font-size: 0.82rem; color: rgba(255,255,255,0.5);
            line-height: 1.55; margin-top: 0.4rem;
            }
            /* ── Input (for prompt) ── */
            #srf-modal-input-wrap { padding: 0.9rem 1.6rem 0; display: none; }
            #srf-modal-input {
            width: 100%; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 0.75rem;
            padding: 0.65rem 0.9rem; font-size: 0.88rem; color: #fff;
            font-family: inherit; outline: none; box-sizing: border-box;
            transition: border-color 0.15s;
            }
            #srf-modal-input:focus { border-color: rgba(139,92,246,0.5); }
            #srf-modal-input::placeholder { color: rgba(255,255,255,0.2); }
            /* ── Buttons ── */
            #srf-modal-actions {
            display: flex; gap: 0.6rem; padding: 1.1rem 1.4rem 1.4rem;
            }
            .srf-modal-btn {
            flex: 1; padding: 0.65rem 1rem; border-radius: 0.85rem;
            font-size: 0.85rem; font-weight: 700; cursor: pointer;
            border: none; font-family: inherit; transition: all 0.15s;
            display: flex; align-items: center; justify-content: center;
            }
            .srf-modal-btn.cancel {
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.55);
            border: 1px solid rgba(255,255,255,0.08);
            }
            .srf-modal-btn.cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
            .srf-modal-btn.confirm-danger  { background: #ef4444; color: #fff; }
            .srf-modal-btn.confirm-danger:hover  { background: #dc2626; }
            .srf-modal-btn.confirm-warning { background: #f59e0b; color: #000; }
            .srf-modal-btn.confirm-warning:hover { background: #d97706; }
            .srf-modal-btn.confirm-success { background: #a3e635; color: #000; }
            .srf-modal-btn.confirm-success:hover { filter: brightness(1.08); }
            .srf-modal-btn.confirm-info    { background: #3b82f6; color: #fff; }
            .srf-modal-btn.confirm-info:hover    { background: #2563eb; }
            .srf-modal-btn.confirm-report  { background: #f97316; color: #fff; }
            .srf-modal-btn.confirm-report:hover  { background: #ea6c0a; }
            .srf-modal-btn.confirm-input   { background: #8b5cf6; color: #fff; }
            .srf-modal-btn.confirm-input:hover   { background: #7c3aed; }
            /* ── OK-only (single btn) ── */
            .srf-modal-btn.ok-only { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.09); }
            .srf-modal-btn.ok-only:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── extracted style block 15 (originally around char offset 1943588) ── */
#srfAiLenOverlay {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: none; align-items: center; justify-content: center;
            padding: 1.2rem; font-family: inherit;
            }
            #srfAiLenOverlay.visible { display: flex; }
            #srfAiLenBox {
            width: 100%; max-width: 360px;
            background: #0e0e18; border: 1px solid rgba(255,255,255,0.09);
            border-radius: 1.4rem; overflow: hidden;
            box-shadow: 0 24px 60px rgba(0,0,0,0.8);
            transform: translateY(12px) scale(0.97); opacity: 0;
            transition: transform 0.2s cubic-bezier(0.34,1.36,0.64,1), opacity 0.18s ease;
            }
            #srfAiLenOverlay.visible #srfAiLenBox { transform: translateY(0) scale(1); opacity: 1; }
            #srfAiLenIconWrap { display: flex; align-items: center; justify-content: center; padding: 1.6rem 1.6rem 0; }
            #srfAiLenIcon {
            width: 52px; height: 52px; border-radius: 1rem;
            background: rgba(139,92,246,0.12);
            display: flex; align-items: center; justify-content: center;
            }
            #srfAiLenIcon svg { width: 26px; height: 26px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
            #srfAiLenBody { padding: 1rem 1.6rem 0; text-align: center; }
            #srfAiLenTitle { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
            #srfAiLenSub { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.55; margin-top: 0.4rem; }
            #srfAiLenSliderWrap { padding: 1.3rem 1.6rem 0.2rem; }
            #srfAiLenCountRow {
            display: flex; align-items: baseline; justify-content: center; gap: 0.3rem;
            margin-bottom: 0.9rem;
            }
            #srfAiLenCount { font-size: 1.7rem; font-weight: 800; color: #a78bfa; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
            #srfAiLenCountUnit { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.4); }
            #srfAiLenSlider {
            width: 100%; appearance: none; -webkit-appearance: none;
            height: 6px; border-radius: 100px; background: rgba(255,255,255,0.1);
            outline: none; cursor: pointer; margin: 0;
            }
            #srfAiLenSlider::-webkit-slider-thumb {
            appearance: none; -webkit-appearance: none;
            width: 20px; height: 20px; border-radius: 50%;
            background: #a78bfa; border: 3px solid #0e0e18;
            box-shadow: 0 0 0 1px rgba(167,139,250,0.4);
            cursor: pointer;
            }
            #srfAiLenSlider::-moz-range-thumb {
            width: 20px; height: 20px; border-radius: 50%;
            background: #a78bfa; border: 3px solid #0e0e18;
            box-shadow: 0 0 0 1px rgba(167,139,250,0.4);
            cursor: pointer;
            }
            #srfAiLenScaleRow {
            display: flex; justify-content: space-between;
            font-size: 0.68rem; color: rgba(255,255,255,0.3); margin-top: 0.4rem;
            }
            #srfAiLenPlanNote {
            font-size: 0.72rem; color: rgba(255,255,255,0.35);
            padding: 0.7rem 1.6rem 0; text-align: center;
            }
            #srfAiLenActions { display: flex; gap: 0.6rem; padding: 1.1rem 1.4rem 1.4rem; }
            #srfAiLenActions .srf-modal-btn.confirm-input { background: #8b5cf6; color: #fff; }
            #srfAiLenActions .srf-modal-btn.confirm-input:hover { background: #7c3aed; }

/* ── extracted style block 16 (originally around char offset 1952090) ── */
#srfDisputeOverlay {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            display: none; align-items: center; justify-content: center;
            padding: 1rem; font-family: inherit;
            }
            #srfDisputeOverlay.visible { display: flex; }
            #srfDisputeBox {
            width: 100%; max-width: 420px; max-height: 88vh;
            background: #111116; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 1.4rem; overflow: hidden; display: flex; flex-direction: column;
            box-shadow: 0 32px 80px rgba(0,0,0,0.7);
            transform: scale(0.95) translateY(8px); opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
            }
            #srfDisputeOverlay.visible #srfDisputeBox { transform: scale(1) translateY(0); opacity: 1; }
            #srfDisputeHeader {
            display: flex; align-items: center; gap: 0.7rem;
            padding: 1.3rem 1.4rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
            }
            #srfDisputeIcon {
            width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; flex-shrink: 0;
            background: rgba(251,146,60,0.12); display: flex; align-items: center; justify-content: center;
            }
            #srfDisputeIcon svg { width: 1.15rem; height: 1.15rem; stroke: #fb923c; }
            #srfDisputeTitle { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
            #srfDisputeSub { font-size: 0.76rem; color: rgba(255,255,255,0.42); margin-top: 0.1rem; }
            #srfDisputeClose {
            margin-left: auto; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
            display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.55);
            }
            #srfDisputeClose:hover { background: rgba(255,255,255,0.12); color: #fff; }
            #srfDisputeClose svg { width: 13px; height: 13px; }
            #srfDisputeBody { padding: 1.1rem 1.4rem; overflow-y: auto; flex: 1; }
            /* Loading state */
            #srfDisputeLoading {
            display: flex; align-items: center; justify-content: center; gap: 0.6rem;
            padding: 1.8rem 0; color: rgba(255,255,255,0.4); font-size: 0.82rem;
            }
            #srfDisputeLoading svg { width: 16px; height: 16px; animation: srfDisputeSpin 0.8s linear infinite; }
            @keyframes srfDisputeSpin { to { transform: rotate(360deg); } }
            /* Empty state */
            #srfDisputeEmpty {
            display: none; flex-direction: column; align-items: center; text-align: center;
            padding: 1.6rem 0.5rem; gap: 0.5rem;
            }
            #srfDisputeEmpty svg { width: 34px; height: 34px; stroke: rgba(255,255,255,0.22); }
            #srfDisputeEmptyTitle { font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.75); }
            #srfDisputeEmptyMsg { font-size: 0.78rem; color: rgba(255,255,255,0.4); line-height: 1.5; max-width: 280px; }
            /* Picker form */
            #srfDisputeForm { display: none; flex-direction: column; gap: 0.9rem; }
            .srf-dispute-label {
            font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
            color: rgba(255,255,255,0.4); margin-bottom: 0.4rem; display: block;
            }
            #srfDisputeSelectWrap { position: relative; }
            #srfDisputeSelect {
            width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 0.85rem; padding: 0.7rem 2.2rem 0.7rem 0.9rem; font-size: 0.85rem; color: #fff;
            font-family: inherit; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer;
            box-sizing: border-box; transition: border-color 0.15s;
            }
            #srfDisputeSelect:focus { border-color: rgba(251,146,60,0.5); }
            #srfDisputeSelect option { background: #16161c; color: #fff; }
            #srfDisputeSelectWrap svg {
            position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
            width: 14px; height: 14px; stroke: rgba(255,255,255,0.4); pointer-events: none;
            }
            #srfDisputeDealMeta {
            display: none; align-items: center; gap: 0.6rem;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
            border-radius: 0.75rem; padding: 0.6rem 0.75rem; font-size: 0.76rem; color: rgba(255,255,255,0.5);
            }
            #srfDisputeDealMeta b { color: rgba(255,255,255,0.85); font-weight: 700; }
            #srfDisputeReason {
            width: 100%; min-height: 84px; resize: vertical;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 0.85rem; padding: 0.65rem 0.9rem; font-size: 0.85rem; color: #fff;
            font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.15s;
            }
            #srfDisputeReason:focus { border-color: rgba(251,146,60,0.5); }
            #srfDisputeReason::placeholder { color: rgba(255,255,255,0.22); }
            #srfDisputeCharCount { font-size: 0.68rem; color: rgba(255,255,255,0.3); text-align: right; margin-top: 0.25rem; }
            #srfDisputeError {
            display: none; font-size: 0.76rem; color: #fca5a5; background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.2); border-radius: 0.6rem; padding: 0.55rem 0.7rem;
            }
            #srfDisputeActions { display: flex; gap: 0.6rem; padding: 0 1.4rem 1.3rem; }
            .srf-dispute-btn {
            flex: 1; padding: 0.65rem 1rem; border-radius: 0.85rem;
            font-size: 0.85rem; font-weight: 700; cursor: pointer;
            border: none; font-family: inherit; transition: all 0.15s;
            display: flex; align-items: center; justify-content: center; gap: 0.4rem;
            }
            .srf-dispute-btn:disabled { opacity: 0.5; cursor: not-allowed; }
            .srf-dispute-btn.cancel {
            background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.08);
            }
            .srf-dispute-btn.cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
            .srf-dispute-btn.submit { background: #f97316; color: #fff; }
            .srf-dispute-btn.submit:hover:not(:disabled) { background: #ea6c0a; }
            .srf-dispute-btn.submit svg { width: 14px; height: 14px; animation: srfDisputeSpin 0.8s linear infinite; display: none; }
            .srf-dispute-btn.submit.is-loading svg { display: inline-block; }

/* ── extracted style block 17 (originally around char offset 1972262) ── */
#srfLightbox {
            position: fixed; inset: 0; z-index: 99999;
            display: none; align-items: center; justify-content: center;
            overflow: hidden;
            }
            #srfLightbox.active { display: flex; }
            #srfLbBackdrop {
            position: absolute; inset: 0;
            background: rgba(0,0,0,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
            }
            #srfLbClose {
            position: absolute; top: 18px; right: 18px; z-index: 2;
            width: 42px; height: 42px; border-radius: 50%;
            background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
            color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background .18s, transform .18s;
            }
            #srfLbClose:hover { background: rgba(255,255,255,.22); transform: scale(1.08); }
            #srfLbImgWrap {
            position: relative; z-index: 1;
            max-width: min(92vw, 1100px); max-height: 90vh;
            display: flex; align-items: center; justify-content: center;
            animation: srfLbIn .22s cubic-bezier(.22,.68,0,1.2) both;
            touch-action: none;
            }
            @keyframes srfLbIn {
            from { opacity:0; transform: scale(.88); }
            to   { opacity:1; transform: scale(1); }
            }
            #srfLbImg {
            max-width: 100%; max-height: 88vh;
            border-radius: 14px;
            box-shadow: 0 32px 80px rgba(0,0,0,.7);
            object-fit: contain; display: block;
            cursor: zoom-in;
            transform-origin: 0 0;
            will-change: transform;
            }
            #srfLbImg.zoomed { cursor: grab; }
            #srfLbImg.zoomed.dragging { cursor: grabbing; }

/* ── extracted style block 18 (originally around char offset 1981272) ── */
#srfPlansOverlay {
         position: fixed; inset: 0; z-index: 9998;
         background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
         display: none; align-items: center; justify-content: center;
         padding: 1rem; font-family: 'Inter', sans-serif;
      }
      #srfPlansOverlay.active { display: flex; }
      .srf-plans-modal {
         width: 100%; max-width: 480px; max-height: 92vh;
         background: #111116; border: 1px solid rgba(255,255,255,0.22); border-radius: 28px;
         display: flex; flex-direction: column; overflow: hidden;
         box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.85), 0 0 60px rgba(163,230,53,0.04);
         transform: scale(0.95) translateY(8px); opacity: 0;
         transition: transform 0.25s ease, opacity 0.25s ease;
      }
      #srfPlansOverlay.active .srf-plans-modal { transform: scale(1) translateY(0); opacity: 1; }
      .srf-plans-header {
         display: flex; align-items: center; justify-content: space-between;
         padding: 1.1rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
         background: #1a1a20;
      }
      .srf-plans-brand { display: flex; align-items: center; gap: 0.55rem; }
      .srf-plans-brand svg { width: 22px; height: 22px; stroke: #a3e635; fill: none; stroke-width: 2; }
      .srf-plans-brand h2 { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
      .srf-plans-close {
         background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
         color: #ccc; width: 30px; height: 30px; border-radius: 50%;
         display: flex; align-items: center; justify-content: center; cursor: pointer;
         transition: background 0.2s, color 0.2s;
      }
      .srf-plans-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
      .srf-plans-tabs {
         display: flex; gap: 0.3rem; margin: 0.9rem 1rem 0;
         background: #0e0e14; padding: 0.3rem; border-radius: 60px;
         border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
      }
      .srf-plan-tab {
         flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.4rem;
         border: none; background: transparent; border-radius: 50px;
         font-weight: 700; font-size: 0.76rem; color: #777; cursor: pointer;
         transition: all 0.25s ease; display: flex; align-items: center;
         justify-content: center; gap: 0.3rem; white-space: nowrap; font-family: inherit;
      }
      .srf-plan-tab.active { background: #fff; color: #000; }
      .srf-plan-chip {
         background: #a3e635; color: #000; font-size: 0.58rem; font-weight: 800;
         padding: 0.1rem 0.38rem; border-radius: 20px; letter-spacing: 0.3px;
      }
      .srf-plans-body { flex: 1; overflow-y: auto; padding: 1.4rem 1.5rem 0.5rem; }
      .srf-plan-name {
         font-size: 1.5rem; font-weight: 800; color: #fff;
         display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;
      }
      .srf-plan-price { font-size: 2.3rem; font-weight: 900; color: #fff; margin-bottom: 0.15rem; }
      .srf-plan-price small { font-size: 0.85rem; font-weight: 500; color: #999; }
      .srf-plan-desc { color: #999; font-size: 0.85rem; margin-bottom: 1.1rem; line-height: 1.4; }
      .srf-plan-pills { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
      .srf-plan-pill {
         font-size: 0.74rem; font-weight: 700; padding: 0.3rem 0.7rem;
         border-radius: 20px; border: 1px solid; white-space: nowrap;
      }
      .srf-plan-features { list-style: none; margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; }
      .srf-plan-features li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: #ddd; }
      .srf-plan-features li.is-dim { color: #555; }
      .srf-plan-features svg { width: 16px; height: 16px; flex-shrink: 0; }
      .srf-plans-footer { padding: 1rem 1.5rem 1.4rem; flex-shrink: 0; }
      .srf-current-banner {
         background: rgba(163,230,53,0.08); border: 1px solid rgba(163,230,53,0.25);
         color: #a3e635; font-size: 0.8rem; font-weight: 600; border-radius: 14px;
         padding: 0.7rem 0.9rem; text-align: center; margin-bottom: 0.9rem;
      }
      .srf-subscribe-cta {
         width: 100%; border: none; font-weight: 700; font-size: 0.9rem;
         padding: 0.85rem 1.6rem; border-radius: 50px; cursor: pointer;
         display: flex; align-items: center; justify-content: center; gap: 0.45rem;
         transition: filter 0.2s; font-family: inherit;
      }
      .srf-subscribe-cta:hover { filter: brightness(1.08); }
      #srfPlansPaypalContainer { margin-top: 0.85rem; min-height: 0; }
      .srf-plans-note { text-align: center; color: #555; font-size: 0.72rem; margin-top: 0.8rem; }
      .srf-plans-msg { font-size: 0.78rem; text-align: center; margin-top: 0.6rem; min-height: 1.1em; }
      .srf-plans-msg.err { color: #f87171; }
      .srf-plans-msg.ok { color: #a3e635; }

/* ── extracted style block 19 (originally around char offset 2022941) ── */
/* ── Transfer pill override — wider to fit label ── */
     #dcpOptTransfer.dcp-transfer-pill {
       background: rgba(163,230,53,0.08);
       border-color: rgba(163,230,53,0.35);
       color: #a3e635;
       font-weight: 700;
       letter-spacing: 0.01em;
     }
     #dcpOptTransfer.dcp-transfer-pill svg { stroke: #a3e635; }
     #dcpOptTransfer.dcp-transfer-pill:hover {
       background: rgba(163,230,53,0.15);
       border-color: #a3e635;
     }

     /* ── Modal overlay (full screen host) ── */
     #transferDealModal {
       display: none;
       position: fixed;
       inset: 0;
       z-index: 9999;
       background: #000000;
       color: #e0e0e0;
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       flex-direction: column;
       overflow: hidden;
     }
     #transferDealModal.tdm-open { display: flex; }
     #transferDealModal * { box-sizing: border-box; }

     /* header (kept from original — brand + cancel) */
     .tdm-header {
       position: sticky; top: 0; z-index: 10;
       background: #000; border-bottom: 1px solid #1a1a1a;
       padding: 1rem 1.25rem;
       display: flex; align-items: center; justify-content: space-between;
       flex-shrink: 0; gap: 0.75rem;
     }
     .tdm-brand { display: flex; align-items: center; gap: 0.5rem; }
     .tdm-brand svg { width: 22px; height: 22px; stroke: #a5b4fc; fill: none; stroke-width: 2; }
     .tdm-brand h2 { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -0.2px; white-space: nowrap; }
     .tdm-cancel-btn {
       background: #e74c3c; border: none; color: #fff;
       padding: 0.4rem 0.9rem; border-radius: 50px;
       font-weight: 700; font-size: 0.78rem; cursor: pointer;
       display: flex; align-items: center; gap: 0.3rem;
       font-family: inherit; transition: background 0.2s; white-space: nowrap;
     }
     .tdm-cancel-btn:hover { background: #ff4757; }
     .tdm-cancel-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }

     /* payment / escrow status banner (kept from original — real status, not static) */
     .tdm-warning-banner {
       display: none;
       background: #1e1b0a;
       border-bottom: 1px solid #4d3a0a;
       color: #eab308;
       padding: 0.7rem 1.2rem;
       text-align: center;
       font-weight: 500;
       font-size: 0.82rem;
       letter-spacing: 0.01em;
       flex-shrink: 0;
     }
     .tdm-warning-banner.active { display: block; }
     .tdm-warning-banner.tdm-status-funded,
     .tdm-warning-banner.tdm-status-delivered {
       background: #0a1a0f; border-bottom-color: #1f4d2a; color: #a3e635;
     }
     .tdm-warning-banner.tdm-status-disputed {
       background: #1a0a0a; border-bottom-color: #4d1a1a; color: #ef4444;
     }
     .tdm-warning-banner b { font-weight: 700; }

     /* GITHUB REPO CARD */
     #tdmGithubCard { flex-shrink: 0; padding: 0.9rem 1.2rem 0; }
     .tdm-gh-card {
       background: #0d0d0f; border: 1px solid #22252a; border-radius: 14px;
       padding: 0.9rem 1rem; color: #fff;
     }
     .tdm-gh-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
     .tdm-gh-repo-name { color: #fff; font-size: 0.85rem; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .tdm-gh-repo-name:hover { text-decoration: underline; }
     .tdm-gh-badge {
       font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
       border: 1px solid #333; border-radius: 4px; padding: 1px 6px; color: rgba(255,255,255,0.5);
       margin-left: auto; flex-shrink: 0;
     }
     .tdm-gh-change-btn {
       background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
       color: rgba(255,255,255,0.5); font-size: 0.68rem; font-weight: 600; padding: 3px 8px;
       cursor: pointer; font-family: inherit; flex-shrink: 0;
     }
     .tdm-gh-change-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
     .tdm-gh-status-row { margin-bottom: 8px; }
     .tdm-gh-status { font-size: 0.78rem; color: rgba(255,255,255,0.45); }
     .tdm-gh-status-pending { color: #eab308; }
     .tdm-gh-status-done { color: #a3e635; }
     .tdm-gh-invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
     .tdm-gh-input {
       flex: 1; min-width: 160px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
       border-radius: 9px; padding: 8px 11px; font-size: 0.8rem; color: #fff; font-family: inherit; outline: none;
     }
     .tdm-gh-input:focus { border-color: rgba(163,230,53,0.5); }
     .tdm-gh-invite-btn {
       background: #a3e635; border: none; border-radius: 9px; padding: 8px 14px;
       font-size: 0.78rem; font-weight: 700; color: #000; cursor: pointer; white-space: nowrap; font-family: inherit;
     }
     .tdm-gh-invite-btn:hover { filter: brightness(1.08); }
     .tdm-gh-invite-btn:disabled { opacity: 0.6; cursor: not-allowed; }
     .tdm-gh-invite-msg { font-size: 0.74rem; margin-top: 6px; color: rgba(255,255,255,0.45); }
     .tdm-gh-msg-success { color: #a3e635; }
     .tdm-gh-msg-error { color: #ef4444; }

     /* NAVIGATION (pasted model's tabs, restyled to fit dark host) */
     .tdm-checklist-nav {
       display: flex; justify-content: center; align-items: center;
       padding: 1rem 0.8rem; gap: 0.4rem;
       border-bottom: 1px solid #1f1f1f;
       background: #000;
       flex-shrink: 0;
     }
     .tdm-checklist-nav .tdm-nav-btn {
       background: #0a0a0a; border: 1px solid #1f1f1f; color: #888;
       padding: 0.6rem 1.1rem; border-radius: 2rem;
       font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
       letter-spacing: 0.07em; cursor: pointer; transition: all 0.2s ease;
       white-space: nowrap; font-family: inherit;
     }
     .tdm-checklist-nav .tdm-nav-btn:hover { border-color: #555; color: #ccc; background: #141414; }
     .tdm-checklist-nav .tdm-nav-btn.active { background: #fff; color: #000; border-color: #fff; font-weight: 700; }

     /* body / scroll area */
     .tdm-checklist-main {
       flex: 1 1 auto;
       min-height: 0; /* required so this flex child scrolls instead of
                          growing to fit content and overflowing the parent,
                          which is what made items below the fold unreachable */
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       padding: 1.2rem 0.9rem 6.5rem; /* bottom padding clears the floating CTA */
       width: 100%; max-width: 700px; margin: 0 auto;
     }

     .tdm-checklist-container { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
     @media (min-width: 600px) {
       .tdm-checklist-container { flex-direction: row; gap: 1.5rem; }
       .tdm-checklist-column { flex: 1 1 50%; display: flex; flex-direction: column; gap: 0.6rem; }
     }

     .tdm-checklist-item {
       display: flex; align-items: center; gap: 0.8rem;
       padding: 0.75rem 1rem; background: #0a0a0a; border: 1px solid #1f1f1f;
       border-radius: 0.75rem; transition: all 0.2s ease; cursor: pointer; position: relative;
     }
     .tdm-checklist-item:hover { border-color: #444; background: #0f0f0f; transform: translateY(-1px); }
     .tdm-checklist-item.tdm-completed { border-color: #22c55e; background: #0a1a0f; }
     .tdm-checklist-item.tdm-completed .tdm-item-label { color: #aaa; }
     .tdm-checklist-item.tdm-completed .tdm-icon-wrapper svg { stroke: #22c55e !important; }

     .tdm-icon-wrapper { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
     .tdm-icon-wrapper svg { width: 100%; height: 100%; fill: none; stroke-width: 1.8; transition: filter 0.2s; }
     .tdm-checklist-item:hover .tdm-icon-wrapper svg { filter: brightness(1.25) drop-shadow(0 0 4px currentColor); }

     .tdm-item-label { font-size: 0.85rem; font-weight: 450; color: #ccc; flex: 1; }

     .tdm-arrow-wrapper { width: 1.2rem; height: 1.2rem; }
     .tdm-arrow-wrapper svg { width: 100%; height: 100%; stroke: #666; stroke-width: 3; fill: none; }
     .tdm-checklist-item:hover .tdm-arrow-wrapper svg { stroke: #ffffff; }

     .tdm-checkmark-icon {
       display: none; width: 1.4rem; height: 1.4rem; flex-shrink: 0; margin-left: auto;
       stroke: #22c55e; fill: none; stroke-width: 2.5;
     }
     .tdm-checklist-item.tdm-completed .tdm-checkmark-icon { display: block; }
     .tdm-checklist-item.tdm-completed .tdm-arrow-wrapper { display: none; }

     /* item modal (per-checklist-item) */
     .tdm-item-modal-overlay {
       display: none; position: fixed; inset: 0;
       background: rgba(0,0,0,0.85); z-index: 10010;
       justify-content: center; align-items: center; padding: 1rem;
     }
     .tdm-item-modal-overlay.active { display: flex; }
     .tdm-item-modal {
       background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 1.5rem;
       max-width: 500px; width: 100%; max-height: 80vh; overflow-y: auto;
       padding: 1.8rem; color: #ddd; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
     }
     .tdm-item-modal h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0; color: #fff; }

     /* per-type themed head */
     .tdm-modal-theme-head {
       display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem;
     }
     .tdm-modal-theme-icon {
       width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 0.7rem;
       display: flex; align-items: center; justify-content: center;
       background: color-mix(in srgb, var(--tdm-accent, #a3e635) 15%, transparent);
       color: var(--tdm-accent, #a3e635);
       border: 1px solid color-mix(in srgb, var(--tdm-accent, #a3e635) 35%, transparent);
     }
     .tdm-modal-theme-icon svg { width: 1.3rem; height: 1.3rem; }
     .tdm-modal-theme-kicker {
       font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
       color: var(--tdm-accent, #a3e635); margin-bottom: 0.15rem;
     }
     .tdm-modal-blurb { color: #999; font-size: 0.85rem; line-height: 1.4; margin-bottom: 1.2rem; }

     .tdm-item-modal .tdm-buyer-email {
       background: #1a1a1a; border: 1px solid #333; padding: 0.6rem 1rem; border-radius: 0.5rem;
       display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem;
     }
     .tdm-item-modal .tdm-buyer-email span { font-family: monospace; color: #aaa; word-break: break-all; }
     .tdm-item-modal .tdm-copy-btn {
       background: #333; border: none; color: #fff; padding: 0.3rem 0.8rem;
       border-radius: 0.3rem; cursor: pointer; font-size: 0.8rem; font-family: inherit;
     }
     .tdm-item-modal .tdm-copy-btn:hover { background: #555; }

     .tdm-dropzone {
       border: 2px dashed #2a2a2a; border-radius: 0.75rem; padding: 2rem 1rem;
       text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
       margin-bottom: 1rem; background: #060606;
     }
     .tdm-dropzone:hover, .tdm-dropzone.tdm-dragover { border-color: var(--tdm-accent, #aaa); background: #111; }
     .tdm-dropzone p { color: #777; margin: 0; }
     .tdm-dropzone .tdm-file-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; justify-content: center; }
     .tdm-file-chip {
       position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
       background: #1a1a1a; padding: 0.25rem 1.6rem 0.25rem 0.7rem; border-radius: 0.3rem;
       font-size: 0.8rem; color: #ccc; border: 1px solid #333;
     }
     .tdm-file-chip-remove {
       position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
       background: none; border: none; color: #888; cursor: pointer; font-size: 0.75rem;
       padding: 0; line-height: 1; font-family: inherit;
     }
     .tdm-file-chip-remove:hover { color: #f87171; }
     .tdm-file-thumb {
       position: relative; width: 4.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
     }
     .tdm-file-thumb img {
       width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 0.5rem;
       border: 1px solid #333; background: #111;
     }
     .tdm-file-thumb span {
       font-size: 0.65rem; color: #999; max-width: 4.5rem; overflow: hidden;
       text-overflow: ellipsis; white-space: nowrap;
     }
     .tdm-file-thumb-remove {
       position: absolute; top: -0.4rem; right: -0.4rem; width: 1.2rem; height: 1.2rem;
       border-radius: 50%; background: #1a1a1a; border: 1px solid #444; color: #ccc;
       cursor: pointer; font-size: 0.65rem; line-height: 1; display: flex; align-items: center; justify-content: center;
       font-family: inherit; padding: 0;
     }
     .tdm-file-thumb-remove:hover { background: #f87171; color: #000; border-color: #f87171; }

     .tdm-item-modal input[type="text"],
     .tdm-item-modal input[type="email"],
     .tdm-item-modal input[type="password"] {
       background: #1a1a1a; border: 1px solid #333; color: #eee;
       padding: 0.6rem; border-radius: 0.5rem; width: 100%; margin-bottom: 0.8rem; font-family: inherit;
     }


     .tdm-login-toggle {
       color: #888; text-decoration: underline; cursor: pointer; font-size: 0.85rem;
       display: inline-block; margin-bottom: 0.5rem;
     }
     .tdm-login-toggle:hover { color: #fff; }
     .tdm-login-form {
       display: none; background: #111; border: 1px solid #2a2a2a; border-radius: 0.75rem;
       padding: 1rem; margin-bottom: 1rem;
     }
     .tdm-login-form.active { display: block; }
     .tdm-login-form label { display: block; margin-bottom: 0.3rem; font-weight: 500; }

     .tdm-btn-group { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.5rem; flex-wrap: wrap; }
     .tdm-btn { padding: 0.6rem 1.4rem; border-radius: 2rem; border: none; cursor: pointer; font-weight: 500; font-size: 0.85rem; font-family: inherit; }
     .tdm-btn-done { background: #fff; color: #000; }
     .tdm-btn-done:hover { background: #e0e0e0; }
     .tdm-btn-done:disabled { opacity: 0.5; cursor: not-allowed; }
     .tdm-btn-cancel { background: transparent; border: 1px solid #444; color: #aaa; }
     .tdm-btn-cancel:hover { background: #1a1a1a; color: #fff; }
     .tdm-btn-login-submit { background: #4f46e5; color: #fff; margin-top: 0.5rem; }
     .tdm-btn-login-submit:hover { background: #4338ca; }

     /* floating cta */
     .tdm-floating-cta {
       position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
       z-index: 50; width: 92%; max-width: 640px;
       background: #2a2a2a; border: 1px solid #444; color: #666;
       padding: 0.9rem 2.5rem; border-radius: 3rem; font-size: 0.95rem; font-weight: 600;
       letter-spacing: 0.06em; cursor: not-allowed; pointer-events: auto;
       transition: all 0.3s ease; text-transform: uppercase; text-align: center;
       font-family: inherit;
     }
     .tdm-floating-cta.tdm-enabled {
       background: #ffffff; color: #000000; border-color: #ffffff;
       box-shadow: 0 10px 30px rgba(255,255,255,0.2); cursor: pointer; pointer-events: auto;
     }
     .tdm-floating-cta.tdm-finalized {
       background: #22c55e; border-color: #22c55e; color: #000;
       pointer-events: auto; cursor: default; box-shadow: 0 10px 30px rgba(34,197,94,0.3);
     }

     /* preview sheet */
     .tdm-preview-overlay {
       display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
       z-index: 10010; justify-content: flex-end; align-items: flex-end;
     }
     .tdm-preview-overlay.active { display: flex; }
     .tdm-preview-sheet {
       background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 1.5rem 1.5rem 0 0;
       width: 100%; max-width: 500px; max-height: 70vh; overflow-y: auto;
       padding: 1.5rem; color: #ddd; box-shadow: 0 -10px 40px rgba(0,0,0,0.9); margin: 0 auto;
     }
     .tdm-preview-sheet h3 { font-size: 1.1rem; margin-bottom: 1rem; color: #fff; }
     .tdm-preview-item {
       display: flex; align-items: center; justify-content: space-between;
       padding: 0.7rem 1rem; background: #111; border: 1px solid #2a2a2a;
       border-radius: 0.6rem; margin-bottom: 0.5rem;
     }
     .tdm-preview-item span { font-size: 0.9rem; color: #ccc; }
     .tdm-remove-btn {
       background: transparent; border: 1px solid #444; color: #888; border-radius: 50%;
       width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center;
       cursor: pointer; transition: all 0.2s; font-family: inherit;
     }
     .tdm-remove-btn:hover { border-color: #f87171; color: #f87171; background: #1a1010; }
     .tdm-confirm-btn {
       background: #ffffff; color: #000000; border: none; padding: 0.8rem 2rem;
       border-radius: 2rem; font-weight: 600; margin-top: 1.2rem; width: 100%; cursor: pointer;
       font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit;
     }
     .tdm-confirm-btn:hover { background: #e0e0e0; }

/* ── extracted style block 20 (originally around char offset 2094717) ── */
#logoutModalOverlay {
       display: none; position: fixed; inset: 0; z-index: 10050;
       background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
       justify-content: center; align-items: center; padding: 1.25rem;
       opacity: 0; transition: opacity 0.18s ease;
     }
     #logoutModalOverlay.visible { display: flex; opacity: 1; }
     #logoutModalBox {
       width: 100%; max-width: 340px;
       background: linear-gradient(180deg, #0d0f0a 0%, #090a07 100%);
       border: 1px solid rgba(163,230,53,0.18);
       border-radius: 1.4rem;
       padding: 1.75rem 1.5rem 1.4rem;
       text-align: center;
       box-shadow: 0 30px 60px -15px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.02);
       transform: scale(0.94) translateY(6px);
       transition: transform 0.2s cubic-bezier(.2,.9,.3,1.2);
     }
     #logoutModalOverlay.visible #logoutModalBox { transform: scale(1) translateY(0); }
     #logoutModalIconWrap {
       width: 3.6rem; height: 3.6rem; margin: 0 auto 1.1rem;
       border-radius: 1rem;
       background: radial-gradient(circle at 30% 30%, rgba(163,230,53,0.18), rgba(163,230,53,0.05));
       border: 1px solid rgba(163,230,53,0.3);
       display: flex; align-items: center; justify-content: center;
       position: relative;
     }
     #logoutModalIconWrap::after {
       content: ''; position: absolute; inset: -6px; border-radius: 1.3rem;
       border: 1px solid rgba(163,230,53,0.12); pointer-events: none;
     }
     #logoutModalIconWrap svg { width: 1.7rem; height: 1.7rem; stroke: #a3e635; fill: none; stroke-width: 1.8; }
     #logoutModalTitle { font-size: 1.08rem; font-weight: 800; color: #fff; letter-spacing: -0.2px; margin-bottom: 0.45rem; }
     #logoutModalMsg { font-size: 0.85rem; line-height: 1.5; color: #8a9482; margin-bottom: 1.5rem; }
     #logoutModalMsg b { color: #c2d9a0; font-weight: 600; }
     .logout-modal-actions { display: flex; flex-direction: column; gap: 0.6rem; }
     .logout-modal-btn {
       width: 100%; padding: 0.85rem 1rem; border-radius: 0.9rem;
       font-size: 0.88rem; font-weight: 700; cursor: pointer; border: none;
       font-family: inherit; transition: all 0.15s; display: flex; align-items: center;
       justify-content: center; gap: 0.5rem;
     }
     .logout-modal-btn.confirm {
       background: #a3e635; color: #0a1005;
     }
     .logout-modal-btn.confirm:hover { background: #bef264; }
     .logout-modal-btn.confirm:active { transform: scale(0.98); }
     .logout-modal-btn.confirm svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2.2; }
     .logout-modal-btn.cancel {
       background: transparent; color: #9ca38f; border: 1px solid rgba(255,255,255,0.08);
     }
     .logout-modal-btn.cancel:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* ── extracted style block 21 (originally around char offset 2112727) ── */
#shareModalOverlay {
       display: none; position: fixed; inset: 0; z-index: 10060;
       background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
       justify-content: center; align-items: center; padding: 1.25rem;
       opacity: 0; transition: opacity 0.18s ease;
     }
     #shareModalOverlay.visible { display: flex; opacity: 1; }
     #shareModalBox {
       width: 100%; max-width: 400px;
       background: linear-gradient(180deg, #0d0f0a 0%, #090a07 100%);
       border: 1px solid rgba(163,230,53,0.18);
       border-radius: 1.4rem;
       padding: 1.5rem 1.4rem 1.4rem;
       box-shadow: 0 30px 60px -15px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.02);
       transform: scale(0.94) translateY(6px);
       transition: transform 0.2s cubic-bezier(.2,.9,.3,1.2);
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     }
     #shareModalOverlay.visible #shareModalBox { transform: scale(1) translateY(0); }
     .share-modal-hdr { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; }
     .share-modal-icon {
       width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 0.8rem;
       background: radial-gradient(circle at 30% 30%, rgba(163,230,53,0.18), rgba(163,230,53,0.05));
       border: 1px solid rgba(163,230,53,0.3);
       display: flex; align-items: center; justify-content: center;
     }
     .share-modal-icon svg { width: 1.3rem; height: 1.3rem; stroke: #a3e635; fill: none; stroke-width: 2; }
     .share-modal-title { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
     .share-modal-sub { font-size: 0.75rem; color: #8a9482; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
     .share-modal-close {
       margin-left: auto; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
       background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
       color: #999; display: flex; align-items: center; justify-content: center; cursor: pointer;
     }
     .share-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
     .share-modal-close svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }

     /* ── Grid of recognizable share destinations ── */
     .share-grid {
       display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem 0.4rem;
       margin-bottom: 1.2rem;
     }
     .share-grid-item {
       display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
       background: none; border: none; cursor: pointer; font-family: inherit;
       padding: 0.2rem 0; transition: transform 0.12s ease;
     }
     .share-grid-item:hover { transform: translateY(-2px); }
     .share-grid-item:active { transform: translateY(0); }
     .share-grid-icon {
       width: 3rem; height: 3rem; border-radius: 50%;
       display: flex; align-items: center; justify-content: center;
       box-shadow: 0 4px 14px rgba(0,0,0,0.35);
     }
     .share-grid-icon svg { width: 1.4rem; height: 1.4rem; }
     .share-grid-label { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.65); }

     .share-divider {
       display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem;
       font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
       color: rgba(255,255,255,0.3);
     }
     .share-divider::before, .share-divider::after {
       content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
     }

     .share-link-row {
       display: flex; align-items: center; gap: 0.5rem;
       background: #0e0e14; border: 1px solid rgba(255,255,255,0.1);
       border-radius: 0.8rem; padding: 0.7rem 0.8rem; margin-bottom: 0.2rem;
     }
     .share-link-text {
       flex: 1; min-width: 0; font-size: 0.78rem; color: #ccc; font-family: monospace;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
     .share-copy-btn {
       flex-shrink: 0; background: #a3e635; color: #0a1005; border: none;
       padding: 0.45rem 0.9rem; border-radius: 0.6rem; font-size: 0.75rem; font-weight: 700;
       cursor: pointer; font-family: inherit; transition: background 0.15s; display: flex; align-items: center; gap: 0.3rem;
     }
     .share-copy-btn:hover { background: #bef264; }
     .share-copy-btn.copied { background: #4ade80; }
     .share-copy-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* ── extracted style block 22 (originally around char offset 2129400) ── */
#srfReportOverlay {
            position: fixed; inset: 0; z-index: 10070;
            background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            display: none; align-items: center; justify-content: center;
            padding: 1rem; font-family: inherit;
            }
            #srfReportOverlay.visible { display: flex; }
            #srfReportBox {
            width: 100%; max-width: 400px; max-height: 88vh;
            background: #111116; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 1.4rem; overflow: hidden; display: flex; flex-direction: column;
            box-shadow: 0 32px 80px rgba(0,0,0,0.7);
            transform: scale(0.95) translateY(8px); opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
            }
            #srfReportOverlay.visible #srfReportBox { transform: scale(1) translateY(0); opacity: 1; }
            #srfReportHeader {
            display: flex; align-items: center; gap: 0.7rem;
            padding: 1.3rem 1.4rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
            }
            #srfReportIcon {
            width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; flex-shrink: 0;
            background: rgba(239,68,68,0.12); display: flex; align-items: center; justify-content: center;
            }
            #srfReportIcon svg { width: 1.1rem; height: 1.1rem; stroke: #f87171; }
            #srfReportTitle { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
            .srf-report-sub { font-size: 0.76rem; color: rgba(255,255,255,0.42); margin-top: 0.1rem; max-width: 260px; }
            #srfReportClose {
            margin-left: auto; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
            display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.55);
            }
            #srfReportClose:hover { background: rgba(255,255,255,0.12); color: #fff; }
            #srfReportClose svg { width: 13px; height: 13px; }
            #srfReportBody { padding: 1.1rem 1.4rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 0.9rem; }
            .srf-report-label {
            font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
            color: rgba(255,255,255,0.4); margin-bottom: 0.5rem; display: block;
            }
            #srfReportReasons { display: flex; flex-direction: column; gap: 0.5rem; }
            .srf-report-reason {
            display: flex; align-items: center; gap: 0.6rem;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 0.75rem; padding: 0.6rem 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s;
            }
            .srf-report-reason:hover { background: rgba(255,255,255,0.07); }
            .srf-report-reason.checked { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }
            .srf-report-reason input { accent-color: #ef4444; width: 15px; height: 15px; flex-shrink: 0; }
            .srf-report-reason span { font-size: 0.83rem; color: rgba(255,255,255,0.85); }
            #srfReportDetails {
            width: 100%; min-height: 70px; resize: vertical;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 0.85rem; padding: 0.65rem 0.9rem; font-size: 0.85rem; color: #fff;
            font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.15s;
            }
            #srfReportDetails:focus { border-color: rgba(239,68,68,0.5); }
            #srfReportDetails::placeholder { color: rgba(255,255,255,0.22); }
            #srfReportError {
            display: none; font-size: 0.76rem; color: #fca5a5; background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.2); border-radius: 0.6rem; padding: 0.55rem 0.7rem;
            }
            #srfReportSuccess {
            display: none; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.4rem 0.5rem;
            }
            #srfReportSuccess svg { width: 34px; height: 34px; stroke: #a3e635; }
            #srfReportSuccessTitle { font-size: 0.92rem; font-weight: 800; color: #fff; }
            #srfReportSuccessMsg { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.5; max-width: 280px; }
            #srfReportActions { display: flex; gap: 0.6rem; padding: 0 1.4rem 1.3rem; }
            .srf-report-btn {
            flex: 1; padding: 0.65rem 1rem; border-radius: 0.85rem;
            font-size: 0.85rem; font-weight: 700; cursor: pointer;
            border: none; font-family: inherit; transition: all 0.15s;
            display: flex; align-items: center; justify-content: center; gap: 0.4rem;
            }
            .srf-report-btn:disabled { opacity: 0.5; cursor: not-allowed; }
            .srf-report-btn.cancel { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.08); }
            .srf-report-btn.cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
            .srf-report-btn.submit { background: #ef4444; color: #fff; }
            .srf-report-btn.submit:hover:not(:disabled) { background: #dc2626; }
            .srf-report-btn.submit svg { width: 14px; height: 14px; animation: srfDisputeSpin 0.8s linear infinite; display: none; }
            .srf-report-btn.submit.is-loading svg { display: inline-block; }

/* ── extracted style block 23 (originally around char offset 2145354) ── */
#boostOverlay {
         position: fixed; inset: 0; z-index: 99999;
         background: rgba(0,0,0,0.82);
         backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
         display: none; align-items: center; justify-content: center;
         padding: 20px; font-family: inherit;
         opacity: 0; transition: opacity 0.22s ease;
      }
      #boostOverlay.visible { opacity: 1; }
      #boostCard {
         position: relative;
         width: 100%; max-width: 480px; max-height: 90vh;
         display: flex; flex-direction: column;
         overflow: hidden;
         background: radial-gradient(120% 100% at 50% 0%, rgba(124,58,237,0.16) 0%, rgba(0,0,0,0) 55%), #060606;
         border: 1px solid #2a2a2a;
         border-radius: 1.6rem;
         transform: scale(0.94) translateY(8px);
         transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
         box-shadow: 0 30px 80px -20px rgba(124,58,237,0.35), 0 10px 40px -10px rgba(0,0,0,0.6);
      }
      #boostOverlay.visible #boostCard { transform: scale(1) translateY(0); }

      /* ── Sticky header: stays pinned while body scrolls ── */
      .boost-sticky-header {
         position: sticky; top: 0; z-index: 5;
         display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
         background: rgba(6,6,6,0.92);
         backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
         border-bottom: 1px solid #1e1e1e;
         padding: 1.1rem 1.1rem 1.1rem 1.25rem;
         flex-shrink: 0;
      }
      .boost-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
      .boost-header-text h2 {
         font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 2px;
         letter-spacing: -0.01em; white-space: nowrap;
      }
      .boost-header-text p {
         font-size: 0.72rem; color: #8a8a8a; margin: 0; line-height: 1.3;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }

      .boost-body {
         overflow-y: auto;
         padding: 1.25rem 1.5rem 1.5rem;
      }
      .boost-body::-webkit-scrollbar { width: 6px; }
      .boost-body::-webkit-scrollbar-thumb { background: #333; border-radius: 100px; }

      #boostCloseBtn {
         width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
         background: #141416; border: 1px solid #27272a; color: #a1a1aa;
         display: flex; align-items: center; justify-content: center;
         cursor: pointer; transition: 0.2s;
      }
      #boostCloseBtn:hover { background: #1f1f23; border-color: #3f3f46; color: #fff; }
      #boostCloseBtn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.5; fill: none; }

      .boost-icon-badge {
         width: 40px; height: 40px; flex-shrink: 0;
         border-radius: 50%;
         background: linear-gradient(135deg, #7c3aed, #a855f7);
         display: flex; align-items: center; justify-content: center;
         box-shadow: 0 6px 20px -5px rgba(168,85,247,0.6);
      }
      .boost-icon-badge svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2.2; }
      .boost-listing-chip {
         display: flex; align-items: center; gap: 0.6rem;
         background: #0d0d0d; border: 1px solid #262626; border-radius: 1rem;
         padding: 0.6rem 0.75rem; margin-bottom: 1.3rem;
      }
      .boost-listing-chip img, .boost-listing-chip .ph {
         width: 38px; height: 38px; border-radius: 0.6rem; object-fit: cover;
         background: #1a1a1a; flex-shrink: 0;
      }
      .boost-listing-chip .ph { display:flex; align-items:center; justify-content:center; }
      .boost-listing-chip .ph svg { width:16px; height:16px; stroke:#444; fill:none; stroke-width:1.5; }
      .boost-listing-title {
         font-size: 0.8rem; font-weight: 700; color: #eee;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .boost-listing-sub { font-size: 0.68rem; color: #666; }

      .boost-plans {
         display: flex; flex-direction: column; gap: 0.6rem;
         margin-bottom: 1.3rem;
      }
      .boost-plan {
         position: relative;
         display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
         background: #0a0a0a; border: 1.5px solid #262626; border-radius: 1.1rem;
         padding: 0.85rem 1rem;
         cursor: pointer; transition: 0.15s;
      }
      .boost-plan:hover { border-color: #3f3f46; background: #0f0f0f; }
      .boost-plan.selected {
         border-color: #a855f7;
         background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(168,85,247,0.06));
         box-shadow: 0 0 0 1px rgba(168,85,247,0.35);
      }
      .boost-plan-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
      .boost-plan-radio {
         width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
         border: 2px solid #3a3a3a; display: flex; align-items: center; justify-content: center;
         transition: 0.15s;
      }
      .boost-plan.selected .boost-plan-radio { border-color: #a855f7; }
      .boost-plan-radio::after {
         content: ''; width: 8px; height: 8px; border-radius: 50%; background: #a855f7;
         transform: scale(0); transition: 0.15s;
      }
      .boost-plan.selected .boost-plan-radio::after { transform: scale(1); }
      .boost-plan-duration { font-size: 0.92rem; font-weight: 800; color: #fff; line-height: 1.1; }
      .boost-plan-perday { font-size: 0.68rem; color: #777; margin-top: 2px; }
      .boost-plan-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
      .boost-plan-price { font-size: 1rem; font-weight: 800; color: #fff; }
      .boost-plan-badge {
         font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em;
         padding: 3px 8px; border-radius: 100px; white-space: nowrap;
      }
      .boost-plan-badge.best {
         background: rgba(163,230,53,0.14); color: #a3e635; border: 1px solid rgba(163,230,53,0.3);
      }
      .boost-plan-badge.popular {
         background: rgba(168,85,247,0.14); color: #c084fc; border: 1px solid rgba(168,85,247,0.3);
      }

      .boost-submit {
         position: relative;
         width: 100%;
         display: flex; align-items: center; justify-content: center; gap: 0.5rem;
         background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #6d28d9 100%);
         border: 1px solid #8b5cf6;
         color: #ffffff; font-family: inherit; font-size: 0.85rem; font-weight: 800;
         letter-spacing: 0.02em;
         padding: 0.9rem 1rem; border-radius: 100px; cursor: pointer;
         overflow: hidden;
         box-shadow: 0 8px 26px -6px rgba(124,58,237,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
         transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
      }
      .boost-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -6px rgba(124,58,237,0.75), inset 0 1px 0 rgba(255,255,255,0.16); }
      .boost-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
      /* Premium sheen: a single soft diagonal band of light sweeps across the
         fixed dark-purple base — unlike a hue-cycling gradient, the base color
         never passes through a pale tone, so white text stays legible at every
         frame instead of the old animation washing out mid-cycle. */
      .boost-submit::before {
         content: "";
         position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
         background: linear-gradient(75deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.16) 45%,
            rgba(255,255,255,0.38) 50%,
            rgba(255,255,255,0.16) 55%,
            rgba(255,255,255,0) 100%);
         transform: skewX(-20deg);
         animation: boostSheen 2.8s ease-in-out infinite;
         pointer-events: none;
      }
      .boost-submit span, .boost-submit svg { position: relative; z-index: 1; }
      .boost-submit svg { width: 15px; height: 15px; flex-shrink: 0; }
      @keyframes boostSheen {
         0%   { left: -60%; }
         45%  { left: 130%; }
         100% { left: 130%; }
      }

      .boost-fineprint {
         text-align: center; font-size: 0.68rem; color: #555; margin-top: 0.8rem; line-height: 1.4;
      }
      .boost-wallet-hint {
         display: flex; align-items: center; justify-content: center; gap: 0.35rem;
         font-size: 0.72rem; color: #777; margin-top: 0.7rem;
      }
      .boost-wallet-hint svg { width: 13px; height: 13px; stroke: #666; fill: none; stroke-width: 2; }
      .boost-wallet-hint b { color: #a3e635; font-weight: 700; }

      @media (max-width: 400px) {
         .boost-sticky-header { padding: 0.95rem 0.9rem 0.95rem 1rem; }
         .boost-body { padding: 1.1rem 1.1rem 1.25rem; }
         .boost-plan { padding: 0.75rem 0.85rem; }
      }

/* ── extracted style block 24 (originally around char offset 2164632) ── */
#editListingOverlay {
         position: fixed; inset: 0; z-index: 10000;
         background: rgba(0,0,0,0.92);
         backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
         display: none; opacity: 0; transition: opacity 0.25s ease;
         font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      }
      #editListingOverlay.visible { opacity: 1; }
      #editListingPanel {
         position: absolute; inset: 0;
         display: flex; flex-direction: column;
         background: #060606;
         transform: translateY(14px); transition: transform 0.28s cubic-bezier(.2,.9,.25,1);
      }
      #editListingOverlay.visible #editListingPanel { transform: translateY(0); }

      .el-header {
         position: sticky; top: 0; z-index: 5; flex-shrink: 0;
         display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
         background: rgba(6,6,6,0.95);
         backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
         border-bottom: 1px solid #1c1c1c;
         padding: 1.1rem 1.25rem;
      }
      .el-header-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
      .el-type-badge {
         width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
         display: flex; align-items: center; justify-content: center;
         background: linear-gradient(135deg, #d4af37, #f4d976 50%, #b8860b);
         box-shadow: 0 6px 22px -6px rgba(212,175,55,0.55);
      }
      .el-type-badge svg { width: 20px; height: 20px; stroke: #0a0a0a; fill: none; stroke-width: 2.2; }
      .el-header-text h2 {
         font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0 0 2px; letter-spacing: -0.01em;
      }
      .el-header-text p { font-size: 0.74rem; color: #888; margin: 0; }
      .el-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
      .el-icon-btn {
         width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
         background: #141416; border: 1px solid #27272a; color: #a1a1aa;
         display: flex; align-items: center; justify-content: center;
         cursor: pointer; transition: 0.2s;
      }
      .el-icon-btn:hover { background: #1f1f23; border-color: #3f3f46; color: #fff; }
      .el-icon-btn.danger:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); color: #f87171; }
      .el-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }

      .el-body {
         flex: 1; overflow-y: auto;
         padding: 1.5rem 1.25rem 8rem;
         max-width: 640px; width: 100%; margin: 0 auto;
      }
      .el-body::-webkit-scrollbar { width: 6px; }
      .el-body::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 100px; }

      .el-section { margin-bottom: 1.75rem; }
      .el-section-title {
         font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
         color: #d4af37; margin: 0 0 0.85rem; display: flex; align-items: center; gap: 6px;
      }
      .el-section-title svg { width: 13px; height: 13px; stroke: #d4af37; fill: none; stroke-width: 2.3; }

      .el-field { margin-bottom: 0.9rem; }
      .el-field label {
         display: block; font-size: 0.72rem; font-weight: 700; color: #999;
         margin-bottom: 0.4rem; letter-spacing: 0.01em;
      }
      .el-field input[type="text"], .el-field input[type="url"], .el-field input[type="number"],
      .el-field textarea, .el-field select {
         width: 100%; background: #0d0d0d; border: 1.5px solid #262626; border-radius: 0.9rem;
         padding: 0.75rem 0.9rem; font-size: 0.88rem; color: #eee; font-family: inherit;
         transition: border-color 0.15s, background 0.15s; box-sizing: border-box;
      }
      .el-field input:focus, .el-field textarea:focus, .el-field select:focus {
         outline: none; border-color: #d4af37; background: #0f0f0d;
      }
      .el-field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
      .el-field select { appearance: none; -webkit-appearance: none;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
         background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 15px; padding-right: 2.2rem;
      }
      .el-hint { font-size: 0.68rem; color: #666; margin-top: 0.35rem; }
      .el-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
      .el-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
      @media (max-width: 480px) { .el-grid-3 { grid-template-columns: 1fr; } }

      .el-profit-box {
         background: #0a0a0a; border: 1.5px solid #262626; border-radius: 1rem;
         padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between;
         margin-top: 0.25rem;
      }
      .el-profit-label { font-size: 0.72rem; color: #888; font-weight: 700; }
      .el-profit-value { font-size: 1.1rem; font-weight: 800; color: #4ade80; }
      .el-profit-value.loss { color: #f87171; }

      .el-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
      .el-img-slot {
         aspect-ratio: 1; border-radius: 0.9rem; overflow: hidden; position: relative;
         background: #0d0d0d; border: 1.5px dashed #2a2a2a; cursor: pointer;
         display: flex; align-items: center; justify-content: center;
      }
      .el-img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .el-img-slot .el-img-ph { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #444; }
      .el-img-slot .el-img-ph svg { width: 20px; height: 20px; stroke: #444; fill: none; stroke-width: 1.6; }
      .el-img-slot .el-img-ph span { font-size: 0.6rem; font-weight: 600; }
      .el-img-slot .el-img-replace {
         position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: 0.15s;
         display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.62rem; font-weight: 700;
      }
      .el-img-slot:hover .el-img-replace { opacity: 1; }
      .el-img-slot input[type="file"] { display: none; }

      .el-transfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
      .el-transfer-cb {
         display: flex; align-items: center; gap: 8px;
         background: #0d0d0d; border: 1.5px solid #232323; border-radius: 0.75rem;
         padding: 0.6rem 0.75rem; font-size: 0.74rem; color: #ccc; cursor: pointer; transition: 0.15s;
      }
      .el-transfer-cb:has(input:checked) { border-color: #d4af37; background: rgba(212,175,55,0.08); color: #f0dfa0; }
      .el-transfer-cb input { accent-color: #d4af37; }
      .el-transfer-cb svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

      .el-footer {
         position: sticky; bottom: 0; z-index: 5; flex-shrink: 0;
         background: rgba(6,6,6,0.95);
         backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
         border-top: 1px solid #1c1c1c;
         padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
      }
      .el-footer-inner { max-width: 640px; margin: 0 auto; display: flex; gap: 0.7rem; }
      .el-save-btn {
         flex: 1; padding: 0.95rem; border: none; border-radius: 1rem;
         background: linear-gradient(135deg, #d4af37, #f4d976 50%, #b8860b);
         color: #0a0a0a; font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em;
         cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
         transition: transform 0.12s, box-shadow 0.15s;
         box-shadow: 0 8px 26px -8px rgba(212,175,55,0.55);
      }
      .el-save-btn:hover { transform: translateY(-1px); }
      .el-save-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
      .el-save-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
      .el-cancel-btn {
         padding: 0.95rem 1.1rem; border-radius: 1rem; background: #141416; border: 1px solid #27272a;
         color: #aaa; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: 0.15s;
      }
      .el-cancel-btn:hover { background: #1c1c1f; color: #fff; }

      .el-error {
         display: none; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
         color: #f87171; font-size: 0.78rem; font-weight: 600; padding: 0.7rem 0.9rem;
         border-radius: 0.75rem; margin-bottom: 1rem;
      }
      .el-success {
         display: none; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3);
         color: #4ade80; font-size: 0.8rem; font-weight: 700; padding: 0.75rem 0.9rem;
         border-radius: 0.75rem; margin-bottom: 1rem; align-items: center; gap: 8px;
      }
      .el-success svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }

      .el-loading { text-align: center; padding: 4rem 1rem; color: #555; font-size: 0.85rem; }
      .el-loading svg { width: 26px; height: 26px; stroke: #d4af37; animation: elSpin 0.8s linear infinite; margin-bottom: 0.75rem; }
      @keyframes elSpin { to { transform: rotate(360deg); } }

/* ── extracted style block 25 (originally around char offset 2204185) ── */
.fnav {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 25;
      display: none;
      align-items: center; justify-content: center;
      gap: 10px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      pointer-events: none;
      }
      @media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
      .fnav { display: flex; }
      body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
      }
      .fnav-pill {
      pointer-events: auto;
      display: flex; align-items: center;
      flex: 1;
      max-width: 420px;
      height: 58px;
      background: rgba(14,14,20,0.92);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 -1px 0 rgba(255,255,255,0.04);
      padding: 0 6px;
      }
      .fnav-btn {
      flex: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      height: 100%;
      background: none; border: none; cursor: pointer;
      color: rgba(255,255,255,0.45);
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.2s ease;
      }
      .fnav-btn:active { opacity: 0.65; }
      .fnav-icon { width: 20px; height: 20px; flex-shrink: 0; transition: filter 0.2s ease; }
      .fnav-label {
      font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
      white-space: nowrap;
      }
      .fnav-active { color: #a3e635; }
      .fnav-active .fnav-icon { filter: drop-shadow(0 0 6px rgba(163,230,53,0.5)); }
      .fnav-search {
      pointer-events: auto;
      flex-shrink: 0;
      width: 58px; height: 58px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(14,14,20,0.92);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 8px 28px rgba(0,0,0,0.45);
      color: rgba(255,255,255,0.85);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.18s, background 0.18s;
      }
      .fnav-search svg { width: 22px; height: 22px; }
      .fnav-search:active { transform: scale(0.92); background: rgba(30,30,38,0.95); }

/* ── extracted style block 26 (originally around char offset 2228752) ── */
.supp-theme-feedback { --supp-accent: #ff9f6b; --supp-accent-soft: rgba(255,159,107,.12); }

/* Floating launcher — bottom-right, unobtrusive, hides while any modal is open */
#fbLauncher {
  position: fixed; right: 18px; bottom: 88px; z-index: 9990;
  display: flex; align-items: center; gap: 8px;
  background: #101018; border: 1px solid rgba(255,255,255,.12);
  color: #f0f0f5; border-radius: 100px; padding: 11px 16px 11px 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: border-color .15s, background .15s, transform .15s, opacity .15s;
}
#fbLauncher:hover { border-color: var(--supp-accent, #ff9f6b); background: rgba(255,159,107,.1); }
#fbLauncher:active { transform: scale(.96); }
#fbLauncher svg { width: 16px; height: 16px; color: #ff9f6b; flex-shrink: 0; }
#fbLauncher.fb-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
/* Sits above the mobile tab bar if present; nudge up on small screens */
@media (max-width: 480px) { #fbLauncher { bottom: 78px; right: 14px; padding: 10px 14px 10px 12px; } }

/* Nudge bubble — small, dismissible, appears near the launcher, once/day */
#fbNudge {
  position: fixed; right: 18px; bottom: 140px; z-index: 9991;
  max-width: 240px; background: #15151d; border: 1px solid color-mix(in srgb, #ff9f6b 45%, transparent);
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.4);
  font-family: inherit; opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#fbNudge.fb-show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#fbNudge .fb-nudge-txt { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.5; margin-bottom: 8px; }
#fbNudge .fb-nudge-row { display: flex; gap: 8px; }
#fbNudge button { font-family: inherit; border: none; border-radius: 8px; cursor: pointer; font-size: 11.5px; font-weight: 700; padding: 7px 10px; }
#fbNudge .fb-nudge-yes { background: #ff9f6b; color: #08080d; flex: 1; }
#fbNudge .fb-nudge-no { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
@media (max-width: 480px) { #fbNudge { bottom: 130px; right: 14px; } }

/* Modal body specifics */
.fb-tabs { display: flex; gap: 6px; margin-bottom: 20px; background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 4px; }
.fb-tab {
  flex: 1; text-align: center; padding: 9px 8px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.5); font-family: inherit; border: none; background: none;
  transition: background .15s, color .15s;
}
.fb-tab.fb-active { background: var(--supp-accent-soft); color: var(--supp-accent); }

.fb-compose { display: flex; flex-direction: column; gap: 12px; }
.fb-textarea {
  background: #101018; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 13px 14px; font-size: 13.5px; color: #f0f0f5; font-family: inherit;
  resize: vertical; min-height: 96px; line-height: 1.5; transition: border-color .15s;
}
.fb-textarea:focus { outline: none; border-color: var(--supp-accent); }
.fb-char-count { font-size: 11px; color: rgba(255,255,255,.35); text-align: right; }
.fb-submit-btn {
  background: var(--supp-accent); color: #08080d; border: none; border-radius: 10px;
  padding: 13px; font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: opacity .15s;
}
.fb-submit-btn:hover { opacity: .88; }
.fb-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.fb-status { font-size: 12.5px; font-weight: 600; min-height: 18px; line-height: 1.4; }
.fb-status.ok  { color: #3ddc97; }
.fb-status.err { color: #ff6b6b; }

.fb-board { display: flex; flex-direction: column; gap: 8px; }
.fb-board-empty { font-size: 12.5px; color: rgba(255,255,255,.4); text-align: center; padding: 30px 0; }
.fb-board-item {
  display: flex; flex-direction: column; gap: 10px;
  background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px;
}
.fb-board-txt { font-size: 13px; color: #f0f0f5; line-height: 1.45; }
.fb-board-score-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-board-score { font-size: 11px; font-weight: 800; color: var(--supp-accent); }
.fb-board-score .fb-board-score-n { font-size: 13px; }
.fb-board-rank {
  font-size: 10px; font-weight: 800; color: #08080d; background: var(--supp-accent);
  border-radius: 100px; padding: 2px 8px; letter-spacing: .02em;
}

/* 4-way vote row */
.fb-vote-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fb-vote-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.75); border-radius: 9px; padding: 8px 4px; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.fb-vote-btn:hover { background: rgba(255,255,255,.09); }
.fb-vote-btn.fb-vote-selected {
  background: var(--supp-accent-soft); border-color: color-mix(in srgb, var(--supp-accent) 55%, transparent);
  color: var(--supp-accent);
}
.fb-vote-btn[data-score="-1"].fb-vote-selected { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.5); color: #ff6b6b; }
.fb-vote-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; text-align: center; }
.fb-vote-count { font-size: 12px; font-weight: 800; }

/* Countdown banner */
.fb-countdown {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--supp-accent) 14%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--supp-accent) 35%, transparent);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.fb-countdown-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.fb-countdown-clock { font-size: 18px; font-weight: 800; color: var(--supp-accent); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fb-countdown-clock span.fb-cd-unit { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.4); margin: 0 3px 0 1px; text-transform: uppercase; }
.fb-countdown-sub { font-size: 10.5px; color: rgba(255,255,255,.45); text-align: right; max-width: 130px; line-height: 1.35; }

/* Explanation box */
.fb-explainer {
  background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 15px; margin-bottom: 16px; font-size: 12.5px; color: rgba(255,255,255,.7); line-height: 1.6;
}
.fb-explainer-title { font-size: 11.5px; font-weight: 800; color: #f0f0f5; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.fb-explainer-title svg { width: 14px; height: 14px; color: var(--supp-accent); flex-shrink: 0; }
.fb-explainer ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.fb-explainer b { color: #f0f0f5; }
.fb-explainer-toggle {
  font-size: 11px; font-weight: 700; color: var(--supp-accent); background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 0; margin-top: 8px;
}
.fb-explainer.fb-explainer-collapsed ol { display: none; }

/* 3-way tab bar (was 2-way) */
.fb-tabs { grid-template-columns: repeat(3, 1fr); display: grid; }

/* Archive ("What We're Working On") */
.fb-archive-week-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.4); margin: 14px 0 8px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.06);
}
.fb-archive-week-label:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.fb-archive-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: #101018; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
}
.fb-archive-badge {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--supp-accent-soft);
  color: var(--supp-accent); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.fb-archive-txt { flex: 1; font-size: 13px; color: #f0f0f5; line-height: 1.45; }
.fb-archive-score { font-size: 10.5px; color: rgba(255,255,255,.4); margin-top: 3px; }

.fb-board-skel { height: 48px; border-radius: 10px; background: linear-gradient(90deg, #101018 0%, #16161f 50%, #101018 100%); background-size: 200% 100%; animation: fbSkelShine 1.4s ease-in-out infinite; }
@keyframes fbSkelShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Seller Dashboard modal (#dashboardModal) — scoped 'sd-' prefix ── */
#dashboardModal, #dashboardModal *, #dashboardModal *::before, #dashboardModal *::after { box-sizing: border-box; }
#dashboardModal { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #f1f1f3; }
.sd-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 20px 40px; }

.sd-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; gap: 12px; background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sd-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.sd-brand-name { display: inline-flex; align-items: baseline; }
.sd-brand span { color: rgba(163,230,53,0.6); }
.sd-brand svg { width: 28px; height: 28px; stroke: var(--mp-accent, #a3e635); fill: none; stroke-width: 2; }
.sd-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-icon-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.5); transition: all 0.18s ease; }
.sd-icon-btn:hover { background: var(--mp-accent-muted, rgba(163,230,53,0.15)); border-color: var(--mp-accent-border, rgba(163,230,53,0.3)); color: var(--mp-accent, #a3e635); }
.sd-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Date filter trigger (full width, opens modal) ── */
.sd-date-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; padding: 13px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; cursor: pointer; font-family: inherit; transition: all 0.18s ease; }
.sd-date-trigger:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.sd-date-trigger-left { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 700; }
.sd-date-trigger-left svg { width: 18px; height: 18px; stroke: var(--mp-accent, #a3e635); fill: none; stroke-width: 2; flex-shrink: 0; }
.sd-date-trigger-left strong { color: #fff; font-weight: 800; }
.sd-date-trigger-sub { color: rgba(255,255,255,0.4); font-weight: 600; font-size: 12.5px; margin-left: 4px; }
.sd-date-trigger-chevron { width: 18px; height: 18px; stroke: rgba(255,255,255,0.35); fill: none; stroke-width: 2.2; flex-shrink: 0; }

.sd-date-modal-card { max-width: 480px; }
.sd-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.sd-range-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-family: inherit; transition: all 0.15s ease; text-align: left; }
.sd-range-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.sd-range-card.active { background: var(--mp-accent-muted, rgba(163,230,53,0.12)); border-color: var(--mp-accent-border, rgba(163,230,53,0.4)); }
.sd-range-card .rc-label { font-size: 14px; font-weight: 700; color: #fff; }
.sd-range-card.active .rc-label { color: var(--mp-accent, #a3e635); }
.sd-range-card .rc-sub { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.35); }
.sd-date-save-btn { width: 100%; justify-content: center; padding: 13px; font-size: 14px; }

.sd-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; padding: 22px 0 18px; }
.sd-kpi-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 18px 16px 16px; transition: border-color 0.2s ease, transform 0.2s ease; position: relative; overflow: hidden; }
.sd-kpi-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); }
.sd-kpi-card::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1.5px; background: linear-gradient(90deg, transparent, var(--accent, rgba(163,230,53,0.35)), transparent); opacity: 0.6; }
.sd-kpi-card .kpi-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; color: var(--accent, rgba(163,230,53,0.8)); }
.sd-kpi-card .kpi-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.sd-kpi-card .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
.sd-kpi-card .kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.sd-kpi-card .kpi-change { font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.04); border-radius: 20px; padding: 2px 10px 2px 6px; }
.sd-kpi-card .kpi-change.up { color: #4ade80; }
.sd-kpi-card .kpi-change.down { color: #f87171; }
.sd-kpi-card .kpi-change svg { width: 12px; height: 12px; }
.sd-kpi-accent-green { --accent: #a3e635; }
.sd-kpi-accent-blue { --accent: #60a5fa; }
.sd-kpi-accent-purple { --accent: #a78bfa; }
.sd-kpi-accent-amber { --accent: #fbbf24; }
.sd-kpi-accent-rose { --accent: #fb7185; }

.sd-charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: 6px 0 20px; }
@media (max-width: 820px) { .sd-charts-row { grid-template-columns: 1fr; } }
.sd-chart-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 18px 16px 12px; position: relative; }
.sd-chart-card .chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sd-chart-card .chart-head h4 { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.01em; display: flex; align-items: center; gap: 6px; }
.sd-chart-card .chart-head h4 svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.sd-chart-card .chart-pill { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 3px 10px; }
.sd-chart-wrap { position: relative; height: 200px; }
.sd-chart-wrap canvas { width: 100% !important; height: 100% !important; }

.sd-table-section { padding: 12px 0 8px; }
.sd-table-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; }
.sd-table-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sd-table-header h4 { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; }
.sd-table-header h4 svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.sd-table-header .table-badge { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 3px 12px; }
.sd-table-wrap { overflow-x: auto; padding: 0 4px 4px; }
.sd-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sd-table-wrap th { text-align: left; padding: 12px 16px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.05); }
.sd-table-wrap td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.035); color: rgba(255,255,255,0.7); }
.sd-table-wrap tr:last-child td { border-bottom: none; }
.sd-table-wrap tr:hover td { background: rgba(255,255,255,0.03); }
.sd-table-wrap .td-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.td-status.complete, .td-status.completed { background: var(--mp-accent-muted, rgba(163,230,53,0.1)); color: var(--mp-accent, #a3e635); border: 1px solid var(--mp-accent-border, rgba(163,230,53,0.2)); }
.td-status.pending { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.td-status.cancelled, .td-status.rejected, .td-status.refunded { background: rgba(248,113,113,0.08); color: #f87171; border: 1px solid rgba(248,113,113,0.15); }
.td-status.accepted, .td-status.funded, .td-status.delivered, .td-status.active { background: rgba(96,165,250,0.1); color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }
.td-status.disputed { background: rgba(251,113,133,0.1); color: #fb7185; border: 1px solid rgba(251,113,133,0.2); }
.sd-table-empty { text-align: center; padding: 32px 20px; color: rgba(255,255,255,0.25); font-size: 13px; }

.sd-quick-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 20px 0 8px; }
.sd-quick-stat { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 14px 14px 12px; text-align: center; }
.sd-quick-stat .qs-val { font-size: 18px; font-weight: 800; color: #fff; }
.sd-quick-stat .qs-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.3); margin-top: 3px; }

.sd-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; }
.sd-modal-overlay.active { display: flex; }
.sd-modal-card { background: #0e0e12; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px 28px 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.7); }
.sd-modal-card::-webkit-scrollbar { width: 6px; }
.sd-modal-card::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; }
.sd-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sd-modal-header h2 { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.sd-modal-header h2 svg { width: 22px; height: 22px; stroke: var(--mp-accent, #a3e635); fill: none; stroke-width: 2; }
.sd-modal-close { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.5); transition: all 0.15s ease; }
.sd-modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sd-modal-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.sd-form-group { margin-bottom: 16px; }
.sd-form-group label { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.sd-form-group input, .sd-form-group select { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #f0f0f5; font-family: inherit; outline: none; transition: border-color 0.15s ease; }
.sd-form-group input:focus, .sd-form-group select:focus { border-color: var(--mp-accent-border, rgba(163,230,53,0.4)); }
.sd-form-group .sd-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.sd-form-group .sd-checkbox-grid label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); text-transform: none; letter-spacing: normal; cursor: pointer; }
.sd-form-group .sd-checkbox-grid input[type="checkbox"] { accent-color: var(--mp-accent, #a3e635); width: 15px; height: 15px; }

.sd-btn { padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; }
.sd-btn-primary { background: var(--mp-accent, #a3e635); color: #000; }
.sd-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sd-btn-secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.sd-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sd-btn-danger { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.2); color: #f87171; }
.sd-btn-danger:hover { background: rgba(248,113,113,0.2); border-color: rgba(248,113,113,0.4); }
.sd-btn-sm { padding: 6px 12px; font-size: 11px; border-radius: 8px; }
.sd-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.sd-webhook-list { margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; }
.sd-webhook-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.sd-webhook-item .wh-info { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.sd-webhook-item .wh-url { font-size: 13px; font-weight: 600; color: #e0e0e5; word-break: break-all; }
.sd-webhook-item .wh-events { font-size: 11px; color: rgba(255,255,255,0.4); }
.sd-webhook-item .wh-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sd-webhook-empty { text-align: center; padding: 20px 0; color: rgba(255,255,255,0.25); font-size: 13px; }
.sd-test-status { font-size: 12px; font-weight: 600; margin-top: 4px; }
.sd-test-status.ok { color: #4ade80; }
.sd-test-status.err { color: #f87171; }

.sd-empty-state { text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.3); }
.sd-empty-state svg { width: 40px; height: 40px; stroke: rgba(255,255,255,0.15); margin-bottom: 12px; }
.sd-empty-state p { font-size: 14px; }

@media (max-width: 600px) {
  .sd-wrapper { padding: 0 12px 30px; }
  .sd-brand { font-size: 17px; }
  .sd-brand svg { width: 22px; height: 22px; }
  .sd-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sd-kpi-card .kpi-value { font-size: 22px; }
  .sd-filter-bar { gap: 4px; }
  .sd-filter-btn { font-size: 11px; padding: 6px 12px; }
  .sd-date-label { font-size: 10px; padding: 4px 12px; }
  .sd-chart-wrap { height: 160px; }
  .sd-quick-stats { grid-template-columns: repeat(2, 1fr); }
  .sd-table-wrap td, .sd-table-wrap th { padding: 10px 12px; font-size: 12px; }
  .sd-modal-card { padding: 20px; }
  .sd-form-group .sd-checkbox-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .sd-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sd-kpi-card { padding: 14px 12px; }
  .sd-kpi-card .kpi-value { font-size: 19px; }
}

/* ── Boosted/Featured badges hidden, card-slot padding reclaimed ──
   .sr-boost and .sr-premium-badge are still built by _srBadgeCluster()
   in marketplace.js and inserted into .sr-card-slot (see that function
   and mpRenderCard's slot-wrap comment), but both are hidden here per
   explicit request — no visual badge for boosted or premium/featured
   sellers. .sr-card-slot's padding-top (reserved so an absolutely
   positioned badge outside the card wouldn't get clipped by the card's
   own overflow:hidden) is zeroed out since there's no visible badge
   left to reserve space for. */
.sr-boost,
.sr-premium-badge {
  display: none !important;
}
.sr-card-slot {
  padding-top: 0 !important;   /* removes the reserved space */
}