/* ============================================================================
   NASHIK 360 PLUS v3.0 — theme system, sliders and new modules
   Loaded after the built-in styles so it can re-skin them safely.
   ========================================================================== */

/* ---------- 1. THEME PRESETS -------------------------------------------- */
html[data-preset]{--px-ink:#1f1640}
html[data-preset="creative"]{--creative-indigo:#241650;--creative-violet:#6546e8;--creative-teal:#0bb5a4;--creative-coral:#f0526f;--creative-gold:#f5b83d}
html[data-preset="royal"]{--creative-indigo:#3d0a14;--creative-violet:#c21833;--creative-teal:#0f766e;--creative-coral:#e53935;--creative-gold:#f4b400}
html[data-preset="kumbh"]{--creative-indigo:#43160a;--creative-violet:#e8590c;--creative-teal:#c2410c;--creative-coral:#d6336c;--creative-gold:#fab005}
html[data-preset="godavari"]{--creative-indigo:#0b2545;--creative-violet:#1d63ed;--creative-teal:#0891b2;--creative-coral:#f43f5e;--creative-gold:#fbbf24}
html[data-preset="vineyard"]{--creative-indigo:#3b0a2a;--creative-violet:#8e2457;--creative-teal:#5f8a2c;--creative-coral:#e05780;--creative-gold:#e9b44c}
html[data-preset="emerald"]{--creative-indigo:#052e2b;--creative-violet:#059669;--creative-teal:#0284c7;--creative-coral:#f97316;--creative-gold:#facc15}
html[data-preset="midnight"]{--creative-indigo:#0f172a;--creative-violet:#7c3aed;--creative-teal:#14b8a6;--creative-coral:#f472b6;--creative-gold:#fbbf24}
html[data-preset]:not([data-preset="site"]){
  --primary:var(--creative-violet);--secondary:var(--creative-teal);
  --grad-primary:linear-gradient(135deg,var(--creative-violet),color-mix(in srgb,var(--creative-violet) 55%,var(--creative-teal)));
  --shadow-lg:0 18px 48px color-mix(in srgb,var(--creative-violet) 22%,transparent);
  --accent:color-mix(in srgb,var(--creative-violet) 30%,#fff);
}
html[data-preset="site"]{--creative-violet:var(--primary);--creative-teal:var(--secondary);--creative-indigo:color-mix(in srgb,var(--primary) 35%,#000)}
html[data-preset]{--px-deep:color-mix(in srgb,var(--creative-violet) 62%,#000)}

/* Re-skin built-in components so every preset is coherent (the original
   creative layer hard-codes purple shadows). */
html[data-preset] .btn-submit,html[data-preset] .fab.addb{background:linear-gradient(145deg,color-mix(in srgb,var(--creative-violet) 70%,#fff),var(--creative-violet) 60%,var(--px-deep));box-shadow:0 5px 0 var(--px-deep)}
html[data-preset] .header-logo .logo-badge{background:linear-gradient(145deg,var(--creative-coral),var(--creative-violet) 55%,var(--creative-teal));box-shadow:0 5px 0 var(--px-deep)}
html[data-preset] .header-search:focus-within{border-color:var(--creative-violet);box-shadow:0 0 0 4px color-mix(in srgb,var(--creative-violet) 14%,transparent)}
html[data-preset] .auth-launch{background:linear-gradient(145deg,color-mix(in srgb,var(--creative-violet) 10%,#fff),color-mix(in srgb,var(--creative-teal) 12%,#fff))!important;color:var(--creative-violet)!important;box-shadow:0 4px 0 color-mix(in srgb,var(--creative-violet) 30%,#fff)}
html[data-preset] .listing-growth-banner{border-color:color-mix(in srgb,var(--creative-violet) 20%,transparent);background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--creative-violet) 6%,var(--card)) 55%,color-mix(in srgb,var(--creative-teal) 8%,var(--card)))}
html[data-preset] .listing-growth-secondary{color:var(--creative-violet);border-color:color-mix(in srgb,var(--creative-violet) 25%,#fff)}
html[data-preset] .section-head .more{color:var(--creative-violet);background:color-mix(in srgb,var(--creative-violet) 8%,transparent)}
html[data-preset] .bn-item.add .ic{box-shadow:0 6px 16px color-mix(in srgb,var(--creative-violet) 45%,transparent)}
html[data-preset] .field input:focus,html[data-preset] .field select:focus,html[data-preset] .field textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--creative-violet) 12%,transparent)}
html[data-preset] body{background:radial-gradient(circle at 8% 0,color-mix(in srgb,var(--creative-coral) 16%,transparent),transparent 30%),radial-gradient(circle at 95% 12%,color-mix(in srgb,var(--creative-teal) 16%,transparent),transparent 26%),linear-gradient(135deg,color-mix(in srgb,var(--creative-violet) 3%,#fff),color-mix(in srgb,var(--creative-teal) 4%,#fff) 72%,color-mix(in srgb,var(--creative-gold) 6%,#fff))}

/* ---------- 2. DARK MODE ------------------------------------------------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d0f17;--card:#171a26;--text:#eef0f8;--text-2:#c9cddc;--muted:#9aa1b8;--line:#2a2f42;
  --glass-bg:rgba(23,26,38,.78);--glass-br:rgba(255,255,255,.06);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);--shadow:0 8px 24px rgba(0,0,0,.45);--shadow-pro:0 1px 0 rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.45);
  --px-ink:#eef0f8;
}
html[data-theme="dark"] body{background:radial-gradient(circle at 10% 0,color-mix(in srgb,var(--creative-violet) 22%,transparent),transparent 34%),radial-gradient(circle at 92% 14%,color-mix(in srgb,var(--creative-teal) 14%,transparent),transparent 30%),#0d0f17!important;color:var(--text)}
html[data-theme="dark"] .header{background:rgba(16,18,28,.86)!important;border-bottom-color:rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.4)!important}
html[data-theme="dark"] .header-logo,html[data-theme="dark"] .section-head h2,html[data-theme="dark"] .section-title,html[data-theme="dark"] .listing-growth-copy h2{color:var(--text)!important}
html[data-theme="dark"] .header-search,html[data-theme="dark"] .icon-btn{background:#1f2333!important;color:var(--text);border-color:var(--line)!important}
html[data-theme="dark"] .header-search input{color:var(--text)}
html[data-theme="dark"] .bottom-nav{background:rgba(16,18,28,.94)!important;border-top-color:var(--line)}
html[data-theme="dark"] .bn-item.add .ic{border-color:#10121c}
html[data-theme="dark"] .greeting-banner{background:rgba(23,26,38,.92);color:var(--text)}
html[data-theme="dark"] .ticker,html[data-theme="dark"] .listing-growth-banner,html[data-theme="dark"] .search-panel,html[data-theme="dark"] .notif-dropdown,html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .explore-card,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .about-card,html[data-theme="dark"] .page-bar .back,html[data-theme="dark"] .review-item,
html[data-theme="dark"] .detail-desc,html[data-theme="dark"] .filter-chip,html[data-theme="dark"] .prop-card,html[data-theme="dark"] .biz-card,html[data-theme="dark"] .news-card,html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .missing-card,html[data-theme="dark"] .modal,html[data-theme="dark"] .skel-card,html[data-theme="dark"] .donation-card,html[data-theme="dark"] .auth-tabs,html[data-theme="dark"] .smart-grid button,
html[data-theme="dark"] .listing-growth-secondary,html[data-theme="dark"] .detail-row .ic,html[data-theme="dark"] .prop-specs span,html[data-theme="dark"] .page-bar .count{background:var(--card)!important;color:var(--text);border-color:var(--line)!important}
html[data-theme="dark"] .about-section{background:linear-gradient(135deg,#1b1f2e,#141826)!important;color:var(--text)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#11141f;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .field input:focus+label,html[data-theme="dark"] .field input:not(:placeholder-shown)+label,html[data-theme="dark"] .field textarea:focus+label,html[data-theme="dark"] .field textarea:not(:placeholder-shown)+label,html[data-theme="dark"] .field select:focus+label,html[data-theme="dark"] .field select:valid+label{background:var(--card)}
html[data-theme="dark"] .notif-item:hover,html[data-theme="dark"] .search-item:hover,html[data-theme="dark"] .user-menu a:hover{background:#1f2333}
html[data-theme="dark"] .notif-item h5,html[data-theme="dark"] .biz-body h3,html[data-theme="dark"] .prop-body h4,html[data-theme="dark"] .news-card h4,html[data-theme="dark"] .offer-card h4{color:var(--text)}
html[data-theme="dark"] .form-head{border-bottom-color:var(--line)}
html[data-theme="dark"] .gallery .slides>div{background-color:#222}
html[data-theme="dark"] [style*="background:#F3F4F6"],html[data-theme="dark"] [style*="background:#fff;"],html[data-theme="dark"] [style*="background:#F8FAFC"],html[data-theme="dark"] [style*="background:#EEF2F7"]{background:#1f2333!important;color:var(--text)!important}
html[data-theme="dark"] .ticker .track,html[data-theme="dark"] .detail-head h2,html[data-theme="dark"] .page-bar h1{color:var(--text)}
html[data-theme="dark"] img{filter:brightness(.92)}
html[data-theme="dark"] .px-hero img,html[data-theme="dark"] .logo-badge img{filter:none}

/* ---------- 3. SHARED PLUS PRIMITIVES ------------------------------------ */
.px-sec{margin:30px 0}
.px-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.px-head h2{font-family:var(--font-disp);font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.3px;color:var(--px-ink,var(--text))}
.px-head .sub{font-size:13px;color:var(--muted);margin-top:3px;font-weight:500}
.px-head .more{flex-shrink:0;color:var(--creative-violet,var(--primary));font-weight:800;font-size:13px;padding:7px 12px;border-radius:11px;background:color-mix(in srgb,var(--creative-violet,var(--primary)) 9%,transparent)}
.px-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--creative-violet) 12%,transparent);color:var(--creative-violet);white-space:nowrap}
.px-badge.warn{background:#FEF3C7;color:#92400E}.px-badge.ok{background:#D1FAE5;color:#065F46}.px-badge.danger{background:#FEE2E2;color:#991B1B}.px-badge.muted{background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 14px;border-radius:12px;font-weight:800;font-size:13px;background:var(--grad-primary);color:#fff;box-shadow:0 4px 0 var(--px-deep,#35239d);transition:transform .15s,filter .2s;white-space:nowrap}
.px-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--px-deep,#35239d)}
.px-btn.ghost{background:var(--card);color:var(--creative-violet,var(--primary));border:1.5px solid color-mix(in srgb,var(--creative-violet) 28%,transparent);box-shadow:none}
.px-btn.green{background:linear-gradient(145deg,#22c55e,#15803d);box-shadow:0 4px 0 #14532d}
.px-btn.wa{background:linear-gradient(145deg,#25D366,#128C7E);box-shadow:0 4px 0 #0b5e55}
.px-btn.red{background:linear-gradient(145deg,#f43f5e,#be123c);box-shadow:0 4px 0 #881337}
.px-btn.sm{min-height:34px;padding:6px 11px;font-size:12px;border-radius:10px}
.px-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-pro);overflow:hidden;position:relative}
.px-empty{text-align:center;padding:34px 16px;color:var(--muted);background:var(--card);border:1.5px dashed var(--line);border-radius:20px}
.px-empty .em{font-size:44px;margin-bottom:6px}
.px-empty h3{color:var(--text);font-size:16px;margin-bottom:4px}
.px-empty p{font-size:13px;margin-bottom:12px}
.px-muted{color:var(--muted);font-size:12px}
.px-line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 4. GENERIC SLIDER (track + arrows + dots + autoplay) --------- */
.px-slider{position:relative}
.px-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 14px;overscroll-behavior-x:contain}
.px-track::-webkit-scrollbar{display:none}
.px-track>*{scroll-snap-align:start;flex:0 0 auto}
.px-arrow{position:absolute;top:calc(50% - 26px);z-index:4;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:800;background:var(--card);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,.18);border:1px solid var(--line);opacity:0;transition:opacity .2s,transform .2s}
.px-slider:hover .px-arrow{opacity:1}
.px-arrow:disabled{opacity:0!important;pointer-events:none}
.px-arrow.prev{left:-8px}.px-arrow.next{right:-8px}
.px-arrow:active{transform:scale(.9)}
@media(hover:none){.px-arrow{display:none}}
.px-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.px-dots button{width:7px;height:7px;border-radius:99px;background:color-mix(in srgb,var(--muted) 40%,transparent);transition:width .3s var(--ease),background .3s}
.px-dots button.on{width:22px;background:var(--creative-violet,var(--primary))}

/* ---------- 5. HERO SLIDER ---------------------------------------------- */
.px-hero{position:relative;border-radius:26px;overflow:hidden;margin:4px 0 18px;background:var(--px-deep,#241650);box-shadow:0 20px 50px color-mix(in srgb,var(--creative-violet) 28%,transparent);isolation:isolate;touch-action:pan-y}
.px-hero-track{display:flex;height:clamp(220px,42vw,430px);transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.px-hero.h-compact .px-hero-track{height:clamp(180px,32vw,320px)}
.px-hero.h-tall .px-hero-track{height:clamp(260px,52vw,540px)}
.px-hero.fx-fade .px-hero-track{display:block;position:relative;transition:none}
.px-hero.fx-fade .px-hslide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.px-hero.fx-fade .px-hslide.on{opacity:1;z-index:1}
.px-hslide{flex:0 0 100%;position:relative;overflow:hidden;cursor:pointer}
.px-hslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 7s ease}
.px-hslide.on img{transform:scale(1.12)}
.px-hslide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,20,.78) 0%,rgba(8,6,20,.35) 48%,rgba(8,6,20,0) 75%),linear-gradient(0deg,rgba(8,6,20,.55),transparent 45%)}
.px-hcap{position:absolute;left:clamp(18px,5vw,56px);bottom:clamp(36px,7vw,64px);right:22%;z-index:2;color:#fff;max-width:620px}
.px-hcap .kick{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px;margin-bottom:10px}
.px-hcap h2{font-family:var(--font-disp);font-size:clamp(22px,4.2vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.6px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.px-hcap p{font-size:clamp(12px,1.6vw,16px);opacity:.92;margin-top:8px;line-height:1.5;max-width:480px}
.px-hcap .px-btn{margin-top:14px;background:#fff;color:var(--px-deep,#241650);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.px-hslide .px-hcap>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.px-hslide.on .px-hcap>*{opacity:1;transform:none}
.px-hslide.on .px-hcap>*:nth-child(2){transition-delay:.12s}.px-hslide.on .px-hcap>*:nth-child(3){transition-delay:.22s}.px-hslide.on .px-hcap>*:nth-child(4){transition-delay:.32s}
.px-hero .px-hnav{position:absolute;bottom:16px;right:16px;z-index:3;display:flex;gap:8px}
.px-hero .px-hnav button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;font-size:18px;font-weight:800;border:1px solid rgba(255,255,255,.25)}
.px-hero .px-hdots{position:absolute;left:clamp(18px,5vw,56px);bottom:16px;z-index:3;display:flex;gap:6px}
.px-hero .px-hdots button{height:5px;width:18px;border-radius:9px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.px-hero .px-hdots button.on{width:40px}
.px-hero .px-hdots button.on i{position:absolute;inset:0;background:#fff;transform-origin:left;animation:px-progress var(--px-ms,5000ms) linear forwards}
.px-hero.paused .px-hdots button.on i{animation-play-state:paused}
@keyframes px-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.px-hero .px-hcount{position:absolute;top:14px;right:16px;z-index:3;color:#fff;font-size:12px;font-weight:800;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);padding:4px 10px;border-radius:99px;letter-spacing:.5px}
.px-hero .px-ad{position:absolute;top:14px;left:16px;z-index:3;font-size:10px;font-weight:800;background:rgba(255,255,255,.9);color:#111;padding:3px 8px;border-radius:7px;letter-spacing:.6px}
@media(max-width:680px){.px-hero{border-radius:22px;margin:0 0 14px}.px-hcap{right:16px;bottom:44px}.px-hero .px-hnav{display:none}.px-hcap p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* ---------- 6. TODAY IN NASHIK STRIP ------------------------------------ */
.px-today{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:12px;margin-bottom:16px}
.px-tcard{border-radius:20px;padding:14px 16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-pro);min-height:96px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden}
.px-tcard .big{font-size:38px;line-height:1;flex-shrink:0}
.px-tcard .lbl{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.px-tcard .val{font-family:var(--font-disp);font-size:22px;font-weight:800;line-height:1.1;color:var(--text)}
.px-tcard .meta{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.px-tcard.weather{background:linear-gradient(135deg,#0ea5e9,#2563eb 60%,#4338ca);color:#fff;border:none}
.px-tcard.weather .lbl,.px-tcard.weather .meta{color:rgba(255,255,255,.85)}.px-tcard.weather .val{color:#fff}
.px-tcard.weather .fc{display:flex;gap:10px;margin-left:auto;font-size:11px;text-align:center;font-weight:700}
.px-tcard.weather .fc div span{display:block;font-size:18px}
.px-tcard.count{background:linear-gradient(135deg,var(--px-deep),var(--creative-violet) 55%,var(--creative-coral));color:#fff;border:none;cursor:pointer}
.px-tcard.count .lbl{color:rgba(255,255,255,.82)}
.px-cd{display:flex;gap:6px;margin-top:6px}
.px-cd div{background:rgba(255,255,255,.16);border-radius:10px;padding:5px 7px;text-align:center;min-width:46px}
.px-cd b{display:block;font-family:var(--font-disp);font-size:19px;line-height:1.1}
.px-cd small{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;opacity:.85}
@media(max-width:860px){.px-today{grid-template-columns:1fr 1fr}.px-tcard.count{grid-column:1/-1}}
@media(max-width:480px){.px-today{grid-template-columns:1fr 1fr;gap:10px}.px-tcard{padding:12px;min-height:88px;gap:8px;border-radius:18px}.px-tcard:not(.count) .big{display:none}.px-tcard .val{font-size:19px}.px-tcard .lbl{font-size:9.5px;letter-spacing:.6px}.px-tcard .meta{font-size:11px}.px-tcard.weather .fc{display:none}.px-cd div{min-width:0;flex:1}.px-tcard.count .big{font-size:30px}}
@media(max-width:420px){.px-theme-btn{display:none!important}}

/* ---------- 7. QUICK SERVICES DOCK -------------------------------------- */
.px-dock{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:8px}
@media(min-width:760px){.px-dock{grid-template-columns:repeat(10,1fr)}}
.px-dock button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:11px;font-weight:800;color:var(--text-2);transition:transform .18s var(--ease),box-shadow .18s;position:relative;line-height:1.15;text-align:center}
.px-dock button:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.px-dock .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:var(--dock-c,#eef)}
.px-dock .cnt{position:absolute;top:6px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--creative-coral);color:#fff;font-size:10px;display:grid;place-items:center}

/* ---------- 8. MARKET TICKER -------------------------------------------- */
.px-market{display:flex;align-items:stretch;gap:0;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);margin:14px 0}
.px-market .tag{flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:8px 14px;background:linear-gradient(135deg,#166534,#16a34a);color:#fff;font-weight:800;font-size:12px;line-height:1.2;cursor:pointer}
.px-market .tag small{font-size:9.5px;opacity:.85;font-weight:700}
.px-market .rail{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.px-market .run{display:flex;gap:26px;padding:10px 16px;width:max-content;animation:px-marquee var(--px-dur,40s) linear infinite}
.px-market:hover .run{animation-play-state:paused}
.px-market .it{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;white-space:nowrap;color:var(--text)}
.px-market .it .p{font-family:var(--font-disp);font-size:15px}
.px-up{color:#16a34a;font-weight:800;font-size:12px}.px-down{color:#dc2626;font-weight:800;font-size:12px}.px-flat{color:var(--muted);font-size:12px;font-weight:700}
@keyframes px-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 9. CARDS ----------------------------------------------------- */
.px-ev{width:min(78vw,300px);cursor:pointer}
.px-ev .pic{height:150px;position:relative;background:linear-gradient(135deg,var(--creative-violet),var(--creative-teal));overflow:hidden}
.px-ev .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.px-ev:hover .pic img{transform:scale(1.06)}
.px-ev .pic .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;opacity:.9}
.px-date{position:absolute;top:12px;left:12px;background:var(--card);border-radius:14px;padding:6px 10px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.2);min-width:52px}
.px-date b{display:block;font-family:var(--font-disp);font-size:22px;line-height:1;color:var(--creative-violet)}
.px-date small{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.px-ev .bd{padding:13px 14px 14px}
.px-ev h4,.px-job h4,.px-cl h4,.px-lf h4{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.2px;color:var(--text)}
.px-ev .row{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:5px;font-weight:600}
.px-soon{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;background:#facc15;color:#422006;padding:3px 8px;border-radius:8px}

.px-job{width:min(82vw,320px);padding:15px;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.px-job .top{display:flex;gap:11px;align-items:flex-start}
.px-job .logo{width:44px;height:44px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--creative-violet),var(--creative-teal))}
.px-job .co{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.px-chips{display:flex;flex-wrap:wrap;gap:5px}
.px-chips span{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:color-mix(in srgb,var(--creative-violet) 7%,var(--card));color:var(--text-2);border:1px solid var(--line)}
.px-job .sal{font-family:var(--font-disp);font-weight:800;color:#15803d;font-size:15px}
html[data-theme="dark"] .px-job .sal{color:#4ade80}

.px-cl{width:min(60vw,220px);cursor:pointer}
.px-cl .pic{aspect-ratio:1/1;background:color-mix(in srgb,var(--creative-violet) 8%,var(--card));position:relative;overflow:hidden}
.px-cl .pic img{width:100%;height:100%;object-fit:cover}
.px-cl .pic .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:48px}
.px-cl .bd{padding:10px 12px 12px}
.px-cl .price{font-family:var(--font-disp);font-size:18px;font-weight:800;color:var(--text)}
.px-cl h4{font-size:13px;font-weight:700}
.px-sold{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-weight:900;font-size:22px;letter-spacing:3px}

.px-lf{display:flex;gap:12px;padding:12px;cursor:pointer}
.px-lf .pic{width:84px;height:84px;flex-shrink:0;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--creative-violet) 8%,var(--card));display:grid;place-items:center;font-size:34px}
.px-lf .pic img{width:100%;height:100%;object-fit:cover}
.px-lf.lost{border-left:4px solid #ef4444}.px-lf.found{border-left:4px solid #22c55e}

.px-donor{display:flex;align-items:center;gap:12px;padding:13px}
.px-drop{width:54px;height:54px;flex-shrink:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(160deg,#ef4444,#991b1b);color:#fff;display:grid;place-items:center;font-family:var(--font-disp);font-weight:800;font-size:17px;box-shadow:0 6px 14px rgba(185,28,28,.35)}
.px-donor h4{font-size:15px;font-weight:800;color:var(--text)}
.px-donor .act{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.px-donor.off{opacity:.6}

.px-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.px-grid.tight{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.px-grid .px-ev,.px-grid .px-job,.px-grid .px-cl{width:auto}
@media(max-width:480px){.px-grid.tight{grid-template-columns:1fr 1fr;gap:10px}}

/* Testimonials */
.px-quote{width:min(84vw,360px);padding:18px;background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--creative-violet) 6%,var(--card)))}
.px-quote .stars{color:#f59e0b;font-size:15px;letter-spacing:2px}
.px-quote p{font-size:14px;line-height:1.6;margin:8px 0 12px;color:var(--text);font-weight:500}
.px-quote p::before{content:'“';font-family:Georgia,serif;font-size:42px;line-height:0;vertical-align:-14px;margin-right:4px;color:var(--creative-violet);opacity:.5}
.px-quote .who{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:700}
.px-quote .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--creative-coral),var(--creative-violet))}
.px-quote .biz{color:var(--creative-violet);cursor:pointer}

/* Top rated */
.px-top{width:min(70vw,250px);padding:14px;cursor:pointer;text-align:center}
.px-rank{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:14px;color:#fff;background:var(--muted)}
.px-rank.r1{background:linear-gradient(135deg,#fbbf24,#d97706)}.px-rank.r2{background:linear-gradient(135deg,#cbd5e1,#64748b)}.px-rank.r3{background:linear-gradient(135deg,#fdba74,#c2410c)}
.px-top .lg{width:72px;height:72px;border-radius:22px;margin:4px auto 10px;overflow:hidden;display:grid;place-items:center;font-size:32px;background:color-mix(in srgb,var(--creative-violet) 10%,var(--card));border:3px solid var(--card);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.px-top .lg img{width:100%;height:100%;object-fit:cover}
.px-top h4{font-size:14px;font-weight:800;color:var(--text);line-height:1.3}
.px-score{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-weight:800;font-size:13px;color:#b45309;background:#FEF3C7;padding:3px 9px;border-radius:9px}

/* Poll */
.px-poll{padding:18px}
.px-poll h3{font-family:var(--font-disp);font-size:19px;font-weight:800;line-height:1.25;margin-bottom:12px;color:var(--text)}
.px-opt{display:block;width:100%;text-align:left;position:relative;overflow:hidden;border:1.5px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:8px;font-weight:700;font-size:14px;background:var(--card);color:var(--text);transition:border-color .2s,transform .15s}
.px-opt:hover:not(:disabled){border-color:var(--creative-violet);transform:translateX(2px)}
.px-opt .fill{position:absolute;inset:0;width:0;background:color-mix(in srgb,var(--creative-violet) 14%,transparent);transition:width .9s var(--ease);z-index:0}
.px-opt.mine{border-color:var(--creative-violet)}
.px-opt.mine .fill{background:color-mix(in srgb,var(--creative-violet) 24%,transparent)}
.px-opt span{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px}
.px-opt:disabled{cursor:default}

/* ---------- 10. MODULE PAGES -------------------------------------------- */
.px-banner{border-radius:24px;padding:20px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--px-deep),var(--creative-violet) 60%,var(--creative-teal))}
.px-banner::after{content:attr(data-icon);position:absolute;right:-6px;bottom:-26px;font-size:120px;opacity:.16;transform:rotate(-12deg)}
.px-banner h1{font-family:var(--font-disp);font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1.1}
.px-banner p{opacity:.9;font-size:13px;margin-top:4px;max-width:520px}
.px-banner .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:1}
.px-banner .px-btn{background:#fff;color:var(--px-deep);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.px-banner .px-btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.px-banner .back{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;font-size:18px;display:grid;place-items:center}
.px-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.px-search{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:0 12px;min-height:46px}
.px-search input{flex:1;border:0;outline:0;background:transparent;font-size:14px;min-width:0;color:var(--text)}
.px-chiprow{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px}
.px-chiprow::-webkit-scrollbar{display:none}
.px-chip{flex-shrink:0;padding:8px 13px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:12px;font-weight:800;color:var(--text-2);transition:all .2s}
.px-chip.on{background:var(--grad-primary);color:#fff;border-color:transparent}
.px-blood-groups{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:14px}
.px-blood-groups button{padding:10px 0;border-radius:13px;font-family:var(--font-disp);font-weight:800;font-size:16px;background:var(--card);border:1.5px solid var(--line);color:#b91c1c}
.px-blood-groups button.on{background:linear-gradient(160deg,#ef4444,#991b1b);color:#fff;border-color:transparent}
@media(max-width:480px){.px-blood-groups{grid-template-columns:repeat(4,1fr)}}
.px-more{display:block;margin:16px auto 0}

/* Detail sheet */
.px-detail .hero-img{height:220px;background:linear-gradient(135deg,var(--creative-violet),var(--creative-teal));position:relative;overflow:hidden}
.px-detail .hero-img img{width:100%;height:100%;object-fit:cover}
.px-detail .hero-img .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:80px}
.px-detail .in{padding:18px}
.px-detail h2{font-family:var(--font-disp);font-size:22px;line-height:1.2;font-weight:800;color:var(--text)}
.px-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0}
.px-kv div{background:color-mix(in srgb,var(--creative-violet) 5%,var(--card));border:1px solid var(--line);border-radius:13px;padding:9px 11px}
.px-kv small{display:block;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.px-kv b{font-size:13px;color:var(--text);overflow-wrap:anywhere}
.px-desc{font-size:14px;line-height:1.7;color:var(--text-2);white-space:pre-line}
.px-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.px-locked{margin-top:14px;padding:12px 14px;border-radius:14px;background:#EEF2FF;border:1px solid #C7D2FE;color:#3730A3;font-weight:700;font-size:13px}
html[data-theme="dark"] .px-locked{background:#1e1b4b;border-color:#312e81;color:#c7d2fe}

/* Forms (static labels: work for dates/selects too) */
.px-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}
.px-form .full{grid-column:1/-1}
@media(max-width:560px){.px-form{grid-template-columns:1fr}}
.px-f label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--muted);margin:0 0 5px 3px;text-transform:uppercase}
.px-f label i{color:#ef4444;font-style:normal}
.px-f input,.px-f select,.px-f textarea{width:100%;padding:12px 13px;border:2px solid var(--line);border-radius:13px;font-size:14px;background:var(--card);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;font-weight:500}
.px-f textarea{min-height:96px;resize:vertical}
.px-f input:focus,.px-f select:focus,.px-f textarea:focus{border-color:var(--creative-violet);box-shadow:0 0 0 4px color-mix(in srgb,var(--creative-violet) 13%,transparent)}
.px-f .hint{font-size:11px;color:var(--muted);margin:4px 0 0 3px}
.px-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;padding:12px;border-radius:13px;background:color-mix(in srgb,var(--creative-violet) 6%,var(--card));border:1px solid var(--line);color:var(--text-2)}
.px-consent input{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--creative-violet)}

/* ---------- 11. EXPLORE HUB --------------------------------------------- */
.px-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.px-hub button{text-align:left;padding:16px;border-radius:22px;color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.14);transition:transform .2s var(--ease)}
.px-hub button:hover{transform:translateY(-4px)}
.px-hub button::after{content:attr(data-ic);position:absolute;right:-10px;bottom:-18px;font-size:76px;opacity:.22}
.px-hub .ic{font-size:30px}
.px-hub b{font-family:var(--font-disp);font-size:17px;line-height:1.15;display:block}
.px-hub small{font-size:11px;opacity:.9;line-height:1.35;display:block;margin-top:3px;max-width:90%}
.px-hub .n{position:absolute;top:12px;right:12px;font-size:11px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:99px}

/* ---------- 12. THEME PICKER -------------------------------------------- */
.px-theme-btn{font-size:18px}
.px-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px}
.px-modes button{padding:12px 6px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-weight:800;font-size:13px;color:var(--text)}
.px-modes button.on{border-color:var(--creative-violet);background:color-mix(in srgb,var(--creative-violet) 10%,var(--card))}
.px-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 18px 20px}
@media(max-width:480px){.px-presets{grid-template-columns:repeat(2,1fr)}}
.px-presets button{border-radius:16px;border:2px solid var(--line);padding:8px;background:var(--card);text-align:left;color:var(--text)}
.px-presets button.on{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--creative-violet) 30%,transparent)}
.px-presets .sw{height:46px;border-radius:11px;margin-bottom:7px}
.px-presets b{font-size:12px;display:block}
.px-presets small{font-size:10.5px;color:var(--muted)}
.px-sheet-title{padding:14px 18px 8px;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}

/* ---------- 13. SPEED-DIAL FAB ------------------------------------------ */
.fab-stack.px-dial>.fab:not(.px-dial-main){opacity:0;transform:translateY(16px) scale(.6);pointer-events:none;transition:opacity .22s,transform .22s var(--ease)}
.fab-stack.px-dial.open>.fab{opacity:1!important;transform:none!important;pointer-events:auto!important}
.fab-stack.px-dial.open>.fab .lbl{display:block;opacity:1;transform:none;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.fab-stack.px-dial{flex-direction:column-reverse}
.fab.px-dial-main{background:var(--grad-primary);font-size:26px;font-weight:300;transition:transform .3s var(--ease);z-index:2}
.fab-stack.px-dial.open .px-dial-main{transform:rotate(45deg)!important}
.px-dial-scrim{position:fixed;inset:0;z-index:899;background:rgba(10,8,25,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.px-dial-scrim.on{opacity:1;pointer-events:auto}
.fab-stack.px-dial.open>.fab:nth-last-child(2){transition-delay:.02s}.fab-stack.px-dial.open>.fab:nth-last-child(3){transition-delay:.05s}.fab-stack.px-dial.open>.fab:nth-last-child(4){transition-delay:.08s}.fab-stack.px-dial.open>.fab:nth-last-child(5){transition-delay:.11s}

/* ---------- 14. COMPARE -------------------------------------------------- */
.px-cmp-tray{position:fixed;left:50%;transform:translate(-50%,calc(100% + 140px));visibility:hidden;opacity:0;bottom:calc(var(--bottom-h) + 14px + env(safe-area-inset-bottom));z-index:960;background:var(--px-deep,#241650);color:#fff;border-radius:18px;padding:8px 8px 8px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .35s var(--ease),opacity .25s,visibility .35s;max-width:calc(100% - 24px)}
.px-cmp-tray.on{transform:translate(-50%,0);visibility:visible;opacity:1}
.px-cmp-tray .lg{display:flex}
.px-cmp-tray .lg span{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-left:-6px;border:2px solid var(--px-deep,#241650);font-size:14px;overflow:hidden}
.px-cmp-tray .lg span img{width:100%;height:100%;object-fit:cover}
.px-cmp-tray b{font-size:13px;white-space:nowrap}
.px-cmp-tray .px-btn{background:#fff;color:var(--px-deep,#241650);box-shadow:none}
.px-cmp-tray .x{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff}
.px-cmp{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.px-cmp table{width:100%;border-collapse:collapse;min-width:560px}
.px-cmp th,.px-cmp td{padding:12px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;vertical-align:top;color:var(--text)}
.px-cmp th{width:130px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);background:color-mix(in srgb,var(--creative-violet) 4%,var(--card));position:sticky;left:0}
.px-cmp .hd{text-align:center}
.px-cmp .hd .lg{width:64px;height:64px;border-radius:18px;margin:0 auto 6px;overflow:hidden;display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--creative-violet) 10%,var(--card))}
.px-cmp .hd .lg img{width:100%;height:100%;object-fit:cover}
.px-cmp .win{color:#15803d;font-weight:800}
.px-bizbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 18px 0}
.px-bizbar .px-btn{flex:1;min-width:140px}

/* ---------- 15. LISTS (my posts / leads) -------------------------------- */
.px-rows{display:flex;flex-direction:column;gap:10px}
.px-row{display:flex;gap:12px;align-items:center;padding:13px 14px}
.px-row .ic{width:42px;height:42px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--creative-violet) 9%,var(--card))}
.px-row .mid{flex:1;min-width:0}
.px-row h4{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-row .acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

/* Misc */
.px-fade-in{animation:soft-rise .45s ease both}
@media(prefers-reduced-motion:reduce){.px-hero-track,.px-hslide img,.px-market .run{transition:none!important;animation:none!important}}
.fab-stack.px-dial>.fab{overflow:visible}

/* ======================================================================
   v3.1 PLUS PAY — monetization UI
   ====================================================================== */
.px-spons{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;background:rgba(255,255,255,.92);color:#111;padding:3px 8px;border-radius:7px}
.px-feed{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;aspect-ratio:3/1;min-height:150px;background:var(--px-deep);box-shadow:var(--shadow-pro)}
.px-feed img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.px-feed:hover img{transform:scale(1.04)}
.px-feed::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,20,.7),rgba(8,6,20,.15) 60%,transparent)}
.px-feed-cap{position:absolute;z-index:1;left:18px;bottom:16px;right:30%;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.px-feed-cap b{font-family:var(--font-disp);font-size:clamp(17px,2.6vw,26px);line-height:1.15}
.px-feed-cap small{font-size:12.5px;opacity:.92}
.px-feed-cap .px-btn{background:#fff;color:var(--px-deep);box-shadow:none;margin-top:4px}
@media(max-width:560px){.px-feed{aspect-ratio:16/9}.px-feed-cap{right:16px}}
.px-house{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;cursor:pointer;border:2px dashed color-mix(in srgb,var(--creative-violet) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--creative-violet) 7%,var(--card)),color-mix(in srgb,var(--creative-coral) 7%,var(--card)));flex-wrap:wrap}
.px-house-art{font-size:40px;animation:px-wiggle 2.6s ease-in-out infinite}
.px-house b{display:block;font-family:var(--font-disp);font-size:17px;color:var(--text);margin-top:4px}
.px-house small{color:var(--muted);font-size:12.5px}
.px-house .px-spons{background:var(--creative-violet);color:#fff}
.px-house .px-btn{margin-left:auto}
@keyframes px-wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(0)}}
.px-spcard{width:min(76vw,280px);cursor:pointer}
.px-spcard .cv{height:110px;position:relative;background:linear-gradient(135deg,#f59e0b,var(--creative-coral));overflow:hidden}
.px-spcard .cv img{width:100%;height:100%;object-fit:cover}
.px-spcard .cv .px-spons{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#422006}
.px-spcard .bd{padding:0 14px 14px}
.px-spcard .lg{width:56px;height:56px;border-radius:16px;margin-top:-28px;position:relative;background:var(--card);border:3px solid var(--card);box-shadow:0 6px 14px rgba(0,0,0,.15);display:grid;place-items:center;font-size:26px;overflow:hidden;margin-bottom:6px}
.px-spcard .lg img{width:100%;height:100%;object-fit:cover}
.px-spcard h4{font-size:15px;font-weight:800;color:var(--text)}
.px-grow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:680px){.px-grow-grid{grid-template-columns:1fr}}
.px-grow-grid button{position:relative;text-align:left;color:#fff;padding:18px;border-radius:22px;min-height:120px;display:flex;flex-direction:column;gap:3px;overflow:hidden;box-shadow:0 14px 28px rgba(0,0,0,.14);transition:transform .2s var(--ease)}
.px-grow-grid button:hover{transform:translateY(-4px)}
.px-grow-grid .ic{font-size:30px;margin-bottom:4px}
.px-grow-grid b{font-family:var(--font-disp);font-size:19px}
.px-grow-grid small{font-size:12px;opacity:.92;max-width:85%}
.px-grow-grid .go{position:absolute;right:16px;bottom:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:900}
@media(max-width:680px){.px-grow-grid button{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;padding:14px 56px 14px 16px}.px-grow-grid .ic{margin:0;font-size:26px}.px-grow-grid small{flex-basis:100%}}

/* Advertise page */
.px-adv{background:linear-gradient(135deg,#1e1048,#7c3aed 50%,#db2777)!important}
.px-reach{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:1}
.px-reach div{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:14px;padding:8px 14px;min-width:110px}
.px-reach b{display:block;font-family:var(--font-disp);font-size:22px;line-height:1.1}
.px-reach small{font-size:11px;opacity:.85}
.px-rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.px-rate{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-pro)}
.px-rate.best{border-color:var(--creative-violet);box-shadow:0 18px 40px color-mix(in srgb,var(--creative-violet) 22%,transparent)}
.px-ribbon{position:absolute;top:14px;right:14px;font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;background:var(--grad-primary);color:#fff;padding:4px 9px;border-radius:99px}
.px-rate .ic{font-size:34px}
.px-rate h3{font-family:var(--font-disp);font-size:19px;color:var(--text)}
.px-rate .pr{font-family:var(--font-disp);font-size:30px;font-weight:800;color:var(--creative-violet);line-height:1}
.px-rate .pr small{font-size:13px;color:var(--muted);font-weight:700}
.px-rate p{font-size:13px;color:var(--muted);line-height:1.5}
.px-rate ul{font-size:13px;color:var(--text-2);line-height:1.9;margin:4px 0 10px;flex:1}
.px-rate .px-btn{width:100%}
.px-rate.premium-row{flex-direction:row;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap;background:linear-gradient(135deg,color-mix(in srgb,#f59e0b 10%,var(--card)),var(--card))}
.px-rate.premium-row .px-btn{width:auto}
.px-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:680px){.px-steps{grid-template-columns:1fr 1fr}}
.px-steps div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.px-steps span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--grad-primary);color:#fff;font-weight:900;margin-bottom:8px}
.px-steps b{display:block;color:var(--text)}
.px-steps small{color:var(--muted);font-size:12px}

/* Booking wizard */
.px-stepper{display:flex;gap:6px;padding:14px 18px 4px}
.px-stepper div{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--muted);padding-bottom:8px;border-bottom:3px solid var(--line);transition:all .25s}
.px-stepper div.on{color:var(--creative-violet);border-color:var(--creative-violet)}
.px-stepper span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--text);font-size:11px}
.px-stepper div.on span{background:var(--creative-violet);color:#fff}
.px-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 18px}
@media(max-width:480px){.px-packs{grid-template-columns:1fr 1fr}}
.px-packs input,.px-pick input{position:absolute;opacity:0;pointer-events:none}
.px-packs label{cursor:pointer}
.px-packs span{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);border-radius:16px;padding:12px 6px;background:var(--card);position:relative;transition:all .2s}
.px-packs b{font-size:14px;color:var(--text)}
.px-packs em{font-style:normal;font-family:var(--font-disp);font-weight:800;font-size:18px;color:var(--creative-violet)}
.px-packs i{font-style:normal;font-size:10px;font-weight:900;color:#15803d;background:#dcfce7;padding:2px 7px;border-radius:99px}
.px-packs input:checked+span{border-color:var(--creative-violet);background:color-mix(in srgb,var(--creative-violet) 8%,var(--card));transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--creative-violet) 20%,transparent)}
.px-pick{display:flex;flex-direction:column;gap:8px;padding:0 18px 10px}
.px-pick label{cursor:pointer}
.px-pick span{display:block;border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card)}
.px-pick b{display:block;color:var(--text);font-size:14px}
.px-pick small{color:var(--muted);font-size:12px}
.px-pick input:checked+span{border-color:var(--creative-violet);background:color-mix(in srgb,var(--creative-violet) 8%,var(--card))}
.px-preview-wrap{padding:14px 18px 0}
.px-prev{position:relative;border-radius:18px;overflow:hidden;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--creative-violet) 6%,var(--card)) 0 12px,var(--card) 12px 24px);border:2px dashed var(--line)}
.px-prev-hero{aspect-ratio:16/7}.px-prev-feed{aspect-ratio:3/1}.px-prev-ads{aspect-ratio:4/3;max-width:280px}
.px-prev .ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font-size:34px;color:var(--muted)}
.px-prev .ph small{font-size:12px;font-weight:700}
.px-prev img{width:100%;height:100%;object-fit:cover;display:none}
.px-prev.has{border-style:solid}
.px-prev.has img{display:block}
.px-prev.has .ph{display:none}
.px-prev .cap{position:absolute;left:12px;bottom:10px;right:12px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.px-prev.has::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.px-prev .cap{z-index:1}
.px-prev .cap b{font-family:var(--font-disp);font-size:18px;line-height:1.15}
.px-prev:not(.has) .cap{color:var(--muted);text-shadow:none}
.px-paybox{margin:14px 18px 0;border-radius:20px;padding:16px;background:linear-gradient(135deg,var(--px-deep),var(--creative-violet));color:#fff;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.px-paybox .amt small{display:block;font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.8px;font-weight:800}
.px-paybox .amt b{font-family:var(--font-disp);font-size:38px;line-height:1}
.px-paybox .amt span{display:block;font-size:11px;opacity:.85;margin-top:3px}
.px-paybox .qr{display:flex;gap:12px;align-items:center;background:#fff;color:#111;border-radius:16px;padding:10px;margin-left:auto}
.px-paybox .qr img{width:120px;height:120px;border-radius:10px}
.px-paybox .qr>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:170px}
.px-paybox code{font-size:12px;word-break:break-all;background:#f3f4f6;padding:3px 6px;border-radius:6px}
.px-upi-app{display:none}
@media(hover:none){.px-upi-app{display:inline-flex}}
@media(max-width:480px){.px-paybox .qr{margin-left:0;width:100%}}
.px-booknav{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);margin-top:14px;z-index:2}
.px-booknav .tot{margin-left:auto;text-align:right;line-height:1.1}
.px-booknav .tot small{display:block;font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase}
.px-booknav .tot b{font-family:var(--font-disp);font-size:20px;color:var(--text)}
.px-done{text-align:center;padding:34px 20px 26px}
.px-done .burst{font-size:64px;animation:px-pop .6s cubic-bezier(.2,1.6,.4,1) both}
.px-done h2{font-family:var(--font-disp);font-size:24px;color:var(--text);margin-top:6px}
.px-done p{color:var(--muted);font-size:14px;max-width:420px;margin:6px auto 0}
@keyframes px-pop{from{transform:scale(.2) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.px-upsell{display:flex;gap:14px;text-align:left;margin:18px auto 6px;max-width:460px;padding:16px;border-radius:20px;border:2px solid color-mix(in srgb,#f59e0b 50%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#f59e0b 10%,var(--card)),var(--card))}
.px-upsell .ic{font-size:40px}
.px-upsell b{display:block;color:var(--text);font-size:16px}
.px-upsell small{color:var(--muted);font-size:12.5px}
.px-upsell ul{font-size:12.5px;color:var(--text-2);margin-top:6px;line-height:1.7}

/* Create sheet */
.px-create{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 18px 22px}
@media(max-width:520px){.px-create{grid-template-columns:repeat(2,1fr)}}
.px-create button{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:16px 8px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);transition:transform .15s,border-color .2s}
.px-create button:hover{transform:translateY(-3px);border-color:var(--creative-violet)}
.px-create .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--dock-c)}
html[data-theme="dark"] .px-create .ic{background:color-mix(in srgb,var(--dock-c) 18%,#171a26)}
.px-create b{font-size:13.5px;color:var(--text)}
.px-create small{font-size:11px;color:var(--muted)}

/* Smart search section */
.px-sr h6{font-size:11px;font-weight:800;color:var(--muted);padding:8px 0 4px;text-transform:uppercase;letter-spacing:.6px}
.px-banner h1{padding-right:46px}
.px-reach div{flex:1;min-width:90px}@media(max-width:480px){.px-reach b{font-size:19px}.px-reach div{padding:8px 10px}}